@mastra/playground-ui 68.0.0-alpha.3 → 68.0.0

package/dist/{MetricsLineChart-CjBm4IXu.cjs → MetricsLineChart-tZxsauau.cjs}

@@ -141,7 +141,7 @@ function MetricsLineChart(props) {
 	});
 }
 /** The plot itself, once the data is in. */
-function LinePlot({ data, series, height = 210, yDomain, onPointClick, onBucketClick, xKey = "time", timestampKey = "tsMs", xLabels = "auto", tooltipLabelKey, showDots = false, dots = "auto", lineStyle = "default", valueFormatter, axisFormatter, showYAxis = true }) {
+function LinePlot({ data, series, height = 210, yDomain, onPointClick, onBucketClick, xKey = "time", timestampKey = "tsMs", xLabels = "auto", tooltipLabelKey, showDots = false, dots = "auto", lineStyle = "default", valueFormatter, axisFormatter, showYAxis = true, markers = [] }) {
 	const id = require_primitives_use_chart_defs_id.useChartDefsId();
 	const { size, onResize, ref } = require_primitives_chart_axes.useChartSize();
 	const format = valueFormatter ?? require_primitives_chart_frame.compactNumber.format;
@@ -212,6 +212,17 @@ function LinePlot({ data, series, height = 210, yDomain, onPointClick, onBucketC
 					max: require_primitives_chart_frame.dataMax(data, series.map((s) => s.dataKey)),
 					integer: require_primitives_chart_frame.isWholeData(data, series.map((s) => s.dataKey))
 				}),
+				markers.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceLine, {
+					x: m.x,
+					stroke: "var(--border-strong)",
+					strokeDasharray: "3 3",
+					label: m.label ? {
+						value: m.label,
+						position: "insideTopLeft",
+						fill: "var(--muted-foreground)",
+						fontSize: 11
+					} : void 0
+				}, m.x)),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
 					...require_primitives_chart_axes.CHART_TOOLTIP_PROPS,
 					content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_chart_tooltip_position.ChartTooltipPosition, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetricsLineChartTooltip, {
@@ -265,4 +276,4 @@ Object.defineProperty(exports, "MetricsLineChartTooltip", {
 	}
 });
 
-//# sourceMappingURL=MetricsLineChart-CjBm4IXu.cjs.map
+//# sourceMappingURL=MetricsLineChart-tZxsauau.cjs.map

