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

package/dist/ee/signals/trace-intelligence-explainer.cjs.js

@@ -7,8 +7,11 @@ const lucideReact = require('lucide-react');
 const ee_signals_signalColors = require('./signal-colors.cjs.js');
 const ee_signals_signalFormatting = require('./signal-formatting.cjs.js');
 const sankeyColor = require('../../sankeyColor-DHE7ggh8.cjs');
-const tooltip = require('../../tooltip-_cda-a7s.cjs');
+const tooltip = require('../../tooltip-FvWL16Xn.cjs');
 const icons_Icon = require('../../icons/Icon.cjs.js');
+const primitives_transitions = require('../../primitives/transitions.cjs.js');
+const primitives_typography = require('../../primitives/typography.cjs.js');
+const utils_cn = require('../../cn-DG0X1KEP.cjs');
 
 function TraceIntelligenceExplainer({ signalCatalog }) {
   const enabledSignals = ee_signals_signalFormatting.orderedSignals(
@@ -20,24 +23,24 @@ function TraceIntelligenceExplainer({ signalCatalog }) {
       tooltip.TooltipTrigger,
       {
         "aria-label": "What is trace intelligence?",
-        className: "text-neutral3 hover:text-neutral6 flex cursor-help items-center transition-colors",
+        className: utils_cn.cn(primitives_typography.quietTextHover, primitives_transitions.controlStateColorTransition, "flex cursor-help items-center"),
         type: "button",
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}) })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipContent, { className: "text-ui-sm max-w-sm space-y-3 p-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-neutral5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipContent, { className: "text-caption max-w-sm space-y-3 p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-foreground", children: [
         "Every trace is analyzed for ",
         enabledSignals.length === 4 ? "four" : enabledSignals.length,
         " ",
         enabledSignals.length === 1 ? "signal" : "signals",
         ", and traces with similar signals are clustered into named themes."
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1.5", children: enabledSignals.map((signalName) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "text-neutral4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1.5", children: enabledSignals.map((signalName) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "text-ui-xs font-mono font-semibold tracking-widest uppercase",
+            className: "text-meta font-mono tracking-widest uppercase",
             style: { color: sankeyColor.nodeColor(ee_signals_signalColors.getSignalHue(signalName)) },
             children: ee_signals_signalFormatting.signalLabel(signalCatalog, signalName)
           }
@@ -46,7 +49,7 @@ function TraceIntelligenceExplainer({ signalCatalog }) {
         "— ",
         ee_signals_signalFormatting.signalDescription(signalCatalog, signalName)
       ] }, signalName)) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral4", children: "Snapshots capture the themes at points in time, so the views show how they appear, grow, and fade." })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Snapshots capture the themes at points in time, so the views show how they appear, grow, and fade." })
     ] })
   ] });
 }

