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

package/dist/metrics-stacked-bar-chart-3MKRp0RI.js

@@ -0,0 +1,195 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useRef, useMemo, useState, useLayoutEffect } from 'react';
+import { ComposedChart, CartesianGrid, Tooltip, Bar, Line, ReferenceLine, Rectangle } from 'recharts';
+import { C as ChartSkeleton } from './chart-skeleton-C2-qELLI.js';
+import { M as MetricsLineChartLegend, a as MetricsLineChartTooltip } from './metrics-line-chart-tooltip-bgRf6KTb.js';
+import { useChartSize, CHART_GRID_PROPS } from './primitives/chart-axes.es.js';
+import { stackedSegmentBox, singleBarBox } from './primitives/chart-column-layout.es.js';
+import { compactNumber, Y_AXIS_WIDTH, timeXAxis, valueYAxis, CHART_TICK } from './primitives/chart-frame.es.js';
+import { CHART_MARGIN } from './primitives/chart-layout.es.js';
+import { ChartPlot } from './primitives/chart-plot.es.js';
+import { useChartDefsId } from './primitives/use-chart-defs-id.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+const RADIUS = 2;
+const SEGMENT_GAP = 2;
+const GRADIENT_BASE = 0.75;
+const CAP_BODY = 0.55;
+const CAP_HEIGHT = 3;
+const DIMMED = 0.3;
+function segmentShape({
+  fill,
+  color,
+  capped,
+  keys,
+  dataKey
+}) {
+  return function Segment({ x = 0, width = 0, index, payload, ...geo }) {
+    const values = keys.map((k) => Number(payload?.[k]) || 0);
+    const self = keys.indexOf(dataKey);
+    const box = { y: geo.y ?? 0, height: Math.max(geo.height ?? 0, 0) };
+    const laid = keys.length > 1 ? stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP }) : singleBarBox(values[self] ?? 0, box);
+    if (!laid) return /* @__PURE__ */ jsx("g", {});
+    const { y, height: h } = laid;
+    const radius = Math.min(RADIUS, Math.floor(h / 3));
+    const bucket = { "data-bucket": index, style: { transition: "opacity 150ms ease-out" } };
+    if (capped) {
+      return /* @__PURE__ */ jsxs("g", { ...bucket, children: [
+        /* @__PURE__ */ jsx(Rectangle, { x, y, width, height: h, radius, fill: color, fillOpacity: CAP_BODY }),
+        /* @__PURE__ */ jsx(Rectangle, { x, y, width, height: Math.min(CAP_HEIGHT, h), radius, fill: color })
+      ] });
+    }
+    return /* @__PURE__ */ jsx("g", { ...bucket, children: /* @__PURE__ */ jsx(Rectangle, { x, y, width, height: h, radius, fill }) });
+  };
+}
+function HoverDim({ scope, setter }) {
+  const [hovered, setHovered] = useState();
+  useLayoutEffect(() => {
+    setter.current = setHovered;
+  }, [setter]);
+  if (hovered === void 0) return null;
+  return /* @__PURE__ */ jsx("style", { children: `[data-chart-scope="${scope}"] [data-bucket]:not([data-bucket="${hovered}"]){opacity:${DIMMED}}` });
+}
+function MetricsStackedBarChart(props) {
+  const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;
+  const id = useChartDefsId();
+  const root = cn(height === "fill" && "flex min-h-0 flex-1 flex-col", className);
+  const legend = overlay ? [...series, { ...overlay, dashed: true }] : series;
+  return /* @__PURE__ */ jsxs("div", { className: root, "data-chart-scope": id, children: [
+    showLegend && /* @__PURE__ */ jsx(MetricsLineChartLegend, { data: isLoading ? void 0 : data, series: legend, className: "mb-4" }),
+    isLoading ? /* @__PURE__ */ jsx(ChartSkeleton, { kind: "bar", height }) : /* @__PURE__ */ jsx(BarPlot, { ...props, id })
+  ] });
+}
+function BarPlot({
+  data,
+  series,
+  height = 210,
+  yDomain,
+  valueFormatter,
+  axisFormatter,
+  referenceLine,
+  variant = "gradient",
+  showYAxis = true,
+  showTotal = series.length > 1,
+  xKey = "time",
+  timestampKey = "tsMs",
+  xLabels = "auto",
+  tooltipLabelKey,
+  onBucketClick,
+  overlay,
+  id
+}) {
+  const setHovered = useRef(() => {
+  });
+  const { size, onResize, ref } = useChartSize();
+  const keyList = series.map((s) => s.dataKey).join("\0");
+  const colorList = series.map((s) => s.color).join("\0");
+  const shapes = useMemo(() => {
+    const keys = keyList.split("\0");
+    const colors = colorList.split("\0");
+    return keys.map(
+      (dataKey, i) => segmentShape({
+        fill: `url(#${id}-bar-${i})`,
+        color: colors[i] ?? "",
+        capped: variant === "capped",
+        keys,
+        dataKey
+      })
+    );
+  }, [keyList, colorList, variant, id]);
+  const format = valueFormatter ?? compactNumber.format;
+  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(HoverDim, { scope: id, setter: setHovered }),
+    /* @__PURE__ */ jsx(ChartPlot, { height, plotRef: ref, onResize, clickable: !!onBucketClick, children: /* @__PURE__ */ jsxs(
+      ComposedChart,
+      {
+        data,
+        margin: CHART_MARGIN,
+        onMouseMove: (state) => {
+          const index = state?.activeTooltipIndex;
+          setHovered.current(index === void 0 || index === null ? void 0 : Number(index));
+        },
+        onMouseLeave: () => setHovered.current(void 0),
+        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__ */ jsx("defs", { children: series.map((s, i) => /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-bar-${i}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: s.color, stopOpacity: 1 }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: s.color, stopOpacity: GRADIENT_BASE })
+          ] }, s.dataKey)) }),
+          /* @__PURE__ */ jsx(CartesianGrid, { ...CHART_GRID_PROPS }),
+          timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth }),
+          valueYAxis({ show: showYAxis, size, formatter: axisFormatter ?? format, domain: yDomain }),
+          overlay && valueYAxis({
+            id: "overlay",
+            show: false,
+            size,
+            formatter: overlay.valueFormatter ?? compactNumber.format,
+            right: true
+          }),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              cursor: false,
+              content: /* @__PURE__ */ jsx(
+                MetricsLineChartTooltip,
+                {
+                  formatValue: format,
+                  showTotal: showTotal && !overlay,
+                  labelKey: tooltipLabelKey,
+                  formatByKey: overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : void 0
+                }
+              )
+            }
+          ),
+          series.map((s, i) => /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: s.dataKey,
+              name: s.label,
+              stackId: "1",
+              fill: s.color,
+              maxBarSize: 28,
+              isAnimationActive: false,
+              shape: shapes[i]
+            },
+            s.dataKey
+          )),
+          overlay && /* @__PURE__ */ jsx(
+            Line,
+            {
+              yAxisId: "overlay",
+              type: "monotone",
+              dataKey: overlay.dataKey,
+              name: overlay.label,
+              stroke: overlay.color,
+              strokeWidth: 1.75,
+              strokeDasharray: "4 3",
+              dot: false,
+              activeDot: { r: 3.5, fill: overlay.color, stroke: "var(--background)", strokeWidth: 2 },
+              isAnimationActive: false,
+              connectNulls: true
+            }
+          ),
+          referenceLine && /* @__PURE__ */ jsx(
+            ReferenceLine,
+            {
+              y: referenceLine.value,
+              ifOverflow: "extendDomain",
+              stroke: referenceLine.color,
+              strokeDasharray: "4 4",
+              label: { value: referenceLine.label, position: "insideTopLeft", ...CHART_TICK }
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+
+export { MetricsStackedBarChart as M };
+//# sourceMappingURL=metrics-stacked-bar-chart-3MKRp0RI.js.map

package/dist/metrics-stacked-bar-chart-3MKRp0RI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-stacked-bar-chart-3MKRp0RI.js","sources":["../src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Bar, CartesianGrid, ComposedChart, Line, Rectangle, ReferenceLine, Tooltip } 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, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { singleBarBox, stackedSegmentBox } from '@/ds/primitives/chart-column-layout';\nimport { CHART_TICK, 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\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;\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, style: { transition: 'opacity 150ms ease-out' } };\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 but the hovered one. Its own tiny state, so a hover only re-renders this\n * <style> tag: with hundreds of buckets, re-rendering the bars on each move froze the pointer.\n */\nfunction HoverDim({ scope, setter }: { scope: string; setter: { current: (index: number | undefined) => void } }) {\n  const [hovered, setHovered] = useState<number>();\n  useLayoutEffect(() => {\n    setter.current = setHovered;\n  }, [setter]);\n  if (hovered === undefined) return null;\n  return (\n    <style>{`[data-chart-scope=\"${scope}\"] [data-bucket]:not([data-bucket=\"${hovered}\"]){opacity:${DIMMED}}`}</style>\n  );\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  /** 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  /** 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 data={isLoading ? undefined : data} 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  onBucketClick,\n  overlay,\n  id,\n}: MetricsStackedBarChartProps & { id: string }) {\n  const setHovered = useRef<(index: number | undefined) => void>(() => {});\n  const { size, onResize, ref } = useChartSize();\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\n  return (\n    <>\n      <HoverDim scope={id} setter={setHovered} />\n      <ChartPlot height={height} plotRef={ref} onResize={onResize} clickable={!!onBucketClick}>\n        <ComposedChart\n          data={data}\n          margin={CHART_MARGIN}\n          onMouseMove={state => {\n            const index = state?.activeTooltipIndex;\n            setHovered.current(index === undefined || index === null ? undefined : Number(index));\n          }}\n          onMouseLeave={() => setHovered.current(undefined)}\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}-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          {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n          {valueYAxis({ show: showYAxis, size, formatter: axisFormatter ?? format, domain: yDomain })}\n          {overlay &&\n            valueYAxis({\n              id: 'overlay',\n              show: false,\n              size,\n              formatter: overlay.valueFormatter ?? compactNumber.format,\n              right: true,\n            })}\n          <Tooltip\n            cursor={false}\n            content={\n              <MetricsLineChartTooltip\n                formatValue={format}\n                showTotal={showTotal && !overlay}\n                labelKey={tooltipLabelKey}\n                formatByKey={overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : undefined}\n              />\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={28}\n              isAnimationActive={false}\n              shape={shapes[i]}\n            />\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"],"names":[],"mappings":"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"}

package/dist/metrics-stacked-bar-chart-BKhaGInr.cjs

@@ -0,0 +1,197 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const recharts = require('recharts');
+const chartSkeleton = require('./chart-skeleton-PMdW3B43.cjs');
+const metricsLineChartTooltip = require('./metrics-line-chart-tooltip-BSzXdRFR.cjs');
+const primitives_chartAxes = require('./primitives/chart-axes.cjs.js');
+const primitives_chartColumnLayout = require('./primitives/chart-column-layout.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 RADIUS = 2;
+const SEGMENT_GAP = 2;
+const GRADIENT_BASE = 0.75;
+const CAP_BODY = 0.55;
+const CAP_HEIGHT = 3;
+const DIMMED = 0.3;
+function segmentShape({
+  fill,
+  color,
+  capped,
+  keys,
+  dataKey
+}) {
+  return function Segment({ x = 0, width = 0, index, payload, ...geo }) {
+    const values = keys.map((k) => Number(payload?.[k]) || 0);
+    const self = keys.indexOf(dataKey);
+    const box = { y: geo.y ?? 0, height: Math.max(geo.height ?? 0, 0) };
+    const laid = keys.length > 1 ? primitives_chartColumnLayout.stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP }) : primitives_chartColumnLayout.singleBarBox(values[self] ?? 0, box);
+    if (!laid) return /* @__PURE__ */ jsxRuntime.jsx("g", {});
+    const { y, height: h } = laid;
+    const radius = Math.min(RADIUS, Math.floor(h / 3));
+    const bucket = { "data-bucket": index, style: { transition: "opacity 150ms ease-out" } };
+    if (capped) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { ...bucket, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.Rectangle, { x, y, width, height: h, radius, fill: color, fillOpacity: CAP_BODY }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.Rectangle, { x, y, width, height: Math.min(CAP_HEIGHT, h), radius, fill: color })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("g", { ...bucket, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.Rectangle, { x, y, width, height: h, radius, fill }) });
+  };
+}
+function HoverDim({ scope, setter }) {
+  const [hovered, setHovered] = React.useState();
+  React.useLayoutEffect(() => {
+    setter.current = setHovered;
+  }, [setter]);
+  if (hovered === void 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("style", { children: `[data-chart-scope="${scope}"] [data-bucket]:not([data-bucket="${hovered}"]){opacity:${DIMMED}}` });
+}
+function MetricsStackedBarChart(props) {
+  const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;
+  const id = primitives_useChartDefsId.useChartDefsId();
+  const root = utils_cn.cn(height === "fill" && "flex min-h-0 flex-1 flex-col", className);
+  const legend = overlay ? [...series, { ...overlay, dashed: true }] : series;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: root, "data-chart-scope": id, children: [
+    showLegend && /* @__PURE__ */ jsxRuntime.jsx(metricsLineChartTooltip.MetricsLineChartLegend, { data: isLoading ? void 0 : data, series: legend, className: "mb-4" }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chartSkeleton.ChartSkeleton, { kind: "bar", height }) : /* @__PURE__ */ jsxRuntime.jsx(BarPlot, { ...props, id })
+  ] });
+}
+function BarPlot({
+  data,
+  series,
+  height = 210,
+  yDomain,
+  valueFormatter,
+  axisFormatter,
+  referenceLine,
+  variant = "gradient",
+  showYAxis = true,
+  showTotal = series.length > 1,
+  xKey = "time",
+  timestampKey = "tsMs",
+  xLabels = "auto",
+  tooltipLabelKey,
+  onBucketClick,
+  overlay,
+  id
+}) {
+  const setHovered = React.useRef(() => {
+  });
+  const { size, onResize, ref } = primitives_chartAxes.useChartSize();
+  const keyList = series.map((s) => s.dataKey).join("\0");
+  const colorList = series.map((s) => s.color).join("\0");
+  const shapes = React.useMemo(() => {
+    const keys = keyList.split("\0");
+    const colors = colorList.split("\0");
+    return keys.map(
+      (dataKey, i) => segmentShape({
+        fill: `url(#${id}-bar-${i})`,
+        color: colors[i] ?? "",
+        capped: variant === "capped",
+        keys,
+        dataKey
+      })
+    );
+  }, [keyList, colorList, variant, id]);
+  const format = valueFormatter ?? primitives_chartFrame.compactNumber.format;
+  const plotWidth = size.width - (showYAxis ? primitives_chartFrame.Y_AXIS_WIDTH : 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(HoverDim, { scope: id, setter: setHovered }),
+    /* @__PURE__ */ jsxRuntime.jsx(primitives_chartPlot.ChartPlot, { height, plotRef: ref, onResize, clickable: !!onBucketClick, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      recharts.ComposedChart,
+      {
+        data,
+        margin: primitives_chartLayout.CHART_MARGIN,
+        onMouseMove: (state) => {
+          const index = state?.activeTooltipIndex;
+          setHovered.current(index === void 0 || index === null ? void 0 : Number(index));
+        },
+        onMouseLeave: () => setHovered.current(void 0),
+        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}-bar-${i}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: s.color, stopOpacity: 1 }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: s.color, stopOpacity: GRADIENT_BASE })
+          ] }, 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 }),
+          overlay && primitives_chartFrame.valueYAxis({
+            id: "overlay",
+            show: false,
+            size,
+            formatter: overlay.valueFormatter ?? primitives_chartFrame.compactNumber.format,
+            right: true
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Tooltip,
+            {
+              cursor: false,
+              content: /* @__PURE__ */ jsxRuntime.jsx(
+                metricsLineChartTooltip.MetricsLineChartTooltip,
+                {
+                  formatValue: format,
+                  showTotal: showTotal && !overlay,
+                  labelKey: tooltipLabelKey,
+                  formatByKey: overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : void 0
+                }
+              )
+            }
+          ),
+          series.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Bar,
+            {
+              dataKey: s.dataKey,
+              name: s.label,
+              stackId: "1",
+              fill: s.color,
+              maxBarSize: 28,
+              isAnimationActive: false,
+              shape: shapes[i]
+            },
+            s.dataKey
+          )),
+          overlay && /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Line,
+            {
+              yAxisId: "overlay",
+              type: "monotone",
+              dataKey: overlay.dataKey,
+              name: overlay.label,
+              stroke: overlay.color,
+              strokeWidth: 1.75,
+              strokeDasharray: "4 3",
+              dot: false,
+              activeDot: { r: 3.5, fill: overlay.color, stroke: "var(--background)", strokeWidth: 2 },
+              isAnimationActive: false,
+              connectNulls: true
+            }
+          ),
+          referenceLine && /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.ReferenceLine,
+            {
+              y: referenceLine.value,
+              ifOverflow: "extendDomain",
+              stroke: referenceLine.color,
+              strokeDasharray: "4 4",
+              label: { value: referenceLine.label, position: "insideTopLeft", ...primitives_chartFrame.CHART_TICK }
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+
+exports.MetricsStackedBarChart = MetricsStackedBarChart;
+//# sourceMappingURL=metrics-stacked-bar-chart-BKhaGInr.cjs.map

package/dist/metrics-stacked-bar-chart-BKhaGInr.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-stacked-bar-chart-BKhaGInr.cjs","sources":["../src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Bar, CartesianGrid, ComposedChart, Line, Rectangle, ReferenceLine, Tooltip } 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, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { singleBarBox, stackedSegmentBox } from '@/ds/primitives/chart-column-layout';\nimport { CHART_TICK, 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\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;\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, style: { transition: 'opacity 150ms ease-out' } };\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 but the hovered one. Its own tiny state, so a hover only re-renders this\n * <style> tag: with hundreds of buckets, re-rendering the bars on each move froze the pointer.\n */\nfunction HoverDim({ scope, setter }: { scope: string; setter: { current: (index: number | undefined) => void } }) {\n  const [hovered, setHovered] = useState<number>();\n  useLayoutEffect(() => {\n    setter.current = setHovered;\n  }, [setter]);\n  if (hovered === undefined) return null;\n  return (\n    <style>{`[data-chart-scope=\"${scope}\"] [data-bucket]:not([data-bucket=\"${hovered}\"]){opacity:${DIMMED}}`}</style>\n  );\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  /** 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  /** 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 data={isLoading ? undefined : data} 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  onBucketClick,\n  overlay,\n  id,\n}: MetricsStackedBarChartProps & { id: string }) {\n  const setHovered = useRef<(index: number | undefined) => void>(() => {});\n  const { size, onResize, ref } = useChartSize();\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\n  return (\n    <>\n      <HoverDim scope={id} setter={setHovered} />\n      <ChartPlot height={height} plotRef={ref} onResize={onResize} clickable={!!onBucketClick}>\n        <ComposedChart\n          data={data}\n          margin={CHART_MARGIN}\n          onMouseMove={state => {\n            const index = state?.activeTooltipIndex;\n            setHovered.current(index === undefined || index === null ? undefined : Number(index));\n          }}\n          onMouseLeave={() => setHovered.current(undefined)}\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}-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          {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n          {valueYAxis({ show: showYAxis, size, formatter: axisFormatter ?? format, domain: yDomain })}\n          {overlay &&\n            valueYAxis({\n              id: 'overlay',\n              show: false,\n              size,\n              formatter: overlay.valueFormatter ?? compactNumber.format,\n              right: true,\n            })}\n          <Tooltip\n            cursor={false}\n            content={\n              <MetricsLineChartTooltip\n                formatValue={format}\n                showTotal={showTotal && !overlay}\n                labelKey={tooltipLabelKey}\n                formatByKey={overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : undefined}\n              />\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={28}\n              isAnimationActive={false}\n              shape={shapes[i]}\n            />\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"],"names":["stackedSegmentBox","singleBarBox","jsx","jsxs","Rectangle","useState","useLayoutEffect","useChartDefsId","cn","MetricsLineChartLegend","ChartSkeleton","useRef","useChartSize","useMemo","compactNumber","Y_AXIS_WIDTH","Fragment","ChartPlot","ComposedChart","CHART_MARGIN","CartesianGrid","CHART_GRID_PROPS","timeXAxis","valueYAxis","Tooltip","MetricsLineChartTooltip","Bar","Line","ReferenceLine","CHART_TICK"],"mappings":"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"}

package/dist/new/layout/app-shell.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../../cn-DG0X1KEP.cjs');
+const utils_cn = require('../../cn-TqD01zH-.cjs');
 const primitives_raisedSurface = require('../../primitives/raised-surface.cjs.js');
 
 function AppShell({ children, className, mobileHeader, ref, sidebar, ...props }) {

package/dist/new/layout/app-shell.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { c as cn } from '../../cn-65Adrsfj.js';
+import { c as cn } from '../../cn-coERSHz5.js';
 import { frameSurfaceStyle } from '../../primitives/raised-surface.es.js';
 
 function AppShell({ children, className, mobileHeader, ref, sidebar, ...props }) {

package/dist/new/layout/page-header.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const pageHeader = require('../../page-header-CLcX--H8.cjs');
+const pageHeader = require('../../page-header-CLxPq7T5.cjs');
 
 
 

package/dist/new/layout/page-header.es.js

@@ -1,2 +1,2 @@
-export { P as PageHeader } from '../../page-header-pWZXI3lO.js';
+export { P as PageHeader } from '../../page-header-Bf0zLkyY.js';
 //# sourceMappingURL=page-header.es.js.map

package/dist/new/settings.cjs.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const settingsRow = require('../settings-row-UPZXTcx1.cjs');
+const settingsRow = require('../settings-row-CwZ3JffC.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const Txt = require('../Txt-DFPibRb3.cjs');
-const utils_cn = require('../cn-DG0X1KEP.cjs');
+const Txt = require('../Txt-DXjXpX9r.cjs');
+const utils_cn = require('../cn-TqD01zH-.cjs');
 
 const SettingsTitleIdContext = React.createContext(void 0);
 function SettingsGroup({ className, ...props }) {

package/dist/new/settings.es.js

@@ -1,8 +1,8 @@
-export { S as SettingsContainer, a as SettingsFieldsetRow, b as SettingsRow } from '../settings-row-Dc6ECXjj.js';
+export { S as SettingsContainer, a as SettingsFieldsetRow, b as SettingsRow } from '../settings-row-gpwIVAMN.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useId, useContext, createContext } from 'react';
-import { T as Txt } from '../Txt-CuuPO9Ho.js';
-import { c as cn } from '../cn-65Adrsfj.js';
+import { T as Txt } from '../Txt-BuzYj7Vy.js';
+import { c as cn } from '../cn-coERSHz5.js';
 
 const SettingsTitleIdContext = createContext(void 0);
 function SettingsGroup({ className, ...props }) {

package/dist/notification-activity-Bz0h5LOR.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const activity = require('./activity-pXCpwxxi.cjs');
+const messagePreview = require('./message-preview-4Fmotm9o.cjs');
+const Badge = require('./Badge-BF6FbLH_.cjs');
+const Txt = require('./Txt-DXjXpX9r.cjs');
+
+const priorityBadgeVariants = {
+  urgent: "red",
+  high: "orange",
+  medium: "blue"
+};
+function NotificationActivity({
+  label,
+  message,
+  state = "notification",
+  icon,
+  priority,
+  status,
+  pending,
+  link,
+  defaultOpen
+}) {
+  const lineHoldsMessage = messagePreview.messagePreviewShowsAll(message);
+  const hasBadges = Boolean(priority || status || pending);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    activity.ActivityItem,
+    {
+      label,
+      detail: messagePreview.messagePreview(message),
+      detailFont: "sans",
+      icon: icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, { className: "text-warning-foreground", "aria-hidden": true }),
+      badges: hasBadges && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        priority && /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { size: "xs", variant: priorityBadgeVariants[priority], children: priority }),
+        status && /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { size: "xs", children: status }),
+        pending && /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { size: "xs", children: [
+          pending,
+          " pending"
+        ] })
+      ] }),
+      defaultOpen,
+      "data-notification-state": state,
+      "aria-label": `Notification: ${label}`,
+      children: (!lineHoldsMessage || link) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+        message && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", className: "break-words whitespace-pre-wrap", children: message }),
+        link && /* @__PURE__ */ jsxRuntime.jsx(NotificationLink, { link, message })
+      ] })
+    }
+  );
+}
+function NotificationLink({
+  link,
+  message
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
+    {
+      href: link.href,
+      target: "_blank",
+      rel: "noreferrer",
+      "aria-label": `${link.label}: ${messagePreview.messagePreview(message)}`,
+      className: "flex w-fit items-center gap-1 text-meta text-muted-foreground hover:text-foreground",
+      children: [
+        link.label,
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 12, "aria-hidden": true })
+      ]
+    }
+  );
+}
+
+exports.NotificationActivity = NotificationActivity;
+//# sourceMappingURL=notification-activity-Bz0h5LOR.cjs.map

