@mastra/playground-ui 36.0.0 → 36.1.0-alpha.1

package/dist/scatter-plot-chart-BDRQ77OX.js

@@ -0,0 +1,162 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ResponsiveContainer, ScatterChart, CartesianGrid, XAxis, YAxis, ZAxis, Tooltip, Scatter } from 'recharts';
+import { C as Colors } from './spacings-0Zbr65EW.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+function ScatterPlotChartTooltip({
+  active,
+  payload,
+  xKey,
+  yKey,
+  nameKey,
+  formatX,
+  formatY,
+  formatTooltipLabel
+}) {
+  const point = payload?.[0]?.payload;
+  if (!active || !point) return null;
+  const label = formatTooltipLabel?.(point) ?? (nameKey ? point[nameKey] : void 0);
+  const xValue = point[xKey];
+  const yValue = point[yKey];
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border1 bg-surface2 px-3 py-2 text-xs shadow-lg", children: [
+    label !== void 0 && /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium text-icon6", children: String(label) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-1 text-icon2", children: [
+      /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-neutral3", children: "X:" }),
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: formatX ? formatX(xValue, point) : String(xValue) })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-neutral3", children: "Y:" }),
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: formatY ? formatY(yValue, point) : String(yValue) })
+      ] })
+    ] })
+  ] });
+}
+
+const LABEL_COLOR = "#a1a1aa";
+const DEFAULT_POINT_SIZE = 48;
+const CHART_MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };
+function getScatterPlotPointColor(point, colorKey) {
+  const color = colorKey ? point[colorKey] : void 0;
+  return typeof color === "string" && color.length > 0 ? color : Colors.accent3;
+}
+function getScatterPlotClickedPoint(payload) {
+  return payload?.payload;
+}
+function formatScatterPlotAxisTick(value, formatter) {
+  return (formatter?.(value, {}) ?? String(value)).replace(/\s+/g, " ");
+}
+function ScatterPlotChart({
+  data,
+  xKey,
+  yKey,
+  nameKey,
+  colorKey,
+  height = 210,
+  xLabel,
+  yLabel,
+  xDomain,
+  yDomain,
+  formatX,
+  formatY,
+  formatTooltipLabel,
+  onPointClick,
+  className
+}) {
+  const isClickable = typeof onPointClick === "function";
+  const fillsContainer = height === "100%";
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-md border border-border1 text-ui-sm text-neutral3",
+          className
+        ),
+        style: { height },
+        children: "No data to display"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(fillsContainer && "flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx("div", { className: cn(fillsContainer && "min-h-0 flex-1"), style: { height: fillsContainer ? void 0 : height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ScatterChart, { data, margin: CHART_MARGIN, children: [
+    /* @__PURE__ */ jsx(CartesianGrid, { stroke: Colors.neutral3, strokeDasharray: "4 4", strokeOpacity: 0.18, vertical: false }),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: xKey,
+        name: xLabel,
+        type: "number",
+        tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+        tickLine: false,
+        axisLine: false,
+        domain: xDomain,
+        tickFormatter: (value) => formatScatterPlotAxisTick(value, formatX)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        dataKey: yKey,
+        name: yLabel,
+        type: "number",
+        tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+        tickLine: false,
+        axisLine: false,
+        width: 44,
+        domain: yDomain,
+        tickFormatter: (value) => formatScatterPlotAxisTick(value, formatY)
+      }
+    ),
+    /* @__PURE__ */ jsx(ZAxis, { range: [DEFAULT_POINT_SIZE, DEFAULT_POINT_SIZE] }),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        cursor: { stroke: Colors.neutral3, strokeOpacity: 0.16 },
+        content: /* @__PURE__ */ jsx(
+          ScatterPlotChartTooltip,
+          {
+            xKey,
+            yKey,
+            nameKey,
+            formatX,
+            formatY,
+            formatTooltipLabel
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Scatter,
+      {
+        data,
+        fill: Colors.accent3,
+        shape: (props) => {
+          const point = props.payload ?? {};
+          const cx = props.cx;
+          const cy = props.cy;
+          if (typeof cx !== "number" || typeof cy !== "number") return /* @__PURE__ */ jsx("g", {});
+          return /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 4,
+              fill: getScatterPlotPointColor(point, colorKey),
+              opacity: 0.9,
+              style: { cursor: isClickable ? "pointer" : void 0 }
+            }
+          );
+        },
+        onClick: (_, payload) => {
+          const point = getScatterPlotClickedPoint(payload);
+          if (point) onPointClick?.(point);
+        }
+      }
+    )
+  ] }) }) }) });
+}
+
+export { ScatterPlotChart as S, ScatterPlotChartTooltip as a, getScatterPlotPointColor as b, getScatterPlotClickedPoint as g };
+//# sourceMappingURL=scatter-plot-chart-BDRQ77OX.js.map