package/dist/ee/signals/trace-intelligence-explainer.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-intelligence-explainer.cjs.js","sources":["../../../src/ee/signals/trace-intelligence-explainer.tsx"],"sourcesContent":["import type { SignalCatalogEntry } from '@mastra/client-js';\nimport { Info } from 'lucide-react';\nimport { getSignalHue } from './signal-colors';\nimport { orderedSignals, signalDescription, signalLabel } from './signal-formatting';\nimport { nodeColor } from '@/ds/components/SankeyChart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\n\n/** Info tooltip for first-time viewers: signals → themes → snapshots. */\nexport function TraceIntelligenceExplainer({ signalCatalog }: { signalCatalog: readonly SignalCatalogEntry[] }) {\n  const enabledSignals = orderedSignals(\n    signalCatalog,\n    signalCatalog.filter(signal => signal.enabled).map(signal => signal.name),\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        aria-label=\"What is trace intelligence?\"\n        className=\"text-neutral3 hover:text-neutral6 flex cursor-help items-center transition-colors\"\n        type=\"button\"\n      >\n        <Icon size=\"sm\">\n          <Info />\n        </Icon>\n      </TooltipTrigger>\n      <TooltipContent className=\"text-ui-sm max-w-sm space-y-3 p-4\">\n        <p className=\"text-neutral5\">\n          Every trace is analyzed for {enabledSignals.length === 4 ? 'four' : enabledSignals.length}{' '}\n          {enabledSignals.length === 1 ? 'signal' : 'signals'}, and traces with similar signals are clustered into named\n          themes.\n        </p>\n        <ul className=\"space-y-1.5\">\n          {enabledSignals.map(signalName => (\n            <li key={signalName} className=\"text-neutral4\">\n              <span\n                className=\"text-ui-xs font-mono font-semibold tracking-widest uppercase\"\n                style={{ color: nodeColor(getSignalHue(signalName)) }}\n              >\n                {signalLabel(signalCatalog, signalName)}\n              </span>{' '}\n              — {signalDescription(signalCatalog, signalName)}\n            </li>\n          ))}\n        </ul>\n        <p className=\"text-neutral4\">\n          Snapshots capture the themes at points in time, so the views show how they appear, grow, and fade.\n        </p>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["orderedSignals","Tooltip","jsx","TooltipTrigger","Icon","Info","jsxs","TooltipContent","nodeColor","getSignalHue","signalLabel","signalDescription"],"mappings":";;;;;;;;;;;;AASO,SAAS,0BAAA,CAA2B,EAAE,aAAA,EAAc,EAAqD;AAC9G,EAAA,MAAM,cAAA,GAAiBA,0CAAA;AAAA,IACrB,aAAA;AAAA,IACA,aAAA,CAAc,OAAO,CAAA,MAAA,KAAU,MAAA,CAAO,OAAO,CAAA,CAAE,GAAA,CAAI,CAAA,MAAA,KAAU,MAAA,CAAO,IAAI;AAAA,GAC1E;AACA,EAAA,uCACGC,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,sBAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAW,6BAAA;AAAA,QACX,SAAA,EAAU,mFAAA;AAAA,QACV,IAAA,EAAK,QAAA;AAAA,QAEL,yCAACC,eAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EACT,QAAA,kBAAAF,cAAA,CAACG,oBAAK,CAAA,EACR;AAAA;AAAA,KACF;AAAA,oBACAC,eAAA,CAACC,sBAAA,EAAA,EAAe,SAAA,EAAU,mCAAA,EACxB,QAAA,EAAA;AAAA,sBAAAD,eAAA,CAAC,GAAA,EAAA,EAAE,WAAU,eAAA,EAAgB,QAAA,EAAA;AAAA,QAAA,8BAAA;AAAA,QACE,cAAA,CAAe,MAAA,KAAW,CAAA,GAAI,MAAA,GAAS,cAAA,CAAe,MAAA;AAAA,QAAQ,GAAA;AAAA,QAC1F,cAAA,CAAe,MAAA,KAAW,CAAA,GAAI,QAAA,GAAW,SAAA;AAAA,QAAU;AAAA,OAAA,EAEtD,CAAA;AAAA,sBACAJ,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,aAAA,EACX,QAAA,EAAA,cAAA,CAAe,IAAI,CAAA,UAAA,qBAClBI,eAAA,CAAC,IAAA,EAAA,EAAoB,SAAA,EAAU,eAAA,EAC7B,QAAA,EAAA;AAAA,wBAAAJ,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,8DAAA;AAAA,YACV,OAAO,EAAE,KAAA,EAAOM,sBAAUC,oCAAA,CAAa,UAAU,CAAC,CAAA,EAAE;AAAA,YAEnD,QAAA,EAAAC,uCAAA,CAAY,eAAe,UAAU;AAAA;AAAA,SACxC;AAAA,QAAQ,GAAA;AAAA,QAAI,IAAA;AAAA,QACTC,6CAAA,CAAkB,eAAe,UAAU;AAAA,OAAA,EAAA,EAPvC,UAQT,CACD,CAAA,EACH,CAAA;AAAA,sBACAT,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,eAAA,EAAgB,QAAA,EAAA,oGAAA,EAE7B;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-intelligence-explainer.cjs.js","sources":["../../../src/ee/signals/trace-intelligence-explainer.tsx"],"sourcesContent":["import type { SignalCatalogEntry } from '@mastra/client-js';\nimport { Info } from 'lucide-react';\nimport { getSignalHue } from './signal-colors';\nimport { orderedSignals, signalDescription, signalLabel } from './signal-formatting';\nimport { nodeColor } from '@/ds/components/SankeyChart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\n/** Info tooltip for first-time viewers: signals → themes → snapshots. */\nexport function TraceIntelligenceExplainer({ signalCatalog }: { signalCatalog: readonly SignalCatalogEntry[] }) {\n  const enabledSignals = orderedSignals(\n    signalCatalog,\n    signalCatalog.filter(signal => signal.enabled).map(signal => signal.name),\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        aria-label=\"What is trace intelligence?\"\n        className={cn(quietTextHover, controlStateColorTransition, 'flex cursor-help items-center')}\n        type=\"button\"\n      >\n        <Icon size=\"xs\">\n          <Info />\n        </Icon>\n      </TooltipTrigger>\n      <TooltipContent className=\"text-caption max-w-sm space-y-3 p-4\">\n        <p className=\"text-foreground\">\n          Every trace is analyzed for {enabledSignals.length === 4 ? 'four' : enabledSignals.length}{' '}\n          {enabledSignals.length === 1 ? 'signal' : 'signals'}, and traces with similar signals are clustered into named\n          themes.\n        </p>\n        <ul className=\"space-y-1.5\">\n          {enabledSignals.map(signalName => (\n            <li key={signalName} className=\"text-muted-foreground\">\n              <span\n                className=\"text-meta font-mono tracking-widest uppercase\"\n                style={{ color: nodeColor(getSignalHue(signalName)) }}\n              >\n                {signalLabel(signalCatalog, signalName)}\n              </span>{' '}\n              — {signalDescription(signalCatalog, signalName)}\n            </li>\n          ))}\n        </ul>\n        <p className=\"text-muted-foreground\">\n          Snapshots capture the themes at points in time, so the views show how they appear, grow, and fade.\n        </p>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":["orderedSignals","Tooltip","jsx","TooltipTrigger","cn","quietTextHover","controlStateColorTransition","Icon","Info","jsxs","TooltipContent","nodeColor","getSignalHue","signalLabel","signalDescription"],"mappings":";;;;;;;;;;;;;;;AAYO,SAAS,0BAAA,CAA2B,EAAE,aAAA,EAAc,EAAqD;AAC9G,EAAA,MAAM,cAAA,GAAiBA,0CAAA;AAAA,IACrB,aAAA;AAAA,IACA,aAAA,CAAc,OAAO,CAAA,MAAA,KAAU,MAAA,CAAO,OAAO,CAAA,CAAE,GAAA,CAAI,CAAA,MAAA,KAAU,MAAA,CAAO,IAAI;AAAA,GAC1E;AACA,EAAA,uCACGC,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,sBAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAW,6BAAA;AAAA,QACX,SAAA,EAAWC,WAAA,CAAGC,oCAAA,EAAgBC,kDAAA,EAA6B,+BAA+B,CAAA;AAAA,QAC1F,IAAA,EAAK,QAAA;AAAA,QAEL,yCAACC,eAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EACT,QAAA,kBAAAL,cAAA,CAACM,oBAAK,CAAA,EACR;AAAA;AAAA,KACF;AAAA,oBACAC,eAAA,CAACC,sBAAA,EAAA,EAAe,SAAA,EAAU,qCAAA,EACxB,QAAA,EAAA;AAAA,sBAAAD,eAAA,CAAC,GAAA,EAAA,EAAE,WAAU,iBAAA,EAAkB,QAAA,EAAA;AAAA,QAAA,8BAAA;AAAA,QACA,cAAA,CAAe,MAAA,KAAW,CAAA,GAAI,MAAA,GAAS,cAAA,CAAe,MAAA;AAAA,QAAQ,GAAA;AAAA,QAC1F,cAAA,CAAe,MAAA,KAAW,CAAA,GAAI,QAAA,GAAW,SAAA;AAAA,QAAU;AAAA,OAAA,EAEtD,CAAA;AAAA,sBACAP,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,aAAA,EACX,QAAA,EAAA,cAAA,CAAe,IAAI,CAAA,UAAA,qBAClBO,eAAA,CAAC,IAAA,EAAA,EAAoB,SAAA,EAAU,uBAAA,EAC7B,QAAA,EAAA;AAAA,wBAAAP,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,+CAAA;AAAA,YACV,OAAO,EAAE,KAAA,EAAOS,sBAAUC,oCAAA,CAAa,UAAU,CAAC,CAAA,EAAE;AAAA,YAEnD,QAAA,EAAAC,uCAAA,CAAY,eAAe,UAAU;AAAA;AAAA,SACxC;AAAA,QAAQ,GAAA;AAAA,QAAI,IAAA;AAAA,QACTC,6CAAA,CAAkB,eAAe,UAAU;AAAA,OAAA,EAAA,EAPvC,UAQT,CACD,CAAA,EACH,CAAA;AAAA,sBACAZ,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,uBAAA,EAAwB,QAAA,EAAA,oGAAA,EAErC;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/ee/signals/trace-intelligence-explainer.es.js

@@ -3,8 +3,11 @@ import { Info } from 'lucide-react';
 import { getSignalHue } from './signal-colors.es.js';
 import { orderedSignals, signalLabel, signalDescription } from './signal-formatting.es.js';
 import { n as nodeColor } from '../../sankeyColor-BoMbAWtq.js';
-import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../tooltip-QuS0KEbc.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../tooltip-BrDiP0RI.js';
 import { Icon } from '../../icons/Icon.es.js';
+import { controlStateColorTransition } from '../../primitives/transitions.es.js';
+import { quietTextHover } from '../../primitives/typography.es.js';
+import { c as cn } from '../../cn-65Adrsfj.js';
 
 function TraceIntelligenceExplainer({ signalCatalog }) {
   const enabledSignals = orderedSignals(
@@ -16,24 +19,24 @@ function TraceIntelligenceExplainer({ signalCatalog }) {
       TooltipTrigger,
       {
         "aria-label": "What is trace intelligence?",
-        className: "text-neutral3 hover:text-neutral6 flex cursor-help items-center transition-colors",
+        className: cn(quietTextHover, controlStateColorTransition, "flex cursor-help items-center"),
         type: "button",
-        children: /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(Info, {}) })
+        children: /* @__PURE__ */ jsx(Icon, { size: "xs", children: /* @__PURE__ */ jsx(Info, {}) })
       }
     ),
-    /* @__PURE__ */ jsxs(TooltipContent, { className: "text-ui-sm max-w-sm space-y-3 p-4", children: [
-      /* @__PURE__ */ jsxs("p", { className: "text-neutral5", children: [
+    /* @__PURE__ */ jsxs(TooltipContent, { className: "text-caption max-w-sm space-y-3 p-4", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-foreground", children: [
         "Every trace is analyzed for ",
         enabledSignals.length === 4 ? "four" : enabledSignals.length,
         " ",
         enabledSignals.length === 1 ? "signal" : "signals",
         ", and traces with similar signals are clustered into named themes."
       ] }),
-      /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: enabledSignals.map((signalName) => /* @__PURE__ */ jsxs("li", { className: "text-neutral4", children: [
+      /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: enabledSignals.map((signalName) => /* @__PURE__ */ jsxs("li", { className: "text-muted-foreground", children: [
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "text-ui-xs font-mono font-semibold tracking-widest uppercase",
+            className: "text-meta font-mono tracking-widest uppercase",
             style: { color: nodeColor(getSignalHue(signalName)) },
             children: signalLabel(signalCatalog, signalName)
           }
@@ -42,7 +45,7 @@ function TraceIntelligenceExplainer({ signalCatalog }) {
         "— ",
         signalDescription(signalCatalog, signalName)
       ] }, signalName)) }),
-      /* @__PURE__ */ jsx("p", { className: "text-neutral4", children: "Snapshots capture the themes at points in time, so the views show how they appear, grow, and fade." })
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Snapshots capture the themes at points in time, so the views show how they appear, grow, and fade." })
     ] })
   ] });
 }

package/dist/ee/signals/trace-intelligence-explainer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-intelligence-explainer.es.js","sources":["../../../src/ee/signals/trace-intelligence-explainer.tsx"],"sourcesContent":["import type { SignalCatalogEntry } from '@mastra/client-js';\nimport { Info } from 'lucide-react';\nimport { getSignalHue } from './signal-colors';\nimport { orderedSignals, signalDescription, signalLabel } from './signal-formatting';\nimport { nodeColor } from '@/ds/components/SankeyChart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\n\n/** Info tooltip for first-time viewers: signals → themes → snapshots. */\nexport function TraceIntelligenceExplainer({ signalCatalog }: { signalCatalog: readonly SignalCatalogEntry[] }) {\n  const enabledSignals = orderedSignals(\n    signalCatalog,\n    signalCatalog.filter(signal => signal.enabled).map(signal => signal.name),\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        aria-label=\"What is trace intelligence?\"\n        className=\"text-neutral3 hover:text-neutral6 flex cursor-help items-center transition-colors\"\n        type=\"button\"\n      >\n        <Icon size=\"sm\">\n          <Info />\n        </Icon>\n      </TooltipTrigger>\n      <TooltipContent className=\"text-ui-sm max-w-sm space-y-3 p-4\">\n        <p className=\"text-neutral5\">\n          Every trace is analyzed for {enabledSignals.length === 4 ? 'four' : enabledSignals.length}{' '}\n          {enabledSignals.length === 1 ? 'signal' : 'signals'}, and traces with similar signals are clustered into named\n          themes.\n        </p>\n        <ul className=\"space-y-1.5\">\n          {enabledSignals.map(signalName => (\n            <li key={signalName} className=\"text-neutral4\">\n              <span\n                className=\"text-ui-xs font-mono font-semibold tracking-widest uppercase\"\n                style={{ color: nodeColor(getSignalHue(signalName)) }}\n              >\n                {signalLabel(signalCatalog, signalName)}\n              </span>{' '}\n              — {signalDescription(signalCatalog, signalName)}\n            </li>\n          ))}\n        </ul>\n        <p className=\"text-neutral4\">\n          Snapshots capture the themes at points in time, so the views show how they appear, grow, and fade.\n        </p>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AASO,SAAS,0BAAA,CAA2B,EAAE,aAAA,EAAc,EAAqD;AAC9G,EAAA,MAAM,cAAA,GAAiB,cAAA;AAAA,IACrB,aAAA;AAAA,IACA,aAAA,CAAc,OAAO,CAAA,MAAA,KAAU,MAAA,CAAO,OAAO,CAAA,CAAE,GAAA,CAAI,CAAA,MAAA,KAAU,MAAA,CAAO,IAAI;AAAA,GAC1E;AACA,EAAA,4BACG,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAW,6BAAA;AAAA,QACX,SAAA,EAAU,mFAAA;AAAA,QACV,IAAA,EAAK,QAAA;AAAA,QAEL,8BAAC,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EACT,QAAA,kBAAA,GAAA,CAAC,QAAK,CAAA,EACR;AAAA;AAAA,KACF;AAAA,oBACA,IAAA,CAAC,cAAA,EAAA,EAAe,SAAA,EAAU,mCAAA,EACxB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,GAAA,EAAA,EAAE,WAAU,eAAA,EAAgB,QAAA,EAAA;AAAA,QAAA,8BAAA;AAAA,QACE,cAAA,CAAe,MAAA,KAAW,CAAA,GAAI,MAAA,GAAS,cAAA,CAAe,MAAA;AAAA,QAAQ,GAAA;AAAA,QAC1F,cAAA,CAAe,MAAA,KAAW,CAAA,GAAI,QAAA,GAAW,SAAA;AAAA,QAAU;AAAA,OAAA,EAEtD,CAAA;AAAA,sBACA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,aAAA,EACX,QAAA,EAAA,cAAA,CAAe,IAAI,CAAA,UAAA,qBAClB,IAAA,CAAC,IAAA,EAAA,EAAoB,SAAA,EAAU,eAAA,EAC7B,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,8DAAA;AAAA,YACV,OAAO,EAAE,KAAA,EAAO,UAAU,YAAA,CAAa,UAAU,CAAC,CAAA,EAAE;AAAA,YAEnD,QAAA,EAAA,WAAA,CAAY,eAAe,UAAU;AAAA;AAAA,SACxC;AAAA,QAAQ,GAAA;AAAA,QAAI,IAAA;AAAA,QACT,iBAAA,CAAkB,eAAe,UAAU;AAAA,OAAA,EAAA,EAPvC,UAQT,CACD,CAAA,EACH,CAAA;AAAA,sBACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,eAAA,EAAgB,QAAA,EAAA,oGAAA,EAE7B;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-intelligence-explainer.es.js","sources":["../../../src/ee/signals/trace-intelligence-explainer.tsx"],"sourcesContent":["import type { SignalCatalogEntry } from '@mastra/client-js';\nimport { Info } from 'lucide-react';\nimport { getSignalHue } from './signal-colors';\nimport { orderedSignals, signalDescription, signalLabel } from './signal-formatting';\nimport { nodeColor } from '@/ds/components/SankeyChart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\n/** Info tooltip for first-time viewers: signals → themes → snapshots. */\nexport function TraceIntelligenceExplainer({ signalCatalog }: { signalCatalog: readonly SignalCatalogEntry[] }) {\n  const enabledSignals = orderedSignals(\n    signalCatalog,\n    signalCatalog.filter(signal => signal.enabled).map(signal => signal.name),\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        aria-label=\"What is trace intelligence?\"\n        className={cn(quietTextHover, controlStateColorTransition, 'flex cursor-help items-center')}\n        type=\"button\"\n      >\n        <Icon size=\"xs\">\n          <Info />\n        </Icon>\n      </TooltipTrigger>\n      <TooltipContent className=\"text-caption max-w-sm space-y-3 p-4\">\n        <p className=\"text-foreground\">\n          Every trace is analyzed for {enabledSignals.length === 4 ? 'four' : enabledSignals.length}{' '}\n          {enabledSignals.length === 1 ? 'signal' : 'signals'}, and traces with similar signals are clustered into named\n          themes.\n        </p>\n        <ul className=\"space-y-1.5\">\n          {enabledSignals.map(signalName => (\n            <li key={signalName} className=\"text-muted-foreground\">\n              <span\n                className=\"text-meta font-mono tracking-widest uppercase\"\n                style={{ color: nodeColor(getSignalHue(signalName)) }}\n              >\n                {signalLabel(signalCatalog, signalName)}\n              </span>{' '}\n              — {signalDescription(signalCatalog, signalName)}\n            </li>\n          ))}\n        </ul>\n        <p className=\"text-muted-foreground\">\n          Snapshots capture the themes at points in time, so the views show how they appear, grow, and fade.\n        </p>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAYO,SAAS,0BAAA,CAA2B,EAAE,aAAA,EAAc,EAAqD;AAC9G,EAAA,MAAM,cAAA,GAAiB,cAAA;AAAA,IACrB,aAAA;AAAA,IACA,aAAA,CAAc,OAAO,CAAA,MAAA,KAAU,MAAA,CAAO,OAAO,CAAA,CAAE,GAAA,CAAI,CAAA,MAAA,KAAU,MAAA,CAAO,IAAI;AAAA,GAC1E;AACA,EAAA,4BACG,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAW,6BAAA;AAAA,QACX,SAAA,EAAW,EAAA,CAAG,cAAA,EAAgB,2BAAA,EAA6B,+BAA+B,CAAA;AAAA,QAC1F,IAAA,EAAK,QAAA;AAAA,QAEL,8BAAC,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EACT,QAAA,kBAAA,GAAA,CAAC,QAAK,CAAA,EACR;AAAA;AAAA,KACF;AAAA,oBACA,IAAA,CAAC,cAAA,EAAA,EAAe,SAAA,EAAU,qCAAA,EACxB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,GAAA,EAAA,EAAE,WAAU,iBAAA,EAAkB,QAAA,EAAA;AAAA,QAAA,8BAAA;AAAA,QACA,cAAA,CAAe,MAAA,KAAW,CAAA,GAAI,MAAA,GAAS,cAAA,CAAe,MAAA;AAAA,QAAQ,GAAA;AAAA,QAC1F,cAAA,CAAe,MAAA,KAAW,CAAA,GAAI,QAAA,GAAW,SAAA;AAAA,QAAU;AAAA,OAAA,EAEtD,CAAA;AAAA,sBACA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,aAAA,EACX,QAAA,EAAA,cAAA,CAAe,IAAI,CAAA,UAAA,qBAClB,IAAA,CAAC,IAAA,EAAA,EAAoB,SAAA,EAAU,uBAAA,EAC7B,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,+CAAA;AAAA,YACV,OAAO,EAAE,KAAA,EAAO,UAAU,YAAA,CAAa,UAAU,CAAC,CAAA,EAAE;AAAA,YAEnD,QAAA,EAAA,WAAA,CAAY,eAAe,UAAU;AAAA;AAAA,SACxC;AAAA,QAAQ,GAAA;AAAA,QAAI,IAAA;AAAA,QACT,iBAAA,CAAkB,eAAe,UAAU;AAAA,OAAA,EAAA,EAPvC,UAQT,CACD,CAAA,EACH,CAAA;AAAA,sBACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,uBAAA,EAAwB,QAAA,EAAA,oGAAA,EAErC;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/ee/signals/view-mode-tab.cjs.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const tabsTab = require('../../tabs-tab-tRgFBx85.cjs');
-const Txt = require('../../Txt-C7rZCmrg.cjs');
+const tabsTab = require('../../tabs-tab-DA466DbX.cjs');
+const Txt = require('../../Txt-B4-2nLaI.cjs');
 const icons_Icon = require('../../icons/Icon.cjs.js');
 
 function ViewModeTab({ value, icon, label }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(tabsTab.Tab, { value, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "sm", children: icon }),
-    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "ui-sm", className: "text-inherit", children: label })
+    /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", className: "text-inherit", children: label })
   ] });
 }
 

