@mastra/playground-ui 56.0.0 → 57.0.0-alpha.1

package/dist/{settings-layout-C80s-D31.js → settings-layout-DA-JWqW3.js}

@@ -23,7 +23,7 @@ function SettingsLayout({
         children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-wrap items-start justify-between gap-4", inset && "pl-4"), children: [
           /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-2", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "heading", tone: "muted", className: "font-body min-w-0 truncate tracking-normal", children: title }),
+              /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "heading", tone: "muted", className: "min-w-0 truncate font-body tracking-normal", children: title }),
               titleAccessory !== void 0 && titleAccessory !== null ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: titleAccessory }) : null
             ] }),
             description !== void 0 && description !== null ? /* @__PURE__ */ jsx(Txt, { as: "p", variant: "body", tone: "muted", className: "m-0 wrap-break-word", children: description }) : null
@@ -44,4 +44,4 @@ function SettingsLayout({
 }
 
 export { SettingsLayout as S };
-//# sourceMappingURL=settings-layout-C80s-D31.js.map
+//# sourceMappingURL=settings-layout-DA-JWqW3.js.map

package/dist/{settings-layout-C80s-D31.js.map → settings-layout-DA-JWqW3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"settings-layout-C80s-D31.js","sources":["../src/ds/components/SettingsLayout/settings-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface SettingsLayoutProps {\n  title?: ReactNode;\n  titleAccessory?: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  inset?: boolean;\n  variant?: 'default' | 'header';\n  children: ReactNode;\n}\n\nexport function SettingsLayout({\n  title,\n  titleAccessory,\n  description,\n  action,\n  inset = false,\n  variant,\n  children,\n}: SettingsLayoutProps) {\n  if (title === undefined || title === null) {\n    return variant === 'header' ? (\n      children\n    ) : (\n      <div data-slot=\"settings-layout-content\" className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5\">\n        <div className=\"min-w-0 space-y-8\">{children}</div>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div\n        data-slot=\"settings-page-header\"\n        className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-5 pb-0 sm:pt-6\"\n      >\n        <div className={cn('flex min-w-0 flex-wrap items-start justify-between gap-4', inset && 'pl-4')}>\n          <div className=\"grid min-w-0 gap-2\">\n            <div className=\"flex min-w-0 items-center gap-2\">\n              <Txt as=\"h1\" variant=\"heading\" tone=\"muted\" className=\"font-body min-w-0 truncate tracking-normal\">\n                {title}\n              </Txt>\n              {titleAccessory !== undefined && titleAccessory !== null ? (\n                <div className=\"shrink-0\">{titleAccessory}</div>\n              ) : null}\n            </div>\n            {description !== undefined && description !== null ? (\n              <Txt as=\"p\" variant=\"body\" tone=\"muted\" className=\"m-0 wrap-break-word\">\n                {description}\n              </Txt>\n            ) : null}\n          </div>\n          {action ? <div className=\"shrink-0\">{action}</div> : null}\n        </div>\n      </div>\n      {variant === 'header' ? (\n        children\n      ) : (\n        <div\n          data-slot=\"settings-layout-content\"\n          className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5\"\n        >\n          <div className=\"min-w-0 space-y-6\">{children}</div>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAcO,SAAS,cAAA,CAAe;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,GAAQ,KAAA;AAAA,EACR,OAAA;AAAA,EACA;AACF,CAAA,EAAwB;AACtB,EAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,OAAA,KAAY,QAAA,GACjB,QAAA,mBAEA,GAAA,CAAC,SAAI,WAAA,EAAU,yBAAA,EAA0B,SAAA,EAAU,8DAAA,EACjD,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,UAAS,CAAA,EAC/C,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,SAAA,EAAU,yEAAA;AAAA,QAEV,+BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,0DAAA,EAA4D,KAAA,IAAS,MAAM,CAAA,EAC5F,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iCAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,GAAA,EAAA,EAAI,IAAG,IAAA,EAAK,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,4CAAA,EACnD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,cACC,cAAA,KAAmB,UAAa,cAAA,KAAmB,IAAA,uBACjD,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,cAAA,EAAe,CAAA,GACxC;AAAA,aAAA,EACN,CAAA;AAAA,YACC,WAAA,KAAgB,MAAA,IAAa,WAAA,KAAgB,IAAA,uBAC3C,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,QAAO,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,qBAAA,EAC/C,uBACH,CAAA,GACE;AAAA,WAAA,EACN,CAAA;AAAA,UACC,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA,SAAA,EACvD;AAAA;AAAA,KACF;AAAA,IACC,OAAA,KAAY,WACX,QAAA,mBAEA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAU,8DAAA;AAAA,QAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,QAAA,EAAS;AAAA;AAAA;AAC/C,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"settings-layout-DA-JWqW3.js","sources":["../src/ds/components/SettingsLayout/settings-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Txt } from '../Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface SettingsLayoutProps {\n  title?: ReactNode;\n  titleAccessory?: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  inset?: boolean;\n  variant?: 'default' | 'header';\n  children: ReactNode;\n}\n\nexport function SettingsLayout({\n  title,\n  titleAccessory,\n  description,\n  action,\n  inset = false,\n  variant,\n  children,\n}: SettingsLayoutProps) {\n  if (title === undefined || title === null) {\n    return variant === 'header' ? (\n      children\n    ) : (\n      <div data-slot=\"settings-layout-content\" className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5\">\n        <div className=\"min-w-0 space-y-8\">{children}</div>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div\n        data-slot=\"settings-page-header\"\n        className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-clip px-4 pt-5 pb-0 sm:pt-6\"\n      >\n        <div className={cn('flex min-w-0 flex-wrap items-start justify-between gap-4', inset && 'pl-4')}>\n          <div className=\"grid min-w-0 gap-2\">\n            <div className=\"flex min-w-0 items-center gap-2\">\n              <Txt as=\"h1\" variant=\"heading\" tone=\"muted\" className=\"min-w-0 truncate font-body tracking-normal\">\n                {title}\n              </Txt>\n              {titleAccessory !== undefined && titleAccessory !== null ? (\n                <div className=\"shrink-0\">{titleAccessory}</div>\n              ) : null}\n            </div>\n            {description !== undefined && description !== null ? (\n              <Txt as=\"p\" variant=\"body\" tone=\"muted\" className=\"m-0 wrap-break-word\">\n                {description}\n              </Txt>\n            ) : null}\n          </div>\n          {action ? <div className=\"shrink-0\">{action}</div> : null}\n        </div>\n      </div>\n      {variant === 'header' ? (\n        children\n      ) : (\n        <div\n          data-slot=\"settings-layout-content\"\n          className=\"mx-auto w-full max-w-5xl min-w-0 overflow-x-hidden px-4 py-5\"\n        >\n          <div className=\"min-w-0 space-y-6\">{children}</div>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAcO,SAAS,cAAA,CAAe;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA,GAAQ,KAAA;AAAA,EACR,OAAA;AAAA,EACA;AACF,CAAA,EAAwB;AACtB,EAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,OAAA,KAAY,QAAA,GACjB,QAAA,mBAEA,GAAA,CAAC,SAAI,WAAA,EAAU,yBAAA,EAA0B,SAAA,EAAU,8DAAA,EACjD,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,UAAS,CAAA,EAC/C,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,SAAA,EAAU,yEAAA;AAAA,QAEV,+BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,0DAAA,EAA4D,KAAA,IAAS,MAAM,CAAA,EAC5F,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iCAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,GAAA,EAAA,EAAI,IAAG,IAAA,EAAK,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,4CAAA,EACnD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,cACC,cAAA,KAAmB,UAAa,cAAA,KAAmB,IAAA,uBACjD,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,cAAA,EAAe,CAAA,GACxC;AAAA,aAAA,EACN,CAAA;AAAA,YACC,WAAA,KAAgB,MAAA,IAAa,WAAA,KAAgB,IAAA,uBAC3C,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,QAAO,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,qBAAA,EAC/C,uBACH,CAAA,GACE;AAAA,WAAA,EACN,CAAA;AAAA,UACC,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA,SAAA,EACvD;AAAA;AAAA,KACF;AAAA,IACC,OAAA,KAAY,WACX,QAAA,mBAEA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAU,8DAAA;AAAA,QAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,QAAA,EAAS;AAAA;AAAA;AAC/C,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/{span-payload-primitives-DnRsP93D.cjs → span-payload-primitives-70wznWZl.cjs}

@@ -3,10 +3,10 @@
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_traces_components_spanPayload_spanPayloadJson = require('./domains/traces/components/span-payload/span-payload-json.cjs.js');
-const collapsible = require('./collapsible-BvrI6XnN.cjs');
-const markdownRenderer = require('./markdown-renderer-D8qYAU7K.cjs');
+const collapsible = require('./collapsible-BFSJouuI.cjs');
+const markdownRenderer = require('./markdown-renderer-C74wABzc.cjs');
 const domains_chat_components_badgeWrapper = require('./domains/chat/components/badge-wrapper.cjs.js');
-const toolCall = require('./tool-call-CMRvRE-v.cjs');
+const toolCall = require('./tool-call-CNBGnCmO.cjs');
 const toolPresentation = require('./tool-presentation-BGWx2mEc.cjs');
 
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
@@ -38,7 +38,7 @@ function SpanPayloadTool({ value, showLabel = true }) {
 }
 
 function SpanPayloadLabel({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-meta text-placeholder tracking-widest uppercase", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-meta tracking-widest text-placeholder uppercase", children });
 }
 function SpanPayloadField({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "span-payload-field", className: "flex flex-col gap-1.5", children: [
@@ -55,7 +55,7 @@ function SpanPayloadCollapsible({
   defaultOpen = false
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(collapsible.Collapsible, { defaultOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(collapsible.CollapsibleTrigger, { className: "text-meta text-placeholder flex items-center gap-1 tracking-widest uppercase [&>svg]:size-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(collapsible.CollapsibleTrigger, { className: "flex items-center gap-1 text-meta tracking-widest text-placeholder uppercase [&>svg]:size-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {}),
       label
     ] }),
@@ -72,4 +72,4 @@ exports.SpanPayloadLabel = SpanPayloadLabel;
 exports.SpanPayloadMarkdown = SpanPayloadMarkdown;
 exports.SpanPayloadTool = SpanPayloadTool;
 exports.SpanPayloadToolCalls = SpanPayloadToolCalls;
-//# sourceMappingURL=span-payload-primitives-DnRsP93D.cjs.map
+//# sourceMappingURL=span-payload-primitives-70wznWZl.cjs.map

package/dist/{span-payload-primitives-DnRsP93D.cjs.map → span-payload-primitives-70wznWZl.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"span-payload-primitives-DnRsP93D.cjs","sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField, SpanPayloadLabel } from './span-payload-primitives';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ToolCallPresentedHeader } from '@/ds/components/ai/tool-call';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nexport function SpanPayloadTool({ value, showLabel = true }: { value: unknown; showLabel?: boolean }) {\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      {showLabel && <SpanPayloadLabel>{value.type === 'tool-result' ? 'Tool result' : 'Tool call'}</SpanPayloadLabel>}\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={<ToolCallPresentedHeader {...presentTool(call.toolName, input)} />}\n      >\n        <div className=\"flex flex-col gap-3\">\n          {input !== undefined && (\n            <SpanPayloadField label=\"Arguments\">\n              <SpanPayloadJson value={input} />\n            </SpanPayloadField>\n          )}\n          {output !== undefined && (\n            <SpanPayloadField label=\"Result\">\n              <SpanPayloadJson value={output} />\n            </SpanPayloadField>\n          )}\n          {errorText !== undefined && (\n            <SpanPayloadField label=\"Error\">\n              <SpanPayloadJson value={errorText} />\n            </SpanPayloadField>\n          )}\n        </div>\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return <div className=\"text-meta text-placeholder tracking-widest uppercase\">{children}</div>;\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-body text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"text-meta text-placeholder flex items-center gap-1 tracking-widest uppercase [&>svg]:size-3\">\n        <ChevronRightIcon />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} showLabel={false} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"names":["jsx","SpanPayloadJson","jsxs","BadgeWrapper","ToolCallPresentedHeader","presentTool","MarkdownRenderer","Collapsible","CollapsibleTrigger","ChevronRightIcon","CollapsibleContent"],"mappings":"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"}
+{"version":3,"file":"span-payload-primitives-70wznWZl.cjs","sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField, SpanPayloadLabel } from './span-payload-primitives';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ToolCallPresentedHeader } from '@/ds/components/ai/tool-call';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nexport function SpanPayloadTool({ value, showLabel = true }: { value: unknown; showLabel?: boolean }) {\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      {showLabel && <SpanPayloadLabel>{value.type === 'tool-result' ? 'Tool result' : 'Tool call'}</SpanPayloadLabel>}\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={<ToolCallPresentedHeader {...presentTool(call.toolName, input)} />}\n      >\n        <div className=\"flex flex-col gap-3\">\n          {input !== undefined && (\n            <SpanPayloadField label=\"Arguments\">\n              <SpanPayloadJson value={input} />\n            </SpanPayloadField>\n          )}\n          {output !== undefined && (\n            <SpanPayloadField label=\"Result\">\n              <SpanPayloadJson value={output} />\n            </SpanPayloadField>\n          )}\n          {errorText !== undefined && (\n            <SpanPayloadField label=\"Error\">\n              <SpanPayloadJson value={errorText} />\n            </SpanPayloadField>\n          )}\n        </div>\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return <div className=\"text-meta tracking-widest text-placeholder uppercase\">{children}</div>;\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-body text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"flex items-center gap-1 text-meta tracking-widest text-placeholder uppercase [&>svg]:size-3\">\n        <ChevronRightIcon />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} showLabel={false} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"names":["jsx","SpanPayloadJson","jsxs","BadgeWrapper","ToolCallPresentedHeader","presentTool","MarkdownRenderer","Collapsible","CollapsibleTrigger","ChevronRightIcon","CollapsibleContent"],"mappings":"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"}

package/dist/{span-payload-primitives-sbxk4CHC.js → span-payload-primitives-BvoMauDb.js}

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ChevronRightIcon } from 'lucide-react';
 import { SpanPayloadJson } from './domains/traces/components/span-payload/span-payload-json.es.js';
-import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from './collapsible-B2uUy8w5.js';
-import { M as MarkdownRenderer } from './markdown-renderer-B0gTm_Ea.js';
+import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from './collapsible-DhhP5p1j.js';
+import { M as MarkdownRenderer } from './markdown-renderer-DZAcPOxC.js';
 import { BadgeWrapper } from './domains/chat/components/badge-wrapper.es.js';
-import { j as ToolCallPresentedHeader } from './tool-call-K147tCug.js';
+import { j as ToolCallPresentedHeader } from './tool-call-BjAGFbH-.js';
 import { p as presentTool } from './tool-presentation-D-smNbXC.js';
 
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
@@ -36,7 +36,7 @@ function SpanPayloadTool({ value, showLabel = true }) {
 }
 
 function SpanPayloadLabel({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "text-meta text-placeholder tracking-widest uppercase", children });
+  return /* @__PURE__ */ jsx("div", { className: "text-meta tracking-widest text-placeholder uppercase", children });
 }
 function SpanPayloadField({ label, children }) {
   return /* @__PURE__ */ jsxs("div", { "data-slot": "span-payload-field", className: "flex flex-col gap-1.5", children: [
@@ -53,7 +53,7 @@ function SpanPayloadCollapsible({
   defaultOpen = false
 }) {
   return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, children: [
-    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "text-meta text-placeholder flex items-center gap-1 tracking-widest uppercase [&>svg]:size-3", children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center gap-1 text-meta tracking-widest text-placeholder uppercase [&>svg]:size-3", children: [
       /* @__PURE__ */ jsx(ChevronRightIcon, {}),
       label
     ] }),
@@ -65,4 +65,4 @@ function SpanPayloadToolCalls({ toolCalls }) {
 }
 
 export { SpanPayloadField as S, SpanPayloadMarkdown as a, SpanPayloadToolCalls as b, SpanPayloadCollapsible as c, SpanPayloadLabel as d, SpanPayloadTool as e };
-//# sourceMappingURL=span-payload-primitives-sbxk4CHC.js.map
+//# sourceMappingURL=span-payload-primitives-BvoMauDb.js.map

package/dist/{span-payload-primitives-sbxk4CHC.js.map → span-payload-primitives-BvoMauDb.js.map}

@@ -1 +1 @@
-{"version":3,"file":"span-payload-primitives-sbxk4CHC.js","sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField, SpanPayloadLabel } from './span-payload-primitives';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ToolCallPresentedHeader } from '@/ds/components/ai/tool-call';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nexport function SpanPayloadTool({ value, showLabel = true }: { value: unknown; showLabel?: boolean }) {\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      {showLabel && <SpanPayloadLabel>{value.type === 'tool-result' ? 'Tool result' : 'Tool call'}</SpanPayloadLabel>}\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={<ToolCallPresentedHeader {...presentTool(call.toolName, input)} />}\n      >\n        <div className=\"flex flex-col gap-3\">\n          {input !== undefined && (\n            <SpanPayloadField label=\"Arguments\">\n              <SpanPayloadJson value={input} />\n            </SpanPayloadField>\n          )}\n          {output !== undefined && (\n            <SpanPayloadField label=\"Result\">\n              <SpanPayloadJson value={output} />\n            </SpanPayloadField>\n          )}\n          {errorText !== undefined && (\n            <SpanPayloadField label=\"Error\">\n              <SpanPayloadJson value={errorText} />\n            </SpanPayloadField>\n          )}\n        </div>\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return <div className=\"text-meta text-placeholder tracking-widest uppercase\">{children}</div>;\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-body text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"text-meta text-placeholder flex items-center gap-1 tracking-widest uppercase [&>svg]:size-3\">\n        <ChevronRightIcon />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} showLabel={false} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"span-payload-primitives-BvoMauDb.js","sources":["../src/domains/traces/components/span-payload/span-payload-tool.tsx","../src/domains/traces/components/span-payload/span-payload-primitives.tsx"],"sourcesContent":["import { SpanPayloadJson } from './span-payload-json';\nimport { SpanPayloadField, SpanPayloadLabel } from './span-payload-primitives';\nimport { BadgeWrapper } from '@/domains/chat/components/badge-wrapper';\nimport { ToolCallPresentedHeader } from '@/ds/components/ai/tool-call';\nimport { presentTool } from '@/ds/components/ai/tool-call/tool-presentation';\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value !== null && !Array.isArray(value);\n\nexport function SpanPayloadTool({ value, showLabel = true }: { value: unknown; showLabel?: boolean }) {\n  if (!isRecord(value)) return <SpanPayloadJson value={value} />;\n  const call = value.type === 'tool-invocation' ? value.toolInvocation : value;\n  if (!isRecord(call) || typeof call.toolName !== 'string' || !call.toolName) {\n    return <SpanPayloadJson value={value} />;\n  }\n  const input = 'args' in call ? call.args : call.input;\n  const output = 'result' in call ? call.result : call.output;\n  const error = call.isError === true || call.state === 'output-error';\n  const errorText = typeof call.errorText === 'string' ? call.errorText : undefined;\n  return (\n    <div data-slot=\"span-payload-tool\" className=\"flex flex-col gap-2\">\n      {showLabel && <SpanPayloadLabel>{value.type === 'tool-result' ? 'Tool result' : 'Tool call'}</SpanPayloadLabel>}\n      <BadgeWrapper\n        status={error ? 'error' : 'idle'}\n        header={<ToolCallPresentedHeader {...presentTool(call.toolName, input)} />}\n      >\n        <div className=\"flex flex-col gap-3\">\n          {input !== undefined && (\n            <SpanPayloadField label=\"Arguments\">\n              <SpanPayloadJson value={input} />\n            </SpanPayloadField>\n          )}\n          {output !== undefined && (\n            <SpanPayloadField label=\"Result\">\n              <SpanPayloadJson value={output} />\n            </SpanPayloadField>\n          )}\n          {errorText !== undefined && (\n            <SpanPayloadField label=\"Error\">\n              <SpanPayloadJson value={errorText} />\n            </SpanPayloadField>\n          )}\n        </div>\n      </BadgeWrapper>\n    </div>\n  );\n}\n","import { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadTool } from './span-payload-tool';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\n\n/** Small-caps label above a field of a rich payload. */\nexport function SpanPayloadLabel({ children }: { children: ReactNode }) {\n  return <div className=\"text-meta tracking-widest text-placeholder uppercase\">{children}</div>;\n}\n\nexport function SpanPayloadField({ label, children }: { label: ReactNode; children: ReactNode }) {\n  return (\n    <div data-slot=\"span-payload-field\" className=\"flex flex-col gap-1.5\">\n      <SpanPayloadLabel>{label}</SpanPayloadLabel>\n      {children}\n    </div>\n  );\n}\n\nexport function SpanPayloadMarkdown({ children }: { children: string }) {\n  return (\n    <div data-slot=\"span-payload-markdown\" className=\"text-body text-foreground\">\n      <MarkdownRenderer>{children}</MarkdownRenderer>\n    </div>\n  );\n}\n\n/** A collapsed block for secondary data (reasoning, steps, warnings…). */\nexport function SpanPayloadCollapsible({\n  label,\n  children,\n  defaultOpen = false,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen}>\n      <CollapsibleTrigger className=\"flex items-center gap-1 text-meta tracking-widest text-placeholder uppercase [&>svg]:size-3\">\n        <ChevronRightIcon />\n        {label}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"pt-1.5\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n}\n\n/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */\nexport function SpanPayloadToolCalls({ toolCalls }: { toolCalls: unknown[] }) {\n  return (\n    <ul data-slot=\"span-payload-tool-calls\" className=\"flex flex-col gap-2\">\n      {toolCalls.map((call, index) => (\n        <li key={index}>\n          <SpanPayloadTool value={call} showLabel={false} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/{spinner-CqP-NaB2.cjs → spinner-BCpN7LL9.cjs}

@@ -8,7 +8,8 @@ const spinnerVariants = index.cva("spinner inline-block text-foreground", {
   variants: {
     size: {
       sm: "size-4",
-      md: "size-6"
+      md: "size-6",
+      lg: "size-8"
     },
     variant: {
       default: "",
@@ -24,13 +25,14 @@ function Spinner({
   className,
   size = "md",
   variant = "default",
+  fill = false,
   "aria-label": ariaLabel = "Loading",
   role = "status",
   ...props
 }) {
   const resolvedSize = size ?? "md";
   const resolvedVariant = variant ?? "default";
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const svg = /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
       ...props,
@@ -47,7 +49,11 @@ function Spinner({
       ] }) : /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "spinner-ring", cx: "12", cy: "12", r: "8.5" })
     }
   );
+  if (fill) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "spinner-fill", className: "flex h-full items-center-safe justify-center-safe", children: svg });
+  }
+  return svg;
 }
 
 exports.Spinner = Spinner;
-//# sourceMappingURL=spinner-CqP-NaB2.cjs.map
+//# sourceMappingURL=spinner-BCpN7LL9.cjs.map

package/dist/spinner-BCpN7LL9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-BCpN7LL9.cjs","sources":["../src/ds/components/Spinner/spinner.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './spinner.css';\n\nconst spinnerVariants = cva('spinner inline-block text-foreground', {\n  variants: {\n    size: {\n      sm: 'size-4',\n      md: 'size-6',\n      lg: 'size-8',\n    },\n    variant: {\n      default: '',\n      pulse: '',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'default',\n  },\n});\n\ntype SpinnerVariantsProps = VariantProps<typeof spinnerVariants>;\nexport type SpinnerVariant = NonNullable<SpinnerVariantsProps['variant']>;\nexport type SpinnerSize = NonNullable<SpinnerVariantsProps['size']>;\n\nexport type SpinnerProps = Omit<ComponentPropsWithoutRef<'svg'>, 'color' | 'size' | 'fill'> &\n  SpinnerVariantsProps & {\n    /** Center the spinner in the full height of its parent — the parent must have a definite height. */\n    fill?: boolean;\n  };\n\nfunction Spinner({\n  className,\n  size = 'md',\n  variant = 'default',\n  fill = false,\n  'aria-label': ariaLabel = 'Loading',\n  role = 'status',\n  ...props\n}: SpinnerProps) {\n  const resolvedSize = size ?? 'md';\n  const resolvedVariant = variant ?? 'default';\n\n  const svg = (\n    <svg\n      {...props}\n      role={role}\n      aria-label={ariaLabel}\n      data-size={resolvedSize}\n      data-variant={resolvedVariant}\n      className={cn(spinnerVariants({ size: resolvedSize, variant: resolvedVariant }), className)}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n    >\n      {resolvedVariant === 'pulse' ? (\n        <>\n          <circle className=\"spinner-pulse-ring\" cx=\"12\" cy=\"12\" r=\"7\" />\n          <circle className=\"spinner-pulse-core\" cx=\"12\" cy=\"12\" r=\"5\" />\n        </>\n      ) : (\n        <circle className=\"spinner-ring\" cx=\"12\" cy=\"12\" r=\"8.5\" />\n      )}\n    </svg>\n  );\n\n  if (fill) {\n    return (\n      <div data-slot=\"spinner-fill\" className=\"flex h-full items-center-safe justify-center-safe\">\n        {svg}\n      </div>\n    );\n  }\n\n  return svg;\n}\n\nexport { Spinner };\n"],"names":["cva","jsx","cn","jsxs","Fragment"],"mappings":";;;;;;AAQA,MAAM,eAAA,GAAkBA,UAAI,sCAAA,EAAwC;AAAA,EAClE,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,EAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAYD,SAAS,OAAA,CAAQ;AAAA,EACf,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,KAAA;AAAA,EACP,cAAc,SAAA,GAAY,SAAA;AAAA,EAC1B,IAAA,GAAO,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,eAAe,IAAA,IAAQ,IAAA;AAC7B,EAAA,MAAM,kBAAkB,OAAA,IAAW,SAAA;AAEnC,EAAA,MAAM,GAAA,mBACJC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,IAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,WAAA,EAAW,YAAA;AAAA,MACX,cAAA,EAAc,eAAA;AAAA,MACd,SAAA,EAAWC,WAAA,CAAG,eAAA,CAAgB,EAAE,IAAA,EAAM,cAAc,OAAA,EAAS,eAAA,EAAiB,CAAA,EAAG,SAAS,CAAA;AAAA,MAC1F,KAAA,EAAM,4BAAA;AAAA,MACN,OAAA,EAAQ,WAAA;AAAA,MAEP,QAAA,EAAA,eAAA,KAAoB,0BACnBC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,QAAA,EAAA,EAAO,WAAU,oBAAA,EAAqB,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,wBAC7DA,cAAA,CAAC,YAAO,SAAA,EAAU,oBAAA,EAAqB,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,GAAA,EAAI;AAAA,OAAA,EAC/D,CAAA,mBAEAA,cAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,cAAA,EAAe,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,KAAA,EAAM;AAAA;AAAA,GAE7D;AAGF,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,sCACG,KAAA,EAAA,EAAI,WAAA,EAAU,cAAA,EAAe,SAAA,EAAU,qDACrC,QAAA,EAAA,GAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,GAAA;AACT;;;;"}

package/dist/{spinner-D2C2DYw8.js → spinner-ylbE0TJA.js}

@@ -6,7 +6,8 @@ import './spinner.css';const spinnerVariants = cva("spinner inline-block text-fo
   variants: {
     size: {
       sm: "size-4",
-      md: "size-6"
+      md: "size-6",
+      lg: "size-8"
     },
     variant: {
       default: "",
@@ -22,13 +23,14 @@ function Spinner({
   className,
   size = "md",
   variant = "default",
+  fill = false,
   "aria-label": ariaLabel = "Loading",
   role = "status",
   ...props
 }) {
   const resolvedSize = size ?? "md";
   const resolvedVariant = variant ?? "default";
-  return /* @__PURE__ */ jsx(
+  const svg = /* @__PURE__ */ jsx(
     "svg",
     {
       ...props,
@@ -45,7 +47,11 @@ function Spinner({
       ] }) : /* @__PURE__ */ jsx("circle", { className: "spinner-ring", cx: "12", cy: "12", r: "8.5" })
     }
   );
+  if (fill) {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "spinner-fill", className: "flex h-full items-center-safe justify-center-safe", children: svg });
+  }
+  return svg;
 }
 
 export { Spinner as S };
-//# sourceMappingURL=spinner-D2C2DYw8.js.map
+//# sourceMappingURL=spinner-ylbE0TJA.js.map

package/dist/spinner-ylbE0TJA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-ylbE0TJA.js","sources":["../src/ds/components/Spinner/spinner.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './spinner.css';\n\nconst spinnerVariants = cva('spinner inline-block text-foreground', {\n  variants: {\n    size: {\n      sm: 'size-4',\n      md: 'size-6',\n      lg: 'size-8',\n    },\n    variant: {\n      default: '',\n      pulse: '',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'default',\n  },\n});\n\ntype SpinnerVariantsProps = VariantProps<typeof spinnerVariants>;\nexport type SpinnerVariant = NonNullable<SpinnerVariantsProps['variant']>;\nexport type SpinnerSize = NonNullable<SpinnerVariantsProps['size']>;\n\nexport type SpinnerProps = Omit<ComponentPropsWithoutRef<'svg'>, 'color' | 'size' | 'fill'> &\n  SpinnerVariantsProps & {\n    /** Center the spinner in the full height of its parent — the parent must have a definite height. */\n    fill?: boolean;\n  };\n\nfunction Spinner({\n  className,\n  size = 'md',\n  variant = 'default',\n  fill = false,\n  'aria-label': ariaLabel = 'Loading',\n  role = 'status',\n  ...props\n}: SpinnerProps) {\n  const resolvedSize = size ?? 'md';\n  const resolvedVariant = variant ?? 'default';\n\n  const svg = (\n    <svg\n      {...props}\n      role={role}\n      aria-label={ariaLabel}\n      data-size={resolvedSize}\n      data-variant={resolvedVariant}\n      className={cn(spinnerVariants({ size: resolvedSize, variant: resolvedVariant }), className)}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n    >\n      {resolvedVariant === 'pulse' ? (\n        <>\n          <circle className=\"spinner-pulse-ring\" cx=\"12\" cy=\"12\" r=\"7\" />\n          <circle className=\"spinner-pulse-core\" cx=\"12\" cy=\"12\" r=\"5\" />\n        </>\n      ) : (\n        <circle className=\"spinner-ring\" cx=\"12\" cy=\"12\" r=\"8.5\" />\n      )}\n    </svg>\n  );\n\n  if (fill) {\n    return (\n      <div data-slot=\"spinner-fill\" className=\"flex h-full items-center-safe justify-center-safe\">\n        {svg}\n      </div>\n    );\n  }\n\n  return svg;\n}\n\nexport { Spinner };\n"],"names":[],"mappings":";;;;AAQA,MAAM,eAAA,GAAkB,IAAI,sCAAA,EAAwC;AAAA,EAClE,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,EAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAYD,SAAS,OAAA,CAAQ;AAAA,EACf,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,KAAA;AAAA,EACP,cAAc,SAAA,GAAY,SAAA;AAAA,EAC1B,IAAA,GAAO,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,eAAe,IAAA,IAAQ,IAAA;AAC7B,EAAA,MAAM,kBAAkB,OAAA,IAAW,SAAA;AAEnC,EAAA,MAAM,GAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,IAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,WAAA,EAAW,YAAA;AAAA,MACX,cAAA,EAAc,eAAA;AAAA,MACd,SAAA,EAAW,EAAA,CAAG,eAAA,CAAgB,EAAE,IAAA,EAAM,cAAc,OAAA,EAAS,eAAA,EAAiB,CAAA,EAAG,SAAS,CAAA;AAAA,MAC1F,KAAA,EAAM,4BAAA;AAAA,MACN,OAAA,EAAQ,WAAA;AAAA,MAEP,QAAA,EAAA,eAAA,KAAoB,0BACnB,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAO,WAAU,oBAAA,EAAqB,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,wBAC7D,GAAA,CAAC,YAAO,SAAA,EAAU,oBAAA,EAAqB,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,GAAA,EAAI;AAAA,OAAA,EAC/D,CAAA,mBAEA,GAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,cAAA,EAAe,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,KAAA,EAAM;AAAA;AAAA,GAE7D;AAGF,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,2BACG,KAAA,EAAA,EAAI,WAAA,EAAU,cAAA,EAAe,SAAA,EAAU,qDACrC,QAAA,EAAA,GAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,GAAA;AACT;;;;"}

package/dist/src/components/fluid-hover-highlight.d.ts

@@ -1,60 +1,6 @@
-import { Transition } from 'framer-motion';
-import { ItemRect, UseFluidHoverReturn } from '../hooks/use-fluid-hover';
-/** What the highlight reads off the hook: the highlighted index, the
- *  measured rects, whether they are current, and the pointer session. */
-export type FluidHoverSource = Pick<UseFluidHoverReturn, 'activeIndex' | 'itemRects' | 'isMeasured' | 'sessionRef'>;
-interface HighlightFromHook {
-    /** The hook's return value. The highlight sits on
-     *  `itemRects[activeIndex]` once `isMeasured`, and re-keys on the session. */
-    hover: FluidHoverSource;
-    /** Keep the list's state but show nothing (a closed popup, hover switched
-     *  off). Runs the exit fade. */
-    hidden?: boolean;
-    rect?: never;
-    session?: never;
-}
-interface HighlightFromRect {
-    /** For lists that resolve their own rect (the sidebar's unified scope):
-     *  the rect to sit on, in the container's coordinate space. `null` hides
-     *  the highlight (it fades out on `spring.fast.exit`). */
-    rect: ItemRect | null;
-    /** `sessionRef.current` from `useFluidHover`. It increments when the
-     *  cursor enters the container, which re-keys the highlight so it fades in
-     *  at `from ?? rect` instead of sliding over from wherever it was last. */
-    session: number;
-    hover?: never;
-    hidden?: never;
-}
-export type FluidHoverHighlightProps = (HighlightFromHook | HighlightFromRect) & {
-    /** Where a fresh session fades in from. A dropdown passes its checked row,
-     *  a nav menu its active route. Defaults to the rect itself. */
-    from?: ItemRect | null;
-    /** Radius, z-index, anything else. Merged onto
-     *  `absolute bg-hover pointer-events-none`. */
+import { UseFluidHoverReturn } from '../hooks/use-fluid-hover';
+export type FluidHoverHighlightProps = {
+    hover: Pick<UseFluidHoverReturn, 'activeIndex' | 'itemRects' | 'isMeasured' | 'sessionRef'>;
     className?: string;
-    /** The positional spring. Defaults to `spring.fast`. Pass `false` to snap
-     *  to the new rect with no travel (a layout reflow that moved the rows
-     *  underneath, not a hover change). The opacity fade is always 0.08s. */
-    transition?: Transition | false;
 };
-/** A measured rect as animation targets: position as a transform, size as
- *  layout. Exported for the unit test. */
-export declare function toTarget(rect: ItemRect): {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
-/**
- * Resolves the positional transition. Reduced motion keeps the opacity fade
- * and drops the travel, per the motion guidelines: fewer and gentler, not
- * none. Exported for the unit test.
- */
-export declare function resolveHighlightTransition(transition: Transition | false | undefined, reduceMotion: boolean): Transition;
-/** The rect and session a set of props resolves to. Exported for the test. */
-export declare function resolveHighlightSource(props: FluidHoverHighlightProps): {
-    rect: ItemRect | null;
-    session: number;
-};
-export declare function FluidHoverHighlight(props: FluidHoverHighlightProps): import("react").JSX.Element;
-export {};
+export declare function FluidHoverHighlight({ hover, className }: FluidHoverHighlightProps): import("react").JSX.Element | null;

package/dist/src/domains/traces/components/traces-error-content.d.ts

@@ -10,7 +10,7 @@ export interface TracesErrorContentProps {
  * Renders the appropriate fallback content for a traces-related query error:
  * `<SessionExpired />` for 401, `<PermissionDenied />` for 403, otherwise `<ErrorState />`.
  *
- * The consumer wraps it in whatever layout they want (NoDataPageLayout for the list page,
- * PageLayout.MainArea for the detail page, etc.) — this component only owns the 3-branch decision.
+ * The consumer wraps it in whatever layout they want (PageLayout for the list page,
+ * a centered div for the detail page, etc.) — this component only owns the 3-branch decision.
  */
 export declare function TracesErrorContent({ error, resource, errorTitle }: TracesErrorContentProps): import("react").JSX.Element;

package/dist/src/domains/traces/hooks/use-trace-url-state.d.ts

@@ -1,6 +1,6 @@
 import { TraceSpanView } from '../components/trace-data-panel-view';
 import { SpanTab, TraceDatePreset } from '../index';
-import { EntityOptions, TraceFilterToken, TraceListMode, TraceStatusFilter } from '../trace-filters';
+import { EntityOptions, TraceFilterGroup, TraceFilterToken, TraceListMode, TraceStatusFilter } from '../trace-filters';
 /** Minimal interface compatible with react-router's `setSearchParams`. */
 export type SetURLSearchParamsLike = (next: URLSearchParams | ((prev: URLSearchParams) => URLSearchParams), options?: {
     replace?: boolean;
@@ -36,6 +36,8 @@ export interface UseTraceUrlStateResult {
     selectedEntityOption: EntityOptions | undefined;
     selectedStatus: TraceStatusFilter | undefined;
     filterTokens: TraceFilterToken[];
+    /** Root-level advanced (AND/OR) filter groups, read from the `filterGroup` params. */
+    filterGroups: TraceFilterGroup[];
     /**
      * Selects a row. In traces mode pass just `traceId` (and optionally a `spanId` for an
      * initial span selection in the panel). In branches mode also pass `anchorSpanId` — the
@@ -61,7 +63,7 @@ export interface UseTraceUrlStateResult {
     handleHighlightSpans: (spanIds: string[]) => void;
     /** Switches the list view between traces and branches. Clears the current selection. */
     handleListModeChange: (mode: TraceListMode) => void;
-    handleFilterTokensChange: (nextTokens: TraceFilterToken[]) => void;
+    handleFilterTokensChange: (nextTokens: TraceFilterToken[], nextGroups?: TraceFilterGroup[]) => void;
     handleDateChange: (value: Date | undefined, type: 'from' | 'to') => void;
     /** Writes both ends of a custom range in one URL update (two `handleDateChange` calls in the
      *  same tick would clobber each other through react-router's closure-bound setter). */
@@ -69,7 +71,7 @@ export interface UseTraceUrlStateResult {
     handleDatePresetChange: (preset: TraceDatePreset) => void;
     handleRemoveAll: () => void;
     /** Lower-level helper used by `handleClear`: writes a token set and clears the trace/span selection. */
-    applyFilterTokens: (tokens: TraceFilterToken[]) => void;
+    applyFilterTokens: (tokens: TraceFilterToken[], groups?: TraceFilterGroup[]) => void;
 }
 /**
  * Owns all URL-derived state and URL-modifying handlers for the traces page. Routing-agnostic —

package/dist/src/domains/traces/trace-filters.d.ts

@@ -1,11 +1,12 @@
 import { EntityType } from '@mastra/core/observability';
 import { ListTracesArgs } from '@mastra/core/storage';
 import { TraceMetadataFilterField } from './hooks/use-trace-metadata-filter-fields';
-import { TraceFilterOperatorId, TraceFilterToken, TraceQueryRelatedScope } from './trace-query-filters';
+import { TraceFilterGroup, TraceFilterOperatorId, TraceFilterToken, TraceQueryRelatedScope } from './trace-query-filters';
 import { TraceDatePreset } from './types';
-import { FilterBarField, FilterBarItem, FilterBarOperator, FilterBarSuggestionsResolver } from '../../ds/components/FilterBar/types';
+import { FilterBarExpression, FilterBarField, FilterBarItem, FilterBarOperator, FilterBarSuggestionsResolver } from '../../ds/components/FilterBar/types';
 import { PropertyFilterToken } from '../../ds/components/PropertyFilter/types';
-export type { TraceFilterOperatorId, TraceFilterToken, TraceQueryRelatedScope } from './trace-query-filters';
+export type { TraceFilterGroup, TraceFilterLogic, TraceFilterNode, TraceFilterOperatorId, TraceFilterToken, TraceQueryRelatedScope, } from './trace-query-filters';
+export { isTraceFilterGroup } from './trace-query-filters';
 type EntityTypeValue = `${EntityType}`;
 export type EntityOptions = {
     label: string;
@@ -150,6 +151,13 @@ export declare function createTraceFilterBarFields({ availableRootEntityNames, a
  *  Only the legacy 'Any' sentinel is mapped back to an empty value. */
 export declare function traceTokensToFilterBarItems(tokens: TraceFilterToken[]): FilterBarItem[];
 export declare function filterBarItemsToTraceTokens(items: FilterBarItem[]): TraceFilterToken[];
+/** Expression-mode value for the FilterBar: root tokens as items, then one
+ *  group node per advanced filter. Ids inside groups are carried as-is. */
+export declare function traceFiltersToFilterBarExpression(tokens: TraceFilterToken[], groups: TraceFilterGroup[]): FilterBarExpression;
+export declare function filterBarExpressionToTraceFilters(expression: FilterBarExpression): {
+    tokens: TraceFilterToken[];
+    groups: TraceFilterGroup[];
+};
 /**
  * Read filter tokens from URL search params preserving the order in which each
  * filter was first added (URLSearchParams iterates in insertion order). This
@@ -164,7 +172,14 @@ export declare function getPreservedTraceFilterParams(searchParams: URLSearchPar
  * creation order of filters. Handles the generic `filterX` params plus the
  * dedicated synthetic params (rootEntityType, status).
  */
-export declare function applyTracePropertyFilterTokens(params: URLSearchParams, tokens: TraceFilterToken[]): void;
+export declare function applyTracePropertyFilterTokens(params: URLSearchParams, tokens: TraceFilterToken[], groups?: TraceFilterGroup[]): void;
+/** Root-level advanced filter groups live in a repeatable `filterGroup` param,
+ *  one compact JSON subtree each. Node ids are part of the payload so the
+ *  FilterBar keeps chip identity across URL round-trips. */
+export declare const TRACE_FILTER_GROUP_PARAM = "filterGroup";
+export declare const serializeTraceFilterGroup: (group: TraceFilterGroup) => string;
+export declare function getTraceFilterGroups(searchParams: URLSearchParams): TraceFilterGroup[];
+export declare function parseTraceFilterGroupParam(raw: string): TraceFilterGroup | undefined;
 export declare function buildTraceListFilters({ rootEntityType, status, dateFrom, dateTo, tokens, }: {
     rootEntityType?: string;
     status?: TraceStatusFilter;

package/dist/src/domains/traces/trace-query-filters.d.ts

@@ -8,7 +8,18 @@ export declare const isTraceFilterOperatorId: (value: string) => value is TraceF
 /** A trace filter chip: `operatorId` defaults to `is` (equality / set membership). */
 export type TraceFilterToken = PropertyFilterToken & {
     operatorId?: TraceFilterOperatorId;
+    /** Only set for tokens inside a group: a group may hold several tokens on the same field. */
+    id?: string;
 };
+export type TraceFilterLogic = 'and' | 'or';
+/** An advanced filter: a nested boolean combination of tokens. */
+export type TraceFilterGroup = {
+    id: string;
+    logic: TraceFilterLogic;
+    nodes: TraceFilterNode[];
+};
+export type TraceFilterNode = TraceFilterToken | TraceFilterGroup;
+export declare const isTraceFilterGroup: (node: TraceFilterNode) => node is TraceFilterGroup;
 /** Fields whose values must be sent as numbers. Non-numeric input is dropped. */
 export declare const TRACE_QUERY_NUMERIC_FIELD_IDS: Set<string>;
 /** Trace-level fields that may be unset. "is not X" on these must also keep traces
@@ -16,9 +27,10 @@ export declare const TRACE_QUERY_NUMERIC_FIELD_IDS: Set<string>;
 export declare const TRACE_QUERY_OPTIONAL_TRACE_FIELD_IDS: Set<string>;
 declare const TRACE_QUERY_RELATED_SCOPES: readonly ["spans", "scores", "feedback"];
 export type TraceQueryRelatedScope = (typeof TRACE_QUERY_RELATED_SCOPES)[number];
-export declare function buildTraceQueryRequest({ rootEntityType, status, dateFrom, dateTo, tokens, now, }: Omit<Parameters<typeof buildTraceListFilters>[0], 'tokens' | 'status'> & {
+export declare function buildTraceQueryRequest({ rootEntityType, status, dateFrom, dateTo, tokens, groups, now, }: Omit<Parameters<typeof buildTraceListFilters>[0], 'tokens' | 'status'> & {
     status?: TraceStatusFilter;
     tokens: TraceFilterToken[];
+    groups?: TraceFilterGroup[];
     now: Date;
 }): Pick<QueryTracesInput, 'timeRange' | 'where'>;
 export declare const TRACE_QUERY_DISCOVERY_MAX_RANGE_MS: number;

package/dist/src/ds/components/ActionRow/action-row.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from 'react';
+type DivProps = ComponentPropsWithoutRef<'div'>;
+/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */
+export declare function ActionRowRoot({ className, ...props }: DivProps): import("react").JSX.Element;
+/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */
+export declare function ActionRowStart({ className, ...props }: DivProps): import("react").JSX.Element;
+/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */
+export declare function ActionRowEnd({ className, ...props }: DivProps): import("react").JSX.Element;
+export {};

package/dist/src/ds/components/ActionRow/action-row.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ActionRow } from './index';
+declare const meta: Meta<typeof ActionRow>;
+export default meta;
+type Story = StoryObj<typeof ActionRow>;
+export declare const StartOnly: Story;
+export declare const StartAndEnd: Story;
+export declare const EndOnly: Story;

package/dist/src/ds/components/ActionRow/index.d.ts

@@ -0,0 +1,5 @@
+import { ActionRowEnd, ActionRowRoot, ActionRowStart } from './action-row';
+export declare const ActionRow: typeof ActionRowRoot & {
+    Start: typeof ActionRowStart;
+    End: typeof ActionRowEnd;
+};

package/dist/src/ds/components/Badge/badge.stories.d.ts

@@ -5,6 +5,5 @@ export default meta;
 type Story = StoryObj<typeof Badge>;
 export declare const StyleComparison: Story;
 export declare const Matrix: Story;
-export declare const Indicators: Story;
 export declare const Emphasis: Story;
 export declare const Sizes: Story;

package/dist/src/ds/components/ButtonsGroup/buttons-group.d.ts

@@ -3,20 +3,20 @@ import * as React from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type ButtonsGroupProps = React.ComponentPropsWithoutRef<'div'> & {
     orientation?: Orientation;
+    /**
+     * The rung every segment sits on. The group owns it: a child's own `size` cannot lift a
+     * segment off the group's rung, so a group can never render with a step in it.
+     */
+    size?: ControlSize;
 };
 export declare const ButtonsGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     orientation?: Orientation;
-} & React.RefAttributes<HTMLDivElement>>;
-export type ButtonsGroupSeparatorProps = React.ComponentPropsWithoutRef<'div'> & {
-    orientation?: Orientation;
-};
-export declare const ButtonsGroupSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    orientation?: Orientation;
-} & React.RefAttributes<HTMLDivElement>>;
-export type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'> & {
-    size?: ControlSize;
-};
-export declare const ButtonsGroupText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The rung every segment sits on. The group owns it: a child's own `size` cannot lift a
+     * segment off the group's rung, so a group can never render with a step in it.
+     */
     size?: ControlSize;
 } & React.RefAttributes<HTMLDivElement>>;
+export type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'>;
+export declare const ButtonsGroupText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/src/ds/components/ButtonsGroup/buttons-group.stories.d.ts

@@ -4,6 +4,16 @@ declare const meta: Meta<typeof ButtonsGroup>;
 export default meta;
 type Story = StoryObj<typeof ButtonsGroup>;
 export declare const Default: Story;
+/**
+ * The rung lives on the group, not on the segments. Height, icon-mode width and glyph size all
+ * come from `size`, and a segment cannot lift itself off it: every row below asks for an
+ * `icon-lg` chevron and a `lg` trigger, and all three still come out flat. The field's inner
+ * control follows too, inset by its own border.
+ *
+ * This is why a segment rarely needs a `size` of its own. `icon-*` stays on the button because
+ * it also picks the square shape — the rung part of it is overridden here.
+ */
+export declare const Sizes: Story;
 /**
  * A segmented view toggle: the selected segment is `default` (filled), the rest are `ghost`.
  * The group draws one continuous ring whether or not a segment is filled, and the seam between
@@ -20,8 +30,6 @@ export declare const AsSegmentedControl: Story;
 export declare const AsSplitButton: Story;
 export declare const Vertical: Story;
 export declare const VerticalOutline: Story;
-export declare const WithSeparator: Story;
-export declare const VerticalWithSeparator: Story;
 /**
  * A stepper: two outline buttons joined to a read-only value segment. The middle value
  * uses `ButtonsGroupText` (a filled chip). Because that segment is filled (opaque bg) the
@@ -36,14 +44,16 @@ export declare const WithText: Story;
  * `ButtonsGroup` merger; an interactive clear button would go in an `InputGroupAddon`
  * (`align="inline-end"`) with an `InputGroupButton`.
  *
- * No layout classes on the children (`flex-1`/`min-w-0`/`shrink-0`): the group owns sizing in
- * `spacing="close"` — the InputGroup fills the row and the Select trigger sizes to its content.
- * The group collapses the touching borders into a divider and flattens the inner corners,
- * leaving the outer pill rounded.
+ * No layout classes on the children (`flex-1`/`min-w-0`/`shrink-0`): the group owns sizing — the
+ * InputGroup fills the row and the Select trigger sizes to its content. The group collapses the
+ * touching borders into a divider and flattens the inner corners, leaving the outer pill rounded.
+ *
+ * Neither segment names a size. They cannot: the group puts every segment on its own rung, so
+ * the pill is flat by construction (see `Sizes`).
  *
  * Only one class is passed: `rounded-full` on the `SelectTrigger`, an intentional shape choice
  * so its outer corner matches the InputGroup pill (the trigger's standalone default is
- * `rounded-lg`). The `w-[420px]` on the group is just the demo container width.
+ * `rounded-lg`). The `w-105` on the group is just the demo container width.
  */
 export declare const SearchWithDropdown: Story;
 /**