package/dist/scatter-plot-chart-BDRQ77OX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatter-plot-chart-BDRQ77OX.js","sources":["../src/ds/components/ScatterPlotChart/scatter-plot-chart-tooltip.tsx","../src/ds/components/ScatterPlotChart/scatter-plot-chart.tsx"],"sourcesContent":["import type { ScatterPlotChartFormatter } from './scatter-plot-chart';\n\ntype ScatterTooltipPayload = Array<{\n  color?: string;\n  payload?: Record<string, unknown>;\n}>;\n\nexport function ScatterPlotChartTooltip({\n  active,\n  payload,\n  xKey,\n  yKey,\n  nameKey,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n}: {\n  active?: boolean;\n  payload?: ScatterTooltipPayload;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n}) {\n  const point = payload?.[0]?.payload;\n  if (!active || !point) return null;\n\n  const label = formatTooltipLabel?.(point) ?? (nameKey ? point[nameKey] : undefined);\n  const xValue = point[xKey];\n  const yValue = point[yKey];\n\n  return (\n    <div className=\"rounded-md border border-border1 bg-surface2 px-3 py-2 text-xs shadow-lg\">\n      {label !== undefined && <p className=\"mb-1 font-medium text-icon6\">{String(label)}</p>}\n      <div className=\"grid gap-1 text-icon2\">\n        <p>\n          <span className=\"text-neutral3\">X:</span>{' '}\n          <span className=\"font-mono\">{formatX ? formatX(xValue, point) : String(xValue)}</span>\n        </p>\n        <p>\n          <span className=\"text-neutral3\">Y:</span>{' '}\n          <span className=\"font-mono\">{formatY ? formatY(yValue, point) : String(yValue)}</span>\n        </p>\n      </div>\n    </div>\n  );\n}\n","import { CartesianGrid, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis, ZAxis } from 'recharts';\nimport { ScatterPlotChartTooltip } from './scatter-plot-chart-tooltip';\nimport { Colors } from '@/ds/tokens';\nimport { cn } from '@/lib/utils';\n\nconst LABEL_COLOR = '#a1a1aa';\nconst DEFAULT_POINT_SIZE = 48;\nconst CHART_MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };\n\nexport type ScatterPlotChartDomain = [number | 'auto', number | 'auto'];\nexport type ScatterPlotChartFormatter = (value: unknown, point: Record<string, unknown>) => string;\nexport type ScatterPlotChartPointClickHandler = (point: Record<string, unknown>) => void;\n\nexport type ScatterPlotChartProps = {\n  data: Array<Record<string, unknown>>;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  colorKey?: string;\n  height?: React.CSSProperties['height'];\n  xLabel?: string;\n  yLabel?: string;\n  xDomain?: ScatterPlotChartDomain;\n  yDomain?: ScatterPlotChartDomain;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n  onPointClick?: ScatterPlotChartPointClickHandler;\n  className?: string;\n};\n\nexport function getScatterPlotPointColor(point: Record<string, unknown>, colorKey?: string) {\n  const color = colorKey ? point[colorKey] : undefined;\n  return typeof color === 'string' && color.length > 0 ? color : Colors.accent3;\n}\n\nexport function getScatterPlotClickedPoint(payload: unknown) {\n  return (payload as { payload?: Record<string, unknown> } | undefined)?.payload;\n}\n\nexport function formatScatterPlotAxisTick(value: unknown, formatter?: ScatterPlotChartFormatter) {\n  return (formatter?.(value, {}) ?? String(value)).replace(/\\s+/g, '\\u00A0');\n}\n\nexport function ScatterPlotChart({\n  data,\n  xKey,\n  yKey,\n  nameKey,\n  colorKey,\n  height = 210,\n  xLabel,\n  yLabel,\n  xDomain,\n  yDomain,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n  onPointClick,\n  className,\n}: ScatterPlotChartProps) {\n  const isClickable = typeof onPointClick === 'function';\n  const fillsContainer = height === '100%';\n\n  if (data.length === 0) {\n    return (\n      <div\n        className={cn(\n          'flex items-center justify-center rounded-md border border-border1 text-ui-sm text-neutral3',\n          className,\n        )}\n        style={{ height }}\n      >\n        No data to display\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(fillsContainer && 'flex h-full min-h-0 flex-col', className)}>\n      <div className={cn(fillsContainer && 'min-h-0 flex-1')} style={{ height: fillsContainer ? undefined : height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ScatterChart data={data} margin={CHART_MARGIN}>\n            <CartesianGrid stroke={Colors.neutral3} strokeDasharray=\"4 4\" strokeOpacity={0.18} vertical={false} />\n            <XAxis\n              dataKey={xKey}\n              name={xLabel}\n              type=\"number\"\n              tick={{ fontSize: 10, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              domain={xDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatX)}\n            />\n            <YAxis\n              dataKey={yKey}\n              name={yLabel}\n              type=\"number\"\n              tick={{ fontSize: 10, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width={44}\n              domain={yDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatY)}\n            />\n            <ZAxis range={[DEFAULT_POINT_SIZE, DEFAULT_POINT_SIZE]} />\n            <Tooltip\n              cursor={{ stroke: Colors.neutral3, strokeOpacity: 0.16 }}\n              content={\n                <ScatterPlotChartTooltip\n                  xKey={xKey}\n                  yKey={yKey}\n                  nameKey={nameKey}\n                  formatX={formatX}\n                  formatY={formatY}\n                  formatTooltipLabel={formatTooltipLabel}\n                />\n              }\n            />\n            <Scatter\n              data={data}\n              fill={Colors.accent3}\n              shape={(props: unknown) => {\n                const point = (props as { payload?: Record<string, unknown> }).payload ?? {};\n                const cx = (props as { cx?: number }).cx;\n                const cy = (props as { cy?: number }).cy;\n                if (typeof cx !== 'number' || typeof cy !== 'number') return <g />;\n                return (\n                  <circle\n                    cx={cx}\n                    cy={cy}\n                    r={4}\n                    fill={getScatterPlotPointColor(point, colorKey)}\n                    opacity={0.9}\n                    style={{ cursor: isClickable ? 'pointer' : undefined }}\n                  />\n                );\n              }}\n              onClick={(_: unknown, payload: unknown) => {\n                const point = getScatterPlotClickedPoint(payload);\n                if (point) onPointClick?.(point);\n              }}\n            />\n          </ScatterChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/scatter-plot-chart-MLvMlaxH.cjs

@@ -0,0 +1,167 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const recharts = require('recharts');
+const spacings = require('./spacings-BP8L49kn.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function ScatterPlotChartTooltip({
+  active,
+  payload,
+  xKey,
+  yKey,
+  nameKey,
+  formatX,
+  formatY,
+  formatTooltipLabel
+}) {
+  const point = payload?.[0]?.payload;
+  if (!active || !point) return null;
+  const label = formatTooltipLabel?.(point) ?? (nameKey ? point[nameKey] : void 0);
+  const xValue = point[xKey];
+  const yValue = point[yKey];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border1 bg-surface2 px-3 py-2 text-xs shadow-lg", children: [
+    label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-medium text-icon6", children: String(label) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1 text-icon2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral3", children: "X:" }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: formatX ? formatX(xValue, point) : String(xValue) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral3", children: "Y:" }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: formatY ? formatY(yValue, point) : String(yValue) })
+      ] })
+    ] })
+  ] });
+}
+
+const LABEL_COLOR = "#a1a1aa";
+const DEFAULT_POINT_SIZE = 48;
+const CHART_MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };
+function getScatterPlotPointColor(point, colorKey) {
+  const color = colorKey ? point[colorKey] : void 0;
+  return typeof color === "string" && color.length > 0 ? color : spacings.Colors.accent3;
+}
+function getScatterPlotClickedPoint(payload) {
+  return payload?.payload;
+}
+function formatScatterPlotAxisTick(value, formatter) {
+  return (formatter?.(value, {}) ?? String(value)).replace(/\s+/g, " ");
+}
+function ScatterPlotChart({
+  data,
+  xKey,
+  yKey,
+  nameKey,
+  colorKey,
+  height = 210,
+  xLabel,
+  yLabel,
+  xDomain,
+  yDomain,
+  formatX,
+  formatY,
+  formatTooltipLabel,
+  onPointClick,
+  className
+}) {
+  const isClickable = typeof onPointClick === "function";
+  const fillsContainer = height === "100%";
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn(
+          "flex items-center justify-center rounded-md border border-border1 text-ui-sm text-neutral3",
+          className
+        ),
+        style: { height },
+        children: "No data to display"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(fillsContainer && "flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(fillsContainer && "min-h-0 flex-1"), style: { height: fillsContainer ? void 0 : height }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { data, margin: CHART_MARGIN, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { stroke: spacings.Colors.neutral3, strokeDasharray: "4 4", strokeOpacity: 0.18, vertical: false }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.XAxis,
+      {
+        dataKey: xKey,
+        name: xLabel,
+        type: "number",
+        tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+        tickLine: false,
+        axisLine: false,
+        domain: xDomain,
+        tickFormatter: (value) => formatScatterPlotAxisTick(value, formatX)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.YAxis,
+      {
+        dataKey: yKey,
+        name: yLabel,
+        type: "number",
+        tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+        tickLine: false,
+        axisLine: false,
+        width: 44,
+        domain: yDomain,
+        tickFormatter: (value) => formatScatterPlotAxisTick(value, formatY)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.ZAxis, { range: [DEFAULT_POINT_SIZE, DEFAULT_POINT_SIZE] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Tooltip,
+      {
+        cursor: { stroke: spacings.Colors.neutral3, strokeOpacity: 0.16 },
+        content: /* @__PURE__ */ jsxRuntime.jsx(
+          ScatterPlotChartTooltip,
+          {
+            xKey,
+            yKey,
+            nameKey,
+            formatX,
+            formatY,
+            formatTooltipLabel
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Scatter,
+      {
+        data,
+        fill: spacings.Colors.accent3,
+        shape: (props) => {
+          const point = props.payload ?? {};
+          const cx = props.cx;
+          const cy = props.cy;
+          if (typeof cx !== "number" || typeof cy !== "number") return /* @__PURE__ */ jsxRuntime.jsx("g", {});
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 4,
+              fill: getScatterPlotPointColor(point, colorKey),
+              opacity: 0.9,
+              style: { cursor: isClickable ? "pointer" : void 0 }
+            }
+          );
+        },
+        onClick: (_, payload) => {
+          const point = getScatterPlotClickedPoint(payload);
+          if (point) onPointClick?.(point);
+        }
+      }
+    )
+  ] }) }) }) });
+}
+
+exports.ScatterPlotChart = ScatterPlotChart;
+exports.ScatterPlotChartTooltip = ScatterPlotChartTooltip;
+exports.getScatterPlotClickedPoint = getScatterPlotClickedPoint;
+exports.getScatterPlotPointColor = getScatterPlotPointColor;
+//# sourceMappingURL=scatter-plot-chart-MLvMlaxH.cjs.map