package/dist/MetricsLineChart-tZxsauau.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsLineChart-tZxsauau.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","ReferenceLine","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, ReferenceLine, 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  /**\n   * Vertical lines at buckets, e.g. where a billing period starts. `x` must be one of the data's\n   * `xKey` values: the axis is categorical, so any other value draws nothing.\n   */\n  markers?: { x: string; label?: string }[];\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  markers = [],\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        {markers.map(m => (\n          <ReferenceLine\n            key={m.x}\n            x={m.x}\n            stroke=\"var(--border-strong)\"\n            strokeDasharray=\"3 3\"\n            label={\n              m.label\n                ? { value: m.label, position: 'insideTopLeft', fill: 'var(--muted-foreground)', fontSize: 11 }\n                : undefined\n            }\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/{MetricsStackedBarChart-BdMlKv6G.cjs → MetricsStackedBarChart-CDLE76IB.cjs}

@@ -1,5 +1,5 @@
 const require_utils = require("./utils-uDc1ofX1.cjs");
-const require_MetricsLineChart = require("./MetricsLineChart-CjBm4IXu.cjs");
+const require_MetricsLineChart = require("./MetricsLineChart-tZxsauau.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");
@@ -310,4 +310,4 @@ Object.defineProperty(exports, "MetricsStackedBarChart", {
 	}
 });
 
-//# sourceMappingURL=MetricsStackedBarChart-BdMlKv6G.cjs.map
+//# sourceMappingURL=MetricsStackedBarChart-CDLE76IB.cjs.map

package/dist/{MetricsStackedBarChart-BdMlKv6G.cjs.map → MetricsStackedBarChart-CDLE76IB.cjs.map}

@@ -1 +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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"}
+{"version":3,"file":"MetricsStackedBarChart-CDLE76IB.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":";;;;;;;;;;;;;;;;;;AA6BA,IAAM,SAAS;;AAEf,IAAM,cAAc;;AAEpB,IAAM,gBAAgB;;AAEtB,IAAM,WAAW;AACjB,IAAM,aAAa;;AAEnB,IAAM,SAAS;AACf,IAAM,qBAAqB;AAW3B,SAAS,aAAa,EACpB,MACA,OACA,QACA,MACA,WAQC;CACD,OAAO,SAAS,QAAQ,EAAE,IAAI,GAAG,QAAQ,GAAG,OAAO,SAAS,GAAG,OAAqB;EAClF,MAAM,SAAS,KAAK,KAAI,MAAK,OAAO,UAAU,EAAE,KAAK,CAAC;EACtD,MAAM,OAAO,KAAK,QAAQ,OAAO;EACjC,MAAM,MAAM;GAAE,GAAG,IAAI,KAAK;GAAG,QAAQ,KAAK,IAAI,IAAI,UAAU,GAAG,CAAC;EAAE;EAElE,MAAM,OACJ,KAAK,SAAS,IACVA,uCAAAA,kBAAkB,QAAQ,MAAM,KAAK,EAAE,KAAK,YAAY,CAAC,IACzDC,uCAAAA,aAAa,OAAO,SAAS,GAAG,GAAG;EACzC,IAAI,CAAC,MAAM,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD,CAAI,CAAA;EACtB,MAAM,EAAE,GAAG,QAAQ,MAAM;EACzB,MAAM,SAAS,KAAK,IAAI,QAAQ,KAAK,MAAM,IAAI,CAAC,CAAC;EAEjD,MAAM,SAAS,EAAE,eAAe,MAAM;EAEtC,IAAI,QACF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,KAAD;GAAG,GAAI;GAAP,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,WAAD;IAAc;IAAM;IAAU;IAAO,QAAQ;IAAW;IAAQ,MAAM;IAAO,aAAa;GAAW,CAAA,GACrG,iBAAA,GAAA,kBAAA,IAAA,CAACA,SAAAA,WAAD;IAAc;IAAM;IAAU;IAAO,QAAQ,KAAK,IAAI,YAAY,CAAC;IAAW;IAAQ,MAAM;GAAQ,CAAA,CACnG;;EAGP,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;GAAG,GAAI;GACL,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,SAAAA,WAAD;IAAc;IAAM;IAAU;IAAO,QAAQ;IAAW;IAAc;GAAO,CAAA;EAC5E,CAAA;CAEP;AACF;;;;;;AAOA,SAAS,SAAS,EAChB,OACA,UAIC;CACD,MAAM,CAAC,KAAK,WAAA,GAAUC,MAAAA,SAAAA,CAA6B;CACnD,CAAA,GAAA,MAAA,gBAAA,OAAsB;EACpB,OAAO,UAAU;CACnB,GAAG,CAAC,MAAM,CAAC;CACX,IAAI,CAAC,KAAK,OAAO;CACjB,MAAM,UAAU,sBAAsB,MAAM;CAC5C,MAAM,OAAO,MAAM,KACjB,EAAE,QAAQ,IAAI,MAAM,IAAI,QAAQ,EAAE,IACjC,GAAG,MAAM,GAAG,QAAQ,gBAAgB,IAAI,QAAQ,EAAE,GACrD,CAAC,CAAC,KAAK,GAAG;CACV,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD,EAAA,UAAQ,GAAG,QAAQ,WAAW,OAAO,GAAG,KAAK,aAAoB,CAAA;AAC1E;AAyDA,SAAgB,uBAAuB,OAAoC;CACzE,MAAM,EAAE,MAAM,QAAQ,SAAS,SAAS,KAAK,aAAa,MAAM,YAAY,OAAO,cAAc;CACjG,MAAM,KAAKC,qCAAAA,eAAe;CAC1B,MAAM,OAAOC,cAAAA,GAAG,WAAW,UAAU,gCAAgC,SAAS;CAC9E,MAAM,SAAS,UAAU,CAAC,GAAG,QAAQ;EAAE,GAAG;EAAS,QAAQ;CAAK,CAAC,IAAI;CAErE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAW;EAAM,oBAAkB;EAAxC,UAAA,CACG,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,wBAAD;GAAwB,QAAQ;GAAQ,WAAU;EAAQ,CAAA,GACxE,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAACC,iCAAAA,eAAD;GAAe,MAAK;GAAc;EAAS,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAS,GAAI;GAAW;EAAK,CAAA,CACtF;;AAET;;AAGA,SAAS,QAAQ,EACf,MACA,QACA,SAAS,KACT,SACA,gBACA,eACA,eACA,UAAU,YACV,YAAY,MACZ,YAAY,OAAO,SAAS,GAC5B,OAAO,QACP,eAAe,QACf,UAAU,QACV,iBACA,gBACA,aAAa,IACb,eACA,QACA,SACA,MAC+C;CAC/C,MAAM,UAAA,GAASC,MAAAA,OAAAA,OAA8D,CAAC,CAAC;CAC/E,MAAM,EAAE,MAAM,UAAU,QAAQC,8BAAAA,aAAa;CAE7C,MAAM,YAAYC,4DAAAA,iBAAiB;EAAE,UAAU;EAAQ,YAAW,UAAS,OAAO,QAAQ,KAAK;CAAE,CAAC;CAElG,MAAM,UAAU,OAAO,KAAI,MAAK,EAAE,OAAO,CAAC,CAAC,KAAK,IAAQ;CACxD,MAAM,YAAY,OAAO,KAAI,MAAK,EAAE,KAAK,CAAC,CAAC,KAAK,IAAQ;CAExD,MAAM,UAAA,GAASC,MAAAA,QAAAA,OAAc;EAC3B,MAAM,OAAO,QAAQ,MAAM,IAAQ;EACnC,MAAM,SAAS,UAAU,MAAM,IAAQ;EACvC,OAAO,KAAK,KAAK,SAAS,MACxB,aAAa;GACX,MAAM,QAAQ,GAAG,OAAO,EAAE;GAC1B,OAAO,OAAO,MAAM;GACpB,QAAQ,YAAY;GACpB;GACA;EACF,CAAC,CACH;CACF,GAAG;EAAC;EAAS;EAAW;EAAS;CAAE,CAAC;CAEpC,MAAM,SAAS,kBAAkBC,+BAAAA,cAAc;CAC/C,MAAM,YAAY,KAAK,SAAS,YAAA,KAA2B;CAC3D,MAAM,SAAS,iBAAiB;EAAE,GAAGC,gCAAAA;EAAc,KAAKA,gCAAAA,aAAa,MAAM;CAAmB,IAAIA,gCAAAA;CAElG,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EAAU,OAAO;EAAI,QAAQ;CAAS,CAAA,GACtC,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,WAAD;EACU;EACR,SAAS;EACC;EACV,WAAW,CAAC,CAAC,iBAAiB,CAAC,UAAU;EACzC,WAAW,UAAU;EAErB,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,SAAAA,eAAD;GACQ;GACE;GACR,aAAa,UAAU;GACvB,cAAa,UAAS;IACpB,IAAI,UAAU,WAAW,GAAG,OAAO,UAAU,YAAY,KAAK;IAC9D,MAAM,QAAQC,8DAAAA,YAAY,KAAK;IAC/B,OAAO,QAAQ,UAAU,KAAA,IAAY,KAAA,IAAY;KAAE,OAAO;KAAO,KAAK;IAAM,CAAC;GAC/E;GACA,oBAAoB;IAElB,IAAI,CAAC,UAAU,WAAW,GAAG,OAAO,QAAQ,KAAA,CAAS;GACvD;GACA,UAAS,UAAS;IAChB,IAAI,UAAU,oBAAoB,GAAG;IACrC,MAAM,IAAIA,8DAAAA,YAAY,KAAK;IAC3B,MAAM,MAAM,MAAM,KAAA,IAAY,KAAA,IAAY,KAAK;IAC/C,IAAI,iBAAiB,OAAO,MAAM,KAAA,GAAW,cAAc,KAAK,CAAC;GACnE;GAlBF,UAAA;IAoBE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UACG,OAAO,KAAK,GAAG,MACd,iBAAA,GAAA,kBAAA,KAAA,CAAC,kBAAD;KAAgC,IAAI,GAAG,GAAG,OAAO;KAAK,IAAG;KAAI,IAAG;KAAI,IAAG;KAAI,IAAG;KAA9E,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,QAAO;MAAK,WAAW,EAAE;MAAO,aAAa;KAAI,CAAA,GACvD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,QAAO;MAAO,WAAW,EAAE;MAAO,aAAa;KAAgB,CAAA,CACvD;IAHK,GAAA,EAAE,OAGP,CACjB,EACG,CAAA;IACN,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,eAAD,EAAe,GAAIC,8BAAAA,iBAAmB,CAAA;IACrC,UAAU,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAACC,6DAAAA,mBAAD;KAA8B;KAAW,OAAO,KAAK;IAAS,CAAA;IACnFC,+BAAAA,UAAU;KAAE;KAAM;KAAM;KAAc;KAAS;IAAU,CAAC;IAC1DC,+BAAAA,WAAW;KACV,MAAM;KACN;KACA,WAAW,iBAAiB;KAC5B,QAAQ;KAER,KAAK,KAAK,IACRC,+BAAAA,QACE,MACA,OAAO,KAAI,MAAK,EAAE,OAAO,GACzB,IACF,GACA,eAAe,SAAS,CAC1B;KACA,SAASC,+BAAAA,YACP,MACA,OAAO,KAAI,MAAK,EAAE,OAAO,CAC3B;IACF,CAAC;IACA,WACCF,+BAAAA,WAAW;KACT,IAAI;KACJ,MAAM;KACN;KACA,WAAW,QAAQ,kBAAkBV,+BAAAA,cAAc;KACnD,KAAKW,+BAAAA,QAAQ,MAAM,CAAC,QAAQ,OAAO,CAAC;KACpC,SAASC,+BAAAA,YAAY,MAAM,CAAC,QAAQ,OAAO,CAAC;KAC5C,OAAO;IACT,CAAC;IACH,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,SAAD;KACE,GAAIC,8BAAAA;KACJ,QAAQ;KACR,SACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,0CAAAA,sBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,yBAAD;MACE,aAAa;MACb,WAAW,aAAa,CAAC;MACzB,UAAU;MACV,aAAa,SAAS,iBAAiB,GAAG,QAAQ,UAAU,QAAQ,eAAe,IAAI,KAAA;KACxF,CAAA,EACmB,CAAA;IAEzB,CAAA;IACA,OAAO,KAAK,GAAG,MACd,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,KAAD;KAEE,SAAS,EAAE;KACX,MAAM,EAAE;KACR,SAAQ;KACR,MAAM,EAAE;KACI;KACZ,mBAAmB;KACnB,OAAO,OAAO;KAEb,UAAA,kBACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,WAAD;MACE,SAAS;MACT,UAAU,UACR,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAD;OACE,GAAI;OACJ,KAAK,KAAK,OAAO,MAAM,KAAK;OAC5B,MAAM,OAAO,KAAK,EAAE,cAAc,OAAO;OACzC,MAAM;OACN,OAAO,EAAE;MACV,CAAA;KAEJ,CAAA;IAEA,GAvBE,EAAE,OAuBJ,CACN;IACA,WACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,MAAD;KACE,SAAQ;KACR,MAAK;KACL,SAAS,QAAQ;KACjB,MAAM,QAAQ;KACd,QAAQ,QAAQ;KAChB,aAAa;KACb,iBAAgB;KAChB,KAAK;KACL,WAAW;MAAE,GAAG;MAAK,MAAM,QAAQ;MAAO,QAAQ;MAAqB,aAAa;KAAE;KACtF,mBAAmB;KACnB,cAAA;IACD,CAAA;IAEF,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,eAAD;KACE,GAAG,cAAc;KACjB,YAAW;KACX,QAAQ,cAAc;KACtB,iBAAgB;KAChB,OAAO;MAAE,OAAO,cAAc;MAAO,UAAU;MAAiB,GAAGC,+BAAAA;KAAW;IAC/E,CAAA;GAEU;;CACN,CAAA,CACX,EAAA,CAAA;AAEN;AASA,SAAS,WAAW,QAAkB,MAAc,KAAiB;CACnE,IAAI,OAAO,SAAS,GAAG,OAAOjC,uCAAAA,kBAAkB,QAAQ,MAAM,KAAK,EAAE,KAAK,YAAY,CAAC,CAAC,EAAE;CAC1F,OAAOC,uCAAAA,aAAa,OAAO,SAAS,GAAG,GAAG,CAAC,EAAE;AAC/C;AAEA,SAAS,YAAY,EAAE,GAAG,GAAG,OAAO,QAAQ,OAAO,KAAK,MAAM,MAAM,SAA2B;CAC7F,IAAI,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU,IAAI,OAAO;CAClE,MAAM,SAAS,KAAK,KAAI,QAAO,OAAO,MAAM,IAAI,KAAK,CAAC;CACtD,MAAM,UAAU,OAAO,eAAc,MAAK,IAAI,CAAC;CAC/C,IAAI,UAAU,YAAY,KAAK,KAAK,SAAS,IAAI,UAAU,OAAO;CAClE,MAAM,MAAM,WAAW,QAAQ,MAAM;EAAE,GAAG,OAAO,CAAC;EAAG,QAAQ,KAAK,IAAI,OAAO,MAAM,GAAG,CAAC;CAAE,CAAC,KAAK,OAAO,CAAC;CACvG,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAG,OAAO,CAAC,IAAI,OAAO,KAAK,IAAI;EAC/B,GAAG,MAAM;EACT,YAAW;EACX,UAAA;EACA,MAAM;EACN,WAAU;EAET,UAAA,OAAO,KAAK;CACT,CAAA;AAEV"}

package/dist/{MetricsStackedBarChart-BRuA6MTE.js → MetricsStackedBarChart-D2QyS4-z.js}

@@ -1,5 +1,5 @@
 import { t as cn } from "./utils-DQx8TpNT.js";
-import { n as MetricsLineChartTooltip, r as MetricsLineChartLegend } from "./MetricsLineChart-BhHoduO0.js";
+import { n as MetricsLineChartTooltip, r as MetricsLineChartLegend } from "./MetricsLineChart-4SwxBbQx.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";
@@ -305,4 +305,4 @@ function ColumnLabel({ x, y, width, height, value, row, keys, self, color }) {
 }
 export { MetricsStackedBarChart as t };
 
-//# sourceMappingURL=MetricsStackedBarChart-BRuA6MTE.js.map
+//# sourceMappingURL=MetricsStackedBarChart-D2QyS4-z.js.map

package/dist/{MetricsStackedBarChart-BRuA6MTE.js.map → MetricsStackedBarChart-D2QyS4-z.js.map}

@@ -1 +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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"}
+{"version":3,"file":"MetricsStackedBarChart-D2QyS4-z.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/components/DateTimeRangePicker.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_date_time_range_picker = require("../date-time-range-picker-CTt7Od0P.cjs");
+const require_date_time_range_picker = require("../date-time-range-picker-CWGjoR3j.cjs");
 exports.DateTimeRangePicker = require_date_time_range_picker.DateTimeRangePicker;

package/dist/components/DateTimeRangePicker.es.js

@@ -1 +1 @@
-export { t as DateTimeRangePicker } from "../date-time-range-picker-DKh1K9Iy.js";
+export { t as DateTimeRangePicker } from "../date-time-range-picker-CdSiXwB4.js";

package/dist/components/FilterBar.cjs.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_types = require("../types-CP7wbYua.cjs");
 const require_filter_bar_chip = require("../filter-bar-chip-Cg-UbIwP.cjs");
-const require_filter_bar_time_range = require("../filter-bar-time-range-BA-pXMlo.cjs");
-const require_FilterBar = require("../FilterBar-CQl04O6t.cjs");
+const require_filter_bar_time_range = require("../filter-bar-time-range-zdM024JD.cjs");
+const require_FilterBar = require("../FilterBar-BSP2UTjc.cjs");
 exports.DEFAULT_FILTER_OPERATORS = require_FilterBar.DEFAULT_FILTER_OPERATORS;
 exports.FILTER_BAR_TIME_RANGE_FIELD = require_filter_bar_time_range.FILTER_BAR_TIME_RANGE_FIELD;
 exports.FILTER_BAR_TIME_RANGE_FIELD_ID = require_filter_bar_time_range.FILTER_BAR_TIME_RANGE_FIELD_ID;

package/dist/components/FilterBar.es.js

@@ -1,5 +1,5 @@
 import { t as isFilterBarGroup } from "../types-DiiL5mTO.js";
 import { a as FilterBarChipValue, i as FilterBarChipRemove, n as FilterBarChipField, r as FilterBarChipOperator, t as FilterBarChip } from "../filter-bar-chip-CABeKrtf.js";
-import { i as FilterBarTimeRange, n as FILTER_BAR_TIME_RANGE_FIELD_ID, r as FILTER_BAR_TIME_RANGE_ITEM, t as FILTER_BAR_TIME_RANGE_FIELD } from "../filter-bar-time-range-mg9JeYue.js";
-import { a as FilterBarGroupEditor, i as FilterBarAdvancedChip, n as FilterBar, o as FilterBarLogicToggle, r as FilterBarChips, s as FilterBarInput, t as DEFAULT_FILTER_OPERATORS } from "../FilterBar-BgW2dqRQ.js";
+import { i as FilterBarTimeRange, n as FILTER_BAR_TIME_RANGE_FIELD_ID, r as FILTER_BAR_TIME_RANGE_ITEM, t as FILTER_BAR_TIME_RANGE_FIELD } from "../filter-bar-time-range-qlV8p7hp.js";
+import { a as FilterBarGroupEditor, i as FilterBarAdvancedChip, n as FilterBar, o as FilterBarLogicToggle, r as FilterBarChips, s as FilterBarInput, t as DEFAULT_FILTER_OPERATORS } from "../FilterBar-PSQ1OwqH.js";
 export { DEFAULT_FILTER_OPERATORS, FILTER_BAR_TIME_RANGE_FIELD, FILTER_BAR_TIME_RANGE_FIELD_ID, FILTER_BAR_TIME_RANGE_ITEM, FilterBar, FilterBarAdvancedChip, FilterBarChip, FilterBarChipField, FilterBarChipOperator, FilterBarChipRemove, FilterBarChipValue, FilterBarChips, FilterBarGroupEditor, FilterBarInput, FilterBarLogicToggle, FilterBarTimeRange, isFilterBarGroup };

package/dist/components/MetricsCard.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MetricsCard = require("../MetricsCard-CEB-f2sv.cjs");
+const require_MetricsCard = require("../MetricsCard-BEwiS7Pe.cjs");
 exports.MetricsCard = require_MetricsCard.MetricsCard;

package/dist/components/MetricsCard.es.js

@@ -1 +1 @@
-export { t as MetricsCard } from "../MetricsCard-M8awJ2B_.js";
+export { t as MetricsCard } from "../MetricsCard-ua6C6b8a.js";

package/dist/components/MetricsLineChart.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MetricsLineChart = require("../MetricsLineChart-CjBm4IXu.cjs");
+const require_MetricsLineChart = require("../MetricsLineChart-tZxsauau.cjs");
 exports.MetricsLineChart = require_MetricsLineChart.MetricsLineChart;
 exports.MetricsLineChartLegend = require_MetricsLineChart.MetricsLineChartLegend;
 exports.MetricsLineChartTooltip = require_MetricsLineChart.MetricsLineChartTooltip;

package/dist/components/MetricsLineChart.es.js

@@ -1 +1 @@
-export { t as MetricsLineChart, r as MetricsLineChartLegend, n as MetricsLineChartTooltip } from "../MetricsLineChart-BhHoduO0.js";
+export { t as MetricsLineChart, r as MetricsLineChartLegend, n as MetricsLineChartTooltip } from "../MetricsLineChart-4SwxBbQx.js";

package/dist/components/MetricsStackedBarChart.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MetricsStackedBarChart = require("../MetricsStackedBarChart-BdMlKv6G.cjs");
+const require_MetricsStackedBarChart = require("../MetricsStackedBarChart-CDLE76IB.cjs");
 exports.MetricsStackedBarChart = require_MetricsStackedBarChart.MetricsStackedBarChart;

package/dist/components/MetricsStackedBarChart.es.js

@@ -1 +1 @@
-export { t as MetricsStackedBarChart } from "../MetricsStackedBarChart-BRuA6MTE.js";
+export { t as MetricsStackedBarChart } from "../MetricsStackedBarChart-D2QyS4-z.js";

package/dist/{date-time-range-picker-CTt7Od0P.cjs → date-time-range-picker-CWGjoR3j.cjs}

@@ -176,6 +176,16 @@ var DATE_PRESETS = [
 		label: "Custom range..."
 	}
 ];
+var sameTime = (a, b) => a?.getTime() === b?.getTime();
+/**
+* Whether a named range breaks the limits the custom editor enforces: it starts before
+* `minDate`'s day, or spans more than `maxRangeMs` (an open end counts up to now).
+*/
+function outsideLimits(range, minDate, maxRangeMs) {
+	const tooEarly = minDate !== void 0 && range.from < (0, date_fns.startOfDay)(minDate);
+	const span = (range.to ?? /* @__PURE__ */ new Date()).getTime() - range.from.getTime();
+	return tooEarly || maxRangeMs !== void 0 && span > maxRangeMs;
+}
 var fmtClock = (d) => d.toLocaleTimeString("en-US", d.getMinutes() === 0 ? { hour: "numeric" } : {
 	hour: "numeric",
 	minute: "2-digit"
@@ -197,7 +207,7 @@ function customRangeLabel(dateFrom, dateTo) {
 	if (!dateTo) return `${start} \u2013 End`;
 	return `${start} \u2013 ${dateFrom !== void 0 && fmtDay(dateFrom) === fmtDay(dateTo) ? fmtClock(dateTo) : fmtMoment(dateTo)}`;
 }
-function DateTimeRangePicker({ preset = "all", onPresetChange, dateFrom, dateTo, onDateChange, onDateRangeChange, disabled, maxRangeMs, minDate, presets, size = "sm", defaultPreset, onReset, ref }) {
+function DateTimeRangePicker({ preset = "all", onPresetChange, dateFrom, dateTo, onDateChange, onDateRangeChange, disabled, maxRangeMs, minDate, presets, namedRanges = [], size = "sm", defaultPreset, onReset, ref }) {
 	const visiblePresets = presets ? DATE_PRESETS.filter((p) => presets.includes(p.value)) : DATE_PRESETS;
 	const [customRangeOpen, setCustomRangeOpen] = (0, react.useState)(false);
 	const [presetMenuOpen, setPresetMenuOpen] = (0, react.useState)(false);
@@ -240,9 +250,16 @@ function DateTimeRangePicker({ preset = "all", onPresetChange, dateFrom, dateTo,
 		if (presetBeforeCustom) applyPreset(presetBeforeCustom);
 		setPresetMenuOpen(true);
 	};
-	const canReset = defaultPreset !== void 0 && shownPreset === "custom";
-	const editingCustomRange = shownPreset === "custom" && !presetMenuOpen;
-	const label = shownPreset === "custom" ? customRangeLabel(dateFrom, dateTo) : datePresetLabel;
+	const namedIndex = shownPreset === "custom" ? namedRanges.findIndex((r) => sameTime(r.from, dateFrom) && sameTime(r.to, dateTo)) : -1;
+	const named = namedRanges[namedIndex];
+	const canReset = defaultPreset !== void 0 && shownPreset === "custom" && !named;
+	const editingCustomRange = shownPreset === "custom" && !presetMenuOpen && (!named || customRangeOpen);
+	const label = named ? named.label : shownPreset === "custom" ? customRangeLabel(dateFrom, dateTo) : datePresetLabel;
+	const applyNamedRange = (range) => {
+		setPresetMenuOpen(false);
+		onPresetChange?.("custom");
+		applyCustomRange(range.from, range.to);
+	};
 	const trigger = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
 		ref,
 		size,
@@ -279,14 +296,24 @@ function DateTimeRangePicker({ preset = "all", onPresetChange, dateFrom, dateTo,
 			onOpenChange: setPresetMenuOpen,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.Trigger, { render: trigger }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.Content, {
 				align: "start",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.RadioGroup, {
-					value: shownPreset,
-					children: visiblePresets.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.RadioItem, {
-						value: p.value,
-						closeOnClick: true,
-						onClick: () => handlePresetSelect(p.value),
-						children: p.label
-					}, p.value))
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu.RadioGroup, {
+					value: named ? `named-${namedIndex}` : shownPreset,
+					children: [
+						namedRanges.map((r, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.RadioItem, {
+							value: `named-${i}`,
+							disabled: outsideLimits(r, minDate, maxRangeMs),
+							closeOnClick: true,
+							onClick: () => applyNamedRange(r),
+							children: r.label
+						}, `named-${i}`)),
+						namedRanges.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.Separator, {}),
+						visiblePresets.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.RadioItem, {
+							value: p.value,
+							closeOnClick: true,
+							onClick: () => handlePresetSelect(p.value),
+							children: p.label
+						}, p.value))
+					]
 				})
 			})]
 		})]
