@dudousxd/nestjs-telescope-ui 2.0.0 → 2.0.1

package/dist/react/components/cache-badge.js

@@ -1,4 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Cache entries carry `content: { operation, hit, key, tier?, stale?, ... }`. This
+ * module derives a small status pill: `HIT` reads `--good`, `MISS` reads `--warn`,
+ * and `SET`/`DEL`/`CLEAR` are neutral. A grace-served (`stale`) hit reads warn to
+ * stand out from a fresh hit; a `tier` (e.g. l1/l2) is appended when present.
+ */
+import { Badge, badgeVariants } from '../ui/index.js';
+const OPERATIONS = new Set(['get', 'set', 'delete', 'clear']);
 /** Narrow unknown entry content to the cache shape without casts. */
 function isCacheContent(content) {
     if (typeof content !== 'object' || content === null)
@@ -6,30 +14,36 @@ function isCacheContent(content) {
     if (!('operation' in content) || !('hit' in content) || !('key' in content))
         return false;
     const { operation, hit, key } = content;
-    if (operation !== 'get' && operation !== 'set')
+    if (typeof operation !== 'string' || !OPERATIONS.has(operation))
         return false;
     if (hit !== null && typeof hit !== 'boolean')
         return false;
     return typeof key === 'string';
 }
-const PILL_BASE = 'rounded border px-1.5 py-0.5 text-[10px] font-medium';
+function info(label, variant) {
+    return { label, variant, className: badgeVariants({ variant }) };
+}
 /**
  * Pure mapping from entry content to a cache pill descriptor; `null` for any
- * non-cache or unrecognized content. Mirrors the bordered-pill token style used
- * by the queue action buttons.
+ * non-cache or unrecognized content.
  */
 export function cacheBadge(content) {
     if (!isCacheContent(content))
         return null;
-    if (content.operation === 'set') {
-        return { label: 'SET', className: `${PILL_BASE} border-zinc-700 text-zinc-300` };
-    }
+    const tierSuffix = typeof content.tier === 'string' ? ` ${content.tier.toUpperCase()}` : '';
+    if (content.operation === 'set')
+        return info(`SET${tierSuffix}`, 'muted');
+    if (content.operation === 'delete')
+        return info('DEL', 'muted');
+    if (content.operation === 'clear')
+        return info('CLEAR', 'muted');
     if (content.hit === true) {
-        return { label: 'HIT', className: `${PILL_BASE} border-emerald-500/40 text-emerald-300` };
-    }
-    if (content.hit === false) {
-        return { label: 'MISS', className: `${PILL_BASE} border-amber-500/40 text-amber-300` };
+        // A grace-period (stale) hit warns so it's distinguishable from a fresh hit.
+        const stale = content.stale === true;
+        return info(`${stale ? 'HIT·STALE' : 'HIT'}${tierSuffix}`, stale ? 'warn' : 'good');
     }
+    if (content.hit === false)
+        return info(`MISS${tierSuffix}`, 'warn');
     return null;
 }
 /** Small cache hit/miss/set status pill; renders nothing for non-cache content. */
@@ -37,6 +51,6 @@ export function CacheBadge({ content }) {
     const badge = cacheBadge(content);
     if (badge === null)
         return null;
-    return _jsx("span", { className: badge.className, children: badge.label });
+    return _jsx(Badge, { variant: badge.variant, children: badge.label });
 }
 //# sourceMappingURL=cache-badge.js.map

package/dist/react/components/cache-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"cache-badge.js","sourceRoot":"","sources":["../../../src/react/components/cache-badge.tsx"],"names":[],"mappings":";AAYA,qEAAqE;AACrE,SAAS,cAAc,CAAC,OAAgB;IACtC,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,IAAI;QAAE,OAAO,KAAK,CAAC;IAClE,IAAI,CAAC,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,OAAO,CAAC;QAAE,OAAO,KAAK,CAAC;IAC1F,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC;IACxC,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,KAAK;QAAE,OAAO,KAAK,CAAC;IAC7D,IAAI,GAAG,KAAK,IAAI,IAAI,OAAO,GAAG,KAAK,SAAS;QAAE,OAAO,KAAK,CAAC;IAC3D,OAAO,OAAO,GAAG,KAAK,QAAQ,CAAC;AACjC,CAAC;AAOD,MAAM,SAAS,GAAG,sDAAsD,CAAC;AAEzE;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,OAAgB;IACzC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;QAAE,OAAO,IAAI,CAAC;IAC1C,IAAI,OAAO,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;QAChC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,gCAAgC,EAAE,CAAC;IACnF,CAAC;IACD,IAAI,OAAO,CAAC,GAAG,KAAK,IAAI,EAAE,CAAC;QACzB,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,yCAAyC,EAAE,CAAC;IAC5F,CAAC;IACD,IAAI,OAAO,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;QAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,qCAAqC,EAAE,CAAC;IACzF,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,mFAAmF;AACnF,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAwB;IAC1D,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAChC,OAAO,eAAM,SAAS,EAAE,KAAK,CAAC,SAAS,YAAG,KAAK,CAAC,KAAK,GAAQ,CAAC;AAChE,CAAC"}
+{"version":3,"file":"cache-badge.js","sourceRoot":"","sources":["../../../src/react/components/cache-badge.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AACH,OAAO,EAAE,KAAK,EAAmB,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAUvE,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAE9D,qEAAqE;AACrE,SAAS,cAAc,CAAC,OAAgB;IACtC,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,IAAI;QAAE,OAAO,KAAK,CAAC;IAClE,IAAI,CAAC,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,OAAO,CAAC;QAAE,OAAO,KAAK,CAAC;IAC1F,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC;IACxC,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC;QAAE,OAAO,KAAK,CAAC;IAC9E,IAAI,GAAG,KAAK,IAAI,IAAI,OAAO,GAAG,KAAK,SAAS;QAAE,OAAO,KAAK,CAAC;IAC3D,OAAO,OAAO,GAAG,KAAK,QAAQ,CAAC;AACjC,CAAC;AAcD,SAAS,IAAI,CAAC,KAAa,EAAE,OAA2C;IACtE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AACnE,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,OAAgB;IACzC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;QAAE,OAAO,IAAI,CAAC;IAC1C,MAAM,UAAU,GAAG,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5F,IAAI,OAAO,CAAC,SAAS,KAAK,KAAK;QAAE,OAAO,IAAI,CAAC,MAAM,UAAU,EAAE,EAAE,OAAO,CAAC,CAAC;IAC1E,IAAI,OAAO,CAAC,SAAS,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAChE,IAAI,OAAO,CAAC,SAAS,KAAK,OAAO;QAAE,OAAO,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACjE,IAAI,OAAO,CAAC,GAAG,KAAK,IAAI,EAAE,CAAC;QACzB,6EAA6E;QAC7E,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC;QACrC,OAAO,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,GAAG,UAAU,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACtF,CAAC;IACD,IAAI,OAAO,CAAC,GAAG,KAAK,KAAK;QAAE,OAAO,IAAI,CAAC,OAAO,UAAU,EAAE,EAAE,MAAM,CAAC,CAAC;IACpE,OAAO,IAAI,CAAC;AACd,CAAC;AAED,mFAAmF;AACnF,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAwB;IAC1D,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAChC,OAAO,KAAC,KAAK,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,YAAG,KAAK,CAAC,KAAK,GAAS,CAAC;AAC9D,CAAC"}

package/dist/react/components/charts/area-chart-card.d.ts

@@ -1,16 +1,24 @@
+import type { JSX, ReactNode } from 'react';
+import { type ChartSelection } from './chart-selection.js';
 export interface AreaChartPoint {
     /** X-axis label (e.g. formatted time). */
     label: string;
     /** Series value. */
     value: number;
 }
-/** Single-series time area chart with a subtle gradient fill and hover tooltip. */
-export declare function AreaChartCard({ title, data, right, color, valueLabel, height, }: {
+/** Single-series time area chart with a gradient fill, a hover card and an optional brush. */
+export declare function AreaChartCard({ title, data, right, color, valueLabel, height, brush, valueFormatter, onSelect, }: {
     title: string;
     data: AreaChartPoint[];
-    right?: React.ReactNode;
+    right?: ReactNode;
     color?: string;
     valueLabel?: string;
     height?: number;
+    /** Force the range brush on or off. Defaults to on once the series is long. */
+    brush?: boolean;
+    /** Format the value in the hover card (the axis is left alone). */
+    valueFormatter?: (value: number) => ReactNode;
+    /** Drill-down: called with the point under a click. Omit and the chart is inert. */
+    onSelect?: (selection: ChartSelection) => void;
 }): JSX.Element;
 //# sourceMappingURL=area-chart-card.d.ts.map

package/dist/react/components/charts/area-chart-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"area-chart-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/area-chart-card.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,cAAc;IAC7B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,mFAAmF;AACnF,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAkB,EAClB,UAAoB,EACpB,MAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,GAAG,CAAC,OAAO,CAqDd"}
+{"version":3,"file":"area-chart-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/area-chart-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW5C,OAAO,EAAE,KAAK,cAAc,EAAoC,MAAM,sBAAsB,CAAC;AAG7F,MAAM,WAAW,cAAc;IAC7B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAWD,8FAA8F;AAC9F,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAkB,EAClB,UAAoB,EACpB,MAAY,EACZ,KAAK,EACL,cAAc,EACd,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mEAAmE;IACnE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CAChD,GAAG,GAAG,CAAC,OAAO,CA0Ed"}

package/dist/react/components/charts/area-chart-card.js

@@ -1,12 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { useId, useMemo } from 'react';
+import { Area, AreaChart, Brush, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { ChartContainer, ChartTooltip, ChartTooltipContent, chartBrushProps, chartColorVar, } from '../../ui/chart.js';
 import { ChartCard, ChartEmptyState } from './chart-card.js';
-import { ACCENT_HEX, axisTickStyle, chartTheme, tooltipContentStyle, tooltipItemStyle, tooltipLabelStyle, } from './chart-theme.js';
-/** Single-series time area chart with a subtle gradient fill and hover tooltip. */
-export function AreaChartCard({ title, data, right, color = ACCENT_HEX, valueLabel = 'value', height = 220, }) {
+import { activeChartLabel, chartSelection } from './chart-selection.js';
+import { ACCENT_HEX, chartConfig } from './chart-theme.js';
+/**
+ * Number of points past which the chart gets a range brush.
+ *
+ * A brush costs ~20px of an already short body and only earns it when the window
+ * is long enough that the interesting part is a slice of it; over a dozen buckets
+ * it is a scrollbar for a page that already fits.
+ */
+const BRUSH_MIN_POINTS = 24;
+/** Single-series time area chart with a gradient fill, a hover card and an optional brush. */
+export function AreaChartCard({ title, data, right, color = ACCENT_HEX, valueLabel = 'value', height = 220, brush, valueFormatter, onSelect, }) {
     const gradientId = useId();
     const bodyHeight = height - 64;
-    return (_jsx(ChartCard, { title: title, right: right, height: bodyHeight, children: data.length === 0 ? (_jsx(ChartEmptyState, { height: bodyHeight })) : (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(AreaChart, { data: data, margin: { top: 4, right: 8, bottom: 0, left: -16 }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.35 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })] }) }), _jsx(CartesianGrid, { stroke: chartTheme.gridStroke, vertical: false }), _jsx(XAxis, { dataKey: "label", tick: axisTickStyle, stroke: chartTheme.axisStroke, tickLine: false, minTickGap: 24 }), _jsx(YAxis, { tick: axisTickStyle, stroke: chartTheme.axisStroke, tickLine: false, width: 40, allowDecimals: false }), _jsx(Tooltip, { contentStyle: tooltipContentStyle, labelStyle: tooltipLabelStyle, itemStyle: tooltipItemStyle, cursor: { stroke: chartTheme.axisStroke } }), _jsx(Area, { type: "monotone", dataKey: "value", name: valueLabel, stroke: color, strokeWidth: 2, fill: `url(#${gradientId})`, isAnimationActive: false, dot: false, activeDot: { r: 3 } })] }) })) }));
+    const config = useMemo(() => chartConfig(['value'], () => color, () => valueLabel), [color, valueLabel]);
+    const showBrush = brush ?? data.length >= BRUSH_MIN_POINTS;
+    // Interaction props are built conditionally: under `exactOptionalPropertyTypes`
+    // an explicit `undefined` is not assignable to Recharts' optional handlers, and
+    // a chart with no drill-down target must not advertise a pointer cursor.
+    const clickProps = onSelect
+        ? {
+            onClick: (state) => {
+                const label = activeChartLabel(state);
+                if (label === undefined)
+                    return;
+                const point = data.find((p) => p.label === label);
+                onSelect(chartSelection({ label, series: 'value', value: point?.value }));
+            },
+            className: 'cursor-pointer',
+        }
+        : {};
+    return (_jsx(ChartCard, { title: title, right: right, height: bodyHeight, children: data.length === 0 ? (_jsx(ChartEmptyState, { height: bodyHeight })) : (_jsx(ChartContainer, { config: config, children: _jsxs(AreaChart, { data: data, margin: { top: 4, right: 8, bottom: 0, left: -16 }, ...clickProps, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: chartColorVar('value'), stopOpacity: 0.35 }), _jsx("stop", { offset: "100%", stopColor: chartColorVar('value'), stopOpacity: 0 })] }) }), _jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "label", tickLine: false, minTickGap: 24 }), _jsx(YAxis, { tickLine: false, width: 40, allowDecimals: false }), _jsx(ChartTooltip, { cursor: { stroke: 'var(--line)' }, content: _jsx(ChartTooltipContent, { ...(valueFormatter ? { valueFormatter: (v) => valueFormatter(v) } : {}) }) }), _jsx(Area, { type: "monotone", dataKey: "value", name: valueLabel, stroke: chartColorVar('value'), strokeWidth: 2, fill: `url(#${gradientId})`, isAnimationActive: false, dot: false, activeDot: { r: 3 } }), showBrush && _jsx(Brush, { ...chartBrushProps, dataKey: "label" })] }) })) }));
 }
 //# sourceMappingURL=area-chart-card.js.map