package/dist/scatter-plot-chart-MLvMlaxH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatter-plot-chart-MLvMlaxH.cjs","sources":["../src/ds/components/ScatterPlotChart/scatter-plot-chart-tooltip.tsx","../src/ds/components/ScatterPlotChart/scatter-plot-chart.tsx"],"sourcesContent":["import type { ScatterPlotChartFormatter } from './scatter-plot-chart';\n\ntype ScatterTooltipPayload = Array<{\n  color?: string;\n  payload?: Record<string, unknown>;\n}>;\n\nexport function ScatterPlotChartTooltip({\n  active,\n  payload,\n  xKey,\n  yKey,\n  nameKey,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n}: {\n  active?: boolean;\n  payload?: ScatterTooltipPayload;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n}) {\n  const point = payload?.[0]?.payload;\n  if (!active || !point) return null;\n\n  const label = formatTooltipLabel?.(point) ?? (nameKey ? point[nameKey] : undefined);\n  const xValue = point[xKey];\n  const yValue = point[yKey];\n\n  return (\n    <div className=\"rounded-md border border-border1 bg-surface2 px-3 py-2 text-xs shadow-lg\">\n      {label !== undefined && <p className=\"mb-1 font-medium text-icon6\">{String(label)}</p>}\n      <div className=\"grid gap-1 text-icon2\">\n        <p>\n          <span className=\"text-neutral3\">X:</span>{' '}\n          <span className=\"font-mono\">{formatX ? formatX(xValue, point) : String(xValue)}</span>\n        </p>\n        <p>\n          <span className=\"text-neutral3\">Y:</span>{' '}\n          <span className=\"font-mono\">{formatY ? formatY(yValue, point) : String(yValue)}</span>\n        </p>\n      </div>\n    </div>\n  );\n}\n","import { CartesianGrid, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis, ZAxis } from 'recharts';\nimport { ScatterPlotChartTooltip } from './scatter-plot-chart-tooltip';\nimport { Colors } from '@/ds/tokens';\nimport { cn } from '@/lib/utils';\n\nconst LABEL_COLOR = '#a1a1aa';\nconst DEFAULT_POINT_SIZE = 48;\nconst CHART_MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };\n\nexport type ScatterPlotChartDomain = [number | 'auto', number | 'auto'];\nexport type ScatterPlotChartFormatter = (value: unknown, point: Record<string, unknown>) => string;\nexport type ScatterPlotChartPointClickHandler = (point: Record<string, unknown>) => void;\n\nexport type ScatterPlotChartProps = {\n  data: Array<Record<string, unknown>>;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  colorKey?: string;\n  height?: React.CSSProperties['height'];\n  xLabel?: string;\n  yLabel?: string;\n  xDomain?: ScatterPlotChartDomain;\n  yDomain?: ScatterPlotChartDomain;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n  onPointClick?: ScatterPlotChartPointClickHandler;\n  className?: string;\n};\n\nexport function getScatterPlotPointColor(point: Record<string, unknown>, colorKey?: string) {\n  const color = colorKey ? point[colorKey] : undefined;\n  return typeof color === 'string' && color.length > 0 ? color : Colors.accent3;\n}\n\nexport function getScatterPlotClickedPoint(payload: unknown) {\n  return (payload as { payload?: Record<string, unknown> } | undefined)?.payload;\n}\n\nexport function formatScatterPlotAxisTick(value: unknown, formatter?: ScatterPlotChartFormatter) {\n  return (formatter?.(value, {}) ?? String(value)).replace(/\\s+/g, '\\u00A0');\n}\n\nexport function ScatterPlotChart({\n  data,\n  xKey,\n  yKey,\n  nameKey,\n  colorKey,\n  height = 210,\n  xLabel,\n  yLabel,\n  xDomain,\n  yDomain,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n  onPointClick,\n  className,\n}: ScatterPlotChartProps) {\n  const isClickable = typeof onPointClick === 'function';\n  const fillsContainer = height === '100%';\n\n  if (data.length === 0) {\n    return (\n      <div\n        className={cn(\n          'flex items-center justify-center rounded-md border border-border1 text-ui-sm text-neutral3',\n          className,\n        )}\n        style={{ height }}\n      >\n        No data to display\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(fillsContainer && 'flex h-full min-h-0 flex-col', className)}>\n      <div className={cn(fillsContainer && 'min-h-0 flex-1')} style={{ height: fillsContainer ? undefined : height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ScatterChart data={data} margin={CHART_MARGIN}>\n            <CartesianGrid stroke={Colors.neutral3} strokeDasharray=\"4 4\" strokeOpacity={0.18} vertical={false} />\n            <XAxis\n              dataKey={xKey}\n              name={xLabel}\n              type=\"number\"\n              tick={{ fontSize: 10, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              domain={xDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatX)}\n            />\n            <YAxis\n              dataKey={yKey}\n              name={yLabel}\n              type=\"number\"\n              tick={{ fontSize: 10, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width={44}\n              domain={yDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatY)}\n            />\n            <ZAxis range={[DEFAULT_POINT_SIZE, DEFAULT_POINT_SIZE]} />\n            <Tooltip\n              cursor={{ stroke: Colors.neutral3, strokeOpacity: 0.16 }}\n              content={\n                <ScatterPlotChartTooltip\n                  xKey={xKey}\n                  yKey={yKey}\n                  nameKey={nameKey}\n                  formatX={formatX}\n                  formatY={formatY}\n                  formatTooltipLabel={formatTooltipLabel}\n                />\n              }\n            />\n            <Scatter\n              data={data}\n              fill={Colors.accent3}\n              shape={(props: unknown) => {\n                const point = (props as { payload?: Record<string, unknown> }).payload ?? {};\n                const cx = (props as { cx?: number }).cx;\n                const cy = (props as { cy?: number }).cy;\n                if (typeof cx !== 'number' || typeof cy !== 'number') return <g />;\n                return (\n                  <circle\n                    cx={cx}\n                    cy={cy}\n                    r={4}\n                    fill={getScatterPlotPointColor(point, colorKey)}\n                    opacity={0.9}\n                    style={{ cursor: isClickable ? 'pointer' : undefined }}\n                  />\n                );\n              }}\n              onClick={(_: unknown, payload: unknown) => {\n                const point = getScatterPlotClickedPoint(payload);\n                if (point) onPointClick?.(point);\n              }}\n            />\n          </ScatterChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","Colors","cn","ResponsiveContainer","ScatterChart","CartesianGrid","XAxis","YAxis","ZAxis","Tooltip","Scatter"],"mappings":"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"}

