@mastra/playground-ui 53.1.0-alpha.1 → 53.1.0-alpha.3

package/dist/{code-block-DeksY23p.js → code-block-CKowdtY1.js}

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { C as Code } from './code-D4Vw_fYq.js';
 import { C as CopyButton } from './copy-button-BHmcGzIz.js';
 import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-AvBDZffY.js';
-import { a as Tabs, T as TabList } from './tabs-root-BnwVjJbD.js';
-import { T as Tab } from './tabs-tab-Qlfs2X2g.js';
+import { a as Tabs, T as TabList } from './tabs-root-DP_5NGAv.js';
+import { T as Tab } from './tabs-tab-BIloVjDS.js';
 import { transitions } from './primitives/transitions.es.js';
 import { c as cn } from './cn-B4oPhFx9.js';
 
@@ -83,4 +83,4 @@ function CodeBlock({
 }
 
 export { CodeBlock as C };
-//# sourceMappingURL=code-block-DeksY23p.js.map
+//# sourceMappingURL=code-block-CKowdtY1.js.map

package/dist/{code-block-DeksY23p.js.map → code-block-CKowdtY1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"code-block-DeksY23p.js","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      // A scrolling `pre` still reports its longest line as an intrinsic width, which\n      // grows every ancestor; containment keeps the block inside the width it is given.\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2 [contain:inline-size]',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"border-border2/40 flex items-center border-b px-4 py-2\">\n          <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"border-border2/40 flex items-center justify-end border-b px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-ui-sm text-neutral5',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"code-block-CKowdtY1.js","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      // A scrolling `pre` still reports its longest line as an intrinsic width, which\n      // grows every ancestor; containment keeps the block inside the width it is given.\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2 [contain:inline-size]',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"border-border2/40 flex items-center border-b px-4 py-2\">\n          <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"border-border2/40 flex items-center justify-end border-b px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-ui-sm text-neutral5',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/{code-block-DgHrBuR8.cjs → code-block-qe7OUAjF.cjs}

@@ -4,8 +4,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const code = require('./code-DhrdtZce.cjs');
 const copyButton = require('./copy-button-BtnbaMvl.cjs');
 const select = require('./select-C_FsCxA5.cjs');
-const tabsRoot = require('./tabs-root-BNcLC-s6.cjs');
-const tabsTab = require('./tabs-tab-Ha0C9Dv3.cjs');
+const tabsRoot = require('./tabs-root-dbq4ph7H.cjs');
+const tabsTab = require('./tabs-tab-Box-WPFr.cjs');
 const primitives_transitions = require('./primitives/transitions.cjs.js');
 const utils_cn = require('./cn-DCPcv4xv.cjs');
 
@@ -85,4 +85,4 @@ function CodeBlock({
 }
 
 exports.CodeBlock = CodeBlock;
-//# sourceMappingURL=code-block-DgHrBuR8.cjs.map
+//# sourceMappingURL=code-block-qe7OUAjF.cjs.map

package/dist/{code-block-DgHrBuR8.cjs.map → code-block-qe7OUAjF.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"code-block-DgHrBuR8.cjs","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      // A scrolling `pre` still reports its longest line as an intrinsic width, which\n      // grows every ancestor; containment keeps the block inside the width it is given.\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2 [contain:inline-size]',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"border-border2/40 flex items-center border-b px-4 py-2\">\n          <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"border-border2/40 flex items-center justify-end border-b px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-ui-sm text-neutral5',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":["code","jsxs","cn","jsx","Tabs","TabList","Tab","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Code","CopyButton","transitions"],"mappings":";;;;;;;;;;;AAoCO,SAAS,SAAA,CAAU;AAAA,QACxBA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA,GAAW,QAAA;AAAA,EACX,QAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA,GAAW,MAAA;AAAA,EACX,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,UAAA,GAAa,OAAA,IAAW,OAAA,CAAQ,MAAA,GAAS,CAAA;AAC/C,EAAA,MAAM,OAAA,GAAU,cAAc,QAAA,KAAa,MAAA;AAC3C,EAAA,MAAM,SAAA,GAAY,cAAc,QAAA,KAAa,QAAA;AAC7C,EAAA,MAAM,WAAA,GAAc,UAAU,CAAC,CAAA;AAC/B,EAAA,MAAM,WAAA,GAAc,SAAS,WAAA,EAAa,KAAA;AAE1C,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MAGC,SAAA,EAAWC,WAAA;AAAA,QACT,4HAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,WAAA,oBACVC,cAAA,CAACC,aAAA,EAAA,EAAK,UAAA,EAAY,WAAA,CAAY,OAAO,KAAA,EAAO,WAAA,EAAa,aAAA,EAAe,aAAA,KAAkB,MAAM;AAAA,QAAC,CAAA,CAAA,EAC/F,QAAA,kBAAAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oBAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,SAAI,SAAA,EAAU,gBAAA,EACb,yCAACE,gBAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,IAAI,CAAA,GAAA,qBACXF,cAAA,CAACG,eAAoB,KAAA,EAAO,GAAA,CAAI,OAC7B,QAAA,EAAA,GAAA,CAAI,KAAA,EAAA,EADG,IAAI,KAEd,CACD,GACH,CAAA,EACF,CAAA;AAAA,UACC,OAAA,oBAAWH,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gEAAgE,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EACrG,CAAA,EACF,CAAA;AAAA,QAGD,SAAA,IAAa,OAAA,oBACZF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,0DAAA,EACb,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAACM,aAAA,EAAA,EAAO,KAAA,EAAO,WAAA,EAAa,aAAA,EAC1B,QAAA,EAAA;AAAA,4BAAAJ,cAAA,CAACK,wBAAc,IAAA,EAAK,IAAA,EAAK,SAAQ,OAAA,EAC/B,QAAA,kBAAAL,cAAA,CAACM,sBAAY,CAAA,EACf,CAAA;AAAA,4BACAN,cAAA,CAACO,oBAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,yBACXP,cAAA,CAACQ,iBAAA,EAAA,EAA2B,KAAA,EAAO,GAAA,CAAI,OACpC,QAAA,EAAA,GAAA,CAAI,KAAA,EAAA,EADU,GAAA,CAAI,KAErB,CACD,CAAA,EACH;AAAA,WAAA,EACF,CAAA;AAAA,UACC,OAAA,oBAAWR,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAA6B,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EAClE,CAAA;AAAA,QAGD,CAAC,UAAA,IAAc,QAAA,oBACdF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wDAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,YAAA,EAAA,EAAW,SAAA,EAAU,oCAAA,EAAsC,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,UACpE,OAAA,oBAAWA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAA6B,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EAClE,CAAA;AAAA,QAGD,CAAC,cAAc,CAAC,QAAA,IAAY,2BAC3BA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sEAAA,EAAwE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBAGjGF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA;AAAA,YAACS,SAAA;AAAA,YAAA;AAAA,oBACCZ,MAAA;AAAA,cACA,IAAA;AAAA,cACA,SAAA,EAAWE,WAAA;AAAA,gBACT,8CAAA;AAAA,gBACA,QAAA,KAAa,WAAW,gCAAA,GAAmC;AAAA;AAC7D;AAAA,WACF;AAAA,0BACAC,cAAA;AAAA,YAACU,qBAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAASb,MAAA;AAAA,cACT,WAAA;AAAA,cACA,OAAA,EAAS,WAAA;AAAA,cACT,IAAA,EAAK,IAAA;AAAA,cACL,SAAA,EAAWE,WAAA;AAAA,gBACT,kHAAA;AAAA,gBACAY,kCAAA,CAAY;AAAA;AACd;AAAA;AACF,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"code-block-qe7OUAjF.cjs","sources":["../src/ds/components/CodeBlock/code-block.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Code } from '../Code/code';\nimport { CopyButton } from '../CopyButton/copy-button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/select';\nimport { TabList } from '../Tabs/tabs-list';\nimport { Tabs } from '../Tabs/tabs-root';\nimport { Tab } from '../Tabs/tabs-tab';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type CodeBlockSelector = 'select' | 'tabs';\n\nexport type CodeBlockOverflow = 'wrap' | 'scroll';\n\nexport interface CodeBlockOption {\n  label: string;\n  value: string;\n}\n\nexport interface CodeBlockProps {\n  code: string;\n  options?: CodeBlockOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  selector?: CodeBlockSelector;\n  fileName?: string;\n  lang?: string;\n  /** `wrap` (default) breaks long lines — best for commands and snippets.\n   *  `scroll` preserves columns behind a horizontal scroll — best for source code. */\n  overflow?: CodeBlockOverflow;\n  copyMessage?: string;\n  copyTooltip?: string;\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  options,\n  value,\n  onValueChange,\n  selector = 'select',\n  fileName,\n  lang,\n  overflow = 'wrap',\n  copyMessage,\n  copyTooltip,\n  actions,\n  className,\n}: CodeBlockProps) {\n  const hasOptions = options && options.length > 0;\n  const useTabs = hasOptions && selector === 'tabs';\n  const useSelect = hasOptions && selector === 'select';\n  const firstOption = options?.[0];\n  const activeValue = value ?? firstOption?.value;\n\n  return (\n    <figure\n      // A scrolling `pre` still reports its longest line as an intrinsic width, which\n      // grows every ancestor; containment keeps the block inside the width it is given.\n      className={cn(\n        'group relative flex w-full flex-col overflow-hidden rounded-2xl border border-border2/40 bg-surface2 [contain:inline-size]',\n        className,\n      )}\n    >\n      {useTabs && firstOption && (\n        <Tabs defaultTab={firstOption.value} value={activeValue} onValueChange={onValueChange ?? (() => {})}>\n          <div className=\"flex items-stretch\">\n            <div className=\"min-w-0 flex-1\">\n              <TabList>\n                {options.map(opt => (\n                  <Tab key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </div>\n            {actions && <div className=\"border-border1 flex shrink-0 items-center border-b pr-2 pl-3\">{actions}</div>}\n          </div>\n        </Tabs>\n      )}\n\n      {useSelect && options && (\n        <div className=\"border-border2/40 flex items-center border-b px-2 py-1.5\">\n          <Select value={activeValue} onValueChange={onValueChange}>\n            <SelectTrigger size=\"sm\" variant=\"ghost\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {options.map(opt => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && fileName && (\n        <div className=\"border-border2/40 flex items-center border-b px-4 py-2\">\n          <figcaption className=\"text-ui-sm text-neutral4 font-mono\">{fileName}</figcaption>\n          {actions && <div className=\"ml-auto flex items-center\">{actions}</div>}\n        </div>\n      )}\n\n      {!hasOptions && !fileName && actions && (\n        <div className=\"border-border2/40 flex items-center justify-end border-b px-2 py-1.5\">{actions}</div>\n      )}\n\n      <div className=\"relative\">\n        <Code\n          code={code}\n          lang={lang}\n          className={cn(\n            'px-4 py-3 font-mono text-ui-sm text-neutral5',\n            overflow === 'scroll' ? 'overflow-x-auto whitespace-pre' : 'break-all whitespace-pre-wrap',\n          )}\n        />\n        <CopyButton\n          content={code}\n          copyMessage={copyMessage}\n          tooltip={copyTooltip}\n          size=\"sm\"\n          className={cn(\n            'absolute top-2 right-2 opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 pointer-fine:opacity-0',\n            transitions.opacity,\n          )}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"names":["code","jsxs","cn","jsx","Tabs","TabList","Tab","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","Code","CopyButton","transitions"],"mappings":"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"}

package/dist/components/CodeBlock.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const codeBlock = require('../code-block-DgHrBuR8.cjs');
+const codeBlock = require('../code-block-qe7OUAjF.cjs');
 
 
 

package/dist/components/CodeBlock.es.js

@@ -1,2 +1,2 @@
-export { C as CodeBlock } from '../code-block-DeksY23p.js';
+export { C as CodeBlock } from '../code-block-CKowdtY1.js';
 //# sourceMappingURL=CodeBlock.es.js.map

package/dist/components/LogsDataList.cjs.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const logsDataList = require('../logs-data-list-BcPdFb2K.cjs');
 const dataListSkeleton = require('../data-list-skeleton-7eKxso9c.cjs');
+require('react');
 
 
 

package/dist/components/LogsDataList.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogsDataList.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"LogsDataList.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/components/LogsDataList.es.js

@@ -1,3 +1,4 @@
 export { L as LogsDataList } from '../logs-data-list-D7NBF4iw.js';
 export { D as LogsDataListSkeleton } from '../data-list-skeleton-CbjuDDK_.js';
+import 'react';
 //# sourceMappingURL=LogsDataList.es.js.map

package/dist/components/LogsDataList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogsDataList.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"LogsDataList.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/MarkdownRenderer.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const markdownRenderer = require('../markdown-renderer-GVtZLunG.cjs');
+const markdownRenderer = require('../markdown-renderer-CI43GQqh.cjs');
 const useReveal = require('../use-reveal-Sa456jZb.cjs');
 
 

package/dist/components/MarkdownRenderer.es.js

@@ -1,3 +1,3 @@
-export { M as MarkdownRenderer } from '../markdown-renderer-CaFpZTFS.js';
+export { M as MarkdownRenderer } from '../markdown-renderer-E_2ewUDs.js';
 export { u as useRevealedText } from '../use-reveal-d77hxHz9.js';
 //# sourceMappingURL=MarkdownRenderer.es.js.map

package/dist/components/Tabs.cjs.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const tabsRoot = require('../tabs-root-BNcLC-s6.cjs');
-const tabsTab = require('../tabs-tab-Ha0C9Dv3.cjs');
-const tabsContent = require('../tabs-content-BxToGCDw.cjs');
+const tabsRoot = require('../tabs-root-dbq4ph7H.cjs');
+const tabsTab = require('../tabs-tab-Box-WPFr.cjs');
+const tabsContent = require('../tabs-content-DktkvjQq.cjs');
 
 
 

package/dist/components/Tabs.es.js

@@ -1,4 +1,4 @@
-export { T as TabList, a as Tabs } from '../tabs-root-BnwVjJbD.js';
-export { T as Tab } from '../tabs-tab-Qlfs2X2g.js';
-export { T as TabContent } from '../tabs-content-CLgmU6S_.js';
+export { T as TabList, a as Tabs } from '../tabs-root-DP_5NGAv.js';
+export { T as Tab } from '../tabs-tab-BIloVjDS.js';
+export { T as TabContent } from '../tabs-content-CO1aqUws.js';
 //# sourceMappingURL=Tabs.es.js.map

package/dist/components/ai/plan.cjs.js

@@ -7,7 +7,7 @@ const lucideReact = require('lucide-react');
 const React = require('react');
 const Badge = require('../../Badge-uc0ydYdy.cjs');
 const Button = require('../../Button-D10WB4vc.cjs');
-const markdownRenderer = require('../../markdown-renderer-GVtZLunG.cjs');
+const markdownRenderer = require('../../markdown-renderer-CI43GQqh.cjs');
 const Txt = require('../../Txt-D5Y_H2a0.cjs');
 const icons_Icon = require('../../icons/Icon.cjs.js');
 const hooks_useCopyToClipboard = require('../../hooks/use-copy-to-clipboard.cjs.js');

package/dist/components/ai/plan.es.js

@@ -3,7 +3,7 @@ import { CheckIcon, CopyIcon, Minimize2, Maximize2, ClipboardList } from 'lucide
 import { useState, useRef, useLayoutEffect, createContext, useContext } from 'react';
 import { B as Badge } from '../../Badge-CvgvWjuP.js';
 import { B as Button } from '../../Button-BsfLQEC6.js';
-import { M as MarkdownRenderer } from '../../markdown-renderer-CaFpZTFS.js';
+import { M as MarkdownRenderer } from '../../markdown-renderer-E_2ewUDs.js';
 import { T as Txt } from '../../Txt-ByUf-9Ic.js';
 import { Icon } from '../../icons/Icon.es.js';
 import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard.es.js';

package/dist/components/ai/tool-call.cjs.js

@@ -12,7 +12,7 @@ const shimmer = require('../../shimmer-BH6aBatG.cjs');
 const Txt = require('../../Txt-D5Y_H2a0.cjs');
 const utils_cn = require('../../cn-DCPcv4xv.cjs');
 const code = require('../../code-DhrdtZce.cjs');
-const codeBlock = require('../../code-block-DgHrBuR8.cjs');
+const codeBlock = require('../../code-block-qe7OUAjF.cjs');
 const highlight = require('../../highlight-DK1dn-Fh.cjs');
 const utils_truncateString = require('../../utils/truncate-string.cjs.js');
 const scrollArea = require('../../scroll-area-B1vdOFuC.cjs');

package/dist/components/ai/tool-call.es.js

@@ -8,7 +8,7 @@ import { S as Shimmer } from '../../shimmer-DV3ZgmuP.js';
 import { T as Txt } from '../../Txt-ByUf-9Ic.js';
 import { c as cn } from '../../cn-B4oPhFx9.js';
 import { u as useHighlight, t as tokenStyle } from '../../code-D4Vw_fYq.js';
-import { C as CodeBlock } from '../../code-block-DeksY23p.js';
+import { C as CodeBlock } from '../../code-block-CKowdtY1.js';
 import { l as languageForPath } from '../../highlight-BmpoELR4.js';
 import { truncateString } from '../../utils/truncate-string.es.js';
 import { S as ScrollArea } from '../../scroll-area-BiHnOfzg.js';

package/dist/domains/metrics/components/latency-card-view.cjs.js

@@ -6,9 +6,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const metricsCard = require('../../../metrics-card-B8zgHlgB.cjs');
 const metricsLineChart = require('../../../metrics-line-chart-j6C2H3K1.cjs');
-const tabsContent = require('../../../tabs-content-BxToGCDw.cjs');
-const tabsRoot = require('../../../tabs-root-BNcLC-s6.cjs');
-const tabsTab = require('../../../tabs-tab-Ha0C9Dv3.cjs');
+const tabsContent = require('../../../tabs-content-DktkvjQq.cjs');
+const tabsRoot = require('../../../tabs-root-dbq4ph7H.cjs');
+const tabsTab = require('../../../tabs-tab-Box-WPFr.cjs');
 const domains_metrics_components_latencyCardView_utils = require('./latency-card-view.utils.cjs.js');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 

package/dist/domains/metrics/components/latency-card-view.es.js

@@ -2,9 +2,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { M as MetricsCard } from '../../../metrics-card-BKE1UzWh.js';
 import { M as MetricsLineChart } from '../../../metrics-line-chart-DNCs_ZF3.js';
-import { T as TabContent } from '../../../tabs-content-CLgmU6S_.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BnwVjJbD.js';
-import { T as Tab } from '../../../tabs-tab-Qlfs2X2g.js';
+import { T as TabContent } from '../../../tabs-content-CO1aqUws.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-DP_5NGAv.js';
+import { T as Tab } from '../../../tabs-tab-BIloVjDS.js';
 import { isLatencyTab, isDrillablePoint, averageLatency } from './latency-card-view.utils.es.js';
 import { CHART_COLORS } from './metrics-utils.es.js';
 

package/dist/domains/metrics/components/memory-card-view.cjs.js

@@ -6,9 +6,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const dataList = require('../../../data-list-DWOT5t0J.cjs');
 const metricsCard = require('../../../metrics-card-B8zgHlgB.cjs');
-const tabsContent = require('../../../tabs-content-BxToGCDw.cjs');
-const tabsRoot = require('../../../tabs-root-BNcLC-s6.cjs');
-const tabsTab = require('../../../tabs-tab-Ha0C9Dv3.cjs');
+const tabsContent = require('../../../tabs-content-DktkvjQq.cjs');
+const tabsRoot = require('../../../tabs-root-dbq4ph7H.cjs');
+const tabsTab = require('../../../tabs-tab-Box-WPFr.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 
 function isMemoryTab(value) {

package/dist/domains/metrics/components/memory-card-view.es.js

@@ -2,9 +2,9 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { D as DataList } from '../../../data-list-BiEEjaEy.js';
 import { M as MetricsCard } from '../../../metrics-card-BKE1UzWh.js';
-import { T as TabContent } from '../../../tabs-content-CLgmU6S_.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BnwVjJbD.js';
-import { T as Tab } from '../../../tabs-tab-Qlfs2X2g.js';
+import { T as TabContent } from '../../../tabs-content-CO1aqUws.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-DP_5NGAv.js';
+import { T as Tab } from '../../../tabs-tab-BIloVjDS.js';
 import { METRICS_DATA_LIST_PROPS, formatCompact, formatCost } from './metrics-utils.es.js';
 
 function isMemoryTab(value) {

package/dist/domains/metrics/components/scores-card-view.cjs.js

@@ -7,9 +7,9 @@ const React = require('react');
 const dataList = require('../../../data-list-DWOT5t0J.cjs');
 const metricsCard = require('../../../metrics-card-B8zgHlgB.cjs');
 const metricsLineChart = require('../../../metrics-line-chart-j6C2H3K1.cjs');
-const tabsContent = require('../../../tabs-content-BxToGCDw.cjs');
-const tabsRoot = require('../../../tabs-root-BNcLC-s6.cjs');
-const tabsTab = require('../../../tabs-tab-Ha0C9Dv3.cjs');
+const tabsContent = require('../../../tabs-content-DktkvjQq.cjs');
+const tabsRoot = require('../../../tabs-root-dbq4ph7H.cjs');
+const tabsTab = require('../../../tabs-tab-Box-WPFr.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 
 const SERIES_COLORS = [

package/dist/domains/metrics/components/scores-card-view.es.js

@@ -3,9 +3,9 @@ import { useMemo } from 'react';
 import { D as DataList } from '../../../data-list-BiEEjaEy.js';
 import { M as MetricsCard } from '../../../metrics-card-BKE1UzWh.js';
 import { M as MetricsLineChart } from '../../../metrics-line-chart-DNCs_ZF3.js';
-import { T as TabContent } from '../../../tabs-content-CLgmU6S_.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BnwVjJbD.js';
-import { T as Tab } from '../../../tabs-tab-Qlfs2X2g.js';
+import { T as TabContent } from '../../../tabs-content-CO1aqUws.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-DP_5NGAv.js';
+import { T as Tab } from '../../../tabs-tab-BIloVjDS.js';
 import { CHART_COLORS, METRICS_DATA_LIST_PROPS } from './metrics-utils.es.js';
 
 const SERIES_COLORS = [

package/dist/domains/metrics/components/token-usage-by-agent-card-view.cjs.js

@@ -6,9 +6,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const horizontalBars = require('../../../horizontal-bars-Dgq3PYsg.cjs');
 const metricsCard = require('../../../metrics-card-B8zgHlgB.cjs');
-const tabsContent = require('../../../tabs-content-BxToGCDw.cjs');
-const tabsRoot = require('../../../tabs-root-BNcLC-s6.cjs');
-const tabsTab = require('../../../tabs-tab-Ha0C9Dv3.cjs');
+const tabsContent = require('../../../tabs-content-DktkvjQq.cjs');
+const tabsRoot = require('../../../tabs-root-dbq4ph7H.cjs');
+const tabsTab = require('../../../tabs-tab-Box-WPFr.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 
 function isTokenUsageTab(value) {

package/dist/domains/metrics/components/token-usage-by-agent-card-view.es.js

@@ -2,9 +2,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { H as HorizontalBars } from '../../../horizontal-bars-CyP-B-BX.js';
 import { M as MetricsCard } from '../../../metrics-card-BKE1UzWh.js';
-import { T as TabContent } from '../../../tabs-content-CLgmU6S_.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BnwVjJbD.js';
-import { T as Tab } from '../../../tabs-tab-Qlfs2X2g.js';
+import { T as TabContent } from '../../../tabs-content-CO1aqUws.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-DP_5NGAv.js';
+import { T as Tab } from '../../../tabs-tab-BIloVjDS.js';
 import { formatCost, formatCompact, CHART_COLORS } from './metrics-utils.es.js';
 
 function isTokenUsageTab(value) {

package/dist/domains/metrics/components/token-usage-timeline-card-view.cjs.js

@@ -6,9 +6,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const metricsCard = require('../../../metrics-card-B8zgHlgB.cjs');
 const metricsLineChart = require('../../../metrics-line-chart-j6C2H3K1.cjs');
-const tabsRoot = require('../../../tabs-root-BNcLC-s6.cjs');
-const tabsTab = require('../../../tabs-tab-Ha0C9Dv3.cjs');
-const tabsContent = require('../../../tabs-content-BxToGCDw.cjs');
+const tabsRoot = require('../../../tabs-root-dbq4ph7H.cjs');
+const tabsTab = require('../../../tabs-tab-Box-WPFr.cjs');
+const tabsContent = require('../../../tabs-content-DktkvjQq.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 
 function sumMetric(dataKey, formatter = domains_metrics_components_metricsUtils.formatCompact) {

package/dist/domains/metrics/components/token-usage-timeline-card-view.es.js

@@ -2,9 +2,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { M as MetricsCard } from '../../../metrics-card-BKE1UzWh.js';
 import { M as MetricsLineChart } from '../../../metrics-line-chart-DNCs_ZF3.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BnwVjJbD.js';
-import { T as Tab } from '../../../tabs-tab-Qlfs2X2g.js';
-import { T as TabContent } from '../../../tabs-content-CLgmU6S_.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-DP_5NGAv.js';
+import { T as Tab } from '../../../tabs-tab-BIloVjDS.js';
+import { T as TabContent } from '../../../tabs-content-CO1aqUws.js';
 import { CHART_COLORS, formatCompact, formatCost } from './metrics-utils.es.js';
 
 function sumMetric(dataKey, formatter = formatCompact) {

package/dist/domains/metrics/components/traces-volume-card-view.cjs.js

@@ -6,9 +6,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const horizontalBars = require('../../../horizontal-bars-Dgq3PYsg.cjs');
 const metricsCard = require('../../../metrics-card-B8zgHlgB.cjs');
-const tabsContent = require('../../../tabs-content-BxToGCDw.cjs');
-const tabsRoot = require('../../../tabs-root-BNcLC-s6.cjs');
-const tabsTab = require('../../../tabs-tab-Ha0C9Dv3.cjs');
+const tabsContent = require('../../../tabs-content-DktkvjQq.cjs');
+const tabsRoot = require('../../../tabs-root-dbq4ph7H.cjs');
+const tabsTab = require('../../../tabs-tab-Box-WPFr.cjs');
 const domains_metrics_components_metricsUtils = require('./metrics-utils.cjs.js');
 
 function VolumeBars({

package/dist/domains/metrics/components/traces-volume-card-view.es.js

@@ -2,9 +2,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { H as HorizontalBars } from '../../../horizontal-bars-CyP-B-BX.js';
 import { M as MetricsCard } from '../../../metrics-card-BKE1UzWh.js';
-import { T as TabContent } from '../../../tabs-content-CLgmU6S_.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BnwVjJbD.js';
-import { T as Tab } from '../../../tabs-tab-Qlfs2X2g.js';
+import { T as TabContent } from '../../../tabs-content-CO1aqUws.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-DP_5NGAv.js';
+import { T as Tab } from '../../../tabs-tab-BIloVjDS.js';
 import { formatCompact, CHART_COLORS } from './metrics-utils.es.js';
 
 function VolumeBars({

package/dist/domains/traces/components/span-data-panel-view.cjs.js

@@ -11,9 +11,9 @@ const buttonsGroup = require('../../../buttons-group-Cn36DWYX.cjs');
 const dataKeysAndValues = require('../../../data-keys-and-values-D1M0xPEy.cjs');
 const dataPanel = require('../../../data-panel-Cv9j_IGQ.cjs');
 const Notice = require('../../../Notice-D_ji361h.cjs');
-const tabsRoot = require('../../../tabs-root-BNcLC-s6.cjs');
-const tabsTab = require('../../../tabs-tab-Ha0C9Dv3.cjs');
-const tabsContent = require('../../../tabs-content-BxToGCDw.cjs');
+const tabsRoot = require('../../../tabs-root-dbq4ph7H.cjs');
+const tabsTab = require('../../../tabs-tab-Box-WPFr.cjs');
+const tabsContent = require('../../../tabs-content-DktkvjQq.cjs');
 const utils_truncateString = require('../../../utils/truncate-string.cjs.js');
 
 function buildDialogTitle(sectionTitle, icon, span) {

package/dist/domains/traces/components/span-data-panel-view.es.js

@@ -7,9 +7,9 @@ import { B as ButtonsGroup } from '../../../buttons-group-BjM12HPx.js';
 import { D as DataKeysAndValues } from '../../../data-keys-and-values-PKPzfxve.js';
 import { D as DataPanel } from '../../../data-panel-DXxeSnL1.js';
 import { N as Notice } from '../../../Notice-DSUAUUYU.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-BnwVjJbD.js';
-import { T as Tab } from '../../../tabs-tab-Qlfs2X2g.js';
-import { T as TabContent } from '../../../tabs-content-CLgmU6S_.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-DP_5NGAv.js';
+import { T as Tab } from '../../../tabs-tab-BIloVjDS.js';
+import { T as TabContent } from '../../../tabs-content-CO1aqUws.js';
 import { truncateString } from '../../../utils/truncate-string.es.js';
 
 function buildDialogTitle(sectionTitle, icon, span) {

package/dist/domains/traces/components/timeline-name-col.cjs.js

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
 const domains_traces_components_timelineStructureSign = require('./timeline-structure-sign.cjs.js');
 const utils_cn = require('../../../cn-DCPcv4xv.cjs');
 
-const revealRow = (node) => {
-  node?.scrollIntoView({ block: "nearest" });
-};
 function TimelineNameCol({
   span,
   spanUI,
@@ -16,16 +14,23 @@ function TimelineNameCol({
   depth = 0,
   onSpanClick,
   selectedSpanId,
+  revealSpanId,
   isLastChild,
   hasChildren: _hasChildren,
   isRootSpan,
   isExpanded: _isExpanded
 }) {
+  const rowRef = React.useRef(null);
   const isSelected = selectedSpanId === span.id;
+  const isRevealed = revealSpanId === span.id;
+  const shouldScrollIntoView = isSelected || isRevealed;
+  React.useEffect(() => {
+    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [shouldScrollIntoView]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: isSelected ? revealRow : void 0,
+      ref: rowRef,
       "aria-label": `View details for span ${span.name}`,
       className: utils_cn.cn("flex min-h-8 items-center rounded-md rounded-l-lg opacity-80", {
         "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,

package/dist/domains/traces/components/timeline-name-col.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-name-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n};\n\n// Nested rows mount late, once expansion opens their ancestors.\nconst revealRow = (node: HTMLDivElement | null) => {\n  node?.scrollIntoView({ block: 'nearest' });\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  isLastChild,\n  hasChildren: _hasChildren,\n  isRootSpan,\n  isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n  const isSelected = selectedSpanId === span.id;\n\n  return (\n    <div\n      ref={isSelected ? revealRow : undefined}\n      aria-label={`View details for span ${span.name}`}\n      className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n        'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n        'bg-surface4': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        onClick={() => onSpanClick?.(span.id)}\n        className={cn(\n          'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n          '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n          'hover:bg-surface4 [&:hover>svg]:opacity-60',\n          'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        <span\n          data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n          data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n          title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n          className=\"min-w-0 truncate\"\n        >\n          {span.name}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","TimelineStructureSign"],"mappings":";;;;;;;;AAkBA,MAAM,SAAA,GAAY,CAAC,IAAA,KAAgC;AACjD,EAAA,IAAA,EAAM,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,CAAA;AAC3C,CAAA;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAE3C,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,aAAa,SAAA,GAAY,MAAA;AAAA,MAC9B,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAWC,YAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAcC,cAAA,CAACC,qEAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjEH,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAWC,WAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACPC,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKFA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,kBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,kBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,kBAClF,SAAA,EAAU,kBAAA;AAAA,kBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"timeline-name-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren: _hasChildren,\n  isRootSpan,\n  isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n        'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n        'bg-surface4': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        onClick={() => onSpanClick?.(span.id)}\n        className={cn(\n          'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n          '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n          'hover:bg-surface4 [&:hover>svg]:opacity-60',\n          'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        <span\n          data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n          data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n          title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n          className=\"min-w-0 truncate\"\n        >\n          {span.name}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsxs","cn","jsx","TimelineStructureSign"],"mappings":";;;;;;;;;AAmBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAASA,aAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,iBAAiB,IAAA,CAAK,EAAA;AACzC,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAI3C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAA,SAA6B,OAAA,EAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACnG,CAAA,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAWC,YAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAcC,cAAA,CAACC,qEAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjEH,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAWC,WAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACPC,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKFA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,kBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,kBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,kBAClF,SAAA,EAAU,kBAAA;AAAA,kBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/domains/traces/components/timeline-name-col.es.js

@@ -1,10 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
 import { TimelineStructureSign } from './timeline-structure-sign.es.js';
 import { c as cn } from '../../../cn-B4oPhFx9.js';
 
-const revealRow = (node) => {
-  node?.scrollIntoView({ block: "nearest" });
-};
 function TimelineNameCol({
   span,
   spanUI,
@@ -12,16 +10,23 @@ function TimelineNameCol({
   depth = 0,
   onSpanClick,
   selectedSpanId,
+  revealSpanId,
   isLastChild,
   hasChildren: _hasChildren,
   isRootSpan,
   isExpanded: _isExpanded
 }) {
+  const rowRef = useRef(null);
   const isSelected = selectedSpanId === span.id;
+  const isRevealed = revealSpanId === span.id;
+  const shouldScrollIntoView = isSelected || isRevealed;
+  useEffect(() => {
+    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [shouldScrollIntoView]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: isSelected ? revealRow : void 0,
+      ref: rowRef,
       "aria-label": `View details for span ${span.name}`,
       className: cn("flex min-h-8 items-center rounded-md rounded-l-lg opacity-80", {
         "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,

package/dist/domains/traces/components/timeline-name-col.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-name-col.es.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n};\n\n// Nested rows mount late, once expansion opens their ancestors.\nconst revealRow = (node: HTMLDivElement | null) => {\n  node?.scrollIntoView({ block: 'nearest' });\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  isLastChild,\n  hasChildren: _hasChildren,\n  isRootSpan,\n  isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n  const isSelected = selectedSpanId === span.id;\n\n  return (\n    <div\n      ref={isSelected ? revealRow : undefined}\n      aria-label={`View details for span ${span.name}`}\n      className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n        'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n        'bg-surface4': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        onClick={() => onSpanClick?.(span.id)}\n        className={cn(\n          'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n          '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n          'hover:bg-surface4 [&:hover>svg]:opacity-60',\n          'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        <span\n          data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n          data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n          title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n          className=\"min-w-0 truncate\"\n        >\n          {span.name}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAkBA,MAAM,SAAA,GAAY,CAAC,IAAA,KAAgC;AACjD,EAAA,IAAA,EAAM,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,CAAA;AAC3C,CAAA;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAE3C,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,aAAa,SAAA,GAAY,MAAA;AAAA,MAC9B,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAW,GAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAc,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAW,EAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACP,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKF,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,kBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,kBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,kBAClF,SAAA,EAAU,kBAAA;AAAA,kBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"timeline-name-col.es.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren: _hasChildren,\n  isRootSpan,\n  isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n        'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n        'bg-surface4': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        onClick={() => onSpanClick?.(span.id)}\n        className={cn(\n          'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n          '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n          'hover:bg-surface4 [&:hover>svg]:opacity-60',\n          'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        <span\n          data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n          data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n          title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n          className=\"min-w-0 truncate\"\n        >\n          {span.name}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAmBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,iBAAiB,IAAA,CAAK,EAAA;AACzC,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAI3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAA,SAA6B,OAAA,EAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACnG,CAAA,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAW,GAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAc,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAW,EAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACP,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKF,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,kBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,kBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,kBAClF,SAAA,EAAU,kBAAA;AAAA,kBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/domains/traces/components/trace-data-panel-view.cjs.js

@@ -17,9 +17,9 @@ const dataPanel = require('../../../data-panel-Cv9j_IGQ.cjs');
 const dropdownMenu = require('../../../dropdown-menu-qsDhHNES.cjs');
 const searchFieldBlock = require('../../../search-field-block-CiinIsub.cjs');
 const Notice = require('../../../Notice-D_ji361h.cjs');
-const tabsRoot = require('../../../tabs-root-BNcLC-s6.cjs');
-const tabsTab = require('../../../tabs-tab-Ha0C9Dv3.cjs');
-const tabsContent = require('../../../tabs-content-BxToGCDw.cjs');
+const tabsRoot = require('../../../tabs-root-dbq4ph7H.cjs');
+const tabsTab = require('../../../tabs-tab-Box-WPFr.cjs');
+const tabsContent = require('../../../tabs-content-DktkvjQq.cjs');
 const hooks_useScrollToFirstHighlight = require('../../../hooks/use-scroll-to-first-highlight.cjs.js');
 const hooks_useTextHighlight = require('../../../hooks/use-text-highlight.cjs.js');
 const utils_truncateString = require('../../../utils/truncate-string.cjs.js');