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

package/dist/ee/signals/flow-card.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow-card.es.js","sources":["../../../src/ee/signals/flow-card.tsx"],"sourcesContent":["import { getSignalRecordNodeId, getSignalRecordNodeLabel, getSignalRecordNodeValue } from './sankey-signals-data';\nimport { getSignalHue } from './signal-colors';\nimport { SortableSignalHeaders } from './sortable-signal-headers';\nimport type { ThemeFlowResponse, TraceSignalName } from './types';\nimport { Card, CardContent } from '@/ds/components/Card';\nimport { Sankey, SankeyChart } from '@/ds/components/SankeyChart';\nimport type { SankeyChartColumn, SankeyChartNodeSelection, SankeyChartRecord } from '@/ds/components/SankeyChart';\n\nexport function FlowCard({\n  columns,\n  records,\n  stages,\n  height,\n  onNodeClick,\n  isNodeClickable,\n  drillInDisabledReason,\n  onOrderChange,\n  signalOrder,\n  reorderDisabled,\n}: {\n  columns: SankeyChartColumn[];\n  records: SankeyChartRecord[];\n  stages: ThemeFlowResponse['stages'];\n  height?: number;\n  onNodeClick?: (selection: SankeyChartNodeSelection) => void;\n  isNodeClickable?: (selection: SankeyChartNodeSelection) => boolean;\n  drillInDisabledReason?: string;\n  onOrderChange: (signalNames: TraceSignalName[]) => void;\n  signalOrder: TraceSignalName[];\n  reorderDisabled: boolean;\n}) {\n  const linkedColumnIds = new Set(columns.map(column => column.id));\n  const stageSignalNames = stages.map(stage => stage.signalName).filter(signalName => linkedColumnIds.has(signalName));\n  const optimisticSignalNames = signalOrder.filter(signalName => linkedColumnIds.has(signalName));\n  const optimisticSignalSet = new Set(optimisticSignalNames);\n  const headerSignalNames = reorderDisabled\n    ? [...optimisticSignalNames, ...stageSignalNames.filter(signalName => !optimisticSignalSet.has(signalName))]\n    : stageSignalNames;\n  const chartColumns = columns.map(column => ({ ...column, label: column.label.toUpperCase() }));\n  const handleHeaderOrderChange = (reordered: TraceSignalName[]) => {\n    const seen = new Set<TraceSignalName>(reordered);\n    onOrderChange([...reordered, ...signalOrder.filter(name => !seen.has(name))]);\n  };\n\n  return (\n    <Card\n      aria-label=\"Trace signal theme flow\"\n      as=\"section\"\n      className=\"relative min-w-0\"\n      elevation=\"elevated\"\n      title={drillInDisabledReason}\n    >\n      <span\n        aria-hidden=\"true\"\n        className=\"bg-surface2 text-neutral3 text-ui-xs absolute top-0 left-5 -translate-y-1/2 px-2 font-mono tracking-[0.18em]\"\n      >\n        SIGNALS\n      </span>\n      <CardContent className=\"px-0 pt-4 pb-2 sm:pt-5 sm:pb-3\">\n        <SortableSignalHeaders\n          signalNames={headerSignalNames}\n          reorderDisabled={reorderDisabled}\n          onOrderChange={handleHeaderOrderChange}\n        />\n        <div\n          aria-label=\"Themes\"\n          className=\"text-neutral3 text-ui-xs flex items-center gap-2 py-1 font-mono tracking-[0.18em]\"\n          role=\"separator\"\n        >\n          <span aria-hidden=\"true\" className=\"bg-border1 h-px w-5\" />\n          THEMES\n          <span aria-hidden=\"true\" className=\"bg-border1 h-px flex-1\" />\n        </div>\n        <div aria-busy={reorderDisabled} data-testid=\"sankey-order-transition\">\n          <Sankey\n            data={records}\n            columns={chartColumns}\n            columnOrder={chartColumns.map(column => column.id)}\n            getColumnHue={column => getSignalHue(column.id)}\n            getRecordNodeId={getSignalRecordNodeId}\n            getRecordNodeLabel={getSignalRecordNodeLabel}\n            getRecordNodeValue={getSignalRecordNodeValue}\n            getRecordWeight={record => Number(record.traceCount)}\n            getRecordLayoutWeight={record => Number(record.layoutTraceCount)}\n          >\n            <SankeyChart\n              height={height ?? 'clamp(340px, 42vw, 460px)'}\n              margin={{ top: 40, right: 32, bottom: 24, left: 32 }}\n              onNodeClick={onNodeClick}\n              isNodeClickable={isNodeClickable}\n              hideColumnLabels\n              geometryTransitionKey={chartColumns.map(column => column.id).join(':')}\n            />\n          </Sankey>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"flow-card.es.js","sources":["../../../src/ee/signals/flow-card.tsx"],"sourcesContent":["import { getSignalRecordNodeId, getSignalRecordNodeLabel, getSignalRecordNodeValue } from './sankey-signals-data';\nimport { getSignalHue } from './signal-colors';\nimport { SortableSignalHeaders } from './sortable-signal-headers';\nimport type { ThemeFlowResponse, TraceSignalName } from './types';\nimport { Card, CardContent } from '@/ds/components/Card';\nimport { Sankey, SankeyChart } from '@/ds/components/SankeyChart';\nimport type { SankeyChartColumn, SankeyChartNodeSelection, SankeyChartRecord } from '@/ds/components/SankeyChart';\n\nexport function FlowCard({\n  columns,\n  records,\n  stages,\n  height,\n  onNodeClick,\n  isNodeClickable,\n  drillInDisabledReason,\n  onOrderChange,\n  signalOrder,\n  reorderDisabled,\n}: {\n  columns: SankeyChartColumn[];\n  records: SankeyChartRecord[];\n  stages: ThemeFlowResponse['stages'];\n  height?: number;\n  onNodeClick?: (selection: SankeyChartNodeSelection) => void;\n  isNodeClickable?: (selection: SankeyChartNodeSelection) => boolean;\n  drillInDisabledReason?: string;\n  onOrderChange: (signalNames: TraceSignalName[]) => void;\n  signalOrder: TraceSignalName[];\n  reorderDisabled: boolean;\n}) {\n  const linkedColumnIds = new Set(columns.map(column => column.id));\n  const stageSignalNames = stages.map(stage => stage.signalName).filter(signalName => linkedColumnIds.has(signalName));\n  const optimisticSignalNames = signalOrder.filter(signalName => linkedColumnIds.has(signalName));\n  const optimisticSignalSet = new Set(optimisticSignalNames);\n  const headerSignalNames = reorderDisabled\n    ? [...optimisticSignalNames, ...stageSignalNames.filter(signalName => !optimisticSignalSet.has(signalName))]\n    : stageSignalNames;\n  const chartColumns = columns.map(column => ({ ...column, label: column.label.toUpperCase() }));\n  const handleHeaderOrderChange = (reordered: TraceSignalName[]) => {\n    const seen = new Set<TraceSignalName>(reordered);\n    onOrderChange([...reordered, ...signalOrder.filter(name => !seen.has(name))]);\n  };\n\n  return (\n    <Card\n      aria-label=\"Trace signal theme flow\"\n      as=\"section\"\n      className=\"relative min-w-0\"\n      elevation=\"raised\"\n      title={drillInDisabledReason}\n    >\n      <span\n        aria-hidden=\"true\"\n        className=\"bg-background text-muted-foreground text-meta absolute top-0 left-5 -translate-y-1/2 px-2 font-mono tracking-[0.18em]\"\n      >\n        SIGNALS\n      </span>\n      <CardContent className=\"px-0 pt-4 pb-2 sm:pt-5 sm:pb-3\">\n        <SortableSignalHeaders\n          signalNames={headerSignalNames}\n          reorderDisabled={reorderDisabled}\n          onOrderChange={handleHeaderOrderChange}\n        />\n        <div\n          aria-label=\"Themes\"\n          className=\"text-muted-foreground text-meta flex items-center gap-2 py-1 font-mono tracking-[0.18em]\"\n          role=\"separator\"\n        >\n          <span aria-hidden=\"true\" className=\"bg-border h-px w-5\" />\n          THEMES\n          <span aria-hidden=\"true\" className=\"bg-border h-px flex-1\" />\n        </div>\n        <div aria-busy={reorderDisabled} data-testid=\"sankey-order-transition\">\n          <Sankey\n            data={records}\n            columns={chartColumns}\n            columnOrder={chartColumns.map(column => column.id)}\n            getColumnHue={column => getSignalHue(column.id)}\n            getRecordNodeId={getSignalRecordNodeId}\n            getRecordNodeLabel={getSignalRecordNodeLabel}\n            getRecordNodeValue={getSignalRecordNodeValue}\n            getRecordWeight={record => Number(record.traceCount)}\n            getRecordLayoutWeight={record => Number(record.layoutTraceCount)}\n          >\n            <SankeyChart\n              height={height ?? 'clamp(340px, 42vw, 460px)'}\n              margin={{ top: 40, right: 32, bottom: 24, left: 32 }}\n              onNodeClick={onNodeClick}\n              isNodeClickable={isNodeClickable}\n              hideColumnLabels\n              geometryTransitionKey={chartColumns.map(column => column.id).join(':')}\n            />\n          </Sankey>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/ee/signals/lifeline-point.cjs.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const reactDom = require('react-dom');
+const chartTooltip = require('../../chart-tooltip-DX6vs_Tc.cjs');
 
 function LifelinePoint({
   title,
@@ -55,9 +56,9 @@ function LifelinePoint({
     ),
     tooltipPosition ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+        chartTooltip.ChartTooltip,
         {
-          className: "border-border1 bg-surface5 text-neutral6 shadow-elevated text-ui-sm pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full rounded-md border px-2 py-1 font-mono whitespace-nowrap tabular-nums",
+          className: "pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full px-2 py-1 font-mono whitespace-nowrap tabular-nums",
           id: tooltipId,
           role: "tooltip",
           style: { left: tooltipPosition.left, top: tooltipPosition.top },

package/dist/ee/signals/lifeline-point.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"lifeline-point.cjs.js","sources":["../../../src/ee/signals/lifeline-point.tsx"],"sourcesContent":["import { useId, useState } from 'react';\nimport type { FocusEvent, MouseEvent } from 'react';\nimport { createPortal } from 'react-dom';\n\n/** A theme-presence point with an instant portal tooltip. */\nexport function LifelinePoint({\n  title,\n  positionPercent,\n  height,\n  color,\n  onSelect,\n}: {\n  title: string;\n  positionPercent: number | undefined;\n  height: number;\n  color: string;\n  onSelect: (() => void) | undefined;\n}) {\n  const tooltipId = useId();\n  const [tooltipPosition, setTooltipPosition] = useState<{ left: number; top: number }>();\n\n  if (positionPercent === undefined) return null;\n\n  const style = { left: `${positionPercent}%`, height: `${height}px`, backgroundColor: color };\n\n  function showTooltipAt(target: HTMLElement) {\n    const bounds = target.getBoundingClientRect();\n    setTooltipPosition({ left: bounds.left + bounds.width / 2, top: bounds.top - 6 });\n  }\n\n  function hideTooltip() {\n    setTooltipPosition(undefined);\n  }\n\n  const interactionProps = {\n    'aria-describedby': tooltipPosition ? tooltipId : undefined,\n    onMouseEnter: (event: MouseEvent<HTMLElement>) => showTooltipAt(event.currentTarget),\n    onMouseLeave: hideTooltip,\n    onFocus: (event: FocusEvent<HTMLElement>) => showTooltipAt(event.currentTarget),\n    onBlur: hideTooltip,\n  };\n\n  return (\n    <>\n      {onSelect ? (\n        <button\n          aria-label={title}\n          className=\"absolute bottom-px w-1.5 -translate-x-1/2 cursor-pointer rounded-xs hover:brightness-125\"\n          onClick={onSelect}\n          style={style}\n          type=\"button\"\n          {...interactionProps}\n        />\n      ) : (\n        <span\n          aria-label={title}\n          className=\"absolute bottom-px w-1.5 -translate-x-1/2 rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2\"\n          role=\"img\"\n          style={style}\n          tabIndex={0}\n          {...interactionProps}\n        />\n      )}\n      {tooltipPosition\n        ? createPortal(\n            <div\n              className=\"border-border1 bg-surface5 text-neutral6 shadow-elevated text-ui-sm pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full rounded-md border px-2 py-1 font-mono whitespace-nowrap tabular-nums\"\n              id={tooltipId}\n              role=\"tooltip\"\n              style={{ left: tooltipPosition.left, top: tooltipPosition.top }}\n            >\n              {title}\n            </div>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n"],"names":["useId","useState","jsxs","Fragment","jsx","createPortal"],"mappings":";;;;;;;;AAKO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,MAAM,YAAYA,WAAA,EAAM;AACxB,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIC,cAAA,EAAwC;AAEtF,EAAA,IAAI,eAAA,KAAoB,QAAW,OAAO,IAAA;AAE1C,EAAA,MAAM,KAAA,GAAQ,EAAE,IAAA,EAAM,CAAA,EAAG,eAAe,CAAA,CAAA,CAAA,EAAK,MAAA,EAAQ,CAAA,EAAG,MAAM,CAAA,EAAA,CAAA,EAAM,eAAA,EAAiB,KAAA,EAAM;AAE3F,EAAA,SAAS,cAAc,MAAA,EAAqB;AAC1C,IAAA,MAAM,MAAA,GAAS,OAAO,qBAAA,EAAsB;AAC5C,IAAA,kBAAA,CAAmB,EAAE,IAAA,EAAM,MAAA,CAAO,IAAA,GAAO,MAAA,CAAO,KAAA,GAAQ,CAAA,EAAG,GAAA,EAAK,MAAA,CAAO,GAAA,GAAM,CAAA,EAAG,CAAA;AAAA,EAClF;AAEA,EAAA,SAAS,WAAA,GAAc;AACrB,IAAA,kBAAA,CAAmB,MAAS,CAAA;AAAA,EAC9B;AAEA,EAAA,MAAM,gBAAA,GAAmB;AAAA,IACvB,kBAAA,EAAoB,kBAAkB,SAAA,GAAY,MAAA;AAAA,IAClD,YAAA,EAAc,CAAC,KAAA,KAAmC,aAAA,CAAc,MAAM,aAAa,CAAA;AAAA,IACnF,YAAA,EAAc,WAAA;AAAA,IACd,OAAA,EAAS,CAAC,KAAA,KAAmC,aAAA,CAAc,MAAM,aAAa,CAAA;AAAA,IAC9E,MAAA,EAAQ;AAAA,GACV;AAEA,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,QAAA,mBACCC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAU,0FAAA;AAAA,QACV,OAAA,EAAS,QAAA;AAAA,QACT,KAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACJ,GAAG;AAAA;AAAA,KACN,mBAEAA,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAU,6GAAA;AAAA,QACV,IAAA,EAAK,KAAA;AAAA,QACL,KAAA;AAAA,QACA,QAAA,EAAU,CAAA;AAAA,QACT,GAAG;AAAA;AAAA,KACN;AAAA,IAED,eAAA,GACGC,qBAAA;AAAA,sBACED,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,4MAAA;AAAA,UACV,EAAA,EAAI,SAAA;AAAA,UACJ,IAAA,EAAK,SAAA;AAAA,UACL,OAAO,EAAE,IAAA,EAAM,gBAAgB,IAAA,EAAM,GAAA,EAAK,gBAAgB,GAAA,EAAI;AAAA,UAE7D,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MACA,QAAA,CAAS;AAAA,KACX,GACA;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"lifeline-point.cjs.js","sources":["../../../src/ee/signals/lifeline-point.tsx"],"sourcesContent":["import { useId, useState } from 'react';\nimport type { FocusEvent, MouseEvent } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ChartTooltip } from '@/ds/components/ChartTooltip';\n\n/** A theme-presence point with an instant portal tooltip. */\nexport function LifelinePoint({\n  title,\n  positionPercent,\n  height,\n  color,\n  onSelect,\n}: {\n  title: string;\n  positionPercent: number | undefined;\n  height: number;\n  color: string;\n  onSelect: (() => void) | undefined;\n}) {\n  const tooltipId = useId();\n  const [tooltipPosition, setTooltipPosition] = useState<{ left: number; top: number }>();\n\n  if (positionPercent === undefined) return null;\n\n  const style = { left: `${positionPercent}%`, height: `${height}px`, backgroundColor: color };\n\n  function showTooltipAt(target: HTMLElement) {\n    const bounds = target.getBoundingClientRect();\n    setTooltipPosition({ left: bounds.left + bounds.width / 2, top: bounds.top - 6 });\n  }\n\n  function hideTooltip() {\n    setTooltipPosition(undefined);\n  }\n\n  const interactionProps = {\n    'aria-describedby': tooltipPosition ? tooltipId : undefined,\n    onMouseEnter: (event: MouseEvent<HTMLElement>) => showTooltipAt(event.currentTarget),\n    onMouseLeave: hideTooltip,\n    onFocus: (event: FocusEvent<HTMLElement>) => showTooltipAt(event.currentTarget),\n    onBlur: hideTooltip,\n  };\n\n  return (\n    <>\n      {onSelect ? (\n        <button\n          aria-label={title}\n          className=\"absolute bottom-px w-1.5 -translate-x-1/2 cursor-pointer rounded-xs hover:brightness-125\"\n          onClick={onSelect}\n          style={style}\n          type=\"button\"\n          {...interactionProps}\n        />\n      ) : (\n        <span\n          aria-label={title}\n          className=\"absolute bottom-px w-1.5 -translate-x-1/2 rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2\"\n          role=\"img\"\n          style={style}\n          tabIndex={0}\n          {...interactionProps}\n        />\n      )}\n      {tooltipPosition\n        ? createPortal(\n            <ChartTooltip\n              className=\"pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full px-2 py-1 font-mono whitespace-nowrap tabular-nums\"\n              id={tooltipId}\n              role=\"tooltip\"\n              style={{ left: tooltipPosition.left, top: tooltipPosition.top }}\n            >\n              {title}\n            </ChartTooltip>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n"],"names":["useId","useState","jsxs","Fragment","jsx","createPortal","ChartTooltip"],"mappings":";;;;;;;;;AAMO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,MAAM,YAAYA,WAAA,EAAM;AACxB,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIC,cAAA,EAAwC;AAEtF,EAAA,IAAI,eAAA,KAAoB,QAAW,OAAO,IAAA;AAE1C,EAAA,MAAM,KAAA,GAAQ,EAAE,IAAA,EAAM,CAAA,EAAG,eAAe,CAAA,CAAA,CAAA,EAAK,MAAA,EAAQ,CAAA,EAAG,MAAM,CAAA,EAAA,CAAA,EAAM,eAAA,EAAiB,KAAA,EAAM;AAE3F,EAAA,SAAS,cAAc,MAAA,EAAqB;AAC1C,IAAA,MAAM,MAAA,GAAS,OAAO,qBAAA,EAAsB;AAC5C,IAAA,kBAAA,CAAmB,EAAE,IAAA,EAAM,MAAA,CAAO,IAAA,GAAO,MAAA,CAAO,KAAA,GAAQ,CAAA,EAAG,GAAA,EAAK,MAAA,CAAO,GAAA,GAAM,CAAA,EAAG,CAAA;AAAA,EAClF;AAEA,EAAA,SAAS,WAAA,GAAc;AACrB,IAAA,kBAAA,CAAmB,MAAS,CAAA;AAAA,EAC9B;AAEA,EAAA,MAAM,gBAAA,GAAmB;AAAA,IACvB,kBAAA,EAAoB,kBAAkB,SAAA,GAAY,MAAA;AAAA,IAClD,YAAA,EAAc,CAAC,KAAA,KAAmC,aAAA,CAAc,MAAM,aAAa,CAAA;AAAA,IACnF,YAAA,EAAc,WAAA;AAAA,IACd,OAAA,EAAS,CAAC,KAAA,KAAmC,aAAA,CAAc,MAAM,aAAa,CAAA;AAAA,IAC9E,MAAA,EAAQ;AAAA,GACV;AAEA,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,QAAA,mBACCC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAU,0FAAA;AAAA,QACV,OAAA,EAAS,QAAA;AAAA,QACT,KAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACJ,GAAG;AAAA;AAAA,KACN,mBAEAA,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAU,6GAAA;AAAA,QACV,IAAA,EAAK,KAAA;AAAA,QACL,KAAA;AAAA,QACA,QAAA,EAAU,CAAA;AAAA,QACT,GAAG;AAAA;AAAA,KACN;AAAA,IAED,eAAA,GACGC,qBAAA;AAAA,sBACED,cAAA;AAAA,QAACE,yBAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,sHAAA;AAAA,UACV,EAAA,EAAI,SAAA;AAAA,UACJ,IAAA,EAAK,SAAA;AAAA,UACL,OAAO,EAAE,IAAA,EAAM,gBAAgB,IAAA,EAAM,GAAA,EAAK,gBAAgB,GAAA,EAAI;AAAA,UAE7D,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MACA,QAAA,CAAS;AAAA,KACX,GACA;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}

package/dist/ee/signals/lifeline-point.es.js

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useId, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { C as ChartTooltip } from '../../chart-tooltip-84fl_3Wc.js';
 
 function LifelinePoint({
   title,
@@ -51,9 +52,9 @@ function LifelinePoint({
     ),
     tooltipPosition ? createPortal(
       /* @__PURE__ */ jsx(
-        "div",
+        ChartTooltip,
         {
-          className: "border-border1 bg-surface5 text-neutral6 shadow-elevated text-ui-sm pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full rounded-md border px-2 py-1 font-mono whitespace-nowrap tabular-nums",
+          className: "pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full px-2 py-1 font-mono whitespace-nowrap tabular-nums",
           id: tooltipId,
           role: "tooltip",
           style: { left: tooltipPosition.left, top: tooltipPosition.top },

package/dist/ee/signals/lifeline-point.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"lifeline-point.es.js","sources":["../../../src/ee/signals/lifeline-point.tsx"],"sourcesContent":["import { useId, useState } from 'react';\nimport type { FocusEvent, MouseEvent } from 'react';\nimport { createPortal } from 'react-dom';\n\n/** A theme-presence point with an instant portal tooltip. */\nexport function LifelinePoint({\n  title,\n  positionPercent,\n  height,\n  color,\n  onSelect,\n}: {\n  title: string;\n  positionPercent: number | undefined;\n  height: number;\n  color: string;\n  onSelect: (() => void) | undefined;\n}) {\n  const tooltipId = useId();\n  const [tooltipPosition, setTooltipPosition] = useState<{ left: number; top: number }>();\n\n  if (positionPercent === undefined) return null;\n\n  const style = { left: `${positionPercent}%`, height: `${height}px`, backgroundColor: color };\n\n  function showTooltipAt(target: HTMLElement) {\n    const bounds = target.getBoundingClientRect();\n    setTooltipPosition({ left: bounds.left + bounds.width / 2, top: bounds.top - 6 });\n  }\n\n  function hideTooltip() {\n    setTooltipPosition(undefined);\n  }\n\n  const interactionProps = {\n    'aria-describedby': tooltipPosition ? tooltipId : undefined,\n    onMouseEnter: (event: MouseEvent<HTMLElement>) => showTooltipAt(event.currentTarget),\n    onMouseLeave: hideTooltip,\n    onFocus: (event: FocusEvent<HTMLElement>) => showTooltipAt(event.currentTarget),\n    onBlur: hideTooltip,\n  };\n\n  return (\n    <>\n      {onSelect ? (\n        <button\n          aria-label={title}\n          className=\"absolute bottom-px w-1.5 -translate-x-1/2 cursor-pointer rounded-xs hover:brightness-125\"\n          onClick={onSelect}\n          style={style}\n          type=\"button\"\n          {...interactionProps}\n        />\n      ) : (\n        <span\n          aria-label={title}\n          className=\"absolute bottom-px w-1.5 -translate-x-1/2 rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2\"\n          role=\"img\"\n          style={style}\n          tabIndex={0}\n          {...interactionProps}\n        />\n      )}\n      {tooltipPosition\n        ? createPortal(\n            <div\n              className=\"border-border1 bg-surface5 text-neutral6 shadow-elevated text-ui-sm pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full rounded-md border px-2 py-1 font-mono whitespace-nowrap tabular-nums\"\n              id={tooltipId}\n              role=\"tooltip\"\n              style={{ left: tooltipPosition.left, top: tooltipPosition.top }}\n            >\n              {title}\n            </div>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAKO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,MAAM,YAAY,KAAA,EAAM;AACxB,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA,EAAwC;AAEtF,EAAA,IAAI,eAAA,KAAoB,QAAW,OAAO,IAAA;AAE1C,EAAA,MAAM,KAAA,GAAQ,EAAE,IAAA,EAAM,CAAA,EAAG,eAAe,CAAA,CAAA,CAAA,EAAK,MAAA,EAAQ,CAAA,EAAG,MAAM,CAAA,EAAA,CAAA,EAAM,eAAA,EAAiB,KAAA,EAAM;AAE3F,EAAA,SAAS,cAAc,MAAA,EAAqB;AAC1C,IAAA,MAAM,MAAA,GAAS,OAAO,qBAAA,EAAsB;AAC5C,IAAA,kBAAA,CAAmB,EAAE,IAAA,EAAM,MAAA,CAAO,IAAA,GAAO,MAAA,CAAO,KAAA,GAAQ,CAAA,EAAG,GAAA,EAAK,MAAA,CAAO,GAAA,GAAM,CAAA,EAAG,CAAA;AAAA,EAClF;AAEA,EAAA,SAAS,WAAA,GAAc;AACrB,IAAA,kBAAA,CAAmB,MAAS,CAAA;AAAA,EAC9B;AAEA,EAAA,MAAM,gBAAA,GAAmB;AAAA,IACvB,kBAAA,EAAoB,kBAAkB,SAAA,GAAY,MAAA;AAAA,IAClD,YAAA,EAAc,CAAC,KAAA,KAAmC,aAAA,CAAc,MAAM,aAAa,CAAA;AAAA,IACnF,YAAA,EAAc,WAAA;AAAA,IACd,OAAA,EAAS,CAAC,KAAA,KAAmC,aAAA,CAAc,MAAM,aAAa,CAAA;AAAA,IAC9E,MAAA,EAAQ;AAAA,GACV;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,QAAA,mBACC,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAU,0FAAA;AAAA,QACV,OAAA,EAAS,QAAA;AAAA,QACT,KAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACJ,GAAG;AAAA;AAAA,KACN,mBAEA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAU,6GAAA;AAAA,QACV,IAAA,EAAK,KAAA;AAAA,QACL,KAAA;AAAA,QACA,QAAA,EAAU,CAAA;AAAA,QACT,GAAG;AAAA;AAAA,KACN;AAAA,IAED,eAAA,GACG,YAAA;AAAA,sBACE,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,4MAAA;AAAA,UACV,EAAA,EAAI,SAAA;AAAA,UACJ,IAAA,EAAK,SAAA;AAAA,UACL,OAAO,EAAE,IAAA,EAAM,gBAAgB,IAAA,EAAM,GAAA,EAAK,gBAAgB,GAAA,EAAI;AAAA,UAE7D,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MACA,QAAA,CAAS;AAAA,KACX,GACA;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"lifeline-point.es.js","sources":["../../../src/ee/signals/lifeline-point.tsx"],"sourcesContent":["import { useId, useState } from 'react';\nimport type { FocusEvent, MouseEvent } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ChartTooltip } from '@/ds/components/ChartTooltip';\n\n/** A theme-presence point with an instant portal tooltip. */\nexport function LifelinePoint({\n  title,\n  positionPercent,\n  height,\n  color,\n  onSelect,\n}: {\n  title: string;\n  positionPercent: number | undefined;\n  height: number;\n  color: string;\n  onSelect: (() => void) | undefined;\n}) {\n  const tooltipId = useId();\n  const [tooltipPosition, setTooltipPosition] = useState<{ left: number; top: number }>();\n\n  if (positionPercent === undefined) return null;\n\n  const style = { left: `${positionPercent}%`, height: `${height}px`, backgroundColor: color };\n\n  function showTooltipAt(target: HTMLElement) {\n    const bounds = target.getBoundingClientRect();\n    setTooltipPosition({ left: bounds.left + bounds.width / 2, top: bounds.top - 6 });\n  }\n\n  function hideTooltip() {\n    setTooltipPosition(undefined);\n  }\n\n  const interactionProps = {\n    'aria-describedby': tooltipPosition ? tooltipId : undefined,\n    onMouseEnter: (event: MouseEvent<HTMLElement>) => showTooltipAt(event.currentTarget),\n    onMouseLeave: hideTooltip,\n    onFocus: (event: FocusEvent<HTMLElement>) => showTooltipAt(event.currentTarget),\n    onBlur: hideTooltip,\n  };\n\n  return (\n    <>\n      {onSelect ? (\n        <button\n          aria-label={title}\n          className=\"absolute bottom-px w-1.5 -translate-x-1/2 cursor-pointer rounded-xs hover:brightness-125\"\n          onClick={onSelect}\n          style={style}\n          type=\"button\"\n          {...interactionProps}\n        />\n      ) : (\n        <span\n          aria-label={title}\n          className=\"absolute bottom-px w-1.5 -translate-x-1/2 rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2\"\n          role=\"img\"\n          style={style}\n          tabIndex={0}\n          {...interactionProps}\n        />\n      )}\n      {tooltipPosition\n        ? createPortal(\n            <ChartTooltip\n              className=\"pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full px-2 py-1 font-mono whitespace-nowrap tabular-nums\"\n              id={tooltipId}\n              role=\"tooltip\"\n              style={{ left: tooltipPosition.left, top: tooltipPosition.top }}\n            >\n              {title}\n            </ChartTooltip>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;AAMO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,MAAM,YAAY,KAAA,EAAM;AACxB,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA,EAAwC;AAEtF,EAAA,IAAI,eAAA,KAAoB,QAAW,OAAO,IAAA;AAE1C,EAAA,MAAM,KAAA,GAAQ,EAAE,IAAA,EAAM,CAAA,EAAG,eAAe,CAAA,CAAA,CAAA,EAAK,MAAA,EAAQ,CAAA,EAAG,MAAM,CAAA,EAAA,CAAA,EAAM,eAAA,EAAiB,KAAA,EAAM;AAE3F,EAAA,SAAS,cAAc,MAAA,EAAqB;AAC1C,IAAA,MAAM,MAAA,GAAS,OAAO,qBAAA,EAAsB;AAC5C,IAAA,kBAAA,CAAmB,EAAE,IAAA,EAAM,MAAA,CAAO,IAAA,GAAO,MAAA,CAAO,KAAA,GAAQ,CAAA,EAAG,GAAA,EAAK,MAAA,CAAO,GAAA,GAAM,CAAA,EAAG,CAAA;AAAA,EAClF;AAEA,EAAA,SAAS,WAAA,GAAc;AACrB,IAAA,kBAAA,CAAmB,MAAS,CAAA;AAAA,EAC9B;AAEA,EAAA,MAAM,gBAAA,GAAmB;AAAA,IACvB,kBAAA,EAAoB,kBAAkB,SAAA,GAAY,MAAA;AAAA,IAClD,YAAA,EAAc,CAAC,KAAA,KAAmC,aAAA,CAAc,MAAM,aAAa,CAAA;AAAA,IACnF,YAAA,EAAc,WAAA;AAAA,IACd,OAAA,EAAS,CAAC,KAAA,KAAmC,aAAA,CAAc,MAAM,aAAa,CAAA;AAAA,IAC9E,MAAA,EAAQ;AAAA,GACV;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,QAAA,mBACC,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAU,0FAAA;AAAA,QACV,OAAA,EAAS,QAAA;AAAA,QACT,KAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACJ,GAAG;AAAA;AAAA,KACN,mBAEA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAU,6GAAA;AAAA,QACV,IAAA,EAAK,KAAA;AAAA,QACL,KAAA;AAAA,QACA,QAAA,EAAU,CAAA;AAAA,QACT,GAAG;AAAA;AAAA,KACN;AAAA,IAED,eAAA,GACG,YAAA;AAAA,sBACE,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,sHAAA;AAAA,UACV,EAAA,EAAI,SAAA;AAAA,UACJ,IAAA,EAAK,SAAA;AAAA,UACL,OAAO,EAAE,IAAA,EAAM,gBAAgB,IAAA,EAAM,GAAA,EAAK,gBAAgB,GAAA,EAAI;AAAA,UAE7D,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MACA,QAAA,CAAS;AAAA,KACX,GACA;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}

package/dist/ee/signals/lifeline-row.cjs.js

@@ -7,6 +7,9 @@ const ee_signals_lifelinePoint = require('./lifeline-point.cjs.js');
 const ee_signals_signalFormatting = require('./signal-formatting.cjs.js');
 const ee_signals_themeLifelinesData = require('./theme-lifelines-data.cjs.js');
 const sankeyColor = require('../../sankeyColor-DHE7ggh8.cjs');
+const primitives_transitions = require('../../primitives/transitions.cjs.js');
+const primitives_typography = require('../../primitives/typography.cjs.js');
+const utils_cn = require('../../cn-DG0X1KEP.cjs');
 
 const TRACK_HEIGHT = 28;
 const MAX_BAR_HEIGHT = 22;
@@ -47,17 +50,21 @@ function LifelineRow({
     "li",
     {
       "aria-label": `${row.label}: present in ${row.points.length} of ${snapshots.length} landmarks`,
-      className: `group hover:bg-surface3 flex items-center gap-3 rounded-md transition-colors ${isPersistent ? "" : "opacity-55 hover:opacity-100"}`,
+      className: `group hover:bg-fill-subtle flex items-center gap-3 rounded-md ${isPersistent ? "" : "opacity-55 hover:opacity-100"}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "text-neutral4 group-hover:text-neutral6 text-ui-sm w-52 shrink-0 truncate text-right",
+            className: utils_cn.cn(
+              primitives_typography.quietTextHoverInGroup,
+              primitives_transitions.controlStateColorTransition,
+              "text-caption w-52 shrink-0 truncate text-right"
+            ),
             title: row.label,
             children: row.label
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border1 relative mx-2 h-7 min-w-0 flex-1 border-b", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border relative mx-2 h-7 min-w-0 flex-1 border-b", children: [
           connectors.length > 0 || segments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
             "svg",
             {
@@ -104,7 +111,7 @@ function LifelineRow({
             );
           })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral3 text-ui-sm w-9 shrink-0 font-mono tabular-nums", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground text-caption w-9 shrink-0 font-mono tabular-nums", children: [
           row.points.length,
           "/",
           snapshots.length

package/dist/ee/signals/lifeline-row.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"lifeline-row.cjs.js","sources":["../../../src/ee/signals/lifeline-row.tsx"],"sourcesContent":["import { LifelinePoint } from './lifeline-point';\nimport { formatSnapshotCutoff } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { lifelineConnectors, lifelineSegments } from './theme-lifelines-data';\nimport type { ThemeLifeline, ThemeLifelinePoint } from './theme-lifelines-data';\nimport type { ThemeSnapshot, TraceSignalName } from './types';\nimport { nodeColor } from '@/ds/components/SankeyChart';\n\nconst TRACK_HEIGHT = 28;\nconst MAX_BAR_HEIGHT = 22;\nconst MIN_BAR_HEIGHT = 4;\n\nfunction barHeight(share: number) {\n  return Math.max(MIN_BAR_HEIGHT, Math.round(share * MAX_BAR_HEIGHT));\n}\n\nfunction pointTitle(snapshot: ThemeSnapshot | undefined, label: string, traceCount: number, share: number) {\n  const cutoff = snapshot?.cutoffAt ? formatSnapshotCutoff(snapshot.cutoffAt) : undefined;\n  return `${label}${cutoff ? ` · ${cutoff}` : ''} · ${traceCount} traces (${Math.round(share * 100)}%)`;\n}\n\nfunction lifelineArea(segment: ThemeLifelinePoint[], positions: number[]) {\n  const firstPoint = segment[0];\n  const lastPoint = segment.at(-1);\n  if (!firstPoint || !lastPoint) return undefined;\n\n  return {\n    key: firstPoint.snapshotIndex,\n    points: [\n      `${positions[firstPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,\n      ...segment.map(point => `${positions[point.snapshotIndex]},${TRACK_HEIGHT - 1 - barHeight(point.share)}`),\n      `${positions[lastPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,\n    ].join(' '),\n  };\n}\n\nexport function LifelineRow({\n  row,\n  signalName,\n  snapshots,\n  positions,\n  hue,\n  onThemeSelect,\n}: {\n  row: ThemeLifeline;\n  signalName: TraceSignalName;\n  snapshots: ThemeSnapshot[];\n  positions: number[];\n  hue: number;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\n  const isPersistent = row.points.length * 2 >= snapshots.length;\n  const connectors = lifelineConnectors(row.points);\n  const segments = lifelineSegments(row.points);\n  const pointY = (point: ThemeLifelinePoint) => TRACK_HEIGHT - 1 - barHeight(point.share);\n\n  return (\n    <li\n      aria-label={`${row.label}: present in ${row.points.length} of ${snapshots.length} landmarks`}\n      className={`group hover:bg-surface3 flex items-center gap-3 rounded-md transition-colors ${isPersistent ? '' : 'opacity-55 hover:opacity-100'}`}\n    >\n      <span\n        className=\"text-neutral4 group-hover:text-neutral6 text-ui-sm w-52 shrink-0 truncate text-right\"\n        title={row.label}\n      >\n        {row.label}\n      </span>\n      <div className=\"border-border1 relative mx-2 h-7 min-w-0 flex-1 border-b\">\n        {connectors.length > 0 || segments.length > 0 ? (\n          <svg\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 size-full\"\n            preserveAspectRatio=\"none\"\n            viewBox={`0 0 100 ${TRACK_HEIGHT}`}\n          >\n            {segments.map(segment => {\n              const area = lifelineArea(segment, positions);\n              if (!area) return undefined;\n              return <polygon key={`area-${area.key}`} fill={nodeColor(hue)} fillOpacity={0.14} points={area.points} />;\n            })}\n            {connectors.map(({ from, to }) => (\n              <line\n                key={`${from.snapshotIndex}-${to.snapshotIndex}`}\n                stroke={nodeColor(hue)}\n                strokeOpacity={0.45}\n                strokeWidth={1.2}\n                vectorEffect=\"non-scaling-stroke\"\n                x1={positions[from.snapshotIndex]}\n                y1={pointY(from)}\n                x2={positions[to.snapshotIndex]}\n                y2={pointY(to)}\n              />\n            ))}\n          </svg>\n        ) : null}\n        {row.points.map(point => {\n          const title = pointTitle(snapshots[point.snapshotIndex], row.label, point.traceCount, point.share);\n          const themeId = point.themeId;\n          return (\n            <LifelinePoint\n              key={point.snapshotIndex}\n              title={title}\n              positionPercent={positions[point.snapshotIndex]}\n              height={barHeight(point.share)}\n              color={nodeColor(hue)}\n              onSelect={\n                themeId === undefined\n                  ? undefined\n                  : () => onThemeSelect({ kind: 'theme', signalName, themeId, label: row.label }, point.snapshotIndex)\n              }\n            />\n          );\n        })}\n      </div>\n      <span className=\"text-neutral3 text-ui-sm w-9 shrink-0 font-mono tabular-nums\">\n        {row.points.length}/{snapshots.length}\n      </span>\n    </li>\n  );\n}\n"],"names":["formatSnapshotCutoff","lifelineConnectors","lifelineSegments","jsxs","jsx","nodeColor","LifelinePoint"],"mappings":"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"}
+{"version":3,"file":"lifeline-row.cjs.js","sources":["../../../src/ee/signals/lifeline-row.tsx"],"sourcesContent":["import { LifelinePoint } from './lifeline-point';\nimport { formatSnapshotCutoff } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { lifelineConnectors, lifelineSegments } from './theme-lifelines-data';\nimport type { ThemeLifeline, ThemeLifelinePoint } from './theme-lifelines-data';\nimport type { ThemeSnapshot, TraceSignalName } from './types';\nimport { nodeColor } from '@/ds/components/SankeyChart';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHoverInGroup } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nconst TRACK_HEIGHT = 28;\nconst MAX_BAR_HEIGHT = 22;\nconst MIN_BAR_HEIGHT = 4;\n\nfunction barHeight(share: number) {\n  return Math.max(MIN_BAR_HEIGHT, Math.round(share * MAX_BAR_HEIGHT));\n}\n\nfunction pointTitle(snapshot: ThemeSnapshot | undefined, label: string, traceCount: number, share: number) {\n  const cutoff = snapshot?.cutoffAt ? formatSnapshotCutoff(snapshot.cutoffAt) : undefined;\n  return `${label}${cutoff ? ` · ${cutoff}` : ''} · ${traceCount} traces (${Math.round(share * 100)}%)`;\n}\n\nfunction lifelineArea(segment: ThemeLifelinePoint[], positions: number[]) {\n  const firstPoint = segment[0];\n  const lastPoint = segment.at(-1);\n  if (!firstPoint || !lastPoint) return undefined;\n\n  return {\n    key: firstPoint.snapshotIndex,\n    points: [\n      `${positions[firstPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,\n      ...segment.map(point => `${positions[point.snapshotIndex]},${TRACK_HEIGHT - 1 - barHeight(point.share)}`),\n      `${positions[lastPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,\n    ].join(' '),\n  };\n}\n\nexport function LifelineRow({\n  row,\n  signalName,\n  snapshots,\n  positions,\n  hue,\n  onThemeSelect,\n}: {\n  row: ThemeLifeline;\n  signalName: TraceSignalName;\n  snapshots: ThemeSnapshot[];\n  positions: number[];\n  hue: number;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\n  const isPersistent = row.points.length * 2 >= snapshots.length;\n  const connectors = lifelineConnectors(row.points);\n  const segments = lifelineSegments(row.points);\n  const pointY = (point: ThemeLifelinePoint) => TRACK_HEIGHT - 1 - barHeight(point.share);\n\n  return (\n    <li\n      aria-label={`${row.label}: present in ${row.points.length} of ${snapshots.length} landmarks`}\n      className={`group hover:bg-fill-subtle flex items-center gap-3 rounded-md ${isPersistent ? '' : 'opacity-55 hover:opacity-100'}`}\n    >\n      <span\n        className={cn(\n          quietTextHoverInGroup,\n          controlStateColorTransition,\n          'text-caption w-52 shrink-0 truncate text-right',\n        )}\n        title={row.label}\n      >\n        {row.label}\n      </span>\n      <div className=\"border-border relative mx-2 h-7 min-w-0 flex-1 border-b\">\n        {connectors.length > 0 || segments.length > 0 ? (\n          <svg\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 size-full\"\n            preserveAspectRatio=\"none\"\n            viewBox={`0 0 100 ${TRACK_HEIGHT}`}\n          >\n            {segments.map(segment => {\n              const area = lifelineArea(segment, positions);\n              if (!area) return undefined;\n              return <polygon key={`area-${area.key}`} fill={nodeColor(hue)} fillOpacity={0.14} points={area.points} />;\n            })}\n            {connectors.map(({ from, to }) => (\n              <line\n                key={`${from.snapshotIndex}-${to.snapshotIndex}`}\n                stroke={nodeColor(hue)}\n                strokeOpacity={0.45}\n                strokeWidth={1.2}\n                vectorEffect=\"non-scaling-stroke\"\n                x1={positions[from.snapshotIndex]}\n                y1={pointY(from)}\n                x2={positions[to.snapshotIndex]}\n                y2={pointY(to)}\n              />\n            ))}\n          </svg>\n        ) : null}\n        {row.points.map(point => {\n          const title = pointTitle(snapshots[point.snapshotIndex], row.label, point.traceCount, point.share);\n          const themeId = point.themeId;\n          return (\n            <LifelinePoint\n              key={point.snapshotIndex}\n              title={title}\n              positionPercent={positions[point.snapshotIndex]}\n              height={barHeight(point.share)}\n              color={nodeColor(hue)}\n              onSelect={\n                themeId === undefined\n                  ? undefined\n                  : () => onThemeSelect({ kind: 'theme', signalName, themeId, label: row.label }, point.snapshotIndex)\n              }\n            />\n          );\n        })}\n      </div>\n      <span className=\"text-muted-foreground text-caption w-9 shrink-0 font-mono tabular-nums\">\n        {row.points.length}/{snapshots.length}\n      </span>\n    </li>\n  );\n}\n"],"names":["formatSnapshotCutoff","lifelineConnectors","lifelineSegments","jsxs","jsx","cn","quietTextHoverInGroup","controlStateColorTransition","nodeColor","LifelinePoint"],"mappings":"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"}

package/dist/ee/signals/lifeline-row.es.js

@@ -3,6 +3,9 @@ import { LifelinePoint } from './lifeline-point.es.js';
 import { formatSnapshotCutoff } from './signal-formatting.es.js';
 import { lifelineConnectors, lifelineSegments } from './theme-lifelines-data.es.js';
 import { n as nodeColor } from '../../sankeyColor-BoMbAWtq.js';
+import { controlStateColorTransition } from '../../primitives/transitions.es.js';
+import { quietTextHoverInGroup } from '../../primitives/typography.es.js';
+import { c as cn } from '../../cn-65Adrsfj.js';
 
 const TRACK_HEIGHT = 28;
 const MAX_BAR_HEIGHT = 22;
@@ -43,17 +46,21 @@ function LifelineRow({
     "li",
     {
       "aria-label": `${row.label}: present in ${row.points.length} of ${snapshots.length} landmarks`,
-      className: `group hover:bg-surface3 flex items-center gap-3 rounded-md transition-colors ${isPersistent ? "" : "opacity-55 hover:opacity-100"}`,
+      className: `group hover:bg-fill-subtle flex items-center gap-3 rounded-md ${isPersistent ? "" : "opacity-55 hover:opacity-100"}`,
       children: [
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "text-neutral4 group-hover:text-neutral6 text-ui-sm w-52 shrink-0 truncate text-right",
+            className: cn(
+              quietTextHoverInGroup,
+              controlStateColorTransition,
+              "text-caption w-52 shrink-0 truncate text-right"
+            ),
             title: row.label,
             children: row.label
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "border-border1 relative mx-2 h-7 min-w-0 flex-1 border-b", children: [
+        /* @__PURE__ */ jsxs("div", { className: "border-border relative mx-2 h-7 min-w-0 flex-1 border-b", children: [
           connectors.length > 0 || segments.length > 0 ? /* @__PURE__ */ jsxs(
             "svg",
             {
@@ -100,7 +107,7 @@ function LifelineRow({
             );
           })
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "text-neutral3 text-ui-sm w-9 shrink-0 font-mono tabular-nums", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-caption w-9 shrink-0 font-mono tabular-nums", children: [
           row.points.length,
           "/",
           snapshots.length

package/dist/ee/signals/lifeline-row.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"lifeline-row.es.js","sources":["../../../src/ee/signals/lifeline-row.tsx"],"sourcesContent":["import { LifelinePoint } from './lifeline-point';\nimport { formatSnapshotCutoff } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { lifelineConnectors, lifelineSegments } from './theme-lifelines-data';\nimport type { ThemeLifeline, ThemeLifelinePoint } from './theme-lifelines-data';\nimport type { ThemeSnapshot, TraceSignalName } from './types';\nimport { nodeColor } from '@/ds/components/SankeyChart';\n\nconst TRACK_HEIGHT = 28;\nconst MAX_BAR_HEIGHT = 22;\nconst MIN_BAR_HEIGHT = 4;\n\nfunction barHeight(share: number) {\n  return Math.max(MIN_BAR_HEIGHT, Math.round(share * MAX_BAR_HEIGHT));\n}\n\nfunction pointTitle(snapshot: ThemeSnapshot | undefined, label: string, traceCount: number, share: number) {\n  const cutoff = snapshot?.cutoffAt ? formatSnapshotCutoff(snapshot.cutoffAt) : undefined;\n  return `${label}${cutoff ? ` · ${cutoff}` : ''} · ${traceCount} traces (${Math.round(share * 100)}%)`;\n}\n\nfunction lifelineArea(segment: ThemeLifelinePoint[], positions: number[]) {\n  const firstPoint = segment[0];\n  const lastPoint = segment.at(-1);\n  if (!firstPoint || !lastPoint) return undefined;\n\n  return {\n    key: firstPoint.snapshotIndex,\n    points: [\n      `${positions[firstPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,\n      ...segment.map(point => `${positions[point.snapshotIndex]},${TRACK_HEIGHT - 1 - barHeight(point.share)}`),\n      `${positions[lastPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,\n    ].join(' '),\n  };\n}\n\nexport function LifelineRow({\n  row,\n  signalName,\n  snapshots,\n  positions,\n  hue,\n  onThemeSelect,\n}: {\n  row: ThemeLifeline;\n  signalName: TraceSignalName;\n  snapshots: ThemeSnapshot[];\n  positions: number[];\n  hue: number;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\n  const isPersistent = row.points.length * 2 >= snapshots.length;\n  const connectors = lifelineConnectors(row.points);\n  const segments = lifelineSegments(row.points);\n  const pointY = (point: ThemeLifelinePoint) => TRACK_HEIGHT - 1 - barHeight(point.share);\n\n  return (\n    <li\n      aria-label={`${row.label}: present in ${row.points.length} of ${snapshots.length} landmarks`}\n      className={`group hover:bg-surface3 flex items-center gap-3 rounded-md transition-colors ${isPersistent ? '' : 'opacity-55 hover:opacity-100'}`}\n    >\n      <span\n        className=\"text-neutral4 group-hover:text-neutral6 text-ui-sm w-52 shrink-0 truncate text-right\"\n        title={row.label}\n      >\n        {row.label}\n      </span>\n      <div className=\"border-border1 relative mx-2 h-7 min-w-0 flex-1 border-b\">\n        {connectors.length > 0 || segments.length > 0 ? (\n          <svg\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 size-full\"\n            preserveAspectRatio=\"none\"\n            viewBox={`0 0 100 ${TRACK_HEIGHT}`}\n          >\n            {segments.map(segment => {\n              const area = lifelineArea(segment, positions);\n              if (!area) return undefined;\n              return <polygon key={`area-${area.key}`} fill={nodeColor(hue)} fillOpacity={0.14} points={area.points} />;\n            })}\n            {connectors.map(({ from, to }) => (\n              <line\n                key={`${from.snapshotIndex}-${to.snapshotIndex}`}\n                stroke={nodeColor(hue)}\n                strokeOpacity={0.45}\n                strokeWidth={1.2}\n                vectorEffect=\"non-scaling-stroke\"\n                x1={positions[from.snapshotIndex]}\n                y1={pointY(from)}\n                x2={positions[to.snapshotIndex]}\n                y2={pointY(to)}\n              />\n            ))}\n          </svg>\n        ) : null}\n        {row.points.map(point => {\n          const title = pointTitle(snapshots[point.snapshotIndex], row.label, point.traceCount, point.share);\n          const themeId = point.themeId;\n          return (\n            <LifelinePoint\n              key={point.snapshotIndex}\n              title={title}\n              positionPercent={positions[point.snapshotIndex]}\n              height={barHeight(point.share)}\n              color={nodeColor(hue)}\n              onSelect={\n                themeId === undefined\n                  ? undefined\n                  : () => onThemeSelect({ kind: 'theme', signalName, themeId, label: row.label }, point.snapshotIndex)\n              }\n            />\n          );\n        })}\n      </div>\n      <span className=\"text-neutral3 text-ui-sm w-9 shrink-0 font-mono tabular-nums\">\n        {row.points.length}/{snapshots.length}\n      </span>\n    </li>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"lifeline-row.es.js","sources":["../../../src/ee/signals/lifeline-row.tsx"],"sourcesContent":["import { LifelinePoint } from './lifeline-point';\nimport { formatSnapshotCutoff } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { lifelineConnectors, lifelineSegments } from './theme-lifelines-data';\nimport type { ThemeLifeline, ThemeLifelinePoint } from './theme-lifelines-data';\nimport type { ThemeSnapshot, TraceSignalName } from './types';\nimport { nodeColor } from '@/ds/components/SankeyChart';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHoverInGroup } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nconst TRACK_HEIGHT = 28;\nconst MAX_BAR_HEIGHT = 22;\nconst MIN_BAR_HEIGHT = 4;\n\nfunction barHeight(share: number) {\n  return Math.max(MIN_BAR_HEIGHT, Math.round(share * MAX_BAR_HEIGHT));\n}\n\nfunction pointTitle(snapshot: ThemeSnapshot | undefined, label: string, traceCount: number, share: number) {\n  const cutoff = snapshot?.cutoffAt ? formatSnapshotCutoff(snapshot.cutoffAt) : undefined;\n  return `${label}${cutoff ? ` · ${cutoff}` : ''} · ${traceCount} traces (${Math.round(share * 100)}%)`;\n}\n\nfunction lifelineArea(segment: ThemeLifelinePoint[], positions: number[]) {\n  const firstPoint = segment[0];\n  const lastPoint = segment.at(-1);\n  if (!firstPoint || !lastPoint) return undefined;\n\n  return {\n    key: firstPoint.snapshotIndex,\n    points: [\n      `${positions[firstPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,\n      ...segment.map(point => `${positions[point.snapshotIndex]},${TRACK_HEIGHT - 1 - barHeight(point.share)}`),\n      `${positions[lastPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,\n    ].join(' '),\n  };\n}\n\nexport function LifelineRow({\n  row,\n  signalName,\n  snapshots,\n  positions,\n  hue,\n  onThemeSelect,\n}: {\n  row: ThemeLifeline;\n  signalName: TraceSignalName;\n  snapshots: ThemeSnapshot[];\n  positions: number[];\n  hue: number;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\n  const isPersistent = row.points.length * 2 >= snapshots.length;\n  const connectors = lifelineConnectors(row.points);\n  const segments = lifelineSegments(row.points);\n  const pointY = (point: ThemeLifelinePoint) => TRACK_HEIGHT - 1 - barHeight(point.share);\n\n  return (\n    <li\n      aria-label={`${row.label}: present in ${row.points.length} of ${snapshots.length} landmarks`}\n      className={`group hover:bg-fill-subtle flex items-center gap-3 rounded-md ${isPersistent ? '' : 'opacity-55 hover:opacity-100'}`}\n    >\n      <span\n        className={cn(\n          quietTextHoverInGroup,\n          controlStateColorTransition,\n          'text-caption w-52 shrink-0 truncate text-right',\n        )}\n        title={row.label}\n      >\n        {row.label}\n      </span>\n      <div className=\"border-border relative mx-2 h-7 min-w-0 flex-1 border-b\">\n        {connectors.length > 0 || segments.length > 0 ? (\n          <svg\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 size-full\"\n            preserveAspectRatio=\"none\"\n            viewBox={`0 0 100 ${TRACK_HEIGHT}`}\n          >\n            {segments.map(segment => {\n              const area = lifelineArea(segment, positions);\n              if (!area) return undefined;\n              return <polygon key={`area-${area.key}`} fill={nodeColor(hue)} fillOpacity={0.14} points={area.points} />;\n            })}\n            {connectors.map(({ from, to }) => (\n              <line\n                key={`${from.snapshotIndex}-${to.snapshotIndex}`}\n                stroke={nodeColor(hue)}\n                strokeOpacity={0.45}\n                strokeWidth={1.2}\n                vectorEffect=\"non-scaling-stroke\"\n                x1={positions[from.snapshotIndex]}\n                y1={pointY(from)}\n                x2={positions[to.snapshotIndex]}\n                y2={pointY(to)}\n              />\n            ))}\n          </svg>\n        ) : null}\n        {row.points.map(point => {\n          const title = pointTitle(snapshots[point.snapshotIndex], row.label, point.traceCount, point.share);\n          const themeId = point.themeId;\n          return (\n            <LifelinePoint\n              key={point.snapshotIndex}\n              title={title}\n              positionPercent={positions[point.snapshotIndex]}\n              height={barHeight(point.share)}\n              color={nodeColor(hue)}\n              onSelect={\n                themeId === undefined\n                  ? undefined\n                  : () => onThemeSelect({ kind: 'theme', signalName, themeId, label: row.label }, point.snapshotIndex)\n              }\n            />\n          );\n        })}\n      </div>\n      <span className=\"text-muted-foreground text-caption w-9 shrink-0 font-mono tabular-nums\">\n        {row.points.length}/{snapshots.length}\n      </span>\n    </li>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/ee/signals/noise-detail-panel.cjs.js

@@ -11,7 +11,9 @@ require('@tanstack/react-query');
 require('./trace-intelligence-context.cjs.js');
 const ee_signals_signalFormatting = require('./signal-formatting.cjs.js');
 const ee_signals_traceInsightView = require('./trace-insight-view.cjs.js');
-const drawer = require('../../drawer-CEufBgtb.cjs');
+const drawer = require('../../drawer-BL5shtHH.cjs');
+const primitives_raisedSurface = require('../../primitives/raised-surface.cjs.js');
+const utils_cn = require('../../cn-DG0X1KEP.cjs');
 
 function NoiseDetailPanel({
   entityId,
@@ -52,7 +54,7 @@ function NoiseDetailPanel({
       side: "right",
       variant: "floating",
       children: /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerContent, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerHeader, { className: "border-border1 border-b", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerHeader, { className: "border-border border-b", children: [
           /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerTitle, { children: "Noise" }),
           /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerDescription, { className: "sr-only", children: [
             "Noise details for the ",
@@ -64,26 +66,43 @@ function NoiseDetailPanel({
           insightTraceId !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(ee_signals_traceInsightView.TraceInsightView, { traceId: insightTraceId, onBack: () => setInsightTraceId(void 0) }),
           insightTraceId === void 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-labelledby": "noise-summary-heading", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "noise-summary-heading", className: "text-neutral3 text-ui-sm font-mono tracking-wider uppercase", children: "Summary" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral5 text-ui-md mt-3", children: "Noise contains trace signal summaries that did not consistently match a recurring theme in this snapshot." }),
-              noiseQuery.isPending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral3 text-ui-md mt-4", children: "Loading noise details…" }),
-              noiseQuery.isError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md mt-4 text-red-500", children: "Unable to load noise details." }),
-              noiseQuery.data && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral5 text-ui-md mt-4 font-mono tabular-nums", children: ee_signals_signalFormatting.shareSentence(
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  id: "noise-summary-heading",
+                  className: "text-muted-foreground text-caption font-mono tracking-wider uppercase",
+                  children: "Summary"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground text-body mt-3", children: "Noise contains trace signal summaries that did not consistently match a recurring theme in this snapshot." }),
+              noiseQuery.isPending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-body mt-4", children: "Loading noise details…" }),
+              noiseQuery.isError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body mt-4 text-red-500", children: "Unable to load noise details." }),
+              noiseQuery.data && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground text-body mt-4 font-mono tabular-nums", children: ee_signals_signalFormatting.shareSentence(
                 filteredStats?.traceCount ?? noiseQuery.data.noise.traceCount,
                 filteredStats?.stageShare ?? noiseQuery.data.noise.coverage
               ) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-labelledby": "noise-examples-heading", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "noise-examples-heading", className: "text-neutral3 text-ui-sm font-mono tracking-wider uppercase", children: "Example summaries" }),
-              examplesQuery.isPending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral3 text-ui-md mt-3", children: "Loading examples…" }),
-              examplesQuery.isError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md mt-3 text-red-500", children: "Unable to load examples." }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  id: "noise-examples-heading",
+                  className: "text-muted-foreground text-caption font-mono tracking-wider uppercase",
+                  children: "Example summaries"
+                }
+              ),
+              examplesQuery.isPending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-body mt-3", children: "Loading examples…" }),
+              examplesQuery.isError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body mt-3 text-red-500", children: "Unable to load examples." }),
               examplesQuery.data && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                examplesQuery.data.examples.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral3 text-ui-md mt-3", children: "No noise examples in this snapshot." }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-3 space-y-3", children: examplesQuery.data.examples.map((example) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                examplesQuery.data.examples.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-body mt-3", children: "No noise examples in this snapshot." }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-3 space-y-3", children: examplesQuery.data.examples.map((example) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     type: "button",
                     "aria-label": `View trace insight for ${example.signalText}`,
-                    className: "border-border1 bg-surface3 text-neutral5 hover:bg-surface5 text-ui-md w-full cursor-pointer rounded-md border p-3 text-left",
+                    className: utils_cn.cn(
+                      primitives_raisedSurface.raisedSurfaceStyle,
+                      "state-layer text-foreground text-body w-full cursor-pointer rounded-md p-3 text-left"
+                    ),
                     onClick: () => setInsightTraceId(example.traceId),
                     children: example.signalText
                   }

package/dist/ee/signals/noise-detail-panel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"noise-detail-panel.cjs.js","sources":["../../../src/ee/signals/noise-detail-panel.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { EXAMPLES_PAGE_SIZE, ExamplesPager } from './examples-pager';\nimport { useNoise, useNoiseExamples } from './hooks';\nimport { shareSentence } from './signal-formatting';\nimport type { ThemeSelection, ThemeSelectionStats } from './theme-drilldown-data';\nimport { TraceInsightView } from './trace-insight-view';\nimport type { TraceSignalName } from './types';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n} from '@/ds/components/Drawer';\n\ninterface NoiseDetailPanelProps {\n  entityId: string;\n  entityType: string;\n  snapshotId: string;\n  signalName: TraceSignalName | undefined;\n  filters?: ThemeSelection[];\n  filteredStats?: ThemeSelectionStats;\n  onClose: () => void;\n}\n\nexport function NoiseDetailPanel({\n  entityId,\n  entityType,\n  snapshotId,\n  signalName,\n  filters = [],\n  filteredStats,\n  onClose,\n}: NoiseDetailPanelProps) {\n  const filterKey = filters\n    .map(filter => `${filter.signalName}:${filter.kind === 'theme' ? filter.themeId : 'noise'}`)\n    .join(',');\n  const examplesContextKey = `${snapshotId}:${signalName ?? ''}:${filterKey}`;\n  const [examplesPage, setExamplesPage] = useState(() => ({ contextKey: examplesContextKey, offset: 0 }));\n  const examplesOffset = examplesPage.contextKey === examplesContextKey ? examplesPage.offset : 0;\n  const [insightTraceId, setInsightTraceId] = useState<string>();\n  const noiseQuery = useNoise(entityId, entityType, signalName, snapshotId);\n  const examplesQuery = useNoiseExamples(\n    entityId,\n    entityType,\n    signalName,\n    snapshotId,\n    EXAMPLES_PAGE_SIZE,\n    examplesOffset,\n    filters,\n  );\n\n  return (\n    <Drawer\n      onOpenChange={open => {\n        if (!open) {\n          setExamplesPage({ contextKey: '', offset: 0 });\n          setInsightTraceId(undefined);\n          onClose();\n        }\n      }}\n      open={signalName !== undefined}\n      overlay=\"none\"\n      side=\"right\"\n      variant=\"floating\"\n    >\n      <DrawerContent>\n        <DrawerHeader className=\"border-border1 border-b\">\n          <DrawerTitle>Noise</DrawerTitle>\n          <DrawerDescription className=\"sr-only\">Noise details for the {signalName} trace signal</DrawerDescription>\n        </DrawerHeader>\n        <DrawerBody className=\"grid content-start gap-6 overflow-y-auto p-6\">\n          {insightTraceId !== undefined && (\n            <TraceInsightView traceId={insightTraceId} onBack={() => setInsightTraceId(undefined)} />\n          )}\n          {insightTraceId === undefined && (\n            <>\n              <section aria-labelledby=\"noise-summary-heading\">\n                <h2 id=\"noise-summary-heading\" className=\"text-neutral3 text-ui-sm font-mono tracking-wider uppercase\">\n                  Summary\n                </h2>\n                <p className=\"text-neutral5 text-ui-md mt-3\">\n                  Noise contains trace signal summaries that did not consistently match a recurring theme in this\n                  snapshot.\n                </p>\n                {noiseQuery.isPending && <p className=\"text-neutral3 text-ui-md mt-4\">Loading noise details…</p>}\n                {noiseQuery.isError && <p className=\"text-ui-md mt-4 text-red-500\">Unable to load noise details.</p>}\n                {noiseQuery.data && (\n                  <p className=\"text-neutral5 text-ui-md mt-4 font-mono tabular-nums\">\n                    {shareSentence(\n                      filteredStats?.traceCount ?? noiseQuery.data.noise.traceCount,\n                      filteredStats?.stageShare ?? noiseQuery.data.noise.coverage,\n                    )}\n                  </p>\n                )}\n              </section>\n\n              <section aria-labelledby=\"noise-examples-heading\">\n                <h2 id=\"noise-examples-heading\" className=\"text-neutral3 text-ui-sm font-mono tracking-wider uppercase\">\n                  Example summaries\n                </h2>\n                {examplesQuery.isPending && <p className=\"text-neutral3 text-ui-md mt-3\">Loading examples…</p>}\n                {examplesQuery.isError && <p className=\"text-ui-md mt-3 text-red-500\">Unable to load examples.</p>}\n                {examplesQuery.data && (\n                  <>\n                    {examplesQuery.data.examples.length === 0 ? (\n                      <p className=\"text-neutral3 text-ui-md mt-3\">No noise examples in this snapshot.</p>\n                    ) : (\n                      <ul className=\"mt-3 space-y-3\">\n                        {examplesQuery.data.examples.map(example => (\n                          <li key={example.traceId}>\n                            <button\n                              type=\"button\"\n                              aria-label={`View trace insight for ${example.signalText}`}\n                              className=\"border-border1 bg-surface3 text-neutral5 hover:bg-surface5 text-ui-md w-full cursor-pointer rounded-md border p-3 text-left\"\n                              onClick={() => setInsightTraceId(example.traceId)}\n                            >\n                              {example.signalText}\n                            </button>\n                          </li>\n                        ))}\n                      </ul>\n                    )}\n                    {noiseQuery.data && (\n                      <ExamplesPager\n                        traceCount={filteredStats?.traceCount ?? noiseQuery.data.noise.traceCount}\n                        offset={examplesOffset}\n                        onOffsetChange={offset => setExamplesPage({ contextKey: examplesContextKey, offset })}\n                      />\n                    )}\n                  </>\n                )}\n              </section>\n            </>\n          )}\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n"],"names":["useState","useNoise","useNoiseExamples","EXAMPLES_PAGE_SIZE","jsx","Drawer","DrawerContent","jsxs","DrawerHeader","DrawerTitle","DrawerDescription","DrawerBody","TraceInsightView","Fragment","shareSentence","ExamplesPager"],"mappings":"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"}
+{"version":3,"file":"noise-detail-panel.cjs.js","sources":["../../../src/ee/signals/noise-detail-panel.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { EXAMPLES_PAGE_SIZE, ExamplesPager } from './examples-pager';\nimport { useNoise, useNoiseExamples } from './hooks';\nimport { shareSentence } from './signal-formatting';\nimport type { ThemeSelection, ThemeSelectionStats } from './theme-drilldown-data';\nimport { TraceInsightView } from './trace-insight-view';\nimport type { TraceSignalName } from './types';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n} from '@/ds/components/Drawer';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\ninterface NoiseDetailPanelProps {\n  entityId: string;\n  entityType: string;\n  snapshotId: string;\n  signalName: TraceSignalName | undefined;\n  filters?: ThemeSelection[];\n  filteredStats?: ThemeSelectionStats;\n  onClose: () => void;\n}\n\nexport function NoiseDetailPanel({\n  entityId,\n  entityType,\n  snapshotId,\n  signalName,\n  filters = [],\n  filteredStats,\n  onClose,\n}: NoiseDetailPanelProps) {\n  const filterKey = filters\n    .map(filter => `${filter.signalName}:${filter.kind === 'theme' ? filter.themeId : 'noise'}`)\n    .join(',');\n  const examplesContextKey = `${snapshotId}:${signalName ?? ''}:${filterKey}`;\n  const [examplesPage, setExamplesPage] = useState(() => ({ contextKey: examplesContextKey, offset: 0 }));\n  const examplesOffset = examplesPage.contextKey === examplesContextKey ? examplesPage.offset : 0;\n  const [insightTraceId, setInsightTraceId] = useState<string>();\n  const noiseQuery = useNoise(entityId, entityType, signalName, snapshotId);\n  const examplesQuery = useNoiseExamples(\n    entityId,\n    entityType,\n    signalName,\n    snapshotId,\n    EXAMPLES_PAGE_SIZE,\n    examplesOffset,\n    filters,\n  );\n\n  return (\n    <Drawer\n      onOpenChange={open => {\n        if (!open) {\n          setExamplesPage({ contextKey: '', offset: 0 });\n          setInsightTraceId(undefined);\n          onClose();\n        }\n      }}\n      open={signalName !== undefined}\n      overlay=\"none\"\n      side=\"right\"\n      variant=\"floating\"\n    >\n      <DrawerContent>\n        <DrawerHeader className=\"border-border border-b\">\n          <DrawerTitle>Noise</DrawerTitle>\n          <DrawerDescription className=\"sr-only\">Noise details for the {signalName} trace signal</DrawerDescription>\n        </DrawerHeader>\n        <DrawerBody className=\"grid content-start gap-6 overflow-y-auto p-6\">\n          {insightTraceId !== undefined && (\n            <TraceInsightView traceId={insightTraceId} onBack={() => setInsightTraceId(undefined)} />\n          )}\n          {insightTraceId === undefined && (\n            <>\n              <section aria-labelledby=\"noise-summary-heading\">\n                <h2\n                  id=\"noise-summary-heading\"\n                  className=\"text-muted-foreground text-caption font-mono tracking-wider uppercase\"\n                >\n                  Summary\n                </h2>\n                <p className=\"text-foreground text-body mt-3\">\n                  Noise contains trace signal summaries that did not consistently match a recurring theme in this\n                  snapshot.\n                </p>\n                {noiseQuery.isPending && <p className=\"text-muted-foreground text-body mt-4\">Loading noise details…</p>}\n                {noiseQuery.isError && <p className=\"text-body mt-4 text-red-500\">Unable to load noise details.</p>}\n                {noiseQuery.data && (\n                  <p className=\"text-foreground text-body mt-4 font-mono tabular-nums\">\n                    {shareSentence(\n                      filteredStats?.traceCount ?? noiseQuery.data.noise.traceCount,\n                      filteredStats?.stageShare ?? noiseQuery.data.noise.coverage,\n                    )}\n                  </p>\n                )}\n              </section>\n\n              <section aria-labelledby=\"noise-examples-heading\">\n                <h2\n                  id=\"noise-examples-heading\"\n                  className=\"text-muted-foreground text-caption font-mono tracking-wider uppercase\"\n                >\n                  Example summaries\n                </h2>\n                {examplesQuery.isPending && <p className=\"text-muted-foreground text-body mt-3\">Loading examples…</p>}\n                {examplesQuery.isError && <p className=\"text-body mt-3 text-red-500\">Unable to load examples.</p>}\n                {examplesQuery.data && (\n                  <>\n                    {examplesQuery.data.examples.length === 0 ? (\n                      <p className=\"text-muted-foreground text-body mt-3\">No noise examples in this snapshot.</p>\n                    ) : (\n                      <ul className=\"mt-3 space-y-3\">\n                        {examplesQuery.data.examples.map(example => (\n                          <li key={example.traceId}>\n                            <button\n                              type=\"button\"\n                              aria-label={`View trace insight for ${example.signalText}`}\n                              className={cn(\n                                raisedSurfaceStyle,\n                                'state-layer text-foreground text-body w-full cursor-pointer rounded-md p-3 text-left',\n                              )}\n                              onClick={() => setInsightTraceId(example.traceId)}\n                            >\n                              {example.signalText}\n                            </button>\n                          </li>\n                        ))}\n                      </ul>\n                    )}\n                    {noiseQuery.data && (\n                      <ExamplesPager\n                        traceCount={filteredStats?.traceCount ?? noiseQuery.data.noise.traceCount}\n                        offset={examplesOffset}\n                        onOffsetChange={offset => setExamplesPage({ contextKey: examplesContextKey, offset })}\n                      />\n                    )}\n                  </>\n                )}\n              </section>\n            </>\n          )}\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n"],"names":["useState","useNoise","useNoiseExamples","EXAMPLES_PAGE_SIZE","jsx","Drawer","DrawerContent","jsxs","DrawerHeader","DrawerTitle","DrawerDescription","DrawerBody","TraceInsightView","Fragment","shareSentence","cn","raisedSurfaceStyle","ExamplesPager"],"mappings":"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"}

package/dist/ee/signals/noise-detail-panel.es.js

@@ -7,7 +7,9 @@ import '@tanstack/react-query';
 import './trace-intelligence-context.es.js';
 import { shareSentence } from './signal-formatting.es.js';
 import { TraceInsightView } from './trace-insight-view.es.js';
-import { D as Drawer, d as DrawerContent, g as DrawerHeader, o as DrawerTitle, e as DrawerDescription, b as DrawerBody } from '../../drawer-DgGxK4oq.js';
+import { D as Drawer, d as DrawerContent, g as DrawerHeader, o as DrawerTitle, e as DrawerDescription, b as DrawerBody } from '../../drawer-Bv2DRY8E.js';
+import { raisedSurfaceStyle } from '../../primitives/raised-surface.es.js';
+import { c as cn } from '../../cn-65Adrsfj.js';
 
 function NoiseDetailPanel({
   entityId,
@@ -48,7 +50,7 @@ function NoiseDetailPanel({
       side: "right",
       variant: "floating",
       children: /* @__PURE__ */ jsxs(DrawerContent, { children: [
-        /* @__PURE__ */ jsxs(DrawerHeader, { className: "border-border1 border-b", children: [
+        /* @__PURE__ */ jsxs(DrawerHeader, { className: "border-border border-b", children: [
           /* @__PURE__ */ jsx(DrawerTitle, { children: "Noise" }),
           /* @__PURE__ */ jsxs(DrawerDescription, { className: "sr-only", children: [
             "Noise details for the ",
@@ -60,26 +62,43 @@ function NoiseDetailPanel({
           insightTraceId !== void 0 && /* @__PURE__ */ jsx(TraceInsightView, { traceId: insightTraceId, onBack: () => setInsightTraceId(void 0) }),
           insightTraceId === void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("section", { "aria-labelledby": "noise-summary-heading", children: [
-              /* @__PURE__ */ jsx("h2", { id: "noise-summary-heading", className: "text-neutral3 text-ui-sm font-mono tracking-wider uppercase", children: "Summary" }),
-              /* @__PURE__ */ jsx("p", { className: "text-neutral5 text-ui-md mt-3", children: "Noise contains trace signal summaries that did not consistently match a recurring theme in this snapshot." }),
-              noiseQuery.isPending && /* @__PURE__ */ jsx("p", { className: "text-neutral3 text-ui-md mt-4", children: "Loading noise details…" }),
-              noiseQuery.isError && /* @__PURE__ */ jsx("p", { className: "text-ui-md mt-4 text-red-500", children: "Unable to load noise details." }),
-              noiseQuery.data && /* @__PURE__ */ jsx("p", { className: "text-neutral5 text-ui-md mt-4 font-mono tabular-nums", children: shareSentence(
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  id: "noise-summary-heading",
+                  className: "text-muted-foreground text-caption font-mono tracking-wider uppercase",
+                  children: "Summary"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-foreground text-body mt-3", children: "Noise contains trace signal summaries that did not consistently match a recurring theme in this snapshot." }),
+              noiseQuery.isPending && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-body mt-4", children: "Loading noise details…" }),
+              noiseQuery.isError && /* @__PURE__ */ jsx("p", { className: "text-body mt-4 text-red-500", children: "Unable to load noise details." }),
+              noiseQuery.data && /* @__PURE__ */ jsx("p", { className: "text-foreground text-body mt-4 font-mono tabular-nums", children: shareSentence(
                 filteredStats?.traceCount ?? noiseQuery.data.noise.traceCount,
                 filteredStats?.stageShare ?? noiseQuery.data.noise.coverage
               ) })
             ] }),
             /* @__PURE__ */ jsxs("section", { "aria-labelledby": "noise-examples-heading", children: [
-              /* @__PURE__ */ jsx("h2", { id: "noise-examples-heading", className: "text-neutral3 text-ui-sm font-mono tracking-wider uppercase", children: "Example summaries" }),
-              examplesQuery.isPending && /* @__PURE__ */ jsx("p", { className: "text-neutral3 text-ui-md mt-3", children: "Loading examples…" }),
-              examplesQuery.isError && /* @__PURE__ */ jsx("p", { className: "text-ui-md mt-3 text-red-500", children: "Unable to load examples." }),
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  id: "noise-examples-heading",
+                  className: "text-muted-foreground text-caption font-mono tracking-wider uppercase",
+                  children: "Example summaries"
+                }
+              ),
+              examplesQuery.isPending && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-body mt-3", children: "Loading examples…" }),
+              examplesQuery.isError && /* @__PURE__ */ jsx("p", { className: "text-body mt-3 text-red-500", children: "Unable to load examples." }),
               examplesQuery.data && /* @__PURE__ */ jsxs(Fragment, { children: [
-                examplesQuery.data.examples.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-neutral3 text-ui-md mt-3", children: "No noise examples in this snapshot." }) : /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-3", children: examplesQuery.data.examples.map((example) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                examplesQuery.data.examples.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-body mt-3", children: "No noise examples in this snapshot." }) : /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-3", children: examplesQuery.data.examples.map((example) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
                   "button",
                   {
                     type: "button",
                     "aria-label": `View trace insight for ${example.signalText}`,
-                    className: "border-border1 bg-surface3 text-neutral5 hover:bg-surface5 text-ui-md w-full cursor-pointer rounded-md border p-3 text-left",
+                    className: cn(
+                      raisedSurfaceStyle,
+                      "state-layer text-foreground text-body w-full cursor-pointer rounded-md p-3 text-left"
+                    ),
                     onClick: () => setInsightTraceId(example.traceId),
                     children: example.signalText
                   }

package/dist/ee/signals/noise-detail-panel.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"noise-detail-panel.es.js","sources":["../../../src/ee/signals/noise-detail-panel.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { EXAMPLES_PAGE_SIZE, ExamplesPager } from './examples-pager';\nimport { useNoise, useNoiseExamples } from './hooks';\nimport { shareSentence } from './signal-formatting';\nimport type { ThemeSelection, ThemeSelectionStats } from './theme-drilldown-data';\nimport { TraceInsightView } from './trace-insight-view';\nimport type { TraceSignalName } from './types';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n} from '@/ds/components/Drawer';\n\ninterface NoiseDetailPanelProps {\n  entityId: string;\n  entityType: string;\n  snapshotId: string;\n  signalName: TraceSignalName | undefined;\n  filters?: ThemeSelection[];\n  filteredStats?: ThemeSelectionStats;\n  onClose: () => void;\n}\n\nexport function NoiseDetailPanel({\n  entityId,\n  entityType,\n  snapshotId,\n  signalName,\n  filters = [],\n  filteredStats,\n  onClose,\n}: NoiseDetailPanelProps) {\n  const filterKey = filters\n    .map(filter => `${filter.signalName}:${filter.kind === 'theme' ? filter.themeId : 'noise'}`)\n    .join(',');\n  const examplesContextKey = `${snapshotId}:${signalName ?? ''}:${filterKey}`;\n  const [examplesPage, setExamplesPage] = useState(() => ({ contextKey: examplesContextKey, offset: 0 }));\n  const examplesOffset = examplesPage.contextKey === examplesContextKey ? examplesPage.offset : 0;\n  const [insightTraceId, setInsightTraceId] = useState<string>();\n  const noiseQuery = useNoise(entityId, entityType, signalName, snapshotId);\n  const examplesQuery = useNoiseExamples(\n    entityId,\n    entityType,\n    signalName,\n    snapshotId,\n    EXAMPLES_PAGE_SIZE,\n    examplesOffset,\n    filters,\n  );\n\n  return (\n    <Drawer\n      onOpenChange={open => {\n        if (!open) {\n          setExamplesPage({ contextKey: '', offset: 0 });\n          setInsightTraceId(undefined);\n          onClose();\n        }\n      }}\n      open={signalName !== undefined}\n      overlay=\"none\"\n      side=\"right\"\n      variant=\"floating\"\n    >\n      <DrawerContent>\n        <DrawerHeader className=\"border-border1 border-b\">\n          <DrawerTitle>Noise</DrawerTitle>\n          <DrawerDescription className=\"sr-only\">Noise details for the {signalName} trace signal</DrawerDescription>\n        </DrawerHeader>\n        <DrawerBody className=\"grid content-start gap-6 overflow-y-auto p-6\">\n          {insightTraceId !== undefined && (\n            <TraceInsightView traceId={insightTraceId} onBack={() => setInsightTraceId(undefined)} />\n          )}\n          {insightTraceId === undefined && (\n            <>\n              <section aria-labelledby=\"noise-summary-heading\">\n                <h2 id=\"noise-summary-heading\" className=\"text-neutral3 text-ui-sm font-mono tracking-wider uppercase\">\n                  Summary\n                </h2>\n                <p className=\"text-neutral5 text-ui-md mt-3\">\n                  Noise contains trace signal summaries that did not consistently match a recurring theme in this\n                  snapshot.\n                </p>\n                {noiseQuery.isPending && <p className=\"text-neutral3 text-ui-md mt-4\">Loading noise details…</p>}\n                {noiseQuery.isError && <p className=\"text-ui-md mt-4 text-red-500\">Unable to load noise details.</p>}\n                {noiseQuery.data && (\n                  <p className=\"text-neutral5 text-ui-md mt-4 font-mono tabular-nums\">\n                    {shareSentence(\n                      filteredStats?.traceCount ?? noiseQuery.data.noise.traceCount,\n                      filteredStats?.stageShare ?? noiseQuery.data.noise.coverage,\n                    )}\n                  </p>\n                )}\n              </section>\n\n              <section aria-labelledby=\"noise-examples-heading\">\n                <h2 id=\"noise-examples-heading\" className=\"text-neutral3 text-ui-sm font-mono tracking-wider uppercase\">\n                  Example summaries\n                </h2>\n                {examplesQuery.isPending && <p className=\"text-neutral3 text-ui-md mt-3\">Loading examples…</p>}\n                {examplesQuery.isError && <p className=\"text-ui-md mt-3 text-red-500\">Unable to load examples.</p>}\n                {examplesQuery.data && (\n                  <>\n                    {examplesQuery.data.examples.length === 0 ? (\n                      <p className=\"text-neutral3 text-ui-md mt-3\">No noise examples in this snapshot.</p>\n                    ) : (\n                      <ul className=\"mt-3 space-y-3\">\n                        {examplesQuery.data.examples.map(example => (\n                          <li key={example.traceId}>\n                            <button\n                              type=\"button\"\n                              aria-label={`View trace insight for ${example.signalText}`}\n                              className=\"border-border1 bg-surface3 text-neutral5 hover:bg-surface5 text-ui-md w-full cursor-pointer rounded-md border p-3 text-left\"\n                              onClick={() => setInsightTraceId(example.traceId)}\n                            >\n                              {example.signalText}\n                            </button>\n                          </li>\n                        ))}\n                      </ul>\n                    )}\n                    {noiseQuery.data && (\n                      <ExamplesPager\n                        traceCount={filteredStats?.traceCount ?? noiseQuery.data.noise.traceCount}\n                        offset={examplesOffset}\n                        onOffsetChange={offset => setExamplesPage({ contextKey: examplesContextKey, offset })}\n                      />\n                    )}\n                  </>\n                )}\n              </section>\n            </>\n          )}\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"noise-detail-panel.es.js","sources":["../../../src/ee/signals/noise-detail-panel.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { EXAMPLES_PAGE_SIZE, ExamplesPager } from './examples-pager';\nimport { useNoise, useNoiseExamples } from './hooks';\nimport { shareSentence } from './signal-formatting';\nimport type { ThemeSelection, ThemeSelectionStats } from './theme-drilldown-data';\nimport { TraceInsightView } from './trace-insight-view';\nimport type { TraceSignalName } from './types';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n} from '@/ds/components/Drawer';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\ninterface NoiseDetailPanelProps {\n  entityId: string;\n  entityType: string;\n  snapshotId: string;\n  signalName: TraceSignalName | undefined;\n  filters?: ThemeSelection[];\n  filteredStats?: ThemeSelectionStats;\n  onClose: () => void;\n}\n\nexport function NoiseDetailPanel({\n  entityId,\n  entityType,\n  snapshotId,\n  signalName,\n  filters = [],\n  filteredStats,\n  onClose,\n}: NoiseDetailPanelProps) {\n  const filterKey = filters\n    .map(filter => `${filter.signalName}:${filter.kind === 'theme' ? filter.themeId : 'noise'}`)\n    .join(',');\n  const examplesContextKey = `${snapshotId}:${signalName ?? ''}:${filterKey}`;\n  const [examplesPage, setExamplesPage] = useState(() => ({ contextKey: examplesContextKey, offset: 0 }));\n  const examplesOffset = examplesPage.contextKey === examplesContextKey ? examplesPage.offset : 0;\n  const [insightTraceId, setInsightTraceId] = useState<string>();\n  const noiseQuery = useNoise(entityId, entityType, signalName, snapshotId);\n  const examplesQuery = useNoiseExamples(\n    entityId,\n    entityType,\n    signalName,\n    snapshotId,\n    EXAMPLES_PAGE_SIZE,\n    examplesOffset,\n    filters,\n  );\n\n  return (\n    <Drawer\n      onOpenChange={open => {\n        if (!open) {\n          setExamplesPage({ contextKey: '', offset: 0 });\n          setInsightTraceId(undefined);\n          onClose();\n        }\n      }}\n      open={signalName !== undefined}\n      overlay=\"none\"\n      side=\"right\"\n      variant=\"floating\"\n    >\n      <DrawerContent>\n        <DrawerHeader className=\"border-border border-b\">\n          <DrawerTitle>Noise</DrawerTitle>\n          <DrawerDescription className=\"sr-only\">Noise details for the {signalName} trace signal</DrawerDescription>\n        </DrawerHeader>\n        <DrawerBody className=\"grid content-start gap-6 overflow-y-auto p-6\">\n          {insightTraceId !== undefined && (\n            <TraceInsightView traceId={insightTraceId} onBack={() => setInsightTraceId(undefined)} />\n          )}\n          {insightTraceId === undefined && (\n            <>\n              <section aria-labelledby=\"noise-summary-heading\">\n                <h2\n                  id=\"noise-summary-heading\"\n                  className=\"text-muted-foreground text-caption font-mono tracking-wider uppercase\"\n                >\n                  Summary\n                </h2>\n                <p className=\"text-foreground text-body mt-3\">\n                  Noise contains trace signal summaries that did not consistently match a recurring theme in this\n                  snapshot.\n                </p>\n                {noiseQuery.isPending && <p className=\"text-muted-foreground text-body mt-4\">Loading noise details…</p>}\n                {noiseQuery.isError && <p className=\"text-body mt-4 text-red-500\">Unable to load noise details.</p>}\n                {noiseQuery.data && (\n                  <p className=\"text-foreground text-body mt-4 font-mono tabular-nums\">\n                    {shareSentence(\n                      filteredStats?.traceCount ?? noiseQuery.data.noise.traceCount,\n                      filteredStats?.stageShare ?? noiseQuery.data.noise.coverage,\n                    )}\n                  </p>\n                )}\n              </section>\n\n              <section aria-labelledby=\"noise-examples-heading\">\n                <h2\n                  id=\"noise-examples-heading\"\n                  className=\"text-muted-foreground text-caption font-mono tracking-wider uppercase\"\n                >\n                  Example summaries\n                </h2>\n                {examplesQuery.isPending && <p className=\"text-muted-foreground text-body mt-3\">Loading examples…</p>}\n                {examplesQuery.isError && <p className=\"text-body mt-3 text-red-500\">Unable to load examples.</p>}\n                {examplesQuery.data && (\n                  <>\n                    {examplesQuery.data.examples.length === 0 ? (\n                      <p className=\"text-muted-foreground text-body mt-3\">No noise examples in this snapshot.</p>\n                    ) : (\n                      <ul className=\"mt-3 space-y-3\">\n                        {examplesQuery.data.examples.map(example => (\n                          <li key={example.traceId}>\n                            <button\n                              type=\"button\"\n                              aria-label={`View trace insight for ${example.signalText}`}\n                              className={cn(\n                                raisedSurfaceStyle,\n                                'state-layer text-foreground text-body w-full cursor-pointer rounded-md p-3 text-left',\n                              )}\n                              onClick={() => setInsightTraceId(example.traceId)}\n                            >\n                              {example.signalText}\n                            </button>\n                          </li>\n                        ))}\n                      </ul>\n                    )}\n                    {noiseQuery.data && (\n                      <ExamplesPager\n                        traceCount={filteredStats?.traceCount ?? noiseQuery.data.noise.traceCount}\n                        offset={examplesOffset}\n                        onOffsetChange={offset => setExamplesPage({ contextKey: examplesContextKey, offset })}\n                      />\n                    )}\n                  </>\n                )}\n              </section>\n            </>\n          )}\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n"],"names":[],"mappings":"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"}