package/dist/react/components/charts/area-chart-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"area-chart-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/area-chart-card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC9B,OAAO,EACL,IAAI,EACJ,SAAS,EACT,aAAa,EACb,mBAAmB,EACnB,OAAO,EACP,KAAK,EACL,KAAK,GACN,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,aAAa,EACb,UAAU,EACV,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAS1B,mFAAmF;AACnF,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,GAAG,UAAU,EAClB,UAAU,GAAG,OAAO,EACpB,MAAM,GAAG,GAAG,GAQb;IACC,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,MAAM,GAAG,EAAE,CAAC;IAC/B,OAAO,CACL,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,YACtD,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,KAAC,eAAe,IAAC,MAAM,EAAE,UAAU,GAAI,CACxC,CAAC,CAAC,CAAC,CACF,KAAC,mBAAmB,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,YAC7C,MAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,aACvE,yBACE,0BAAgB,EAAE,EAAE,UAAU,EAAE,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,aACzD,eAAM,MAAM,EAAC,IAAI,EAAC,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,GAAI,EACzD,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,GAAI,IACzC,GACZ,EACP,KAAC,aAAa,IAAC,MAAM,EAAE,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,GAAI,EACjE,KAAC,KAAK,IACJ,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,UAAU,CAAC,UAAU,EAC7B,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,EAAE,GACd,EACF,KAAC,KAAK,IACJ,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,UAAU,CAAC,UAAU,EAC7B,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,EAAE,EACT,aAAa,EAAE,KAAK,GACpB,EACF,KAAC,OAAO,IACN,YAAY,EAAE,mBAAmB,EACjC,UAAU,EAAE,iBAAiB,EAC7B,SAAS,EAAE,gBAAgB,EAC3B,MAAM,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,UAAU,EAAE,GACzC,EACF,KAAC,IAAI,IACH,IAAI,EAAC,UAAU,EACf,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,KAAK,EACb,WAAW,EAAE,CAAC,EACd,IAAI,EAAE,QAAQ,UAAU,GAAG,EAC3B,iBAAiB,EAAE,KAAK,EACxB,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GACnB,IACQ,GACQ,CACvB,GACS,CACb,CAAC;AACJ,CAAC"}
+{"version":3,"file":"area-chart-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/area-chart-card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAC/E,OAAO,EACL,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAuB,gBAAgB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAS3D;;;;;;GAMG;AACH,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B,8FAA8F;AAC9F,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,GAAG,UAAU,EAClB,UAAU,GAAG,OAAO,EACpB,MAAM,GAAG,GAAG,EACZ,KAAK,EACL,cAAc,EACd,QAAQ,GAcT;IACC,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,MAAM,GAAG,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CACH,WAAW,CACT,CAAC,OAAO,CAAC,EACT,GAAG,EAAE,CAAC,KAAK,EACX,GAAG,EAAE,CAAC,UAAU,CACjB,EACH,CAAC,KAAK,EAAE,UAAU,CAAC,CACpB,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,IAAI,IAAI,CAAC,MAAM,IAAI,gBAAgB,CAAC;IAE3D,gFAAgF;IAChF,gFAAgF;IAChF,yEAAyE;IACzE,MAAM,UAAU,GAAG,QAAQ;QACzB,CAAC,CAAC;YACE,OAAO,EAAE,CAAC,KAAc,EAAE,EAAE;gBAC1B,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACtC,IAAI,KAAK,KAAK,SAAS;oBAAE,OAAO;gBAChC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;gBAClD,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;YAC5E,CAAC;YACD,SAAS,EAAE,gBAAgB;SAC5B;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,YACtD,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,KAAC,eAAe,IAAC,MAAM,EAAE,UAAU,GAAI,CACxC,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,YAC5B,MAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,KAC9C,UAAU,aAEd,yBACE,0BAAgB,EAAE,EAAE,UAAU,EAAE,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,aACzD,eAAM,MAAM,EAAC,IAAI,EAAC,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,WAAW,EAAE,IAAI,GAAI,EAC1E,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC,GAAI,IAC1D,GACZ,EACP,KAAC,aAAa,IAAC,QAAQ,EAAE,KAAK,GAAI,EAClC,KAAC,KAAK,IAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,GAAI,EAC1D,KAAC,KAAK,IAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,aAAa,EAAE,KAAK,GAAI,EAC3D,KAAC,YAAY,IACX,MAAM,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,EACjC,OAAO,EACL,KAAC,mBAAmB,OACd,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAChF,GAEJ,EACF,KAAC,IAAI,IACH,IAAI,EAAC,UAAU,EACf,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,aAAa,CAAC,OAAO,CAAC,EAC9B,WAAW,EAAE,CAAC,EACd,IAAI,EAAE,QAAQ,UAAU,GAAG,EAC3B,iBAAiB,EAAE,KAAK,EACxB,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GACnB,EACD,SAAS,IAAI,KAAC,KAAK,OAAK,eAAe,EAAE,OAAO,EAAC,OAAO,GAAG,IAClD,GACG,CAClB,GACS,CACb,CAAC;AACJ,CAAC"}

