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

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

@@ -6,6 +6,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const reactDom = require('react-dom');
 const chartTooltip = require('../../chart-tooltip-DX6vs_Tc.cjs');
+const primitives_transitions = require('../../primitives/transitions.cjs.js');
+const utils_cn = require('../../cn-DG0X1KEP.cjs');
 
 function LifelinePoint({
   title,
@@ -37,7 +39,10 @@ function LifelinePoint({
       "button",
       {
         "aria-label": title,
-        className: "absolute bottom-px w-1.5 -translate-x-1/2 cursor-pointer rounded-xs hover:brightness-125",
+        className: utils_cn.cn(
+          "absolute bottom-px w-1.5 -translate-x-1/2 cursor-pointer rounded-xs hover:brightness-125",
+          primitives_transitions.focusRing
+        ),
         onClick: onSelect,
         style,
         type: "button",
@@ -47,7 +52,7 @@ function LifelinePoint({
       "span",
       {
         "aria-label": title,
-        className: "absolute bottom-px w-1.5 -translate-x-1/2 rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2",
+        className: utils_cn.cn("absolute bottom-px w-1.5 -translate-x-1/2 rounded-xs", primitives_transitions.focusRing),
         role: "img",
         style,
         tabIndex: 0,

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';\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;;;;"}
+{"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';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\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={cn(\n            'absolute bottom-px w-1.5 -translate-x-1/2 cursor-pointer rounded-xs hover:brightness-125',\n            focusRing,\n          )}\n          onClick={onSelect}\n          style={style}\n          type=\"button\"\n          {...interactionProps}\n        />\n      ) : (\n        <span\n          aria-label={title}\n          className={cn('absolute bottom-px w-1.5 -translate-x-1/2 rounded-xs', focusRing)}\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","cn","focusRing","createPortal","ChartTooltip"],"mappings":";;;;;;;;;;;AAQO,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,EAAWC,WAAA;AAAA,UACT,0FAAA;AAAA,UACAC;AAAA,SACF;AAAA,QACA,OAAA,EAAS,QAAA;AAAA,QACT,KAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACJ,GAAG;AAAA;AAAA,KACN,mBAEAF,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAWC,WAAA,CAAG,sDAAA,EAAwDC,gCAAS,CAAA;AAAA,QAC/E,IAAA,EAAK,KAAA;AAAA,QACL,KAAA;AAAA,QACA,QAAA,EAAU,CAAA;AAAA,QACT,GAAG;AAAA;AAAA,KACN;AAAA,IAED,eAAA,GACGC,qBAAA;AAAA,sBACEH,cAAA;AAAA,QAACI,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

@@ -2,6 +2,8 @@ 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';
+import { focusRing } from '../../primitives/transitions.es.js';
+import { c as cn } from '../../cn-65Adrsfj.js';
 
 function LifelinePoint({
   title,
@@ -33,7 +35,10 @@ function LifelinePoint({
       "button",
       {
         "aria-label": title,
-        className: "absolute bottom-px w-1.5 -translate-x-1/2 cursor-pointer rounded-xs hover:brightness-125",
+        className: cn(
+          "absolute bottom-px w-1.5 -translate-x-1/2 cursor-pointer rounded-xs hover:brightness-125",
+          focusRing
+        ),
         onClick: onSelect,
         style,
         type: "button",
@@ -43,7 +48,7 @@ function LifelinePoint({
       "span",
       {
         "aria-label": title,
-        className: "absolute bottom-px w-1.5 -translate-x-1/2 rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2",
+        className: cn("absolute bottom-px w-1.5 -translate-x-1/2 rounded-xs", focusRing),
         role: "img",
         style,
         tabIndex: 0,

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';\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;;;;"}
+{"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';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\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={cn(\n            'absolute bottom-px w-1.5 -translate-x-1/2 cursor-pointer rounded-xs hover:brightness-125',\n            focusRing,\n          )}\n          onClick={onSelect}\n          style={style}\n          type=\"button\"\n          {...interactionProps}\n        />\n      ) : (\n        <span\n          aria-label={title}\n          className={cn('absolute bottom-px w-1.5 -translate-x-1/2 rounded-xs', focusRing)}\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":";;;;;;;AAQO,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,EAAW,EAAA;AAAA,UACT,0FAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,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,EAAW,EAAA,CAAG,sDAAA,EAAwD,SAAS,CAAA;AAAA,QAC/E,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

@@ -4,9 +4,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const ee_signals_lifelinePoint = require('./lifeline-point.cjs.js');
+const ee_signals_signalColors = require('./signal-colors.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 Txt = require('../../Txt-DPmEpNbp.cjs');
 const primitives_transitions = require('../../primitives/transitions.cjs.js');
 const primitives_typography = require('../../primitives/typography.cjs.js');
 const utils_cn = require('../../cn-DG0X1KEP.cjs');
@@ -39,7 +40,6 @@ function LifelineRow({
   signalName,
   snapshots,
   positions,
-  hue,
   onThemeSelect
 }) {
   const isPersistent = row.points.length * 2 >= snapshots.length;
@@ -53,13 +53,11 @@ function LifelineRow({
       className: `group flex items-center gap-3 rounded-md hover:bg-fill-subtle ${isPersistent ? "" : "opacity-55 hover:opacity-100"}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+          Txt.Txt,
           {
-            className: utils_cn.cn(
-              primitives_typography.quietTextHoverInGroup,
-              primitives_transitions.controlStateColorTransition,
-              "w-52 shrink-0 truncate text-right text-caption"
-            ),
+            as: "span",
+            variant: "caption",
+            className: utils_cn.cn(primitives_typography.quietTextHoverInGroup, primitives_transitions.controlStateColorTransition, "w-52 shrink-0 truncate text-right"),
             title: row.label,
             children: row.label
           }
@@ -76,13 +74,12 @@ function LifelineRow({
                 segments.map((segment) => {
                   const area = lifelineArea(segment, positions);
                   if (!area) return void 0;
-                  return /* @__PURE__ */ jsxRuntime.jsx("polygon", { fill: sankeyColor.nodeColor(hue), fillOpacity: 0.14, points: area.points }, `area-${area.key}`);
+                  return /* @__PURE__ */ jsxRuntime.jsx("polygon", { className: ee_signals_signalColors.getSignalAreaClass(signalName), points: area.points }, `area-${area.key}`);
                 }),
                 connectors.map(({ from, to }) => /* @__PURE__ */ jsxRuntime.jsx(
                   "line",
                   {
-                    stroke: sankeyColor.nodeColor(hue),
-                    strokeOpacity: 0.45,
+                    className: ee_signals_signalColors.getSignalConnectorClass(signalName),
                     strokeWidth: 1.2,
                     vectorEffect: "non-scaling-stroke",
                     x1: positions[from.snapshotIndex],
@@ -104,14 +101,14 @@ function LifelineRow({
                 title,
                 positionPercent: positions[point.snapshotIndex],
                 height: barHeight(point.share),
-                color: sankeyColor.nodeColor(hue),
+                color: ee_signals_signalColors.getSignalColor(signalName),
                 onSelect: themeId === void 0 ? void 0 : () => onThemeSelect({ kind: "theme", signalName, themeId, label: row.label }, point.snapshotIndex)
               },
               point.snapshotIndex
             );
           })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "w-9 shrink-0 font-mono text-caption text-muted-foreground tabular-nums", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", variant: "caption", tone: "muted", font: "mono", className: "w-9 shrink-0 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';\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 flex items-center gap-3 rounded-md hover:bg-fill-subtle ${isPersistent ? '' : 'opacity-55 hover:opacity-100'}`}\n    >\n      <span\n        className={cn(\n          quietTextHoverInGroup,\n          controlStateColorTransition,\n          'w-52 shrink-0 truncate text-right text-caption',\n        )}\n        title={row.label}\n      >\n        {row.label}\n      </span>\n      <div className=\"relative mx-2 h-7 min-w-0 flex-1 border-b border-border\">\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=\"w-9 shrink-0 font-mono text-caption text-muted-foreground 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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"}
+{"version":3,"file":"lifeline-row.cjs.js","sources":["../../../src/ee/signals/lifeline-row.tsx"],"sourcesContent":["import { LifelinePoint } from './lifeline-point';\nimport { getSignalAreaClass, getSignalColor, getSignalConnectorClass } from './signal-colors';\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 { Txt } from '@/ds/components/Txt';\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  onThemeSelect,\n}: {\n  row: ThemeLifeline;\n  signalName: TraceSignalName;\n  snapshots: ThemeSnapshot[];\n  positions: 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 flex items-center gap-3 rounded-md hover:bg-fill-subtle ${isPersistent ? '' : 'opacity-55 hover:opacity-100'}`}\n    >\n      <Txt\n        as=\"span\"\n        variant=\"caption\"\n        className={cn(quietTextHoverInGroup, controlStateColorTransition, 'w-52 shrink-0 truncate text-right')}\n        title={row.label}\n      >\n        {row.label}\n      </Txt>\n      <div className=\"relative mx-2 h-7 min-w-0 flex-1 border-b border-border\">\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 (\n                <polygon key={`area-${area.key}`} className={getSignalAreaClass(signalName)} points={area.points} />\n              );\n            })}\n            {connectors.map(({ from, to }) => (\n              <line\n                key={`${from.snapshotIndex}-${to.snapshotIndex}`}\n                className={getSignalConnectorClass(signalName)}\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={getSignalColor(signalName)}\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      <Txt as=\"span\" variant=\"caption\" tone=\"muted\" font=\"mono\" className=\"w-9 shrink-0 tabular-nums\">\n        {row.points.length}/{snapshots.length}\n      </Txt>\n    </li>\n  );\n}\n"],"names":["formatSnapshotCutoff","lifelineConnectors","lifelineSegments","jsxs","jsx","Txt","cn","quietTextHoverInGroup","controlStateColorTransition","getSignalAreaClass","getSignalConnectorClass","LifelinePoint","getSignalColor"],"mappings":"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"}

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

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { LifelinePoint } from './lifeline-point.es.js';
+import { getSignalAreaClass, getSignalConnectorClass, getSignalColor } from './signal-colors.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 { T as Txt } from '../../Txt-BP1SRHmL.js';
 import { controlStateColorTransition } from '../../primitives/transitions.es.js';
 import { quietTextHoverInGroup } from '../../primitives/typography.es.js';
 import { c as cn } from '../../cn-65Adrsfj.js';
@@ -35,7 +36,6 @@ function LifelineRow({
   signalName,
   snapshots,
   positions,
-  hue,
   onThemeSelect
 }) {
   const isPersistent = row.points.length * 2 >= snapshots.length;
@@ -49,13 +49,11 @@ function LifelineRow({
       className: `group flex items-center gap-3 rounded-md hover:bg-fill-subtle ${isPersistent ? "" : "opacity-55 hover:opacity-100"}`,
       children: [
         /* @__PURE__ */ jsx(
-          "span",
+          Txt,
           {
-            className: cn(
-              quietTextHoverInGroup,
-              controlStateColorTransition,
-              "w-52 shrink-0 truncate text-right text-caption"
-            ),
+            as: "span",
+            variant: "caption",
+            className: cn(quietTextHoverInGroup, controlStateColorTransition, "w-52 shrink-0 truncate text-right"),
             title: row.label,
             children: row.label
           }
@@ -72,13 +70,12 @@ function LifelineRow({
                 segments.map((segment) => {
                   const area = lifelineArea(segment, positions);
                   if (!area) return void 0;
-                  return /* @__PURE__ */ jsx("polygon", { fill: nodeColor(hue), fillOpacity: 0.14, points: area.points }, `area-${area.key}`);
+                  return /* @__PURE__ */ jsx("polygon", { className: getSignalAreaClass(signalName), points: area.points }, `area-${area.key}`);
                 }),
                 connectors.map(({ from, to }) => /* @__PURE__ */ jsx(
                   "line",
                   {
-                    stroke: nodeColor(hue),
-                    strokeOpacity: 0.45,
+                    className: getSignalConnectorClass(signalName),
                     strokeWidth: 1.2,
                     vectorEffect: "non-scaling-stroke",
                     x1: positions[from.snapshotIndex],
@@ -100,14 +97,14 @@ function LifelineRow({
                 title,
                 positionPercent: positions[point.snapshotIndex],
                 height: barHeight(point.share),
-                color: nodeColor(hue),
+                color: getSignalColor(signalName),
                 onSelect: themeId === void 0 ? void 0 : () => onThemeSelect({ kind: "theme", signalName, themeId, label: row.label }, point.snapshotIndex)
               },
               point.snapshotIndex
             );
           })
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "w-9 shrink-0 font-mono text-caption text-muted-foreground tabular-nums", children: [
+        /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "caption", tone: "muted", font: "mono", className: "w-9 shrink-0 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';\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 flex items-center gap-3 rounded-md hover:bg-fill-subtle ${isPersistent ? '' : 'opacity-55 hover:opacity-100'}`}\n    >\n      <span\n        className={cn(\n          quietTextHoverInGroup,\n          controlStateColorTransition,\n          'w-52 shrink-0 truncate text-right text-caption',\n        )}\n        title={row.label}\n      >\n        {row.label}\n      </span>\n      <div className=\"relative mx-2 h-7 min-w-0 flex-1 border-b border-border\">\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=\"w-9 shrink-0 font-mono text-caption text-muted-foreground tabular-nums\">\n        {row.points.length}/{snapshots.length}\n      </span>\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,YAAA,GAAe,EAAA;AACrB,MAAM,cAAA,GAAiB,EAAA;AACvB,MAAM,cAAA,GAAiB,CAAA;AAEvB,SAAS,UAAU,KAAA,EAAe;AAChC,EAAA,OAAO,KAAK,GAAA,CAAI,cAAA,EAAgB,KAAK,KAAA,CAAM,KAAA,GAAQ,cAAc,CAAC,CAAA;AACpE;AAEA,SAAS,UAAA,CAAW,QAAA,EAAqC,KAAA,EAAe,UAAA,EAAoB,KAAA,EAAe;AACzG,EAAA,MAAM,SAAS,QAAA,EAAU,QAAA,GAAW,oBAAA,CAAqB,QAAA,CAAS,QAAQ,CAAA,GAAI,MAAA;AAC9E,EAAA,OAAO,CAAA,EAAG,KAAK,CAAA,EAAG,MAAA,GAAS,MAAM,MAAM,CAAA,CAAA,GAAK,EAAE,CAAA,GAAA,EAAM,UAAU,CAAA,SAAA,EAAY,IAAA,CAAK,KAAA,CAAM,KAAA,GAAQ,GAAG,CAAC,CAAA,EAAA,CAAA;AACnG;AAEA,SAAS,YAAA,CAAa,SAA+B,SAAA,EAAqB;AACxE,EAAA,MAAM,UAAA,GAAa,QAAQ,CAAC,CAAA;AAC5B,EAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,EAAA,CAAG,EAAE,CAAA;AAC/B,EAAA,IAAI,CAAC,UAAA,IAAc,CAAC,SAAA,EAAW,OAAO,MAAA;AAEtC,EAAA,OAAO;AAAA,IACL,KAAK,UAAA,CAAW,aAAA;AAAA,IAChB,MAAA,EAAQ;AAAA,MACN,GAAG,SAAA,CAAU,UAAA,CAAW,aAAa,CAAC,CAAA,CAAA,EAAI,eAAe,CAAC,CAAA,CAAA;AAAA,MAC1D,GAAG,OAAA,CAAQ,GAAA,CAAI,CAAA,KAAA,KAAS,CAAA,EAAG,UAAU,KAAA,CAAM,aAAa,CAAC,CAAA,CAAA,EAAI,eAAe,CAAA,GAAI,SAAA,CAAU,KAAA,CAAM,KAAK,CAAC,CAAA,CAAE,CAAA;AAAA,MACxG,GAAG,SAAA,CAAU,SAAA,CAAU,aAAa,CAAC,CAAA,CAAA,EAAI,eAAe,CAAC,CAAA;AAAA,KAC3D,CAAE,KAAK,GAAG;AAAA,GACZ;AACF;AAEO,SAAS,WAAA,CAAY;AAAA,EAC1B,GAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA,EAOG;AACD,EAAA,MAAM,YAAA,GAAe,GAAA,CAAI,MAAA,CAAO,MAAA,GAAS,KAAK,SAAA,CAAU,MAAA;AACxD,EAAA,MAAM,UAAA,GAAa,kBAAA,CAAmB,GAAA,CAAI,MAAM,CAAA;AAChD,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,GAAA,CAAI,MAAM,CAAA;AAC5C,EAAA,MAAM,SAAS,CAAC,KAAA,KAA8B,eAAe,CAAA,GAAI,SAAA,CAAU,MAAM,KAAK,CAAA;AAEtF,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,CAAA,EAAG,GAAA,CAAI,KAAK,CAAA,aAAA,EAAgB,IAAI,MAAA,CAAO,MAAM,CAAA,IAAA,EAAO,SAAA,CAAU,MAAM,CAAA,UAAA,CAAA;AAAA,MAChF,SAAA,EAAW,CAAA,8DAAA,EAAiE,YAAA,GAAe,EAAA,GAAK,8BAA8B,CAAA,CAAA;AAAA,MAE9H,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,qBAAA;AAAA,cACA,2BAAA;AAAA,cACA;AAAA,aACF;AAAA,YACA,OAAO,GAAA,CAAI,KAAA;AAAA,YAEV,QAAA,EAAA,GAAA,CAAI;AAAA;AAAA,SACP;AAAA,wBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EACZ,QAAA,EAAA;AAAA,UAAA,UAAA,CAAW,MAAA,GAAS,CAAA,IAAK,QAAA,CAAS,MAAA,GAAS,CAAA,mBAC1C,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAY,MAAA;AAAA,cACZ,SAAA,EAAU,gDAAA;AAAA,cACV,mBAAA,EAAoB,MAAA;AAAA,cACpB,OAAA,EAAS,WAAW,YAAY,CAAA,CAAA;AAAA,cAE/B,QAAA,EAAA;AAAA,gBAAA,QAAA,CAAS,IAAI,CAAA,OAAA,KAAW;AACvB,kBAAA,MAAM,IAAA,GAAO,YAAA,CAAa,OAAA,EAAS,SAAS,CAAA;AAC5C,kBAAA,IAAI,CAAC,MAAM,OAAO,MAAA;AAClB,kBAAA,uBAAO,GAAA,CAAC,SAAA,EAAA,EAAiC,IAAA,EAAM,SAAA,CAAU,GAAG,CAAA,EAAG,WAAA,EAAa,IAAA,EAAM,MAAA,EAAQ,IAAA,CAAK,MAAA,EAAA,EAA1E,CAAA,KAAA,EAAQ,IAAA,CAAK,GAAG,CAAA,CAAkE,CAAA;AAAA,gBACzG,CAAC,CAAA;AAAA,gBACA,WAAW,GAAA,CAAI,CAAC,EAAE,IAAA,EAAM,IAAG,qBAC1B,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBAEC,MAAA,EAAQ,UAAU,GAAG,CAAA;AAAA,oBACrB,aAAA,EAAe,IAAA;AAAA,oBACf,WAAA,EAAa,GAAA;AAAA,oBACb,YAAA,EAAa,oBAAA;AAAA,oBACb,EAAA,EAAI,SAAA,CAAU,IAAA,CAAK,aAAa,CAAA;AAAA,oBAChC,EAAA,EAAI,OAAO,IAAI,CAAA;AAAA,oBACf,EAAA,EAAI,SAAA,CAAU,EAAA,CAAG,aAAa,CAAA;AAAA,oBAC9B,EAAA,EAAI,OAAO,EAAE;AAAA,mBAAA;AAAA,kBARR,CAAA,EAAG,IAAA,CAAK,aAAa,CAAA,CAAA,EAAI,GAAG,aAAa,CAAA;AAAA,iBAUjD;AAAA;AAAA;AAAA,WACH,GACE,IAAA;AAAA,UACH,GAAA,CAAI,MAAA,CAAO,GAAA,CAAI,CAAA,KAAA,KAAS;AACvB,YAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,SAAA,CAAU,KAAA,CAAM,aAAa,CAAA,EAAG,GAAA,CAAI,KAAA,EAAO,KAAA,CAAM,UAAA,EAAY,KAAA,CAAM,KAAK,CAAA;AACjG,YAAA,MAAM,UAAU,KAAA,CAAM,OAAA;AACtB,YAAA,uBACE,GAAA;AAAA,cAAC,aAAA;AAAA,cAAA;AAAA,gBAEC,KAAA;AAAA,gBACA,eAAA,EAAiB,SAAA,CAAU,KAAA,CAAM,aAAa,CAAA;AAAA,gBAC9C,MAAA,EAAQ,SAAA,CAAU,KAAA,CAAM,KAAK,CAAA;AAAA,gBAC7B,KAAA,EAAO,UAAU,GAAG,CAAA;AAAA,gBACpB,UACE,OAAA,KAAY,MAAA,GACR,MAAA,GACA,MAAM,cAAc,EAAE,IAAA,EAAM,OAAA,EAAS,UAAA,EAAY,SAAS,KAAA,EAAO,GAAA,CAAI,KAAA,EAAM,EAAG,MAAM,aAAa;AAAA,eAAA;AAAA,cARlG,KAAA,CAAM;AAAA,aAUb;AAAA,UAEJ,CAAC;AAAA,SAAA,EACH,CAAA;AAAA,wBACA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wEAAA,EACb,QAAA,EAAA;AAAA,UAAA,GAAA,CAAI,MAAA,CAAO,MAAA;AAAA,UAAO,GAAA;AAAA,UAAE,SAAA,CAAU;AAAA,SAAA,EACjC;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"lifeline-row.es.js","sources":["../../../src/ee/signals/lifeline-row.tsx"],"sourcesContent":["import { LifelinePoint } from './lifeline-point';\nimport { getSignalAreaClass, getSignalColor, getSignalConnectorClass } from './signal-colors';\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 { Txt } from '@/ds/components/Txt';\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  onThemeSelect,\n}: {\n  row: ThemeLifeline;\n  signalName: TraceSignalName;\n  snapshots: ThemeSnapshot[];\n  positions: 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 flex items-center gap-3 rounded-md hover:bg-fill-subtle ${isPersistent ? '' : 'opacity-55 hover:opacity-100'}`}\n    >\n      <Txt\n        as=\"span\"\n        variant=\"caption\"\n        className={cn(quietTextHoverInGroup, controlStateColorTransition, 'w-52 shrink-0 truncate text-right')}\n        title={row.label}\n      >\n        {row.label}\n      </Txt>\n      <div className=\"relative mx-2 h-7 min-w-0 flex-1 border-b border-border\">\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 (\n                <polygon key={`area-${area.key}`} className={getSignalAreaClass(signalName)} points={area.points} />\n              );\n            })}\n            {connectors.map(({ from, to }) => (\n              <line\n                key={`${from.snapshotIndex}-${to.snapshotIndex}`}\n                className={getSignalConnectorClass(signalName)}\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={getSignalColor(signalName)}\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      <Txt as=\"span\" variant=\"caption\" tone=\"muted\" font=\"mono\" className=\"w-9 shrink-0 tabular-nums\">\n        {row.points.length}/{snapshots.length}\n      </Txt>\n    </li>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -11,7 +11,8 @@ 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-tUWEluOi.cjs');
+const drawer = require('../../drawer-d81cZiSV.cjs');
+const Txt = require('../../Txt-DPmEpNbp.cjs');
 const primitives_raisedSurface = require('../../primitives/raised-surface.cjs.js');
 const utils_cn = require('../../cn-DG0X1KEP.cjs');
 
@@ -67,34 +68,42 @@ function NoiseDetailPanel({
           insightTraceId === void 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-labelledby": "noise-summary-heading", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
+                Txt.Txt,
                 {
+                  as: "h2",
+                  variant: "caption",
+                  tone: "muted",
+                  font: "mono",
                   id: "noise-summary-heading",
-                  className: "font-mono text-caption tracking-wider text-muted-foreground uppercase",
+                  className: "tracking-wider uppercase",
                   children: "Summary"
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-body text-foreground", children: "Noise contains trace signal summaries that did not consistently match a recurring theme in this snapshot." }),
-              noiseQuery.isPending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-body text-muted-foreground", children: "Loading noise details…" }),
-              noiseQuery.isError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-body text-red-500", children: "Unable to load noise details." }),
-              noiseQuery.data && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-mono text-body text-foreground tabular-nums", children: ee_signals_signalFormatting.shareSentence(
+              /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { tone: "ink", className: "mt-3", children: "Noise contains trace signal summaries that did not consistently match a recurring theme in this snapshot." }),
+              noiseQuery.isPending && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { tone: "muted", className: "mt-4", children: "Loading noise details…" }),
+              noiseQuery.isError && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { className: "mt-4 text-destructive-indicator", children: "Unable to load noise details." }),
+              noiseQuery.data && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { tone: "ink", font: "mono", className: "mt-4 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",
+                Txt.Txt,
                 {
+                  as: "h2",
+                  variant: "caption",
+                  tone: "muted",
+                  font: "mono",
                   id: "noise-examples-heading",
-                  className: "font-mono text-caption tracking-wider text-muted-foreground uppercase",
+                  className: "tracking-wider uppercase",
                   children: "Example summaries"
                 }
               ),
-              examplesQuery.isPending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-body text-muted-foreground", children: "Loading examples…" }),
-              examplesQuery.isError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-body text-red-500", children: "Unable to load examples." }),
+              examplesQuery.isPending && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { tone: "muted", className: "mt-3", children: "Loading examples…" }),
+              examplesQuery.isError && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { className: "mt-3 text-destructive-indicator", children: "Unable to load examples." }),
               examplesQuery.data && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                examplesQuery.data.examples.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-body text-muted-foreground", 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(Txt.Txt, { tone: "muted", className: "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",

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';\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-b border-border\">\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=\"font-mono text-caption tracking-wider text-muted-foreground uppercase\"\n                >\n                  Summary\n                </h2>\n                <p className=\"mt-3 text-body text-foreground\">\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=\"mt-4 text-body text-muted-foreground\">Loading noise details…</p>}\n                {noiseQuery.isError && <p className=\"mt-4 text-body text-red-500\">Unable to load noise details.</p>}\n                {noiseQuery.data && (\n                  <p className=\"mt-4 font-mono text-body text-foreground 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=\"font-mono text-caption tracking-wider text-muted-foreground uppercase\"\n                >\n                  Example summaries\n                </h2>\n                {examplesQuery.isPending && <p className=\"mt-3 text-body text-muted-foreground\">Loading examples…</p>}\n                {examplesQuery.isError && <p className=\"mt-3 text-body text-red-500\">Unable to load examples.</p>}\n                {examplesQuery.data && (\n                  <>\n                    {examplesQuery.data.examples.length === 0 ? (\n                      <p className=\"mt-3 text-body text-muted-foreground\">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 w-full cursor-pointer rounded-md p-3 text-left text-body text-foreground',\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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"}
+{"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 { Txt } from '@/ds/components/Txt';\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-b border-border\">\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                <Txt\n                  as=\"h2\"\n                  variant=\"caption\"\n                  tone=\"muted\"\n                  font=\"mono\"\n                  id=\"noise-summary-heading\"\n                  className=\"tracking-wider uppercase\"\n                >\n                  Summary\n                </Txt>\n                <Txt tone=\"ink\" className=\"mt-3\">\n                  Noise contains trace signal summaries that did not consistently match a recurring theme in this\n                  snapshot.\n                </Txt>\n                {noiseQuery.isPending && (\n                  <Txt tone=\"muted\" className=\"mt-4\">\n                    Loading noise details…\n                  </Txt>\n                )}\n                {noiseQuery.isError && (\n                  <Txt className=\"mt-4 text-destructive-indicator\">Unable to load noise details.</Txt>\n                )}\n                {noiseQuery.data && (\n                  <Txt tone=\"ink\" font=\"mono\" className=\"mt-4 tabular-nums\">\n                    {shareSentence(\n                      filteredStats?.traceCount ?? noiseQuery.data.noise.traceCount,\n                      filteredStats?.stageShare ?? noiseQuery.data.noise.coverage,\n                    )}\n                  </Txt>\n                )}\n              </section>\n\n              <section aria-labelledby=\"noise-examples-heading\">\n                <Txt\n                  as=\"h2\"\n                  variant=\"caption\"\n                  tone=\"muted\"\n                  font=\"mono\"\n                  id=\"noise-examples-heading\"\n                  className=\"tracking-wider uppercase\"\n                >\n                  Example summaries\n                </Txt>\n                {examplesQuery.isPending && (\n                  <Txt tone=\"muted\" className=\"mt-3\">\n                    Loading examples…\n                  </Txt>\n                )}\n                {examplesQuery.isError && (\n                  <Txt className=\"mt-3 text-destructive-indicator\">Unable to load examples.</Txt>\n                )}\n                {examplesQuery.data && (\n                  <>\n                    {examplesQuery.data.examples.length === 0 ? (\n                      <Txt tone=\"muted\" className=\"mt-3\">\n                        No noise examples in this snapshot.\n                      </Txt>\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 w-full cursor-pointer rounded-md p-3 text-left text-body text-foreground',\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","Txt","shareSentence","cn","raisedSurfaceStyle","ExamplesPager"],"mappings":";;;;;;;;;;;;;;;;;;AA8BO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,QAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAU,EAAC;AAAA,EACX,aAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,YAAY,OAAA,CACf,GAAA,CAAI,CAAA,MAAA,KAAU,CAAA,EAAG,OAAO,UAAU,CAAA,CAAA,EAAI,MAAA,CAAO,IAAA,KAAS,UAAU,MAAA,CAAO,OAAA,GAAU,OAAO,CAAA,CAAE,CAAA,CAC1F,KAAK,GAAG,CAAA;AACX,EAAA,MAAM,qBAAqB,CAAA,EAAG,UAAU,IAAI,UAAA,IAAc,EAAE,IAAI,SAAS,CAAA,CAAA;AACzE,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,cAAA,CAAS,OAAO,EAAE,UAAA,EAAY,kBAAA,EAAoB,MAAA,EAAQ,CAAA,EAAE,CAAE,CAAA;AACtG,EAAA,MAAM,cAAA,GAAiB,YAAA,CAAa,UAAA,KAAe,kBAAA,GAAqB,aAAa,MAAA,GAAS,CAAA;AAC9F,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,cAAA,EAAiB;AAC7D,EAAA,MAAM,UAAA,GAAaC,kCAAA,CAAS,QAAA,EAAU,UAAA,EAAY,YAAY,UAAU,CAAA;AACxE,EAAA,MAAM,aAAA,GAAgBC,kDAAA;AAAA,IACpB,QAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACAC,2CAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACEC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,cAAc,CAAA,IAAA,KAAQ;AACpB,QAAA,IAAI,CAAC,IAAA,EAAM;AACT,UAAA,eAAA,CAAgB,EAAE,UAAA,EAAY,EAAA,EAAI,MAAA,EAAQ,GAAG,CAAA;AAC7C,UAAA,iBAAA,CAAkB,MAAS,CAAA;AAC3B,UAAA,OAAA,EAAQ;AAAA,QACV;AAAA,MACF,CAAA;AAAA,MACA,MAAM,UAAA,KAAe,MAAA;AAAA,MACrB,OAAA,EAAQ,MAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,OAAA,EAAQ,UAAA;AAAA,MAER,0CAACC,oBAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAC,eAAA,CAACC,mBAAA,EAAA,EAAa,WAAU,wBAAA,EACtB,QAAA,EAAA;AAAA,0BAAAJ,cAAA,CAACK,sBAAY,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,0BAClBF,eAAA,CAACG,wBAAA,EAAA,EAAkB,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA;AAAA,YAAA,wBAAA;AAAA,YAAuB,UAAA;AAAA,YAAW;AAAA,WAAA,EAAa;AAAA,SAAA,EACxF,CAAA;AAAA,wBACAH,eAAA,CAACI,iBAAA,EAAA,EAAW,SAAA,EAAU,8CAAA,EACnB,QAAA,EAAA;AAAA,UAAA,cAAA,KAAmB,MAAA,mCACjBC,4CAAA,EAAA,EAAiB,OAAA,EAAS,gBAAgB,MAAA,EAAQ,MAAM,iBAAA,CAAkB,MAAS,CAAA,EAAG,CAAA;AAAA,UAExF,cAAA,KAAmB,0BAClBL,eAAA,CAAAM,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,4BAAAN,eAAA,CAAC,SAAA,EAAA,EAAQ,mBAAgB,uBAAA,EACvB,QAAA,EAAA;AAAA,8BAAAH,cAAA;AAAA,gBAACU,OAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,IAAA;AAAA,kBACH,OAAA,EAAQ,SAAA;AAAA,kBACR,IAAA,EAAK,OAAA;AAAA,kBACL,IAAA,EAAK,MAAA;AAAA,kBACL,EAAA,EAAG,uBAAA;AAAA,kBACH,SAAA,EAAU,0BAAA;AAAA,kBACX,QAAA,EAAA;AAAA;AAAA,eAED;AAAA,6CACCA,OAAA,EAAA,EAAI,IAAA,EAAK,KAAA,EAAM,SAAA,EAAU,QAAO,QAAA,EAAA,2GAAA,EAGjC,CAAA;AAAA,cACC,UAAA,CAAW,6BACVV,cAAA,CAACU,OAAA,EAAA,EAAI,MAAK,OAAA,EAAQ,SAAA,EAAU,QAAO,QAAA,EAAA,wBAAA,EAEnC,CAAA;AAAA,cAED,WAAW,OAAA,oBACVV,cAAA,CAACU,OAAA,EAAA,EAAI,SAAA,EAAU,mCAAkC,QAAA,EAAA,+BAAA,EAA6B,CAAA;AAAA,cAE/E,UAAA,CAAW,wBACVV,cAAA,CAACU,OAAA,EAAA,EAAI,MAAK,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,SAAA,EAAU,mBAAA,EACnC,QAAA,EAAAC,yCAAA;AAAA,gBACC,aAAA,EAAe,UAAA,IAAc,UAAA,CAAW,IAAA,CAAK,KAAA,CAAM,UAAA;AAAA,gBACnD,aAAA,EAAe,UAAA,IAAc,UAAA,CAAW,IAAA,CAAK,KAAA,CAAM;AAAA,eACrD,EACF;AAAA,aAAA,EAEJ,CAAA;AAAA,4BAEAR,eAAA,CAAC,SAAA,EAAA,EAAQ,iBAAA,EAAgB,wBAAA,EACvB,QAAA,EAAA;AAAA,8BAAAH,cAAA;AAAA,gBAACU,OAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,IAAA;AAAA,kBACH,OAAA,EAAQ,SAAA;AAAA,kBACR,IAAA,EAAK,OAAA;AAAA,kBACL,IAAA,EAAK,MAAA;AAAA,kBACL,EAAA,EAAG,wBAAA;AAAA,kBACH,SAAA,EAAU,0BAAA;AAAA,kBACX,QAAA,EAAA;AAAA;AAAA,eAED;AAAA,cACC,aAAA,CAAc,6BACbV,cAAA,CAACU,OAAA,EAAA,EAAI,MAAK,OAAA,EAAQ,SAAA,EAAU,QAAO,QAAA,EAAA,mBAAA,EAEnC,CAAA;AAAA,cAED,cAAc,OAAA,oBACbV,cAAA,CAACU,OAAA,EAAA,EAAI,SAAA,EAAU,mCAAkC,QAAA,EAAA,0BAAA,EAAwB,CAAA;AAAA,cAE1E,aAAA,CAAc,wBACbP,eAAA,CAAAM,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,gBAAA,aAAA,CAAc,IAAA,CAAK,SAAS,MAAA,KAAW,CAAA,kCACrCC,OAAA,EAAA,EAAI,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,MAAA,EAAO,QAAA,EAAA,qCAAA,EAEnC,oBAEAV,cAAA,CAAC,IAAA,EAAA,EAAG,WAAU,gBAAA,EACX,QAAA,EAAA,aAAA,CAAc,KAAK,QAAA,CAAS,GAAA,CAAI,CAAA,OAAA,qBAC/BA,cAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAAA,cAAA;AAAA,kBAAC,QAAA;AAAA,kBAAA;AAAA,oBACC,IAAA,EAAK,QAAA;AAAA,oBACL,YAAA,EAAY,CAAA,uBAAA,EAA0B,OAAA,CAAQ,UAAU,CAAA,CAAA;AAAA,oBACxD,SAAA,EAAWY,WAAA;AAAA,sBACTC,2CAAA;AAAA,sBACA;AAAA,qBACF;AAAA,oBACA,OAAA,EAAS,MAAM,iBAAA,CAAkB,OAAA,CAAQ,OAAO,CAAA;AAAA,oBAE/C,QAAA,EAAA,OAAA,CAAQ;AAAA;AAAA,iBACX,EAAA,EAXO,OAAA,CAAQ,OAYjB,CACD,CAAA,EACH,CAAA;AAAA,gBAED,WAAW,IAAA,oBACVb,cAAA;AAAA,kBAACc,sCAAA;AAAA,kBAAA;AAAA,oBACC,UAAA,EAAY,aAAA,EAAe,UAAA,IAAc,UAAA,CAAW,KAAK,KAAA,CAAM,UAAA;AAAA,oBAC/D,MAAA,EAAQ,cAAA;AAAA,oBACR,gBAAgB,CAAA,MAAA,KAAU,eAAA,CAAgB,EAAE,UAAA,EAAY,kBAAA,EAAoB,QAAQ;AAAA;AAAA;AACtF,eAAA,EAEJ;AAAA,aAAA,EAEJ;AAAA,WAAA,EACF;AAAA,SAAA,EAEJ;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -7,7 +7,8 @@ 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-C1VyTeuX.js';
+import { D as Drawer, d as DrawerContent, g as DrawerHeader, o as DrawerTitle, e as DrawerDescription, b as DrawerBody } from '../../drawer-DXf50w71.js';
+import { T as Txt } from '../../Txt-BP1SRHmL.js';
 import { raisedSurfaceStyle } from '../../primitives/raised-surface.es.js';
 import { c as cn } from '../../cn-65Adrsfj.js';
 
@@ -63,34 +64,42 @@ function NoiseDetailPanel({
           insightTraceId === void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("section", { "aria-labelledby": "noise-summary-heading", children: [
               /* @__PURE__ */ jsx(
-                "h2",
+                Txt,
                 {
+                  as: "h2",
+                  variant: "caption",
+                  tone: "muted",
+                  font: "mono",
                   id: "noise-summary-heading",
-                  className: "font-mono text-caption tracking-wider text-muted-foreground uppercase",
+                  className: "tracking-wider uppercase",
                   children: "Summary"
                 }
               ),
-              /* @__PURE__ */ jsx("p", { className: "mt-3 text-body text-foreground", children: "Noise contains trace signal summaries that did not consistently match a recurring theme in this snapshot." }),
-              noiseQuery.isPending && /* @__PURE__ */ jsx("p", { className: "mt-4 text-body text-muted-foreground", children: "Loading noise details…" }),
-              noiseQuery.isError && /* @__PURE__ */ jsx("p", { className: "mt-4 text-body text-red-500", children: "Unable to load noise details." }),
-              noiseQuery.data && /* @__PURE__ */ jsx("p", { className: "mt-4 font-mono text-body text-foreground tabular-nums", children: shareSentence(
+              /* @__PURE__ */ jsx(Txt, { tone: "ink", className: "mt-3", children: "Noise contains trace signal summaries that did not consistently match a recurring theme in this snapshot." }),
+              noiseQuery.isPending && /* @__PURE__ */ jsx(Txt, { tone: "muted", className: "mt-4", children: "Loading noise details…" }),
+              noiseQuery.isError && /* @__PURE__ */ jsx(Txt, { className: "mt-4 text-destructive-indicator", children: "Unable to load noise details." }),
+              noiseQuery.data && /* @__PURE__ */ jsx(Txt, { tone: "ink", font: "mono", className: "mt-4 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",
+                Txt,
                 {
+                  as: "h2",
+                  variant: "caption",
+                  tone: "muted",
+                  font: "mono",
                   id: "noise-examples-heading",
-                  className: "font-mono text-caption tracking-wider text-muted-foreground uppercase",
+                  className: "tracking-wider uppercase",
                   children: "Example summaries"
                 }
               ),
-              examplesQuery.isPending && /* @__PURE__ */ jsx("p", { className: "mt-3 text-body text-muted-foreground", children: "Loading examples…" }),
-              examplesQuery.isError && /* @__PURE__ */ jsx("p", { className: "mt-3 text-body text-red-500", children: "Unable to load examples." }),
+              examplesQuery.isPending && /* @__PURE__ */ jsx(Txt, { tone: "muted", className: "mt-3", children: "Loading examples…" }),
+              examplesQuery.isError && /* @__PURE__ */ jsx(Txt, { className: "mt-3 text-destructive-indicator", children: "Unable to load examples." }),
               examplesQuery.data && /* @__PURE__ */ jsxs(Fragment, { children: [
-                examplesQuery.data.examples.length === 0 ? /* @__PURE__ */ jsx("p", { className: "mt-3 text-body text-muted-foreground", 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(Txt, { tone: "muted", className: "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",

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';\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-b border-border\">\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=\"font-mono text-caption tracking-wider text-muted-foreground uppercase\"\n                >\n                  Summary\n                </h2>\n                <p className=\"mt-3 text-body text-foreground\">\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=\"mt-4 text-body text-muted-foreground\">Loading noise details…</p>}\n                {noiseQuery.isError && <p className=\"mt-4 text-body text-red-500\">Unable to load noise details.</p>}\n                {noiseQuery.data && (\n                  <p className=\"mt-4 font-mono text-body text-foreground 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=\"font-mono text-caption tracking-wider text-muted-foreground uppercase\"\n                >\n                  Example summaries\n                </h2>\n                {examplesQuery.isPending && <p className=\"mt-3 text-body text-muted-foreground\">Loading examples…</p>}\n                {examplesQuery.isError && <p className=\"mt-3 text-body text-red-500\">Unable to load examples.</p>}\n                {examplesQuery.data && (\n                  <>\n                    {examplesQuery.data.examples.length === 0 ? (\n                      <p className=\"mt-3 text-body text-muted-foreground\">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 w-full cursor-pointer rounded-md p-3 text-left text-body text-foreground',\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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"}
+{"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 { Txt } from '@/ds/components/Txt';\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-b border-border\">\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                <Txt\n                  as=\"h2\"\n                  variant=\"caption\"\n                  tone=\"muted\"\n                  font=\"mono\"\n                  id=\"noise-summary-heading\"\n                  className=\"tracking-wider uppercase\"\n                >\n                  Summary\n                </Txt>\n                <Txt tone=\"ink\" className=\"mt-3\">\n                  Noise contains trace signal summaries that did not consistently match a recurring theme in this\n                  snapshot.\n                </Txt>\n                {noiseQuery.isPending && (\n                  <Txt tone=\"muted\" className=\"mt-4\">\n                    Loading noise details…\n                  </Txt>\n                )}\n                {noiseQuery.isError && (\n                  <Txt className=\"mt-4 text-destructive-indicator\">Unable to load noise details.</Txt>\n                )}\n                {noiseQuery.data && (\n                  <Txt tone=\"ink\" font=\"mono\" className=\"mt-4 tabular-nums\">\n                    {shareSentence(\n                      filteredStats?.traceCount ?? noiseQuery.data.noise.traceCount,\n                      filteredStats?.stageShare ?? noiseQuery.data.noise.coverage,\n                    )}\n                  </Txt>\n                )}\n              </section>\n\n              <section aria-labelledby=\"noise-examples-heading\">\n                <Txt\n                  as=\"h2\"\n                  variant=\"caption\"\n                  tone=\"muted\"\n                  font=\"mono\"\n                  id=\"noise-examples-heading\"\n                  className=\"tracking-wider uppercase\"\n                >\n                  Example summaries\n                </Txt>\n                {examplesQuery.isPending && (\n                  <Txt tone=\"muted\" className=\"mt-3\">\n                    Loading examples…\n                  </Txt>\n                )}\n                {examplesQuery.isError && (\n                  <Txt className=\"mt-3 text-destructive-indicator\">Unable to load examples.</Txt>\n                )}\n                {examplesQuery.data && (\n                  <>\n                    {examplesQuery.data.examples.length === 0 ? (\n                      <Txt tone=\"muted\" className=\"mt-3\">\n                        No noise examples in this snapshot.\n                      </Txt>\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 w-full cursor-pointer rounded-md p-3 text-left text-body text-foreground',\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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"}