package/dist/ee/signals/view-mode-tab.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-mode-tab.cjs.js","sources":["../../../src/ee/signals/view-mode-tab.tsx"],"sourcesContent":["import { Tab } from '@/ds/components/Tabs';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\n\nexport type SignalsViewMode = 'flow' | 'compare' | 'lifelines';\n\nexport function ViewModeTab({ value, icon, label }: { value: SignalsViewMode; icon: React.ReactNode; label: string }) {\n  return (\n    <Tab value={value}>\n      <Icon size=\"sm\">{icon}</Icon>\n      <Txt variant=\"ui-sm\" className=\"text-inherit\">\n        {label}\n      </Txt>\n    </Tab>\n  );\n}\n"],"names":["jsxs","Tab","jsx","Icon","Txt"],"mappings":";;;;;;;;;AAMO,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,IAAA,EAAM,OAAM,EAAqE;AACpH,EAAA,uBACEA,eAAA,CAACC,eAAI,KAAA,EACH,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,eAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,mCACrBC,OAAA,EAAA,EAAI,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAU,gBAC5B,QAAA,EAAA,KAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"view-mode-tab.cjs.js","sources":["../../../src/ee/signals/view-mode-tab.tsx"],"sourcesContent":["import { Tab } from '@/ds/components/Tabs';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\n\nexport type SignalsViewMode = 'flow' | 'compare' | 'lifelines';\n\nexport function ViewModeTab({ value, icon, label }: { value: SignalsViewMode; icon: React.ReactNode; label: string }) {\n  return (\n    <Tab value={value}>\n      <Icon size=\"xs\">{icon}</Icon>\n      <Txt variant=\"caption\" className=\"text-inherit\">\n        {label}\n      </Txt>\n    </Tab>\n  );\n}\n"],"names":["jsxs","Tab","jsx","Icon","Txt"],"mappings":";;;;;;;;;AAMO,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,IAAA,EAAM,OAAM,EAAqE;AACpH,EAAA,uBACEA,eAAA,CAACC,eAAI,KAAA,EACH,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,eAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,mCACrBC,OAAA,EAAA,EAAI,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAU,gBAC9B,QAAA,EAAA,KAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/ee/signals/view-mode-tab.es.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { T as Tab } from '../../tabs-tab-CgMaandp.js';
-import { T as Txt } from '../../Txt-hyo2FKuO.js';
+import { T as Tab } from '../../tabs-tab-BycF4dvx.js';
+import { T as Txt } from '../../Txt-DTh3Pa_a.js';
 import { Icon } from '../../icons/Icon.es.js';
 
 function ViewModeTab({ value, icon, label }) {
   return /* @__PURE__ */ jsxs(Tab, { value, children: [
-    /* @__PURE__ */ jsx(Icon, { size: "sm", children: icon }),
-    /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-inherit", children: label })
+    /* @__PURE__ */ jsx(Icon, { size: "xs", children: icon }),
+    /* @__PURE__ */ jsx(Txt, { variant: "caption", className: "text-inherit", children: label })
   ] });
 }
 

package/dist/ee/signals/view-mode-tab.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-mode-tab.es.js","sources":["../../../src/ee/signals/view-mode-tab.tsx"],"sourcesContent":["import { Tab } from '@/ds/components/Tabs';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\n\nexport type SignalsViewMode = 'flow' | 'compare' | 'lifelines';\n\nexport function ViewModeTab({ value, icon, label }: { value: SignalsViewMode; icon: React.ReactNode; label: string }) {\n  return (\n    <Tab value={value}>\n      <Icon size=\"sm\">{icon}</Icon>\n      <Txt variant=\"ui-sm\" className=\"text-inherit\">\n        {label}\n      </Txt>\n    </Tab>\n  );\n}\n"],"names":[],"mappings":";;;;;AAMO,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,IAAA,EAAM,OAAM,EAAqE;AACpH,EAAA,uBACE,IAAA,CAAC,OAAI,KAAA,EACH,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,wBACrB,GAAA,EAAA,EAAI,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAU,gBAC5B,QAAA,EAAA,KAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"view-mode-tab.es.js","sources":["../../../src/ee/signals/view-mode-tab.tsx"],"sourcesContent":["import { Tab } from '@/ds/components/Tabs';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\n\nexport type SignalsViewMode = 'flow' | 'compare' | 'lifelines';\n\nexport function ViewModeTab({ value, icon, label }: { value: SignalsViewMode; icon: React.ReactNode; label: string }) {\n  return (\n    <Tab value={value}>\n      <Icon size=\"xs\">{icon}</Icon>\n      <Txt variant=\"caption\" className=\"text-inherit\">\n        {label}\n      </Txt>\n    </Tab>\n  );\n}\n"],"names":[],"mappings":";;;;;AAMO,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,IAAA,EAAM,OAAM,EAAqE;AACpH,EAAA,uBACE,IAAA,CAAC,OAAI,KAAA,EACH,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,wBACrB,GAAA,EAAA,EAAI,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAU,gBAC9B,QAAA,EAAA,KAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/ee/topics/components/topic-trace-details-panel.cjs.js

@@ -8,7 +8,7 @@ const domains_traces_components_traceDetailsView = require('../../../domains/tra
 const domains_traces_hooks_useSpanDetail = require('../../../domains/traces/hooks/use-span-detail.cjs.js');
 const domains_traces_hooks_useTraceSpanNavigation = require('../../../domains/traces/hooks/use-trace-span-navigation.cjs.js');
 const domains_traces_hooks_useTraceSpans = require('../../../domains/traces/hooks/use-trace-spans.cjs.js');
-const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 function TopicTraceDetailsPanel({
   traceId,

package/dist/ee/topics/components/topic-trace-details-panel.es.js

@@ -4,7 +4,7 @@ import { TraceDetailsView } from '../../../domains/traces/components/trace-detai
 import { useSpanDetail } from '../../../domains/traces/hooks/use-span-detail.es.js';
 import { useTraceSpanNavigation } from '../../../domains/traces/hooks/use-trace-span-navigation.es.js';
 import { useTraceSpans } from '../../../domains/traces/hooks/use-trace-spans.es.js';
-import { c as cn } from '../../../cn-C6s2yXwM.js';
+import { c as cn } from '../../../cn-65Adrsfj.js';
 
 function TopicTraceDetailsPanel({
   traceId,

package/dist/ee/topics/components/topic-trace-summary-list.cjs.js

@@ -6,10 +6,10 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const ee_topics_utils = require('../utils.cjs.js');
-const Button = require('../../../Button-C2dx_QZN.cjs');
-const dataList = require('../../../data-list-B9td5YXY.cjs');
+const Button = require('../../../Button-CVewl8nT.cjs');
+const dataList = require('../../../data-list-CypPKOQ_.cjs');
 const useDataListKeyboard = require('../../../use-data-list-keyboard-DF3tLe10.cjs');
-const inputGroup = require('../../../input-group-D_1g2L_v.cjs');
+const inputGroup = require('../../../input-group-CvWwK1Vz.cjs');
 
 function TopicTraceSummaryList({
   traces,
@@ -25,7 +25,7 @@ function TopicTraceSummaryList({
   );
   const { containerRef, getRowProps } = useDataListKeyboard.useDataListKeyboard({ count: visible.traces.length });
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex min-h-0 flex-1 flex-col gap-4", "aria-label": "Topic trace summaries", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(inputGroup.InputGroup, { variant: "outline", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(inputGroup.InputGroup, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(inputGroup.InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         inputGroup.InputGroupInput,

package/dist/ee/topics/components/topic-trace-summary-list.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"topic-trace-summary-list.cjs.js","sources":["../../../../src/ee/topics/components/topic-trace-summary-list.tsx"],"sourcesContent":["import { SearchIcon, ChevronDown } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport type { TopicTraceSummary } from '../types';\nimport { getVisibleTraceSummaries } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport { useDataListKeyboard } from '@/ds/components/DataList/use-data-list-keyboard';\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '@/ds/components/InputGroup';\n\nexport interface TopicTraceSummaryListProps {\n  traces: TopicTraceSummary[];\n  selectedTraceId?: string | null;\n  onTraceSelect: (trace: TopicTraceSummary) => void;\n  pageSize?: number;\n}\n\nexport function TopicTraceSummaryList({\n  traces,\n  selectedTraceId,\n  onTraceSelect,\n  pageSize = 25,\n}: TopicTraceSummaryListProps) {\n  const [search, setSearch] = useState('');\n  const [page, setPage] = useState(1);\n\n  const visible = useMemo(\n    () => getVisibleTraceSummaries(traces, { search, sort: 'newest', page, pageSize }),\n    [page, pageSize, search, traces],\n  );\n\n  const { containerRef, getRowProps } = useDataListKeyboard({ count: visible.traces.length });\n\n  return (\n    <section className=\"flex min-h-0 flex-1 flex-col gap-4\" aria-label=\"Topic trace summaries\">\n      <InputGroup variant=\"outline\">\n        <InputGroupAddon align=\"inline-start\">\n          <SearchIcon />\n        </InputGroupAddon>\n        <InputGroupInput\n          type=\"search\"\n          aria-label=\"Search traces\"\n          placeholder=\"Search traces\"\n          onChange={event => {\n            setSearch(event.target.value);\n            setPage(1);\n          }}\n        />\n      </InputGroup>\n\n      <DataList columns=\"minmax(12rem,1fr)\" className=\"min-h-0 flex-1\" scrollRef={containerRef}>\n        <DataList.Top>\n          <DataList.TopCells>\n            <DataList.TopCell>Trace summary</DataList.TopCell>\n          </DataList.TopCells>\n        </DataList.Top>\n\n        {visible.traces.length === 0 ? (\n          <DataList.NoMatch message=\"No traces match this subtopic.\" />\n        ) : (\n          visible.traces.map((trace, index) => (\n            <DataList.RowButton\n              key={trace.id}\n              {...getRowProps(index)}\n              featured={selectedTraceId === trace.id}\n              onClick={() => onTraceSelect(trace)}\n              aria-pressed={selectedTraceId === trace.id}\n            >\n              <DataList.TextCell>{trace.name ?? trace.id}</DataList.TextCell>\n            </DataList.RowButton>\n          ))\n        )}\n      </DataList>\n\n      {visible.hasMore ? (\n        <Button\n          icon={<ChevronDown />}\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => setPage(currentPage => currentPage + 1)}\n        >\n          Load more traces ({visible.traces.length} of {visible.total})\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"names":["useState","useMemo","getVisibleTraceSummaries","useDataListKeyboard","jsxs","InputGroup","jsx","InputGroupAddon","SearchIcon","InputGroupInput","DataList","Button","ChevronDown"],"mappings":"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"}
+{"version":3,"file":"topic-trace-summary-list.cjs.js","sources":["../../../../src/ee/topics/components/topic-trace-summary-list.tsx"],"sourcesContent":["import { SearchIcon, ChevronDown } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport type { TopicTraceSummary } from '../types';\nimport { getVisibleTraceSummaries } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport { useDataListKeyboard } from '@/ds/components/DataList/use-data-list-keyboard';\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '@/ds/components/InputGroup';\n\nexport interface TopicTraceSummaryListProps {\n  traces: TopicTraceSummary[];\n  selectedTraceId?: string | null;\n  onTraceSelect: (trace: TopicTraceSummary) => void;\n  pageSize?: number;\n}\n\nexport function TopicTraceSummaryList({\n  traces,\n  selectedTraceId,\n  onTraceSelect,\n  pageSize = 25,\n}: TopicTraceSummaryListProps) {\n  const [search, setSearch] = useState('');\n  const [page, setPage] = useState(1);\n\n  const visible = useMemo(\n    () => getVisibleTraceSummaries(traces, { search, sort: 'newest', page, pageSize }),\n    [page, pageSize, search, traces],\n  );\n\n  const { containerRef, getRowProps } = useDataListKeyboard({ count: visible.traces.length });\n\n  return (\n    <section className=\"flex min-h-0 flex-1 flex-col gap-4\" aria-label=\"Topic trace summaries\">\n      <InputGroup>\n        <InputGroupAddon align=\"inline-start\">\n          <SearchIcon />\n        </InputGroupAddon>\n        <InputGroupInput\n          type=\"search\"\n          aria-label=\"Search traces\"\n          placeholder=\"Search traces\"\n          onChange={event => {\n            setSearch(event.target.value);\n            setPage(1);\n          }}\n        />\n      </InputGroup>\n\n      <DataList columns=\"minmax(12rem,1fr)\" className=\"min-h-0 flex-1\" scrollRef={containerRef}>\n        <DataList.Top>\n          <DataList.TopCells>\n            <DataList.TopCell>Trace summary</DataList.TopCell>\n          </DataList.TopCells>\n        </DataList.Top>\n\n        {visible.traces.length === 0 ? (\n          <DataList.NoMatch message=\"No traces match this subtopic.\" />\n        ) : (\n          visible.traces.map((trace, index) => (\n            <DataList.RowButton\n              key={trace.id}\n              {...getRowProps(index)}\n              featured={selectedTraceId === trace.id}\n              onClick={() => onTraceSelect(trace)}\n              aria-pressed={selectedTraceId === trace.id}\n            >\n              <DataList.TextCell>{trace.name ?? trace.id}</DataList.TextCell>\n            </DataList.RowButton>\n          ))\n        )}\n      </DataList>\n\n      {visible.hasMore ? (\n        <Button\n          icon={<ChevronDown />}\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => setPage(currentPage => currentPage + 1)}\n        >\n          Load more traces ({visible.traces.length} of {visible.total})\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"names":["useState","useMemo","getVisibleTraceSummaries","useDataListKeyboard","jsxs","InputGroup","jsx","InputGroupAddon","SearchIcon","InputGroupInput","DataList","Button","ChevronDown"],"mappings":"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"}

package/dist/ee/topics/components/topic-trace-summary-list.es.js

@@ -2,10 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { SearchIcon, ChevronDown } from 'lucide-react';
 import { useState, useMemo } from 'react';
 import { getVisibleTraceSummaries } from '../utils.es.js';
-import { B as Button } from '../../../Button-DS6O6fvU.js';
-import { D as DataList } from '../../../data-list-IQ0BjiGx.js';
+import { B as Button } from '../../../Button-cWcBEd-G.js';
+import { D as DataList } from '../../../data-list-DnSdaRES.js';
 import { u as useDataListKeyboard } from '../../../use-data-list-keyboard-DFQr4t38.js';
-import { I as InputGroup, a as InputGroupAddon, c as InputGroupInput } from '../../../input-group-rn0r72y5.js';
+import { I as InputGroup, a as InputGroupAddon, c as InputGroupInput } from '../../../input-group-BEdHivvy.js';
 
 function TopicTraceSummaryList({
   traces,
@@ -21,7 +21,7 @@ function TopicTraceSummaryList({
   );
   const { containerRef, getRowProps } = useDataListKeyboard({ count: visible.traces.length });
   return /* @__PURE__ */ jsxs("section", { className: "flex min-h-0 flex-1 flex-col gap-4", "aria-label": "Topic trace summaries", children: [
-    /* @__PURE__ */ jsxs(InputGroup, { variant: "outline", children: [
+    /* @__PURE__ */ jsxs(InputGroup, { children: [
       /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
       /* @__PURE__ */ jsx(
         InputGroupInput,

package/dist/ee/topics/components/topic-trace-summary-list.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"topic-trace-summary-list.es.js","sources":["../../../../src/ee/topics/components/topic-trace-summary-list.tsx"],"sourcesContent":["import { SearchIcon, ChevronDown } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport type { TopicTraceSummary } from '../types';\nimport { getVisibleTraceSummaries } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport { useDataListKeyboard } from '@/ds/components/DataList/use-data-list-keyboard';\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '@/ds/components/InputGroup';\n\nexport interface TopicTraceSummaryListProps {\n  traces: TopicTraceSummary[];\n  selectedTraceId?: string | null;\n  onTraceSelect: (trace: TopicTraceSummary) => void;\n  pageSize?: number;\n}\n\nexport function TopicTraceSummaryList({\n  traces,\n  selectedTraceId,\n  onTraceSelect,\n  pageSize = 25,\n}: TopicTraceSummaryListProps) {\n  const [search, setSearch] = useState('');\n  const [page, setPage] = useState(1);\n\n  const visible = useMemo(\n    () => getVisibleTraceSummaries(traces, { search, sort: 'newest', page, pageSize }),\n    [page, pageSize, search, traces],\n  );\n\n  const { containerRef, getRowProps } = useDataListKeyboard({ count: visible.traces.length });\n\n  return (\n    <section className=\"flex min-h-0 flex-1 flex-col gap-4\" aria-label=\"Topic trace summaries\">\n      <InputGroup variant=\"outline\">\n        <InputGroupAddon align=\"inline-start\">\n          <SearchIcon />\n        </InputGroupAddon>\n        <InputGroupInput\n          type=\"search\"\n          aria-label=\"Search traces\"\n          placeholder=\"Search traces\"\n          onChange={event => {\n            setSearch(event.target.value);\n            setPage(1);\n          }}\n        />\n      </InputGroup>\n\n      <DataList columns=\"minmax(12rem,1fr)\" className=\"min-h-0 flex-1\" scrollRef={containerRef}>\n        <DataList.Top>\n          <DataList.TopCells>\n            <DataList.TopCell>Trace summary</DataList.TopCell>\n          </DataList.TopCells>\n        </DataList.Top>\n\n        {visible.traces.length === 0 ? (\n          <DataList.NoMatch message=\"No traces match this subtopic.\" />\n        ) : (\n          visible.traces.map((trace, index) => (\n            <DataList.RowButton\n              key={trace.id}\n              {...getRowProps(index)}\n              featured={selectedTraceId === trace.id}\n              onClick={() => onTraceSelect(trace)}\n              aria-pressed={selectedTraceId === trace.id}\n            >\n              <DataList.TextCell>{trace.name ?? trace.id}</DataList.TextCell>\n            </DataList.RowButton>\n          ))\n        )}\n      </DataList>\n\n      {visible.hasMore ? (\n        <Button\n          icon={<ChevronDown />}\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => setPage(currentPage => currentPage + 1)}\n        >\n          Load more traces ({visible.traces.length} of {visible.total})\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"topic-trace-summary-list.es.js","sources":["../../../../src/ee/topics/components/topic-trace-summary-list.tsx"],"sourcesContent":["import { SearchIcon, ChevronDown } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport type { TopicTraceSummary } from '../types';\nimport { getVisibleTraceSummaries } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport { useDataListKeyboard } from '@/ds/components/DataList/use-data-list-keyboard';\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '@/ds/components/InputGroup';\n\nexport interface TopicTraceSummaryListProps {\n  traces: TopicTraceSummary[];\n  selectedTraceId?: string | null;\n  onTraceSelect: (trace: TopicTraceSummary) => void;\n  pageSize?: number;\n}\n\nexport function TopicTraceSummaryList({\n  traces,\n  selectedTraceId,\n  onTraceSelect,\n  pageSize = 25,\n}: TopicTraceSummaryListProps) {\n  const [search, setSearch] = useState('');\n  const [page, setPage] = useState(1);\n\n  const visible = useMemo(\n    () => getVisibleTraceSummaries(traces, { search, sort: 'newest', page, pageSize }),\n    [page, pageSize, search, traces],\n  );\n\n  const { containerRef, getRowProps } = useDataListKeyboard({ count: visible.traces.length });\n\n  return (\n    <section className=\"flex min-h-0 flex-1 flex-col gap-4\" aria-label=\"Topic trace summaries\">\n      <InputGroup>\n        <InputGroupAddon align=\"inline-start\">\n          <SearchIcon />\n        </InputGroupAddon>\n        <InputGroupInput\n          type=\"search\"\n          aria-label=\"Search traces\"\n          placeholder=\"Search traces\"\n          onChange={event => {\n            setSearch(event.target.value);\n            setPage(1);\n          }}\n        />\n      </InputGroup>\n\n      <DataList columns=\"minmax(12rem,1fr)\" className=\"min-h-0 flex-1\" scrollRef={containerRef}>\n        <DataList.Top>\n          <DataList.TopCells>\n            <DataList.TopCell>Trace summary</DataList.TopCell>\n          </DataList.TopCells>\n        </DataList.Top>\n\n        {visible.traces.length === 0 ? (\n          <DataList.NoMatch message=\"No traces match this subtopic.\" />\n        ) : (\n          visible.traces.map((trace, index) => (\n            <DataList.RowButton\n              key={trace.id}\n              {...getRowProps(index)}\n              featured={selectedTraceId === trace.id}\n              onClick={() => onTraceSelect(trace)}\n              aria-pressed={selectedTraceId === trace.id}\n            >\n              <DataList.TextCell>{trace.name ?? trace.id}</DataList.TextCell>\n            </DataList.RowButton>\n          ))\n        )}\n      </DataList>\n\n      {visible.hasMore ? (\n        <Button\n          icon={<ChevronDown />}\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => setPage(currentPage => currentPage + 1)}\n        >\n          Load more traces ({visible.traces.length} of {visible.total})\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/ee/topics/components/topics-layout.cjs.js

@@ -10,8 +10,8 @@ const resize_separator = require('../../../resize/separator.cjs.js');
 
 function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }) {
   const hasContent = Boolean(children || tracePanel);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface2 text-neutral4 flex h-full min-h-0", children: [
-    sidebar ? /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "border-border1 min-h-0 w-88 shrink-0 border-r", children: sidebar }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-background text-muted-foreground flex h-full min-h-0", children: [
+    sidebar ? /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "border-border min-h-0 w-88 shrink-0 border-r", children: sidebar }) : null,
     hasContent ? /* @__PURE__ */ jsxRuntime.jsx("main", { className: contentPadding ? "min-w-0 flex-1 p-4" : "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(resize_panelGroup.PanelGroup, { className: "size-full min-h-0 min-w-0", orientation: "horizontal", children: [
       children ? /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "topic-main", className: "min-w-0 pr-2", minSize: 35, children }) : null,
       tracePanel ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

package/dist/ee/topics/components/topics-layout.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"topics-layout.cjs.js","sources":["../../../../src/ee/topics/components/topics-layout.tsx"],"sourcesContent":["import { Panel } from 'react-resizable-panels';\nimport { CollapsiblePanel } from '@/lib/resize/collapsible-panel';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { PanelSeparator } from '@/lib/resize/separator';\n\nexport interface TopicsLayoutProps {\n  sidebar?: React.ReactNode;\n  children?: React.ReactNode;\n  tracePanel?: React.ReactNode;\n  contentPadding?: boolean;\n}\n\nexport function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }: TopicsLayoutProps) {\n  const hasContent = Boolean(children || tracePanel);\n\n  return (\n    <div className=\"bg-surface2 text-neutral4 flex h-full min-h-0\">\n      {sidebar ? <aside className=\"border-border1 min-h-0 w-88 shrink-0 border-r\">{sidebar}</aside> : null}\n      {hasContent ? (\n        <main className={contentPadding ? 'min-w-0 flex-1 p-4' : 'min-w-0 flex-1'}>\n          <PanelGroup className=\"size-full min-h-0 min-w-0\" orientation=\"horizontal\">\n            {children ? (\n              <Panel id=\"topic-main\" className=\"min-w-0 pr-2\" minSize={35}>\n                {children}\n              </Panel>\n            ) : null}\n            {tracePanel ? (\n              <>\n                {children ? <PanelSeparator /> : null}\n                <CollapsiblePanel\n                  direction=\"right\"\n                  id=\"topic-trace-details\"\n                  minSize={300}\n                  maxSize=\"70%\"\n                  defaultSize={children ? '40%' : '100%'}\n                  collapsedSize={60}\n                  collapsible\n                  className=\"min-w-0 pl-2\"\n                >\n                  {tracePanel}\n                </CollapsiblePanel>\n              </>\n            ) : null}\n          </PanelGroup>\n        </main>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","PanelGroup","Panel","Fragment","PanelSeparator","CollapsiblePanel"],"mappings":";;;;;;;;;;AAYO,SAAS,aAAa,EAAE,OAAA,EAAS,UAAU,UAAA,EAAY,cAAA,GAAiB,MAAK,EAAsB;AACxG,EAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,QAAA,IAAY,UAAU,CAAA;AAEjD,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EACZ,QAAA,EAAA;AAAA,IAAA,OAAA,mBAAUC,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,+CAAA,EAAiD,mBAAQ,CAAA,GAAW,IAAA;AAAA,IAC/F,UAAA,mBACCA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,cAAA,GAAiB,oBAAA,GAAuB,gBAAA,EACvD,QAAA,kBAAAD,eAAA,CAACE,4BAAA,EAAA,EAAW,SAAA,EAAU,2BAAA,EAA4B,WAAA,EAAY,YAAA,EAC3D,QAAA,EAAA;AAAA,MAAA,QAAA,mBACCD,cAAA,CAACE,8BAAM,EAAA,EAAG,YAAA,EAAa,WAAU,cAAA,EAAe,OAAA,EAAS,EAAA,EACtD,QAAA,EACH,CAAA,GACE,IAAA;AAAA,MACH,6BACCH,eAAA,CAAAI,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,QAAA,mBAAWH,cAAA,CAACI,mCAAe,CAAA,GAAK,IAAA;AAAA,wBACjCJ,cAAA;AAAA,UAACK,wCAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,OAAA;AAAA,YACV,EAAA,EAAG,qBAAA;AAAA,YACH,OAAA,EAAS,GAAA;AAAA,YACT,OAAA,EAAQ,KAAA;AAAA,YACR,WAAA,EAAa,WAAW,KAAA,GAAQ,MAAA;AAAA,YAChC,aAAA,EAAe,EAAA;AAAA,YACf,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAU,cAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EACF,CAAA,GACE;AAAA,KAAA,EACN,GACF,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"topics-layout.cjs.js","sources":["../../../../src/ee/topics/components/topics-layout.tsx"],"sourcesContent":["import { Panel } from 'react-resizable-panels';\nimport { CollapsiblePanel } from '@/lib/resize/collapsible-panel';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { PanelSeparator } from '@/lib/resize/separator';\n\nexport interface TopicsLayoutProps {\n  sidebar?: React.ReactNode;\n  children?: React.ReactNode;\n  tracePanel?: React.ReactNode;\n  contentPadding?: boolean;\n}\n\nexport function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }: TopicsLayoutProps) {\n  const hasContent = Boolean(children || tracePanel);\n\n  return (\n    <div className=\"bg-background text-muted-foreground flex h-full min-h-0\">\n      {sidebar ? <aside className=\"border-border min-h-0 w-88 shrink-0 border-r\">{sidebar}</aside> : null}\n      {hasContent ? (\n        <main className={contentPadding ? 'min-w-0 flex-1 p-4' : 'min-w-0 flex-1'}>\n          <PanelGroup className=\"size-full min-h-0 min-w-0\" orientation=\"horizontal\">\n            {children ? (\n              <Panel id=\"topic-main\" className=\"min-w-0 pr-2\" minSize={35}>\n                {children}\n              </Panel>\n            ) : null}\n            {tracePanel ? (\n              <>\n                {children ? <PanelSeparator /> : null}\n                <CollapsiblePanel\n                  direction=\"right\"\n                  id=\"topic-trace-details\"\n                  minSize={300}\n                  maxSize=\"70%\"\n                  defaultSize={children ? '40%' : '100%'}\n                  collapsedSize={60}\n                  collapsible\n                  className=\"min-w-0 pl-2\"\n                >\n                  {tracePanel}\n                </CollapsiblePanel>\n              </>\n            ) : null}\n          </PanelGroup>\n        </main>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","PanelGroup","Panel","Fragment","PanelSeparator","CollapsiblePanel"],"mappings":";;;;;;;;;;AAYO,SAAS,aAAa,EAAE,OAAA,EAAS,UAAU,UAAA,EAAY,cAAA,GAAiB,MAAK,EAAsB;AACxG,EAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,QAAA,IAAY,UAAU,CAAA;AAEjD,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EACZ,QAAA,EAAA;AAAA,IAAA,OAAA,mBAAUC,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,8CAAA,EAAgD,mBAAQ,CAAA,GAAW,IAAA;AAAA,IAC9F,UAAA,mBACCA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,cAAA,GAAiB,oBAAA,GAAuB,gBAAA,EACvD,QAAA,kBAAAD,eAAA,CAACE,4BAAA,EAAA,EAAW,SAAA,EAAU,2BAAA,EAA4B,WAAA,EAAY,YAAA,EAC3D,QAAA,EAAA;AAAA,MAAA,QAAA,mBACCD,cAAA,CAACE,8BAAM,EAAA,EAAG,YAAA,EAAa,WAAU,cAAA,EAAe,OAAA,EAAS,EAAA,EACtD,QAAA,EACH,CAAA,GACE,IAAA;AAAA,MACH,6BACCH,eAAA,CAAAI,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,QAAA,mBAAWH,cAAA,CAACI,mCAAe,CAAA,GAAK,IAAA;AAAA,wBACjCJ,cAAA;AAAA,UAACK,wCAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,OAAA;AAAA,YACV,EAAA,EAAG,qBAAA;AAAA,YACH,OAAA,EAAS,GAAA;AAAA,YACT,OAAA,EAAQ,KAAA;AAAA,YACR,WAAA,EAAa,WAAW,KAAA,GAAQ,MAAA;AAAA,YAChC,aAAA,EAAe,EAAA;AAAA,YACf,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAU,cAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EACF,CAAA,GACE;AAAA,KAAA,EACN,GACF,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}

package/dist/ee/topics/components/topics-layout.es.js

@@ -6,8 +6,8 @@ import { PanelSeparator } from '../../../resize/separator.es.js';
 
 function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }) {
   const hasContent = Boolean(children || tracePanel);
-  return /* @__PURE__ */ jsxs("div", { className: "bg-surface2 text-neutral4 flex h-full min-h-0", children: [
-    sidebar ? /* @__PURE__ */ jsx("aside", { className: "border-border1 min-h-0 w-88 shrink-0 border-r", children: sidebar }) : null,
+  return /* @__PURE__ */ jsxs("div", { className: "bg-background text-muted-foreground flex h-full min-h-0", children: [
+    sidebar ? /* @__PURE__ */ jsx("aside", { className: "border-border min-h-0 w-88 shrink-0 border-r", children: sidebar }) : null,
     hasContent ? /* @__PURE__ */ jsx("main", { className: contentPadding ? "min-w-0 flex-1 p-4" : "min-w-0 flex-1", children: /* @__PURE__ */ jsxs(PanelGroup, { className: "size-full min-h-0 min-w-0", orientation: "horizontal", children: [
       children ? /* @__PURE__ */ jsx(Panel, { id: "topic-main", className: "min-w-0 pr-2", minSize: 35, children }) : null,
       tracePanel ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/ee/topics/components/topics-layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"topics-layout.es.js","sources":["../../../../src/ee/topics/components/topics-layout.tsx"],"sourcesContent":["import { Panel } from 'react-resizable-panels';\nimport { CollapsiblePanel } from '@/lib/resize/collapsible-panel';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { PanelSeparator } from '@/lib/resize/separator';\n\nexport interface TopicsLayoutProps {\n  sidebar?: React.ReactNode;\n  children?: React.ReactNode;\n  tracePanel?: React.ReactNode;\n  contentPadding?: boolean;\n}\n\nexport function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }: TopicsLayoutProps) {\n  const hasContent = Boolean(children || tracePanel);\n\n  return (\n    <div className=\"bg-surface2 text-neutral4 flex h-full min-h-0\">\n      {sidebar ? <aside className=\"border-border1 min-h-0 w-88 shrink-0 border-r\">{sidebar}</aside> : null}\n      {hasContent ? (\n        <main className={contentPadding ? 'min-w-0 flex-1 p-4' : 'min-w-0 flex-1'}>\n          <PanelGroup className=\"size-full min-h-0 min-w-0\" orientation=\"horizontal\">\n            {children ? (\n              <Panel id=\"topic-main\" className=\"min-w-0 pr-2\" minSize={35}>\n                {children}\n              </Panel>\n            ) : null}\n            {tracePanel ? (\n              <>\n                {children ? <PanelSeparator /> : null}\n                <CollapsiblePanel\n                  direction=\"right\"\n                  id=\"topic-trace-details\"\n                  minSize={300}\n                  maxSize=\"70%\"\n                  defaultSize={children ? '40%' : '100%'}\n                  collapsedSize={60}\n                  collapsible\n                  className=\"min-w-0 pl-2\"\n                >\n                  {tracePanel}\n                </CollapsiblePanel>\n              </>\n            ) : null}\n          </PanelGroup>\n        </main>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAYO,SAAS,aAAa,EAAE,OAAA,EAAS,UAAU,UAAA,EAAY,cAAA,GAAiB,MAAK,EAAsB;AACxG,EAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,QAAA,IAAY,UAAU,CAAA;AAEjD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EACZ,QAAA,EAAA;AAAA,IAAA,OAAA,mBAAU,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,+CAAA,EAAiD,mBAAQ,CAAA,GAAW,IAAA;AAAA,IAC/F,UAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,cAAA,GAAiB,oBAAA,GAAuB,gBAAA,EACvD,QAAA,kBAAA,IAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,2BAAA,EAA4B,WAAA,EAAY,YAAA,EAC3D,QAAA,EAAA;AAAA,MAAA,QAAA,mBACC,GAAA,CAAC,SAAM,EAAA,EAAG,YAAA,EAAa,WAAU,cAAA,EAAe,OAAA,EAAS,EAAA,EACtD,QAAA,EACH,CAAA,GACE,IAAA;AAAA,MACH,6BACC,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,QAAA,mBAAW,GAAA,CAAC,kBAAe,CAAA,GAAK,IAAA;AAAA,wBACjC,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,OAAA;AAAA,YACV,EAAA,EAAG,qBAAA;AAAA,YACH,OAAA,EAAS,GAAA;AAAA,YACT,OAAA,EAAQ,KAAA;AAAA,YACR,WAAA,EAAa,WAAW,KAAA,GAAQ,MAAA;AAAA,YAChC,aAAA,EAAe,EAAA;AAAA,YACf,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAU,cAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EACF,CAAA,GACE;AAAA,KAAA,EACN,GACF,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"topics-layout.es.js","sources":["../../../../src/ee/topics/components/topics-layout.tsx"],"sourcesContent":["import { Panel } from 'react-resizable-panels';\nimport { CollapsiblePanel } from '@/lib/resize/collapsible-panel';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { PanelSeparator } from '@/lib/resize/separator';\n\nexport interface TopicsLayoutProps {\n  sidebar?: React.ReactNode;\n  children?: React.ReactNode;\n  tracePanel?: React.ReactNode;\n  contentPadding?: boolean;\n}\n\nexport function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }: TopicsLayoutProps) {\n  const hasContent = Boolean(children || tracePanel);\n\n  return (\n    <div className=\"bg-background text-muted-foreground flex h-full min-h-0\">\n      {sidebar ? <aside className=\"border-border min-h-0 w-88 shrink-0 border-r\">{sidebar}</aside> : null}\n      {hasContent ? (\n        <main className={contentPadding ? 'min-w-0 flex-1 p-4' : 'min-w-0 flex-1'}>\n          <PanelGroup className=\"size-full min-h-0 min-w-0\" orientation=\"horizontal\">\n            {children ? (\n              <Panel id=\"topic-main\" className=\"min-w-0 pr-2\" minSize={35}>\n                {children}\n              </Panel>\n            ) : null}\n            {tracePanel ? (\n              <>\n                {children ? <PanelSeparator /> : null}\n                <CollapsiblePanel\n                  direction=\"right\"\n                  id=\"topic-trace-details\"\n                  minSize={300}\n                  maxSize=\"70%\"\n                  defaultSize={children ? '40%' : '100%'}\n                  collapsedSize={60}\n                  collapsible\n                  className=\"min-w-0 pl-2\"\n                >\n                  {tracePanel}\n                </CollapsiblePanel>\n              </>\n            ) : null}\n          </PanelGroup>\n        </main>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAYO,SAAS,aAAa,EAAE,OAAA,EAAS,UAAU,UAAA,EAAY,cAAA,GAAiB,MAAK,EAAsB;AACxG,EAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,QAAA,IAAY,UAAU,CAAA;AAEjD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EACZ,QAAA,EAAA;AAAA,IAAA,OAAA,mBAAU,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,8CAAA,EAAgD,mBAAQ,CAAA,GAAW,IAAA;AAAA,IAC9F,UAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,cAAA,GAAiB,oBAAA,GAAuB,gBAAA,EACvD,QAAA,kBAAA,IAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,2BAAA,EAA4B,WAAA,EAAY,YAAA,EAC3D,QAAA,EAAA;AAAA,MAAA,QAAA,mBACC,GAAA,CAAC,SAAM,EAAA,EAAG,YAAA,EAAa,WAAU,cAAA,EAAe,OAAA,EAAS,EAAA,EACtD,QAAA,EACH,CAAA,GACE,IAAA;AAAA,MACH,6BACC,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,QAAA,mBAAW,GAAA,CAAC,kBAAe,CAAA,GAAK,IAAA;AAAA,wBACjC,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,OAAA;AAAA,YACV,EAAA,EAAG,qBAAA;AAAA,YACH,OAAA,EAAS,GAAA;AAAA,YACT,OAAA,EAAQ,KAAA;AAAA,YACR,WAAA,EAAa,WAAW,KAAA,GAAQ,MAAA;AAAA,YAChC,aAAA,EAAe,EAAA;AAAA,YACf,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAU,cAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EACF,CAAA,GACE;AAAA,KAAA,EACN,GACF,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}

package/dist/field-block-DWkbNcsV.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { c as cn } from './cn-65Adrsfj.js';
+
+function FieldBlockColumn({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-2 text-foreground", className), children });
+}
+
+function FieldBlockErrorMsg({ children, name, className }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      role: "alert",
+      id: name !== void 0 ? `error-${name}` : void 0,
+      className: cn("text-caption text-destructive", className),
+      children
+    }
+  );
+}
+
+function FieldBlockHelpText({ children }) {
+  return /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children });
+}
+
+function FieldBlockLabel({
+  children,
+  name,
+  htmlFor = `input-${name}`,
+  required,
+  disabled = false,
+  size = "default",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor,
+      className: cn(
+        "inline-flex items-center text-label",
+        {
+          "text-body": size === "bigger",
+          "text-foreground": !disabled,
+          "text-muted-foreground": disabled
+        },
+        className
+      ),
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("ml-0.5", disabled ? "text-muted-foreground" : "text-destructive"), children: "*" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (required)" })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+function FieldBlockLayout({
+  children,
+  className,
+  layout = "vertical",
+  labelColumnWidth
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative grid gap-2 text-foreground",
+        {
+          "horizontal-field-block grid-cols-[auto_1fr] items-baseline": layout === "horizontal"
+        },
+        className
+      ),
+      style: layout === "horizontal" && labelColumnWidth ? { gridTemplateColumns: `${labelColumnWidth} 1fr` } : void 0,
+      children
+    }
+  );
+}
+
+function FieldBlockMessage({ name, helpText, errorMsg }) {
+  return /* @__PURE__ */ jsx("div", { className: "text-caption h-[1lh] min-w-0 overflow-hidden [&>p]:truncate", children: errorMsg ? /* @__PURE__ */ jsx(FieldBlockErrorMsg, { name, className: "truncate", children: errorMsg }) : helpText ? /* @__PURE__ */ jsx(FieldBlockHelpText, { children: helpText }) : null });
+}
+
+const FieldBlock = Object.assign(
+  {},
+  {
+    Layout: FieldBlockLayout,
+    Column: FieldBlockColumn,
+    Label: FieldBlockLabel,
+    HelpText: FieldBlockHelpText,
+    ErrorMsg: FieldBlockErrorMsg,
+    Message: FieldBlockMessage
+  }
+);
+
+export { FieldBlock as F };
+//# sourceMappingURL=field-block-DWkbNcsV.js.map

package/dist/field-block-DWkbNcsV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-block-DWkbNcsV.js","sources":["../src/ds/components/FormFieldBlocks/block/field-block-column.tsx","../src/ds/components/FormFieldBlocks/block/field-block-error-msg.tsx","../src/ds/components/FormFieldBlocks/block/field-block-help-text.tsx","../src/ds/components/FormFieldBlocks/block/field-block-label.tsx","../src/ds/components/FormFieldBlocks/block/field-block-layout.tsx","../src/ds/components/FormFieldBlocks/block/field-block-message.tsx","../src/ds/components/FormFieldBlocks/block/field-block.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type FieldBlockColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function FieldBlockColumn({ children, className }: FieldBlockColumnProps) {\n  return <div className={cn('grid gap-2 text-foreground', className)}>{children}</div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockErrorMsgProps = {\n  children?: React.ReactNode;\n  /**\n   * The field this message belongs to, matching the `name` given to `FieldBlock.Label`.\n   * Sets a stable `error-<name>` id so the control can point at it with\n   * `aria-describedby` and a screen reader reads the message with the field.\n   */\n  name?: string;\n  className?: string;\n};\n\nexport function FieldBlockErrorMsg({ children, name, className }: FieldBlockErrorMsgProps) {\n  return (\n    <p\n      // `role=\"alert\"` lives here rather than in a wrapper at every call site, so an\n      // error announces itself wherever it is used instead of depending on each caller\n      // remembering to wrap it.\n      role=\"alert\"\n      id={name !== undefined ? `error-${name}` : undefined}\n      className={cn('text-caption text-destructive', className)}\n    >\n      {children}\n    </p>\n  );\n}\n","export type FieldBlockHelpTextProps = {\n  children?: React.ReactNode;\n};\n\nexport function FieldBlockHelpText({ children }: FieldBlockHelpTextProps) {\n  return <p className=\"text-caption text-muted-foreground\">{children}</p>;\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockLabelProps = {\n  children: React.ReactNode;\n  name: string;\n  htmlFor?: string;\n  required?: boolean;\n  disabled?: boolean;\n  size?: 'default' | 'bigger';\n  className?: string;\n};\n\nexport function FieldBlockLabel({\n  children,\n  name,\n  htmlFor = `input-${name}`,\n  required,\n  disabled = false,\n  size = 'default',\n  className,\n}: FieldBlockLabelProps) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(\n        'inline-flex items-center text-label',\n        {\n          'text-body': size === 'bigger',\n          'text-foreground': !disabled,\n          'text-muted-foreground': disabled,\n        },\n        className,\n      )}\n    >\n      {children}\n      {required ? (\n        <>\n          <span aria-hidden className={cn('ml-0.5', disabled ? 'text-muted-foreground' : 'text-destructive')}>\n            *\n          </span>\n          <span className=\"sr-only\"> (required)</span>\n        </>\n      ) : null}\n    </label>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockLayoutProps = {\n  children: React.ReactNode;\n  className?: string;\n  layout?: 'vertical' | 'horizontal';\n  // Optional prop to specify label column width in horizontal layout\n  labelColumnWidth?: string; // e.g., '150px' or '30%'\n};\n\nexport function FieldBlockLayout({\n  children,\n  className,\n  layout = 'vertical',\n  labelColumnWidth,\n}: FieldBlockLayoutProps) {\n  return (\n    <div\n      className={cn(\n        'relative grid gap-2 text-foreground',\n        {\n          'horizontal-field-block grid-cols-[auto_1fr] items-baseline': layout === 'horizontal',\n        },\n        className,\n      )}\n      style={\n        layout === 'horizontal' && labelColumnWidth ? { gridTemplateColumns: `${labelColumnWidth} 1fr` } : undefined\n      }\n    >\n      {children}\n    </div>\n  );\n}\n","import { FieldBlockErrorMsg } from './field-block-error-msg';\nimport { FieldBlockHelpText } from './field-block-help-text';\n\nexport type FieldBlockMessageProps = {\n  name: string;\n  helpText?: React.ReactNode;\n  errorMsg?: React.ReactNode;\n};\n\nexport function FieldBlockMessage({ name, helpText, errorMsg }: FieldBlockMessageProps) {\n  return (\n    <div className=\"text-caption h-[1lh] min-w-0 overflow-hidden [&>p]:truncate\">\n      {errorMsg ? (\n        <FieldBlockErrorMsg name={name} className=\"truncate\">\n          {errorMsg}\n        </FieldBlockErrorMsg>\n      ) : helpText ? (\n        <FieldBlockHelpText>{helpText}</FieldBlockHelpText>\n      ) : null}\n    </div>\n  );\n}\n","import { FieldBlockColumn } from './field-block-column';\nimport { FieldBlockErrorMsg } from './field-block-error-msg';\nimport { FieldBlockHelpText } from './field-block-help-text';\nimport { FieldBlockLabel } from './field-block-label';\nimport { FieldBlockLayout } from './field-block-layout';\nimport { FieldBlockMessage } from './field-block-message';\n\nexport const FieldBlock = Object.assign(\n  {},\n  {\n    Layout: FieldBlockLayout,\n    Column: FieldBlockColumn,\n    Label: FieldBlockLabel,\n    HelpText: FieldBlockHelpText,\n    ErrorMsg: FieldBlockErrorMsg,\n    Message: FieldBlockMessage,\n  },\n);\n"],"names":[],"mappings":"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"}