package/dist/react/components/charts/bar-chart-card.d.ts

@@ -1,3 +1,5 @@
+import type { JSX, ReactNode } from 'react';
+import { type ChartSelection } from './chart-selection.js';
 export interface BarChartDatum {
     /** Category label on the x-axis (or y-axis when horizontal). */
     label: string;
@@ -5,22 +7,31 @@ export interface BarChartDatum {
     value: number;
     /** Optional per-bar color override. */
     color?: string;
-    /** Optional stable identifier carried through to {@link onBarClick}. */
+    /** Optional stable identifier carried through to {@link BarChartCardProps.onSelect}. */
     id?: string;
 }
-/** Categorical bar chart (e.g. per-queue failure rate) with a hover tooltip. */
-export declare function BarChartCard({ title, data, right, color, valueLabel, height, horizontal, truncateLabel, onBarClick, }: {
+export interface BarChartCardProps {
     title: string;
     data: BarChartDatum[];
-    right?: React.ReactNode;
+    right?: ReactNode;
     color?: string;
     valueLabel?: string;
     height?: number;
     /** Render category labels down the Y axis so long labels read left-to-right. */
     horizontal?: boolean;
-    /** Truncate tick labels to this many chars (full label stays in the tooltip). */
+    /** Truncate tick labels to this many chars (full label stays in the hover card). */
     truncateLabel?: number;
-    /** Called with the datum behind a clicked bar. */
+    /** Format the value in the hover card (the axis is left alone). */
+    valueFormatter?: (value: number) => ReactNode;
+    /** Drill-down: called with the bar under a click. Omit and the chart is inert. */
+    onSelect?: (selection: ChartSelection) => void;
+    /**
+     * @deprecated Use {@link BarChartCardProps.onSelect}, which reports the same
+     * click in the shape every chart card uses. Still called, so existing callers
+     * keep working.
+     */
     onBarClick?: (datum: BarChartDatum) => void;
-}): JSX.Element;
+}
+/** Categorical bar chart (e.g. per-queue failure rate) with a hover card. */
+export declare function BarChartCard({ title, data, right, color, valueLabel, height, horizontal, truncateLabel, valueFormatter, onSelect, onBarClick, }: BarChartCardProps): JSX.Element;
 //# sourceMappingURL=bar-chart-card.d.ts.map

package/dist/react/components/charts/bar-chart-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/bar-chart-card.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,aAAa;IAC5B,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAQD,gFAAgF;AAChF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAkB,EAClB,UAAoB,EACpB,MAAY,EACZ,UAAkB,EAClB,aAAa,EACb,UAAU,GACX,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7C,GAAG,GAAG,CAAC,OAAO,CA0Gd"}
+{"version":3,"file":"bar-chart-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/bar-chart-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAU5C,OAAO,EAAE,KAAK,cAAc,EAAkB,MAAM,sBAAsB,CAAC;AAG3E,MAAM,WAAW,aAAa;IAC5B,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAQD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oFAAoF;IACpF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mEAAmE;IACnE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC9C,kFAAkF;IAClF,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7C;AAED,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAkB,EAClB,UAAoB,EACpB,MAAY,EACZ,UAAkB,EAClB,aAAa,EACb,cAAc,EACd,QAAQ,EACR,UAAU,GACX,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAsFjC"}

package/dist/react/components/charts/bar-chart-card.js

@@ -1,27 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { useMemo } from 'react';
+import { Bar, BarChart, CartesianGrid, Cell, XAxis, YAxis } from 'recharts';
+import { ChartContainer, ChartTooltip, ChartTooltipContent, chartColorVar, } from '../../ui/chart.js';
 import { ChartCard, ChartEmptyState } from './chart-card.js';
-import { ACCENT_HEX, axisTickStyle, chartTheme, tooltipContentStyle, tooltipItemStyle, tooltipLabelStyle, } from './chart-theme.js';
+import { chartSelection } from './chart-selection.js';
+import { ACCENT_HEX, chartConfig } from './chart-theme.js';
 /** Truncate a long category label to `max` chars with a trailing ellipsis. */
 function truncate(label, max) {
     if (label.length <= max)
         return label;
     return `${label.slice(0, Math.max(0, max - 1))}…`;
 }
-/** Categorical bar chart (e.g. per-queue failure rate) with a hover tooltip. */
-export function BarChartCard({ title, data, right, color = ACCENT_HEX, valueLabel = 'value', height = 220, horizontal = false, truncateLabel, onBarClick, }) {
+/** Categorical bar chart (e.g. per-queue failure rate) with a hover card. */
+export function BarChartCard({ title, data, right, color = ACCENT_HEX, valueLabel = 'value', height = 220, horizontal = false, truncateLabel, valueFormatter, onSelect, onBarClick, }) {
     const bodyHeight = height - 64;
+    const config = useMemo(() => chartConfig(['value'], () => color, () => valueLabel), [color, valueLabel]);
     function handleBarClick(_value, index) {
         const datum = data[index];
-        if (datum && onBarClick)
-            onBarClick(datum);
+        if (!datum)
+            return;
+        onBarClick?.(datum);
+        onSelect?.(chartSelection({ label: datum.label, id: datum.id, value: datum.value }));
     }
-    // Build optional props conditionally: under `exactOptionalPropertyTypes` an
+    // Optional props are built conditionally: under `exactOptionalPropertyTypes` an
     // explicit `undefined` is not assignable to Recharts' optional handlers.
     const tickFormatterProps = truncateLabel !== undefined
         ? { tickFormatter: (value) => truncate(value, truncateLabel) }
         : {};
-    const barInteractionProps = onBarClick !== undefined ? { onClick: handleBarClick, cursor: 'pointer' } : {};
-    return (_jsx(ChartCard, { title: title, right: right, height: bodyHeight, children: data.length === 0 ? (_jsx(ChartEmptyState, { height: bodyHeight })) : (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: horizontal ? (_jsxs(BarChart, { data: data, layout: "vertical", margin: { top: 4, right: 8, bottom: 0, left: 8 }, children: [_jsx(CartesianGrid, { stroke: chartTheme.gridStroke, horizontal: false }), _jsx(XAxis, { type: "number", tick: axisTickStyle, stroke: chartTheme.axisStroke, tickLine: false, allowDecimals: false }), _jsx(YAxis, { type: "category", dataKey: "label", tick: axisTickStyle, ...tickFormatterProps, stroke: chartTheme.axisStroke, tickLine: false, width: 160, interval: 0 }), _jsx(Tooltip, { contentStyle: tooltipContentStyle, labelStyle: tooltipLabelStyle, itemStyle: tooltipItemStyle, cursor: { fill: '#ffffff08' } }), _jsx(Bar, { dataKey: "value", name: valueLabel, radius: [0, 3, 3, 0], isAnimationActive: false, ...barInteractionProps, children: data.map((datum) => (_jsx(Cell, { fill: datum.color ?? color }, datum.id ?? datum.label))) })] })) : (_jsxs(BarChart, { data: data, margin: { top: 4, right: 8, bottom: 0, left: -16 }, children: [_jsx(CartesianGrid, { stroke: chartTheme.gridStroke, vertical: false }), _jsx(XAxis, { dataKey: "label", tick: axisTickStyle, ...tickFormatterProps, stroke: chartTheme.axisStroke, tickLine: false, interval: 0 }), _jsx(YAxis, { tick: axisTickStyle, stroke: chartTheme.axisStroke, tickLine: false, width: 40, allowDecimals: false }), _jsx(Tooltip, { contentStyle: tooltipContentStyle, labelStyle: tooltipLabelStyle, itemStyle: tooltipItemStyle, cursor: { fill: '#ffffff08' } }), _jsx(Bar, { dataKey: "value", name: valueLabel, radius: [3, 3, 0, 0], isAnimationActive: false, ...barInteractionProps, children: data.map((datum) => (_jsx(Cell, { fill: datum.color ?? color }, datum.id ?? datum.label))) })] })) })) }));
+    const interactive = onSelect !== undefined || onBarClick !== undefined;
+    const barInteractionProps = interactive
+        ? { onClick: handleBarClick, cursor: 'pointer' }
+        : {};
+    return (_jsx(ChartCard, { title: title, right: right, height: bodyHeight, children: data.length === 0 ? (_jsx(ChartEmptyState, { height: bodyHeight })) : (_jsx(ChartContainer, { config: config, children: _jsxs(BarChart, { data: data, layout: horizontal ? 'vertical' : 'horizontal', margin: { top: 4, right: 8, bottom: 0, left: horizontal ? 8 : -16 }, children: [_jsx(CartesianGrid, { horizontal: !horizontal, vertical: horizontal }), horizontal ? (_jsx(XAxis, { type: "number", tickLine: false, allowDecimals: false })) : (_jsx(XAxis, { dataKey: "label", tickLine: false, interval: 0, ...tickFormatterProps })), horizontal ? (_jsx(YAxis, { type: "category", dataKey: "label", tickLine: false, width: 160, interval: 0, ...tickFormatterProps })) : (_jsx(YAxis, { tickLine: false, width: 40, allowDecimals: false })), _jsx(ChartTooltip, { cursor: { fill: 'color-mix(in srgb, var(--text) 5%, transparent)' }, content: _jsx(ChartTooltipContent, { ...(valueFormatter ? { valueFormatter: (v) => valueFormatter(v) } : {}) }) }), _jsx(Bar, { dataKey: "value", name: valueLabel, fill: chartColorVar('value'), radius: horizontal ? [0, 3, 3, 0] : [3, 3, 0, 0], isAnimationActive: false, ...barInteractionProps, children: data.map((datum) => (_jsx(Cell, { fill: datum.color ?? chartColorVar('value') }, datum.id ?? datum.label))) })] }) })) }));
 }
 //# sourceMappingURL=bar-chart-card.js.map