package/dist/src/domains/logs/hooks/use-logs.d.ts

@@ -13,5 +13,10 @@ interface UseLogsReturn {
 export interface LogsFilters {
     filters?: ListLogsArgs['filters'];
 }
+export declare function getLogsRefetchInterval(query: {
+    state: {
+        error: unknown;
+    };
+}): false | 10000;
 export declare const useLogs: (props?: LogsFilters) => UseLogsReturn;
 export {};

package/dist/src/ds/components/ScatterPlotChart/index.d.ts

@@ -0,0 +1,2 @@
+export { ScatterPlotChart, getScatterPlotClickedPoint, getScatterPlotPointColor, type ScatterPlotChartDomain, type ScatterPlotChartFormatter, type ScatterPlotChartPointClickHandler, type ScatterPlotChartProps, } from './scatter-plot-chart';
+export { ScatterPlotChartTooltip } from './scatter-plot-chart-tooltip';

package/dist/src/ds/components/ScatterPlotChart/scatter-plot-chart-tooltip.d.ts

@@ -0,0 +1,16 @@
+import { ScatterPlotChartFormatter } from './scatter-plot-chart';
+type ScatterTooltipPayload = Array<{
+    color?: string;
+    payload?: Record<string, unknown>;
+}>;
+export declare function ScatterPlotChartTooltip({ active, payload, xKey, yKey, nameKey, formatX, formatY, formatTooltipLabel, }: {
+    active?: boolean;
+    payload?: ScatterTooltipPayload;
+    xKey: string;
+    yKey: string;
+    nameKey?: string;
+    formatX?: ScatterPlotChartFormatter;
+    formatY?: ScatterPlotChartFormatter;
+    formatTooltipLabel?: (point: Record<string, unknown>) => string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/ds/components/ScatterPlotChart/scatter-plot-chart.d.ts

@@ -0,0 +1,24 @@
+export type ScatterPlotChartDomain = [number | 'auto', number | 'auto'];
+export type ScatterPlotChartFormatter = (value: unknown, point: Record<string, unknown>) => string;
+export type ScatterPlotChartPointClickHandler = (point: Record<string, unknown>) => void;
+export type ScatterPlotChartProps = {
+    data: Array<Record<string, unknown>>;
+    xKey: string;
+    yKey: string;
+    nameKey?: string;
+    colorKey?: string;
+    height?: React.CSSProperties['height'];
+    xLabel?: string;
+    yLabel?: string;
+    xDomain?: ScatterPlotChartDomain;
+    yDomain?: ScatterPlotChartDomain;
+    formatX?: ScatterPlotChartFormatter;
+    formatY?: ScatterPlotChartFormatter;
+    formatTooltipLabel?: (point: Record<string, unknown>) => string;
+    onPointClick?: ScatterPlotChartPointClickHandler;
+    className?: string;
+};
+export declare function getScatterPlotPointColor(point: Record<string, unknown>, colorKey?: string): string;
+export declare function getScatterPlotClickedPoint(payload: unknown): Record<string, unknown> | undefined;
+export declare function formatScatterPlotAxisTick(value: unknown, formatter?: ScatterPlotChartFormatter): string;
+export declare function ScatterPlotChart({ data, xKey, yKey, nameKey, colorKey, height, xLabel, yLabel, xDomain, yDomain, formatX, formatY, formatTooltipLabel, onPointClick, className, }: ScatterPlotChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/ScatterPlotChart/scatter-plot-chart.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ScatterPlotChart } from './scatter-plot-chart';
+declare const meta: Meta<typeof ScatterPlotChart>;
+export default meta;
+type Story = StoryObj<typeof ScatterPlotChart>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const Clickable: Story;
+export declare const WithFixedDomains: Story;
+export declare const FillsContainer: Story;
+export declare const CustomTooltipLabel: Story;

package/dist/src/ds/components/ThreadList/index.d.ts

@@ -0,0 +1 @@
+export * from './thread-list';

package/dist/src/ds/components/ThreadList/thread-list.d.ts

@@ -0,0 +1,39 @@
+import { ElementType, MouseEvent, ReactNode } from 'react';
+export interface ThreadListProps {
+    children: ReactNode;
+    'aria-label'?: string;
+    /**
+     * When true, drops the standalone block chrome (background, border, rounded corners, inset)
+     * so the list can render flush inside an outer container without nesting a second box.
+     */
+    embedded?: boolean;
+}
+export declare const ThreadList: ({ children, "aria-label": ariaLabel, embedded }: ThreadListProps) => import("react/jsx-runtime").JSX.Element;
+export interface ThreadListNewItemProps {
+    as?: ElementType;
+    href?: string;
+    to?: string;
+    children: ReactNode;
+}
+export declare const ThreadListNewItem: ({ as, href, to, children }: ThreadListNewItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThreadListSeparator: () => import("react/jsx-runtime").JSX.Element;
+export interface ThreadListItemsProps {
+    children: ReactNode;
+}
+export declare const ThreadListItems: ({ children }: ThreadListItemsProps) => import("react/jsx-runtime").JSX.Element;
+export interface ThreadListItemProps {
+    as?: ElementType;
+    href?: string;
+    to?: string;
+    isActive?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onDelete?: () => void;
+    deleteLabel?: string;
+    className?: string;
+    children: ReactNode;
+}
+export declare const ThreadListItem: ({ as, href, to, isActive, onClick, onDelete, deleteLabel, className, children, }: ThreadListItemProps) => import("react/jsx-runtime").JSX.Element;
+export interface ThreadListEmptyProps {
+    children: ReactNode;
+}
+export declare const ThreadListEmpty: ({ children }: ThreadListEmptyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ee/index.d.ts

@@ -0,0 +1,2 @@
+export * from './topics';
+export * from './signals';

package/dist/src/ee/signals/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './signal-details-page';
+export * from './signals-overview-page';

package/dist/src/ee/signals/components/signal-details-page.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { TopicTraceDetailsPanel } from '../../topics';
+import { Signal, SignalCluster } from '../types';
+export declare const SignalTraceDetailsPanel: typeof TopicTraceDetailsPanel;
+type SignalTab = 'trace-list' | 'chart';
+export declare function getSignalName(signalId: string): string;
+interface SignalClusterSidebarProps {
+    signal: Signal;
+    selectedClusterIds: string[];
+    onClusterSelect: (clusterId: string) => void;
+    multiple?: boolean;
+    ariaLabel?: string;
+}
+export declare function SignalClusterSidebar({ signal, selectedClusterIds, onClusterSelect, multiple, ariaLabel, }: SignalClusterSidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SignalTraceListTab({ cluster, selectedTraceId, onTraceSelect, }: {
+    cluster: SignalCluster;
+    selectedTraceId: string | null;
+    onTraceSelect: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+interface SignalChartTabProps {
+    signal: Signal;
+    selectedClusterIds: string[];
+    onClusterToggle: (clusterId: string) => void;
+}
+export declare function SignalChartTab({ signal, selectedClusterIds, onClusterToggle }: SignalChartTabProps): import("react/jsx-runtime").JSX.Element;
+interface SignalClusterTabsProps {
+    signal: Signal;
+    selectedCluster: SignalCluster;
+    selectedTraceId: string | null;
+    selectedChartClusterIds: string[];
+    activeTab: SignalTab;
+    onActiveTabChange: (tab: SignalTab) => void;
+    onClusterSelect: (clusterId: string) => void;
+    onChartClusterToggle: (clusterId: string) => void;
+    onTraceSelect: () => void;
+}
+export declare function SignalClusterTabs({ signal, selectedCluster, selectedTraceId, selectedChartClusterIds, activeTab, onActiveTabChange, onClusterSelect, onChartClusterToggle, onTraceSelect, }: SignalClusterTabsProps): import("react/jsx-runtime").JSX.Element;
+export interface SignalDetailsPageProps {
+    signalId?: string;
+    selectedTraceId: string | null;
+    tracePanel?: ReactNode;
+    onTraceSelect: (signalId: string, traceId: string) => void;
+}
+export declare function SignalDetailsPage({ signalId, selectedTraceId, tracePanel, onTraceSelect }: SignalDetailsPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ee/signals/components/signals-overview-page.d.ts

@@ -0,0 +1,16 @@
+import { Signal, SignalCluster } from '../types';
+interface SignalClusterCardProps {
+    cluster: SignalCluster;
+    totalTraceCount: number;
+}
+export declare function SignalClusterCard({ cluster, totalTraceCount }: SignalClusterCardProps): import("react/jsx-runtime").JSX.Element;
+interface SignalSectionProps {
+    signal: Signal;
+    onSeeDetails: (signal: Signal) => void;
+}
+export declare function SignalSection({ signal, onSeeDetails }: SignalSectionProps): import("react/jsx-runtime").JSX.Element;
+export interface SignalsOverviewPageProps {
+    onSignalSelect: (signal: Signal) => void;
+}
+export declare function SignalsOverviewPage({ onSignalSelect }: SignalsOverviewPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ee/signals/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './signals-chart-data';
+export * from './signals-data';
+export * from './types';

package/dist/src/ee/signals/signals-chart-data.d.ts

@@ -0,0 +1,10 @@
+import { SignalCluster } from './types';
+export type SignalChartPoint = {
+    id: string;
+    name: string;
+    cluster: string;
+    duration: number;
+    spans: number;
+    color: string;
+};
+export declare function getSignalChartData(clusters: SignalCluster[]): SignalChartPoint[];

package/dist/src/ee/signals/signals-data.d.ts

@@ -0,0 +1,2 @@
+import { Signal } from './types';
+export declare const signals: Signal[];

package/dist/src/ee/signals/types.d.ts

@@ -0,0 +1,13 @@
+import { TopicTraceSummary } from '../topics';
+export type SignalCluster = {
+    id: string;
+    name: string;
+    description: string;
+    traceSummaries: TopicTraceSummary[];
+};
+export type Signal = {
+    id: string;
+    name: string;
+    description: string;
+    clusters: SignalCluster[];
+};

package/dist/src/ee/topics/components/index.d.ts

@@ -0,0 +1,6 @@
+export { TopicsLayout } from './topics-layout';
+export type { TopicsLayoutProps } from './topics-layout';
+export { TopicTraceSummaryList } from './topic-trace-summary-list';
+export type { TopicTraceSummaryListProps } from './topic-trace-summary-list';
+export { TopicTraceDetailsPanel } from './topic-trace-details-panel';
+export type { TopicTraceDetailsPanelProps } from './topic-trace-details-panel';

package/dist/src/ee/topics/components/topic-trace-details-panel.d.ts

@@ -0,0 +1,7 @@
+export interface TopicTraceDetailsPanelProps {
+    traceId: string | null;
+    selectedSpanId?: string | null;
+    onSpanSelect?: (spanId: string | undefined) => void;
+    onClose: () => void;
+}
+export declare function TopicTraceDetailsPanel({ traceId, selectedSpanId, onSpanSelect, onClose, }: TopicTraceDetailsPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/ee/topics/components/topic-trace-summary-list.d.ts

@@ -0,0 +1,8 @@
+import { TopicTraceSummary } from '../types';
+export interface TopicTraceSummaryListProps {
+    traces: TopicTraceSummary[];
+    selectedTraceId?: string | null;
+    onTraceSelect: (trace: TopicTraceSummary) => void;
+    pageSize?: number;
+}
+export declare function TopicTraceSummaryList({ traces, selectedTraceId, onTraceSelect, pageSize, }: TopicTraceSummaryListProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ee/topics/components/topics-layout.d.ts

@@ -0,0 +1,7 @@
+export interface TopicsLayoutProps {
+    sidebar?: React.ReactNode;
+    children?: React.ReactNode;
+    tracePanel?: React.ReactNode;
+    contentPadding?: boolean;
+}
+export declare function TopicsLayout({ sidebar, children, tracePanel, contentPadding }: TopicsLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ee/topics/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './utils';
+export type * from './types';