@iloveagents/foundry-web-ui 0.21.1 → 0.23.0

package/dist/chart.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The chart subpath — `@iloveagents/foundry-web-ui/chart`.
+ *
+ * Charts are an optional tier: recharts is a real dependency, and a host
+ * that never draws one should not carry it into its module graph. The
+ * root barrel therefore does not re-export this file (same reasoning as
+ * `@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 { 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";
+export { CategoryBarChart, type CategoryBarChartProps, } from "./components/chart/category-bar-chart.js";
+export { DonutChart, type DonutChartProps } from "./components/chart/donut-chart.js";

package/dist/chart.js

@@ -0,0 +1,15 @@
+/**
+ * The chart subpath — `@iloveagents/foundry-web-ui/chart`.
+ *
+ * Charts are an optional tier: recharts is a real dependency, and a host
+ * that never draws one should not carry it into its module graph. The
+ * root barrel therefore does not re-export this file (same reasoning as
+ * `@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 { 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";
+export { CategoryBarChart, } from "./components/chart/category-bar-chart.js";
+export { DonutChart } from "./components/chart/donut-chart.js";

package/dist/components/app-brand.d.ts

@@ -6,20 +6,10 @@ export interface BrandLockup {
     isIcon: boolean;
     name: string;
     showName: boolean;
+    /** Validated CSS height for the mark, or undefined to use the default. */
+    height?: string;
 }
-/**
- * Decide what the brand lockup renders. Exported (underscore-prefixed) so the
- * branching is unit-testable without a DOM renderer — same approach as
- * ``tool-fallback.tsx``.
- *
- * The rule worth stating: whether the name is printed depends on the *shape*
- * of the brand image. A wordmark already spells the brand out, so pairing it
- * with `appName` stutters ("Acme Acme"). An icon says nothing on its
- * own, so it needs the name to complete the lockup. Hence an icon wins over a
- * wordmark when both are set — supplying an icon is an explicit request for
- * "<mark> Product Name", which is what a tenant whose product name differs
- * from their company name is asking for.
- */
+export declare function _safeLogoHeight(value: string | undefined): string | undefined;
 export declare function _resolveBrandLockup(branding: ThemeBranding, mode: "light" | "dark", showName: boolean): BrandLockup;
 export declare function AppBrand({ showName, className, iconClassName, labelClassName, }: {
     showName?: boolean;

package/dist/components/app-brand.js

@@ -15,6 +15,37 @@ import { useThemeRuntime } from "./theme-runtime-provider.js";
  * "<mark> Product Name", which is what a tenant whose product name differs
  * from their company name is asking for.
  */
+/**
+ * A tenant-supplied length, or undefined.
+ *
+ * The value lands in an inline `style`, and a theme is content a tenant
+ * authors — so this allowlists a shape rather than trying to spot bad ones.
+ * Anything else (a `calc()`, a `var()`, a url, a second declaration smuggled
+ * in behind a `;`) fails the pattern and the caller falls back to the default
+ * height, which is always a safe thing to render.
+ */
+//: The tallest mark the header will render. A syntactically valid length is
+//: not a SAFE one: `logoHeight: "320px"` is a plausible typo, and because the
+//: mark is `shrink-0` it would push the sidebar and mobile-header actions off
+//: screen rather than shrinking. Marks above this are clamped, not rejected —
+//: a too-large value should look wrong, not vanish.
+const MAX_LOGO_HEIGHT_REM = 4;
+const REM_PER_UNIT = { rem: 1, em: 1, px: 1 / 16 };
+export function _safeLogoHeight(value) {
+    if (!value)
+        return undefined;
+    // The integer part is optional: `.5rem` is a valid CSS length and a common
+    // spelling, and silently falling back to the default for it would make the
+    // contract a lie.
+    const match = /^(\d*\.?\d+)(px|rem|em)$/.exec(value.trim());
+    if (!match)
+        return undefined;
+    const [, rawNumber, unit] = match;
+    const asRem = Number(rawNumber) * REM_PER_UNIT[unit];
+    if (!Number.isFinite(asRem) || asRem <= 0)
+        return undefined;
+    return asRem > MAX_LOGO_HEIGHT_REM ? `${MAX_LOGO_HEIGHT_REM}rem` : value.trim();
+}
 export function _resolveBrandLockup(branding, mode, showName) {
     const isDark = mode === "dark";
     const pick = (dark, light) => (isDark ? dark || light : light || dark);
@@ -26,12 +57,18 @@ export function _resolveBrandLockup(branding, mode, showName) {
         isIcon: Boolean(iconUrl),
         name: branding.appName || "Foundry UI",
         showName: showName && (Boolean(iconUrl) || !markUrl),
+        height: _safeLogoHeight(branding.logoHeight),
     };
 }
 export function AppBrand({ showName = true, className, iconClassName, labelClassName, }) {
     const runtime = useThemeRuntime();
     const lockup = _resolveBrandLockup(runtime.branding, runtime.mode, showName);
-    return (_jsxs("span", { className: cn("flex items-center gap-2", className), children: [lockup.markUrl ? (_jsx("img", { src: lockup.markUrl, alt: lockup.name, className: cn("shrink-0 object-contain", 
+    return (_jsxs("span", { className: cn("flex items-center gap-2", className), children: [lockup.markUrl ? (_jsx("img", { src: lockup.markUrl, alt: lockup.name, style: lockup.height ? { height: lockup.height } : undefined, className: cn("object-contain", 
+                // A custom mark must be able to SHRINK. `shrink-0` is right for the
+                // 20px default, whose max-widths already fit every header; for a
+                // taller one it is the thing that pushes the collapse button out
+                // of the sidebar instead of letting the image narrow.
+                lockup.height ? "min-w-0 shrink" : "shrink-0", 
                 // Both lock HEIGHT and let width follow the aspect ratio. Sizing an
                 // icon into a square box (`size-5`) silently shrinks any mark that
                 // is not 1:1 — `object-contain` letterboxes a 4:3 glyph to 20x15,
@@ -39,5 +76,16 @@ export function AppBrand({ showName = true, className, iconClassName, labelClass
                 // replaced. Marks are rarely square, so height is the only
                 // dimension worth fixing. The max-width is just a runaway guard:
                 // tighter for an icon, which has to leave room for the name.
-                lockup.isIcon ? "h-5 w-auto max-w-8" : "h-5 w-auto max-w-[7rem]", iconClassName) })) : (_jsx(Layers3, { className: cn("size-5 shrink-0 text-primary", iconClassName) })), lockup.showName && _jsx("span", { className: cn("truncate", labelClassName), children: lockup.name })] }));
+                // `branding.logoHeight` overrides the HEIGHT, and the width is
+                // bounded by the CONTAINER rather than by a number picked here.
+                // The 7rem cap is sized for a 20px mark and would letterbox a
+                // taller one; a bigger fixed cap is just a different wrong number
+                // — 20rem is 320px while an expanded sidebar is 248px, so a 4:1
+                // wordmark at the 4rem ceiling (256px) still overflowed it.
+                // `max-w-full` is whatever the header actually has.
+                lockup.height
+                    ? "w-auto max-w-full"
+                    : lockup.isIcon
+                        ? "h-5 w-auto max-w-8"
+                        : "h-5 w-auto max-w-[7rem]", iconClassName) })) : (_jsx(Layers3, { className: cn("size-5 shrink-0 text-primary", iconClassName) })), lockup.showName && _jsx("span", { className: cn("truncate", labelClassName), children: lockup.name })] }));
 }

package/dist/components/chart/category-bar-chart.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { type ChartConfig } from "./chart-config.js";
+/**
+ * A ranked categorical breakdown ("tokens per department", "runs per
+ * workflow"). Horizontal by default — category names read best on the y
+ * axis. One measure = ONE hue (this is a magnitude comparison, not an
+ * identity chart); `colorByCategory` switches to per-category slot colors
+ * for the identity case, and `maxBars` folds the tail into "Other" instead
+ * of inventing a sixth color.
+ */
+export interface CategoryBarChartProps {
+    data: Array<Record<string, unknown>>;
+    categoryKey: string;
+    valueKey: string;
+    /** Labels/colors. The `valueKey` entry names the measure in the tooltip. */
+    config?: ChartConfig;
+    /** Horizontal bars (default). Set false for vertical columns. */
+    horizontal?: boolean;
+    /** Fold rows beyond this count into an "Other" bar. */
+    maxBars?: number;
+    /** Give each category its own theme slot color (identity, not magnitude). */
+    colorByCategory?: boolean;
+    height?: number;
+    /** Fixed pixel width opts out of responsive measurement (tests, embeds). */
+    width?: number;
+    valueFormatter?: (value: number) => React.ReactNode;
+    /** Renders a category's axis/tooltip label. Defaults to the raw value. */
+    categoryFormatter?: (value: unknown) => string;
+    className?: string;
+}
+export declare function CategoryBarChart({ data, categoryKey, valueKey, config, horizontal, maxBars, colorByCategory, height, width, valueFormatter, categoryFormatter, className, }: CategoryBarChartProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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, }) {
+    // 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 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]);
+    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);
+                        }) })] }) }));
+}

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+/**
+ * The frame every dashboard chart sits in, and the bento grid that lays the
+ * frames out. A shared frame is what makes a dashboard read as one surface:
+ * the same header anatomy, the same padding, the same border on every tile,
+ * so only the DATA differs from card to card.
+ */
+export interface ChartCardProps extends Omit<React.ComponentProps<"div">, "title"> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Right-aligned header slot (a select, a toggle, a menu). */
+    action?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const ChartCard: React.ForwardRefExoticComponent<Omit<ChartCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DashboardGridProps extends React.ComponentProps<"div"> {
+    /** Columns at the desktop breakpoint (1–4). Tiles span via `DashboardTile`. */
+    columns?: 1 | 2 | 3 | 4;
+}
+/** Mobile-first: one column on small screens, `columns` from `lg:` up. */
+declare const DashboardGrid: React.ForwardRefExoticComponent<Omit<DashboardGridProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DashboardTileProps extends React.ComponentProps<"div"> {
+    /** How many grid columns this tile spans at the desktop breakpoint. */
+    span?: 1 | 2 | 3 | 4;
+}
+declare const DashboardTile: React.ForwardRefExoticComponent<Omit<DashboardTileProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ChartCard, DashboardGrid, DashboardTile };

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+const ChartCard = React.forwardRef(({ title, description, action, footer, className, children, ...props }, ref) => (_jsxs("div", { ref: ref, "data-chart-card": "", className: cn("flex flex-col rounded-xl border border-border bg-card p-4 text-card-foreground", className), ...props, children: [_jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "truncate text-sm font-semibold", children: title }), description && _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })] }), action && _jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: action })] }), _jsx("div", { className: "min-h-0 flex-1", children: children }), footer && (_jsx("div", { className: "mt-3 border-t border-border pt-2 text-xs text-muted-foreground", children: footer }))] })));
+ChartCard.displayName = "ChartCard";
+const GRID_COLUMNS = {
+    1: "lg:grid-cols-1",
+    2: "lg:grid-cols-2",
+    3: "lg:grid-cols-3",
+    4: "lg:grid-cols-4",
+};
+/** Mobile-first: one column on small screens, `columns` from `lg:` up. */
+const DashboardGrid = React.forwardRef(({ columns = 3, className, ...props }, ref) => (_jsx("div", { ref: ref, "data-dashboard-grid": "", className: cn("grid grid-cols-1 gap-4", GRID_COLUMNS[columns], className), ...props })));
+DashboardGrid.displayName = "DashboardGrid";
+const TILE_SPANS = {
+    1: "lg:col-span-1",
+    2: "lg:col-span-2",
+    3: "lg:col-span-3",
+    4: "lg:col-span-4",
+};
+const DashboardTile = React.forwardRef(({ span = 1, className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("min-w-0", TILE_SPANS[span], className), ...props })));
+DashboardTile.displayName = "DashboardTile";
+export { ChartCard, DashboardGrid, DashboardTile };

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