package/dist/react/components/charts/bar-chart-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/bar-chart-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"bar-chart-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/bar-chart-card.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/charts/breakdown-card.d.ts

@@ -0,0 +1,17 @@
+import type { JSX } from 'react';
+import { type ChartSelection } from './chart-selection.js';
+export interface BreakdownSegment {
+    label: string;
+    value: number;
+    color?: string;
+}
+/** Donut (default) or single stacked bar showing how a total splits by category. */
+export declare function BreakdownCard({ title, segments, style, height, onSelect, }: {
+    title: string;
+    segments: BreakdownSegment[];
+    style?: 'donut' | 'bar';
+    height?: number;
+    /** Drill-down: called with the segment under a click. Omit and the chart is inert. */
+    onSelect?: (selection: ChartSelection) => void;
+}): JSX.Element;
+//# sourceMappingURL=breakdown-card.d.ts.map

package/dist/react/components/charts/breakdown-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakdown-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/breakdown-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAWjC,OAAO,EAAE,KAAK,cAAc,EAAkB,MAAM,sBAAsB,CAAC;AAG3E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,KAAe,EACf,MAAY,EACZ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CAChD,GAAG,GAAG,CAAC,OAAO,CA2Fd"}

package/dist/react/components/charts/breakdown-card.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Bar, BarChart, Cell, Pie, PieChart } from 'recharts';
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from '../../ui/chart.js';
+import { ChartCard, ChartEmptyState } from './chart-card.js';
+import { chartSelection } from './chart-selection.js';
+import { chartConfig, hexForSegment } from './chart-theme.js';
+/** Donut (default) or single stacked bar showing how a total splits by category. */
+export function BreakdownCard({ title, segments, style = 'donut', height = 220, onSelect, }) {
+    const bodyHeight = height - 64;
+    const config = useMemo(() => chartConfig(segments.map((s) => s.label), (label, index) => hexForSegment(label, index, segments[index]?.color)), [segments]);
+    function select(index) {
+        const segment = segments[index];
+        if (segment && onSelect) {
+            onSelect(chartSelection({ label: segment.label, value: segment.value }));
+        }
+    }
+    // Recharts hands a click handler its own datum first; the index is what we
+    // actually key off, so the datum is deliberately ignored.
+    const clickProps = onSelect
+        ? { onClick: (_datum, index) => select(index), cursor: 'pointer' }
+        : {};
+    if (segments.length === 0) {
+        return (_jsx(ChartCard, { title: title, height: bodyHeight, children: _jsx(ChartEmptyState, { height: bodyHeight }) }));
+    }
+    if (style === 'bar') {
+        // One row, one stacked bar per segment: the chart is a single 100% bar, so
+        // every segment is its own series rather than a row in a shared one.
+        const row = [
+            { name: 'breakdown', ...Object.fromEntries(segments.map((s) => [s.label, s.value])) },
+        ];
+        return (_jsx(ChartCard, { title: title, height: bodyHeight, children: _jsx(ChartContainer, { config: config, children: _jsxs(BarChart, { data: row, layout: "vertical", children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), segments.map((segment, index) => (_jsx(Bar, { dataKey: segment.label, stackId: "a", fill: hexForSegment(segment.label, index, segment.color), isAnimationActive: false, ...(onSelect ? { onClick: () => select(index), cursor: 'pointer' } : {}) }, segment.label)))] }) }) }));
+    }
+    const pieData = segments.map((segment, index) => ({
+        name: segment.label,
+        value: segment.value,
+        // `color` (not `fill`) so the hover card and the legend resolve the segment's
+        // own hue — see `seriesColor` in the vendored chart layer.
+        color: hexForSegment(segment.label, index, segment.color),
+    }));
+    return (_jsx(ChartCard, { title: title, height: bodyHeight, children: _jsx(ChartContainer, { config: config, children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), _jsx(Pie, { data: pieData, dataKey: "value", nameKey: "name", innerRadius: "55%", outerRadius: "80%", isAnimationActive: false, ...clickProps, children: pieData.map((entry) => (_jsx(Cell, { fill: entry.color }, entry.name))) })] }) }) }));
+}
+//# sourceMappingURL=breakdown-card.js.map

