@mastra/playground-ui 48.0.0-alpha.9 → 48.0.0

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

@@ -0,0 +1,141 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { DragDropContext, useMouseSensor, useTouchSensor, useKeyboardSensor, Droppable, Draggable } from '@hello-pangea/dnd';
+import { GripVertical } from 'lucide-react';
+import { useState } from 'react';
+import { getSignalHue } from './signal-colors.es.js';
+import { formatSignalName, getSignalDescription } from './signal-formatting.es.js';
+import { n as nodeColor } from '../../sankeyColor-CQ5nkgtL.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../tooltip-BFbYhBj1.js';
+
+const DRAG_SENSORS = [useMouseSensor, useTouchSensor, useKeyboardSensor];
+function projectedHeaderIndex(index, projection) {
+  if (!projection) return index;
+  if (index === projection.sourceIndex) return projection.destinationIndex;
+  if (projection.sourceIndex < projection.destinationIndex && index > projection.sourceIndex && index <= projection.destinationIndex) {
+    return index - 1;
+  }
+  if (projection.destinationIndex < projection.sourceIndex && index >= projection.destinationIndex && index < projection.sourceIndex) {
+    return index + 1;
+  }
+  return index;
+}
+function headerAnchor(index, count) {
+  if (index === 0) return "start";
+  if (index === count - 1) return "end";
+  return "middle";
+}
+function contentOffsetClass(anchor) {
+  if (anchor === "start") return "translate-x-1/2";
+  if (anchor === "end") return "-translate-x-1/2";
+  return "";
+}
+function SortableSignalHeaders({
+  signalNames,
+  reorderDisabled,
+  onOrderChange
+}) {
+  const [dragProjection, setDragProjection] = useState();
+  function handleDragStart(start) {
+    setDragProjection({ sourceIndex: start.source.index, destinationIndex: start.source.index });
+  }
+  function handleDragUpdate(update) {
+    setDragProjection({
+      sourceIndex: update.source.index,
+      destinationIndex: update.destination?.index ?? update.source.index
+    });
+  }
+  function handleDragEnd(result) {
+    setDragProjection(void 0);
+    const destinationIndex = result.destination?.index;
+    if (destinationIndex === void 0 || destinationIndex === result.source.index) return;
+    const reordered = [...signalNames];
+    const [movedSignalName] = reordered.splice(result.source.index, 1);
+    if (!movedSignalName) return;
+    reordered.splice(destinationIndex, 0, movedSignalName);
+    onOrderChange(reordered);
+  }
+  return /* @__PURE__ */ jsx("div", { "aria-label": "Signals", role: "group", children: /* @__PURE__ */ jsx(
+    DragDropContext,
+    {
+      enableDefaultSensors: false,
+      sensors: DRAG_SENSORS,
+      onDragEnd: handleDragEnd,
+      onDragStart: handleDragStart,
+      onDragUpdate: handleDragUpdate,
+      children: /* @__PURE__ */ jsx(Droppable, { direction: "horizontal", droppableId: "signal-column-headers", children: (provided) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...provided.droppableProps,
+          ref: provided.innerRef,
+          "aria-label": "Trace signal column headers",
+          className: "flex items-center gap-1 px-8 pb-1",
+          role: "group",
+          children: [
+            signalNames.map((signalName, index) => {
+              const label = formatSignalName(signalName);
+              const projectedIndex = projectedHeaderIndex(index, dragProjection);
+              const offsetPercent = signalNames.length > 1 ? (projectedIndex / (signalNames.length - 1) - 0.5) * 100 : 0;
+              const anchor = headerAnchor(projectedIndex, signalNames.length);
+              return /* @__PURE__ */ jsx(Draggable, { draggableId: signalName, index, isDragDisabled: reorderDisabled, children: (dragProvided, dragSnapshot) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: dragProvided.innerRef,
+                  ...dragProvided.draggableProps,
+                  className: "flex min-w-0 flex-1 basis-0 items-center justify-center py-1",
+                  "data-dragging": dragSnapshot.isDragging,
+                  style: dragProvided.draggableProps.style,
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "flex w-full justify-center",
+                      "data-testid": "signal-column-header-alignment",
+                      style: { translate: `${offsetPercent}%` },
+                      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" : ""}`,
+                          "data-header-anchor": anchor,
+                          "data-testid": "signal-column-header-content",
+                          children: [
+                            /* @__PURE__ */ jsxs(Tooltip, { children: [
+                              /* @__PURE__ */ jsx(
+                                TooltipTrigger,
+                                {
+                                  className: "cursor-default font-mono text-xs font-semibold tracking-wider",
+                                  "data-testid": "signal-column-header",
+                                  style: { color: nodeColor(getSignalHue(signalName)) },
+                                  children: label.toUpperCase()
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(TooltipContent, { children: getSignalDescription(signalName) })
+                            ] }),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                ...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",
+                                style: { left: "100%" },
+                                title: `Drag to reorder the ${label} column`,
+                                children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true", className: "size-3.5" })
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    }
+                  )
+                }
+              ) }, signalName);
+            }),
+            provided.placeholder
+          ]
+        }
+      ) })
+    }
+  ) });
+}
+
+export { SortableSignalHeaders };
+//# sourceMappingURL=sortable-signal-headers.es.js.map

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