@@ -0,0 +1,75 @@
+import type * as React from "react";
+/**
+ * Chart semantics — series → label/color resolution and shared formatting.
+ *
+ * Mirrors the data-table split (`facets.ts` vs `data-table.tsx`): this file
+ * owns MEANING — what a series is called, which color identifies it, how a
+ * number reads — while `chart.tsx` owns what is drawn. Keeping semantics out
+ * of the render tree lets hosts (and agent-written renderers) reason about a
+ * chart's contents without rendering it.
+ */
+export interface ChartSeriesConfig {
+    /** Human label shown in legends and tooltips. Falls back to the key. */
+    label?: React.ReactNode;
+    /**
+     * Explicit color — any CSS color, including a theme token reference such
+     * as `var(--chart-3)`. When omitted, the series takes the theme's
+     * categorical slot for its DECLARED position (see {@link chartSlotColor}).
+     */
+    color?: string;
+}
+/**
+ * One entry per series/category key. The declaration ORDER is the identity
+ * order: colors are assigned by position in this object, so a series keeps
+ * its color when a filter removes its neighbours — color follows the entity,
+ * never its rank.
+ */
+export type ChartConfig = Record<string, ChartSeriesConfig>;
+/** The theme defines exactly five categorical slots (`--chart-1..5`). */
+export declare const CHART_SLOT_COUNT = 5;
+/**
+ * The theme's categorical palette, assigned in fixed order. More than five
+ * series is a design smell, not a palette problem: fold the tail into
+ * "Other" (DonutChart does this via `maxSlices`) or split into small
+ * multiples. The modulo below only keeps an overflowing series defined —
+ * it is not an invitation to cycle.
+ */
+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;
+/** Resolved label for a series: explicit config first, the key itself second. */
+export declare function seriesLabel(config: ChartConfig, key: string): React.ReactNode;
+/**
+ * Series keys are data-column names, which allow characters a CSS custom
+ * ident does not (`metrics.tokens`, `model name`). Everything that writes
+ * or reads a per-series variable goes through this one sanitizer, so the
+ * 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 per-series CSS custom properties a `ChartContainer` injects, so chart
+ * marks can reference {@link seriesVar} and pick up theme changes live.
+ */
+export declare function chartStyleVars(config: ChartConfig): Record<string, string>;
+/** 1029562 → "1M", 63093480 → "63.1M". For axes and stat tiles. */
+export declare function formatCompactNumber(value: number): string;
+/**
+ * Axis label for a time bucket as the usage/statistics APIs emit them:
+ * `"2026-08-26"` → localized "Aug 26", an ISO datetime (hour grain) →
+ * localized "14:00". Anything else passes through unchanged, so categorical
+ * x-axes can share the same formatter.
+ */
+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.
+ */
+export declare function foldCategoryTail<T extends Record<string, unknown>>(rows: T[], options: {
+    categoryKey: keyof T & string;
+    valueKey: keyof T & string;
+    max?: number;
+    otherLabel?: string;
+}): T[];

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