package/dist/react/components/charts/breakdown-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakdown-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/breakdown-card.tsx"],"names":[],"mappings":"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"}

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

@@ -5,6 +5,13 @@ export declare function ChartCard({ title, right, height, children, }: {
     height?: number;
     children: React.ReactNode;
 }): JSX.Element;
+/**
+ * "Nothing in this window" body. `height` is optional: given one it reserves
+ * exactly the space the chart would have taken, and without one it fills its
+ * parent — which is what a card that puts something else (percentile chips) above
+ * the chart needs, since there the chart's share of the body is not the card's
+ * height.
+ */
 export declare function ChartEmptyState({ height }: {
     height?: number;
 }): JSX.Element;

package/dist/react/components/charts/chart-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-card.tsx"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAAY,EACZ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,GAAG,CAAC,OAAO,CAUd;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAY,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAMlF"}
+{"version":3,"file":"chart-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-card.tsx"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAAY,EACZ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,GAAG,CAAC,OAAO,CAYd;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAS5E"}

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

@@ -1,9 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Shared card chrome (title, optional right slot, framed body) for every chart card. */
 export function ChartCard({ title, right, height = 220, children, }) {
-    return (_jsxs("section", { className: "rounded-lg border border-zinc-800 bg-zinc-900/40 p-4", children: [_jsxs("header", { className: "mb-3 flex items-center justify-between", children: [_jsx("h3", { className: "text-xs font-medium uppercase tracking-wide text-zinc-400", children: title }), right] }), _jsx("div", { style: { height }, children: children })] }));
+    return (_jsxs("section", { className: "rounded-lg border border-line bg-panel/40 p-4", children: [_jsxs("header", { className: "mb-3 flex items-center justify-between", children: [_jsx("h3", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: title }), right] }), _jsx("div", { style: { height }, children: children })] }));
 }
