@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0

package/dist/MetricsLineChart-BhHoduO0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsLineChart-BhHoduO0.js","names":[],"sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["import type { MetricsLineChartSeries } from './metrics-line-chart';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/** A marker and a label per series. Totals belong in the card's header, not here. */\nexport function MetricsLineChartLegend({\n  series,\n  className,\n}: {\n  series: Pick<MetricsLineChartSeries, 'dataKey' | 'label' | 'color' | 'dashed'>[];\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-wrap items-center gap-x-4 gap-y-1', className)}>\n      {series.map(s => (\n        <div key={s.dataKey} className=\"inline-flex items-center gap-1.5\">\n          {s.dashed ? (\n            <span className=\"h-0 w-3 shrink-0 border-t-2 border-dashed\" style={{ borderColor: s.color }} />\n          ) : (\n            <div className=\"size-2 shrink-0 rounded-[2px]\" style={{ backgroundColor: s.color }} />\n          )}\n          <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"max-w-48 truncate\">\n            {s.label}\n          </Txt>\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { ChartTooltip } from '@/ds/components/ChartTooltip';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsLineChartTooltip({\n  active,\n  payload,\n  label,\n  suffix,\n  formatValue = value => value.toLocaleString('en-US'),\n  showTotal = false,\n  labelKey,\n  formatByKey,\n}: {\n  active?: boolean;\n  payload?: Array<{\n    name: string;\n    value: number;\n    color: string;\n    dataKey?: string | number;\n    payload?: Record<string, unknown>;\n  }>;\n  label?: string;\n  suffix?: string;\n  formatValue?: (value: number) => string;\n  /** Adds a \"Total\" row under a hairline: the sum of every row, e.g. a stacked column's height. */\n  showTotal?: boolean;\n  /** Read the heading from this field of the hovered row instead of the x-axis label. */\n  labelKey?: string;\n  /** Per-series formatters, by data key, for charts that mix units (counts and durations). */\n  formatByKey?: Record<string, (value: number) => string>;\n}) {\n  if (!active || !payload?.length) return null;\n  // A missing reading (NaN, Infinity) shows as a dash and stays out of the total.\n  const finite = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);\n  const total = payload.reduce((sum, entry) => sum + (finite(entry.value) ? entry.value : 0), 0);\n  // A bucket with no readings at all totals to a dash, not 0.\n  const hasReading = payload.some(entry => finite(entry.value));\n  const heading = labelKey ? String(payload[0]?.payload?.[labelKey] ?? label ?? '') : label;\n  const format = (entry: { dataKey?: string | number }) => formatByKey?.[String(entry.dataKey)] ?? formatValue;\n  // A number through its formatter; a missing or non-finite one as a dash; text as it is.\n  const reading = (entry: (typeof payload)[number]) => {\n    if (finite(entry.value)) return format(entry)(entry.value);\n    if (typeof entry.value === 'number' || entry.value == null) return '—';\n    return entry.value;\n  };\n  return (\n    // A floor like shadcn's chart tooltip, so short readouts don't size it to their own label.\n    <ChartTooltip className=\"min-w-32\">\n      <Txt variant=\"column\" tone=\"ink\" className=\"mb-1\">\n        {heading}\n      </Txt>\n      <div className=\"grid grid-cols-[auto_1fr_auto] items-center gap-x-2 gap-y-1\">\n        {payload.map(entry => (\n          <div key={entry.name} className=\"contents\">\n            <span className=\"size-2 rounded-[2px]\" style={{ backgroundColor: entry.color }} />\n            <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"max-w-40 truncate\">\n              {entry.name}\n            </Txt>\n            <span className=\"text-right font-mono text-foreground tabular-nums\">\n              {reading(entry)}\n              {finite(entry.value) && suffix}\n            </span>\n          </div>\n        ))}\n        {showTotal && (\n          <div className=\"col-span-3 grid grid-cols-subgrid items-center border-t border-border pt-1\">\n            <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"col-span-2\">\n              Total\n            </Txt>\n            <span className=\"text-right font-mono text-foreground tabular-nums\">\n              {hasReading ? formatValue(total) : '—'}\n              {hasReading && suffix}\n            </span>\n          </div>\n        )}\n      </div>\n    </ChartTooltip>\n  );\n}\n","import { Area, CartesianGrid, ComposedChart, Line, Tooltip } from 'recharts';\nimport { MetricsLineChartLegend } from './metrics-line-chart-legend';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport { CHART_CURSOR_PROPS, CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { Y_AXIS_WIDTH, compactNumber, dataMax, isWholeData, timeXAxis, valueYAxis } from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsLineChartSeries = {\n  dataKey: string;\n  label: string;\n  color: string;\n  /** A secondary reading (e.g. an average next to counts): dashed, no fill under it. */\n  dashed?: boolean;\n  /** The series to read first (e.g. P95 among percentiles): a slightly heavier line. */\n  emphasis?: boolean;\n};\n\n/** Line weight; an emphasised series adds half a pixel. */\nconst LINE_WIDTH = 1.75;\n/** Opacity at the top of the fill under a line (it fades to nothing at the base). */\nconst AREA_OPACITY = 0.12;\n\n/**\n * How the series draw.\n * - `default`: 1.75px lines over a fill.\n * - `thin`: 1.5px lines (emphasis included) over a fainter fill (40% of the default), for small\n *   cards in a grid.\n */\nexport type MetricsLineChartLineStyle = 'default' | 'thin';\n\nconst LINE_STYLES: Record<MetricsLineChartLineStyle, { width: number; emphasis: number; areaOpacity: number }> = {\n  default: { width: LINE_WIDTH, emphasis: LINE_WIDTH + 0.5, areaOpacity: AREA_OPACITY },\n  thin: { width: 1.5, emphasis: 1.5, areaOpacity: AREA_OPACITY * 0.4 },\n};\n\n/**\n * Fills fade out sideways over their first and last 24px, so they don't end in a hard vertical\n * edge where the line starts and stops. A mask sized to each fill's own box.\n */\nconst THIN_FILL_FADE = '[&_.recharts-area-area]:mask-x-from-[calc(100%-24px)]';\n/** A lone point draws no line at all, so it gets a dot; lines already bridge gaps (`connectNulls`). */\nconst SPARSE_POINTS = 1;\n\n// Jumps straight to the hovered point, with the dots and the tooltip.\nfunction HoverLine({ points }: { points?: { x: number; y: number }[] }) {\n  const [top, bottom] = points ?? [];\n  if (!top || !bottom) return null;\n  return (\n    <line x1={top.x} x2={top.x} y1={top.y} y2={bottom.y} {...CHART_CURSOR_PROPS} className=\"pointer-events-none\" />\n  );\n}\n\nexport type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;\n\nexport type MetricsLineChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Click on a series' active dot. */\n  onPointClick?: MetricsLineChartPointClickHandler;\n  /** Click anywhere on a bucket (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  /** Render a visible dot on every point. A series with a single point gets one anyway. */\n  showDots?: boolean;\n  /**\n   * Point markers. `auto`: on a series' lone point (or every point with `showDots`). `hover`:\n   * none at rest, only the hovered point's.\n   */\n  dots?: 'auto' | 'hover';\n  /** Line weight and fill. `thin` suits small cards in a grid. */\n  lineStyle?: MetricsLineChartLineStyle;\n  /** Set to `false` to render `MetricsLineChartLegend` elsewhere, e.g. next to tabs. */\n  showLegend?: boolean;\n  /** Formats tooltip values (e.g. `ms`, `%`), and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsLineChart(props: MetricsLineChartProps) {\n  const { data, series, height = 210, showLegend = true, isLoading = false, className } = props;\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root}>\n      {showLegend && <MetricsLineChartLegend series={series} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"line\" height={height} /> : <LinePlot {...props} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in. */\nfunction LinePlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  onPointClick,\n  onBucketClick,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  showDots = false,\n  dots = 'auto',\n  lineStyle = 'default',\n  valueFormatter,\n  axisFormatter,\n  showYAxis = true,\n}: MetricsLineChartProps) {\n  const id = useChartDefsId();\n  const { size, onResize, ref } = useChartSize();\n\n  const format = valueFormatter ?? compactNumber.format;\n  const isSparse = (key: string) => data.filter(row => typeof row[key] === 'number').length <= SPARSE_POINTS;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const line = LINE_STYLES[lineStyle];\n  const restDot = (s: MetricsLineChartSeries) =>\n    dots === 'auto' && (showDots || isSparse(s.dataKey)) ? { r: 3, fill: s.color, strokeWidth: 0 } : false;\n  const activeDot = (s: MetricsLineChartSeries) => ({\n    r: 3.5,\n    fill: s.color,\n    stroke: 'var(--background)',\n    strokeWidth: 2,\n    ...(onPointClick && {\n      style: { cursor: 'pointer' },\n      onClick: (_: unknown, payload: unknown) => {\n        // Recharts passes the dot's props; the hovered row is under `payload`.\n        if (isRecord(payload) && isRecord(payload.payload)) onPointClick(payload.payload, s.dataKey);\n      },\n    }),\n  });\n\n  return (\n    <ChartPlot\n      height={height}\n      plotRef={ref}\n      onResize={onResize}\n      clickable={!!onBucketClick}\n      className={cn(lineStyle === 'thin' && THIN_FILL_FADE)}\n    >\n      <ComposedChart\n        data={data}\n        margin={CHART_MARGIN}\n        onClick={state => {\n          const i = state?.activeTooltipIndex;\n          const row = i === undefined || i === null ? undefined : data[Number(i)];\n          if (onBucketClick && row) onBucketClick(row, Number(i));\n        }}\n      >\n        <defs>\n          {series.map((s, i) => (\n            <linearGradient key={s.dataKey} id={`${id}-area-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor={s.color} stopOpacity={line.areaOpacity} />\n              <stop offset=\"95%\" stopColor={s.color} stopOpacity={0} />\n            </linearGradient>\n          ))}\n        </defs>\n        <CartesianGrid {...CHART_GRID_PROPS} />\n        {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n        {valueYAxis({\n          show: showYAxis,\n          size,\n          formatter: axisFormatter ?? format,\n          domain: yDomain,\n          max: dataMax(\n            data,\n            series.map(s => s.dataKey),\n          ),\n          integer: isWholeData(\n            data,\n            series.map(s => s.dataKey),\n          ),\n        })}\n        <Tooltip\n          {...CHART_TOOLTIP_PROPS}\n          content={\n            <ChartTooltipPosition>\n              <MetricsLineChartTooltip formatValue={format} labelKey={tooltipLabelKey} />\n            </ChartTooltipPosition>\n          }\n          cursor={<HoverLine />}\n        />\n        {series.map((s, i) => {\n          const common = {\n            type: 'monotone' as const,\n            dataKey: s.dataKey,\n            name: s.label,\n            stroke: s.color,\n            strokeWidth: s.emphasis ? line.emphasis : line.width,\n            strokeDasharray: s.dashed ? '4 3' : undefined,\n            dot: restDot(s),\n            activeDot: activeDot(s),\n            isAnimationActive: false,\n            connectNulls: true,\n          };\n          return s.dashed ? (\n            <Line key={s.dataKey} {...common} />\n          ) : (\n            <Area key={s.dataKey} {...common} fill={`url(#${id}-area-${i})`} fillOpacity={1} />\n          );\n        })}\n      </ComposedChart>\n    </ChartPlot>\n  );\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null;\n}\n"],"mappings":"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"}