@@ -0,0 +1,114 @@
+/** The theme defines exactly five categorical slots (`--chart-1..5`). */
+export const CHART_SLOT_COUNT = 5;
+/**
+ * The theme's categorical palette, assigned in fixed order. More than five
+ * series is a design smell, not a palette problem: fold the tail into
+ * "Other" (DonutChart does this via `maxSlices`) or split into small
+ * multiples. The modulo below only keeps an overflowing series defined —
+ * it is not an invitation to cycle.
+ */
+export function chartSlotColor(index) {
+    return `var(--chart-${(Math.max(0, index) % CHART_SLOT_COUNT) + 1})`;
+}
+/** Resolved color for a series: explicit config first, theme slot second. */
+export function seriesColor(config, key) {
+    const explicit = config[key]?.color;
+    if (explicit)
+        return explicit;
+    const declaredIndex = Object.keys(config).indexOf(key);
+    return chartSlotColor(declaredIndex === -1 ? 0 : declaredIndex);
+}
+/** Resolved label for a series: explicit config first, the key itself second. */
+export function seriesLabel(config, key) {
+    return config[key]?.label ?? key;
+}
+/**
+ * Series keys are data-column names, which allow characters a CSS custom
+ * ident does not (`metrics.tokens`, `model name`). Everything that writes
+ * or reads a per-series variable goes through this one sanitizer, so the
+ * two sides can never disagree.
+ */
+export function seriesVarName(key) {
+    const safe = key.replace(/[^a-zA-Z0-9_-]/g, "-");
+    if (safe === key)
+        return `--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)}`;
+}
+/** The `var(--color-<key>)` reference marks use for their series color. */
+export function seriesVar(key) {
+    return `var(${seriesVarName(key)})`;
+}
+/**
+ * The per-series CSS custom properties a `ChartContainer` injects, so chart
+ * marks can reference {@link seriesVar} and pick up theme changes live.
+ */
+export function chartStyleVars(config) {
+    const vars = {};
+    for (const key of Object.keys(config)) {
+        vars[seriesVarName(key)] = seriesColor(config, key);
+    }
+    return vars;
+}
+const compactFormatter = new Intl.NumberFormat(undefined, {
+    notation: "compact",
+    maximumFractionDigits: 1,
+});
+/** 1029562 → "1M", 63093480 → "63.1M". For axes and stat tiles. */
+export function formatCompactNumber(value) {
+    if (!Number.isFinite(value))
+        return "–";
+    return compactFormatter.format(value);
+}
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+/**
+ * Axis label for a time bucket as the usage/statistics APIs emit them:
+ * `"2026-08-26"` → localized "Aug 26", an ISO datetime (hour grain) →
+ * localized "14:00". Anything else passes through unchanged, so categorical
+ * x-axes can share the same formatter.
+ */
+export function formatBucketLabel(bucket) {
+    if (typeof bucket !== "string")
+        return String(bucket ?? "");
+    if (DATE_ONLY.test(bucket)) {
+        const d = new Date(`${bucket}T00:00:00`);
+        if (!Number.isNaN(d.getTime())) {
+            return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+        }
+    }
+    const asDate = new Date(bucket);
+    if (bucket.includes("T") && !Number.isNaN(asDate.getTime())) {
+        return asDate.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+    }
+    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.
+ */
+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);
+    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 otherTotal = folded.reduce((sum, row) => sum + (Number(row[valueKey]) || 0), 0);
+    const other = {
+        ...(tail[0] ?? folded[0]),
+        [categoryKey]: otherLabel,
+        [valueKey]: otherTotal,
+    };
+    return [...kept, other];
+}

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