-export function ChartEmptyState({ height = 220 }) {
-    return (_jsx("div", { className: "flex items-center justify-center text-xs text-zinc-600", style: { height }, children: "No data in window." }));
+/**
+ * "Nothing in this window" body. `height` is optional: given one it reserves
+ * exactly the space the chart would have taken, and without one it fills its
+ * parent — which is what a card that puts something else (percentile chips) above
+ * the chart needs, since there the chart's share of the body is not the card's
+ * height.
+ */
+export function ChartEmptyState({ height }) {
+    return (_jsx("div", { className: "flex h-full items-center justify-center text-xs text-muted-foreground", style: height === undefined ? undefined : { height }, children: "No data in window." }));
 }
 //# sourceMappingURL=chart-card.js.map

package/dist/react/components/charts/chart-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-card.tsx"],"names":[],"mappings":";AAAA,yFAAyF;AACzF,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAAM,GAAG,GAAG,EACZ,QAAQ,GAMT;IACC,OAAO,CACL,mBAAS,SAAS,EAAC,sDAAsD,aACvE,kBAAQ,SAAS,EAAC,wCAAwC,aACxD,aAAI,SAAS,EAAC,2DAA2D,YAAE,KAAK,GAAM,EACrF,KAAK,IACC,EACT,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,YAAG,QAAQ,GAAO,IAChC,CACX,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,GAAG,GAAG,EAAuB;IACnE,OAAO,CACL,cAAK,SAAS,EAAC,wDAAwD,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,mCAEnF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"chart-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-card.tsx"],"names":[],"mappings":";AAAA,yFAAyF;AACzF,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAAM,GAAG,GAAG,EACZ,QAAQ,GAMT;IACC,OAAO,CACL,mBAAS,SAAS,EAAC,+CAA+C,aAChE,kBAAQ,SAAS,EAAC,wCAAwC,aACxD,aAAI,SAAS,EAAC,mEAAmE,YAC9E,KAAK,GACH,EACJ,KAAK,IACC,EACT,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,YAAG,QAAQ,GAAO,IAChC,CACX,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,EAAuB;IAC7D,OAAO,CACL,cACE,SAAS,EAAC,uEAAuE,EACjF,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,mCAGhD,CACP,CAAC;AACJ,CAAC"}

