@mastra/playground-ui 68.0.0 → 69.0.0-alpha.0

package/dist/ee/signals/settings/signal-definition-form-dialog.cjs.js

@@ -1,11 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
-const require_input = require("../../../input-2hRXcZIu.cjs");
-const require_Dialog = require("../../../Dialog-BvWF9HE-.cjs");
-const require_Notice = require("../../../Notice-JZ7SW7q6.cjs");
+const require_Dialog = require("../../../Dialog-Duy3M1ny.cjs");
 const require_components_Field = require("../../../components/Field.cjs.js");
 const require_components_Form = require("../../../components/Form.cjs.js");
+const require_input = require("../../../input-BpnUsQSt.cjs");
+const require_Notice = require("../../../Notice-B_KjMmA6.cjs");
 const require_components_Textarea = require("../../../components/Textarea.cjs.js");
+const require_Txt = require("../../../Txt-_00wWxTd.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ee/signals/settings/signal-definition-form-dialog.tsx

package/dist/ee/signals/settings/signal-definition-form-dialog.es.js

@@ -1,10 +1,10 @@
-import { t as Txt } from "../../../Txt-BM6TVV_c.js";
-import { t as Input } from "../../../input-0l1uzOBZ.js";
-import { a as DialogContent, c as DialogHeader, d as DialogTitle, n as DialogBody, o as DialogDescription, p as DialogAction, r as DialogCancel, s as DialogFooter, t as Dialog } from "../../../Dialog-DaWtxwd9.js";
-import { t as Notice } from "../../../Notice-C-8oOZZF.js";
+import { a as DialogContent, c as DialogHeader, d as DialogTitle, n as DialogBody, o as DialogDescription, p as DialogAction, r as DialogCancel, s as DialogFooter, t as Dialog } from "../../../Dialog-OBPu3rl2.js";
 import { Field, FieldDescription, FieldError, FieldLabel } from "../../../components/Field.es.js";
 import { Form } from "../../../components/Form.es.js";
+import { t as Input } from "../../../input-Cyit5ZSc.js";
+import { t as Notice } from "../../../Notice-OSlG42lD.js";
 import { Textarea } from "../../../components/Textarea.es.js";
+import { t as Txt } from "../../../Txt-5efBsb2p.js";
 import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/ee/signals/settings/signal-definition-form-dialog.tsx

package/dist/ee/signals/settings/trace-signal-settings.cjs.js

@@ -1,14 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Button = require("../../../Button-DLcMcuUL.cjs");
-const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
-const require_Badge = require("../../../Badge-DZ6r6bcw.cjs");
-const require_Notice = require("../../../Notice-JZ7SW7q6.cjs");
-const require_components_Skeleton = require("../../../components/Skeleton.cjs.js");
-const require_components_Switch = require("../../../components/Switch.cjs.js");
-const require_DataDetailsPanel = require("../../../DataDetailsPanel-DiyjEXqK.cjs");
 const require_ee_signals_use_trace_intelligence = require("../use-trace-intelligence.cjs.js");
 const require_ee_signals_settings_signal_definition_form_dialog = require("./signal-definition-form-dialog.cjs.js");
 const require_ee_signals_settings_use_signal_management = require("./use-signal-management.cjs.js");
+const require_Badge = require("../../../Badge-DqaMg7Gy.cjs");
+const require_Button = require("../../../Button-BfICfyxD.cjs");
+const require_DataDetailsPanel = require("../../../DataDetailsPanel-BDoD6pxx.cjs");
+const require_Notice = require("../../../Notice-B_KjMmA6.cjs");
+const require_components_Skeleton = require("../../../components/Skeleton.cjs.js");
+const require_components_Switch = require("../../../components/Switch.cjs.js");
+const require_Txt = require("../../../Txt-_00wWxTd.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");

package/dist/ee/signals/settings/trace-signal-settings.es.js

@@ -1,13 +1,13 @@
-import { t as Button } from "../../../Button-CLXTbAY8.js";
-import { t as Txt } from "../../../Txt-BM6TVV_c.js";
-import { t as Badge } from "../../../Badge-aVu5iGAF.js";
-import { t as Notice } from "../../../Notice-C-8oOZZF.js";
-import { Skeleton } from "../../../components/Skeleton.es.js";
-import { Switch } from "../../../components/Switch.es.js";
-import { t as DataDetailsPanel } from "../../../DataDetailsPanel-CohEKPm4.js";
 import { useTraceIntelligence } from "../use-trace-intelligence.es.js";
 import { SignalDefinitionFormDialog } from "./signal-definition-form-dialog.es.js";
 import { useSignalManagementList, useSignalManagementMutations } from "./use-signal-management.es.js";
+import { t as Badge } from "../../../Badge-C7NnqmMx.js";
+import { t as Button } from "../../../Button-Bi7aXd_G.js";
+import { t as DataDetailsPanel } from "../../../DataDetailsPanel-BU05psHL.js";
+import { t as Notice } from "../../../Notice-OSlG42lD.js";
+import { Skeleton } from "../../../components/Skeleton.es.js";
+import { Switch } from "../../../components/Switch.es.js";
+import { t as Txt } from "../../../Txt-5efBsb2p.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Archive, ArchiveRestore, LayoutGrid, Pencil, Settings } from "lucide-react";

package/dist/ee/signals/signal-delta-column.cjs.js

@@ -1,11 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_tooltip = require("../../tooltip-BiRLT3Th.cjs");
-const require_Txt = require("../../Txt-BnoSqxKE.cjs");
 const require_ee_signals_signal_colors = require("./signal-colors.cjs.js");
 const require_ee_signals_signal_formatting = require("./signal-formatting.cjs.js");
-const require_ee_signals_use_trace_intelligence = require("./use-trace-intelligence.cjs.js");
 const require_ee_signals_theme_compare_data = require("./theme-compare-data.cjs.js");
 const require_ee_signals_theme_compare_sparkline = require("./theme-compare-sparkline.cjs.js");
+const require_ee_signals_use_trace_intelligence = require("./use-trace-intelligence.cjs.js");
+const require_tooltip = require("../../tooltip-BsExuMO8.cjs");
+const require_Txt = require("../../Txt-_00wWxTd.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ee/signals/signal-delta-column.tsx
 function percent(share) {

package/dist/ee/signals/signal-delta-column.es.js

@@ -1,10 +1,10 @@
-import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../tooltip-HzcLyGtV.js";
-import { t as Txt } from "../../Txt-BM6TVV_c.js";
 import { getSignalColor } from "./signal-colors.es.js";
 import { signalDescription, signalLabel } from "./signal-formatting.es.js";
-import { useTraceIntelligence } from "./use-trace-intelligence.es.js";
 import { computeThemeShareDeltas, themeShareSeries } from "./theme-compare-data.es.js";
 import { ThemeCompareSparkline } from "./theme-compare-sparkline.es.js";
+import { useTraceIntelligence } from "./use-trace-intelligence.es.js";
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../tooltip-DJcze2VZ.js";
+import { t as Txt } from "../../Txt-5efBsb2p.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/ee/signals/signal-delta-column.tsx
 function percent(share) {

package/dist/ee/signals/signal-lifelines.cjs.js

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_tooltip = require("../../tooltip-BiRLT3Th.cjs");
-const require_Txt = require("../../Txt-BnoSqxKE.cjs");
-const require_components_DisclosureChevron = require("../../components/DisclosureChevron.cjs.js");
+const require_ee_signals_lifeline_row = require("./lifeline-row.cjs.js");
 const require_ee_signals_signal_colors = require("./signal-colors.cjs.js");
 const require_ee_signals_signal_formatting = require("./signal-formatting.cjs.js");
-const require_ee_signals_use_trace_intelligence = require("./use-trace-intelligence.cjs.js");
 const require_ee_signals_theme_lifelines_data = require("./theme-lifelines-data.cjs.js");
-const require_ee_signals_lifeline_row = require("./lifeline-row.cjs.js");
+const require_ee_signals_use_trace_intelligence = require("./use-trace-intelligence.cjs.js");
+const require_components_DisclosureChevron = require("../../components/DisclosureChevron.cjs.js");
+const require_tooltip = require("../../tooltip-BsExuMO8.cjs");
+const require_Txt = require("../../Txt-_00wWxTd.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ee/signals/signal-lifelines.tsx

package/dist/ee/signals/signal-lifelines.es.js

@@ -1,11 +1,11 @@
-import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../tooltip-HzcLyGtV.js";
-import { t as Txt } from "../../Txt-BM6TVV_c.js";
-import { DisclosureChevron } from "../../components/DisclosureChevron.es.js";
+import { LifelineRow } from "./lifeline-row.es.js";
 import { getSignalColor } from "./signal-colors.es.js";
 import { signalDescription, signalLabel } from "./signal-formatting.es.js";
-import { useTraceIntelligence } from "./use-trace-intelligence.es.js";
 import { buildThemeLifelines } from "./theme-lifelines-data.es.js";
-import { LifelineRow } from "./lifeline-row.es.js";
+import { useTraceIntelligence } from "./use-trace-intelligence.es.js";
+import { DisclosureChevron } from "../../components/DisclosureChevron.es.js";
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../tooltip-DJcze2VZ.js";
+import { t as Txt } from "../../Txt-5efBsb2p.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/ee/signals/signal-lifelines.tsx

package/dist/ee/signals/signals-error-state.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Button = require("../../Button-DLcMcuUL.cjs");
-const require_Txt = require("../../Txt-BnoSqxKE.cjs");
+const require_Button = require("../../Button-BfICfyxD.cjs");
+const require_Txt = require("../../Txt-_00wWxTd.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 // src/ee/signals/signals-error-state.tsx

package/dist/ee/signals/signals-error-state.es.js

@@ -1,5 +1,5 @@
-import { t as Button } from "../../Button-CLXTbAY8.js";
-import { t as Txt } from "../../Txt-BM6TVV_c.js";
+import { t as Button } from "../../Button-Bi7aXd_G.js";
+import { t as Txt } from "../../Txt-5efBsb2p.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { RotateCcw, TriangleAlert, X } from "lucide-react";
 // src/ee/signals/signals-error-state.tsx

package/dist/ee/signals/snapshot-summary.cjs.js

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_ee_signals_sankey_signals_data = require("./sankey-signals-data.cjs.js");
+const require_Metadata = require("../../Metadata-5GJlO4GU.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/ee/signals/snapshot-summary.tsx
+function SnapshotSummary({ snapshot, flow, prefix, label }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata, {
+		role: label ? "group" : void 0,
+		"aria-label": label,
+		children: [prefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, { children: prefix }), require_ee_signals_sankey_signals_data.snapshotSummaryParts(snapshot, flow).map((part) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, { children: part }, part))]
+	});
+}
+exports.SnapshotSummary = SnapshotSummary;
+
+//# sourceMappingURL=snapshot-summary.cjs.js.map

package/dist/ee/signals/snapshot-summary.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot-summary.cjs.js","names":["Metadata","snapshotSummaryParts"],"sources":["../../../src/ee/signals/snapshot-summary.tsx"],"sourcesContent":["import { snapshotSummaryParts } from './sankey-signals-data';\nimport type { ThemeFlowResponse, ThemeSnapshot } from './types';\nimport { Metadata } from '@/ds/components/Metadata';\n\nexport function SnapshotSummary({\n  snapshot,\n  flow,\n  prefix,\n  label,\n}: {\n  snapshot: ThemeSnapshot;\n  flow: ThemeFlowResponse | undefined;\n  prefix?: string;\n  label?: string;\n}) {\n  return (\n    <Metadata role={label ? 'group' : undefined} aria-label={label}>\n      {prefix && <Metadata.Item>{prefix}</Metadata.Item>}\n      {snapshotSummaryParts(snapshot, flow).map(part => (\n        <Metadata.Item key={part}>{part}</Metadata.Item>\n      ))}\n    </Metadata>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAgB,gBAAgB,EAC9B,UACA,MACA,QACA,SAMC;CACD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,iBAAAA,UAAD;EAAU,MAAM,QAAQ,UAAU,KAAA;EAAW,cAAY;EAAzD,UAAA,CACG,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACA,iBAAAA,SAAS,MAAV,EAAA,UAAgB,OAAsB,CAAA,GAChDC,uCAAAA,qBAAqB,UAAU,IAAI,CAAC,CAAC,KAAI,SACxC,iBAAA,GAAA,kBAAA,IAAA,CAACD,iBAAAA,SAAS,MAAV,EAAA,UAA2B,KAAoB,GAA3B,IAA2B,CAChD,CACO;;AAEd"}

package/dist/ee/signals/snapshot-summary.d.ts

@@ -0,0 +1 @@
+export * from '../../src/ee/signals/snapshot-summary';

package/dist/ee/signals/snapshot-summary.es.js

@@ -0,0 +1,14 @@
+import { snapshotSummaryParts } from "./sankey-signals-data.es.js";
+import { t as Metadata } from "../../Metadata-DlVgmRTA.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/ee/signals/snapshot-summary.tsx
+function SnapshotSummary({ snapshot, flow, prefix, label }) {
+	return /* @__PURE__ */ jsxs(Metadata, {
+		role: label ? "group" : void 0,
+		"aria-label": label,
+		children: [prefix && /* @__PURE__ */ jsx(Metadata.Item, { children: prefix }), snapshotSummaryParts(snapshot, flow).map((part) => /* @__PURE__ */ jsx(Metadata.Item, { children: part }, part))]
+	});
+}
+export { SnapshotSummary };
+
+//# sourceMappingURL=snapshot-summary.es.js.map

package/dist/ee/signals/snapshot-summary.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot-summary.es.js","names":[],"sources":["../../../src/ee/signals/snapshot-summary.tsx"],"sourcesContent":["import { snapshotSummaryParts } from './sankey-signals-data';\nimport type { ThemeFlowResponse, ThemeSnapshot } from './types';\nimport { Metadata } from '@/ds/components/Metadata';\n\nexport function SnapshotSummary({\n  snapshot,\n  flow,\n  prefix,\n  label,\n}: {\n  snapshot: ThemeSnapshot;\n  flow: ThemeFlowResponse | undefined;\n  prefix?: string;\n  label?: string;\n}) {\n  return (\n    <Metadata role={label ? 'group' : undefined} aria-label={label}>\n      {prefix && <Metadata.Item>{prefix}</Metadata.Item>}\n      {snapshotSummaryParts(snapshot, flow).map(part => (\n        <Metadata.Item key={part}>{part}</Metadata.Item>\n      ))}\n    </Metadata>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,gBAAgB,EAC9B,UACA,MACA,QACA,SAMC;CACD,OACE,qBAAC,UAAD;EAAU,MAAM,QAAQ,UAAU,KAAA;EAAW,cAAY;EAAzD,UAAA,CACG,UAAU,oBAAC,SAAS,MAAV,EAAA,UAAgB,OAAsB,CAAA,GAChD,qBAAqB,UAAU,IAAI,CAAC,CAAC,KAAI,SACxC,oBAAC,SAAS,MAAV,EAAA,UAA2B,KAAoB,GAA3B,IAA2B,CAChD,CACO;;AAEd"}

package/dist/ee/signals/snapshot-timeline.cjs.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Button = require("../../Button-DLcMcuUL.cjs");
-const require_Txt = require("../../Txt-BnoSqxKE.cjs");
 const require_ee_signals_signal_formatting = require("./signal-formatting.cjs.js");
 const require_ee_signals_snapshot_timeline_data = require("./snapshot-timeline-data.cjs.js");
+const require_Button = require("../../Button-BfICfyxD.cjs");
+const require_Txt = require("../../Txt-_00wWxTd.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 // src/ee/signals/snapshot-timeline.tsx
@@ -61,7 +61,7 @@ function SnapshotTimeline({ snapshots, selectedIndex, totalSnapshots, summary, i
 	const selectedDate = snapshot.cutoffAt ? require_ee_signals_signal_formatting.formatSnapshotCutoff(snapshot.cutoffAt) : require_ee_signals_signal_formatting.formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt);
 	const statusParts = [
 		`Snapshot ${snapshot.ordinal}/${totalCount}`,
-		...snapshot.cutoffAt ? [`as of ${selectedDate}`, `window ${require_ee_signals_signal_formatting.formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt)}`] : [selectedDate],
+		...snapshot.cutoffAt ? [`As of ${selectedDate}`, `Window ${require_ee_signals_signal_formatting.formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt)}`] : [selectedDate],
 		require_ee_signals_signal_formatting.traceLabel(snapshot.traceCount)
 	];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
@@ -97,7 +97,7 @@ function SnapshotTimeline({ snapshots, selectedIndex, totalSnapshots, summary, i
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				"aria-live": "polite",
 				className: "sr-only",
-				children: statusParts.join(" · ")
+				children: statusParts.join(". ")
 			})
 		]
 	});

package/dist/ee/signals/snapshot-timeline.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"snapshot-timeline.cjs.js","names":["timelineTickPositions","timelineDayLabels","snapshotTickLabel","Txt","formatSnapshotCutoff","formatSnapshotWindow","traceLabel","Button","Pause","Play"],"sources":["../../../src/ee/signals/snapshot-timeline.tsx"],"sourcesContent":["import { Pause, Play } from 'lucide-react';\n\nimport { formatSnapshotCutoff, formatSnapshotWindow, traceLabel } from './signal-formatting';\nimport { snapshotTickLabel, timelineDayLabels, timelineTickPositions } from './snapshot-timeline-data';\nimport type { ThemeSnapshot } from './types';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\n\nexport type TimelineMarkerKind = 'selected' | 'compare-point';\n\nconst MARKER_TICK_CLASSES: Record<TimelineMarkerKind, string> = {\n  selected: 'bg-foreground border-border-strong',\n  'compare-point': 'bg-foreground border-border-strong',\n};\n\n/**\n * Time-axis landmark track shared by the flow timeline and compare mode. Each\n * landmark renders as a tick placed proportionally to when its snapshot became\n * the current state, with a day label under the first tick of each new day, so\n * bursty capture times and quiet gaps stay legible.\n */\nexport function TimelineTrack({\n  snapshots,\n  totalCount,\n  markers,\n  grabbedIndex,\n  onTickSelect,\n}: {\n  snapshots: ThemeSnapshot[];\n  totalCount: number;\n  markers: ReadonlyMap<number, TimelineMarkerKind>;\n  /** Landmark index of a grabbed compare point — the next tick click moves it. */\n  grabbedIndex?: number;\n  onTickSelect: (index: number) => void;\n}) {\n  const positions = timelineTickPositions(snapshots);\n  const dayLabels = timelineDayLabels(snapshots);\n\n  return (\n    <div aria-label=\"Snapshot landmarks\" className=\"relative mx-2 h-12 min-w-40 flex-1\" role=\"group\">\n      <div aria-hidden=\"true\" className=\"absolute inset-x-0 top-4 h-0.5 -translate-y-1/2 rounded-full bg-border\" />\n      {snapshots.map((snapshot, index) => {\n        const marker = markers.get(index);\n        const grabbed = marker === 'compare-point' && index === grabbedIndex;\n        return (\n          <button\n            key={snapshot.snapshotId}\n            aria-current={marker === 'selected' ? 'true' : undefined}\n            aria-label={snapshotTickLabel(snapshot, totalCount)}\n            aria-pressed={marker === 'compare-point' ? grabbed : undefined}\n            className={`absolute top-4 size-3.5 -translate-1/2 rounded-full border-2 ${\n              marker ? MARKER_TICK_CLASSES[marker] : 'border-background bg-muted hover:bg-muted-foreground'\n            } ${grabbed ? 'ring-2 ring-foreground' : ''}`}\n            data-marker={marker}\n            onClick={() => onTickSelect(index)}\n            style={{ left: `${positions[index]}%` }}\n            type=\"button\"\n          />\n        );\n      })}\n      {snapshots.map((snapshot, index) =>\n        dayLabels[index] ? (\n          <Txt\n            as=\"span\"\n            variant=\"meta\"\n            tone=\"muted\"\n\n            key={`day-${snapshot.snapshotId}`}\n            aria-hidden=\"true\"\n            className=\"absolute top-7 -translate-x-1/2 tabular-nums\"\n            style={{ left: `${positions[index]}%` }}\n          >\n            {dayLabels[index]}\n          </Txt>\n        ) : null,\n      )}\n    </div>\n  );\n}\n\nexport function SnapshotTimeline({\n  snapshots,\n  selectedIndex,\n  totalSnapshots,\n  summary,\n  isPlaying,\n  onPlayingChange,\n  onSnapshotChange,\n}: {\n  snapshots: ThemeSnapshot[];\n  selectedIndex: number;\n  totalSnapshots?: number;\n  summary: string;\n  isPlaying: boolean;\n  onPlayingChange: (isPlaying: boolean) => void;\n  onSnapshotChange: (index: number) => void;\n}) {\n  const snapshot = snapshots[selectedIndex];\n\n  if (!snapshot) return null;\n\n  const totalCount = totalSnapshots ?? snapshot.total;\n  const selectedDate = snapshot.cutoffAt\n    ? formatSnapshotCutoff(snapshot.cutoffAt)\n    : formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt);\n  const statusParts = [\n    `Snapshot ${snapshot.ordinal}/${totalCount}`,\n    ...(snapshot.cutoffAt\n      ? [`as of ${selectedDate}`, `window ${formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt)}`]\n      : [selectedDate]),\n    traceLabel(snapshot.traceCount),\n  ];\n\n  return (\n    <section aria-label=\"Snapshot timeline\" className=\"space-y-4\">\n      {snapshots.length > 1 ? (\n        <div className=\"px-3 py-2.5 sm:px-4\">\n          <TimelineTrack\n            snapshots={snapshots}\n            totalCount={totalCount}\n            markers={new Map<number, TimelineMarkerKind>([[selectedIndex, 'selected']])}\n            onTickSelect={onSnapshotChange}\n          />\n        </div>\n      ) : null}\n      <div className=\"flex flex-wrap items-center gap-3\">\n        {snapshots.length > 1 ? (\n          <Button\n            aria-label={isPlaying ? 'Pause snapshots' : 'Play snapshots'}\n            onClick={() => onPlayingChange(!isPlaying)}\n            size=\"sm\"\n            type=\"button\"\n            icon={isPlaying ? <Pause aria-hidden=\"true\" /> : <Play aria-hidden=\"true\" />}\n          >\n            {isPlaying ? 'Pause' : 'Play'}\n          </Button>\n        ) : null}\n        <Txt variant=\"caption\" tone=\"muted\" className=\"tabular-nums\" data-testid=\"snapshot-summary\">\n          {summary}\n        </Txt>\n      </div>\n      {/* Keep the global ordinal and range-scoped position available to assistive tech. */}\n      <p aria-live=\"polite\" className=\"sr-only\">\n        {statusParts.join(' · ')}\n      </p>\n    </section>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"snapshot-timeline.cjs.js","names":["timelineTickPositions","timelineDayLabels","snapshotTickLabel","Txt","formatSnapshotCutoff","formatSnapshotWindow","traceLabel","Button","Pause","Play"],"sources":["../../../src/ee/signals/snapshot-timeline.tsx"],"sourcesContent":["import { Pause, Play } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { formatSnapshotCutoff, formatSnapshotWindow, traceLabel } from './signal-formatting';\nimport { snapshotTickLabel, timelineDayLabels, timelineTickPositions } from './snapshot-timeline-data';\nimport type { ThemeSnapshot } from './types';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\n\nexport type TimelineMarkerKind = 'selected' | 'compare-point';\n\nconst MARKER_TICK_CLASSES: Record<TimelineMarkerKind, string> = {\n  selected: 'bg-foreground border-border-strong',\n  'compare-point': 'bg-foreground border-border-strong',\n};\n\n/**\n * Time-axis landmark track shared by the flow timeline and compare mode. Each\n * landmark renders as a tick placed proportionally to when its snapshot became\n * the current state, with a day label under the first tick of each new day, so\n * bursty capture times and quiet gaps stay legible.\n */\nexport function TimelineTrack({\n  snapshots,\n  totalCount,\n  markers,\n  grabbedIndex,\n  onTickSelect,\n}: {\n  snapshots: ThemeSnapshot[];\n  totalCount: number;\n  markers: ReadonlyMap<number, TimelineMarkerKind>;\n  /** Landmark index of a grabbed compare point — the next tick click moves it. */\n  grabbedIndex?: number;\n  onTickSelect: (index: number) => void;\n}) {\n  const positions = timelineTickPositions(snapshots);\n  const dayLabels = timelineDayLabels(snapshots);\n\n  return (\n    <div aria-label=\"Snapshot landmarks\" className=\"relative mx-2 h-12 min-w-40 flex-1\" role=\"group\">\n      <div aria-hidden=\"true\" className=\"absolute inset-x-0 top-4 h-0.5 -translate-y-1/2 rounded-full bg-border\" />\n      {snapshots.map((snapshot, index) => {\n        const marker = markers.get(index);\n        const grabbed = marker === 'compare-point' && index === grabbedIndex;\n        return (\n          <button\n            key={snapshot.snapshotId}\n            aria-current={marker === 'selected' ? 'true' : undefined}\n            aria-label={snapshotTickLabel(snapshot, totalCount)}\n            aria-pressed={marker === 'compare-point' ? grabbed : undefined}\n            className={`absolute top-4 size-3.5 -translate-1/2 rounded-full border-2 ${\n              marker ? MARKER_TICK_CLASSES[marker] : 'border-background bg-muted hover:bg-muted-foreground'\n            } ${grabbed ? 'ring-2 ring-foreground' : ''}`}\n            data-marker={marker}\n            onClick={() => onTickSelect(index)}\n            style={{ left: `${positions[index]}%` }}\n            type=\"button\"\n          />\n        );\n      })}\n      {snapshots.map((snapshot, index) =>\n        dayLabels[index] ? (\n          <Txt\n            as=\"span\"\n            variant=\"meta\"\n            tone=\"muted\"\n\n            key={`day-${snapshot.snapshotId}`}\n            aria-hidden=\"true\"\n            className=\"absolute top-7 -translate-x-1/2 tabular-nums\"\n            style={{ left: `${positions[index]}%` }}\n          >\n            {dayLabels[index]}\n          </Txt>\n        ) : null,\n      )}\n    </div>\n  );\n}\n\nexport function SnapshotTimeline({\n  snapshots,\n  selectedIndex,\n  totalSnapshots,\n  summary,\n  isPlaying,\n  onPlayingChange,\n  onSnapshotChange,\n}: {\n  snapshots: ThemeSnapshot[];\n  selectedIndex: number;\n  totalSnapshots?: number;\n  summary: ReactNode;\n  isPlaying: boolean;\n  onPlayingChange: (isPlaying: boolean) => void;\n  onSnapshotChange: (index: number) => void;\n}) {\n  const snapshot = snapshots[selectedIndex];\n\n  if (!snapshot) return null;\n\n  const totalCount = totalSnapshots ?? snapshot.total;\n  const selectedDate = snapshot.cutoffAt\n    ? formatSnapshotCutoff(snapshot.cutoffAt)\n    : formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt);\n  const statusParts = [\n    `Snapshot ${snapshot.ordinal}/${totalCount}`,\n    ...(snapshot.cutoffAt\n      ? [`As of ${selectedDate}`, `Window ${formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt)}`]\n      : [selectedDate]),\n    traceLabel(snapshot.traceCount),\n  ];\n\n  return (\n    <section aria-label=\"Snapshot timeline\" className=\"space-y-4\">\n      {snapshots.length > 1 ? (\n        <div className=\"px-3 py-2.5 sm:px-4\">\n          <TimelineTrack\n            snapshots={snapshots}\n            totalCount={totalCount}\n            markers={new Map<number, TimelineMarkerKind>([[selectedIndex, 'selected']])}\n            onTickSelect={onSnapshotChange}\n          />\n        </div>\n      ) : null}\n      <div className=\"flex flex-wrap items-center gap-3\">\n        {snapshots.length > 1 ? (\n          <Button\n            aria-label={isPlaying ? 'Pause snapshots' : 'Play snapshots'}\n            onClick={() => onPlayingChange(!isPlaying)}\n            size=\"sm\"\n            type=\"button\"\n            icon={isPlaying ? <Pause aria-hidden=\"true\" /> : <Play aria-hidden=\"true\" />}\n          >\n            {isPlaying ? 'Pause' : 'Play'}\n          </Button>\n        ) : null}\n        <Txt variant=\"caption\" tone=\"muted\" className=\"tabular-nums\" data-testid=\"snapshot-summary\">\n          {summary}\n        </Txt>\n      </div>\n      {/* Keep the global ordinal and range-scoped position available to assistive tech. */}\n      <p aria-live=\"polite\" className=\"sr-only\">\n        {statusParts.join('. ')}\n      </p>\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/ee/signals/snapshot-timeline.es.js

@@ -1,7 +1,7 @@
-import { t as Button } from "../../Button-CLXTbAY8.js";
-import { t as Txt } from "../../Txt-BM6TVV_c.js";
 import { formatSnapshotCutoff, formatSnapshotWindow, traceLabel } from "./signal-formatting.es.js";
 import { snapshotTickLabel, timelineDayLabels, timelineTickPositions } from "./snapshot-timeline-data.es.js";
+import { t as Button } from "../../Button-Bi7aXd_G.js";
+import { t as Txt } from "../../Txt-5efBsb2p.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Pause, Play } from "lucide-react";
 // src/ee/signals/snapshot-timeline.tsx
@@ -60,7 +60,7 @@ function SnapshotTimeline({ snapshots, selectedIndex, totalSnapshots, summary, i
 	const selectedDate = snapshot.cutoffAt ? formatSnapshotCutoff(snapshot.cutoffAt) : formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt);
 	const statusParts = [
 		`Snapshot ${snapshot.ordinal}/${totalCount}`,
-		...snapshot.cutoffAt ? [`as of ${selectedDate}`, `window ${formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt)}`] : [selectedDate],
+		...snapshot.cutoffAt ? [`As of ${selectedDate}`, `Window ${formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt)}`] : [selectedDate],
 		traceLabel(snapshot.traceCount)
 	];
 	return /* @__PURE__ */ jsxs("section", {
@@ -96,7 +96,7 @@ function SnapshotTimeline({ snapshots, selectedIndex, totalSnapshots, summary, i
 			/* @__PURE__ */ jsx("p", {
 				"aria-live": "polite",
 				className: "sr-only",
-				children: statusParts.join(" · ")
+				children: statusParts.join(". ")
 			})
 		]
 	});

package/dist/ee/signals/snapshot-timeline.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"snapshot-timeline.es.js","names":[],"sources":["../../../src/ee/signals/snapshot-timeline.tsx"],"sourcesContent":["import { Pause, Play } from 'lucide-react';\n\nimport { formatSnapshotCutoff, formatSnapshotWindow, traceLabel } from './signal-formatting';\nimport { snapshotTickLabel, timelineDayLabels, timelineTickPositions } from './snapshot-timeline-data';\nimport type { ThemeSnapshot } from './types';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\n\nexport type TimelineMarkerKind = 'selected' | 'compare-point';\n\nconst MARKER_TICK_CLASSES: Record<TimelineMarkerKind, string> = {\n  selected: 'bg-foreground border-border-strong',\n  'compare-point': 'bg-foreground border-border-strong',\n};\n\n/**\n * Time-axis landmark track shared by the flow timeline and compare mode. Each\n * landmark renders as a tick placed proportionally to when its snapshot became\n * the current state, with a day label under the first tick of each new day, so\n * bursty capture times and quiet gaps stay legible.\n */\nexport function TimelineTrack({\n  snapshots,\n  totalCount,\n  markers,\n  grabbedIndex,\n  onTickSelect,\n}: {\n  snapshots: ThemeSnapshot[];\n  totalCount: number;\n  markers: ReadonlyMap<number, TimelineMarkerKind>;\n  /** Landmark index of a grabbed compare point — the next tick click moves it. */\n  grabbedIndex?: number;\n  onTickSelect: (index: number) => void;\n}) {\n  const positions = timelineTickPositions(snapshots);\n  const dayLabels = timelineDayLabels(snapshots);\n\n  return (\n    <div aria-label=\"Snapshot landmarks\" className=\"relative mx-2 h-12 min-w-40 flex-1\" role=\"group\">\n      <div aria-hidden=\"true\" className=\"absolute inset-x-0 top-4 h-0.5 -translate-y-1/2 rounded-full bg-border\" />\n      {snapshots.map((snapshot, index) => {\n        const marker = markers.get(index);\n        const grabbed = marker === 'compare-point' && index === grabbedIndex;\n        return (\n          <button\n            key={snapshot.snapshotId}\n            aria-current={marker === 'selected' ? 'true' : undefined}\n            aria-label={snapshotTickLabel(snapshot, totalCount)}\n            aria-pressed={marker === 'compare-point' ? grabbed : undefined}\n            className={`absolute top-4 size-3.5 -translate-1/2 rounded-full border-2 ${\n              marker ? MARKER_TICK_CLASSES[marker] : 'border-background bg-muted hover:bg-muted-foreground'\n            } ${grabbed ? 'ring-2 ring-foreground' : ''}`}\n            data-marker={marker}\n            onClick={() => onTickSelect(index)}\n            style={{ left: `${positions[index]}%` }}\n            type=\"button\"\n          />\n        );\n      })}\n      {snapshots.map((snapshot, index) =>\n        dayLabels[index] ? (\n          <Txt\n            as=\"span\"\n            variant=\"meta\"\n            tone=\"muted\"\n\n            key={`day-${snapshot.snapshotId}`}\n            aria-hidden=\"true\"\n            className=\"absolute top-7 -translate-x-1/2 tabular-nums\"\n            style={{ left: `${positions[index]}%` }}\n          >\n            {dayLabels[index]}\n          </Txt>\n        ) : null,\n      )}\n    </div>\n  );\n}\n\nexport function SnapshotTimeline({\n  snapshots,\n  selectedIndex,\n  totalSnapshots,\n  summary,\n  isPlaying,\n  onPlayingChange,\n  onSnapshotChange,\n}: {\n  snapshots: ThemeSnapshot[];\n  selectedIndex: number;\n  totalSnapshots?: number;\n  summary: string;\n  isPlaying: boolean;\n  onPlayingChange: (isPlaying: boolean) => void;\n  onSnapshotChange: (index: number) => void;\n}) {\n  const snapshot = snapshots[selectedIndex];\n\n  if (!snapshot) return null;\n\n  const totalCount = totalSnapshots ?? snapshot.total;\n  const selectedDate = snapshot.cutoffAt\n    ? formatSnapshotCutoff(snapshot.cutoffAt)\n    : formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt);\n  const statusParts = [\n    `Snapshot ${snapshot.ordinal}/${totalCount}`,\n    ...(snapshot.cutoffAt\n      ? [`as of ${selectedDate}`, `window ${formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt)}`]\n      : [selectedDate]),\n    traceLabel(snapshot.traceCount),\n  ];\n\n  return (\n    <section aria-label=\"Snapshot timeline\" className=\"space-y-4\">\n      {snapshots.length > 1 ? (\n        <div className=\"px-3 py-2.5 sm:px-4\">\n          <TimelineTrack\n            snapshots={snapshots}\n            totalCount={totalCount}\n            markers={new Map<number, TimelineMarkerKind>([[selectedIndex, 'selected']])}\n            onTickSelect={onSnapshotChange}\n          />\n        </div>\n      ) : null}\n      <div className=\"flex flex-wrap items-center gap-3\">\n        {snapshots.length > 1 ? (\n          <Button\n            aria-label={isPlaying ? 'Pause snapshots' : 'Play snapshots'}\n            onClick={() => onPlayingChange(!isPlaying)}\n            size=\"sm\"\n            type=\"button\"\n            icon={isPlaying ? <Pause aria-hidden=\"true\" /> : <Play aria-hidden=\"true\" />}\n          >\n            {isPlaying ? 'Pause' : 'Play'}\n          </Button>\n        ) : null}\n        <Txt variant=\"caption\" tone=\"muted\" className=\"tabular-nums\" data-testid=\"snapshot-summary\">\n          {summary}\n        </Txt>\n      </div>\n      {/* Keep the global ordinal and range-scoped position available to assistive tech. */}\n      <p aria-live=\"polite\" className=\"sr-only\">\n        {statusParts.join(' · ')}\n      </p>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;AAUA,IAAM,sBAA0D;CAC9D,UAAU;CACV,iBAAiB;AACnB;;;;;;;AAQA,SAAgB,cAAc,EAC5B,WACA,YACA,SACA,cACA,gBAQC;CACD,MAAM,YAAY,sBAAsB,SAAS;CACjD,MAAM,YAAY,kBAAkB,SAAS;CAE7C,OACE,qBAAC,OAAD;EAAK,cAAW;EAAqB,WAAU;EAAqC,MAAK;EAAzF,UAAA;GACE,oBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;GAA0E,CAAA;GAC3G,UAAU,KAAK,UAAU,UAAU;IAClC,MAAM,SAAS,QAAQ,IAAI,KAAK;IAChC,MAAM,UAAU,WAAW,mBAAmB,UAAU;IACxD,OACE,oBAAC,UAAD;KAEE,gBAAc,WAAW,aAAa,SAAS,KAAA;KAC/C,cAAY,kBAAkB,UAAU,UAAU;KAClD,gBAAc,WAAW,kBAAkB,UAAU,KAAA;KACrD,WAAW,gEACT,SAAS,oBAAoB,UAAU,uDACxC,GAAG,UAAU,2BAA2B;KACzC,eAAa;KACb,eAAe,aAAa,KAAK;KACjC,OAAO,EAAE,MAAM,GAAG,UAAU,OAAO,GAAG;KACtC,MAAK;IACN,GAXM,SAAS,UAWf;GAEL,CAAC;GACA,UAAU,KAAK,UAAU,UACxB,UAAU,SACR,oBAAC,KAAD;IACE,IAAG;IACH,SAAQ;IACR,MAAK;IAGL,eAAY;IACZ,WAAU;IACV,OAAO,EAAE,MAAM,GAAG,UAAU,OAAO,GAAG;IAErC,UAAA,UAAU;GACR,GANE,OAAO,SAAS,YAMlB,IACH,IACN;EACG;;AAET;AAEA,SAAgB,iBAAiB,EAC/B,WACA,eACA,gBACA,SACA,WACA,iBACA,oBASC;CACD,MAAM,WAAW,UAAU;CAE3B,IAAI,CAAC,UAAU,OAAO;CAEtB,MAAM,aAAa,kBAAkB,SAAS;CAC9C,MAAM,eAAe,SAAS,WAC1B,qBAAqB,SAAS,QAAQ,IACtC,qBAAqB,SAAS,WAAW,SAAS,OAAO;CAC7D,MAAM,cAAc;EAClB,YAAY,SAAS,QAAQ,GAAG;EAChC,GAAI,SAAS,WACT,CAAC,SAAS,gBAAgB,UAAU,qBAAqB,SAAS,WAAW,SAAS,OAAO,GAAG,IAChG,CAAC,YAAY;EACjB,WAAW,SAAS,UAAU;CAChC;CAEA,OACE,qBAAC,WAAD;EAAS,cAAW;EAAoB,WAAU;EAAlD,UAAA;GACG,UAAU,SAAS,IAClB,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,eAAD;KACa;KACC;KACZ,yBAAS,IAAI,IAAgC,CAAC,CAAC,eAAe,UAAU,CAAC,CAAC;KAC1E,cAAc;IACf,CAAA;GACE,CAAA,IACH;GACJ,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,UAAU,SAAS,IAClB,oBAAC,QAAD;KACE,cAAY,YAAY,oBAAoB;KAC5C,eAAe,gBAAgB,CAAC,SAAS;KACzC,MAAK;KACL,MAAK;KACL,MAAM,YAAY,oBAAC,OAAD,EAAO,eAAY,OAAQ,CAAA,IAAI,oBAAC,MAAD,EAAM,eAAY,OAAQ,CAAA;KAE1E,UAAA,YAAY,UAAU;IACjB,CAAA,IACN,MACJ,oBAAC,KAAD;KAAK,SAAQ;KAAU,MAAK;KAAQ,WAAU;KAAe,eAAY;KACtE,UAAA;IACE,CAAA,CACF;;GAEL,oBAAC,KAAD;IAAG,aAAU;IAAS,WAAU;IAC7B,UAAA,YAAY,KAAK,KAAK;GACtB,CAAA;EACI;;AAEb"}
+{"version":3,"file":"snapshot-timeline.es.js","names":[],"sources":["../../../src/ee/signals/snapshot-timeline.tsx"],"sourcesContent":["import { Pause, Play } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { formatSnapshotCutoff, formatSnapshotWindow, traceLabel } from './signal-formatting';\nimport { snapshotTickLabel, timelineDayLabels, timelineTickPositions } from './snapshot-timeline-data';\nimport type { ThemeSnapshot } from './types';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\n\nexport type TimelineMarkerKind = 'selected' | 'compare-point';\n\nconst MARKER_TICK_CLASSES: Record<TimelineMarkerKind, string> = {\n  selected: 'bg-foreground border-border-strong',\n  'compare-point': 'bg-foreground border-border-strong',\n};\n\n/**\n * Time-axis landmark track shared by the flow timeline and compare mode. Each\n * landmark renders as a tick placed proportionally to when its snapshot became\n * the current state, with a day label under the first tick of each new day, so\n * bursty capture times and quiet gaps stay legible.\n */\nexport function TimelineTrack({\n  snapshots,\n  totalCount,\n  markers,\n  grabbedIndex,\n  onTickSelect,\n}: {\n  snapshots: ThemeSnapshot[];\n  totalCount: number;\n  markers: ReadonlyMap<number, TimelineMarkerKind>;\n  /** Landmark index of a grabbed compare point — the next tick click moves it. */\n  grabbedIndex?: number;\n  onTickSelect: (index: number) => void;\n}) {\n  const positions = timelineTickPositions(snapshots);\n  const dayLabels = timelineDayLabels(snapshots);\n\n  return (\n    <div aria-label=\"Snapshot landmarks\" className=\"relative mx-2 h-12 min-w-40 flex-1\" role=\"group\">\n      <div aria-hidden=\"true\" className=\"absolute inset-x-0 top-4 h-0.5 -translate-y-1/2 rounded-full bg-border\" />\n      {snapshots.map((snapshot, index) => {\n        const marker = markers.get(index);\n        const grabbed = marker === 'compare-point' && index === grabbedIndex;\n        return (\n          <button\n            key={snapshot.snapshotId}\n            aria-current={marker === 'selected' ? 'true' : undefined}\n            aria-label={snapshotTickLabel(snapshot, totalCount)}\n            aria-pressed={marker === 'compare-point' ? grabbed : undefined}\n            className={`absolute top-4 size-3.5 -translate-1/2 rounded-full border-2 ${\n              marker ? MARKER_TICK_CLASSES[marker] : 'border-background bg-muted hover:bg-muted-foreground'\n            } ${grabbed ? 'ring-2 ring-foreground' : ''}`}\n            data-marker={marker}\n            onClick={() => onTickSelect(index)}\n            style={{ left: `${positions[index]}%` }}\n            type=\"button\"\n          />\n        );\n      })}\n      {snapshots.map((snapshot, index) =>\n        dayLabels[index] ? (\n          <Txt\n            as=\"span\"\n            variant=\"meta\"\n            tone=\"muted\"\n\n            key={`day-${snapshot.snapshotId}`}\n            aria-hidden=\"true\"\n            className=\"absolute top-7 -translate-x-1/2 tabular-nums\"\n            style={{ left: `${positions[index]}%` }}\n          >\n            {dayLabels[index]}\n          </Txt>\n        ) : null,\n      )}\n    </div>\n  );\n}\n\nexport function SnapshotTimeline({\n  snapshots,\n  selectedIndex,\n  totalSnapshots,\n  summary,\n  isPlaying,\n  onPlayingChange,\n  onSnapshotChange,\n}: {\n  snapshots: ThemeSnapshot[];\n  selectedIndex: number;\n  totalSnapshots?: number;\n  summary: ReactNode;\n  isPlaying: boolean;\n  onPlayingChange: (isPlaying: boolean) => void;\n  onSnapshotChange: (index: number) => void;\n}) {\n  const snapshot = snapshots[selectedIndex];\n\n  if (!snapshot) return null;\n\n  const totalCount = totalSnapshots ?? snapshot.total;\n  const selectedDate = snapshot.cutoffAt\n    ? formatSnapshotCutoff(snapshot.cutoffAt)\n    : formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt);\n  const statusParts = [\n    `Snapshot ${snapshot.ordinal}/${totalCount}`,\n    ...(snapshot.cutoffAt\n      ? [`As of ${selectedDate}`, `Window ${formatSnapshotWindow(snapshot.startedAt, snapshot.endedAt)}`]\n      : [selectedDate]),\n    traceLabel(snapshot.traceCount),\n  ];\n\n  return (\n    <section aria-label=\"Snapshot timeline\" className=\"space-y-4\">\n      {snapshots.length > 1 ? (\n        <div className=\"px-3 py-2.5 sm:px-4\">\n          <TimelineTrack\n            snapshots={snapshots}\n            totalCount={totalCount}\n            markers={new Map<number, TimelineMarkerKind>([[selectedIndex, 'selected']])}\n            onTickSelect={onSnapshotChange}\n          />\n        </div>\n      ) : null}\n      <div className=\"flex flex-wrap items-center gap-3\">\n        {snapshots.length > 1 ? (\n          <Button\n            aria-label={isPlaying ? 'Pause snapshots' : 'Play snapshots'}\n            onClick={() => onPlayingChange(!isPlaying)}\n            size=\"sm\"\n            type=\"button\"\n            icon={isPlaying ? <Pause aria-hidden=\"true\" /> : <Play aria-hidden=\"true\" />}\n          >\n            {isPlaying ? 'Pause' : 'Play'}\n          </Button>\n        ) : null}\n        <Txt variant=\"caption\" tone=\"muted\" className=\"tabular-nums\" data-testid=\"snapshot-summary\">\n          {summary}\n        </Txt>\n      </div>\n      {/* Keep the global ordinal and range-scoped position available to assistive tech. */}\n      <p aria-live=\"polite\" className=\"sr-only\">\n        {statusParts.join('. ')}\n      </p>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;AAWA,IAAM,sBAA0D;CAC9D,UAAU;CACV,iBAAiB;AACnB;;;;;;;AAQA,SAAgB,cAAc,EAC5B,WACA,YACA,SACA,cACA,gBAQC;CACD,MAAM,YAAY,sBAAsB,SAAS;CACjD,MAAM,YAAY,kBAAkB,SAAS;CAE7C,OACE,qBAAC,OAAD;EAAK,cAAW;EAAqB,WAAU;EAAqC,MAAK;EAAzF,UAAA;GACE,oBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;GAA0E,CAAA;GAC3G,UAAU,KAAK,UAAU,UAAU;IAClC,MAAM,SAAS,QAAQ,IAAI,KAAK;IAChC,MAAM,UAAU,WAAW,mBAAmB,UAAU;IACxD,OACE,oBAAC,UAAD;KAEE,gBAAc,WAAW,aAAa,SAAS,KAAA;KAC/C,cAAY,kBAAkB,UAAU,UAAU;KAClD,gBAAc,WAAW,kBAAkB,UAAU,KAAA;KACrD,WAAW,gEACT,SAAS,oBAAoB,UAAU,uDACxC,GAAG,UAAU,2BAA2B;KACzC,eAAa;KACb,eAAe,aAAa,KAAK;KACjC,OAAO,EAAE,MAAM,GAAG,UAAU,OAAO,GAAG;KACtC,MAAK;IACN,GAXM,SAAS,UAWf;GAEL,CAAC;GACA,UAAU,KAAK,UAAU,UACxB,UAAU,SACR,oBAAC,KAAD;IACE,IAAG;IACH,SAAQ;IACR,MAAK;IAGL,eAAY;IACZ,WAAU;IACV,OAAO,EAAE,MAAM,GAAG,UAAU,OAAO,GAAG;IAErC,UAAA,UAAU;GACR,GANE,OAAO,SAAS,YAMlB,IACH,IACN;EACG;;AAET;AAEA,SAAgB,iBAAiB,EAC/B,WACA,eACA,gBACA,SACA,WACA,iBACA,oBASC;CACD,MAAM,WAAW,UAAU;CAE3B,IAAI,CAAC,UAAU,OAAO;CAEtB,MAAM,aAAa,kBAAkB,SAAS;CAC9C,MAAM,eAAe,SAAS,WAC1B,qBAAqB,SAAS,QAAQ,IACtC,qBAAqB,SAAS,WAAW,SAAS,OAAO;CAC7D,MAAM,cAAc;EAClB,YAAY,SAAS,QAAQ,GAAG;EAChC,GAAI,SAAS,WACT,CAAC,SAAS,gBAAgB,UAAU,qBAAqB,SAAS,WAAW,SAAS,OAAO,GAAG,IAChG,CAAC,YAAY;EACjB,WAAW,SAAS,UAAU;CAChC;CAEA,OACE,qBAAC,WAAD;EAAS,cAAW;EAAoB,WAAU;EAAlD,UAAA;GACG,UAAU,SAAS,IAClB,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,eAAD;KACa;KACC;KACZ,yBAAS,IAAI,IAAgC,CAAC,CAAC,eAAe,UAAU,CAAC,CAAC;KAC1E,cAAc;IACf,CAAA;GACE,CAAA,IACH;GACJ,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,UAAU,SAAS,IAClB,oBAAC,QAAD;KACE,cAAY,YAAY,oBAAoB;KAC5C,eAAe,gBAAgB,CAAC,SAAS;KACzC,MAAK;KACL,MAAK;KACL,MAAM,YAAY,oBAAC,OAAD,EAAO,eAAY,OAAQ,CAAA,IAAI,oBAAC,MAAD,EAAM,eAAY,OAAQ,CAAA;KAE1E,UAAA,YAAY,UAAU;IACjB,CAAA,IACN,MACJ,oBAAC,KAAD;KAAK,SAAQ;KAAU,MAAK;KAAQ,WAAU;KAAe,eAAY;KACtE,UAAA;IACE,CAAA,CACF;;GAEL,oBAAC,KAAD;IAAG,aAAU;IAAS,WAAU;IAC7B,UAAA,YAAY,KAAK,IAAI;GACrB,CAAA;EACI;;AAEb"}

package/dist/ee/signals/sortable-signal-headers.cjs.js

@@ -1,13 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../../utils-uDc1ofX1.cjs");
-const require_primitives_raised_surface = require("../../primitives/raised-surface.cjs.js");
-const require_tooltip = require("../../tooltip-BiRLT3Th.cjs");
-const require_primitives_transitions = require("../../primitives/transitions.cjs.js");
-const require_primitives_typography = require("../../primitives/typography.cjs.js");
-const require_Txt = require("../../Txt-BnoSqxKE.cjs");
 const require_ee_signals_signal_colors = require("./signal-colors.cjs.js");
 const require_ee_signals_signal_formatting = require("./signal-formatting.cjs.js");
 const require_ee_signals_use_trace_intelligence = require("./use-trace-intelligence.cjs.js");
+const require_tooltip = require("../../tooltip-BsExuMO8.cjs");
+const require_Txt = require("../../Txt-_00wWxTd.cjs");
+const require_primitives_raised_surface = require("../../primitives/raised-surface.cjs.js");
+const require_primitives_transitions = require("../../primitives/transitions.cjs.js");
+const require_primitives_typography = require("../../primitives/typography.cjs.js");
+const require_utils = require("../../utils-uDc1ofX1.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");

package/dist/ee/signals/sortable-signal-headers.es.js

@@ -1,12 +1,12 @@
-import { t as cn } from "../../utils-DQx8TpNT.js";
-import { overlaySurfaceStyle } from "../../primitives/raised-surface.es.js";
-import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../tooltip-HzcLyGtV.js";
-import { controlStateColorTransition } from "../../primitives/transitions.es.js";
-import { quietTextHover } from "../../primitives/typography.es.js";
-import { t as Txt } from "../../Txt-BM6TVV_c.js";
 import { getSignalColor } from "./signal-colors.es.js";
 import { signalDescription, signalLabel } from "./signal-formatting.es.js";
 import { useTraceIntelligence } from "./use-trace-intelligence.es.js";
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../tooltip-DJcze2VZ.js";
+import { t as Txt } from "../../Txt-5efBsb2p.js";
+import { overlaySurfaceStyle } from "../../primitives/raised-surface.es.js";
+import { controlStateColorTransition } from "../../primitives/transitions.es.js";
+import { quietTextHover } from "../../primitives/typography.es.js";
+import { t as cn } from "../../utils-DQx8TpNT.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { GripVertical } from "lucide-react";

package/dist/ee/signals/theme-compare.cjs.js

@@ -1,11 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Txt = require("../../Txt-BnoSqxKE.cjs");
-const require_ee_signals_sankey_signals_data = require("./sankey-signals-data.cjs.js");
 const require_ee_signals_hooks_use_theme_flows = require("./hooks/use-theme-flows.cjs.js");
+const require_ee_signals_signal_delta_column = require("./signal-delta-column.cjs.js");
 const require_ee_signals_signals_loading_skeleton = require("./signals-loading-skeleton.cjs.js");
-const require_ee_signals_snapshot_timeline_data = require("./snapshot-timeline-data.cjs.js");
+const require_ee_signals_snapshot_summary = require("./snapshot-summary.cjs.js");
 const require_ee_signals_snapshot_timeline = require("./snapshot-timeline.cjs.js");
-const require_ee_signals_signal_delta_column = require("./signal-delta-column.cjs.js");
+const require_ee_signals_snapshot_timeline_data = require("./snapshot-timeline-data.cjs.js");
+const require_Txt = require("../../Txt-_00wWxTd.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ee/signals/theme-compare.tsx
@@ -72,7 +72,11 @@ function ThemeCompare({ entityId, entityType, signalNames, snapshots, totalSnaps
 						variant: "caption",
 						tone: "muted",
 						className: "rounded-md border border-border px-2 py-1 tabular-nums",
-						children: require_ee_signals_sankey_signals_data.snapshotSummaryLabel(fromSnapshot, flows[fromIndex])
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ee_signals_snapshot_summary.SnapshotSummary, {
+							snapshot: fromSnapshot,
+							flow: flows[fromIndex],
+							label: "Earlier snapshot"
+						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
 						as: "span",
@@ -85,12 +89,16 @@ function ThemeCompare({ entityId, entityType, signalNames, snapshots, totalSnaps
 						variant: "caption",
 						tone: "muted",
 						className: "rounded-md border border-border px-2 py-1 tabular-nums",
-						children: require_ee_signals_sankey_signals_data.snapshotSummaryLabel(toSnapshot, flows[toIndex])
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ee_signals_snapshot_summary.SnapshotSummary, {
+							snapshot: toSnapshot,
+							flow: flows[toIndex],
+							label: "Later snapshot"
+						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
 						variant: "caption",
 						tone: "muted",
-						children: grabbedPoint === void 0 ? "Click a landmark to move the nearest point · click a point to grab it." : "Point grabbed — click a landmark to place it."
+						children: grabbedPoint === void 0 ? "Click a landmark to move the nearest point. Click a point to grab it." : "Point grabbed. Click a landmark to place it."
 					})
 				]
 			}),

package/dist/ee/signals/theme-compare.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-compare.cjs.js","names":["useState","useThemeFlows","timelineTickPositions","TimelineTrack","Txt","snapshotSummaryLabel","SignalsFrameLoadingSkeleton","SignalDeltaColumn"],"sources":["../../../src/ee/signals/theme-compare.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { useThemeFlows } from './hooks/use-theme-flows';\nimport { snapshotSummaryLabel } from './sankey-signals-data';\nimport { SignalDeltaColumn } from './signal-delta-column';\nimport { SignalsFrameLoadingSkeleton } from './signals-loading-skeleton';\nimport { TimelineTrack } from './snapshot-timeline';\nimport type { TimelineMarkerKind } from './snapshot-timeline';\nimport { timelineTickPositions } from './snapshot-timeline-data';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport type { ThemeSnapshot, TraceSignalName } from './types';\nimport { Txt } from '@/ds/components/Txt';\n\n/**\n * Compare mode: two interchangeable points on the shared time axis show how\n * each signal's theme mix moved between them (always read earlier → later),\n * with per-theme sparklines across every landmark in range. Clicking an\n * unmarked landmark moves the nearest point; clicking a marked landmark grabs\n * that point so the next click moves it specifically.\n */\nexport function ThemeCompare({\n  entityId,\n  entityType,\n  signalNames,\n  snapshots,\n  totalSnapshots,\n  onThemeSelect,\n}: {\n  entityId: string;\n  entityType: string;\n  signalNames: TraceSignalName[];\n  snapshots: ThemeSnapshot[];\n  totalSnapshots: number;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\n  const [pointIndexes, setPointIndexes] = useState<[number, number]>();\n  const [grabbedPoint, setGrabbedPoint] = useState<0 | 1>();\n  const lastIndex = snapshots.length - 1;\n  const points: [number, number] = [\n    Math.min(pointIndexes?.[0] ?? 0, lastIndex),\n    Math.min(pointIndexes?.[1] ?? lastIndex, lastIndex),\n  ];\n  // Compare always reads earlier → later regardless of which point moved last.\n  const fromIndex = Math.min(points[0], points[1]);\n  const toIndex = Math.max(points[0], points[1]);\n  const flowQueries = useThemeFlows(\n    entityId,\n    entityType,\n    signalNames,\n    snapshots.map(snapshot => snapshot.snapshotId),\n  );\n  const flows = flowQueries.map(query => query.data);\n  const fromFlow = flows[fromIndex];\n  const toFlow = flows[toIndex];\n  const positions = timelineTickPositions(snapshots);\n  const fromSnapshot = snapshots[fromIndex];\n  const toSnapshot = snapshots[toIndex];\n\n  if (!fromSnapshot || !toSnapshot) return null;\n\n  // The two points are interchangeable: an unmarked tick moves whichever\n  // point is nearest on the track; a marked tick grabs that point so the next\n  // click moves it specifically (covers moving a point past the other).\n  const handleTickSelect = (index: number) => {\n    if (grabbedPoint !== undefined) {\n      setPointIndexes(grabbedPoint === 0 ? [index, points[1]] : [points[0], index]);\n      setGrabbedPoint(undefined);\n      return;\n    }\n    const pointAtIndex = points[0] === index ? 0 : points[1] === index ? 1 : undefined;\n    if (pointAtIndex !== undefined) {\n      setGrabbedPoint(pointAtIndex);\n      return;\n    }\n    const selectedPosition = positions[index];\n    const firstPointPosition = positions[points[0]];\n    const secondPointPosition = positions[points[1]];\n    if (selectedPosition === undefined || firstPointPosition === undefined || secondPointPosition === undefined) return;\n\n    const distanceToFirst = Math.abs(selectedPosition - firstPointPosition);\n    const distanceToSecond = Math.abs(selectedPosition - secondPointPosition);\n    setPointIndexes(distanceToFirst <= distanceToSecond ? [index, points[1]] : [points[0], index]);\n  };\n\n  const markers = new Map<number, TimelineMarkerKind>([\n    [points[0], 'compare-point'],\n    [points[1], 'compare-point'],\n  ]);\n  const grabbedIndex = grabbedPoint === undefined ? undefined : points[grabbedPoint];\n\n  return (\n    <section aria-label=\"Snapshot comparison\" className=\"space-y-4\">\n      <div className=\"flex flex-wrap items-center gap-3 px-3 py-2.5 sm:px-4\">\n        <TimelineTrack\n          snapshots={snapshots}\n          totalCount={totalSnapshots}\n          markers={markers}\n          grabbedIndex={grabbedIndex}\n          onTickSelect={handleTickSelect}\n        />\n      </div>\n      <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1.5\">\n        <Txt\n          variant=\"caption\"\n          tone=\"muted\"\n\n          className=\"rounded-md border border-border px-2 py-1 tabular-nums\"\n        >\n          {snapshotSummaryLabel(fromSnapshot, flows[fromIndex])}\n        </Txt>\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\" aria-hidden=\"true\">\n          →\n        </Txt>\n        <Txt\n          variant=\"caption\"\n          tone=\"muted\"\n\n          className=\"rounded-md border border-border px-2 py-1 tabular-nums\"\n        >\n          {snapshotSummaryLabel(toSnapshot, flows[toIndex])}\n        </Txt>\n        <Txt variant=\"caption\" tone=\"muted\">\n          {grabbedPoint === undefined\n            ? 'Click a landmark to move the nearest point · click a point to grab it.'\n            : 'Point grabbed — click a landmark to place it.'}\n        </Txt>\n      </div>\n      {fromIndex === toIndex ? (\n        <Txt tone=\"muted\" className=\"rounded-lg border border-border bg-background p-6\">\n          Pick two different landmarks on the timeline to compare them.\n        </Txt>\n      ) : !fromFlow || !toFlow ? (\n        <SignalsFrameLoadingSkeleton />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4\">\n          {signalNames.map(signalName => (\n            <SignalDeltaColumn\n              key={signalName}\n              signalName={signalName}\n              fromFlow={fromFlow}\n              toFlow={toFlow}\n              flows={flows}\n              positions={positions}\n              fromIndex={fromIndex}\n              toIndex={toIndex}\n              onThemeSelect={onThemeSelect}\n            />\n          ))}\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-compare.cjs.js","names":["useState","useThemeFlows","timelineTickPositions","TimelineTrack","Txt","SnapshotSummary","SignalsFrameLoadingSkeleton","SignalDeltaColumn"],"sources":["../../../src/ee/signals/theme-compare.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { useThemeFlows } from './hooks/use-theme-flows';\nimport { SignalDeltaColumn } from './signal-delta-column';\nimport { SignalsFrameLoadingSkeleton } from './signals-loading-skeleton';\nimport { SnapshotSummary } from './snapshot-summary';\nimport { TimelineTrack } from './snapshot-timeline';\nimport type { TimelineMarkerKind } from './snapshot-timeline';\nimport { timelineTickPositions } from './snapshot-timeline-data';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport type { ThemeSnapshot, TraceSignalName } from './types';\nimport { Txt } from '@/ds/components/Txt';\n\n/**\n * Compare mode: two interchangeable points on the shared time axis show how\n * each signal's theme mix moved between them (always read earlier → later),\n * with per-theme sparklines across every landmark in range. Clicking an\n * unmarked landmark moves the nearest point; clicking a marked landmark grabs\n * that point so the next click moves it specifically.\n */\nexport function ThemeCompare({\n  entityId,\n  entityType,\n  signalNames,\n  snapshots,\n  totalSnapshots,\n  onThemeSelect,\n}: {\n  entityId: string;\n  entityType: string;\n  signalNames: TraceSignalName[];\n  snapshots: ThemeSnapshot[];\n  totalSnapshots: number;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\n  const [pointIndexes, setPointIndexes] = useState<[number, number]>();\n  const [grabbedPoint, setGrabbedPoint] = useState<0 | 1>();\n  const lastIndex = snapshots.length - 1;\n  const points: [number, number] = [\n    Math.min(pointIndexes?.[0] ?? 0, lastIndex),\n    Math.min(pointIndexes?.[1] ?? lastIndex, lastIndex),\n  ];\n  // Compare always reads earlier → later regardless of which point moved last.\n  const fromIndex = Math.min(points[0], points[1]);\n  const toIndex = Math.max(points[0], points[1]);\n  const flowQueries = useThemeFlows(\n    entityId,\n    entityType,\n    signalNames,\n    snapshots.map(snapshot => snapshot.snapshotId),\n  );\n  const flows = flowQueries.map(query => query.data);\n  const fromFlow = flows[fromIndex];\n  const toFlow = flows[toIndex];\n  const positions = timelineTickPositions(snapshots);\n  const fromSnapshot = snapshots[fromIndex];\n  const toSnapshot = snapshots[toIndex];\n\n  if (!fromSnapshot || !toSnapshot) return null;\n\n  // The two points are interchangeable: an unmarked tick moves whichever\n  // point is nearest on the track; a marked tick grabs that point so the next\n  // click moves it specifically (covers moving a point past the other).\n  const handleTickSelect = (index: number) => {\n    if (grabbedPoint !== undefined) {\n      setPointIndexes(grabbedPoint === 0 ? [index, points[1]] : [points[0], index]);\n      setGrabbedPoint(undefined);\n      return;\n    }\n    const pointAtIndex = points[0] === index ? 0 : points[1] === index ? 1 : undefined;\n    if (pointAtIndex !== undefined) {\n      setGrabbedPoint(pointAtIndex);\n      return;\n    }\n    const selectedPosition = positions[index];\n    const firstPointPosition = positions[points[0]];\n    const secondPointPosition = positions[points[1]];\n    if (selectedPosition === undefined || firstPointPosition === undefined || secondPointPosition === undefined) return;\n\n    const distanceToFirst = Math.abs(selectedPosition - firstPointPosition);\n    const distanceToSecond = Math.abs(selectedPosition - secondPointPosition);\n    setPointIndexes(distanceToFirst <= distanceToSecond ? [index, points[1]] : [points[0], index]);\n  };\n\n  const markers = new Map<number, TimelineMarkerKind>([\n    [points[0], 'compare-point'],\n    [points[1], 'compare-point'],\n  ]);\n  const grabbedIndex = grabbedPoint === undefined ? undefined : points[grabbedPoint];\n\n  return (\n    <section aria-label=\"Snapshot comparison\" className=\"space-y-4\">\n      <div className=\"flex flex-wrap items-center gap-3 px-3 py-2.5 sm:px-4\">\n        <TimelineTrack\n          snapshots={snapshots}\n          totalCount={totalSnapshots}\n          markers={markers}\n          grabbedIndex={grabbedIndex}\n          onTickSelect={handleTickSelect}\n        />\n      </div>\n      <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1.5\">\n        <Txt\n          variant=\"caption\"\n          tone=\"muted\"\n\n          className=\"rounded-md border border-border px-2 py-1 tabular-nums\"\n        >\n          <SnapshotSummary snapshot={fromSnapshot} flow={flows[fromIndex]} label=\"Earlier snapshot\" />\n        </Txt>\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\" aria-hidden=\"true\">\n          →\n        </Txt>\n        <Txt\n          variant=\"caption\"\n          tone=\"muted\"\n\n          className=\"rounded-md border border-border px-2 py-1 tabular-nums\"\n        >\n          <SnapshotSummary snapshot={toSnapshot} flow={flows[toIndex]} label=\"Later snapshot\" />\n        </Txt>\n        <Txt variant=\"caption\" tone=\"muted\">\n          {grabbedPoint === undefined\n            ? 'Click a landmark to move the nearest point. Click a point to grab it.'\n            : 'Point grabbed. Click a landmark to place it.'}\n        </Txt>\n      </div>\n      {fromIndex === toIndex ? (\n        <Txt tone=\"muted\" className=\"rounded-lg border border-border bg-background p-6\">\n          Pick two different landmarks on the timeline to compare them.\n        </Txt>\n      ) : !fromFlow || !toFlow ? (\n        <SignalsFrameLoadingSkeleton />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4\">\n          {signalNames.map(signalName => (\n            <SignalDeltaColumn\n              key={signalName}\n              signalName={signalName}\n              fromFlow={fromFlow}\n              toFlow={toFlow}\n              flows={flows}\n              positions={positions}\n              fromIndex={fromIndex}\n              toIndex={toIndex}\n              onThemeSelect={onThemeSelect}\n            />\n          ))}\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/ee/signals/theme-compare.es.js

@@ -1,10 +1,10 @@
-import { t as Txt } from "../../Txt-BM6TVV_c.js";
-import { snapshotSummaryLabel } from "./sankey-signals-data.es.js";
 import { useThemeFlows } from "./hooks/use-theme-flows.es.js";
+import { SignalDeltaColumn } from "./signal-delta-column.es.js";
 import { SignalsFrameLoadingSkeleton } from "./signals-loading-skeleton.es.js";
-import { timelineTickPositions } from "./snapshot-timeline-data.es.js";
+import { SnapshotSummary } from "./snapshot-summary.es.js";
 import { TimelineTrack } from "./snapshot-timeline.es.js";
-import { SignalDeltaColumn } from "./signal-delta-column.es.js";
+import { timelineTickPositions } from "./snapshot-timeline-data.es.js";
+import { t as Txt } from "../../Txt-5efBsb2p.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/ee/signals/theme-compare.tsx
@@ -71,7 +71,11 @@ function ThemeCompare({ entityId, entityType, signalNames, snapshots, totalSnaps
 						variant: "caption",
 						tone: "muted",
 						className: "rounded-md border border-border px-2 py-1 tabular-nums",
-						children: snapshotSummaryLabel(fromSnapshot, flows[fromIndex])
+						children: /* @__PURE__ */ jsx(SnapshotSummary, {
+							snapshot: fromSnapshot,
+							flow: flows[fromIndex],
+							label: "Earlier snapshot"
+						})
 					}),
 					/* @__PURE__ */ jsx(Txt, {
 						as: "span",
@@ -84,12 +88,16 @@ function ThemeCompare({ entityId, entityType, signalNames, snapshots, totalSnaps
 						variant: "caption",
 						tone: "muted",
 						className: "rounded-md border border-border px-2 py-1 tabular-nums",
-						children: snapshotSummaryLabel(toSnapshot, flows[toIndex])
+						children: /* @__PURE__ */ jsx(SnapshotSummary, {
+							snapshot: toSnapshot,
+							flow: flows[toIndex],
+							label: "Later snapshot"
+						})
 					}),
 					/* @__PURE__ */ jsx(Txt, {
 						variant: "caption",
 						tone: "muted",
-						children: grabbedPoint === void 0 ? "Click a landmark to move the nearest point · click a point to grab it." : "Point grabbed — click a landmark to place it."
+						children: grabbedPoint === void 0 ? "Click a landmark to move the nearest point. Click a point to grab it." : "Point grabbed. Click a landmark to place it."
 					})
 				]
 			}),

package/dist/ee/signals/theme-compare.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-compare.es.js","names":[],"sources":["../../../src/ee/signals/theme-compare.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { useThemeFlows } from './hooks/use-theme-flows';\nimport { snapshotSummaryLabel } from './sankey-signals-data';\nimport { SignalDeltaColumn } from './signal-delta-column';\nimport { SignalsFrameLoadingSkeleton } from './signals-loading-skeleton';\nimport { TimelineTrack } from './snapshot-timeline';\nimport type { TimelineMarkerKind } from './snapshot-timeline';\nimport { timelineTickPositions } from './snapshot-timeline-data';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport type { ThemeSnapshot, TraceSignalName } from './types';\nimport { Txt } from '@/ds/components/Txt';\n\n/**\n * Compare mode: two interchangeable points on the shared time axis show how\n * each signal's theme mix moved between them (always read earlier → later),\n * with per-theme sparklines across every landmark in range. Clicking an\n * unmarked landmark moves the nearest point; clicking a marked landmark grabs\n * that point so the next click moves it specifically.\n */\nexport function ThemeCompare({\n  entityId,\n  entityType,\n  signalNames,\n  snapshots,\n  totalSnapshots,\n  onThemeSelect,\n}: {\n  entityId: string;\n  entityType: string;\n  signalNames: TraceSignalName[];\n  snapshots: ThemeSnapshot[];\n  totalSnapshots: number;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\n  const [pointIndexes, setPointIndexes] = useState<[number, number]>();\n  const [grabbedPoint, setGrabbedPoint] = useState<0 | 1>();\n  const lastIndex = snapshots.length - 1;\n  const points: [number, number] = [\n    Math.min(pointIndexes?.[0] ?? 0, lastIndex),\n    Math.min(pointIndexes?.[1] ?? lastIndex, lastIndex),\n  ];\n  // Compare always reads earlier → later regardless of which point moved last.\n  const fromIndex = Math.min(points[0], points[1]);\n  const toIndex = Math.max(points[0], points[1]);\n  const flowQueries = useThemeFlows(\n    entityId,\n    entityType,\n    signalNames,\n    snapshots.map(snapshot => snapshot.snapshotId),\n  );\n  const flows = flowQueries.map(query => query.data);\n  const fromFlow = flows[fromIndex];\n  const toFlow = flows[toIndex];\n  const positions = timelineTickPositions(snapshots);\n  const fromSnapshot = snapshots[fromIndex];\n  const toSnapshot = snapshots[toIndex];\n\n  if (!fromSnapshot || !toSnapshot) return null;\n\n  // The two points are interchangeable: an unmarked tick moves whichever\n  // point is nearest on the track; a marked tick grabs that point so the next\n  // click moves it specifically (covers moving a point past the other).\n  const handleTickSelect = (index: number) => {\n    if (grabbedPoint !== undefined) {\n      setPointIndexes(grabbedPoint === 0 ? [index, points[1]] : [points[0], index]);\n      setGrabbedPoint(undefined);\n      return;\n    }\n    const pointAtIndex = points[0] === index ? 0 : points[1] === index ? 1 : undefined;\n    if (pointAtIndex !== undefined) {\n      setGrabbedPoint(pointAtIndex);\n      return;\n    }\n    const selectedPosition = positions[index];\n    const firstPointPosition = positions[points[0]];\n    const secondPointPosition = positions[points[1]];\n    if (selectedPosition === undefined || firstPointPosition === undefined || secondPointPosition === undefined) return;\n\n    const distanceToFirst = Math.abs(selectedPosition - firstPointPosition);\n    const distanceToSecond = Math.abs(selectedPosition - secondPointPosition);\n    setPointIndexes(distanceToFirst <= distanceToSecond ? [index, points[1]] : [points[0], index]);\n  };\n\n  const markers = new Map<number, TimelineMarkerKind>([\n    [points[0], 'compare-point'],\n    [points[1], 'compare-point'],\n  ]);\n  const grabbedIndex = grabbedPoint === undefined ? undefined : points[grabbedPoint];\n\n  return (\n    <section aria-label=\"Snapshot comparison\" className=\"space-y-4\">\n      <div className=\"flex flex-wrap items-center gap-3 px-3 py-2.5 sm:px-4\">\n        <TimelineTrack\n          snapshots={snapshots}\n          totalCount={totalSnapshots}\n          markers={markers}\n          grabbedIndex={grabbedIndex}\n          onTickSelect={handleTickSelect}\n        />\n      </div>\n      <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1.5\">\n        <Txt\n          variant=\"caption\"\n          tone=\"muted\"\n\n          className=\"rounded-md border border-border px-2 py-1 tabular-nums\"\n        >\n          {snapshotSummaryLabel(fromSnapshot, flows[fromIndex])}\n        </Txt>\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\" aria-hidden=\"true\">\n          →\n        </Txt>\n        <Txt\n          variant=\"caption\"\n          tone=\"muted\"\n\n          className=\"rounded-md border border-border px-2 py-1 tabular-nums\"\n        >\n          {snapshotSummaryLabel(toSnapshot, flows[toIndex])}\n        </Txt>\n        <Txt variant=\"caption\" tone=\"muted\">\n          {grabbedPoint === undefined\n            ? 'Click a landmark to move the nearest point · click a point to grab it.'\n            : 'Point grabbed — click a landmark to place it.'}\n        </Txt>\n      </div>\n      {fromIndex === toIndex ? (\n        <Txt tone=\"muted\" className=\"rounded-lg border border-border bg-background p-6\">\n          Pick two different landmarks on the timeline to compare them.\n        </Txt>\n      ) : !fromFlow || !toFlow ? (\n        <SignalsFrameLoadingSkeleton />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4\">\n          {signalNames.map(signalName => (\n            <SignalDeltaColumn\n              key={signalName}\n              signalName={signalName}\n              fromFlow={fromFlow}\n              toFlow={toFlow}\n              flows={flows}\n              positions={positions}\n              fromIndex={fromIndex}\n              toIndex={toIndex}\n              onThemeSelect={onThemeSelect}\n            />\n          ))}\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-compare.es.js","names":[],"sources":["../../../src/ee/signals/theme-compare.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { useThemeFlows } from './hooks/use-theme-flows';\nimport { SignalDeltaColumn } from './signal-delta-column';\nimport { SignalsFrameLoadingSkeleton } from './signals-loading-skeleton';\nimport { SnapshotSummary } from './snapshot-summary';\nimport { TimelineTrack } from './snapshot-timeline';\nimport type { TimelineMarkerKind } from './snapshot-timeline';\nimport { timelineTickPositions } from './snapshot-timeline-data';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport type { ThemeSnapshot, TraceSignalName } from './types';\nimport { Txt } from '@/ds/components/Txt';\n\n/**\n * Compare mode: two interchangeable points on the shared time axis show how\n * each signal's theme mix moved between them (always read earlier → later),\n * with per-theme sparklines across every landmark in range. Clicking an\n * unmarked landmark moves the nearest point; clicking a marked landmark grabs\n * that point so the next click moves it specifically.\n */\nexport function ThemeCompare({\n  entityId,\n  entityType,\n  signalNames,\n  snapshots,\n  totalSnapshots,\n  onThemeSelect,\n}: {\n  entityId: string;\n  entityType: string;\n  signalNames: TraceSignalName[];\n  snapshots: ThemeSnapshot[];\n  totalSnapshots: number;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\n  const [pointIndexes, setPointIndexes] = useState<[number, number]>();\n  const [grabbedPoint, setGrabbedPoint] = useState<0 | 1>();\n  const lastIndex = snapshots.length - 1;\n  const points: [number, number] = [\n    Math.min(pointIndexes?.[0] ?? 0, lastIndex),\n    Math.min(pointIndexes?.[1] ?? lastIndex, lastIndex),\n  ];\n  // Compare always reads earlier → later regardless of which point moved last.\n  const fromIndex = Math.min(points[0], points[1]);\n  const toIndex = Math.max(points[0], points[1]);\n  const flowQueries = useThemeFlows(\n    entityId,\n    entityType,\n    signalNames,\n    snapshots.map(snapshot => snapshot.snapshotId),\n  );\n  const flows = flowQueries.map(query => query.data);\n  const fromFlow = flows[fromIndex];\n  const toFlow = flows[toIndex];\n  const positions = timelineTickPositions(snapshots);\n  const fromSnapshot = snapshots[fromIndex];\n  const toSnapshot = snapshots[toIndex];\n\n  if (!fromSnapshot || !toSnapshot) return null;\n\n  // The two points are interchangeable: an unmarked tick moves whichever\n  // point is nearest on the track; a marked tick grabs that point so the next\n  // click moves it specifically (covers moving a point past the other).\n  const handleTickSelect = (index: number) => {\n    if (grabbedPoint !== undefined) {\n      setPointIndexes(grabbedPoint === 0 ? [index, points[1]] : [points[0], index]);\n      setGrabbedPoint(undefined);\n      return;\n    }\n    const pointAtIndex = points[0] === index ? 0 : points[1] === index ? 1 : undefined;\n    if (pointAtIndex !== undefined) {\n      setGrabbedPoint(pointAtIndex);\n      return;\n    }\n    const selectedPosition = positions[index];\n    const firstPointPosition = positions[points[0]];\n    const secondPointPosition = positions[points[1]];\n    if (selectedPosition === undefined || firstPointPosition === undefined || secondPointPosition === undefined) return;\n\n    const distanceToFirst = Math.abs(selectedPosition - firstPointPosition);\n    const distanceToSecond = Math.abs(selectedPosition - secondPointPosition);\n    setPointIndexes(distanceToFirst <= distanceToSecond ? [index, points[1]] : [points[0], index]);\n  };\n\n  const markers = new Map<number, TimelineMarkerKind>([\n    [points[0], 'compare-point'],\n    [points[1], 'compare-point'],\n  ]);\n  const grabbedIndex = grabbedPoint === undefined ? undefined : points[grabbedPoint];\n\n  return (\n    <section aria-label=\"Snapshot comparison\" className=\"space-y-4\">\n      <div className=\"flex flex-wrap items-center gap-3 px-3 py-2.5 sm:px-4\">\n        <TimelineTrack\n          snapshots={snapshots}\n          totalCount={totalSnapshots}\n          markers={markers}\n          grabbedIndex={grabbedIndex}\n          onTickSelect={handleTickSelect}\n        />\n      </div>\n      <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1.5\">\n        <Txt\n          variant=\"caption\"\n          tone=\"muted\"\n\n          className=\"rounded-md border border-border px-2 py-1 tabular-nums\"\n        >\n          <SnapshotSummary snapshot={fromSnapshot} flow={flows[fromIndex]} label=\"Earlier snapshot\" />\n        </Txt>\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\" aria-hidden=\"true\">\n          →\n        </Txt>\n        <Txt\n          variant=\"caption\"\n          tone=\"muted\"\n\n          className=\"rounded-md border border-border px-2 py-1 tabular-nums\"\n        >\n          <SnapshotSummary snapshot={toSnapshot} flow={flows[toIndex]} label=\"Later snapshot\" />\n        </Txt>\n        <Txt variant=\"caption\" tone=\"muted\">\n          {grabbedPoint === undefined\n            ? 'Click a landmark to move the nearest point. Click a point to grab it.'\n            : 'Point grabbed. Click a landmark to place it.'}\n        </Txt>\n      </div>\n      {fromIndex === toIndex ? (\n        <Txt tone=\"muted\" className=\"rounded-lg border border-border bg-background p-6\">\n          Pick two different landmarks on the timeline to compare them.\n        </Txt>\n      ) : !fromFlow || !toFlow ? (\n        <SignalsFrameLoadingSkeleton />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4\">\n          {signalNames.map(signalName => (\n            <SignalDeltaColumn\n              key={signalName}\n              signalName={signalName}\n              fromFlow={fromFlow}\n              toFlow={toFlow}\n              flows={flows}\n              positions={positions}\n              fromIndex={fromIndex}\n              toIndex={toIndex}\n              onThemeSelect={onThemeSelect}\n            />\n          ))}\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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"}