package/dist/notification-activity-Bz0h5LOR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-activity-Bz0h5LOR.cjs","sources":["../src/ds/components/ai/activity/presets/notification-activity.tsx"],"sourcesContent":["import { Bell, ExternalLink } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { ActivityItem } from '../activity';\nimport { messagePreview, messagePreviewShowsAll } from './message-preview';\nimport { Badge } from '@/ds/components/Badge';\nimport type { BadgeVariant } from '@/ds/components/Badge';\nimport { Txt } from '@/ds/components/Txt';\n\nexport interface NotificationActivityProps {\n  label: string;\n  message: string;\n  state?: string;\n  icon?: ReactNode;\n  priority?: string;\n  status?: string;\n  pending?: string;\n  link?: { href: string; label: string };\n  defaultOpen?: boolean;\n}\n\nconst priorityBadgeVariants: Partial<Record<string, BadgeVariant>> = {\n  urgent: 'red',\n  high: 'orange',\n  medium: 'blue',\n};\n\nexport function NotificationActivity({\n  label,\n  message,\n  state = 'notification',\n  icon,\n  priority,\n  status,\n  pending,\n  link,\n  defaultOpen,\n}: NotificationActivityProps) {\n  const lineHoldsMessage = messagePreviewShowsAll(message);\n  const hasBadges = Boolean(priority || status || pending);\n\n  return (\n    <ActivityItem\n      label={label}\n      detail={messagePreview(message)}\n      detailFont=\"sans\"\n      icon={icon ?? <Bell className=\"text-warning-foreground\" aria-hidden />}\n      badges={\n        hasBadges && (\n          <>\n            {priority && (\n              <Badge size=\"xs\" variant={priorityBadgeVariants[priority]}>\n                {priority}\n              </Badge>\n            )}\n            {status && <Badge size=\"xs\">{status}</Badge>}\n            {pending && <Badge size=\"xs\">{pending} pending</Badge>}\n          </>\n        )\n      }\n      defaultOpen={defaultOpen}\n      data-notification-state={state}\n      aria-label={`Notification: ${label}`}\n    >\n      {(!lineHoldsMessage || link) && (\n        <div className=\"flex flex-col gap-2\">\n          {message && (\n            <Txt variant=\"caption\" className=\"break-words whitespace-pre-wrap\">\n              {message}\n            </Txt>\n          )}\n          {link && <NotificationLink link={link} message={message} />}\n        </div>\n      )}\n    </ActivityItem>\n  );\n}\n\nfunction NotificationLink({\n  link,\n  message,\n}: {\n  link: NonNullable<NotificationActivityProps['link']>;\n  message: string;\n}) {\n  return (\n    <a\n      href={link.href}\n      target=\"_blank\"\n      rel=\"noreferrer\"\n      aria-label={`${link.label}: ${messagePreview(message)}`}\n      className=\"flex w-fit items-center gap-1 text-meta text-muted-foreground hover:text-foreground\"\n    >\n      {link.label}\n      <ExternalLink size={12} aria-hidden />\n    </a>\n  );\n}\n"],"names":["messagePreviewShowsAll","jsx","ActivityItem","messagePreview","Bell","jsxs","Fragment","Badge","Txt","ExternalLink"],"mappings":";;;;;;;;;AAoBA,MAAM,qBAAA,GAA+D;AAAA,EACnE,MAAA,EAAQ,KAAA;AAAA,EACR,IAAA,EAAM,QAAA;AAAA,EACN,MAAA,EAAQ;AACV,CAAA;AAEO,SAAS,oBAAA,CAAqB;AAAA,EACnC,KAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,cAAA;AAAA,EACR,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAA8B;AAC5B,EAAA,MAAM,gBAAA,GAAmBA,sCAAuB,OAAO,CAAA;AACvD,EAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,QAAA,IAAY,MAAA,IAAU,OAAO,CAAA;AAEvD,EAAA,uBACEC,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA,EAAQC,8BAAe,OAAO,CAAA;AAAA,MAC9B,UAAA,EAAW,MAAA;AAAA,MACX,MAAM,IAAA,oBAAQF,cAAA,CAACG,oBAAK,SAAA,EAAU,yBAAA,EAA0B,eAAW,IAAA,EAAC,CAAA;AAAA,MACpE,MAAA,EACE,6BACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,QAAA,oBACCL,cAAA,CAACM,eAAM,IAAA,EAAK,IAAA,EAAK,SAAS,qBAAA,CAAsB,QAAQ,GACrD,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,QAED,MAAA,oBAAUN,cAAA,CAACM,WAAA,EAAA,EAAM,IAAA,EAAK,MAAM,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,QACnC,OAAA,oBAAWF,eAAA,CAACE,WAAA,EAAA,EAAM,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,UAAQ;AAAA,SAAA,EAAQ;AAAA,OAAA,EAChD,CAAA;AAAA,MAGJ,WAAA;AAAA,MACA,yBAAA,EAAyB,KAAA;AAAA,MACzB,YAAA,EAAY,iBAAiB,KAAK,CAAA,CAAA;AAAA,MAEhC,YAAC,gBAAA,IAAoB,IAAA,qBACrBF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,qBAAA,EACZ,QAAA,EAAA;AAAA,QAAA,OAAA,mCACEG,OAAA,EAAA,EAAI,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAU,mCAC9B,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,QAED,IAAA,oBAAQP,cAAA,CAAC,gBAAA,EAAA,EAAiB,IAAA,EAAY,OAAA,EAAkB;AAAA,OAAA,EAC3D;AAAA;AAAA,GAEJ;AAEJ;AAEA,SAAS,gBAAA,CAAiB;AAAA,EACxB,IAAA;AAAA,EACA;AACF,CAAA,EAGG;AACD,EAAA,uBACEI,eAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,MAAM,IAAA,CAAK,IAAA;AAAA,MACX,MAAA,EAAO,QAAA;AAAA,MACP,GAAA,EAAI,YAAA;AAAA,MACJ,cAAY,CAAA,EAAG,IAAA,CAAK,KAAK,CAAA,EAAA,EAAKF,6BAAA,CAAe,OAAO,CAAC,CAAA,CAAA;AAAA,MACrD,SAAA,EAAU,qFAAA;AAAA,MAET,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,KAAA;AAAA,wBACNF,cAAA,CAACQ,wBAAA,EAAA,EAAa,IAAA,EAAM,EAAA,EAAI,eAAW,IAAA,EAAC;AAAA;AAAA;AAAA,GACtC;AAEJ;;;;"}