package/dist/react/components/charts/chart-selection.d.ts

@@ -0,0 +1,44 @@
+/**
+ * What a user clicked inside a chart, in the one shape every card reports it.
+ *
+ * This is the drill-down intent and nothing more: a card knows what was clicked,
+ * it does not know what that should filter. The caller decides — `PanelView`
+ * forwards the selection, the extension dashboard turns it into provider query
+ * state. Keeping the card ignorant is what lets the same `AreaChartCard` sit on
+ * the Overview page (where clicking means nothing and no callback is passed) and
+ * on an extension dashboard (where it filters the page).
+ */
+export interface ChartSelection {
+    /** The category, bucket or x-axis label under the click. */
+    label: string;
+    /** Series key when the chart draws more than one; absent for single-series charts. */
+    series?: string;
+    /** Provider-supplied stable id, when the datum carried one (topN items do). */
+    id?: string;
+    /** The value at the click, when the click resolved to a single datum. */
+    value?: number;
+}
+/**
+ * Build a {@link ChartSelection} without tripping `exactOptionalPropertyTypes`,
+ * which rejects an explicit `undefined` for an optional field. Every card builds
+ * its selection here so "no id" is consistently an absent key rather than a
+ * present `undefined` — the difference shows up the moment a selection is spread
+ * into a query object.
+ */
+export declare function chartSelection(input: {
+    label: string;
+    series?: string | undefined;
+    id?: string | undefined;
+    value?: number | undefined;
+}): ChartSelection;
+/**
+ * The x-axis label under a click on a cartesian chart.
+ *
+ * A click on an area or a line has no single datum — Recharts reports the whole
+ * hovered category in its chart-level event state instead, and types that state
+ * loosely enough that reading it is a runtime question, not a compile-time one.
+ * Returns undefined when the click landed on chrome (axis, legend, padding),
+ * which is the case a drill-down must ignore rather than fire an empty filter.
+ */
+export declare function activeChartLabel(state: unknown): string | undefined;
+//# sourceMappingURL=chart-selection.d.ts.map