@@ -0,0 +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 { formatSignalName, getSignalDescription } from './signal-formatting';\nimport type { TraceSignalName } from './types';\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 [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 = formatSignalName(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=\"cursor-default font-mono text-xs font-semibold tracking-wider\"\n                                data-testid=\"signal-column-header\"\n                                style={{ color: nodeColor(getSignalHue(signalName)) }}\n                              >\n                                {label.toUpperCase()}\n                              </TooltipTrigger>\n                              <TooltipContent>{getSignalDescription(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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"}

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

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+function stageThemeShares(flow, signalName) {
+  const stage = flow.stages.find((candidate) => candidate.signalName === signalName);
+  const shares = /* @__PURE__ */ new Map();
+  if (!stage || stage.traceCount === 0) return shares;
+  for (const node of stage.nodes) {
+    if (node.kind !== "theme") continue;
+    const entry = shares.get(node.label);
+    shares.set(node.label, {
+      share: (entry?.share ?? 0) + node.traceCount / stage.traceCount,
+      themeId: entry?.themeId ?? node.themeId
+    });
+  }
+  return shares;
+}
+function computeThemeShareDeltas(fromFlow, toFlow, signalName, limit = 6) {
+  const fromShares = stageThemeShares(fromFlow, signalName);
+  const toShares = stageThemeShares(toFlow, signalName);
+  const labels = /* @__PURE__ */ new Set([...fromShares.keys(), ...toShares.keys()]);
+  return [...labels].map((label) => {
+    const fromShare = fromShares.get(label)?.share ?? 0;
+    const toShare = toShares.get(label)?.share ?? 0;
+    return {
+      label,
+      themeId: toShares.get(label)?.themeId ?? fromShares.get(label)?.themeId,
+      fromShare,
+      toShare,
+      delta: toShare - fromShare,
+      isNew: fromShare === 0 && toShare > 0,
+      isGone: fromShare > 0 && toShare === 0
+    };
+  }).sort((left, right) => Math.abs(right.delta) - Math.abs(left.delta)).slice(0, limit);
+}
+function themeShareSeries(flows, signalName, label) {
+  return flows.map((flow) => {
+    if (!flow) return void 0;
+    return stageThemeShares(flow, signalName).get(label)?.share ?? 0;
+  });
+}
+
+exports.computeThemeShareDeltas = computeThemeShareDeltas;
+exports.themeShareSeries = themeShareSeries;
+//# sourceMappingURL=theme-compare-data.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-compare-data.cjs.js","sources":["../../../src/ee/signals/theme-compare-data.ts"],"sourcesContent":["import type { ThemeFlowResponse, TraceSignalName } from './types';\n\nexport type ThemeShareDelta = {\n  label: string;\n  /** The theme's id on whichever compared side still has the theme. */\n  themeId?: string;\n  /** Share of the signal's traces at point A (0..1). */\n  fromShare: number;\n  /** Share of the signal's traces at point B (0..1). */\n  toShare: number;\n  delta: number;\n  isNew: boolean;\n  isGone: boolean;\n};\n\nfunction stageThemeShares(flow: ThemeFlowResponse, signalName: TraceSignalName) {\n  const stage = flow.stages.find(candidate => candidate.signalName === signalName);\n  const shares = new Map<string, { share: number; themeId?: string }>();\n  if (!stage || stage.traceCount === 0) return shares;\n  for (const node of stage.nodes) {\n    if (node.kind !== 'theme') continue;\n    const entry = shares.get(node.label);\n    shares.set(node.label, {\n      share: (entry?.share ?? 0) + node.traceCount / stage.traceCount,\n      themeId: entry?.themeId ?? node.themeId,\n    });\n  }\n  return shares;\n}\n\n/**\n * Per-theme share movement between two snapshots of one signal, largest\n * absolute change first. Powers the compare-mode delta columns.\n */\nexport function computeThemeShareDeltas(\n  fromFlow: ThemeFlowResponse,\n  toFlow: ThemeFlowResponse,\n  signalName: TraceSignalName,\n  limit = 6,\n): ThemeShareDelta[] {\n  const fromShares = stageThemeShares(fromFlow, signalName);\n  const toShares = stageThemeShares(toFlow, signalName);\n  const labels = new Set([...fromShares.keys(), ...toShares.keys()]);\n\n  return [...labels]\n    .map(label => {\n      const fromShare = fromShares.get(label)?.share ?? 0;\n      const toShare = toShares.get(label)?.share ?? 0;\n      return {\n        label,\n        themeId: toShares.get(label)?.themeId ?? fromShares.get(label)?.themeId,\n        fromShare,\n        toShare,\n        delta: toShare - fromShare,\n        isNew: fromShare === 0 && toShare > 0,\n        isGone: fromShare > 0 && toShare === 0,\n      };\n    })\n    .sort((left, right) => Math.abs(right.delta) - Math.abs(left.delta))\n    .slice(0, limit);\n}\n\n/**\n * Share of one theme across an ordered run of snapshot flows, for compare-mode\n * sparklines. Entries align with the flows array; unloaded flows are skipped\n * by passing undefined.\n */\nexport function themeShareSeries(\n  flows: Array<ThemeFlowResponse | undefined>,\n  signalName: TraceSignalName,\n  label: string,\n): Array<number | undefined> {\n  return flows.map(flow => {\n    if (!flow) return undefined;\n    return stageThemeShares(flow, signalName).get(label)?.share ?? 0;\n  });\n}\n"],"names":[],"mappings":";;;;AAeA,SAAS,gBAAA,CAAiB,MAAyB,UAAA,EAA6B;AAC9E,EAAA,MAAM,QAAQ,IAAA,CAAK,MAAA,CAAO,KAAK,CAAA,SAAA,KAAa,SAAA,CAAU,eAAe,UAAU,CAAA;AAC/E,EAAA,MAAM,MAAA,uBAAa,GAAA,EAAiD;AACpE,EAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,UAAA,KAAe,GAAG,OAAO,MAAA;AAC7C,EAAA,KAAA,MAAW,IAAA,IAAQ,MAAM,KAAA,EAAO;AAC9B,IAAA,IAAI,IAAA,CAAK,SAAS,OAAA,EAAS;AAC3B,IAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,GAAA,CAAI,IAAA,CAAK,KAAK,CAAA;AACnC,IAAA,MAAA,CAAO,GAAA,CAAI,KAAK,KAAA,EAAO;AAAA,MACrB,QAAQ,KAAA,EAAO,KAAA,IAAS,CAAA,IAAK,IAAA,CAAK,aAAa,KAAA,CAAM,UAAA;AAAA,MACrD,OAAA,EAAS,KAAA,EAAO,OAAA,IAAW,IAAA,CAAK;AAAA,KACjC,CAAA;AAAA,EACH;AACA,EAAA,OAAO,MAAA;AACT;AAMO,SAAS,uBAAA,CACd,QAAA,EACA,MAAA,EACA,UAAA,EACA,QAAQ,CAAA,EACW;AACnB,EAAA,MAAM,UAAA,GAAa,gBAAA,CAAiB,QAAA,EAAU,UAAU,CAAA;AACxD,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,MAAA,EAAQ,UAAU,CAAA;AACpD,EAAA,MAAM,MAAA,mBAAS,IAAI,GAAA,CAAI,CAAC,GAAG,UAAA,CAAW,IAAA,EAAK,EAAG,GAAG,QAAA,CAAS,IAAA,EAAM,CAAC,CAAA;AAEjE,EAAA,OAAO,CAAC,GAAG,MAAM,CAAA,CACd,IAAI,CAAA,KAAA,KAAS;AACZ,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,GAAA,CAAI,KAAK,GAAG,KAAA,IAAS,CAAA;AAClD,IAAA,MAAM,OAAA,GAAU,QAAA,CAAS,GAAA,CAAI,KAAK,GAAG,KAAA,IAAS,CAAA;AAC9C,IAAA,OAAO;AAAA,MACL,KAAA;AAAA,MACA,OAAA,EAAS,SAAS,GAAA,CAAI,KAAK,GAAG,OAAA,IAAW,UAAA,CAAW,GAAA,CAAI,KAAK,CAAA,EAAG,OAAA;AAAA,MAChE,SAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAO,OAAA,GAAU,SAAA;AAAA,MACjB,KAAA,EAAO,SAAA,KAAc,CAAA,IAAK,OAAA,GAAU,CAAA;AAAA,MACpC,MAAA,EAAQ,SAAA,GAAY,CAAA,IAAK,OAAA,KAAY;AAAA,KACvC;AAAA,EACF,CAAC,CAAA,CACA,IAAA,CAAK,CAAC,IAAA,EAAM,KAAA,KAAU,KAAK,GAAA,CAAI,KAAA,CAAM,KAAK,CAAA,GAAI,IAAA,CAAK,IAAI,IAAA,CAAK,KAAK,CAAC,CAAA,CAClE,KAAA,CAAM,GAAG,KAAK,CAAA;AACnB;AAOO,SAAS,gBAAA,CACd,KAAA,EACA,UAAA,EACA,KAAA,EAC2B;AAC3B,EAAA,OAAO,KAAA,CAAM,IAAI,CAAA,IAAA,KAAQ;AACvB,IAAA,IAAI,CAAC,MAAM,OAAO,MAAA;AAClB,IAAA,OAAO,iBAAiB,IAAA,EAAM,UAAU,EAAE,GAAA,CAAI,KAAK,GAAG,KAAA,IAAS,CAAA;AAAA,EACjE,CAAC,CAAA;AACH;;;;;"}

package/dist/ee/signals/theme-compare-data.d.ts

@@ -0,0 +1,2 @@
+export * from '../../src/ee/signals/theme-compare-data'
+export {}

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

@@ -0,0 +1,41 @@
+function stageThemeShares(flow, signalName) {
+  const stage = flow.stages.find((candidate) => candidate.signalName === signalName);
+  const shares = /* @__PURE__ */ new Map();
+  if (!stage || stage.traceCount === 0) return shares;
+  for (const node of stage.nodes) {
+    if (node.kind !== "theme") continue;
+    const entry = shares.get(node.label);
+    shares.set(node.label, {
+      share: (entry?.share ?? 0) + node.traceCount / stage.traceCount,
+      themeId: entry?.themeId ?? node.themeId
+    });
+  }
+  return shares;
+}
+function computeThemeShareDeltas(fromFlow, toFlow, signalName, limit = 6) {
+  const fromShares = stageThemeShares(fromFlow, signalName);
+  const toShares = stageThemeShares(toFlow, signalName);
+  const labels = /* @__PURE__ */ new Set([...fromShares.keys(), ...toShares.keys()]);
+  return [...labels].map((label) => {
+    const fromShare = fromShares.get(label)?.share ?? 0;
+    const toShare = toShares.get(label)?.share ?? 0;
+    return {
+      label,
+      themeId: toShares.get(label)?.themeId ?? fromShares.get(label)?.themeId,
+      fromShare,
+      toShare,
+      delta: toShare - fromShare,
+      isNew: fromShare === 0 && toShare > 0,
+      isGone: fromShare > 0 && toShare === 0
+    };
+  }).sort((left, right) => Math.abs(right.delta) - Math.abs(left.delta)).slice(0, limit);
+}
+function themeShareSeries(flows, signalName, label) {
+  return flows.map((flow) => {
+    if (!flow) return void 0;
+    return stageThemeShares(flow, signalName).get(label)?.share ?? 0;
+  });
+}
+
+export { computeThemeShareDeltas, themeShareSeries };
+//# sourceMappingURL=theme-compare-data.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-compare-data.es.js","sources":["../../../src/ee/signals/theme-compare-data.ts"],"sourcesContent":["import type { ThemeFlowResponse, TraceSignalName } from './types';\n\nexport type ThemeShareDelta = {\n  label: string;\n  /** The theme's id on whichever compared side still has the theme. */\n  themeId?: string;\n  /** Share of the signal's traces at point A (0..1). */\n  fromShare: number;\n  /** Share of the signal's traces at point B (0..1). */\n  toShare: number;\n  delta: number;\n  isNew: boolean;\n  isGone: boolean;\n};\n\nfunction stageThemeShares(flow: ThemeFlowResponse, signalName: TraceSignalName) {\n  const stage = flow.stages.find(candidate => candidate.signalName === signalName);\n  const shares = new Map<string, { share: number; themeId?: string }>();\n  if (!stage || stage.traceCount === 0) return shares;\n  for (const node of stage.nodes) {\n    if (node.kind !== 'theme') continue;\n    const entry = shares.get(node.label);\n    shares.set(node.label, {\n      share: (entry?.share ?? 0) + node.traceCount / stage.traceCount,\n      themeId: entry?.themeId ?? node.themeId,\n    });\n  }\n  return shares;\n}\n\n/**\n * Per-theme share movement between two snapshots of one signal, largest\n * absolute change first. Powers the compare-mode delta columns.\n */\nexport function computeThemeShareDeltas(\n  fromFlow: ThemeFlowResponse,\n  toFlow: ThemeFlowResponse,\n  signalName: TraceSignalName,\n  limit = 6,\n): ThemeShareDelta[] {\n  const fromShares = stageThemeShares(fromFlow, signalName);\n  const toShares = stageThemeShares(toFlow, signalName);\n  const labels = new Set([...fromShares.keys(), ...toShares.keys()]);\n\n  return [...labels]\n    .map(label => {\n      const fromShare = fromShares.get(label)?.share ?? 0;\n      const toShare = toShares.get(label)?.share ?? 0;\n      return {\n        label,\n        themeId: toShares.get(label)?.themeId ?? fromShares.get(label)?.themeId,\n        fromShare,\n        toShare,\n        delta: toShare - fromShare,\n        isNew: fromShare === 0 && toShare > 0,\n        isGone: fromShare > 0 && toShare === 0,\n      };\n    })\n    .sort((left, right) => Math.abs(right.delta) - Math.abs(left.delta))\n    .slice(0, limit);\n}\n\n/**\n * Share of one theme across an ordered run of snapshot flows, for compare-mode\n * sparklines. Entries align with the flows array; unloaded flows are skipped\n * by passing undefined.\n */\nexport function themeShareSeries(\n  flows: Array<ThemeFlowResponse | undefined>,\n  signalName: TraceSignalName,\n  label: string,\n): Array<number | undefined> {\n  return flows.map(flow => {\n    if (!flow) return undefined;\n    return stageThemeShares(flow, signalName).get(label)?.share ?? 0;\n  });\n}\n"],"names":[],"mappings":"AAeA,SAAS,gBAAA,CAAiB,MAAyB,UAAA,EAA6B;AAC9E,EAAA,MAAM,QAAQ,IAAA,CAAK,MAAA,CAAO,KAAK,CAAA,SAAA,KAAa,SAAA,CAAU,eAAe,UAAU,CAAA;AAC/E,EAAA,MAAM,MAAA,uBAAa,GAAA,EAAiD;AACpE,EAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,UAAA,KAAe,GAAG,OAAO,MAAA;AAC7C,EAAA,KAAA,MAAW,IAAA,IAAQ,MAAM,KAAA,EAAO;AAC9B,IAAA,IAAI,IAAA,CAAK,SAAS,OAAA,EAAS;AAC3B,IAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,GAAA,CAAI,IAAA,CAAK,KAAK,CAAA;AACnC,IAAA,MAAA,CAAO,GAAA,CAAI,KAAK,KAAA,EAAO;AAAA,MACrB,QAAQ,KAAA,EAAO,KAAA,IAAS,CAAA,IAAK,IAAA,CAAK,aAAa,KAAA,CAAM,UAAA;AAAA,MACrD,OAAA,EAAS,KAAA,EAAO,OAAA,IAAW,IAAA,CAAK;AAAA,KACjC,CAAA;AAAA,EACH;AACA,EAAA,OAAO,MAAA;AACT;AAMO,SAAS,uBAAA,CACd,QAAA,EACA,MAAA,EACA,UAAA,EACA,QAAQ,CAAA,EACW;AACnB,EAAA,MAAM,UAAA,GAAa,gBAAA,CAAiB,QAAA,EAAU,UAAU,CAAA;AACxD,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,MAAA,EAAQ,UAAU,CAAA;AACpD,EAAA,MAAM,MAAA,mBAAS,IAAI,GAAA,CAAI,CAAC,GAAG,UAAA,CAAW,IAAA,EAAK,EAAG,GAAG,QAAA,CAAS,IAAA,EAAM,CAAC,CAAA;AAEjE,EAAA,OAAO,CAAC,GAAG,MAAM,CAAA,CACd,IAAI,CAAA,KAAA,KAAS;AACZ,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,GAAA,CAAI,KAAK,GAAG,KAAA,IAAS,CAAA;AAClD,IAAA,MAAM,OAAA,GAAU,QAAA,CAAS,GAAA,CAAI,KAAK,GAAG,KAAA,IAAS,CAAA;AAC9C,IAAA,OAAO;AAAA,MACL,KAAA;AAAA,MACA,OAAA,EAAS,SAAS,GAAA,CAAI,KAAK,GAAG,OAAA,IAAW,UAAA,CAAW,GAAA,CAAI,KAAK,CAAA,EAAG,OAAA;AAAA,MAChE,SAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAO,OAAA,GAAU,SAAA;AAAA,MACjB,KAAA,EAAO,SAAA,KAAc,CAAA,IAAK,OAAA,GAAU,CAAA;AAAA,MACpC,MAAA,EAAQ,SAAA,GAAY,CAAA,IAAK,OAAA,KAAY;AAAA,KACvC;AAAA,EACF,CAAC,CAAA,CACA,IAAA,CAAK,CAAC,IAAA,EAAM,KAAA,KAAU,KAAK,GAAA,CAAI,KAAA,CAAM,KAAK,CAAA,GAAI,IAAA,CAAK,IAAI,IAAA,CAAK,KAAK,CAAC,CAAA,CAClE,KAAA,CAAM,GAAG,KAAK,CAAA;AACnB;AAOO,SAAS,gBAAA,CACd,KAAA,EACA,UAAA,EACA,KAAA,EAC2B;AAC3B,EAAA,OAAO,KAAA,CAAM,IAAI,CAAA,IAAA,KAAQ;AACvB,IAAA,IAAI,CAAC,MAAM,OAAO,MAAA;AAClB,IAAA,OAAO,iBAAiB,IAAA,EAAM,UAAU,EAAE,GAAA,CAAI,KAAK,GAAG,KAAA,IAAS,CAAA;AAAA,EACjE,CAAC,CAAA;AACH;;;;"}

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

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+
+const SPARKLINE_WIDTH = 100;
+const SPARKLINE_HEIGHT = 20;
+function ThemeCompareSparkline({
+  series,
+  positions,
+  markerIndexes
+}) {
+  const loaded = series.flatMap((share, index) => share === void 0 ? [] : [{ share, index }]);
+  if (loaded.length < 2) return null;
+  const maxShare = Math.max(...loaded.map((point) => point.share), 0.01);
+  const pointFor = (point) => ({
+    x: (positions[point.index] ?? 0) / 100 * SPARKLINE_WIDTH,
+    y: SPARKLINE_HEIGHT - 2 - point.share / maxShare * (SPARKLINE_HEIGHT - 4)
+  });
+  const segments = [];
+  for (const point of loaded) {
+    const currentSegment = segments.at(-1);
+    const previousPoint = currentSegment?.at(-1);
+    if (!currentSegment || !previousPoint || point.index !== previousPoint.index + 1) {
+      segments.push([point]);
+    } else {
+      currentSegment.push(point);
+    }
+  }
+  const polylines = segments.filter((segment) => segment.length > 1).map((segment) => segment.map((point) => `${pointFor(point).x.toFixed(1)},${pointFor(point).y.toFixed(1)}`).join(" "));
+  const markers = markerIndexes.flatMap((markerIndex) => {
+    const point = loaded.find((candidate) => candidate.index === markerIndex);
+    return point ? [point] : [];
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-hidden": "true", className: "relative mt-1.5 h-5 w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: "absolute inset-0 size-full",
+        preserveAspectRatio: "none",
+        viewBox: `0 0 ${SPARKLINE_WIDTH} ${SPARKLINE_HEIGHT}`,
+        children: polylines.map((points) => /* @__PURE__ */ jsxRuntime.jsx(
+          "polyline",
+          {
+            className: "stroke-neutral3 fill-none",
+            points,
+            strokeWidth: "1",
+            vectorEffect: "non-scaling-stroke"
+          },
+          points
+        ))
+      }
+    ),
+    markers.map((point) => /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "absolute size-2 -translate-1/2 rounded-full bg-green-400",
+        style: { left: `${positions[point.index]}%`, top: `${pointFor(point).y}px` }
+      },
+      point.index
+    ))
+  ] });
+}
+
+exports.ThemeCompareSparkline = ThemeCompareSparkline;
+//# sourceMappingURL=theme-compare-sparkline.cjs.js.map

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