@@ -0,0 +1,75 @@
+import * as React from "react";
+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
+ * theme's `--chart-1..5` slots unless overridden), so every mark inside can
+ * reference its series color with `var(--color-<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
+ * context, so a series is named once and every surface agrees.
+ */
+interface ChartContextValue {
+    config: ChartConfig;
+}
+export declare function useChart(): ChartContextValue;
+export interface ChartContainerProps extends React.ComponentProps<"div"> {
+    config: ChartConfig;
+    /**
+     * When false, children render without a ResponsiveContainer — for fixed
+     * pixel sizes (the chart element then carries width/height itself), and
+     * for test environments where layout measurement never settles.
+     */
+    responsive?: boolean;
+    /** Exactly one chart element — ResponsiveContainer accepts a single child. */
+    children: React.ReactElement;
+}
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Recharts' Tooltip/Legend, re-exported so hosts never import recharts. */
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+type TooltipPayloadEntry = {
+    dataKey?: string | number;
+    name?: string | number;
+    value?: number | string;
+    color?: string;
+    payload?: Record<string, unknown>;
+};
+export interface ChartTooltipContentProps {
+    active?: boolean;
+    label?: unknown;
+    payload?: TooltipPayloadEntry[];
+    className?: string;
+    /** Format the header (usually the x value). Defaults to `String(label)`. */
+    labelFormatter?: (label: unknown) => React.ReactNode;
+    /** Format each row's value. Defaults to `toLocaleString`. */
+    valueFormatter?: (value: number) => React.ReactNode;
+    /** Hide the color indicator squares. */
+    hideIndicator?: boolean;
+    /**
+     * Override the indicator color per row — for charts whose CELLS recolor
+     * the marks (colorByCategory) while the payload still carries the parent
+     * series color.
+     */
+    indicatorColor?: (entryKey: string, label: unknown) => string | undefined;
+}
+/**
+ * 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;
+export interface ChartLegendContentProps {
+    payload?: Array<{
+        dataKey?: string | number;
+        value?: unknown;
+        color?: string;
+    }>;
+    className?: string;
+}
+/** Legend rows named from the chart config, color chips from the payload. */
+declare function ChartLegendContent({ payload, className }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
+/** Compact y-axis tick formatter shared by the chart wrappers. */
+export declare function compactAxisTick(value: unknown): string;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent };

package/dist/components/chart/chart.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { chartStyleVars, formatCompactNumber, seriesLabel, seriesVar, } from "./chart-config.js";
+const ChartContext = React.createContext(null);
+export function useChart() {
+    const ctx = React.useContext(ChartContext);
+    if (!ctx) {
+        throw new Error("useChart must be used inside a <ChartContainer>");
+    }
+    return ctx;
+}
+const ChartContainer = React.forwardRef(({ config, responsive = true, className, children, style, ...props }, ref) => {
+    const vars = React.useMemo(() => chartStyleVars(config), [config]);
+    const contextValue = React.useMemo(() => ({ config }), [config]);
+    return (_jsx(ChartContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, "data-chart": "", className: cn("flex w-full justify-center text-xs", 
+            // A fixed-size chart carries its own dimensions; forcing 16:9
+            // on it would fight them.
+            responsive && "aspect-video", "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground", "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/60", "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border", "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/50", "[&_.recharts-reference-line_line]:stroke-border", "[&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", "[&_.recharts-layer]:outline-none", className), style: { ...vars, ...style }, ...props, children: responsive ? (_jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height: "100%", children: children })) : (children) }) }));
+});
+ChartContainer.displayName = "ChartContainer";
+/** Recharts' Tooltip/Legend, re-exported so hosts never import recharts. */
+const ChartTooltip = RechartsPrimitive.Tooltip;
+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, }) {
+    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) => {
+                    // `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
+                    // changes for them.
+                    const key = String(entry.name ?? entry.dataKey ?? i);
+                    const numeric = typeof entry.value === "number" ? entry.value : Number(entry.value);
+                    const finite = Number.isFinite(numeric);
+                    return (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [!hideIndicator && (_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px]", style: {
+                                            background: indicatorColor?.(key, label) ?? entry.color ?? seriesVar(key),
+                                        } })), _jsx("span", { children: seriesLabel(config, key) })] }), _jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: finite && valueFormatter
+                                    ? valueFormatter(numeric)
+                                    : finite
+                                        ? numeric.toLocaleString()
+                                        : String(entry.value ?? "") })] }, key));
+                }) })] }));
+}
+/** Legend rows named from the chart config, color chips from the payload. */
+function ChartLegendContent({ payload, className }) {
+    const { config } = useChart();
+    if (!payload?.length)
+        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));
+        }) }));
+}
+/** Compact y-axis tick formatter shared by the chart wrappers. */
+export function compactAxisTick(value) {
+    const n = typeof value === "number" ? value : Number(value);
+    return Number.isFinite(n) ? formatCompactNumber(n) : String(value ?? "");
+}
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent };

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

