@mastra/playground-ui 61.0.0 → 62.0.0-alpha.0

package/dist/metrics-line-chart-D7fE4EQJ.cjs

@@ -0,0 +1,123 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const recharts = require('recharts');
+const metricsLineChartTooltip = require('./metrics-line-chart-tooltip-BSzXdRFR.cjs');
+const chartSkeleton = require('./chart-skeleton-PMdW3B43.cjs');
+const primitives_chartAxes = require('./primitives/chart-axes.cjs.js');
+const primitives_chartFrame = require('./primitives/chart-frame.cjs.js');
+const primitives_chartLayout = require('./primitives/chart-layout.cjs.js');
+const primitives_chartPlot = require('./primitives/chart-plot.cjs.js');
+const primitives_useChartDefsId = require('./primitives/use-chart-defs-id.cjs.js');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+
+const LINE_WIDTH = 1.75;
+const AREA_OPACITY = 0.12;
+const SPARSE_POINTS = 12;
+function SmoothCursor({ points }) {
+  const [top, bottom] = points ?? [];
+  if (!top || !bottom) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "line",
+    {
+      x1: 0,
+      x2: 0,
+      y1: top.y,
+      y2: bottom.y,
+      ...primitives_chartAxes.CHART_CURSOR_PROPS,
+      className: "pointer-events-none transition-transform duration-150 ease-out",
+      style: { transform: `translateX(${top.x}px)` }
+    }
+  );
+}
+function MetricsLineChart(props) {
+  const { data, series, height = 210, showLegend = true, isLoading = false, className } = props;
+  const root = utils_cn.cn(height === "fill" && "flex min-h-0 flex-1 flex-col", className);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: root, children: [
+    showLegend && /* @__PURE__ */ jsxRuntime.jsx(metricsLineChartTooltip.MetricsLineChartLegend, { data: isLoading ? void 0 : data, series, className: "mb-4" }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chartSkeleton.ChartSkeleton, { kind: "line", height }) : /* @__PURE__ */ jsxRuntime.jsx(LinePlot, { ...props })
+  ] });
+}
+function LinePlot({
+  data,
+  series,
+  height = 210,
+  yDomain,
+  onPointClick,
+  onBucketClick,
+  xKey = "time",
+  timestampKey = "tsMs",
+  xLabels = "auto",
+  tooltipLabelKey,
+  showDots = false,
+  valueFormatter,
+  axisFormatter,
+  showYAxis = true
+}) {
+  const id = primitives_useChartDefsId.useChartDefsId();
+  const { size, onResize, ref } = primitives_chartAxes.useChartSize();
+  const format = valueFormatter ?? primitives_chartFrame.compactNumber.format;
+  const isSparse = (key) => data.filter((row) => typeof row[key] === "number").length <= SPARSE_POINTS;
+  const plotWidth = size.width - (showYAxis ? primitives_chartFrame.Y_AXIS_WIDTH : 0);
+  const activeDot = (s) => ({
+    r: 3.5,
+    fill: s.color,
+    stroke: "var(--background)",
+    strokeWidth: 2,
+    ...onPointClick && {
+      style: { cursor: "pointer" },
+      onClick: (_, payload) => {
+        if (isRecord(payload) && isRecord(payload.payload)) onPointClick(payload.payload, s.dataKey);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(primitives_chartPlot.ChartPlot, { height, plotRef: ref, onResize, clickable: !!onBucketClick, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.ComposedChart,
+    {
+      data,
+      margin: primitives_chartLayout.CHART_MARGIN,
+      onClick: (state) => {
+        const i = state?.activeTooltipIndex;
+        const row = i === void 0 || i === null ? void 0 : data[Number(i)];
+        if (onBucketClick && row) onBucketClick(row, Number(i));
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: series.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: `${id}-area-${i}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: s.color, stopOpacity: AREA_OPACITY }),
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "95%", stopColor: s.color, stopOpacity: 0 })
+        ] }, s.dataKey)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...primitives_chartAxes.CHART_GRID_PROPS }),
+        primitives_chartFrame.timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth }),
+        primitives_chartFrame.valueYAxis({ show: showYAxis, size, formatter: axisFormatter ?? format, domain: yDomain }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            content: /* @__PURE__ */ jsxRuntime.jsx(metricsLineChartTooltip.MetricsLineChartTooltip, { formatValue: format, labelKey: tooltipLabelKey }),
+            cursor: /* @__PURE__ */ jsxRuntime.jsx(SmoothCursor, {})
+          }
+        ),
+        series.map((s, i) => {
+          const common = {
+            type: "monotone",
+            dataKey: s.dataKey,
+            name: s.label,
+            stroke: s.color,
+            strokeWidth: s.emphasis ? LINE_WIDTH + 0.5 : LINE_WIDTH,
+            strokeDasharray: s.dashed ? "4 3" : void 0,
+            dot: showDots || isSparse(s.dataKey) ? { r: 3, fill: s.color, strokeWidth: 0 } : false,
+            activeDot: activeDot(s),
+            isAnimationActive: false,
+            connectNulls: true
+          };
+          return s.dashed ? /* @__PURE__ */ jsxRuntime.jsx(recharts.Line, { ...common }, s.dataKey) : /* @__PURE__ */ jsxRuntime.jsx(recharts.Area, { ...common, fill: `url(#${id}-area-${i})`, fillOpacity: 1 }, s.dataKey);
+        })
+      ]
+    }
+  ) });
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+
+exports.MetricsLineChart = MetricsLineChart;
+//# sourceMappingURL=metrics-line-chart-D7fE4EQJ.cjs.map

package/dist/metrics-line-chart-D7fE4EQJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-line-chart-D7fE4EQJ.cjs","sources":["../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["import { Area, CartesianGrid, ComposedChart, Line, Tooltip } from 'recharts';\nimport { MetricsLineChartLegend } from './metrics-line-chart-legend';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport { CHART_CURSOR_PROPS, CHART_GRID_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { Y_AXIS_WIDTH, compactNumber, 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 { 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  aggregate?: (data: Record<string, unknown>[]) => { value: string; suffix?: 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/** A series with this few points gets a dot on each: a lone point draws no line at all. */\nconst SPARSE_POINTS = 12;\n\n// Positioned via transform so the hover line glides between points instead of jumping.\nfunction SmoothCursor({ points }: { points?: { x: number; y: number }[] }) {\n  const [top, bottom] = points ?? [];\n  if (!top || !bottom) return null;\n  return (\n    <line\n      x1={0}\n      x2={0}\n      y1={top.y}\n      y2={bottom.y}\n      {...CHART_CURSOR_PROPS}\n      className=\"pointer-events-none transition-transform duration-150 ease-out\"\n      style={{ transform: `translateX(${top.x}px)` }}\n    />\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. Series with few points get them anyway. */\n  showDots?: boolean;\n  /** Set to `false` to render `MetricsLineChartLegend` elsewhere, e.g. next to tabs. */\n  showLegend?: boolean;\n  /** Formats tooltip values (e.g. `ms`, `%`), and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsLineChart(props: MetricsLineChartProps) {\n  const { data, series, height = 210, showLegend = true, isLoading = false, className } = props;\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root}>\n      {showLegend && <MetricsLineChartLegend data={isLoading ? undefined : data} 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  valueFormatter,\n  axisFormatter,\n  showYAxis = true,\n}: MetricsLineChartProps) {\n  const id = useChartDefsId();\n  const { size, onResize, ref } = useChartSize();\n\n  const format = valueFormatter ?? compactNumber.format;\n  const isSparse = (key: string) => data.filter(row => typeof row[key] === 'number').length <= SPARSE_POINTS;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const 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 height={height} plotRef={ref} onResize={onResize} clickable={!!onBucketClick}>\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={AREA_OPACITY} />\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({ show: showYAxis, size, formatter: axisFormatter ?? format, domain: yDomain })}\n        <Tooltip\n          content={<MetricsLineChartTooltip formatValue={format} labelKey={tooltipLabelKey} />}\n          cursor={<SmoothCursor />}\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_WIDTH + 0.5 : LINE_WIDTH,\n            strokeDasharray: s.dashed ? '4 3' : undefined,\n            dot: showDots || isSparse(s.dataKey) ? { r: 3, fill: s.color, strokeWidth: 0 } : false,\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"],"names":["jsx","CHART_CURSOR_PROPS","cn","jsxs","MetricsLineChartLegend","ChartSkeleton","useChartDefsId","useChartSize","compactNumber","Y_AXIS_WIDTH","ChartPlot","ComposedChart","CHART_MARGIN","CartesianGrid","CHART_GRID_PROPS","timeXAxis","valueYAxis","Tooltip","MetricsLineChartTooltip","Line","Area"],"mappings":"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"}

package/dist/metrics-line-chart-tooltip-BSzXdRFR.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const Txt = require('./Txt-DXjXpX9r.cjs');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+const chartTooltip = require('./chart-tooltip-Ci8Qm5Av.cjs');
+
+function MetricsLineChartLegend({
+  data,
+  series,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex flex-wrap items-center gap-x-4 gap-y-1", className), children: series.map((s) => {
+    const aggregated = data ? s.aggregate?.(data) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1.5", children: [
+      s.dashed ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-0 w-3 shrink-0 border-t-2 border-dashed", style: { borderColor: s.color } }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 shrink-0 rounded-[2px]", style: { backgroundColor: s.color } }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body-sm", tone: "muted", className: "max-w-48 truncate", children: s.label }),
+      aggregated && /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", variant: "body-sm", tone: "muted", className: "-ml-1 tabular-nums", children: [
+        aggregated.value,
+        aggregated.suffix && /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", variant: "body-sm", tone: "faint", children: [
+          " ",
+          aggregated.suffix
+        ] })
+      ] })
+    ] }, s.dataKey);
+  }) });
+}
+
+function MetricsLineChartTooltip({
+  active,
+  payload,
+  label,
+  suffix,
+  formatValue = (value) => value.toLocaleString("en-US"),
+  showTotal = false,
+  labelKey,
+  formatByKey
+}) {
+  if (!active || !payload?.length) return null;
+  const finite = (value) => typeof value === "number" && Number.isFinite(value);
+  const total = payload.reduce((sum, entry) => sum + (finite(entry.value) ? entry.value : 0), 0);
+  const heading = labelKey ? String(payload[0]?.payload?.[labelKey] ?? label ?? "") : label;
+  const format = (entry) => formatByKey?.[String(entry.dataKey)] ?? formatValue;
+  const reading = (entry) => {
+    if (finite(entry.value)) return format(entry)(entry.value);
+    if (typeof entry.value === "number" || entry.value == null) return "—";
+    return entry.value;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(chartTooltip.ChartTooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "column", tone: "ink", className: "mb-1", children: heading }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr_auto] items-center gap-x-2 gap-y-1", children: [
+      payload.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "contents", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-[2px]", style: { backgroundColor: entry.color } }),
+        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", className: "max-w-40 truncate", children: entry.name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-right font-mono text-foreground tabular-nums", children: [
+          reading(entry),
+          finite(entry.value) && suffix
+        ] })
+      ] }, entry.name)),
+      showTotal && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-3 grid grid-cols-subgrid items-center border-t border-border pt-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", className: "col-span-2", children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-right font-mono text-foreground tabular-nums", children: [
+          formatValue(total),
+          suffix
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+exports.MetricsLineChartLegend = MetricsLineChartLegend;
+exports.MetricsLineChartTooltip = MetricsLineChartTooltip;
+//# sourceMappingURL=metrics-line-chart-tooltip-BSzXdRFR.cjs.map

package/dist/metrics-line-chart-tooltip-BSzXdRFR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-line-chart-tooltip-BSzXdRFR.cjs","sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx"],"sourcesContent":["import type { MetricsLineChartSeries } from './metrics-line-chart';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsLineChartLegend({\n  data,\n  series,\n  className,\n}: {\n  /** Rows for each series' `aggregate`; omit when no series shows one. */\n  data?: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\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        const aggregated = data ? s.aggregate?.(data) : undefined;\n        return (\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            {aggregated && (\n              <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"-ml-1 tabular-nums\">\n                {aggregated.value}\n                {aggregated.suffix && (\n                  <Txt as=\"span\" variant=\"body-sm\" tone=\"faint\">\n                    {' '}\n                    {aggregated.suffix}\n                  </Txt>\n                )}\n              </Txt>\n            )}\n          </div>\n        );\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  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    <ChartTooltip>\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              {formatValue(total)}\n              {suffix}\n            </span>\n          </div>\n        )}\n      </div>\n    </ChartTooltip>\n  );\n}\n"],"names":["jsx","cn","jsxs","Txt","ChartTooltip"],"mappings":"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"}

package/dist/metrics-line-chart-tooltip-bgRf6KTb.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { T as Txt } from './Txt-BuzYj7Vy.js';
+import { c as cn } from './cn-coERSHz5.js';
+import { C as ChartTooltip } from './chart-tooltip-BrGMkxJ8.js';
+
+function MetricsLineChartLegend({
+  data,
+  series,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-x-4 gap-y-1", className), children: series.map((s) => {
+    const aggregated = data ? s.aggregate?.(data) : void 0;
+    return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1.5", children: [
+      s.dashed ? /* @__PURE__ */ jsx("span", { className: "h-0 w-3 shrink-0 border-t-2 border-dashed", style: { borderColor: s.color } }) : /* @__PURE__ */ jsx("div", { className: "size-2 shrink-0 rounded-[2px]", style: { backgroundColor: s.color } }),
+      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body-sm", tone: "muted", className: "max-w-48 truncate", children: s.label }),
+      aggregated && /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "body-sm", tone: "muted", className: "-ml-1 tabular-nums", children: [
+        aggregated.value,
+        aggregated.suffix && /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "body-sm", tone: "faint", children: [
+          " ",
+          aggregated.suffix
+        ] })
+      ] })
+    ] }, s.dataKey);
+  }) });
+}
+
+function MetricsLineChartTooltip({
+  active,
+  payload,
+  label,
+  suffix,
+  formatValue = (value) => value.toLocaleString("en-US"),
+  showTotal = false,
+  labelKey,
+  formatByKey
+}) {
+  if (!active || !payload?.length) return null;
+  const finite = (value) => typeof value === "number" && Number.isFinite(value);
+  const total = payload.reduce((sum, entry) => sum + (finite(entry.value) ? entry.value : 0), 0);
+  const heading = labelKey ? String(payload[0]?.payload?.[labelKey] ?? label ?? "") : label;
+  const format = (entry) => formatByKey?.[String(entry.dataKey)] ?? formatValue;
+  const reading = (entry) => {
+    if (finite(entry.value)) return format(entry)(entry.value);
+    if (typeof entry.value === "number" || entry.value == null) return "—";
+    return entry.value;
+  };
+  return /* @__PURE__ */ jsxs(ChartTooltip, { children: [
+    /* @__PURE__ */ jsx(Txt, { variant: "column", tone: "ink", className: "mb-1", children: heading }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr_auto] items-center gap-x-2 gap-y-1", children: [
+      payload.map((entry) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
+        /* @__PURE__ */ jsx("span", { className: "size-2 rounded-[2px]", style: { backgroundColor: entry.color } }),
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", tone: "muted", className: "max-w-40 truncate", children: entry.name }),
+        /* @__PURE__ */ jsxs("span", { className: "text-right font-mono text-foreground tabular-nums", children: [
+          reading(entry),
+          finite(entry.value) && suffix
+        ] })
+      ] }, entry.name)),
+      showTotal && /* @__PURE__ */ jsxs("div", { className: "col-span-3 grid grid-cols-subgrid items-center border-t border-border pt-1", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", tone: "muted", className: "col-span-2", children: "Total" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-right font-mono text-foreground tabular-nums", children: [
+          formatValue(total),
+          suffix
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+export { MetricsLineChartLegend as M, MetricsLineChartTooltip as a };
+//# sourceMappingURL=metrics-line-chart-tooltip-bgRf6KTb.js.map

package/dist/metrics-line-chart-tooltip-bgRf6KTb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-line-chart-tooltip-bgRf6KTb.js","sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx"],"sourcesContent":["import type { MetricsLineChartSeries } from './metrics-line-chart';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsLineChartLegend({\n  data,\n  series,\n  className,\n}: {\n  /** Rows for each series' `aggregate`; omit when no series shows one. */\n  data?: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\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        const aggregated = data ? s.aggregate?.(data) : undefined;\n        return (\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            {aggregated && (\n              <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"-ml-1 tabular-nums\">\n                {aggregated.value}\n                {aggregated.suffix && (\n                  <Txt as=\"span\" variant=\"body-sm\" tone=\"faint\">\n                    {' '}\n                    {aggregated.suffix}\n                  </Txt>\n                )}\n              </Txt>\n            )}\n          </div>\n        );\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  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    <ChartTooltip>\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              {formatValue(total)}\n              {suffix}\n            </span>\n          </div>\n        )}\n      </div>\n    </ChartTooltip>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/metrics-share-list-2cC_1I1S.js

@@ -0,0 +1,304 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { c as cn } from './cn-coERSHz5.js';
+import { T as Txt } from './Txt-BuzYj7Vy.js';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { S as Skeleton } from './skeleton-Bjxvf3Y-.js';
+
+function MetricsShareListHeader({
+  columns = [],
+  valueLabel,
+  valueWidth = "w-14",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: cn("flex shrink-0 items-center gap-3 text-column text-placeholder", className), children: [
+    columns.map((c) => /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-right", c.width ?? "w-16"), children: c.label }, c.label)),
+    /* @__PURE__ */ jsx("span", { className: "w-12 shrink-0 text-right", children: "Share" }),
+    /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-right", valueWidth), children: valueLabel })
+  ] });
+}
+
+const ROW = "-mx-2 flex w-[calc(100%+1rem)] items-center gap-3 rounded-md px-2 py-1 text-left";
+const NUM = "shrink-0 text-right text-body-sm tabular-nums";
+
+function ShareListRow({
+  row,
+  columns,
+  valueWidth,
+  share,
+  highlighted,
+  dimmed,
+  onHover,
+  LinkComponent
+}) {
+  const className = cn(
+    ROW,
+    "transition-[background-color,opacity] duration-150",
+    highlighted && "bg-fill-subtle",
+    (row.href || row.onClick) && "hover:bg-fill-subtle"
+  );
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    RowShell,
+    {
+      row,
+      LinkComponent,
+      className,
+      style: { opacity: dimmed ? 0.5 : 1 },
+      onMouseEnter: onHover,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "size-2 shrink-0 rounded-[2px]",
+            style: { backgroundColor: row.paint.color, opacity: row.paint.alpha }
+          }
+        ),
+        /* @__PURE__ */ jsx(RowLabel, { row }),
+        columns.map((c, i) => /* @__PURE__ */ jsx("span", { className: cn(NUM, "text-muted-foreground", c.width ?? "w-16"), children: row.cells?.[i] }, c.label)),
+        /* @__PURE__ */ jsx("span", { className: cn(NUM, "w-12 text-muted-foreground"), children: share }),
+        /* @__PURE__ */ jsx("span", { className: cn(NUM, "text-foreground", valueWidth), children: row.value })
+      ]
+    }
+  ) });
+}
+function RowShell({
+  row,
+  LinkComponent,
+  ...props
+}) {
+  if (row.href) {
+    const Anchor = LinkComponent ?? "a";
+    return /* @__PURE__ */ jsx(Anchor, { href: row.href, ...props });
+  }
+  if (row.onClick) return /* @__PURE__ */ jsx("button", { type: "button", onClick: row.onClick, ...props });
+  return /* @__PURE__ */ jsx("div", { ...props });
+}
+function RowLabel({ row }) {
+  if (typeof row.label !== "string") {
+    return /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1", title: row.title, children: row.label });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", title: row.title ?? row.label, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body-sm", tone: "ink", children: row.label }) });
+}
+
+const DEFAULT_COLOR = "var(--chart-share-1)";
+const HUES = [1, 2, 3, 4, 5].map((i) => `var(--chart-share-${i})`);
+const CUSTOM_LEAD_HUES = [3, 4, 2, 5, 1].map((i) => `var(--chart-share-${i})`);
+const SHADES = [1, 0.7, 0.48, 0.32, 0.2, 0.14];
+const REST = { color: "var(--chart-share-rest)", alpha: 1 };
+const SEGMENTS = 50;
+const REST_KEY = "__rest";
+function rowColors(base, count, palette) {
+  if (palette === "hues") {
+    const hues = HUES.includes(base) ? [base, ...HUES.filter((h) => h !== base)] : [base, ...CUSTOM_LEAD_HUES];
+    return Array.from({ length: count }, (_, i) => ({
+      color: hues[i % hues.length] ?? base,
+      alpha: [1, 0.55, 0.3][Math.floor(i / hues.length)] ?? 0.2
+    }));
+  }
+  return Array.from({ length: count }, (_, i) => ({ color: base, alpha: SHADES[i] ?? 0.1 }));
+}
+const sumShares = (rows) => rows.reduce((sum, r) => sum + Math.max(r.share, 0), 0);
+function rankRows(rows) {
+  return rows.map((r) => Number.isFinite(r.share) && r.share > 0 ? r : { ...r, share: 0 }).toSorted((a, b) => b.share - a.share);
+}
+function foldRows(ranked, { limit, other, color, palette }) {
+  if (ranked.length <= limit + 1) return { shown: paintRows(ranked, color, palette), rest: [] };
+  const rest = ranked.slice(limit);
+  const folded = other?.(rest);
+  const otherRow = {
+    key: REST_KEY,
+    label: `Other (${rest.length})`,
+    share: sumShares(rest),
+    value: folded?.value,
+    cells: folded?.cells,
+    paint: REST,
+    segment: REST_KEY
+  };
+  return { shown: [...paintRows(ranked.slice(0, limit), color, palette), otherRow], rest };
+}
+function paintRows(rows, color, palette) {
+  const colors = rowColors(color, rows.length, palette);
+  return rows.map((r, i) => ({ ...r, paint: colors[i] ?? REST, segment: r.key }));
+}
+function pageRows(ranked, { count, activeKey, color, palette }) {
+  const own = Math.min(count, ranked.length, SEGMENTS);
+  const colors = rowColors(color, own, palette);
+  const rank = new Map(ranked.map((r, i) => [r.key, i]));
+  const shown = listedRows(ranked, count, activeKey).map((r) => {
+    const i = rank.get(r.key) ?? ranked.length;
+    return { ...r, paint: colors[i] ?? REST, segment: i < own ? r.key : REST_KEY };
+  });
+  return { shown, rest: ranked.slice(own) };
+}
+function listedRows(ranked, count, activeKey) {
+  const listed = ranked.slice(0, count);
+  const active = activeKey ? ranked.findIndex((r) => r.key === activeKey) : -1;
+  const pinned = active >= count ? ranked[active] : void 0;
+  return pinned ? [...listed, pinned] : listed;
+}
+function stripSegments(shown, rest) {
+  const own = shown.filter((r) => r.segment !== REST_KEY).map((r) => ({ key: r.key, share: r.share, paint: r.paint }));
+  const gray = rest.length ? [{ key: REST_KEY, share: sumShares(rest), paint: REST }] : [];
+  const segments = [...own, ...gray].filter((s) => s.share > 0);
+  const total = segments.reduce((sum, s) => sum + s.share, 0);
+  return segments.map((s) => ({ key: s.key, paint: s.paint, grow: s.share / total * 100 }));
+}
+function hoveredSegment(shown, hover) {
+  if (hover === void 0) return void 0;
+  return shown.find((r) => r.key === hover)?.segment ?? hover;
+}
+const isSegmentDimmed = (key, lit) => lit !== void 0 && lit !== key;
+function isRowDimmed(row, hover) {
+  if (hover === void 0 || hover === row.key) return false;
+  return !(hover === REST_KEY && row.segment === REST_KEY);
+}
+const fmtShare = (n, total) => {
+  const r = n / (total || 1);
+  if (!(r > 0)) return "0%";
+  if (r < 1e-3) return "<0.1%";
+  return `${(r * 100).toFixed(r < 0.1 ? 1 : 0)}%`;
+};
+
+function ShowMore({
+  shown,
+  total,
+  limit,
+  pageSize,
+  onMore,
+  onLess
+}) {
+  if (total <= limit) return null;
+  const left = total - shown;
+  const button = "flex items-center gap-1.5 rounded-md px-2 py-1 text-body-sm font-medium text-muted-foreground transition-colors duration-150 hover:bg-fill-subtle hover:text-foreground";
+  const n = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+  return /* @__PURE__ */ jsxs("li", { className: "-mx-2 flex items-center gap-1", children: [
+    left > 0 && /* @__PURE__ */ jsxs("button", { type: "button", onClick: onMore, className: button, children: [
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5 shrink-0" }),
+      "Show ",
+      Math.min(left, pageSize),
+      " more"
+    ] }),
+    shown > limit && /* @__PURE__ */ jsxs("button", { type: "button", onClick: onLess, className: button, children: [
+      /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-3.5 shrink-0" }),
+      "Show top ",
+      limit
+    ] }),
+    left > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-auto pr-2 text-body-sm text-placeholder tabular-nums", children: [
+      n.format(shown),
+      " of ",
+      n.format(total)
+    ] })
+  ] });
+}
+
+const LABEL_WIDTHS = ["w-32", "w-24", "w-36", "w-20", "w-28"];
+function Bar({ className }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    "​",
+    /* @__PURE__ */ jsx(Skeleton, { className: cn("absolute top-1/2 h-3.5 -translate-y-1/2", className) })
+  ] });
+}
+function ShareListSkeleton({
+  rows,
+  columns,
+  valueWidth
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "size-full rounded-full" }) }),
+    /* @__PURE__ */ jsx("ul", { className: "grid min-w-0 grid-cols-1 gap-0.5", "aria-busy": true, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxs("li", { className: ROW, children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "size-2 shrink-0 rounded-[2px]" }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body-sm", className: "relative", children: /* @__PURE__ */ jsx(Bar, { className: cn("left-0", LABEL_WIDTHS[i % LABEL_WIDTHS.length]) }) }) }),
+      columns.map((c) => /* @__PURE__ */ jsx("span", { className: cn(NUM, "relative", c.width ?? "w-16"), children: /* @__PURE__ */ jsx(Bar, { className: "right-0 w-10" }) }, c.label)),
+      /* @__PURE__ */ jsx("span", { className: cn(NUM, "relative w-12"), children: /* @__PURE__ */ jsx(Bar, { className: "right-0 w-9" }) }),
+      /* @__PURE__ */ jsx("span", { className: cn(NUM, "relative", valueWidth), children: /* @__PURE__ */ jsx(Bar, { className: "right-0 w-12" }) })
+    ] }, i)) })
+  ] });
+}
+
+function MetricsShareList({ showHeader = true, className, ...props }) {
+  const { columns = [], valueLabel, valueWidth = "w-14" } = props;
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-4", className), children: [
+    showHeader && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(MetricsShareListHeader, { columns, valueLabel, valueWidth }) }),
+    /* @__PURE__ */ jsx(ShareListBody, { ...props })
+  ] });
+}
+function ShareListBody({
+  rows,
+  columns = [],
+  valueLabel,
+  valueWidth = "w-14",
+  palette = "shades",
+  color = DEFAULT_COLOR,
+  limit = 5,
+  overflow = "other",
+  pageSize = 50,
+  other,
+  activeKey,
+  emptyState = "No data in this range.",
+  isLoading = false,
+  LinkComponent
+}) {
+  const [hover, setHover] = useState();
+  const [pages, setPages] = useState(0);
+  const count = limit + pages * pageSize;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(ShareListSkeleton, { rows: overflow === "other" ? limit + 1 : limit, columns, valueWidth });
+  }
+  const ranked = rankRows(rows);
+  if (ranked.length === 0) {
+    return /* @__PURE__ */ jsx(Txt, { variant: "body-sm", tone: "muted", className: "py-6 text-center", children: emptyState });
+  }
+  const total = sumShares(ranked);
+  const paging = overflow === "more";
+  const { shown, rest } = paging ? pageRows(ranked, { count, activeKey, color, palette }) : foldRows(ranked, { limit, other, color, palette });
+  const segments = stripSegments(shown, rest);
+  const litSegment = hoveredSegment(shown, hover);
+  const clearHover = () => setHover(void 0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-2 gap-0.5", onMouseLeave: clearHover, children: segments.map((s) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-testid": "metrics-share-segment",
+        onMouseEnter: () => setHover(s.key),
+        className: "h-full min-w-[3px] transition-opacity duration-150 first:rounded-l-full last:rounded-r-full",
+        style: {
+          flex: `${s.grow} 1 0`,
+          backgroundColor: s.paint.color,
+          opacity: s.paint.alpha * (isSegmentDimmed(s.key, litSegment) ? 0.3 : 1)
+        }
+      },
+      s.key
+    )) }),
+    /* @__PURE__ */ jsxs("ul", { className: "grid min-w-0 grid-cols-1 gap-0.5", onMouseLeave: clearHover, children: [
+      shown.map((r) => /* @__PURE__ */ jsx(
+        ShareListRow,
+        {
+          row: r,
+          columns,
+          valueWidth,
+          share: fmtShare(r.share, total),
+          highlighted: hover === r.key || activeKey === r.key,
+          dimmed: isRowDimmed(r, hover),
+          onHover: () => setHover(r.key),
+          LinkComponent
+        },
+        r.key
+      )),
+      paging && /* @__PURE__ */ jsx(
+        ShowMore,
+        {
+          shown: Math.min(count, ranked.length),
+          total: ranked.length,
+          limit,
+          pageSize,
+          onMore: () => setPages((p) => p + 1),
+          onLess: () => setPages(0)
+        }
+      )
+    ] })
+  ] });
+}
+MetricsShareList.Header = MetricsShareListHeader;
+
+export { MetricsShareList as M, MetricsShareListHeader as a };
+//# sourceMappingURL=metrics-share-list-2cC_1I1S.js.map