@@ -0,0 +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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"}

package/dist/ee/signals/theme-compare-sparkline.d.ts

@@ -0,0 +1,2 @@
+export * from '../../src/ee/signals/theme-compare-sparkline'
+export {}

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

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const SPARKLINE_WIDTH = 100;
+const SPARKLINE_HEIGHT = 20;
+function ThemeCompareSparkline({
+  series,
+  positions,
+  markerIndexes
+}) {
+  const loaded = series.flatMap((share, index) => share === void 0 ? [] : [{ share, index }]);
+  if (loaded.length < 2) return null;
+  const maxShare = Math.max(...loaded.map((point) => point.share), 0.01);
+  const pointFor = (point) => ({
+    x: (positions[point.index] ?? 0) / 100 * SPARKLINE_WIDTH,
+    y: SPARKLINE_HEIGHT - 2 - point.share / maxShare * (SPARKLINE_HEIGHT - 4)
+  });
+  const segments = [];
+  for (const point of loaded) {
+    const currentSegment = segments.at(-1);
+    const previousPoint = currentSegment?.at(-1);
+    if (!currentSegment || !previousPoint || point.index !== previousPoint.index + 1) {
+      segments.push([point]);
+    } else {
+      currentSegment.push(point);
+    }
+  }
+  const polylines = segments.filter((segment) => segment.length > 1).map((segment) => segment.map((point) => `${pointFor(point).x.toFixed(1)},${pointFor(point).y.toFixed(1)}`).join(" "));
+  const markers = markerIndexes.flatMap((markerIndex) => {
+    const point = loaded.find((candidate) => candidate.index === markerIndex);
+    return point ? [point] : [];
+  });
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "relative mt-1.5 h-5 w-full", children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "absolute inset-0 size-full",
+        preserveAspectRatio: "none",
+        viewBox: `0 0 ${SPARKLINE_WIDTH} ${SPARKLINE_HEIGHT}`,
+        children: polylines.map((points) => /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            className: "stroke-neutral3 fill-none",
+            points,
+            strokeWidth: "1",
+            vectorEffect: "non-scaling-stroke"
+          },
+          points
+        ))
+      }
+    ),
+    markers.map((point) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "absolute size-2 -translate-1/2 rounded-full bg-green-400",
+        style: { left: `${positions[point.index]}%`, top: `${pointFor(point).y}px` }
+      },
+      point.index
+    ))
+  ] });
+}
+
+export { ThemeCompareSparkline };
+//# sourceMappingURL=theme-compare-sparkline.es.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const ee_signals_hooks_useThemeFlows = require('./hooks/use-theme-flows.cjs.js');
+const ee_signals_sankeySignalsData = require('./sankey-signals-data.cjs.js');
+const ee_signals_signalDeltaColumn = require('./signal-delta-column.cjs.js');
+const ee_signals_signalsLoadingSkeleton = require('./signals-loading-skeleton.cjs.js');
+const ee_signals_snapshotTimeline = require('./snapshot-timeline.cjs.js');
+const ee_signals_snapshotTimelineData = require('./snapshot-timeline-data.cjs.js');
+
+function ThemeCompare({
+  entityId,
+  entityType,
+  signalNames,
+  snapshots,
+  totalSnapshots,
+  onThemeSelect
+}) {
+  const [pointIndexes, setPointIndexes] = React.useState();
+  const [grabbedPoint, setGrabbedPoint] = React.useState();
+  const lastIndex = snapshots.length - 1;
+  const points = [
+    Math.min(pointIndexes?.[0] ?? 0, lastIndex),
+    Math.min(pointIndexes?.[1] ?? lastIndex, lastIndex)
+  ];
+  const fromIndex = Math.min(points[0], points[1]);
+  const toIndex = Math.max(points[0], points[1]);
+  const flowQueries = ee_signals_hooks_useThemeFlows.useThemeFlows(
+    entityId,
+    entityType,
+    signalNames,
+    snapshots.map((snapshot) => snapshot.snapshotId)
+  );
+  const flows = flowQueries.map((query) => query.data);
+  const fromFlow = flows[fromIndex];
+  const toFlow = flows[toIndex];
+  const positions = ee_signals_snapshotTimelineData.timelineTickPositions(snapshots);
+  const fromSnapshot = snapshots[fromIndex];
+  const toSnapshot = snapshots[toIndex];
+  if (!fromSnapshot || !toSnapshot) return null;
+  const handleTickSelect = (index) => {
+    if (grabbedPoint !== void 0) {
+      setPointIndexes(grabbedPoint === 0 ? [index, points[1]] : [points[0], index]);
+      setGrabbedPoint(void 0);
+      return;
+    }
+    const pointAtIndex = points[0] === index ? 0 : points[1] === index ? 1 : void 0;
+    if (pointAtIndex !== void 0) {
+      setGrabbedPoint(pointAtIndex);
+      return;
+    }
+    const selectedPosition = positions[index];
+    const firstPointPosition = positions[points[0]];
+    const secondPointPosition = positions[points[1]];
+    if (selectedPosition === void 0 || firstPointPosition === void 0 || secondPointPosition === void 0) return;
+    const distanceToFirst = Math.abs(selectedPosition - firstPointPosition);
+    const distanceToSecond = Math.abs(selectedPosition - secondPointPosition);
+    setPointIndexes(distanceToFirst <= distanceToSecond ? [index, points[1]] : [points[0], index]);
+  };
+  const markers = /* @__PURE__ */ new Map([
+    [points[0], "compare-point"],
+    [points[1], "compare-point"]
+  ]);
+  const grabbedIndex = grabbedPoint === void 0 ? void 0 : points[grabbedPoint];
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": "Snapshot comparison", className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-3 px-3 py-2.5 sm:px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ee_signals_snapshotTimeline.TimelineTrack,
+      {
+        snapshots,
+        totalCount: totalSnapshots,
+        markers,
+        grabbedIndex,
+        onTickSelect: handleTickSelect
+      }
+    ) }),
+    /* @__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 rounded-md border px-2 py-1 font-mono text-xs tabular-nums", children: ee_signals_sankeySignalsData.snapshotSummaryLabel(fromSnapshot, flows[fromIndex]) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-neutral3 text-xs", children: "→" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-border1 text-neutral4 rounded-md border px-2 py-1 font-mono text-xs tabular-nums", children: ee_signals_sankeySignalsData.snapshotSummaryLabel(toSnapshot, flows[toIndex]) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral3 text-xs", 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 rounded-lg border p-6 text-sm", 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,
+        fromFlow,
+        toFlow,
+        flows,
+        positions,
+        fromIndex,
+        toIndex,
+        onThemeSelect
+      },
+      signalName
+    )) })
+  ] });
+}
+
+exports.ThemeCompare = ThemeCompare;
+//# sourceMappingURL=theme-compare.cjs.js.map

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

@@ -0,0 +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 rounded-md border px-2 py-1 font-mono text-xs tabular-nums\">\n          {snapshotSummaryLabel(fromSnapshot, flows[fromIndex])}\n        </p>\n        <span aria-hidden=\"true\" className=\"text-neutral3 text-xs\">\n          →\n        </span>\n        <p className=\"border-border1 text-neutral4 rounded-md border px-2 py-1 font-mono text-xs tabular-nums\">\n          {snapshotSummaryLabel(toSnapshot, flows[toIndex])}\n        </p>\n        <p className=\"text-neutral3 text-xs\">\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 rounded-lg border p-6 text-sm\">\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.d.ts

@@ -0,0 +1,2 @@
+export * from '../../src/ee/signals/theme-compare'
+export {}