@@ -0,0 +1,29 @@
+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.
+ */
+export interface DonutChartProps {
+    data: Array<Record<string, unknown>>;
+    categoryKey: string;
+    valueKey: string;
+    /** Per-category label/color overrides, keyed by category value. */
+    config?: ChartConfig;
+    /** Fold categories beyond this count into "Other". Default 5. */
+    maxSlices?: number;
+    centerLabel?: React.ReactNode;
+    /** Defaults to the compact-formatted sum of all slices. */
+    centerValue?: React.ReactNode;
+    height?: number;
+    /** Fixed pixel width opts out of responsive measurement (tests, embeds). */
+    width?: number;
+    valueFormatter?: (value: number) => React.ReactNode;
+    showLegend?: boolean;
+    className?: string;
+}
+export declare function DonutChart({ data, categoryKey, valueKey, config, maxSlices, centerLabel, centerValue, height, width, valueFormatter, showLegend, className, }: DonutChartProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, }) {
+    // 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);
+    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 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) => {
+                                        const category = String(row[categoryKey] ?? i);
+                                        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 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));
+                }) }))] }));
+}

package/dist/components/chart/stat-card.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+/**
+ * The KPI tile: one number that matters, with its trend. Dashboards lead
+ * with a row of these — the primary figure top-left, everything else
+ * subordinate — so the card keeps its own hierarchy strict: label small and
+ * muted, value dominant, delta as a badge that carries the ONLY color.
+ */
+export interface StatCardProps extends Omit<React.ComponentProps<"div">, "children"> {
+    label: React.ReactNode;
+    /** The number itself. Strings render verbatim (pre-formatted values). */
+    value: number | string | null | undefined;
+    /** "compact" → 1.03M; "plain" → 1,029,562. Ignored for string values. */
+    format?: "compact" | "plain";
+    /**
+     * Percent change vs the comparison period, e.g. +12.4. Sign picks the
+     * badge color; `invertDelta` flips which sign reads as good (error rates,
+     * costs). Omit when there is no meaningful comparison — a fabricated
+     * trend is worse than none.
+     */
+    delta?: number;
+    /** What the delta compares against, e.g. "vs previous 30 days". */
+    deltaLabel?: React.ReactNode;
+    /** Lower-is-better metrics: a negative delta renders as good. */
+    invertDelta?: boolean;
+    /** Small print under the value (e.g. "63.1 MB across 11 files"). */
+    hint?: React.ReactNode;
+    icon?: React.ReactNode;
+    /** Render a loading skeleton instead of the value. */
+    loading?: boolean;
+}
+declare const StatCard: React.ForwardRefExoticComponent<Omit<StatCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { StatCard };

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { formatCompactNumber } from "./chart-config.js";
+function formatValue(value, format) {
+    if (value === null || value === undefined)
+        return "–";
+    if (typeof value === "string")
+        return value;
+    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";
+    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"
+                            ? "bg-muted text-muted-foreground"
+                            : good
+                                ? "bg-success/10 text-success"
+                                : "bg-destructive/10 text-destructive"), children: [direction !== "flat" && _jsx("span", { "aria-hidden": true, children: direction === "up" ? "▲" : "▼" }), _jsxs("span", { className: "sr-only", children: [direction === "flat" ? "unchanged" : direction, " "] }), Math.abs(delta).toLocaleString(undefined, { maximumFractionDigits: 1 }), "%"] }))] }), (hint || deltaLabel) && (_jsxs("div", { className: "mt-1 truncate text-[11px] text-muted-foreground", children: [hint, hint && deltaLabel ? " · " : null, deltaLabel] }))] }));
+});
+StatCard.displayName = "StatCard";
+export { StatCard };

package/dist/components/chart/time-series-chart.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { type ChartConfig } from "./chart-config.js";
+/**
+ * Change over time — the dashboard's workhorse. Declarative enough that a
+ * renderer (or the builder agent) states WHAT to plot and nothing else:
+ *
+ *   <TimeSeriesChart
+ *     data={rows} xKey="bucket"
+ *     config={{ chat: { label: "Chat" }, workflow: { label: "Workflows" } }}
+ *     kind="area" stacked
+ *   />
+ *
+ * Series colors come from the theme's categorical slots in config order;
+ * the hover layer (crosshair + tooltip) is on by default; one y-axis, ever.
+ */
+export interface TimeSeriesChartProps {
+    data: Array<Record<string, unknown>>;
+    /** Series semantics — keys must match data columns. Order = color order. */
+    config: ChartConfig;
+    /** The x column. Defaults to `"bucket"` (the usage APIs' column). */
+    xKey?: string;
+    /** Which config keys to draw. Defaults to every key in `config`. */
+    series?: string[];
+    kind?: "area" | "line" | "bar";
+    /**
+     * Stack the series (area/bar). A LINE chart has no stacked form —
+     * recharts' Line does not stack — so for `kind="line"` this prop is
+     * ignored; use `kind="area"` when the total matters.
+     */
+    stacked?: boolean;
+    /** Pixel height of the plot (the container spans full width). */
+    height?: number;
+    /** Fixed pixel width opts out of responsive measurement (tests, embeds). */
+    width?: number;
+    valueFormatter?: (value: number) => React.ReactNode;
+    /** X tick + tooltip header formatter. Defaults to bucket-aware dates. */
+    xTickFormatter?: (value: unknown) => string;
+    /** Defaults to true when more than one series is drawn. */
+    showLegend?: boolean;
+    className?: string;
+}
+export declare function TimeSeriesChart({ data, config, xKey, series, kind, stacked, height, width, valueFormatter, xTickFormatter, showLegend, className, }: TimeSeriesChartProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+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";
+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);
+    const legend = showLegend ?? keys.length > 1;
+    const fixed = width !== undefined;
+    const ChartRoot = kind === "line"
+        ? RechartsPrimitive.LineChart
+        : 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, 
+                    // 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/dist/components/sidebar.js