package/dist/{MetricsLineChart-2m4LVL1N.cjs → MetricsLineChart-CjBm4IXu.cjs}

@@ -11,43 +11,26 @@ const require_primitives_use_chart_defs_id = require("./primitives/use-chart-def
 let react_jsx_runtime = require("react/jsx-runtime");
 let recharts = require("recharts");
 // src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx
-function MetricsLineChartLegend({ data, series, className }) {
+/** A marker and a label per series. Totals belong in the card's header, not here. */
+function MetricsLineChartLegend({ series, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: require_utils.cn("flex flex-wrap items-center gap-x-4 gap-y-1", className),
-		children: series.map((s) => {
-			const aggregated = data ? s.aggregate?.(data) : void 0;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "inline-flex items-center gap-1.5",
-				children: [
-					s.dashed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "h-0 w-3 shrink-0 border-t-2 border-dashed",
-						style: { borderColor: s.color }
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "size-2 shrink-0 rounded-[2px]",
-						style: { backgroundColor: s.color }
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-						as: "span",
-						variant: "body-sm",
-						tone: "muted",
-						className: "max-w-48 truncate",
-						children: s.label
-					}),
-					aggregated && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
-						as: "span",
-						variant: "body-sm",
-						tone: "muted",
-						className: "-ml-1 tabular-nums",
-						children: [aggregated.value, aggregated.suffix && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
-							as: "span",
-							variant: "body-sm",
-							tone: "faint",
-							children: [" ", aggregated.suffix]
-						})]
-					})
-				]
-			}, s.dataKey);
-		})
+		children: series.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "inline-flex items-center gap-1.5",
+			children: [s.dashed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "h-0 w-3 shrink-0 border-t-2 border-dashed",
+				style: { borderColor: s.color }
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "size-2 shrink-0 rounded-[2px]",
+				style: { backgroundColor: s.color }
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				as: "span",
+				variant: "body-sm",
+				tone: "muted",
+				className: "max-w-48 truncate",
+				children: s.label
+			})]
+		}, s.dataKey))
 	});
 }
 // src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx
