@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

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

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const ee_signals_signalFormatting = require('./signal-formatting.cjs.js');
 const ee_signals_snapshotTimelineData = require('./snapshot-timeline-data.cjs.js');
-const Button = require('../../Button-C2dx_QZN.cjs');
+const Button = require('../../Button-CVewl8nT.cjs');
 
 const MARKER_TICK_CLASSES = {
   selected: "bg-accent1 border-accent1",
@@ -22,7 +22,7 @@ function TimelineTrack({
   const positions = ee_signals_snapshotTimelineData.timelineTickPositions(snapshots);
   const dayLabels = ee_signals_snapshotTimelineData.timelineDayLabels(snapshots);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-label": "Snapshot landmarks", className: "relative mx-2 h-12 min-w-40 flex-1", role: "group", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "bg-border1 absolute inset-x-0 top-4 h-0.5 -translate-y-1/2 rounded-full" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "bg-border absolute inset-x-0 top-4 h-0.5 -translate-y-1/2 rounded-full" }),
     snapshots.map((snapshot, index) => {
       const marker = markers.get(index);
       const grabbed = marker === "compare-point" && index === grabbedIndex;
@@ -32,7 +32,7 @@ function TimelineTrack({
           "aria-current": marker === "selected" ? "true" : void 0,
           "aria-label": ee_signals_snapshotTimelineData.snapshotTickLabel(snapshot, totalCount),
           "aria-pressed": marker === "compare-point" ? grabbed : void 0,
-          className: `absolute top-4 size-3.5 -translate-1/2 rounded-full border-2 transition-colors ${marker ? MARKER_TICK_CLASSES[marker] : "border-surface2 bg-surface4 hover:bg-accent1/60"} ${grabbed ? "ring-accent1/70 ring-2" : ""}`,
+          className: `absolute top-4 size-3.5 -translate-1/2 rounded-full border-2 ${marker ? MARKER_TICK_CLASSES[marker] : "border-background bg-muted hover:bg-accent1/60"} ${grabbed ? "ring-accent1/70 ring-2" : ""}`,
           "data-marker": marker,
           onClick: () => onTickSelect(index),
           style: { left: `${positions[index]}%` },
@@ -46,7 +46,7 @@ function TimelineTrack({
         "span",
         {
           "aria-hidden": "true",
-          className: "text-ui-xs text-neutral3 absolute top-7 -translate-x-1/2 font-mono tabular-nums",
+          className: "text-meta text-muted-foreground absolute top-7 -translate-x-1/2 font-mono tabular-nums",
           style: { left: `${positions[index]}%` },
           children: dayLabels[index]
         },
@@ -96,7 +96,7 @@ function SnapshotTimeline({
           children: isPlaying ? "Pause" : "Play"
         }
       ) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-sm text-neutral4 font-mono tabular-nums", "data-testid": "snapshot-summary", children: summary })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-caption text-muted-foreground font-mono tabular-nums", "data-testid": "snapshot-summary", children: summary })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { "aria-live": "polite", className: "sr-only", children: statusParts.join(" · ") })
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"snapshot-timeline.cjs.js","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';\n\nexport type TimelineMarkerKind = 'selected' | 'compare-point';\n\nconst MARKER_TICK_CLASSES: Record<TimelineMarkerKind, string> = {\n  selected: 'bg-accent1 border-accent1',\n  'compare-point': 'bg-accent1 border-accent1',\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=\"bg-border1 absolute inset-x-0 top-4 h-0.5 -translate-y-1/2 rounded-full\" />\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 transition-colors ${\n              marker ? MARKER_TICK_CLASSES[marker] : 'border-surface2 bg-surface4 hover:bg-accent1/60'\n            } ${grabbed ? 'ring-accent1/70 ring-2' : ''}`}\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          <span\n            key={`day-${snapshot.snapshotId}`}\n            aria-hidden=\"true\"\n            className=\"text-ui-xs text-neutral3 absolute top-7 -translate-x-1/2 font-mono tabular-nums\"\n            style={{ left: `${positions[index]}%` }}\n          >\n            {dayLabels[index]}\n          </span>\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            variant=\"outline\"\n            icon={isPlaying ? <Pause aria-hidden=\"true\" /> : <Play aria-hidden=\"true\" />}\n          >\n            {isPlaying ? 'Pause' : 'Play'}\n          </Button>\n        ) : null}\n        <p className=\"text-ui-sm text-neutral4 font-mono tabular-nums\" data-testid=\"snapshot-summary\">\n          {summary}\n        </p>\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"],"names":["timelineTickPositions","timelineDayLabels","jsx","snapshotTickLabel","formatSnapshotCutoff","formatSnapshotWindow","traceLabel","jsxs","Button","Pause","Play"],"mappings":"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"}
+{"version":3,"file":"snapshot-timeline.cjs.js","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';\n\nexport type TimelineMarkerKind = 'selected' | 'compare-point';\n\nconst MARKER_TICK_CLASSES: Record<TimelineMarkerKind, string> = {\n  selected: 'bg-accent1 border-accent1',\n  'compare-point': 'bg-accent1 border-accent1',\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=\"bg-border absolute inset-x-0 top-4 h-0.5 -translate-y-1/2 rounded-full\" />\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-accent1/60'\n            } ${grabbed ? 'ring-accent1/70 ring-2' : ''}`}\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          <span\n            key={`day-${snapshot.snapshotId}`}\n            aria-hidden=\"true\"\n            className=\"text-meta text-muted-foreground absolute top-7 -translate-x-1/2 font-mono tabular-nums\"\n            style={{ left: `${positions[index]}%` }}\n          >\n            {dayLabels[index]}\n          </span>\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            variant=\"outline\"\n            icon={isPlaying ? <Pause aria-hidden=\"true\" /> : <Play aria-hidden=\"true\" />}\n          >\n            {isPlaying ? 'Pause' : 'Play'}\n          </Button>\n        ) : null}\n        <p className=\"text-caption text-muted-foreground font-mono tabular-nums\" data-testid=\"snapshot-summary\">\n          {summary}\n        </p>\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"],"names":["timelineTickPositions","timelineDayLabels","jsx","snapshotTickLabel","formatSnapshotCutoff","formatSnapshotWindow","traceLabel","jsxs","Button","Pause","Play"],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Pause, Play } from 'lucide-react';
 import { formatSnapshotCutoff, formatSnapshotWindow, traceLabel } from './signal-formatting.es.js';
 import { timelineTickPositions, timelineDayLabels, snapshotTickLabel } from './snapshot-timeline-data.es.js';
-import { B as Button } from '../../Button-DS6O6fvU.js';
+import { B as Button } from '../../Button-cWcBEd-G.js';
 
 const MARKER_TICK_CLASSES = {
   selected: "bg-accent1 border-accent1",
@@ -18,7 +18,7 @@ function TimelineTrack({
   const positions = timelineTickPositions(snapshots);
   const dayLabels = timelineDayLabels(snapshots);
   return /* @__PURE__ */ jsxs("div", { "aria-label": "Snapshot landmarks", className: "relative mx-2 h-12 min-w-40 flex-1", role: "group", children: [
-    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "bg-border1 absolute inset-x-0 top-4 h-0.5 -translate-y-1/2 rounded-full" }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "bg-border absolute inset-x-0 top-4 h-0.5 -translate-y-1/2 rounded-full" }),
     snapshots.map((snapshot, index) => {
       const marker = markers.get(index);
       const grabbed = marker === "compare-point" && index === grabbedIndex;
@@ -28,7 +28,7 @@ function TimelineTrack({
           "aria-current": marker === "selected" ? "true" : void 0,
           "aria-label": snapshotTickLabel(snapshot, totalCount),
           "aria-pressed": marker === "compare-point" ? grabbed : void 0,
-          className: `absolute top-4 size-3.5 -translate-1/2 rounded-full border-2 transition-colors ${marker ? MARKER_TICK_CLASSES[marker] : "border-surface2 bg-surface4 hover:bg-accent1/60"} ${grabbed ? "ring-accent1/70 ring-2" : ""}`,
+          className: `absolute top-4 size-3.5 -translate-1/2 rounded-full border-2 ${marker ? MARKER_TICK_CLASSES[marker] : "border-background bg-muted hover:bg-accent1/60"} ${grabbed ? "ring-accent1/70 ring-2" : ""}`,
           "data-marker": marker,
           onClick: () => onTickSelect(index),
           style: { left: `${positions[index]}%` },
@@ -42,7 +42,7 @@ function TimelineTrack({
         "span",
         {
           "aria-hidden": "true",
-          className: "text-ui-xs text-neutral3 absolute top-7 -translate-x-1/2 font-mono tabular-nums",
+          className: "text-meta text-muted-foreground absolute top-7 -translate-x-1/2 font-mono tabular-nums",
           style: { left: `${positions[index]}%` },
           children: dayLabels[index]
         },
@@ -92,7 +92,7 @@ function SnapshotTimeline({
           children: isPlaying ? "Pause" : "Play"
         }
       ) : null,
-      /* @__PURE__ */ jsx("p", { className: "text-ui-sm text-neutral4 font-mono tabular-nums", "data-testid": "snapshot-summary", children: summary })
+      /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground font-mono tabular-nums", "data-testid": "snapshot-summary", children: summary })
     ] }),
     /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "sr-only", children: statusParts.join(" · ") })
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"snapshot-timeline.es.js","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';\n\nexport type TimelineMarkerKind = 'selected' | 'compare-point';\n\nconst MARKER_TICK_CLASSES: Record<TimelineMarkerKind, string> = {\n  selected: 'bg-accent1 border-accent1',\n  'compare-point': 'bg-accent1 border-accent1',\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=\"bg-border1 absolute inset-x-0 top-4 h-0.5 -translate-y-1/2 rounded-full\" />\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 transition-colors ${\n              marker ? MARKER_TICK_CLASSES[marker] : 'border-surface2 bg-surface4 hover:bg-accent1/60'\n            } ${grabbed ? 'ring-accent1/70 ring-2' : ''}`}\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          <span\n            key={`day-${snapshot.snapshotId}`}\n            aria-hidden=\"true\"\n            className=\"text-ui-xs text-neutral3 absolute top-7 -translate-x-1/2 font-mono tabular-nums\"\n            style={{ left: `${positions[index]}%` }}\n          >\n            {dayLabels[index]}\n          </span>\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            variant=\"outline\"\n            icon={isPlaying ? <Pause aria-hidden=\"true\" /> : <Play aria-hidden=\"true\" />}\n          >\n            {isPlaying ? 'Pause' : 'Play'}\n          </Button>\n        ) : null}\n        <p className=\"text-ui-sm text-neutral4 font-mono tabular-nums\" data-testid=\"snapshot-summary\">\n          {summary}\n        </p>\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"],"names":[],"mappings":";;;;;;AASA,MAAM,mBAAA,GAA0D;AAAA,EAC9D,QAAA,EAAU,2BAAA;AAAA,EACV,eAAA,EAAiB;AACnB,CAAA;AAQO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAOG;AACD,EAAA,MAAM,SAAA,GAAY,sBAAsB,SAAS,CAAA;AACjD,EAAA,MAAM,SAAA,GAAY,kBAAkB,SAAS,CAAA;AAE7C,EAAA,4BACG,KAAA,EAAA,EAAI,YAAA,EAAW,sBAAqB,SAAA,EAAU,oCAAA,EAAqC,MAAK,OAAA,EACvF,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,SAAA,EAAU,yEAAA,EAA0E,CAAA;AAAA,IAC3G,SAAA,CAAU,GAAA,CAAI,CAAC,QAAA,EAAU,KAAA,KAAU;AAClC,MAAA,MAAM,MAAA,GAAS,OAAA,CAAQ,GAAA,CAAI,KAAK,CAAA;AAChC,MAAA,MAAM,OAAA,GAAU,MAAA,KAAW,eAAA,IAAmB,KAAA,KAAU,YAAA;AACxD,MAAA,uBACE,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UAEC,cAAA,EAAc,MAAA,KAAW,UAAA,GAAa,MAAA,GAAS,MAAA;AAAA,UAC/C,YAAA,EAAY,iBAAA,CAAkB,QAAA,EAAU,UAAU,CAAA;AAAA,UAClD,cAAA,EAAc,MAAA,KAAW,eAAA,GAAkB,OAAA,GAAU,MAAA;AAAA,UACrD,SAAA,EAAW,CAAA,+EAAA,EACT,MAAA,GAAS,mBAAA,CAAoB,MAAM,IAAI,iDACzC,CAAA,CAAA,EAAI,OAAA,GAAU,wBAAA,GAA2B,EAAE,CAAA,CAAA;AAAA,UAC3C,aAAA,EAAa,MAAA;AAAA,UACb,OAAA,EAAS,MAAM,YAAA,CAAa,KAAK,CAAA;AAAA,UACjC,OAAO,EAAE,IAAA,EAAM,GAAG,SAAA,CAAU,KAAK,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,UACtC,IAAA,EAAK;AAAA,SAAA;AAAA,QAVA,QAAA,CAAS;AAAA,OAWhB;AAAA,IAEJ,CAAC,CAAA;AAAA,IACA,SAAA,CAAU,GAAA;AAAA,MAAI,CAAC,QAAA,EAAU,KAAA,KACxB,SAAA,CAAU,KAAK,CAAA,mBACb,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UAEC,aAAA,EAAY,MAAA;AAAA,UACZ,SAAA,EAAU,iFAAA;AAAA,UACV,OAAO,EAAE,IAAA,EAAM,GAAG,SAAA,CAAU,KAAK,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,UAErC,oBAAU,KAAK;AAAA,SAAA;AAAA,QALX,CAAA,IAAA,EAAO,SAAS,UAAU,CAAA;AAAA,OAMjC,GACE;AAAA;AACN,GAAA,EACF,CAAA;AAEJ;AAEO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,SAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAA,EAQG;AACD,EAAA,MAAM,QAAA,GAAW,UAAU,aAAa,CAAA;AAExC,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AAEtB,EAAA,MAAM,UAAA,GAAa,kBAAkB,QAAA,CAAS,KAAA;AAC9C,EAAA,MAAM,YAAA,GAAe,QAAA,CAAS,QAAA,GAC1B,oBAAA,CAAqB,QAAA,CAAS,QAAQ,CAAA,GACtC,oBAAA,CAAqB,QAAA,CAAS,SAAA,EAAW,QAAA,CAAS,OAAO,CAAA;AAC7D,EAAA,MAAM,WAAA,GAAc;AAAA,IAClB,CAAA,SAAA,EAAY,QAAA,CAAS,OAAO,CAAA,CAAA,EAAI,UAAU,CAAA,CAAA;AAAA,IAC1C,GAAI,QAAA,CAAS,QAAA,GACT,CAAC,CAAA,MAAA,EAAS,YAAY,CAAA,CAAA,EAAI,CAAA,OAAA,EAAU,oBAAA,CAAqB,QAAA,CAAS,WAAW,QAAA,CAAS,OAAO,CAAC,CAAA,CAAE,CAAA,GAChG,CAAC,YAAY,CAAA;AAAA,IACjB,UAAA,CAAW,SAAS,UAAU;AAAA,GAChC;AAEA,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAQ,YAAA,EAAW,mBAAA,EAAoB,WAAU,WAAA,EAC/C,QAAA,EAAA;AAAA,IAAA,SAAA,CAAU,MAAA,GAAS,CAAA,mBAClB,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,qBAAA,EACb,QAAA,kBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACA,UAAA;AAAA,QACA,OAAA,sBAAa,GAAA,CAAgC,CAAC,CAAC,aAAA,EAAe,UAAU,CAAC,CAAC,CAAA;AAAA,QAC1E,YAAA,EAAc;AAAA;AAAA,OAElB,CAAA,GACE,IAAA;AAAA,oBACJ,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAA,EACZ,QAAA,EAAA;AAAA,MAAA,SAAA,CAAU,SAAS,CAAA,mBAClB,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAY,YAAY,iBAAA,GAAoB,gBAAA;AAAA,UAC5C,OAAA,EAAS,MAAM,eAAA,CAAgB,CAAC,SAAS,CAAA;AAAA,UACzC,IAAA,EAAK,IAAA;AAAA,UACL,IAAA,EAAK,QAAA;AAAA,UACL,OAAA,EAAQ,SAAA;AAAA,UACR,IAAA,EAAM,SAAA,mBAAY,GAAA,CAAC,KAAA,EAAA,EAAM,aAAA,EAAY,QAAO,CAAA,mBAAK,GAAA,CAAC,IAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,UAEzE,sBAAY,OAAA,GAAU;AAAA;AAAA,OACzB,GACE,IAAA;AAAA,0BACH,GAAA,EAAA,EAAE,SAAA,EAAU,iDAAA,EAAkD,aAAA,EAAY,oBACxE,QAAA,EAAA,OAAA,EACH;AAAA,KAAA,EACF,CAAA;AAAA,oBAEA,GAAA,CAAC,OAAE,WAAA,EAAU,QAAA,EAAS,WAAU,SAAA,EAC7B,QAAA,EAAA,WAAA,CAAY,IAAA,CAAK,KAAK,CAAA,EACzB;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"snapshot-timeline.es.js","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';\n\nexport type TimelineMarkerKind = 'selected' | 'compare-point';\n\nconst MARKER_TICK_CLASSES: Record<TimelineMarkerKind, string> = {\n  selected: 'bg-accent1 border-accent1',\n  'compare-point': 'bg-accent1 border-accent1',\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=\"bg-border absolute inset-x-0 top-4 h-0.5 -translate-y-1/2 rounded-full\" />\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-accent1/60'\n            } ${grabbed ? 'ring-accent1/70 ring-2' : ''}`}\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          <span\n            key={`day-${snapshot.snapshotId}`}\n            aria-hidden=\"true\"\n            className=\"text-meta text-muted-foreground absolute top-7 -translate-x-1/2 font-mono tabular-nums\"\n            style={{ left: `${positions[index]}%` }}\n          >\n            {dayLabels[index]}\n          </span>\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            variant=\"outline\"\n            icon={isPlaying ? <Pause aria-hidden=\"true\" /> : <Play aria-hidden=\"true\" />}\n          >\n            {isPlaying ? 'Pause' : 'Play'}\n          </Button>\n        ) : null}\n        <p className=\"text-caption text-muted-foreground font-mono tabular-nums\" data-testid=\"snapshot-summary\">\n          {summary}\n        </p>\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"],"names":[],"mappings":"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"}

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

@@ -10,7 +10,11 @@ const ee_signals_signalColors = require('./signal-colors.cjs.js');
 const ee_signals_signalFormatting = require('./signal-formatting.cjs.js');
 const ee_signals_useTraceIntelligence = require('./use-trace-intelligence.cjs.js');
 const sankeyColor = require('../../sankeyColor-DHE7ggh8.cjs');
-const tooltip = require('../../tooltip-_cda-a7s.cjs');
+const tooltip = require('../../tooltip-FvWL16Xn.cjs');
+const primitives_raisedSurface = require('../../primitives/raised-surface.cjs.js');
+const primitives_transitions = require('../../primitives/transitions.cjs.js');
+const primitives_typography = require('../../primitives/typography.cjs.js');
+const utils_cn = require('../../cn-DG0X1KEP.cjs');
 
 const DRAG_SENSORS = [dnd.useMouseSensor, dnd.useTouchSensor, dnd.useKeyboardSensor];
 function projectedHeaderIndex(index, projection) {
@@ -99,7 +103,7 @@ function SortableSignalHeaders({
                       children: /* @__PURE__ */ jsxRuntime.jsxs(
                         "div",
                         {
-                          className: `relative inline-flex items-center justify-center rounded-md border border-transparent px-1 py-0.5 motion-safe:transition-[background-color,border-color,box-shadow,scale] motion-safe:duration-150 ${contentOffsetClass(anchor)} ${dragSnapshot.isDragging ? "scale-1.03 border-border2 bg-surface4 shadow-lg" : ""}`,
+                          className: `relative inline-flex items-center justify-center rounded-md border border-transparent px-1 py-0.5 motion-safe:transition-[background-color,border-color,box-shadow,scale] motion-safe:duration-150 ${contentOffsetClass(anchor)} ${dragSnapshot.isDragging ? `scale-1.03 ${primitives_raisedSurface.overlaySurfaceStyle}` : ""}`,
                           "data-header-anchor": anchor,
                           "data-testid": "signal-column-header-content",
                           children: [
@@ -107,7 +111,7 @@ function SortableSignalHeaders({
                               /* @__PURE__ */ jsxRuntime.jsx(
                                 tooltip.TooltipTrigger,
                                 {
-                                  className: "text-ui-sm cursor-default font-mono font-semibold tracking-wider",
+                                  className: "text-column cursor-default font-mono tracking-wider",
                                   "data-testid": "signal-column-header",
                                   style: { color: sankeyColor.nodeColor(ee_signals_signalColors.getSignalHue(signalName)) },
                                   children: label.toUpperCase()
@@ -121,7 +125,11 @@ function SortableSignalHeaders({
                                 ...dragProvided.dragHandleProps,
                                 "aria-disabled": reorderDisabled,
                                 "aria-label": `Reorder ${label}`,
-                                className: "text-neutral3 hover:text-neutral5 absolute top-1/2 ml-0.5 -translate-y-1/2 cursor-grab rounded-sm p-1 active:cursor-grabbing aria-disabled:cursor-wait aria-disabled:opacity-50",
+                                className: utils_cn.cn(
+                                  primitives_typography.quietTextHover,
+                                  primitives_transitions.controlStateColorTransition,
+                                  "absolute top-1/2 ml-0.5 -translate-y-1/2 cursor-grab rounded-sm p-1 active:cursor-grabbing aria-disabled:cursor-wait aria-disabled:opacity-50"
+                                ),
                                 style: { left: "100%" },
                                 title: `Drag to reorder the ${label} column`,
                                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { "aria-hidden": "true", className: "size-3.5" })

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

@@ -1 +1 @@
-{"version":3,"file":"sortable-signal-headers.cjs.js","sources":["../../../src/ee/signals/sortable-signal-headers.tsx"],"sourcesContent":["import type { DragStart, DragUpdate, DraggableStateSnapshot, DropResult, DroppableProvided } from '@hello-pangea/dnd';\nimport {\n  DragDropContext,\n  Draggable,\n  Droppable,\n  useKeyboardSensor,\n  useMouseSensor,\n  useTouchSensor,\n} from '@hello-pangea/dnd';\nimport { GripVertical } from 'lucide-react';\nimport { useState } from 'react';\n\nimport { getSignalHue } from './signal-colors';\nimport { signalDescription, signalLabel } from './signal-formatting';\nimport type { TraceSignalName } from './types';\nimport { useTraceIntelligence } from './use-trace-intelligence';\nimport { nodeColor } from '@/ds/components/SankeyChart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\n\nconst DRAG_SENSORS = [useMouseSensor, useTouchSensor, useKeyboardSensor];\n\ntype DragProjection = {\n  sourceIndex: number;\n  destinationIndex: number;\n};\n\ntype HeaderAnchor = 'start' | 'middle' | 'end';\n\nfunction projectedHeaderIndex(index: number, projection: DragProjection | undefined) {\n  if (!projection) return index;\n  if (index === projection.sourceIndex) return projection.destinationIndex;\n  if (\n    projection.sourceIndex < projection.destinationIndex &&\n    index > projection.sourceIndex &&\n    index <= projection.destinationIndex\n  ) {\n    return index - 1;\n  }\n  if (\n    projection.destinationIndex < projection.sourceIndex &&\n    index >= projection.destinationIndex &&\n    index < projection.sourceIndex\n  ) {\n    return index + 1;\n  }\n  return index;\n}\n\nfunction headerAnchor(index: number, count: number): HeaderAnchor {\n  if (index === 0) return 'start';\n  if (index === count - 1) return 'end';\n  return 'middle';\n}\n\nfunction contentOffsetClass(anchor: HeaderAnchor) {\n  if (anchor === 'start') return 'translate-x-1/2';\n  if (anchor === 'end') return '-translate-x-1/2';\n  return '';\n}\n\nexport function SortableSignalHeaders({\n  signalNames,\n  reorderDisabled,\n  onOrderChange,\n}: {\n  signalNames: TraceSignalName[];\n  reorderDisabled: boolean;\n  onOrderChange: (signalNames: TraceSignalName[]) => void;\n}) {\n  const { signalCatalog } = useTraceIntelligence();\n  const [dragProjection, setDragProjection] = useState<DragProjection>();\n\n  function handleDragStart(start: DragStart) {\n    setDragProjection({ sourceIndex: start.source.index, destinationIndex: start.source.index });\n  }\n\n  function handleDragUpdate(update: DragUpdate) {\n    setDragProjection({\n      sourceIndex: update.source.index,\n      destinationIndex: update.destination?.index ?? update.source.index,\n    });\n  }\n\n  function handleDragEnd(result: DropResult) {\n    setDragProjection(undefined);\n    const destinationIndex = result.destination?.index;\n    if (destinationIndex === undefined || destinationIndex === result.source.index) return;\n\n    const reordered = [...signalNames];\n    const [movedSignalName] = reordered.splice(result.source.index, 1);\n    if (!movedSignalName) return;\n    reordered.splice(destinationIndex, 0, movedSignalName);\n    onOrderChange(reordered);\n  }\n\n  return (\n    <div aria-label=\"Signals\" role=\"group\">\n      <DragDropContext\n        enableDefaultSensors={false}\n        sensors={DRAG_SENSORS}\n        onDragEnd={handleDragEnd}\n        onDragStart={handleDragStart}\n        onDragUpdate={handleDragUpdate}\n      >\n        <Droppable direction=\"horizontal\" droppableId=\"signal-column-headers\">\n          {(provided: DroppableProvided) => (\n            <div\n              {...provided.droppableProps}\n              ref={provided.innerRef}\n              aria-label=\"Trace signal column headers\"\n              className=\"flex items-center gap-1 px-8 pb-1\"\n              role=\"group\"\n            >\n              {signalNames.map((signalName, index) => {\n                const label = signalLabel(signalCatalog, signalName);\n                const projectedIndex = projectedHeaderIndex(index, dragProjection);\n                const offsetPercent =\n                  signalNames.length > 1 ? (projectedIndex / (signalNames.length - 1) - 0.5) * 100 : 0;\n                const anchor = headerAnchor(projectedIndex, signalNames.length);\n                return (\n                  <Draggable key={signalName} draggableId={signalName} index={index} isDragDisabled={reorderDisabled}>\n                    {(dragProvided, dragSnapshot: DraggableStateSnapshot) => (\n                      <div\n                        ref={dragProvided.innerRef}\n                        {...dragProvided.draggableProps}\n                        className=\"flex min-w-0 flex-1 basis-0 items-center justify-center py-1\"\n                        data-dragging={dragSnapshot.isDragging}\n                        style={dragProvided.draggableProps.style}\n                      >\n                        <div\n                          className=\"flex w-full justify-center\"\n                          data-testid=\"signal-column-header-alignment\"\n                          style={{ translate: `${offsetPercent}%` }}\n                        >\n                          <div\n                            className={`relative inline-flex items-center justify-center rounded-md border border-transparent px-1 py-0.5 motion-safe:transition-[background-color,border-color,box-shadow,scale] motion-safe:duration-150 ${contentOffsetClass(anchor)} ${\n                              dragSnapshot.isDragging ? 'scale-1.03 border-border2 bg-surface4 shadow-lg' : ''\n                            }`}\n                            data-header-anchor={anchor}\n                            data-testid=\"signal-column-header-content\"\n                          >\n                            <Tooltip>\n                              <TooltipTrigger\n                                className=\"text-ui-sm cursor-default font-mono font-semibold tracking-wider\"\n                                data-testid=\"signal-column-header\"\n                                style={{ color: nodeColor(getSignalHue(signalName)) }}\n                              >\n                                {label.toUpperCase()}\n                              </TooltipTrigger>\n                              <TooltipContent>{signalDescription(signalCatalog, signalName)}</TooltipContent>\n                            </Tooltip>\n                            <div\n                              {...dragProvided.dragHandleProps}\n                              aria-disabled={reorderDisabled}\n                              aria-label={`Reorder ${label}`}\n                              className=\"text-neutral3 hover:text-neutral5 absolute top-1/2 ml-0.5 -translate-y-1/2 cursor-grab rounded-sm p-1 active:cursor-grabbing aria-disabled:cursor-wait aria-disabled:opacity-50\"\n                              style={{ left: '100%' }}\n                              title={`Drag to reorder the ${label} column`}\n                            >\n                              <GripVertical aria-hidden=\"true\" className=\"size-3.5\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    )}\n                  </Draggable>\n                );\n              })}\n              {provided.placeholder}\n            </div>\n          )}\n        </Droppable>\n      </DragDropContext>\n    </div>\n  );\n}\n"],"names":["useMouseSensor","useTouchSensor","useKeyboardSensor","useTraceIntelligence","useState","jsx","DragDropContext","Droppable","jsxs","signalLabel","Draggable","Tooltip","TooltipTrigger","nodeColor","getSignalHue","TooltipContent","signalDescription","GripVertical"],"mappings":"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"}
+{"version":3,"file":"sortable-signal-headers.cjs.js","sources":["../../../src/ee/signals/sortable-signal-headers.tsx"],"sourcesContent":["import type { DragStart, DragUpdate, DraggableStateSnapshot, DropResult, DroppableProvided } from '@hello-pangea/dnd';\nimport {\n  DragDropContext,\n  Draggable,\n  Droppable,\n  useKeyboardSensor,\n  useMouseSensor,\n  useTouchSensor,\n} from '@hello-pangea/dnd';\nimport { GripVertical } from 'lucide-react';\nimport { useState } from 'react';\n\nimport { getSignalHue } from './signal-colors';\nimport { signalDescription, signalLabel } from './signal-formatting';\nimport type { TraceSignalName } from './types';\nimport { useTraceIntelligence } from './use-trace-intelligence';\nimport { nodeColor } from '@/ds/components/SankeyChart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nconst DRAG_SENSORS = [useMouseSensor, useTouchSensor, useKeyboardSensor];\n\ntype DragProjection = {\n  sourceIndex: number;\n  destinationIndex: number;\n};\n\ntype HeaderAnchor = 'start' | 'middle' | 'end';\n\nfunction projectedHeaderIndex(index: number, projection: DragProjection | undefined) {\n  if (!projection) return index;\n  if (index === projection.sourceIndex) return projection.destinationIndex;\n  if (\n    projection.sourceIndex < projection.destinationIndex &&\n    index > projection.sourceIndex &&\n    index <= projection.destinationIndex\n  ) {\n    return index - 1;\n  }\n  if (\n    projection.destinationIndex < projection.sourceIndex &&\n    index >= projection.destinationIndex &&\n    index < projection.sourceIndex\n  ) {\n    return index + 1;\n  }\n  return index;\n}\n\nfunction headerAnchor(index: number, count: number): HeaderAnchor {\n  if (index === 0) return 'start';\n  if (index === count - 1) return 'end';\n  return 'middle';\n}\n\nfunction contentOffsetClass(anchor: HeaderAnchor) {\n  if (anchor === 'start') return 'translate-x-1/2';\n  if (anchor === 'end') return '-translate-x-1/2';\n  return '';\n}\n\nexport function SortableSignalHeaders({\n  signalNames,\n  reorderDisabled,\n  onOrderChange,\n}: {\n  signalNames: TraceSignalName[];\n  reorderDisabled: boolean;\n  onOrderChange: (signalNames: TraceSignalName[]) => void;\n}) {\n  const { signalCatalog } = useTraceIntelligence();\n  const [dragProjection, setDragProjection] = useState<DragProjection>();\n\n  function handleDragStart(start: DragStart) {\n    setDragProjection({ sourceIndex: start.source.index, destinationIndex: start.source.index });\n  }\n\n  function handleDragUpdate(update: DragUpdate) {\n    setDragProjection({\n      sourceIndex: update.source.index,\n      destinationIndex: update.destination?.index ?? update.source.index,\n    });\n  }\n\n  function handleDragEnd(result: DropResult) {\n    setDragProjection(undefined);\n    const destinationIndex = result.destination?.index;\n    if (destinationIndex === undefined || destinationIndex === result.source.index) return;\n\n    const reordered = [...signalNames];\n    const [movedSignalName] = reordered.splice(result.source.index, 1);\n    if (!movedSignalName) return;\n    reordered.splice(destinationIndex, 0, movedSignalName);\n    onOrderChange(reordered);\n  }\n\n  return (\n    <div aria-label=\"Signals\" role=\"group\">\n      <DragDropContext\n        enableDefaultSensors={false}\n        sensors={DRAG_SENSORS}\n        onDragEnd={handleDragEnd}\n        onDragStart={handleDragStart}\n        onDragUpdate={handleDragUpdate}\n      >\n        <Droppable direction=\"horizontal\" droppableId=\"signal-column-headers\">\n          {(provided: DroppableProvided) => (\n            <div\n              {...provided.droppableProps}\n              ref={provided.innerRef}\n              aria-label=\"Trace signal column headers\"\n              className=\"flex items-center gap-1 px-8 pb-1\"\n              role=\"group\"\n            >\n              {signalNames.map((signalName, index) => {\n                const label = signalLabel(signalCatalog, signalName);\n                const projectedIndex = projectedHeaderIndex(index, dragProjection);\n                const offsetPercent =\n                  signalNames.length > 1 ? (projectedIndex / (signalNames.length - 1) - 0.5) * 100 : 0;\n                const anchor = headerAnchor(projectedIndex, signalNames.length);\n                return (\n                  <Draggable key={signalName} draggableId={signalName} index={index} isDragDisabled={reorderDisabled}>\n                    {(dragProvided, dragSnapshot: DraggableStateSnapshot) => (\n                      <div\n                        ref={dragProvided.innerRef}\n                        {...dragProvided.draggableProps}\n                        className=\"flex min-w-0 flex-1 basis-0 items-center justify-center py-1\"\n                        data-dragging={dragSnapshot.isDragging}\n                        style={dragProvided.draggableProps.style}\n                      >\n                        <div\n                          className=\"flex w-full justify-center\"\n                          data-testid=\"signal-column-header-alignment\"\n                          style={{ translate: `${offsetPercent}%` }}\n                        >\n                          <div\n                            className={`relative inline-flex items-center justify-center rounded-md border border-transparent px-1 py-0.5 motion-safe:transition-[background-color,border-color,box-shadow,scale] motion-safe:duration-150 ${contentOffsetClass(anchor)} ${\n                              dragSnapshot.isDragging ? `scale-1.03 ${overlaySurfaceStyle}` : ''\n                            }`}\n                            data-header-anchor={anchor}\n                            data-testid=\"signal-column-header-content\"\n                          >\n                            <Tooltip>\n                              <TooltipTrigger\n                                className=\"text-column cursor-default font-mono tracking-wider\"\n                                data-testid=\"signal-column-header\"\n                                style={{ color: nodeColor(getSignalHue(signalName)) }}\n                              >\n                                {label.toUpperCase()}\n                              </TooltipTrigger>\n                              <TooltipContent>{signalDescription(signalCatalog, signalName)}</TooltipContent>\n                            </Tooltip>\n                            <div\n                              {...dragProvided.dragHandleProps}\n                              aria-disabled={reorderDisabled}\n                              aria-label={`Reorder ${label}`}\n                              className={cn(\n                                quietTextHover,\n                                controlStateColorTransition,\n                                'absolute top-1/2 ml-0.5 -translate-y-1/2 cursor-grab rounded-sm p-1 active:cursor-grabbing aria-disabled:cursor-wait aria-disabled:opacity-50',\n                              )}\n                              style={{ left: '100%' }}\n                              title={`Drag to reorder the ${label} column`}\n                            >\n                              <GripVertical aria-hidden=\"true\" className=\"size-3.5\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    )}\n                  </Draggable>\n                );\n              })}\n              {provided.placeholder}\n            </div>\n          )}\n        </Droppable>\n      </DragDropContext>\n    </div>\n  );\n}\n"],"names":["useMouseSensor","useTouchSensor","useKeyboardSensor","useTraceIntelligence","useState","jsx","DragDropContext","Droppable","jsxs","signalLabel","Draggable","overlaySurfaceStyle","Tooltip","TooltipTrigger","nodeColor","getSignalHue","TooltipContent","signalDescription","cn","quietTextHover","controlStateColorTransition","GripVertical"],"mappings":"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"}

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

@@ -6,7 +6,11 @@ import { getSignalHue } from './signal-colors.es.js';
 import { signalLabel, signalDescription } from './signal-formatting.es.js';
 import { useTraceIntelligence } from './use-trace-intelligence.es.js';
 import { n as nodeColor } from '../../sankeyColor-BoMbAWtq.js';
-import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../tooltip-QuS0KEbc.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../tooltip-BrDiP0RI.js';
+import { overlaySurfaceStyle } from '../../primitives/raised-surface.es.js';
+import { controlStateColorTransition } from '../../primitives/transitions.es.js';
+import { quietTextHover } from '../../primitives/typography.es.js';
+import { c as cn } from '../../cn-65Adrsfj.js';
 
 const DRAG_SENSORS = [useMouseSensor, useTouchSensor, useKeyboardSensor];
 function projectedHeaderIndex(index, projection) {
@@ -95,7 +99,7 @@ function SortableSignalHeaders({
                       children: /* @__PURE__ */ jsxs(
                         "div",
                         {
-                          className: `relative inline-flex items-center justify-center rounded-md border border-transparent px-1 py-0.5 motion-safe:transition-[background-color,border-color,box-shadow,scale] motion-safe:duration-150 ${contentOffsetClass(anchor)} ${dragSnapshot.isDragging ? "scale-1.03 border-border2 bg-surface4 shadow-lg" : ""}`,
+                          className: `relative inline-flex items-center justify-center rounded-md border border-transparent px-1 py-0.5 motion-safe:transition-[background-color,border-color,box-shadow,scale] motion-safe:duration-150 ${contentOffsetClass(anchor)} ${dragSnapshot.isDragging ? `scale-1.03 ${overlaySurfaceStyle}` : ""}`,
                           "data-header-anchor": anchor,
                           "data-testid": "signal-column-header-content",
                           children: [
@@ -103,7 +107,7 @@ function SortableSignalHeaders({
                               /* @__PURE__ */ jsx(
                                 TooltipTrigger,
                                 {
-                                  className: "text-ui-sm cursor-default font-mono font-semibold tracking-wider",
+                                  className: "text-column cursor-default font-mono tracking-wider",
                                   "data-testid": "signal-column-header",
                                   style: { color: nodeColor(getSignalHue(signalName)) },
                                   children: label.toUpperCase()
@@ -117,7 +121,11 @@ function SortableSignalHeaders({
                                 ...dragProvided.dragHandleProps,
                                 "aria-disabled": reorderDisabled,
                                 "aria-label": `Reorder ${label}`,
-                                className: "text-neutral3 hover:text-neutral5 absolute top-1/2 ml-0.5 -translate-y-1/2 cursor-grab rounded-sm p-1 active:cursor-grabbing aria-disabled:cursor-wait aria-disabled:opacity-50",
+                                className: cn(
+                                  quietTextHover,
+                                  controlStateColorTransition,
+                                  "absolute top-1/2 ml-0.5 -translate-y-1/2 cursor-grab rounded-sm p-1 active:cursor-grabbing aria-disabled:cursor-wait aria-disabled:opacity-50"
+                                ),
                                 style: { left: "100%" },
                                 title: `Drag to reorder the ${label} column`,
                                 children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true", className: "size-3.5" })

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

@@ -1 +1 @@
-{"version":3,"file":"sortable-signal-headers.es.js","sources":["../../../src/ee/signals/sortable-signal-headers.tsx"],"sourcesContent":["import type { DragStart, DragUpdate, DraggableStateSnapshot, DropResult, DroppableProvided } from '@hello-pangea/dnd';\nimport {\n  DragDropContext,\n  Draggable,\n  Droppable,\n  useKeyboardSensor,\n  useMouseSensor,\n  useTouchSensor,\n} from '@hello-pangea/dnd';\nimport { GripVertical } from 'lucide-react';\nimport { useState } from 'react';\n\nimport { getSignalHue } from './signal-colors';\nimport { signalDescription, signalLabel } from './signal-formatting';\nimport type { TraceSignalName } from './types';\nimport { useTraceIntelligence } from './use-trace-intelligence';\nimport { nodeColor } from '@/ds/components/SankeyChart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\n\nconst DRAG_SENSORS = [useMouseSensor, useTouchSensor, useKeyboardSensor];\n\ntype DragProjection = {\n  sourceIndex: number;\n  destinationIndex: number;\n};\n\ntype HeaderAnchor = 'start' | 'middle' | 'end';\n\nfunction projectedHeaderIndex(index: number, projection: DragProjection | undefined) {\n  if (!projection) return index;\n  if (index === projection.sourceIndex) return projection.destinationIndex;\n  if (\n    projection.sourceIndex < projection.destinationIndex &&\n    index > projection.sourceIndex &&\n    index <= projection.destinationIndex\n  ) {\n    return index - 1;\n  }\n  if (\n    projection.destinationIndex < projection.sourceIndex &&\n    index >= projection.destinationIndex &&\n    index < projection.sourceIndex\n  ) {\n    return index + 1;\n  }\n  return index;\n}\n\nfunction headerAnchor(index: number, count: number): HeaderAnchor {\n  if (index === 0) return 'start';\n  if (index === count - 1) return 'end';\n  return 'middle';\n}\n\nfunction contentOffsetClass(anchor: HeaderAnchor) {\n  if (anchor === 'start') return 'translate-x-1/2';\n  if (anchor === 'end') return '-translate-x-1/2';\n  return '';\n}\n\nexport function SortableSignalHeaders({\n  signalNames,\n  reorderDisabled,\n  onOrderChange,\n}: {\n  signalNames: TraceSignalName[];\n  reorderDisabled: boolean;\n  onOrderChange: (signalNames: TraceSignalName[]) => void;\n}) {\n  const { signalCatalog } = useTraceIntelligence();\n  const [dragProjection, setDragProjection] = useState<DragProjection>();\n\n  function handleDragStart(start: DragStart) {\n    setDragProjection({ sourceIndex: start.source.index, destinationIndex: start.source.index });\n  }\n\n  function handleDragUpdate(update: DragUpdate) {\n    setDragProjection({\n      sourceIndex: update.source.index,\n      destinationIndex: update.destination?.index ?? update.source.index,\n    });\n  }\n\n  function handleDragEnd(result: DropResult) {\n    setDragProjection(undefined);\n    const destinationIndex = result.destination?.index;\n    if (destinationIndex === undefined || destinationIndex === result.source.index) return;\n\n    const reordered = [...signalNames];\n    const [movedSignalName] = reordered.splice(result.source.index, 1);\n    if (!movedSignalName) return;\n    reordered.splice(destinationIndex, 0, movedSignalName);\n    onOrderChange(reordered);\n  }\n\n  return (\n    <div aria-label=\"Signals\" role=\"group\">\n      <DragDropContext\n        enableDefaultSensors={false}\n        sensors={DRAG_SENSORS}\n        onDragEnd={handleDragEnd}\n        onDragStart={handleDragStart}\n        onDragUpdate={handleDragUpdate}\n      >\n        <Droppable direction=\"horizontal\" droppableId=\"signal-column-headers\">\n          {(provided: DroppableProvided) => (\n            <div\n              {...provided.droppableProps}\n              ref={provided.innerRef}\n              aria-label=\"Trace signal column headers\"\n              className=\"flex items-center gap-1 px-8 pb-1\"\n              role=\"group\"\n            >\n              {signalNames.map((signalName, index) => {\n                const label = signalLabel(signalCatalog, signalName);\n                const projectedIndex = projectedHeaderIndex(index, dragProjection);\n                const offsetPercent =\n                  signalNames.length > 1 ? (projectedIndex / (signalNames.length - 1) - 0.5) * 100 : 0;\n                const anchor = headerAnchor(projectedIndex, signalNames.length);\n                return (\n                  <Draggable key={signalName} draggableId={signalName} index={index} isDragDisabled={reorderDisabled}>\n                    {(dragProvided, dragSnapshot: DraggableStateSnapshot) => (\n                      <div\n                        ref={dragProvided.innerRef}\n                        {...dragProvided.draggableProps}\n                        className=\"flex min-w-0 flex-1 basis-0 items-center justify-center py-1\"\n                        data-dragging={dragSnapshot.isDragging}\n                        style={dragProvided.draggableProps.style}\n                      >\n                        <div\n                          className=\"flex w-full justify-center\"\n                          data-testid=\"signal-column-header-alignment\"\n                          style={{ translate: `${offsetPercent}%` }}\n                        >\n                          <div\n                            className={`relative inline-flex items-center justify-center rounded-md border border-transparent px-1 py-0.5 motion-safe:transition-[background-color,border-color,box-shadow,scale] motion-safe:duration-150 ${contentOffsetClass(anchor)} ${\n                              dragSnapshot.isDragging ? 'scale-1.03 border-border2 bg-surface4 shadow-lg' : ''\n                            }`}\n                            data-header-anchor={anchor}\n                            data-testid=\"signal-column-header-content\"\n                          >\n                            <Tooltip>\n                              <TooltipTrigger\n                                className=\"text-ui-sm cursor-default font-mono font-semibold tracking-wider\"\n                                data-testid=\"signal-column-header\"\n                                style={{ color: nodeColor(getSignalHue(signalName)) }}\n                              >\n                                {label.toUpperCase()}\n                              </TooltipTrigger>\n                              <TooltipContent>{signalDescription(signalCatalog, signalName)}</TooltipContent>\n                            </Tooltip>\n                            <div\n                              {...dragProvided.dragHandleProps}\n                              aria-disabled={reorderDisabled}\n                              aria-label={`Reorder ${label}`}\n                              className=\"text-neutral3 hover:text-neutral5 absolute top-1/2 ml-0.5 -translate-y-1/2 cursor-grab rounded-sm p-1 active:cursor-grabbing aria-disabled:cursor-wait aria-disabled:opacity-50\"\n                              style={{ left: '100%' }}\n                              title={`Drag to reorder the ${label} column`}\n                            >\n                              <GripVertical aria-hidden=\"true\" className=\"size-3.5\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    )}\n                  </Draggable>\n                );\n              })}\n              {provided.placeholder}\n            </div>\n          )}\n        </Droppable>\n      </DragDropContext>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sortable-signal-headers.es.js","sources":["../../../src/ee/signals/sortable-signal-headers.tsx"],"sourcesContent":["import type { DragStart, DragUpdate, DraggableStateSnapshot, DropResult, DroppableProvided } from '@hello-pangea/dnd';\nimport {\n  DragDropContext,\n  Draggable,\n  Droppable,\n  useKeyboardSensor,\n  useMouseSensor,\n  useTouchSensor,\n} from '@hello-pangea/dnd';\nimport { GripVertical } from 'lucide-react';\nimport { useState } from 'react';\n\nimport { getSignalHue } from './signal-colors';\nimport { signalDescription, signalLabel } from './signal-formatting';\nimport type { TraceSignalName } from './types';\nimport { useTraceIntelligence } from './use-trace-intelligence';\nimport { nodeColor } from '@/ds/components/SankeyChart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nconst DRAG_SENSORS = [useMouseSensor, useTouchSensor, useKeyboardSensor];\n\ntype DragProjection = {\n  sourceIndex: number;\n  destinationIndex: number;\n};\n\ntype HeaderAnchor = 'start' | 'middle' | 'end';\n\nfunction projectedHeaderIndex(index: number, projection: DragProjection | undefined) {\n  if (!projection) return index;\n  if (index === projection.sourceIndex) return projection.destinationIndex;\n  if (\n    projection.sourceIndex < projection.destinationIndex &&\n    index > projection.sourceIndex &&\n    index <= projection.destinationIndex\n  ) {\n    return index - 1;\n  }\n  if (\n    projection.destinationIndex < projection.sourceIndex &&\n    index >= projection.destinationIndex &&\n    index < projection.sourceIndex\n  ) {\n    return index + 1;\n  }\n  return index;\n}\n\nfunction headerAnchor(index: number, count: number): HeaderAnchor {\n  if (index === 0) return 'start';\n  if (index === count - 1) return 'end';\n  return 'middle';\n}\n\nfunction contentOffsetClass(anchor: HeaderAnchor) {\n  if (anchor === 'start') return 'translate-x-1/2';\n  if (anchor === 'end') return '-translate-x-1/2';\n  return '';\n}\n\nexport function SortableSignalHeaders({\n  signalNames,\n  reorderDisabled,\n  onOrderChange,\n}: {\n  signalNames: TraceSignalName[];\n  reorderDisabled: boolean;\n  onOrderChange: (signalNames: TraceSignalName[]) => void;\n}) {\n  const { signalCatalog } = useTraceIntelligence();\n  const [dragProjection, setDragProjection] = useState<DragProjection>();\n\n  function handleDragStart(start: DragStart) {\n    setDragProjection({ sourceIndex: start.source.index, destinationIndex: start.source.index });\n  }\n\n  function handleDragUpdate(update: DragUpdate) {\n    setDragProjection({\n      sourceIndex: update.source.index,\n      destinationIndex: update.destination?.index ?? update.source.index,\n    });\n  }\n\n  function handleDragEnd(result: DropResult) {\n    setDragProjection(undefined);\n    const destinationIndex = result.destination?.index;\n    if (destinationIndex === undefined || destinationIndex === result.source.index) return;\n\n    const reordered = [...signalNames];\n    const [movedSignalName] = reordered.splice(result.source.index, 1);\n    if (!movedSignalName) return;\n    reordered.splice(destinationIndex, 0, movedSignalName);\n    onOrderChange(reordered);\n  }\n\n  return (\n    <div aria-label=\"Signals\" role=\"group\">\n      <DragDropContext\n        enableDefaultSensors={false}\n        sensors={DRAG_SENSORS}\n        onDragEnd={handleDragEnd}\n        onDragStart={handleDragStart}\n        onDragUpdate={handleDragUpdate}\n      >\n        <Droppable direction=\"horizontal\" droppableId=\"signal-column-headers\">\n          {(provided: DroppableProvided) => (\n            <div\n              {...provided.droppableProps}\n              ref={provided.innerRef}\n              aria-label=\"Trace signal column headers\"\n              className=\"flex items-center gap-1 px-8 pb-1\"\n              role=\"group\"\n            >\n              {signalNames.map((signalName, index) => {\n                const label = signalLabel(signalCatalog, signalName);\n                const projectedIndex = projectedHeaderIndex(index, dragProjection);\n                const offsetPercent =\n                  signalNames.length > 1 ? (projectedIndex / (signalNames.length - 1) - 0.5) * 100 : 0;\n                const anchor = headerAnchor(projectedIndex, signalNames.length);\n                return (\n                  <Draggable key={signalName} draggableId={signalName} index={index} isDragDisabled={reorderDisabled}>\n                    {(dragProvided, dragSnapshot: DraggableStateSnapshot) => (\n                      <div\n                        ref={dragProvided.innerRef}\n                        {...dragProvided.draggableProps}\n                        className=\"flex min-w-0 flex-1 basis-0 items-center justify-center py-1\"\n                        data-dragging={dragSnapshot.isDragging}\n                        style={dragProvided.draggableProps.style}\n                      >\n                        <div\n                          className=\"flex w-full justify-center\"\n                          data-testid=\"signal-column-header-alignment\"\n                          style={{ translate: `${offsetPercent}%` }}\n                        >\n                          <div\n                            className={`relative inline-flex items-center justify-center rounded-md border border-transparent px-1 py-0.5 motion-safe:transition-[background-color,border-color,box-shadow,scale] motion-safe:duration-150 ${contentOffsetClass(anchor)} ${\n                              dragSnapshot.isDragging ? `scale-1.03 ${overlaySurfaceStyle}` : ''\n                            }`}\n                            data-header-anchor={anchor}\n                            data-testid=\"signal-column-header-content\"\n                          >\n                            <Tooltip>\n                              <TooltipTrigger\n                                className=\"text-column cursor-default font-mono tracking-wider\"\n                                data-testid=\"signal-column-header\"\n                                style={{ color: nodeColor(getSignalHue(signalName)) }}\n                              >\n                                {label.toUpperCase()}\n                              </TooltipTrigger>\n                              <TooltipContent>{signalDescription(signalCatalog, signalName)}</TooltipContent>\n                            </Tooltip>\n                            <div\n                              {...dragProvided.dragHandleProps}\n                              aria-disabled={reorderDisabled}\n                              aria-label={`Reorder ${label}`}\n                              className={cn(\n                                quietTextHover,\n                                controlStateColorTransition,\n                                'absolute top-1/2 ml-0.5 -translate-y-1/2 cursor-grab rounded-sm p-1 active:cursor-grabbing aria-disabled:cursor-wait aria-disabled:opacity-50',\n                              )}\n                              style={{ left: '100%' }}\n                              title={`Drag to reorder the ${label} column`}\n                            >\n                              <GripVertical aria-hidden=\"true\" className=\"size-3.5\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    )}\n                  </Draggable>\n                );\n              })}\n              {provided.placeholder}\n            </div>\n          )}\n        </Droppable>\n      </DragDropContext>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -43,7 +43,7 @@ function ThemeCompareSparkline({
         children: polylines.map((points) => /* @__PURE__ */ jsxRuntime.jsx(
           "polyline",
           {
-            className: "stroke-neutral3 fill-none",
+            className: "stroke-muted-foreground fill-none",
             points,
             strokeWidth: "1",
             vectorEffect: "non-scaling-stroke"

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

@@ -1 +1 @@
-{"version":3,"file":"theme-compare-sparkline.cjs.js","sources":["../../../src/ee/signals/theme-compare-sparkline.tsx"],"sourcesContent":["const SPARKLINE_WIDTH = 100;\nconst SPARKLINE_HEIGHT = 20;\n\nexport function ThemeCompareSparkline({\n  series,\n  positions,\n  markerIndexes,\n}: {\n  series: Array<number | undefined>;\n  positions: number[];\n  markerIndexes: number[];\n}) {\n  const loaded = series.flatMap((share, index) => (share === undefined ? [] : [{ share, index }]));\n  if (loaded.length < 2) return null;\n\n  const maxShare = Math.max(...loaded.map(point => point.share), 0.01);\n  const pointFor = (point: { share: number; index: number }) => ({\n    x: ((positions[point.index] ?? 0) / 100) * SPARKLINE_WIDTH,\n    y: SPARKLINE_HEIGHT - 2 - (point.share / maxShare) * (SPARKLINE_HEIGHT - 4),\n  });\n  const segments: Array<Array<{ share: number; index: number }>> = [];\n  for (const point of loaded) {\n    const currentSegment = segments.at(-1);\n    const previousPoint = currentSegment?.at(-1);\n    if (!currentSegment || !previousPoint || point.index !== previousPoint.index + 1) {\n      segments.push([point]);\n    } else {\n      currentSegment.push(point);\n    }\n  }\n  const polylines = segments\n    .filter(segment => segment.length > 1)\n    .map(segment => segment.map(point => `${pointFor(point).x.toFixed(1)},${pointFor(point).y.toFixed(1)}`).join(' '));\n  const markers = markerIndexes.flatMap(markerIndex => {\n    const point = loaded.find(candidate => candidate.index === markerIndex);\n    return point ? [point] : [];\n  });\n\n  return (\n    <div aria-hidden=\"true\" className=\"relative mt-1.5 h-5 w-full\">\n      <svg\n        className=\"absolute inset-0 size-full\"\n        preserveAspectRatio=\"none\"\n        viewBox={`0 0 ${SPARKLINE_WIDTH} ${SPARKLINE_HEIGHT}`}\n      >\n        {polylines.map(points => (\n          <polyline\n            key={points}\n            className=\"stroke-neutral3 fill-none\"\n            points={points}\n            strokeWidth=\"1\"\n            vectorEffect=\"non-scaling-stroke\"\n          />\n        ))}\n      </svg>\n      {markers.map(point => (\n        <span\n          key={point.index}\n          className=\"absolute size-2 -translate-1/2 rounded-full bg-green-400\"\n          style={{ left: `${positions[point.index]}%`, top: `${pointFor(point).y}px` }}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"theme-compare-sparkline.cjs.js","sources":["../../../src/ee/signals/theme-compare-sparkline.tsx"],"sourcesContent":["const SPARKLINE_WIDTH = 100;\nconst SPARKLINE_HEIGHT = 20;\n\nexport function ThemeCompareSparkline({\n  series,\n  positions,\n  markerIndexes,\n}: {\n  series: Array<number | undefined>;\n  positions: number[];\n  markerIndexes: number[];\n}) {\n  const loaded = series.flatMap((share, index) => (share === undefined ? [] : [{ share, index }]));\n  if (loaded.length < 2) return null;\n\n  const maxShare = Math.max(...loaded.map(point => point.share), 0.01);\n  const pointFor = (point: { share: number; index: number }) => ({\n    x: ((positions[point.index] ?? 0) / 100) * SPARKLINE_WIDTH,\n    y: SPARKLINE_HEIGHT - 2 - (point.share / maxShare) * (SPARKLINE_HEIGHT - 4),\n  });\n  const segments: Array<Array<{ share: number; index: number }>> = [];\n  for (const point of loaded) {\n    const currentSegment = segments.at(-1);\n    const previousPoint = currentSegment?.at(-1);\n    if (!currentSegment || !previousPoint || point.index !== previousPoint.index + 1) {\n      segments.push([point]);\n    } else {\n      currentSegment.push(point);\n    }\n  }\n  const polylines = segments\n    .filter(segment => segment.length > 1)\n    .map(segment => segment.map(point => `${pointFor(point).x.toFixed(1)},${pointFor(point).y.toFixed(1)}`).join(' '));\n  const markers = markerIndexes.flatMap(markerIndex => {\n    const point = loaded.find(candidate => candidate.index === markerIndex);\n    return point ? [point] : [];\n  });\n\n  return (\n    <div aria-hidden=\"true\" className=\"relative mt-1.5 h-5 w-full\">\n      <svg\n        className=\"absolute inset-0 size-full\"\n        preserveAspectRatio=\"none\"\n        viewBox={`0 0 ${SPARKLINE_WIDTH} ${SPARKLINE_HEIGHT}`}\n      >\n        {polylines.map(points => (\n          <polyline\n            key={points}\n            className=\"stroke-muted-foreground fill-none\"\n            points={points}\n            strokeWidth=\"1\"\n            vectorEffect=\"non-scaling-stroke\"\n          />\n        ))}\n      </svg>\n      {markers.map(point => (\n        <span\n          key={point.index}\n          className=\"absolute size-2 -translate-1/2 rounded-full bg-green-400\"\n          style={{ left: `${positions[point.index]}%`, top: `${pointFor(point).y}px` }}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx"],"mappings":";;;;;;AAAA,MAAM,eAAA,GAAkB,GAAA;AACxB,MAAM,gBAAA,GAAmB,EAAA;AAElB,SAAS,qBAAA,CAAsB;AAAA,EACpC,MAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,OAAA,CAAQ,CAAC,OAAO,KAAA,KAAW,KAAA,KAAU,MAAA,GAAY,KAAK,CAAC,EAAE,KAAA,EAAO,KAAA,EAAO,CAAE,CAAA;AAC/F,EAAA,IAAI,MAAA,CAAO,MAAA,GAAS,CAAA,EAAG,OAAO,IAAA;AAE9B,EAAA,MAAM,QAAA,GAAW,IAAA,CAAK,GAAA,CAAI,GAAG,MAAA,CAAO,IAAI,CAAA,KAAA,KAAS,KAAA,CAAM,KAAK,CAAA,EAAG,IAAI,CAAA;AACnE,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,MAA6C;AAAA,IAC7D,IAAK,SAAA,CAAU,KAAA,CAAM,KAAK,CAAA,IAAK,KAAK,GAAA,GAAO,eAAA;AAAA,IAC3C,GAAG,gBAAA,GAAmB,CAAA,GAAK,KAAA,CAAM,KAAA,GAAQ,YAAa,gBAAA,GAAmB,CAAA;AAAA,GAC3E,CAAA;AACA,EAAA,MAAM,WAA2D,EAAC;AAClE,EAAA,KAAA,MAAW,SAAS,MAAA,EAAQ;AAC1B,IAAA,MAAM,cAAA,GAAiB,QAAA,CAAS,EAAA,CAAG,EAAE,CAAA;AACrC,IAAA,MAAM,aAAA,GAAgB,cAAA,EAAgB,EAAA,CAAG,EAAE,CAAA;AAC3C,IAAA,IAAI,CAAC,kBAAkB,CAAC,aAAA,IAAiB,MAAM,KAAA,KAAU,aAAA,CAAc,QAAQ,CAAA,EAAG;AAChF,MAAA,QAAA,CAAS,IAAA,CAAK,CAAC,KAAK,CAAC,CAAA;AAAA,IACvB,CAAA,MAAO;AACL,MAAA,cAAA,CAAe,KAAK,KAAK,CAAA;AAAA,IAC3B;AAAA,EACF;AACA,EAAA,MAAM,SAAA,GAAY,QAAA,CACf,MAAA,CAAO,CAAA,OAAA,KAAW,QAAQ,MAAA,GAAS,CAAC,CAAA,CACpC,GAAA,CAAI,CAAA,OAAA,KAAW,OAAA,CAAQ,GAAA,CAAI,CAAA,KAAA,KAAS,GAAG,QAAA,CAAS,KAAK,CAAA,CAAE,CAAA,CAAE,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,EAAI,SAAS,KAAK,CAAA,CAAE,CAAA,CAAE,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAE,CAAA,CAAE,IAAA,CAAK,GAAG,CAAC,CAAA;AACnH,EAAA,MAAM,OAAA,GAAU,aAAA,CAAc,OAAA,CAAQ,CAAA,WAAA,KAAe;AACnD,IAAA,MAAM,QAAQ,MAAA,CAAO,IAAA,CAAK,CAAA,SAAA,KAAa,SAAA,CAAU,UAAU,WAAW,CAAA;AACtE,IAAA,OAAO,KAAA,GAAQ,CAAC,KAAK,CAAA,GAAI,EAAC;AAAA,EAC5B,CAAC,CAAA;AAED,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,WAAU,4BAAA,EAChC,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,4BAAA;AAAA,QACV,mBAAA,EAAoB,MAAA;AAAA,QACpB,OAAA,EAAS,CAAA,IAAA,EAAO,eAAe,CAAA,CAAA,EAAI,gBAAgB,CAAA,CAAA;AAAA,QAElD,QAAA,EAAA,SAAA,CAAU,IAAI,CAAA,MAAA,qBACbA,cAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAU,mCAAA;AAAA,YACV,MAAA;AAAA,YACA,WAAA,EAAY,GAAA;AAAA,YACZ,YAAA,EAAa;AAAA,WAAA;AAAA,UAJR;AAAA,SAMR;AAAA;AAAA,KACH;AAAA,IACC,OAAA,CAAQ,IAAI,CAAA,KAAA,qBACXA,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QAEC,SAAA,EAAU,0DAAA;AAAA,QACV,KAAA,EAAO,EAAE,IAAA,EAAM,CAAA,EAAG,UAAU,KAAA,CAAM,KAAK,CAAC,CAAA,CAAA,CAAA,EAAK,KAAK,CAAA,EAAG,QAAA,CAAS,KAAK,CAAA,CAAE,CAAC,CAAA,EAAA,CAAA;AAAK,OAAA;AAAA,MAFtE,KAAA,CAAM;AAAA,KAId;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -39,7 +39,7 @@ function ThemeCompareSparkline({
         children: polylines.map((points) => /* @__PURE__ */ jsx(
           "polyline",
           {
-            className: "stroke-neutral3 fill-none",
+            className: "stroke-muted-foreground fill-none",
             points,
             strokeWidth: "1",
             vectorEffect: "non-scaling-stroke"

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

@@ -1 +1 @@
-{"version":3,"file":"theme-compare-sparkline.es.js","sources":["../../../src/ee/signals/theme-compare-sparkline.tsx"],"sourcesContent":["const SPARKLINE_WIDTH = 100;\nconst SPARKLINE_HEIGHT = 20;\n\nexport function ThemeCompareSparkline({\n  series,\n  positions,\n  markerIndexes,\n}: {\n  series: Array<number | undefined>;\n  positions: number[];\n  markerIndexes: number[];\n}) {\n  const loaded = series.flatMap((share, index) => (share === undefined ? [] : [{ share, index }]));\n  if (loaded.length < 2) return null;\n\n  const maxShare = Math.max(...loaded.map(point => point.share), 0.01);\n  const pointFor = (point: { share: number; index: number }) => ({\n    x: ((positions[point.index] ?? 0) / 100) * SPARKLINE_WIDTH,\n    y: SPARKLINE_HEIGHT - 2 - (point.share / maxShare) * (SPARKLINE_HEIGHT - 4),\n  });\n  const segments: Array<Array<{ share: number; index: number }>> = [];\n  for (const point of loaded) {\n    const currentSegment = segments.at(-1);\n    const previousPoint = currentSegment?.at(-1);\n    if (!currentSegment || !previousPoint || point.index !== previousPoint.index + 1) {\n      segments.push([point]);\n    } else {\n      currentSegment.push(point);\n    }\n  }\n  const polylines = segments\n    .filter(segment => segment.length > 1)\n    .map(segment => segment.map(point => `${pointFor(point).x.toFixed(1)},${pointFor(point).y.toFixed(1)}`).join(' '));\n  const markers = markerIndexes.flatMap(markerIndex => {\n    const point = loaded.find(candidate => candidate.index === markerIndex);\n    return point ? [point] : [];\n  });\n\n  return (\n    <div aria-hidden=\"true\" className=\"relative mt-1.5 h-5 w-full\">\n      <svg\n        className=\"absolute inset-0 size-full\"\n        preserveAspectRatio=\"none\"\n        viewBox={`0 0 ${SPARKLINE_WIDTH} ${SPARKLINE_HEIGHT}`}\n      >\n        {polylines.map(points => (\n          <polyline\n            key={points}\n            className=\"stroke-neutral3 fill-none\"\n            points={points}\n            strokeWidth=\"1\"\n            vectorEffect=\"non-scaling-stroke\"\n          />\n        ))}\n      </svg>\n      {markers.map(point => (\n        <span\n          key={point.index}\n          className=\"absolute size-2 -translate-1/2 rounded-full bg-green-400\"\n          style={{ left: `${positions[point.index]}%`, top: `${pointFor(point).y}px` }}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme-compare-sparkline.es.js","sources":["../../../src/ee/signals/theme-compare-sparkline.tsx"],"sourcesContent":["const SPARKLINE_WIDTH = 100;\nconst SPARKLINE_HEIGHT = 20;\n\nexport function ThemeCompareSparkline({\n  series,\n  positions,\n  markerIndexes,\n}: {\n  series: Array<number | undefined>;\n  positions: number[];\n  markerIndexes: number[];\n}) {\n  const loaded = series.flatMap((share, index) => (share === undefined ? [] : [{ share, index }]));\n  if (loaded.length < 2) return null;\n\n  const maxShare = Math.max(...loaded.map(point => point.share), 0.01);\n  const pointFor = (point: { share: number; index: number }) => ({\n    x: ((positions[point.index] ?? 0) / 100) * SPARKLINE_WIDTH,\n    y: SPARKLINE_HEIGHT - 2 - (point.share / maxShare) * (SPARKLINE_HEIGHT - 4),\n  });\n  const segments: Array<Array<{ share: number; index: number }>> = [];\n  for (const point of loaded) {\n    const currentSegment = segments.at(-1);\n    const previousPoint = currentSegment?.at(-1);\n    if (!currentSegment || !previousPoint || point.index !== previousPoint.index + 1) {\n      segments.push([point]);\n    } else {\n      currentSegment.push(point);\n    }\n  }\n  const polylines = segments\n    .filter(segment => segment.length > 1)\n    .map(segment => segment.map(point => `${pointFor(point).x.toFixed(1)},${pointFor(point).y.toFixed(1)}`).join(' '));\n  const markers = markerIndexes.flatMap(markerIndex => {\n    const point = loaded.find(candidate => candidate.index === markerIndex);\n    return point ? [point] : [];\n  });\n\n  return (\n    <div aria-hidden=\"true\" className=\"relative mt-1.5 h-5 w-full\">\n      <svg\n        className=\"absolute inset-0 size-full\"\n        preserveAspectRatio=\"none\"\n        viewBox={`0 0 ${SPARKLINE_WIDTH} ${SPARKLINE_HEIGHT}`}\n      >\n        {polylines.map(points => (\n          <polyline\n            key={points}\n            className=\"stroke-muted-foreground fill-none\"\n            points={points}\n            strokeWidth=\"1\"\n            vectorEffect=\"non-scaling-stroke\"\n          />\n        ))}\n      </svg>\n      {markers.map(point => (\n        <span\n          key={point.index}\n          className=\"absolute size-2 -translate-1/2 rounded-full bg-green-400\"\n          style={{ left: `${positions[point.index]}%`, top: `${pointFor(point).y}px` }}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -77,12 +77,12 @@ function ThemeCompare({
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-border1 text-neutral4 text-ui-sm rounded-md border px-2 py-1 font-mono tabular-nums", children: ee_signals_sankeySignalsData.snapshotSummaryLabel(fromSnapshot, flows[fromIndex]) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-neutral3 text-ui-sm", children: "→" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-border1 text-neutral4 text-ui-sm rounded-md border px-2 py-1 font-mono tabular-nums", children: ee_signals_sankeySignalsData.snapshotSummaryLabel(toSnapshot, flows[toIndex]) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral3 text-ui-sm", 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." })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-border text-muted-foreground text-caption rounded-md border px-2 py-1 font-mono tabular-nums", children: ee_signals_sankeySignalsData.snapshotSummaryLabel(fromSnapshot, flows[fromIndex]) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-muted-foreground text-caption", children: "→" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-border text-muted-foreground text-caption rounded-md border px-2 py-1 font-mono tabular-nums", children: ee_signals_sankeySignalsData.snapshotSummaryLabel(toSnapshot, flows[toIndex]) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-caption", 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." })
     ] }),
-    fromIndex === toIndex ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-border1 bg-surface2 text-neutral3 text-ui-md rounded-lg border p-6", children: "Pick two different landmarks on the timeline to compare them." }) : !fromFlow || !toFlow ? /* @__PURE__ */ jsxRuntime.jsx(ee_signals_signalsLoadingSkeleton.SignalsFrameLoadingSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4", children: signalNames.map((signalName) => /* @__PURE__ */ jsxRuntime.jsx(
+    fromIndex === toIndex ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-border bg-background text-muted-foreground text-body rounded-lg border p-6", children: "Pick two different landmarks on the timeline to compare them." }) : !fromFlow || !toFlow ? /* @__PURE__ */ jsxRuntime.jsx(ee_signals_signalsLoadingSkeleton.SignalsFrameLoadingSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4", children: signalNames.map((signalName) => /* @__PURE__ */ jsxRuntime.jsx(
       ee_signals_signalDeltaColumn.SignalDeltaColumn,
       {
         signalName,

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

@@ -1 +1 @@
-{"version":3,"file":"theme-compare.cjs.js","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';\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        <p className=\"border-border1 text-neutral4 text-ui-sm rounded-md border px-2 py-1 font-mono tabular-nums\">\n          {snapshotSummaryLabel(fromSnapshot, flows[fromIndex])}\n        </p>\n        <span aria-hidden=\"true\" className=\"text-neutral3 text-ui-sm\">\n          →\n        </span>\n        <p className=\"border-border1 text-neutral4 text-ui-sm rounded-md border px-2 py-1 font-mono tabular-nums\">\n          {snapshotSummaryLabel(toSnapshot, flows[toIndex])}\n        </p>\n        <p className=\"text-neutral3 text-ui-sm\">\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        </p>\n      </div>\n      {fromIndex === toIndex ? (\n        <p className=\"border-border1 bg-surface2 text-neutral3 text-ui-md rounded-lg border p-6\">\n          Pick two different landmarks on the timeline to compare them.\n        </p>\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"],"names":["useState","useThemeFlows","timelineTickPositions","jsxs","jsx","TimelineTrack","snapshotSummaryLabel","SignalsFrameLoadingSkeleton","SignalDeltaColumn"],"mappings":"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"}
+{"version":3,"file":"theme-compare.cjs.js","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';\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        <p className=\"border-border text-muted-foreground text-caption rounded-md border px-2 py-1 font-mono tabular-nums\">\n          {snapshotSummaryLabel(fromSnapshot, flows[fromIndex])}\n        </p>\n        <span aria-hidden=\"true\" className=\"text-muted-foreground text-caption\">\n          →\n        </span>\n        <p className=\"border-border text-muted-foreground text-caption rounded-md border px-2 py-1 font-mono tabular-nums\">\n          {snapshotSummaryLabel(toSnapshot, flows[toIndex])}\n        </p>\n        <p className=\"text-muted-foreground text-caption\">\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        </p>\n      </div>\n      {fromIndex === toIndex ? (\n        <p className=\"border-border bg-background text-muted-foreground text-body rounded-lg border p-6\">\n          Pick two different landmarks on the timeline to compare them.\n        </p>\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"],"names":["useState","useThemeFlows","timelineTickPositions","jsxs","jsx","TimelineTrack","snapshotSummaryLabel","SignalsFrameLoadingSkeleton","SignalDeltaColumn"],"mappings":"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"}

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

@@ -73,12 +73,12 @@ function ThemeCompare({
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5", children: [
-      /* @__PURE__ */ jsx("p", { className: "border-border1 text-neutral4 text-ui-sm rounded-md border px-2 py-1 font-mono tabular-nums", children: snapshotSummaryLabel(fromSnapshot, flows[fromIndex]) }),
-      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-neutral3 text-ui-sm", children: "→" }),
-      /* @__PURE__ */ jsx("p", { className: "border-border1 text-neutral4 text-ui-sm rounded-md border px-2 py-1 font-mono tabular-nums", children: snapshotSummaryLabel(toSnapshot, flows[toIndex]) }),
-      /* @__PURE__ */ jsx("p", { className: "text-neutral3 text-ui-sm", 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." })
+      /* @__PURE__ */ jsx("p", { className: "border-border text-muted-foreground text-caption rounded-md border px-2 py-1 font-mono tabular-nums", children: snapshotSummaryLabel(fromSnapshot, flows[fromIndex]) }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground text-caption", children: "→" }),
+      /* @__PURE__ */ jsx("p", { className: "border-border text-muted-foreground text-caption rounded-md border px-2 py-1 font-mono tabular-nums", children: snapshotSummaryLabel(toSnapshot, flows[toIndex]) }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-caption", 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." })
     ] }),
-    fromIndex === toIndex ? /* @__PURE__ */ jsx("p", { className: "border-border1 bg-surface2 text-neutral3 text-ui-md rounded-lg border p-6", children: "Pick two different landmarks on the timeline to compare them." }) : !fromFlow || !toFlow ? /* @__PURE__ */ jsx(SignalsFrameLoadingSkeleton, {}) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4", children: signalNames.map((signalName) => /* @__PURE__ */ jsx(
+    fromIndex === toIndex ? /* @__PURE__ */ jsx("p", { className: "border-border bg-background text-muted-foreground text-body rounded-lg border p-6", children: "Pick two different landmarks on the timeline to compare them." }) : !fromFlow || !toFlow ? /* @__PURE__ */ jsx(SignalsFrameLoadingSkeleton, {}) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4", children: signalNames.map((signalName) => /* @__PURE__ */ jsx(
       SignalDeltaColumn,
       {
         signalName,