package/dist/react/components/charts/chart-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-selection.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-selection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,WAAW,cAAc;IAC7B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,GAAG,cAAc,CAOjB;AAMD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAKnE"}

package/dist/react/components/charts/chart-selection.js

@@ -0,0 +1,36 @@
+/**
+ * Build a {@link ChartSelection} without tripping `exactOptionalPropertyTypes`,
+ * which rejects an explicit `undefined` for an optional field. Every card builds
+ * its selection here so "no id" is consistently an absent key rather than a
+ * present `undefined` — the difference shows up the moment a selection is spread
+ * into a query object.
+ */
+export function chartSelection(input) {
+    return {
+        label: input.label,
+        ...(input.series !== undefined ? { series: input.series } : {}),
+        ...(input.id !== undefined ? { id: input.id } : {}),
+        ...(input.value !== undefined ? { value: input.value } : {}),
+    };
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+/**
+ * The x-axis label under a click on a cartesian chart.
+ *
+ * A click on an area or a line has no single datum — Recharts reports the whole
+ * hovered category in its chart-level event state instead, and types that state
+ * loosely enough that reading it is a runtime question, not a compile-time one.
+ * Returns undefined when the click landed on chrome (axis, legend, padding),
+ * which is the case a drill-down must ignore rather than fire an empty filter.
+ */
+export function activeChartLabel(state) {
+    if (!isRecord(state))
+        return undefined;
+    const label = state.activeLabel;
+    if (typeof label === 'string' && label.length > 0)
+        return label;
+    return typeof label === 'number' ? String(label) : undefined;
+}
+//# sourceMappingURL=chart-selection.js.map

package/dist/react/components/charts/chart-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-selection.js","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-selection.ts"],"names":[],"mappings":"AAqBA;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAAC,KAK9B;IACC,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,GAAG,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACnD,GAAG,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC7D,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,KAAc;IAC9B,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,CAAC;AACrD,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAc;IAC7C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,SAAS,CAAC;IACvC,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC;IAChC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,KAAK,CAAC;IAChE,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAC/D,CAAC"}