@@ -129,8 +112,8 @@ var LINE_STYLES = {
 * edge where the line starts and stops. A mask sized to each fill's own box.
 */
 var THIN_FILL_FADE = "[&_.recharts-area-area]:mask-x-from-[calc(100%-24px)]";
-/** A series with this few points gets a dot on each: a lone point draws no line at all. */
-var SPARSE_POINTS = 12;
+/** A lone point draws no line at all, so it gets a dot; lines already bridge gaps (`connectNulls`). */
+var SPARSE_POINTS = 1;
 function HoverLine({ points }) {
 	const [top, bottom] = points ?? [];
 	if (!top || !bottom) return null;
@@ -149,7 +132,6 @@ function MetricsLineChart(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: root,
 		children: [showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetricsLineChartLegend, {
-			data: isLoading ? void 0 : data,
 			series,
 			className: "mb-4"
 		}), isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_ChartSkeleton.ChartSkeleton, {
@@ -283,4 +265,4 @@ Object.defineProperty(exports, "MetricsLineChartTooltip", {
 	}
 });
 
-//# sourceMappingURL=MetricsLineChart-2m4LVL1N.cjs.map
+//# sourceMappingURL=MetricsLineChart-CjBm4IXu.cjs.map

package/dist/MetricsLineChart-CjBm4IXu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsLineChart-CjBm4IXu.cjs","names":["cn","Txt","ChartTooltip","Txt","CHART_CURSOR_PROPS","cn","ChartSkeleton","useChartDefsId","useChartSize","compactNumber","ChartPlot","ComposedChart","CHART_MARGIN","CartesianGrid","CHART_GRID_PROPS","timeXAxis","valueYAxis","dataMax","isWholeData","Tooltip","CHART_TOOLTIP_PROPS","ChartTooltipPosition","Line","Area"],"sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["import type { MetricsLineChartSeries } from './metrics-line-chart';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/** A marker and a label per series. Totals belong in the card's header, not here. */\nexport function MetricsLineChartLegend({\n  series,\n  className,\n}: {\n  series: Pick<MetricsLineChartSeries, 'dataKey' | 'label' | 'color' | 'dashed'>[];\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-wrap items-center gap-x-4 gap-y-1', className)}>\n      {series.map(s => (\n        <div key={s.dataKey} className=\"inline-flex items-center gap-1.5\">\n          {s.dashed ? (\n            <span className=\"h-0 w-3 shrink-0 border-t-2 border-dashed\" style={{ borderColor: s.color }} />\n          ) : (\n            <div className=\"size-2 shrink-0 rounded-[2px]\" style={{ backgroundColor: s.color }} />\n          )}\n          <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"max-w-48 truncate\">\n            {s.label}\n          </Txt>\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { ChartTooltip } from '@/ds/components/ChartTooltip';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsLineChartTooltip({\n  active,\n  payload,\n  label,\n  suffix,\n  formatValue = value => value.toLocaleString('en-US'),\n  showTotal = false,\n  labelKey,\n  formatByKey,\n}: {\n  active?: boolean;\n  payload?: Array<{\n    name: string;\n    value: number;\n    color: string;\n    dataKey?: string | number;\n    payload?: Record<string, unknown>;\n  }>;\n  label?: string;\n  suffix?: string;\n  formatValue?: (value: number) => string;\n  /** Adds a \"Total\" row under a hairline: the sum of every row, e.g. a stacked column's height. */\n  showTotal?: boolean;\n  /** Read the heading from this field of the hovered row instead of the x-axis label. */\n  labelKey?: string;\n  /** Per-series formatters, by data key, for charts that mix units (counts and durations). */\n  formatByKey?: Record<string, (value: number) => string>;\n}) {\n  if (!active || !payload?.length) return null;\n  // A missing reading (NaN, Infinity) shows as a dash and stays out of the total.\n  const finite = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);\n  const total = payload.reduce((sum, entry) => sum + (finite(entry.value) ? entry.value : 0), 0);\n  // A bucket with no readings at all totals to a dash, not 0.\n  const hasReading = payload.some(entry => finite(entry.value));\n  const heading = labelKey ? String(payload[0]?.payload?.[labelKey] ?? label ?? '') : label;\n  const format = (entry: { dataKey?: string | number }) => formatByKey?.[String(entry.dataKey)] ?? formatValue;\n  // A number through its formatter; a missing or non-finite one as a dash; text as it is.\n  const reading = (entry: (typeof payload)[number]) => {\n    if (finite(entry.value)) return format(entry)(entry.value);\n    if (typeof entry.value === 'number' || entry.value == null) return '—';\n    return entry.value;\n  };\n  return (\n    // A floor like shadcn's chart tooltip, so short readouts don't size it to their own label.\n    <ChartTooltip className=\"min-w-32\">\n      <Txt variant=\"column\" tone=\"ink\" className=\"mb-1\">\n        {heading}\n      </Txt>\n      <div className=\"grid grid-cols-[auto_1fr_auto] items-center gap-x-2 gap-y-1\">\n        {payload.map(entry => (\n          <div key={entry.name} className=\"contents\">\n            <span className=\"size-2 rounded-[2px]\" style={{ backgroundColor: entry.color }} />\n            <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"max-w-40 truncate\">\n              {entry.name}\n            </Txt>\n            <span className=\"text-right font-mono text-foreground tabular-nums\">\n              {reading(entry)}\n              {finite(entry.value) && suffix}\n            </span>\n          </div>\n        ))}\n        {showTotal && (\n          <div className=\"col-span-3 grid grid-cols-subgrid items-center border-t border-border pt-1\">\n            <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"col-span-2\">\n              Total\n            </Txt>\n            <span className=\"text-right font-mono text-foreground tabular-nums\">\n              {hasReading ? formatValue(total) : '—'}\n              {hasReading && suffix}\n            </span>\n          </div>\n        )}\n      </div>\n    </ChartTooltip>\n  );\n}\n","import { Area, CartesianGrid, ComposedChart, Line, Tooltip } from 'recharts';\nimport { MetricsLineChartLegend } from './metrics-line-chart-legend';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport { CHART_CURSOR_PROPS, CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { Y_AXIS_WIDTH, compactNumber, dataMax, isWholeData, timeXAxis, valueYAxis } from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsLineChartSeries = {\n  dataKey: string;\n  label: string;\n  color: string;\n  /** A secondary reading (e.g. an average next to counts): dashed, no fill under it. */\n  dashed?: boolean;\n  /** The series to read first (e.g. P95 among percentiles): a slightly heavier line. */\n  emphasis?: boolean;\n};\n\n/** Line weight; an emphasised series adds half a pixel. */\nconst LINE_WIDTH = 1.75;\n/** Opacity at the top of the fill under a line (it fades to nothing at the base). */\nconst AREA_OPACITY = 0.12;\n\n/**\n * How the series draw.\n * - `default`: 1.75px lines over a fill.\n * - `thin`: 1.5px lines (emphasis included) over a fainter fill (40% of the default), for small\n *   cards in a grid.\n */\nexport type MetricsLineChartLineStyle = 'default' | 'thin';\n\nconst LINE_STYLES: Record<MetricsLineChartLineStyle, { width: number; emphasis: number; areaOpacity: number }> = {\n  default: { width: LINE_WIDTH, emphasis: LINE_WIDTH + 0.5, areaOpacity: AREA_OPACITY },\n  thin: { width: 1.5, emphasis: 1.5, areaOpacity: AREA_OPACITY * 0.4 },\n};\n\n/**\n * Fills fade out sideways over their first and last 24px, so they don't end in a hard vertical\n * edge where the line starts and stops. A mask sized to each fill's own box.\n */\nconst THIN_FILL_FADE = '[&_.recharts-area-area]:mask-x-from-[calc(100%-24px)]';\n/** A lone point draws no line at all, so it gets a dot; lines already bridge gaps (`connectNulls`). */\nconst SPARSE_POINTS = 1;\n\n// Jumps straight to the hovered point, with the dots and the tooltip.\nfunction HoverLine({ points }: { points?: { x: number; y: number }[] }) {\n  const [top, bottom] = points ?? [];\n  if (!top || !bottom) return null;\n  return (\n    <line x1={top.x} x2={top.x} y1={top.y} y2={bottom.y} {...CHART_CURSOR_PROPS} className=\"pointer-events-none\" />\n  );\n}\n\nexport type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;\n\nexport type MetricsLineChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Click on a series' active dot. */\n  onPointClick?: MetricsLineChartPointClickHandler;\n  /** Click anywhere on a bucket (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  /** Render a visible dot on every point. A series with a single point gets one anyway. */\n  showDots?: boolean;\n  /**\n   * Point markers. `auto`: on a series' lone point (or every point with `showDots`). `hover`:\n   * none at rest, only the hovered point's.\n   */\n  dots?: 'auto' | 'hover';\n  /** Line weight and fill. `thin` suits small cards in a grid. */\n  lineStyle?: MetricsLineChartLineStyle;\n  /** Set to `false` to render `MetricsLineChartLegend` elsewhere, e.g. next to tabs. */\n  showLegend?: boolean;\n  /** Formats tooltip values (e.g. `ms`, `%`), and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsLineChart(props: MetricsLineChartProps) {\n  const { data, series, height = 210, showLegend = true, isLoading = false, className } = props;\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root}>\n      {showLegend && <MetricsLineChartLegend series={series} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"line\" height={height} /> : <LinePlot {...props} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in. */\nfunction LinePlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  onPointClick,\n  onBucketClick,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  showDots = false,\n  dots = 'auto',\n  lineStyle = 'default',\n  valueFormatter,\n  axisFormatter,\n  showYAxis = true,\n}: MetricsLineChartProps) {\n  const id = useChartDefsId();\n  const { size, onResize, ref } = useChartSize();\n\n  const format = valueFormatter ?? compactNumber.format;\n  const isSparse = (key: string) => data.filter(row => typeof row[key] === 'number').length <= SPARSE_POINTS;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const line = LINE_STYLES[lineStyle];\n  const restDot = (s: MetricsLineChartSeries) =>\n    dots === 'auto' && (showDots || isSparse(s.dataKey)) ? { r: 3, fill: s.color, strokeWidth: 0 } : false;\n  const activeDot = (s: MetricsLineChartSeries) => ({\n    r: 3.5,\n    fill: s.color,\n    stroke: 'var(--background)',\n    strokeWidth: 2,\n    ...(onPointClick && {\n      style: { cursor: 'pointer' },\n      onClick: (_: unknown, payload: unknown) => {\n        // Recharts passes the dot's props; the hovered row is under `payload`.\n        if (isRecord(payload) && isRecord(payload.payload)) onPointClick(payload.payload, s.dataKey);\n      },\n    }),\n  });\n\n  return (\n    <ChartPlot\n      height={height}\n      plotRef={ref}\n      onResize={onResize}\n      clickable={!!onBucketClick}\n      className={cn(lineStyle === 'thin' && THIN_FILL_FADE)}\n    >\n      <ComposedChart\n        data={data}\n        margin={CHART_MARGIN}\n        onClick={state => {\n          const i = state?.activeTooltipIndex;\n          const row = i === undefined || i === null ? undefined : data[Number(i)];\n          if (onBucketClick && row) onBucketClick(row, Number(i));\n        }}\n      >\n        <defs>\n          {series.map((s, i) => (\n            <linearGradient key={s.dataKey} id={`${id}-area-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor={s.color} stopOpacity={line.areaOpacity} />\n              <stop offset=\"95%\" stopColor={s.color} stopOpacity={0} />\n            </linearGradient>\n          ))}\n        </defs>\n        <CartesianGrid {...CHART_GRID_PROPS} />\n        {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n        {valueYAxis({\n          show: showYAxis,\n          size,\n          formatter: axisFormatter ?? format,\n          domain: yDomain,\n          max: dataMax(\n            data,\n            series.map(s => s.dataKey),\n          ),\n          integer: isWholeData(\n            data,\n            series.map(s => s.dataKey),\n          ),\n        })}\n        <Tooltip\n          {...CHART_TOOLTIP_PROPS}\n          content={\n            <ChartTooltipPosition>\n              <MetricsLineChartTooltip formatValue={format} labelKey={tooltipLabelKey} />\n            </ChartTooltipPosition>\n          }\n          cursor={<HoverLine />}\n        />\n        {series.map((s, i) => {\n          const common = {\n            type: 'monotone' as const,\n            dataKey: s.dataKey,\n            name: s.label,\n            stroke: s.color,\n            strokeWidth: s.emphasis ? line.emphasis : line.width,\n            strokeDasharray: s.dashed ? '4 3' : undefined,\n            dot: restDot(s),\n            activeDot: activeDot(s),\n            isAnimationActive: false,\n            connectNulls: true,\n          };\n          return s.dashed ? (\n            <Line key={s.dataKey} {...common} />\n          ) : (\n            <Area key={s.dataKey} {...common} fill={`url(#${id}-area-${i})`} fillOpacity={1} />\n          );\n        })}\n      </ComposedChart>\n    </ChartPlot>\n  );\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null;\n}\n"],"mappings":";;;;;;;;;;;;;;AAKA,SAAgB,uBAAuB,EACrC,QACA,aAIC;CACD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAWA,cAAAA,GAAG,+CAA+C,SAAS;EACxE,UAAA,OAAO,KAAI,MACV,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAqB,WAAU;GAA/B,UAAA,CACG,EAAE,SACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAA4C,OAAO,EAAE,aAAa,EAAE,MAAM;GAAI,CAAA,IAE9F,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IAAgC,OAAO,EAAE,iBAAiB,EAAE,MAAM;GAAI,CAAA,GAEvF,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAU,MAAK;IAAQ,WAAU;IACrD,UAAA,EAAE;GACA,CAAA,CACF;EATK,GAAA,EAAE,OASP,CACN;CACE,CAAA;AAET;;ACzBA,SAAgB,wBAAwB,EACtC,QACA,SACA,OACA,QACA,eAAc,UAAS,MAAM,eAAe,OAAO,GACnD,YAAY,OACZ,UACA,eAmBC;CACD,IAAI,CAAC,UAAU,CAAC,SAAS,QAAQ,OAAO;CAExC,MAAM,UAAU,UAAoC,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK;CACtG,MAAM,QAAQ,QAAQ,QAAQ,KAAK,UAAU,OAAO,OAAO,MAAM,KAAK,IAAI,MAAM,QAAQ,IAAI,CAAC;CAE7F,MAAM,aAAa,QAAQ,MAAK,UAAS,OAAO,MAAM,KAAK,CAAC;CAC5D,MAAM,UAAU,WAAW,OAAO,QAAQ,EAAE,EAAE,UAAU,aAAa,SAAS,EAAE,IAAI;CACpF,MAAM,UAAU,UAAyC,cAAc,OAAO,MAAM,OAAO,MAAM;CAEjG,MAAM,WAAW,UAAoC;EACnD,IAAI,OAAO,MAAM,KAAK,GAAG,OAAO,OAAO,KAAK,CAAC,CAAC,MAAM,KAAK;EACzD,IAAI,OAAO,MAAM,UAAU,YAAY,MAAM,SAAS,MAAM,OAAO;EACnE,OAAO,MAAM;CACf;CACA,OAEE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gCAAAA,cAAD;EAAc,WAAU;EAAxB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GAAK,SAAQ;GAAS,MAAK;GAAM,WAAU;GACxC,UAAA;EACE,CAAA,GACL,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,QAAQ,KAAI,UACX,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAsB,WAAU;IAAhC,UAAA;KACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;MAAuB,OAAO,EAAE,iBAAiB,MAAM,MAAM;KAAI,CAAA;KACjF,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;MAAK,IAAG;MAAO,SAAQ;MAAU,MAAK;MAAQ,WAAU;MACrD,UAAA,MAAM;KACJ,CAAA;KACL,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACG,QAAQ,KAAK,GACb,OAAO,MAAM,KAAK,KAAK,MACpB;;IACH;GATK,GAAA,MAAM,IASX,CACN,GACA,aACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;KAAK,IAAG;KAAO,SAAQ;KAAU,MAAK;KAAQ,WAAU;KAAa,UAAA;IAEhE,CAAA,GACL,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACG,aAAa,YAAY,KAAK,IAAI,KAClC,cAAc,MACX;IACH,CAAA,CAAA;GAEJ,CAAA,CAAA;EACO,CAAA,CAAA;;AAElB;;;ACrDA,IAAM,aAAa;;AAEnB,IAAM,eAAe;AAUrB,IAAM,cAA2G;CAC/G,SAAS;EAAE,OAAO;EAAY,UAAU;EAAkB,aAAa;CAAa;CACpF,MAAM;EAAE,OAAO;EAAK,UAAU;EAAK,aAAa,eAAe;CAAI;AACrE;;;;;AAMA,IAAM,iBAAiB;;AAEvB,IAAM,gBAAgB;AAGtB,SAAS,UAAU,EAAE,UAAmD;CACtE,MAAM,CAAC,KAAK,UAAU,UAAU,CAAC;CACjC,IAAI,CAAC,OAAO,CAAC,QAAQ,OAAO;CAC5B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,IAAI,IAAI;EAAG,IAAI,IAAI;EAAG,IAAI,IAAI;EAAG,IAAI,OAAO;EAAG,GAAIC,8BAAAA;EAAoB,WAAU;CAAuB,CAAA;AAElH;AA+CA,SAAgB,iBAAiB,OAA8B;CAC7D,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAK,aAAa,MAAM,YAAY,OAAO,cAAc;CACxF,MAAM,OAAOC,cAAAA,GAAG,WAAW,UAAU,gCAAgC,SAAS;CAE9E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACG,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAAC,wBAAD;GAAgC;GAAQ,WAAU;EAAQ,CAAA,GACxE,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAACC,iCAAAA,eAAD;GAAe,MAAK;GAAe;EAAS,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,EAAU,GAAI,MAAQ,CAAA,CAChF;;AAET;;AAGA,SAAS,SAAS,EAChB,MACA,QACA,SAAS,KACT,SACA,cACA,eACA,OAAO,QACP,eAAe,QACf,UAAU,QACV,iBACA,WAAW,OACX,OAAO,QACP,YAAY,WACZ,gBACA,eACA,YAAY,QACY;CACxB,MAAM,KAAKC,qCAAAA,eAAe;CAC1B,MAAM,EAAE,MAAM,UAAU,QAAQC,8BAAAA,aAAa;CAE7C,MAAM,SAAS,kBAAkBC,+BAAAA,cAAc;CAC/C,MAAM,YAAY,QAAgB,KAAK,QAAO,QAAO,OAAO,IAAI,SAAS,QAAQ,CAAC,CAAC,UAAU;CAC7F,MAAM,YAAY,KAAK,SAAS,YAAA,KAA2B;CAC3D,MAAM,OAAO,YAAY;CACzB,MAAM,WAAW,MACf,SAAS,WAAW,YAAY,SAAS,EAAE,OAAO,KAAK;EAAE,GAAG;EAAG,MAAM,EAAE;EAAO,aAAa;CAAE,IAAI;CACnG,MAAM,aAAa,OAA+B;EAChD,GAAG;EACH,MAAM,EAAE;EACR,QAAQ;EACR,aAAa;EACb,GAAI,gBAAgB;GAClB,OAAO,EAAE,QAAQ,UAAU;GAC3B,UAAU,GAAY,YAAqB;IAEzC,IAAI,SAAS,OAAO,KAAK,SAAS,QAAQ,OAAO,GAAG,aAAa,QAAQ,SAAS,EAAE,OAAO;GAC7F;EACF;CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,WAAD;EACU;EACR,SAAS;EACC;EACV,WAAW,CAAC,CAAC;EACb,WAAWL,cAAAA,GAAG,cAAc,UAAU,cAAc;EAEpD,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACM,SAAAA,eAAD;GACQ;GACN,QAAQC,gCAAAA;GACR,UAAS,UAAS;IAChB,MAAM,IAAI,OAAO;IACjB,MAAM,MAAM,MAAM,KAAA,KAAa,MAAM,OAAO,KAAA,IAAY,KAAK,OAAO,CAAC;IACrE,IAAI,iBAAiB,KAAK,cAAc,KAAK,OAAO,CAAC,CAAC;GACxD;GAPF,UAAA;IASE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UACG,OAAO,KAAK,GAAG,MACd,iBAAA,GAAA,kBAAA,KAAA,CAAC,kBAAD;KAAgC,IAAI,GAAG,GAAG,QAAQ;KAAK,IAAG;KAAI,IAAG;KAAI,IAAG;KAAI,IAAG;KAA/E,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,QAAO;MAAK,WAAW,EAAE;MAAO,aAAa,KAAK;KAAc,CAAA,GACtE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,QAAO;MAAM,WAAW,EAAE;MAAO,aAAa;KAAI,CAAA,CAC1C;IAHK,GAAA,EAAE,OAGP,CACjB,EACG,CAAA;IACN,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,eAAD,EAAe,GAAIC,8BAAAA,iBAAmB,CAAA;IACrCC,+BAAAA,UAAU;KAAE;KAAM;KAAM;KAAc;KAAS;IAAU,CAAC;IAC1DC,+BAAAA,WAAW;KACV,MAAM;KACN;KACA,WAAW,iBAAiB;KAC5B,QAAQ;KACR,KAAKC,+BAAAA,QACH,MACA,OAAO,KAAI,MAAK,EAAE,OAAO,CAC3B;KACA,SAASC,+BAAAA,YACP,MACA,OAAO,KAAI,MAAK,EAAE,OAAO,CAC3B;IACF,CAAC;IACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,SAAD;KACE,GAAIC,8BAAAA;KACJ,SACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,0CAAAA,sBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,yBAAD;MAAyB,aAAa;MAAQ,UAAU;KAAkB,CAAA,EACtD,CAAA;KAExB,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD,CAAY,CAAA;IACrB,CAAA;IACA,OAAO,KAAK,GAAG,MAAM;KACpB,MAAM,SAAS;MACb,MAAM;MACN,SAAS,EAAE;MACX,MAAM,EAAE;MACR,QAAQ,EAAE;MACV,aAAa,EAAE,WAAW,KAAK,WAAW,KAAK;MAC/C,iBAAiB,EAAE,SAAS,QAAQ,KAAA;MACpC,KAAK,QAAQ,CAAC;MACd,WAAW,UAAU,CAAC;MACtB,mBAAmB;MACnB,cAAc;KAChB;KACA,OAAO,EAAE,SACP,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,MAAD,EAAsB,GAAI,OAAS,GAAxB,EAAE,OAAsB,IAEnC,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,MAAD;MAAsB,GAAI;MAAQ,MAAM,QAAQ,GAAG,QAAQ,EAAE;MAAI,aAAa;KAAI,GAAvE,EAAE,OAAqE;IAEtF,CAAC;GACY;;CACN,CAAA;AAEf;AAEA,SAAS,SAAS,OAAkD;CAClE,OAAO,OAAO,UAAU,YAAY,UAAU;AAChD"}

package/dist/{MetricsStackedBarChart-DJB4aByt.js → MetricsStackedBarChart-BRuA6MTE.js}

@@ -1,5 +1,5 @@
 import { t as cn } from "./utils-DQx8TpNT.js";
-import { n as MetricsLineChartTooltip, r as MetricsLineChartLegend } from "./MetricsLineChart-DKzuRU2q.js";
+import { n as MetricsLineChartTooltip, r as MetricsLineChartLegend } from "./MetricsLineChart-BhHoduO0.js";
 import { CHART_MARGIN } from "./primitives/chart-layout.es.js";
 import { ChartSkeleton } from "./components/ChartSkeleton.es.js";
 import { CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from "./primitives/chart-axes.es.js";
@@ -99,7 +99,6 @@ function MetricsStackedBarChart(props) {
 		className: root,
 		"data-chart-scope": id,
 		children: [showLegend && /* @__PURE__ */ jsx(MetricsLineChartLegend, {
-			data: isLoading ? void 0 : data,
 			series: legend,
 			className: "mb-4"
 		}), isLoading ? /* @__PURE__ */ jsx(ChartSkeleton, {
@@ -306,4 +305,4 @@ function ColumnLabel({ x, y, width, height, value, row, keys, self, color }) {
 }
 export { MetricsStackedBarChart as t };
 
-//# sourceMappingURL=MetricsStackedBarChart-DJB4aByt.js.map
+//# sourceMappingURL=MetricsStackedBarChart-BRuA6MTE.js.map

package/dist/MetricsStackedBarChart-BRuA6MTE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsStackedBarChart-BRuA6MTE.js","names":["_Fragment"],"sources":["../src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Bar, CartesianGrid, ComposedChart, LabelList, Line, Rectangle, ReferenceLine, Tooltip } from 'recharts';\nimport type { LabelProps } from 'recharts';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChartLegend, MetricsLineChartTooltip } from '@/ds/components/MetricsLineChart';\nimport { CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { singleBarBox, stackedSegmentBox } from '@/ds/primitives/chart-column-layout';\nimport type { SegmentBox } from '@/ds/primitives/chart-column-layout';\nimport {\n  CHART_TICK,\n  Y_AXIS_WIDTH,\n  compactNumber,\n  dataMax,\n  isWholeData,\n  timeXAxis,\n  valueYAxis,\n} from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { DragSelectionBand, activeIndex, useDragSelection } from '@/ds/primitives/charts/drag-selection';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\n/** Corner radius of every segment; thin segments scale it down so they stay crisp rectangles. */\nconst RADIUS = 2;\n/** Pixels between stacked segments, so neighbouring segments read as separate blocks. */\nconst SEGMENT_GAP = 2;\n/** Opacity at the base of a segment's gradient (the top is fully opaque). */\nconst GRADIENT_BASE = 0.75;\n/** Single-series bars: translucent body under a solid cap that marks the value. */\nconst CAP_BODY = 0.55;\nconst CAP_HEIGHT = 3;\n/** Opacity of the other columns while one is hovered. */\nconst DIMMED = 0.3;\nconst COLUMN_LABEL_SPACE = 16;\n\ntype SegmentProps = {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  index?: number;\n  payload?: Record<string, unknown>;\n};\n\nfunction segmentShape({\n  fill,\n  color,\n  capped,\n  keys,\n  dataKey,\n}: {\n  fill: string;\n  color: string;\n  capped: boolean;\n  /** The column's data keys, bottom to top. */\n  keys: string[];\n  dataKey: string;\n}) {\n  return function Segment({ x = 0, width = 0, index, payload, ...geo }: SegmentProps) {\n    const values = keys.map(k => Number(payload?.[k]) || 0);\n    const self = keys.indexOf(dataKey);\n    const box = { y: geo.y ?? 0, height: Math.max(geo.height ?? 0, 0) };\n    // Every non-zero value gets a few readable pixels; zeros draw nothing.\n    const laid =\n      keys.length > 1\n        ? stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })\n        : singleBarBox(values[self] ?? 0, box);\n    if (!laid) return <g />;\n    const { y, height: h } = laid;\n    const radius = Math.min(RADIUS, Math.floor(h / 3));\n    // Dimming is a CSS rule keyed on `data-bucket` (see `HoverDim`), so hovering re-renders no bars.\n    const bucket = { 'data-bucket': index };\n\n    if (capped) {\n      return (\n        <g {...bucket}>\n          <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={color} fillOpacity={CAP_BODY} />\n          <Rectangle x={x} y={y} width={width} height={Math.min(CAP_HEIGHT, h)} radius={radius} fill={color} />\n        </g>\n      );\n    }\n    return (\n      <g {...bucket}>\n        <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={fill} />\n      </g>\n    );\n  };\n}\n\n/**\n * Dims every column outside the hovered one, or outside the range being dragged. Its own tiny\n * state, so a move only re-renders this <style> tag: with hundreds of buckets, re-rendering the\n * bars on each move froze the pointer.\n */\nfunction HoverDim({\n  scope,\n  setter,\n}: {\n  scope: string;\n  setter: { current: (range: DragSelectionRange | undefined) => void };\n}) {\n  const [lit, setLit] = useState<DragSelectionRange>();\n  useLayoutEffect(() => {\n    setter.current = setLit;\n  }, [setter]);\n  if (!lit) return null;\n  const columns = `[data-chart-scope=\"${scope}\"] [data-bucket]`;\n  const kept = Array.from(\n    { length: lit.end - lit.start + 1 },\n    (_, i) => `${columns}[data-bucket=\"${lit.start + i}\"]`,\n  ).join(',');\n  return <style>{`${columns}{opacity:${DIMMED}}${kept}{opacity:1}`}</style>;\n}\n\n/** A line drawn over the bars on its own scale, e.g. average wake time over cold starts. */\nexport type MetricsStackedBarChartOverlay = MetricsLineChartSeries & {\n  valueFormatter?: (value: number) => string;\n};\n\nexport type MetricsStackedBarChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Formats tooltip values, and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  showLegend?: boolean;\n  referenceLine?: { value: number; label: string; color: string };\n  /**\n   * `gradient`: segments fade gently toward the base. Reads best for stacks.\n   * `capped`: a translucent body under a solid cap that marks the value. Reads best for one\n   * value per column.\n   */\n  variant?: 'gradient' | 'capped';\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Adds a \"Total\" row (the column's height) to the tooltip. Defaults to on for stacks. */\n  showTotal?: boolean;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  columnLabelKey?: string;\n  /** Widest a column gets, in pixels. Defaults to 28; raise it for dense strips of many thin columns. */\n  maxBarSize?: number;\n  /** Click a column (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /**\n   * Drag across two or more columns to select them (e.g. to zoom into that time span); reports the\n   * first and last selected row indices. A press and release on one column stays a click.\n   */\n  onZoom?: (range: DragSelectionRange) => void;\n  /** One dashed line over the bars, on its own hidden scale (e.g. a duration over counts). */\n  overlay?: MetricsStackedBarChartOverlay;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsStackedBarChart(props: MetricsStackedBarChartProps) {\n  const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;\n  const id = useChartDefsId();\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  const legend = overlay ? [...series, { ...overlay, dashed: true }] : series;\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root} data-chart-scope={id}>\n      {showLegend && <MetricsLineChartLegend series={legend} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"bar\" height={height} /> : <BarPlot {...props} id={id} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in; `id` scopes its gradients and hover rule. */\nfunction BarPlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  valueFormatter,\n  axisFormatter,\n  referenceLine,\n  variant = 'gradient',\n  showYAxis = true,\n  showTotal = series.length > 1,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  columnLabelKey,\n  maxBarSize = 28,\n  onBucketClick,\n  onZoom,\n  overlay,\n  id,\n}: MetricsStackedBarChartProps & { id: string }) {\n  const setLit = useRef<(range: DragSelectionRange | undefined) => void>(() => {});\n  const { size, onResize, ref } = useChartSize();\n  // The dragged columns stay lit through the same rule as hover, so a drag never re-renders the bars.\n  const selection = useDragSelection({ onSelect: onZoom, onPreview: range => setLit.current(range) });\n\n  const keyList = series.map(s => s.dataKey).join('\\u0000');\n  const colorList = series.map(s => s.color).join('\\u0000');\n  // Stable shapes, so Recharts doesn't re-render every bar when the parent re-renders.\n  const shapes = useMemo(() => {\n    const keys = keyList.split('\\u0000');\n    const colors = colorList.split('\\u0000');\n    return keys.map((dataKey, i) =>\n      segmentShape({\n        fill: `url(#${id}-bar-${i})`,\n        color: colors[i] ?? '',\n        capped: variant === 'capped',\n        keys,\n        dataKey,\n      }),\n    );\n  }, [keyList, colorList, variant, id]);\n\n  const format = valueFormatter ?? compactNumber.format;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const margin = columnLabelKey ? { ...CHART_MARGIN, top: CHART_MARGIN.top + COLUMN_LABEL_SPACE } : CHART_MARGIN;\n\n  return (\n    <>\n      <HoverDim scope={id} setter={setLit} />\n      <ChartPlot\n        height={height}\n        plotRef={ref}\n        onResize={onResize}\n        clickable={!!onBucketClick && !selection.enabled}\n        className={selection.className}\n      >\n        <ComposedChart\n          data={data}\n          margin={margin}\n          onMouseDown={selection.onMouseDown}\n          onMouseMove={state => {\n            if (selection.isDragging()) return selection.onMouseMove(state);\n            const index = activeIndex(state);\n            setLit.current(index === undefined ? undefined : { start: index, end: index });\n          }}\n          onMouseLeave={() => {\n            // Mid-drag the selection stays lit until the release.\n            if (!selection.isDragging()) setLit.current(undefined);\n          }}\n          onClick={state => {\n            if (selection.consumeReleaseClick()) return;\n            const i = activeIndex(state);\n            const row = i === undefined ? undefined : data[i];\n            if (onBucketClick && row && i !== undefined) onBucketClick(row, i);\n          }}\n        >\n          <defs>\n            {series.map((s, i) => (\n              <linearGradient key={s.dataKey} id={`${id}-bar-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor={s.color} stopOpacity={1} />\n                <stop offset=\"100%\" stopColor={s.color} stopOpacity={GRADIENT_BASE} />\n              </linearGradient>\n            ))}\n          </defs>\n          <CartesianGrid {...CHART_GRID_PROPS} />\n          {selection.enabled && <DragSelectionBand selection={selection} count={data.length} />}\n          {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n          {valueYAxis({\n            show: showYAxis,\n            size,\n            formatter: axisFormatter ?? format,\n            domain: yDomain,\n            // A reference line above the bars stays on the axis.\n            max: Math.max(\n              dataMax(\n                data,\n                series.map(s => s.dataKey),\n                true,\n              ),\n              referenceLine?.value ?? 0,\n            ),\n            integer: isWholeData(\n              data,\n              series.map(s => s.dataKey),\n            ),\n          })}\n          {overlay &&\n            valueYAxis({\n              id: 'overlay',\n              show: false,\n              size,\n              formatter: overlay.valueFormatter ?? compactNumber.format,\n              max: dataMax(data, [overlay.dataKey]),\n              integer: isWholeData(data, [overlay.dataKey]),\n              right: true,\n            })}\n          <Tooltip\n            {...CHART_TOOLTIP_PROPS}\n            cursor={false}\n            content={\n              <ChartTooltipPosition>\n                <MetricsLineChartTooltip\n                  formatValue={format}\n                  showTotal={showTotal && !overlay}\n                  labelKey={tooltipLabelKey}\n                  formatByKey={overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : undefined}\n                />\n              </ChartTooltipPosition>\n            }\n          />\n          {series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              stackId=\"1\"\n              fill={s.color}\n              maxBarSize={maxBarSize}\n              isAnimationActive={false}\n              shape={shapes[i]}\n            >\n              {columnLabelKey && (\n                <LabelList\n                  dataKey={columnLabelKey}\n                  content={(props: LabelProps) => (\n                    <ColumnLabel\n                      {...props}\n                      row={data[Number(props.index)]}\n                      keys={series.map(({ dataKey }) => dataKey)}\n                      self={i}\n                      color={s.color}\n                    />\n                  )}\n                />\n              )}\n            </Bar>\n          ))}\n          {overlay && (\n            <Line\n              yAxisId=\"overlay\"\n              type=\"monotone\"\n              dataKey={overlay.dataKey}\n              name={overlay.label}\n              stroke={overlay.color}\n              strokeWidth={1.75}\n              strokeDasharray=\"4 3\"\n              dot={false}\n              activeDot={{ r: 3.5, fill: overlay.color, stroke: 'var(--background)', strokeWidth: 2 }}\n              isAnimationActive={false}\n              connectNulls\n            />\n          )}\n          {referenceLine && (\n            <ReferenceLine\n              y={referenceLine.value}\n              ifOverflow=\"extendDomain\"\n              stroke={referenceLine.color}\n              strokeDasharray=\"4 4\"\n              label={{ value: referenceLine.label, position: 'insideTopLeft', ...CHART_TICK }}\n            />\n          )}\n        </ComposedChart>\n      </ChartPlot>\n    </>\n  );\n}\n\ntype ColumnLabelProps = LabelProps & {\n  row: MetricsStackedBarChartProps['data'][number] | undefined;\n  keys: string[];\n  self: number;\n  color: string;\n};\n\nfunction paintedTop(values: number[], self: number, box: SegmentBox) {\n  if (values.length > 1) return stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;\n  return singleBarBox(values[self] ?? 0, box)?.y;\n}\n\nfunction ColumnLabel({ x, y, width, height, value, row, keys, self, color }: ColumnLabelProps) {\n  if (value === undefined || value === null || value === '') return null;\n  const values = keys.map(key => Number(row?.[key]) || 0);\n  const topmost = values.findLastIndex(v => v > 0);\n  if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;\n  const top = paintedTop(values, self, { y: Number(y), height: Math.max(Number(height), 0) }) ?? Number(y);\n  return (\n    <text\n      x={Number(x) + Number(width) / 2}\n      y={top - 6}\n      textAnchor=\"middle\"\n      fontSize={CHART_AXIS_FONT_SIZE}\n      fill={color}\n      className=\"tabular-nums\"\n    >\n      {String(value)}\n    </text>\n  );\n}\n"],"mappings":"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"}

package/dist/{MetricsStackedBarChart-NATtwA_W.cjs → MetricsStackedBarChart-BdMlKv6G.cjs}

@@ -1,5 +1,5 @@
 const require_utils = require("./utils-uDc1ofX1.cjs");
-const require_MetricsLineChart = require("./MetricsLineChart-2m4LVL1N.cjs");
+const require_MetricsLineChart = require("./MetricsLineChart-CjBm4IXu.cjs");
 const require_primitives_chart_layout = require("./primitives/chart-layout.cjs.js");
 const require_components_ChartSkeleton = require("./components/ChartSkeleton.cjs.js");
 const require_primitives_chart_axes = require("./primitives/chart-axes.cjs.js");
@@ -99,7 +99,6 @@ function MetricsStackedBarChart(props) {
 		className: root,
 		"data-chart-scope": id,
 		children: [showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsLineChart.MetricsLineChartLegend, {
-			data: isLoading ? void 0 : data,
 			series: legend,
 			className: "mb-4"
 		}), isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_ChartSkeleton.ChartSkeleton, {
@@ -311,4 +310,4 @@ Object.defineProperty(exports, "MetricsStackedBarChart", {
 	}
 });
 
-//# sourceMappingURL=MetricsStackedBarChart-NATtwA_W.cjs.map
+//# sourceMappingURL=MetricsStackedBarChart-BdMlKv6G.cjs.map

package/dist/MetricsStackedBarChart-BdMlKv6G.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsStackedBarChart-BdMlKv6G.cjs","names":["stackedSegmentBox","singleBarBox","Rectangle","useState","useChartDefsId","cn","MetricsLineChartLegend","ChartSkeleton","useRef","useChartSize","useDragSelection","useMemo","compactNumber","CHART_MARGIN","_Fragment","ChartPlot","ComposedChart","activeIndex","CartesianGrid","CHART_GRID_PROPS","DragSelectionBand","timeXAxis","valueYAxis","dataMax","isWholeData","Tooltip","CHART_TOOLTIP_PROPS","ChartTooltipPosition","MetricsLineChartTooltip","Bar","LabelList","Line","ReferenceLine","CHART_TICK"],"sources":["../src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Bar, CartesianGrid, ComposedChart, LabelList, Line, Rectangle, ReferenceLine, Tooltip } from 'recharts';\nimport type { LabelProps } from 'recharts';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChartLegend, MetricsLineChartTooltip } from '@/ds/components/MetricsLineChart';\nimport { CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { singleBarBox, stackedSegmentBox } from '@/ds/primitives/chart-column-layout';\nimport type { SegmentBox } from '@/ds/primitives/chart-column-layout';\nimport {\n  CHART_TICK,\n  Y_AXIS_WIDTH,\n  compactNumber,\n  dataMax,\n  isWholeData,\n  timeXAxis,\n  valueYAxis,\n} from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { DragSelectionBand, activeIndex, useDragSelection } from '@/ds/primitives/charts/drag-selection';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\n/** Corner radius of every segment; thin segments scale it down so they stay crisp rectangles. */\nconst RADIUS = 2;\n/** Pixels between stacked segments, so neighbouring segments read as separate blocks. */\nconst SEGMENT_GAP = 2;\n/** Opacity at the base of a segment's gradient (the top is fully opaque). */\nconst GRADIENT_BASE = 0.75;\n/** Single-series bars: translucent body under a solid cap that marks the value. */\nconst CAP_BODY = 0.55;\nconst CAP_HEIGHT = 3;\n/** Opacity of the other columns while one is hovered. */\nconst DIMMED = 0.3;\nconst COLUMN_LABEL_SPACE = 16;\n\ntype SegmentProps = {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  index?: number;\n  payload?: Record<string, unknown>;\n};\n\nfunction segmentShape({\n  fill,\n  color,\n  capped,\n  keys,\n  dataKey,\n}: {\n  fill: string;\n  color: string;\n  capped: boolean;\n  /** The column's data keys, bottom to top. */\n  keys: string[];\n  dataKey: string;\n}) {\n  return function Segment({ x = 0, width = 0, index, payload, ...geo }: SegmentProps) {\n    const values = keys.map(k => Number(payload?.[k]) || 0);\n    const self = keys.indexOf(dataKey);\n    const box = { y: geo.y ?? 0, height: Math.max(geo.height ?? 0, 0) };\n    // Every non-zero value gets a few readable pixels; zeros draw nothing.\n    const laid =\n      keys.length > 1\n        ? stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })\n        : singleBarBox(values[self] ?? 0, box);\n    if (!laid) return <g />;\n    const { y, height: h } = laid;\n    const radius = Math.min(RADIUS, Math.floor(h / 3));\n    // Dimming is a CSS rule keyed on `data-bucket` (see `HoverDim`), so hovering re-renders no bars.\n    const bucket = { 'data-bucket': index };\n\n    if (capped) {\n      return (\n        <g {...bucket}>\n          <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={color} fillOpacity={CAP_BODY} />\n          <Rectangle x={x} y={y} width={width} height={Math.min(CAP_HEIGHT, h)} radius={radius} fill={color} />\n        </g>\n      );\n    }\n    return (\n      <g {...bucket}>\n        <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={fill} />\n      </g>\n    );\n  };\n}\n\n/**\n * Dims every column outside the hovered one, or outside the range being dragged. Its own tiny\n * state, so a move only re-renders this <style> tag: with hundreds of buckets, re-rendering the\n * bars on each move froze the pointer.\n */\nfunction HoverDim({\n  scope,\n  setter,\n}: {\n  scope: string;\n  setter: { current: (range: DragSelectionRange | undefined) => void };\n}) {\n  const [lit, setLit] = useState<DragSelectionRange>();\n  useLayoutEffect(() => {\n    setter.current = setLit;\n  }, [setter]);\n  if (!lit) return null;\n  const columns = `[data-chart-scope=\"${scope}\"] [data-bucket]`;\n  const kept = Array.from(\n    { length: lit.end - lit.start + 1 },\n    (_, i) => `${columns}[data-bucket=\"${lit.start + i}\"]`,\n  ).join(',');\n  return <style>{`${columns}{opacity:${DIMMED}}${kept}{opacity:1}`}</style>;\n}\n\n/** A line drawn over the bars on its own scale, e.g. average wake time over cold starts. */\nexport type MetricsStackedBarChartOverlay = MetricsLineChartSeries & {\n  valueFormatter?: (value: number) => string;\n};\n\nexport type MetricsStackedBarChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Formats tooltip values, and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  showLegend?: boolean;\n  referenceLine?: { value: number; label: string; color: string };\n  /**\n   * `gradient`: segments fade gently toward the base. Reads best for stacks.\n   * `capped`: a translucent body under a solid cap that marks the value. Reads best for one\n   * value per column.\n   */\n  variant?: 'gradient' | 'capped';\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Adds a \"Total\" row (the column's height) to the tooltip. Defaults to on for stacks. */\n  showTotal?: boolean;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  columnLabelKey?: string;\n  /** Widest a column gets, in pixels. Defaults to 28; raise it for dense strips of many thin columns. */\n  maxBarSize?: number;\n  /** Click a column (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /**\n   * Drag across two or more columns to select them (e.g. to zoom into that time span); reports the\n   * first and last selected row indices. A press and release on one column stays a click.\n   */\n  onZoom?: (range: DragSelectionRange) => void;\n  /** One dashed line over the bars, on its own hidden scale (e.g. a duration over counts). */\n  overlay?: MetricsStackedBarChartOverlay;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsStackedBarChart(props: MetricsStackedBarChartProps) {\n  const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;\n  const id = useChartDefsId();\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  const legend = overlay ? [...series, { ...overlay, dashed: true }] : series;\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root} data-chart-scope={id}>\n      {showLegend && <MetricsLineChartLegend series={legend} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"bar\" height={height} /> : <BarPlot {...props} id={id} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in; `id` scopes its gradients and hover rule. */\nfunction BarPlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  valueFormatter,\n  axisFormatter,\n  referenceLine,\n  variant = 'gradient',\n  showYAxis = true,\n  showTotal = series.length > 1,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  columnLabelKey,\n  maxBarSize = 28,\n  onBucketClick,\n  onZoom,\n  overlay,\n  id,\n}: MetricsStackedBarChartProps & { id: string }) {\n  const setLit = useRef<(range: DragSelectionRange | undefined) => void>(() => {});\n  const { size, onResize, ref } = useChartSize();\n  // The dragged columns stay lit through the same rule as hover, so a drag never re-renders the bars.\n  const selection = useDragSelection({ onSelect: onZoom, onPreview: range => setLit.current(range) });\n\n  const keyList = series.map(s => s.dataKey).join('\\u0000');\n  const colorList = series.map(s => s.color).join('\\u0000');\n  // Stable shapes, so Recharts doesn't re-render every bar when the parent re-renders.\n  const shapes = useMemo(() => {\n    const keys = keyList.split('\\u0000');\n    const colors = colorList.split('\\u0000');\n    return keys.map((dataKey, i) =>\n      segmentShape({\n        fill: `url(#${id}-bar-${i})`,\n        color: colors[i] ?? '',\n        capped: variant === 'capped',\n        keys,\n        dataKey,\n      }),\n    );\n  }, [keyList, colorList, variant, id]);\n\n  const format = valueFormatter ?? compactNumber.format;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const margin = columnLabelKey ? { ...CHART_MARGIN, top: CHART_MARGIN.top + COLUMN_LABEL_SPACE } : CHART_MARGIN;\n\n  return (\n    <>\n      <HoverDim scope={id} setter={setLit} />\n      <ChartPlot\n        height={height}\n        plotRef={ref}\n        onResize={onResize}\n        clickable={!!onBucketClick && !selection.enabled}\n        className={selection.className}\n      >\n        <ComposedChart\n          data={data}\n          margin={margin}\n          onMouseDown={selection.onMouseDown}\n          onMouseMove={state => {\n            if (selection.isDragging()) return selection.onMouseMove(state);\n            const index = activeIndex(state);\n            setLit.current(index === undefined ? undefined : { start: index, end: index });\n          }}\n          onMouseLeave={() => {\n            // Mid-drag the selection stays lit until the release.\n            if (!selection.isDragging()) setLit.current(undefined);\n          }}\n          onClick={state => {\n            if (selection.consumeReleaseClick()) return;\n            const i = activeIndex(state);\n            const row = i === undefined ? undefined : data[i];\n            if (onBucketClick && row && i !== undefined) onBucketClick(row, i);\n          }}\n        >\n          <defs>\n            {series.map((s, i) => (\n              <linearGradient key={s.dataKey} id={`${id}-bar-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor={s.color} stopOpacity={1} />\n                <stop offset=\"100%\" stopColor={s.color} stopOpacity={GRADIENT_BASE} />\n              </linearGradient>\n            ))}\n          </defs>\n          <CartesianGrid {...CHART_GRID_PROPS} />\n          {selection.enabled && <DragSelectionBand selection={selection} count={data.length} />}\n          {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n          {valueYAxis({\n            show: showYAxis,\n            size,\n            formatter: axisFormatter ?? format,\n            domain: yDomain,\n            // A reference line above the bars stays on the axis.\n            max: Math.max(\n              dataMax(\n                data,\n                series.map(s => s.dataKey),\n                true,\n              ),\n              referenceLine?.value ?? 0,\n            ),\n            integer: isWholeData(\n              data,\n              series.map(s => s.dataKey),\n            ),\n          })}\n          {overlay &&\n            valueYAxis({\n              id: 'overlay',\n              show: false,\n              size,\n              formatter: overlay.valueFormatter ?? compactNumber.format,\n              max: dataMax(data, [overlay.dataKey]),\n              integer: isWholeData(data, [overlay.dataKey]),\n              right: true,\n            })}\n          <Tooltip\n            {...CHART_TOOLTIP_PROPS}\n            cursor={false}\n            content={\n              <ChartTooltipPosition>\n                <MetricsLineChartTooltip\n                  formatValue={format}\n                  showTotal={showTotal && !overlay}\n                  labelKey={tooltipLabelKey}\n                  formatByKey={overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : undefined}\n                />\n              </ChartTooltipPosition>\n            }\n          />\n          {series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              stackId=\"1\"\n              fill={s.color}\n              maxBarSize={maxBarSize}\n              isAnimationActive={false}\n              shape={shapes[i]}\n            >\n              {columnLabelKey && (\n                <LabelList\n                  dataKey={columnLabelKey}\n                  content={(props: LabelProps) => (\n                    <ColumnLabel\n                      {...props}\n                      row={data[Number(props.index)]}\n                      keys={series.map(({ dataKey }) => dataKey)}\n                      self={i}\n                      color={s.color}\n                    />\n                  )}\n                />\n              )}\n            </Bar>\n          ))}\n          {overlay && (\n            <Line\n              yAxisId=\"overlay\"\n              type=\"monotone\"\n              dataKey={overlay.dataKey}\n              name={overlay.label}\n              stroke={overlay.color}\n              strokeWidth={1.75}\n              strokeDasharray=\"4 3\"\n              dot={false}\n              activeDot={{ r: 3.5, fill: overlay.color, stroke: 'var(--background)', strokeWidth: 2 }}\n              isAnimationActive={false}\n              connectNulls\n            />\n          )}\n          {referenceLine && (\n            <ReferenceLine\n              y={referenceLine.value}\n              ifOverflow=\"extendDomain\"\n              stroke={referenceLine.color}\n              strokeDasharray=\"4 4\"\n              label={{ value: referenceLine.label, position: 'insideTopLeft', ...CHART_TICK }}\n            />\n          )}\n        </ComposedChart>\n      </ChartPlot>\n    </>\n  );\n}\n\ntype ColumnLabelProps = LabelProps & {\n  row: MetricsStackedBarChartProps['data'][number] | undefined;\n  keys: string[];\n  self: number;\n  color: string;\n};\n\nfunction paintedTop(values: number[], self: number, box: SegmentBox) {\n  if (values.length > 1) return stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;\n  return singleBarBox(values[self] ?? 0, box)?.y;\n}\n\nfunction ColumnLabel({ x, y, width, height, value, row, keys, self, color }: ColumnLabelProps) {\n  if (value === undefined || value === null || value === '') return null;\n  const values = keys.map(key => Number(row?.[key]) || 0);\n  const topmost = values.findLastIndex(v => v > 0);\n  if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;\n  const top = paintedTop(values, self, { y: Number(y), height: Math.max(Number(height), 0) }) ?? Number(y);\n  return (\n    <text\n      x={Number(x) + Number(width) / 2}\n      y={top - 6}\n      textAnchor=\"middle\"\n      fontSize={CHART_AXIS_FONT_SIZE}\n      fill={color}\n      className=\"tabular-nums\"\n    >\n      {String(value)}\n    </text>\n  );\n}\n"],"mappings":"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"}

package/dist/Notice.css

@@ -1,3 +1,5 @@
+@layer properties, theme, base, components, utilities;
+
 :where([data-slot='notice'], .mastra-toaster [data-sonner-toast]) {
   --notice-subtle: var(--card);
   --notice-edge: transparent;

package/dist/Shimmer.css

@@ -42,6 +42,13 @@
   animation-play-state: paused;
 }
 
+/* A shimmer inside another owns its text: the outer one would paint the same glyphs twice,
+ * and paints none of them while the inner one moves on a layer of its own. */
+.shimmer-text:has(.shimmer-text) {
+  background-image: none;
+  -webkit-text-fill-color: currentcolor;
+}
+
 @keyframes shimmer-text {
   from {
     background-position: 100% 0;