@@ -211,7 +211,7 @@ function statusIconClass(tone) {
             return "text-primary";
         case "neutral":
         default:
-            return "text-sidebar-foreground/60";
+            return "text-sidebar-icon";
     }
 }
 function NavStatusIcon({ statusIcon }) {
@@ -481,7 +481,7 @@ function NavLeafItem({ item, isActive, onClick, depth = 0, }) {
                         ? "text-sidebar-foreground/45 cursor-default"
                         : isActive
                             ? ACTIVE_NAV_TEXT_CLASS
-                            : "text-sidebar-foreground/80"), children: [_jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
+                            : "text-sidebar-foreground/80"), children: [_jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-icon") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
                                 ? ACTIVE_NAV_BADGE_CLASS
                                 : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }));
     }
@@ -492,7 +492,7 @@ function NavLeafItem({ item, isActive, onClick, depth = 0, }) {
             !isDisabled &&
             "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
             !isDisabled &&
-            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: false, childrenUnloaded: item.childrenUnloaded, label: item.label, isActive: isActive && !isDisabled, depth: depth }), _jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: cn("truncate", isActive && !isDisabled && ACTIVE_NAV_TEXT_CLASS), children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] }));
+            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: false, childrenUnloaded: item.childrenUnloaded, label: item.label, isActive: isActive && !isDisabled, depth: depth }), _jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-icon") }), _jsx("span", { className: cn("truncate", isActive && !isDisabled && ACTIVE_NAV_TEXT_CLASS), children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] }));
 }
 function SubNavItems({ items, parentPath, depth = 1, }) {
     const navigate = useNavigate();
@@ -586,7 +586,7 @@ function NestedFolderItem({ item, depth }) {
                                     ? ACTIVE_NAV_ICON_CLASS
                                     : isAncestorActive
                                         ? "text-sidebar-foreground/80"
-                                        : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
+                                        : "text-sidebar-icon") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
                                     ? ACTIVE_NAV_BADGE_CLASS
                                     : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }), isExpanded && item.children && (_jsxs("div", { children: [item.children.map((child) => {
                         const hasNestedChildren = child.children && child.children.length > 0;
@@ -660,7 +660,7 @@ function CollapsibleNavItem({ item, inTree = true }) {
                                 ? ACTIVE_NAV_ICON_CLASS
                                 : ancestor
                                     ? "text-sidebar-foreground/80"
-                                    : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", selected
+                                    : "text-sidebar-icon") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", selected
                                 ? ACTIVE_NAV_BADGE_CLASS
                                 : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }));
         return (_jsxs("div", { ...(isDisabled ? {} : dropTargetProps), ...(isDisabled ? {} : draggableProps), children: [inner(isActive, isAncestorActive), hasChildren && isExpanded && (_jsxs(_Fragment, { children: [_jsx(SubNavItems, { items: item.children, parentPath: item.to }), item.dnd?.canDrop() && _jsx(ContainerDropZone, { dnd: item.dnd })] }))] }));
@@ -679,7 +679,7 @@ function CollapsibleNavItem({ item, inTree = true }) {
         "rounded-xl border border-transparent pr-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70", isActive && cn(ACTIVE_NAV_ROW_CLASS, ACTIVE_NAV_TEXT_CLASS), isDragOver &&
             !isFileDragOver &&
             "bg-sidebar-selected ring-2 ring-inset ring-sidebar-ring/50", isFileDragOver &&
-            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && "opacity-50"), children: ({ isActive }) => (_jsxs(_Fragment, { children: [_jsx(NavTwisty, { hasChildren: false, childrenUnloaded: item.childrenUnloaded, inTree: inTree, label: item.label, isActive: isActive, depth: 0 }), _jsx(item.icon, { className: cn("size-4 shrink-0", isActive ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
+            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && "opacity-50"), children: ({ isActive }) => (_jsxs(_Fragment, { children: [_jsx(NavTwisty, { hasChildren: false, childrenUnloaded: item.childrenUnloaded, inTree: inTree, label: item.label, isActive: isActive, depth: 0 }), _jsx(item.icon, { className: cn("size-4 shrink-0", isActive ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-icon") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
                         ? ACTIVE_NAV_BADGE_CLASS
                         : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] })) }));
 }
@@ -743,7 +743,7 @@ function SidebarResizeHandle() {
 // group is now the source of truth for "you're in a chat right now".
 // Kept as a comment so future spelunkers know it was intentional.
 function CollapsedNavShortcut({ to, label, icon: Icon, isActive, }) {
-    return (_jsx(NavLink, { to: to, children: _jsx(TooltipIconButton, { tooltip: label, side: "right", className: cn(isActive && "border border-transparent bg-sidebar-selected text-sidebar-foreground"), children: _jsx(Icon, { className: cn("size-4", isActive && "text-primary") }) }) }, to));
+    return (_jsx(NavLink, { to: to, children: _jsx(TooltipIconButton, { tooltip: label, side: "right", className: cn(isActive && "border border-transparent bg-sidebar-selected text-sidebar-foreground"), children: _jsx(Icon, { className: cn("size-4", isActive ? "text-primary" : "text-sidebar-icon") }) }) }, to));
 }
 // ---------------------------------------------------------------------------
 // Collapsible nav-group state — persisted per-label in localStorage so the
@@ -946,7 +946,7 @@ function SidebarContent({ collapsed }) {
         e.preventDefault();
     }, []);
     if (collapsed) {
-        return (_jsxs("div", { className: "flex flex-col items-center gap-1 py-3 flex-1", children: [_jsx(TooltipIconButton, { tooltip: "Expand sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeftOpen, { className: "size-5" }) }), _jsx(TooltipIconButton, { tooltip: "New Thread", side: "right", onClick: handleNewConversation, children: _jsx(SquarePen, { className: "size-4" }) }), _jsx("div", { className: "mt-4 flex w-full flex-col items-stretch gap-1", children: navConfig
+        return (_jsxs("div", { className: "flex flex-col items-center gap-1 py-3 flex-1", children: [_jsx(TooltipIconButton, { tooltip: "Expand sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeftOpen, { className: "size-5" }) }), _jsx(TooltipIconButton, { tooltip: "New Thread", side: "right", onClick: handleNewConversation, children: _jsx(SquarePen, { className: "size-4 text-sidebar-icon" }) }), _jsx("div", { className: "mt-4 flex w-full flex-col items-stretch gap-1", children: navConfig
                         .map((group, groupIndex) => {
                         // Modules with a non-flat collapsed rail (e.g. Spaces'
                         // "header + active workspace") supply `collapsedRail`; the
@@ -980,7 +980,7 @@ function SidebarContent({ collapsed }) {
                     // column so icons stay aligned with the rail.
                     _jsx("div", { className: cn("flex flex-col items-center gap-1", visibleIndex > 0 && "mt-2 pt-2 border-t border-sidebar-border/40"), children: items.map(({ to, label, icon, isActive }) => (_jsx(CollapsedNavShortcut, { to: to, label: label, icon: icon, isActive: isActive }, to))) }, `${group.label || ""}-${groupIndex}`))) })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsx(NavLink, { to: "/", className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: _jsx(AppBrand, { iconClassName: "text-primary", labelClassName: "truncate text-sm font-semibold text-sidebar-foreground" }) }), _jsx(TooltipIconButton, { tooltip: "Collapse sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeft, { className: "size-5" }) })] }), _jsx("div", { className: "px-1 mb-0.5", children: _jsxs("button", { type: "button", onClick: handleNewConversation, className: cn("flex items-center gap-2 w-full", "rounded-xl px-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70"), children: [_jsx(SquarePen, { className: "size-4 shrink-0 text-sidebar-foreground/60" }), "New Thread"] }) }), _jsxs("nav", { className: "flex-1 overflow-y-auto px-1 pb-16", onDragOverCapture: preventNativeFileDrop, onDropCapture: preventNativeFileDrop, children: [navConfig.map((group) => (_jsx(NavGroupSection, { group: group }, group.label))), showNavSkeleton && (_jsx("div", { className: "space-y-1 px-1 pt-2", "aria-hidden": "true", children: Array.from({ length: 6 }).map((_, index) => (_jsx("div", { className: "h-7 mx-1 rounded-lg animate-pulse bg-sidebar-accent/40" }, index))) }))] }), _jsx(SidebarFooterActions, {})] }));
+    return (_jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsx(NavLink, { to: "/", className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: _jsx(AppBrand, { iconClassName: "text-primary", labelClassName: "truncate text-sm font-semibold text-sidebar-foreground" }) }), _jsx(TooltipIconButton, { tooltip: "Collapse sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeft, { className: "size-5" }) })] }), _jsx("div", { className: "px-1 mb-0.5", children: _jsxs("button", { type: "button", onClick: handleNewConversation, className: cn("flex items-center gap-2 w-full", "rounded-xl px-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70"), children: [_jsx(SquarePen, { className: "size-4 shrink-0 text-sidebar-icon" }), "New Thread"] }) }), _jsxs("nav", { className: "flex-1 overflow-y-auto px-1 pb-16", onDragOverCapture: preventNativeFileDrop, onDropCapture: preventNativeFileDrop, children: [navConfig.map((group) => (_jsx(NavGroupSection, { group: group }, group.label))), showNavSkeleton && (_jsx("div", { className: "space-y-1 px-1 pt-2", "aria-hidden": "true", children: Array.from({ length: 6 }).map((_, index) => (_jsx("div", { className: "h-7 mx-1 rounded-lg animate-pulse bg-sidebar-accent/40" }, index))) }))] }), _jsx(SidebarFooterActions, {})] }));
 }
 function SidebarFooterActions() {
     const footerActions = useNavStore((s) => s.footerActions);

package/dist/components/theme-runtime-provider.js

@@ -47,8 +47,8 @@ function currentlyOurs(root, name) {
     const written = rootThemeWritten.get(name);
     if (written === undefined)
         return true;
-    return (root.style.getPropertyValue(name) === written.value
-        && root.style.getPropertyPriority(name) === written.priority);
+    return (root.style.getPropertyValue(name) === written.value &&
+        root.style.getPropertyPriority(name) === written.priority);
 }
 function rememberWrite(root, name) {
     // Read back rather than storing what we passed: the browser normalises the

package/dist/lib/theme-runtime.d.ts

@@ -30,6 +30,16 @@ export interface ThemeSidebarSlots {
     sidebarAccentForeground?: string;
     sidebarSelected?: string;
     sidebarSelectedForeground?: string;
+    /**
+     * Colour of the icons in the sidebar's idle rows.
+     *
+     * Separate from `sidebarForeground` because a brand whose mark is a colour
+     * usually wants the icons in that colour and the LABELS still readable —
+     * tinting `sidebarForeground` to reach the icons drags every label with it.
+     * Unset resolves to the previous behaviour (the label colour at 60%), so no
+     * existing theme moves.
+     */
+    sidebarIcon?: string;
     sidebarBorder?: string;
     sidebarRing?: string;
 }
@@ -99,6 +109,21 @@ export interface ThemeBranding {
      */
     iconUrl?: string;
     darkIconUrl?: string;
+    /**
+     * Rendered height of the mark, as a CSS length (`"2rem"`, `"32px"`).
+     * Defaults to the 20px lockup height when unset.
+     *
+     * A wordmark is not interchangeable with an icon at one fixed height. Marks
+     * that carry a tagline under the name — a common wordmark shape — turn the
+     * tagline into an unreadable smear at 20px, and the whole lockup reads as
+     * undersized next to the product name. The tenant supplying the asset is the
+     * only one who knows how much height it needs, so this is theirs to set.
+     *
+     * Validated, not interpolated blindly: the value reaches an inline style and
+     * themes are tenant-authored content, so anything that is not a plain
+     * non-negative CSS length in px/rem/em is ignored in favour of the default.
+     */
+    logoHeight?: string;
 }
 export interface ThemeDefinition {
     light?: ThemeColorSlots;

package/dist/lib/theme-runtime.js

@@ -28,6 +28,7 @@ const SIDEBAR_KEYS = [
     "sidebarAccentForeground",
     "sidebarSelected",
     "sidebarSelectedForeground",
+    "sidebarIcon",
     "sidebarBorder",
     "sidebarRing",
 ];
@@ -84,6 +85,7 @@ const BRANDING_KEYS = [
     "darkLogoUrl",
     "iconUrl",
     "darkIconUrl",
+    "logoHeight",
 ];
 function cleanObject(value, keys) {
     if (!value || typeof value !== "object" || Array.isArray(value))
@@ -188,6 +190,7 @@ function toCssVars(colors, sidebar, status, charts, typography, radius, app) {
         ["--sidebar-accent-foreground"]: sidebar.sidebarAccentForeground,
         ["--sidebar-selected"]: sidebar.sidebarSelected,
         ["--sidebar-selected-foreground"]: sidebar.sidebarSelectedForeground,
+        ["--sidebar-icon"]: sidebar.sidebarIcon,
         ["--sidebar-border"]: sidebar.sidebarBorder,
         ["--sidebar-ring"]: sidebar.sidebarRing,
         ["--success"]: status.success,
@@ -248,6 +251,7 @@ function defaultSidebar(colors) {
         sidebarAccentForeground: colors.accentForeground,
         sidebarSelected: colors.muted,
         sidebarSelectedForeground: colors.foreground,
+        sidebarIcon: `color-mix(in srgb, ${colors.foreground} 60%, transparent)`,
         sidebarBorder: colors.border,
         sidebarRing: colors.ring,
     };
@@ -376,6 +380,7 @@ export const FOUNDRY_VIOLET_THEME = {
             sidebarAccentForeground: "color-mix(in srgb, var(--foreground) 92%, var(--primary) 8%)",
             sidebarSelected: "var(--muted)",
             sidebarSelectedForeground: "var(--foreground)",
+            sidebarIcon: "color-mix(in srgb, var(--sidebar-foreground) 60%, transparent)",
             sidebarBorder: "color-mix(in srgb, var(--border) 96%, var(--foreground) 4%)",
             sidebarRing: "oklch(43% 0.24 286)",
         },
@@ -388,6 +393,7 @@ export const FOUNDRY_VIOLET_THEME = {
             sidebarAccentForeground: "color-mix(in srgb, var(--foreground) 90%, white 10%)",
             sidebarSelected: "color-mix(in srgb, var(--muted) 78%, var(--background) 22%)",
             sidebarSelectedForeground: "var(--foreground)",
+            sidebarIcon: "color-mix(in srgb, var(--sidebar-foreground) 60%, transparent)",
             sidebarBorder: "color-mix(in srgb, var(--border) 90%, white 10%)",
             sidebarRing: "oklch(0.72 0.18 286)",
         },

package/dist/styles.css

@@ -33,6 +33,7 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-selected: var(--sidebar-selected);
   --color-sidebar-selected-foreground: var(--sidebar-selected-foreground);
+  --color-sidebar-icon: var(--sidebar-icon);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-success: var(--success);
@@ -77,6 +78,7 @@
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.967 0.001 286.375);
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-icon: color-mix(in srgb, var(--sidebar-foreground) 60%, transparent);
   --sidebar-selected: var(--muted);
   --sidebar-selected-foreground: var(--foreground);
   --sidebar-border: oklch(0.92 0.004 286.32);
@@ -122,6 +124,7 @@
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.274 0.006 286.033);
   --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-icon: color-mix(in srgb, var(--sidebar-foreground) 60%, transparent);
   --sidebar-selected: color-mix(in srgb, var(--muted) 78%, var(--background) 22%);
   --sidebar-selected-foreground: var(--foreground);
   --sidebar-border: oklch(1 0 0 / 10%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.21.1",
+  "version": "0.23.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": [
@@ -27,6 +27,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./chart": {
+      "types": "./dist/chart.d.ts",
+      "import": "./dist/chart.js"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "files": [
@@ -38,16 +42,16 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router": "^7.0.0",
-    "@assistant-ui/react": "^0.15.1",
     "@ag-ui/client": "^0.0.52",
     "@ag-ui/core": "^0.0.52",
-    "zustand": "^5.0.0",
-    "lucide-react": ">=0.400.0",
+    "@assistant-ui/react": "^0.15.1",
     "@azure/msal-browser": "^5.0.0",
-    "@azure/msal-react": "^5.0.0"
+    "@azure/msal-react": "^5.0.0",
+    "lucide-react": ">=0.400.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.0.0",
+    "zustand": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "@azure/msal-browser": {
@@ -69,10 +73,11 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "react-markdown": "^10.0.0",
+    "recharts": "^3.10.1",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^3.5.0",
-    "@iloveagents/foundry-agent": "^0.21.1",
-    "@iloveagents/foundry-web-primitives": "^0.21.1"
+    "@iloveagents/foundry-agent": "^0.23.0",
+    "@iloveagents/foundry-web-primitives": "^0.23.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",