@@ -318,4 +345,4 @@ Object.defineProperty(exports, "DateTimeRangePicker", {
 	}
 });
 
-//# sourceMappingURL=date-time-range-picker-CTt7Od0P.cjs.map
+//# sourceMappingURL=date-time-range-picker-CWGjoR3j.cjs.map

package/dist/date-time-range-picker-CWGjoR3j.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-range-picker-CWGjoR3j.cjs","names":["parse","isValid","useState","useId","startOfDay","format","_Fragment","cn","Txt","DatePicker","TimePicker","Field","FieldError","Button","Check","startOfDay","useState","Button","CalendarIcon","TriggerChevron","Popover","PopoverTrigger","PopoverContent","cn","DropdownMenu","XIcon","ButtonsGroup"],"sources":["../src/ds/components/DateTimeRangePicker/custom-range-editor.tsx","../src/ds/components/DateTimeRangePicker/date-time-range-picker.tsx"],"sourcesContent":["import { format, isValid, parse, startOfDay } from 'date-fns';\nimport { Check } from 'lucide-react';\nimport { useId, useState } from 'react';\nimport { Button } from '@/ds/components/Button/Button';\nimport { DatePicker, TimePicker } from '@/ds/components/DateTimePicker';\nimport { Field, FieldError } from '@/ds/components/Field';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nfunction formatDays(ms: number): string {\n  const days = Math.round(ms / (24 * 60 * 60 * 1000));\n  return `${days} day${days === 1 ? '' : 's'}`;\n}\n\n/** The draft day at the draft time, or the bare day when the time doesn't parse. */\nfunction combineDateAndTime(date: Date | undefined, timeStr: string): Date | undefined {\n  if (!date) return undefined;\n  const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  const combined = parse(timeStr, 'h:mm a', dateOnly);\n  return isValid(combined) ? combined : date;\n}\n\nexport interface CustomRangeEditorProps {\n  dateFrom?: Date;\n  dateTo?: Date;\n  disabled?: boolean;\n  /** Widest range that can be applied, in milliseconds. */\n  maxRangeMs?: number;\n  /** Earliest day a range can start on. Days before it are disabled. */\n  minDate?: Date;\n  onApply: (from: Date | undefined, to: Date | undefined) => void;\n  onShowPresets: () => void;\n}\n\n/**\n * The custom range popover body. It mounts each time the popover opens, so its drafts\n * start from the current range without the picker resetting them.\n */\nexport function CustomRangeEditor({\n  dateFrom,\n  dateTo,\n  disabled,\n  maxRangeMs,\n  minDate,\n  onApply,\n  onShowPresets,\n}: CustomRangeEditorProps) {\n  const [draftDateFrom, setDraftDateFrom] = useState<Date | undefined>(dateFrom);\n  const [draftDateTo, setDraftDateTo] = useState<Date | undefined>(dateTo);\n  const [draftTimeFrom, setDraftTimeFrom] = useState('12:00 AM');\n  const [draftTimeTo, setDraftTimeTo] = useState('11:59 PM');\n  const [applyAttempted, setApplyAttempted] = useState(false);\n  const errorId = useId();\n\n  const fromDate = combineDateAndTime(draftDateFrom, draftTimeFrom);\n  const toDate = combineDateAndTime(draftDateTo, draftTimeTo);\n  const rangeReversed = fromDate !== undefined && toDate !== undefined && fromDate.getTime() > toDate.getTime();\n  const rangeTooWide =\n    fromDate !== undefined && toDate !== undefined && toDate.getTime() - fromDate.getTime() > (maxRangeMs ?? Infinity);\n  const firstDay = minDate ? startOfDay(minDate) : undefined;\n  const endFirstDay = draftDateFrom && (!firstDay || draftDateFrom > firstDay) ? draftDateFrom : firstDay;\n  const rangeTooEarly = fromDate !== undefined && firstDay !== undefined && fromDate < firstDay;\n  const rangeInvalid = rangeReversed || rangeTooWide || rangeTooEarly;\n  // Shown after a failed Apply, and gone as soon as the drafts form a valid range again.\n  let error: string | undefined;\n  if (applyAttempted && rangeReversed) error = 'Start date/time must be before end date/time';\n  else if (applyAttempted && rangeTooWide) error = `Range cannot be longer than ${formatDays(maxRangeMs ?? 0)}`;\n  else if (applyAttempted && firstDay && rangeTooEarly)\n    error = `Range cannot start before ${format(firstDay, 'MMM d, yyyy')}`;\n\n  const apply = () => {\n    if (rangeInvalid) {\n      setApplyAttempted(true);\n      return;\n    }\n    onApply(fromDate, toDate);\n  };\n\n  return (\n    <>\n      <div\n        role=\"group\"\n        aria-label=\"Custom date range\"\n        aria-invalid={error ? true : undefined}\n        aria-describedby={error ? errorId : undefined}\n        className=\"flex\"\n      >\n        <div className={cn('border-r border-border')}>\n          <Txt as=\"span\" variant=\"column\" tone=\"muted\" className=\"block px-4 pt-3\">\n            Start\n          </Txt>\n          <DatePicker\n            mode=\"single\"\n            selected={draftDateFrom}\n            month={draftDateFrom}\n            onSelect={setDraftDateFrom}\n            disabled={disabled}\n            fromDate={firstDay}\n            toDate={draftDateTo}\n          />\n          <TimePicker\n            label=\"Start time\"\n            className=\"mx-4 mb-3 w-auto\"\n            defaultValue={draftTimeFrom}\n            onValueChange={v => {\n              if (!disabled) setDraftTimeFrom(v);\n            }}\n          />\n        </div>\n        <div>\n          <Txt as=\"span\" variant=\"column\" tone=\"muted\" className=\"block px-4 pt-3\">\n            End\n          </Txt>\n          <DatePicker\n            mode=\"single\"\n            selected={draftDateTo}\n            month={draftDateTo}\n            onSelect={setDraftDateTo}\n            disabled={disabled}\n            fromDate={endFirstDay}\n          />\n          <TimePicker\n            label=\"End time\"\n            className=\"mx-4 mb-3 w-auto\"\n            defaultValue={draftTimeTo}\n            onValueChange={v => {\n              if (!disabled) setDraftTimeTo(v);\n            }}\n          />\n        </div>\n      </div>\n      <Field invalid={Boolean(error)}>\n        <FieldError id={errorId} className=\"px-4 pb-1\">\n          {error}\n        </FieldError>\n      </Field>\n      <div className={cn('flex items-center justify-between px-4 pb-3')}>\n        <Button variant=\"ghost\" size=\"sm\" disabled={disabled} onClick={onShowPresets}>\n          &larr; Presets\n        </Button>\n        <Button icon={<Check />} variant=\"primary\" size=\"sm\" onClick={apply} disabled={disabled}>\n          Apply\n        </Button>\n      </div>\n    </>\n  );\n}\n","import { startOfDay } from 'date-fns';\nimport { CalendarIcon, XIcon } from 'lucide-react';\nimport { useState } from 'react';\nimport type { ReactNode, Ref } from 'react';\nimport { CustomRangeEditor } from './custom-range-editor';\nimport { Button, TriggerChevron } from '@/ds/components/Button/Button';\nimport type { TextButtonSize } from '@/ds/components/Button/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup/buttons-group';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu/dropdown-menu';\nimport { Popover, PopoverTrigger, PopoverContent } from '@/ds/components/Popover/popover';\nimport { cn } from '@/lib/utils';\n\nexport type DateRangePreset = 'all' | 'last-24h' | 'last-3d' | 'last-7d' | 'last-14d' | 'last-30d' | 'custom';\n\nconst DATE_PRESETS: { value: DateRangePreset; label: string; ms?: number }[] = [\n  { value: 'all', label: 'All' },\n  { value: 'last-24h', label: 'Last 24 hours', ms: 24 * 60 * 60 * 1000 },\n  { value: 'last-3d', label: 'Last 3 days', ms: 3 * 24 * 60 * 60 * 1000 },\n  { value: 'last-7d', label: 'Last 7 days', ms: 7 * 24 * 60 * 60 * 1000 },\n  { value: 'last-14d', label: 'Last 14 days', ms: 14 * 24 * 60 * 60 * 1000 },\n  { value: 'last-30d', label: 'Last 30 days', ms: 30 * 24 * 60 * 60 * 1000 },\n  { value: 'custom', label: 'Custom range...' },\n];\n\nconst sameTime = (a: Date | undefined, b: Date | undefined) => a?.getTime() === b?.getTime();\n\n/**\n * Whether a named range breaks the limits the custom editor enforces: it starts before\n * `minDate`'s day, or spans more than `maxRangeMs` (an open end counts up to now).\n */\nfunction outsideLimits(range: DateTimeRangePickerNamedRange, minDate?: Date, maxRangeMs?: number) {\n  const tooEarly = minDate !== undefined && range.from < startOfDay(minDate);\n  const span = (range.to ?? new Date()).getTime() - range.from.getTime();\n  const tooWide = maxRangeMs !== undefined && span > maxRangeMs;\n  return tooEarly || tooWide;\n}\n\nconst fmtClock = (d: Date) =>\n  d.toLocaleTimeString('en-US', d.getMinutes() === 0 ? { hour: 'numeric' } : { hour: 'numeric', minute: '2-digit' });\n\n/**\n * A custom range as day and time, kept short: `Oct 21, 2:05 PM – 4 PM` within one day,\n * `Oct 20, 12 AM – Oct 27, 9:30 AM` across days, with years only outside the current one.\n */\nfunction customRangeLabel(dateFrom: Date | undefined, dateTo: Date | undefined) {\n  const thisYear = new Date().getFullYear();\n  const withYear = [dateFrom, dateTo].some(d => d && d.getFullYear() !== thisYear);\n  const fmtDay = (d: Date) =>\n    d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', ...(withYear && { year: 'numeric' }) });\n  const fmtMoment = (d: Date) => `${fmtDay(d)}, ${fmtClock(d)}`;\n\n  const start = dateFrom ? fmtMoment(dateFrom) : 'Start';\n  if (!dateTo) return `${start} \\u2013 End`;\n  const sameDay = dateFrom !== undefined && fmtDay(dateFrom) === fmtDay(dateTo);\n  return `${start} \\u2013 ${sameDay ? fmtClock(dateTo) : fmtMoment(dateTo)}`;\n}\n\n/** A fixed range offered beside the presets, e.g. the current billing period. */\nexport type DateTimeRangePickerNamedRange = { label: string; from: Date; to?: Date };\n\nexport interface DateTimeRangePickerProps {\n  preset?: DateRangePreset;\n  onPresetChange?: (preset: DateRangePreset) => void;\n  dateFrom?: Date;\n  dateTo?: Date;\n  onDateChange?: (value: Date | undefined, type: 'from' | 'to') => void;\n  /**\n   * Called once with both ends when a custom range is applied. When provided it replaces\n   * the two `onDateChange` calls for that step, so consumers can write the range atomically.\n   */\n  onDateRangeChange?: (from: Date | undefined, to: Date | undefined) => void;\n  disabled?: boolean;\n  /** Widest custom range that can be applied, in milliseconds. Presets are unaffected. */\n  maxRangeMs?: number;\n  /** Earliest day a custom range can start on, e.g. the oldest data still kept. Earlier days are disabled. */\n  minDate?: Date;\n  /** Subset of presets to show. If omitted, all presets are shown. */\n  presets?: readonly DateRangePreset[];\n  /**\n   * Fixed ranges listed above the presets, e.g. `{ label: 'This period', from: periodStart }`.\n   * Picking one applies it as a custom range; while it's applied the trigger shows its label.\n   */\n  namedRanges?: readonly DateTimeRangePickerNamedRange[];\n  /** Size of the trigger Button. Defaults to 'sm', the toolbar rung. */\n  size?: TextButtonSize;\n  /**\n   * The preset a custom range resets to. While a custom range is applied, a × joined to the\n   * trigger takes the chevron's place and switches back to it.\n   */\n  defaultPreset?: DateRangePreset;\n  /** Replaces what the reset × does, e.g. to undo a histogram zoom before falling back to `defaultPreset`. */\n  onReset?: () => void;\n  /** The trigger Button. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function DateTimeRangePicker({\n  preset = 'all',\n  onPresetChange,\n  dateFrom,\n  dateTo,\n  onDateChange,\n  onDateRangeChange,\n  disabled,\n  maxRangeMs,\n  minDate,\n  presets,\n  namedRanges = [],\n  size = 'sm',\n  defaultPreset,\n  onReset,\n  ref,\n}: DateTimeRangePickerProps) {\n  const visiblePresets = presets ? DATE_PRESETS.filter(p => presets.includes(p.value)) : DATE_PRESETS;\n  const [customRangeOpen, setCustomRangeOpen] = useState(false);\n  const [presetMenuOpen, setPresetMenuOpen] = useState(false);\n  // The preset active before \"Custom range...\" was picked, until a range is applied.\n  // \"← Presets\" restores it instead of jumping to the first preset in the list.\n  const [presetBeforeCustom, setPresetBeforeCustom] = useState<DateRangePreset | undefined>();\n\n  // \"← Presets\" restores the previous preset through the parent, which may apply it a\n  // render later (e.g. a router URL update). Show it right away instead of \"custom\".\n  const restoringPreset = presetMenuOpen && preset === 'custom' ? presetBeforeCustom : undefined;\n  const shownPreset = restoringPreset ?? preset;\n  const datePresetLabel = DATE_PRESETS.find(p => p.value === shownPreset)?.label ?? 'All';\n\n  const applyPreset = (value: DateRangePreset) => {\n    onPresetChange?.(value);\n    const entry = DATE_PRESETS.find(p => p.value === value);\n    if (entry?.ms) {\n      onDateChange?.(new Date(Date.now() - entry.ms), 'from');\n      onDateChange?.(undefined, 'to');\n    } else {\n      onDateChange?.(undefined, 'from');\n      onDateChange?.(undefined, 'to');\n    }\n  };\n\n  const handlePresetSelect = (value: DateRangePreset) => {\n    setPresetMenuOpen(false);\n    if (value === 'custom') {\n      if (preset !== 'custom') setPresetBeforeCustom(preset);\n      onPresetChange?.(value);\n      setCustomRangeOpen(true);\n      return;\n    }\n    setPresetBeforeCustom(undefined);\n    applyPreset(value);\n  };\n\n  const applyCustomRange = (fromDate: Date | undefined, toDate: Date | undefined) => {\n    if (onDateRangeChange) {\n      onDateRangeChange(fromDate, toDate);\n    } else {\n      onDateChange?.(fromDate, 'from');\n      onDateChange?.(toDate, 'to');\n    }\n    setPresetBeforeCustom(undefined);\n    setCustomRangeOpen(false);\n  };\n\n  // Back to the preset list. Restores the preset the user came from; an applied custom\n  // range matches no preset, so it stays and the list shows \"Custom range...\" as current.\n  const showPresets = () => {\n    setCustomRangeOpen(false);\n    if (presetBeforeCustom) applyPreset(presetBeforeCustom);\n    setPresetMenuOpen(true);\n  };\n\n  // The applied custom range, when it is one of the named ranges.\n  const namedIndex =\n    shownPreset === 'custom' ? namedRanges.findIndex(r => sameTime(r.from, dateFrom) && sameTime(r.to, dateTo)) : -1;\n  const named = namedRanges[namedIndex];\n  const canReset = defaultPreset !== undefined && shownPreset === 'custom' && !named;\n  // A named range shows the preset list, unless \"Custom range...\" was picked to edit it.\n  const editingCustomRange = shownPreset === 'custom' && !presetMenuOpen && (!named || customRangeOpen);\n  const label = named ? named.label : shownPreset === 'custom' ? customRangeLabel(dateFrom, dateTo) : datePresetLabel;\n\n  const applyNamedRange = (range: DateTimeRangePickerNamedRange) => {\n    setPresetMenuOpen(false);\n    onPresetChange?.('custom');\n    applyCustomRange(range.from, range.to);\n  };\n  const trigger = (\n    <Button\n      ref={ref}\n      size={size}\n      disabled={disabled}\n      icon={<CalendarIcon />}\n      iconEnd={canReset ? undefined : <TriggerChevron />}\n    >\n      {label}\n    </Button>\n  );\n\n  return (\n    <JoinReset\n      size={size}\n      reset={\n        canReset && (\n          <ResetRangeButton size={size} disabled={disabled} onReset={onReset ?? (() => applyPreset(defaultPreset))} />\n        )\n      }\n    >\n      {editingCustomRange && (\n        <Popover open={customRangeOpen} onOpenChange={setCustomRangeOpen}>\n          <PopoverTrigger render={trigger} />\n          <PopoverContent align=\"start\" className={cn('w-auto p-0')}>\n            <CustomRangeEditor\n              dateFrom={dateFrom}\n              dateTo={dateTo}\n              disabled={disabled}\n              maxRangeMs={maxRangeMs}\n              minDate={minDate}\n              onApply={applyCustomRange}\n              onShowPresets={showPresets}\n            />\n          </PopoverContent>\n        </Popover>\n      )}\n      {!editingCustomRange && (\n        <DropdownMenu open={presetMenuOpen} onOpenChange={setPresetMenuOpen}>\n          <DropdownMenu.Trigger render={trigger} />\n          <DropdownMenu.Content align=\"start\">\n            {/* Items select on click (not onValueChange) so re-picking the checked\n              \"Custom range...\" still reopens the range editor. */}\n            <DropdownMenu.RadioGroup value={named ? `named-${namedIndex}` : shownPreset}>\n              {namedRanges.map((r, i) => (\n                <DropdownMenu.RadioItem\n                  key={`named-${i}`}\n                  value={`named-${i}`}\n                  disabled={outsideLimits(r, minDate, maxRangeMs)}\n                  closeOnClick\n                  onClick={() => applyNamedRange(r)}\n                >\n                  {r.label}\n                </DropdownMenu.RadioItem>\n              ))}\n              {namedRanges.length > 0 && <DropdownMenu.Separator />}\n              {visiblePresets.map(p => (\n                <DropdownMenu.RadioItem\n                  key={p.value}\n                  value={p.value}\n                  closeOnClick\n                  onClick={() => handlePresetSelect(p.value)}\n                >\n                  {p.label}\n                </DropdownMenu.RadioItem>\n              ))}\n            </DropdownMenu.RadioGroup>\n          </DropdownMenu.Content>\n        </DropdownMenu>\n      )}\n    </JoinReset>\n  );\n}\n\n/** Switches a custom range back to the picker's default preset. */\nfunction ResetRangeButton({\n  size,\n  disabled,\n  onReset,\n}: {\n  size: TextButtonSize;\n  disabled?: boolean;\n  onReset: () => void;\n}) {\n  return (\n    <Button\n      type=\"button\"\n      size={`icon-${size}` as const}\n      tooltip=\"Reset time range\"\n      disabled={disabled}\n      onClick={onReset}\n    >\n      <XIcon />\n    </Button>\n  );\n}\n\n/** The trigger alone, or joined with the reset × as one pill. */\nfunction JoinReset({ reset, size, children }: { reset: ReactNode; size: TextButtonSize; children: ReactNode }) {\n  if (!reset) return children;\n  return (\n    <ButtonsGroup size={size}>\n      {children}\n      {reset}\n    </ButtonsGroup>\n  );\n}\n"],"mappings":"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"}