@mastra/playground-ui 63.0.0-alpha.2 → 63.0.0-alpha.4

package/dist/{metrics-card-oEbbYDo7.js.map → metrics-card-C33VsuXf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"metrics-card-oEbbYDo7.js","sources":["../src/ds/components/MetricsCard/metrics-card-actions.tsx","../src/ds/components/MetricsCard/metrics-card-content.tsx","../src/ds/components/MetricsCard/metrics-card-description.tsx","../src/ds/components/MetricsCard/metrics-card-error.tsx","../src/ds/components/MetricsCard/metrics-card-loading.tsx","../src/ds/components/MetricsCard/metrics-card-no-data.tsx","../src/ds/components/MetricsCard/metrics-card-root.tsx","../src/ds/components/MetricsCard/metrics-card-summary.tsx","../src/ds/components/MetricsCard/metrics-card-tabs.tsx","../src/ds/components/MetricsCard/metrics-card-title.tsx","../src/ds/components/MetricsCard/metrics-card-title-and-description.tsx","../src/ds/components/MetricsCard/metrics-card-toolbar.tsx","../src/ds/components/MetricsCard/metrics-card-top-bar.tsx","../src/ds/components/MetricsCard/metrics-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/** Container for icon buttons / small actions in the top bar of a MetricsCard,\n *  placed between `TitleAndDescription` and `Summary` (which always renders last). */\nexport function MetricsCardActions({\n  children,\n  reveal = 'always',\n  className,\n}: {\n  children: ReactNode;\n  /**\n   * `hover`: the actions appear while the card is hovered or one of them has focus, so a page\n   * of cards doesn't read as a page of buttons.\n   */\n  reveal?: 'always' | 'hover';\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        'flex shrink-0 items-center gap-1 self-center',\n        reveal === 'hover' &&\n          'opacity-0 transition-opacity duration-150 group-hover/metrics-card:opacity-100 focus-within:opacity-100',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * Scrolls sideways only (wide tables). Vertical overflow is hidden: a chart filling a card with a\n * fractional height rounds 1px past it, which otherwise turns the content into a scroll box.\n * Tables inside a card drop the last row's border: the card edge already closes them.\n */\nexport function MetricsCardContent({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={cn('overflow-x-auto overflow-y-hidden [&_tbody>tr:last-child]:border-b-0', className)}>\n      {children}\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardDescription({ children, className }: { children: string; className?: string }) {\n  return (\n    <Txt tone=\"faint\" className={cn('mt-0.5', className)}>\n      {children}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-col items-center justify-center gap-3', className)}>\n      <Txt variant=\"caption\" className=\"text-destructive-foreground\">\n        {message}\n      </Txt>\n    </div>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardLoading({ className }: { className?: string }) {\n  return (\n    <div className={cn('flex items-center justify-center', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <div className={cn('flex h-full items-center justify-center', className)}>\n      <Txt tone=\"faint\">{message}</Txt>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <Card\n      className={cn(\n        'group/metrics-card grid min-h-72 min-w-80 flex-1 grid-rows-[auto_1fr] gap-4 px-4 py-3 2xl:min-w-120 md:min-w-88 lg:min-w-sm xl:min-w-104',\n        className,\n      )}\n    >\n      {children}\n    </Card>\n  );\n}\n","import { SkeletonText } from '@/ds/components/Skeleton';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/** Always the top bar's last item, so action buttons sit to its left and the value hugs the edge. */\nexport function MetricsCardSummary({\n  value,\n  label,\n  isLoading = false,\n  className,\n}: {\n  value: string;\n  label?: string;\n  /** Skeletons in the value's and label's own line boxes, so the top bar keeps its height. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  if (isLoading) {\n    return (\n      <div className={cn('order-last flex shrink-0 flex-col items-end', className)}>\n        <SkeletonText line=\"text-body\" className=\"h-4 w-14\" />\n        {label && <SkeletonText line=\"text-body mt-0.5\" className=\"w-10\" />}\n      </div>\n    );\n  }\n  return (\n    <div className={cn('order-last text-right', className)}>\n      <Txt tone=\"muted\" className=\"tabular-nums\">\n        {value}\n      </Txt>\n      {label && (\n        <Txt tone=\"faint\" className=\"mt-0.5\">\n          {label}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsCardTabsProps<T extends string> = {\n  value: T;\n  onValueChange: (value: T) => void;\n  /** `MetricsCard.Tab`s. */\n  children: ReactNode;\n};\n\n/**\n * The view switch in a metrics card's toolbar (e.g. Agents / Workflows / Tools): ghost tabs a\n * size under the control rung, so the switch stays quieter than the data. Metrics cards only;\n * anywhere else use `TabList`, which lines up with buttons and inputs.\n */\nexport function MetricsCardTabs<T extends string>({ value, onValueChange, children }: MetricsCardTabsProps<T>) {\n  return (\n    <Tabs<T> value={value} onValueChange={onValueChange} defaultTab={value}>\n      <TabList variant=\"pill-ghost\" size=\"sm\">\n        {children}\n      </TabList>\n    </Tabs>\n  );\n}\n\n/** One `MetricsCard.Tabs` option: 24px tall with 12px labels. */\nexport function MetricsCardTab({ className, ...props }: TabProps) {\n  return <Tab {...props} className={cn('h-6 px-2.5 text-column', className)} />;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardTitle({\n  children,\n  className,\n  as: Tag = 'h2',\n}: {\n  children: string;\n  className?: string;\n  as?: 'h2' | 'h3' | 'h4';\n}) {\n  return <Tag className={cn('text-body text-foreground', className)}>{children}</Tag>;\n}\n","import type { ReactNode } from 'react';\n\nimport { MetricsCardDescription } from './metrics-card-description';\nimport { MetricsCardTitle } from './metrics-card-title';\n\ntype PropsWithTitleDescription = {\n  title: string;\n  description?: string;\n  titleAs?: 'h2' | 'h3' | 'h4';\n  children?: never;\n  className?: string;\n};\n\ntype PropsWithChildren = {\n  title?: never;\n  description?: never;\n  children: ReactNode;\n  className?: string;\n};\n\nexport function MetricsCardTitleAndDescription(props: PropsWithTitleDescription | PropsWithChildren) {\n  if ('children' in props) {\n    return <div className={props.className}>{props.children}</div>;\n  }\n\n  const { title, description, titleAs } = props;\n\n  return (\n    <div className={props.className}>\n      <MetricsCardTitle as={titleAs}>{title}</MetricsCardTitle>\n      {description && <MetricsCardDescription>{description}</MetricsCardDescription>}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * One row under the top bar for a card's controls: small tabs, a legend, list column headers.\n * The first child sits on the left, the last on the right; either side may be omitted. When\n * both don't fit (a narrow card), the right side wraps to its own line, still on the right.\n */\nexport function MetricsCardToolbar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      className={cn(\n        'flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 [&>*:first-child]:min-w-0 [&>*:last-child:not(:first-child)]:ml-auto',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardTopBar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={cn('flex items-start gap-4 [&>:first-child]:min-w-0 [&>:first-child]:flex-1', className)}>\n      {children}\n    </div>\n  );\n}\n","import { MetricsCardActions } from './metrics-card-actions';\nimport { MetricsCardContent } from './metrics-card-content';\nimport { MetricsCardDescription } from './metrics-card-description';\nimport { MetricsCardError } from './metrics-card-error';\nimport { MetricsCardLoading } from './metrics-card-loading';\nimport { MetricsCardNoData } from './metrics-card-no-data';\nimport { MetricsCardRoot } from './metrics-card-root';\nimport { MetricsCardSummary } from './metrics-card-summary';\nimport { MetricsCardTab, MetricsCardTabs } from './metrics-card-tabs';\nimport { MetricsCardTitle } from './metrics-card-title';\nimport { MetricsCardTitleAndDescription } from './metrics-card-title-and-description';\nimport { MetricsCardToolbar } from './metrics-card-toolbar';\nimport { MetricsCardTopBar } from './metrics-card-top-bar';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\n\nexport const MetricsCard = Object.assign(MetricsCardRoot, {\n  Root: MetricsCardRoot,\n  Kpi: MetricsKpiCard,\n  TopBar: MetricsCardTopBar,\n  Toolbar: MetricsCardToolbar,\n  Tabs: MetricsCardTabs,\n  Tab: MetricsCardTab,\n  Actions: MetricsCardActions,\n  TitleAndDescription: MetricsCardTitleAndDescription,\n  Title: MetricsCardTitle,\n  Description: MetricsCardDescription,\n  Summary: MetricsCardSummary,\n  Loading: MetricsCardLoading,\n  Error: MetricsCardError,\n  Content: MetricsCardContent,\n  NoData: MetricsCardNoData,\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"metrics-card-C33VsuXf.js","sources":["../src/ds/components/MetricsCard/metrics-card-actions.tsx","../src/ds/components/MetricsCard/metrics-card-content.tsx","../src/ds/components/MetricsCard/metrics-card-description.tsx","../src/ds/components/MetricsCard/metrics-card-error.tsx","../src/ds/components/MetricsCard/metrics-card-loading.tsx","../src/ds/components/MetricsCard/metrics-card-no-data.tsx","../src/ds/components/MetricsCard/metrics-card-root.tsx","../src/ds/components/MetricsCard/metrics-card-summary.tsx","../src/ds/components/MetricsCard/metrics-card-tabs.tsx","../src/ds/components/MetricsCard/metrics-card-title.tsx","../src/ds/components/MetricsCard/metrics-card-title-and-description.tsx","../src/ds/components/MetricsCard/metrics-card-toolbar.tsx","../src/ds/components/MetricsCard/metrics-card-top-bar.tsx","../src/ds/components/MetricsCard/metrics-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/** Container for icon buttons / small actions in the top bar of a MetricsCard,\n *  placed between `TitleAndDescription` and `Summary` (which always renders last). */\nexport function MetricsCardActions({\n  children,\n  reveal = 'always',\n  className,\n}: {\n  children: ReactNode;\n  /**\n   * `hover`: the actions appear while the card is hovered or one of them has focus, so a page\n   * of cards doesn't read as a page of buttons.\n   */\n  reveal?: 'always' | 'hover';\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        'flex shrink-0 items-center gap-1 self-center',\n        reveal === 'hover' &&\n          'opacity-0 transition-opacity duration-150 group-hover/metrics-card:opacity-100 focus-within:opacity-100',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * Scrolls sideways only (wide tables). Vertical overflow is hidden: a chart filling a card with a\n * fractional height rounds 1px past it, which otherwise turns the content into a scroll box.\n * Tables inside a card drop the last row's border: the card edge already closes them.\n */\nexport function MetricsCardContent({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={cn('overflow-x-auto overflow-y-hidden [&_tbody>tr:last-child]:border-b-0', className)}>\n      {children}\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardDescription({ children, className }: { children: string; className?: string }) {\n  return (\n    <Txt tone=\"faint\" className={cn('mt-0.5', className)}>\n      {children}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-col items-center justify-center gap-3', className)}>\n      <Txt variant=\"caption\" className=\"text-destructive-foreground\">\n        {message}\n      </Txt>\n    </div>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardLoading({ className }: { className?: string }) {\n  return (\n    <div className={cn('flex items-center justify-center', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <div className={cn('flex h-full items-center justify-center', className)}>\n      <Txt tone=\"faint\">{message}</Txt>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <Card\n      className={cn(\n        'group/metrics-card grid min-h-72 min-w-80 flex-1 grid-rows-[auto_1fr] gap-4 px-4 py-3 2xl:min-w-120 md:min-w-88 lg:min-w-sm xl:min-w-104',\n        className,\n      )}\n    >\n      {children}\n    </Card>\n  );\n}\n","import { SkeletonText } from '@/ds/components/Skeleton';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/** Always the top bar's last item, so action buttons sit to its left and the value hugs the edge. */\nexport function MetricsCardSummary({\n  value,\n  label,\n  isLoading = false,\n  className,\n}: {\n  value: string;\n  label?: string;\n  /** Skeletons in the value's and label's own line boxes, so the top bar keeps its height. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  if (isLoading) {\n    return (\n      <div className={cn('order-last flex shrink-0 flex-col items-end', className)}>\n        <SkeletonText line=\"text-body\" className=\"h-4 w-14\" />\n        {label && <SkeletonText line=\"text-body mt-0.5\" className=\"w-10\" />}\n      </div>\n    );\n  }\n  return (\n    <div className={cn('order-last text-right', className)}>\n      <Txt tone=\"muted\" className=\"tabular-nums\">\n        {value}\n      </Txt>\n      {label && (\n        <Txt tone=\"faint\" className=\"mt-0.5\">\n          {label}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsCardTabsProps<T extends string> = {\n  value: T;\n  onValueChange: (value: T) => void;\n  /** `MetricsCard.Tab`s. */\n  children: ReactNode;\n};\n\n/**\n * The view switch in a metrics card's toolbar (e.g. Agents / Workflows / Tools): ghost tabs a\n * size under the control rung, so the switch stays quieter than the data. Metrics cards only;\n * anywhere else use `TabList`, which lines up with buttons and inputs.\n */\nexport function MetricsCardTabs<T extends string>({ value, onValueChange, children }: MetricsCardTabsProps<T>) {\n  return (\n    <Tabs<T> value={value} onValueChange={onValueChange} defaultTab={value}>\n      <TabList variant=\"pill-ghost\" size=\"sm\">\n        {children}\n      </TabList>\n    </Tabs>\n  );\n}\n\n/** One `MetricsCard.Tabs` option: 24px tall with 12px labels. */\nexport function MetricsCardTab({ className, ...props }: TabProps) {\n  return <Tab {...props} className={cn('h-6 px-2.5 text-column', className)} />;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardTitle({\n  children,\n  className,\n  as: Tag = 'h2',\n}: {\n  children: string;\n  className?: string;\n  as?: 'h2' | 'h3' | 'h4';\n}) {\n  return <Tag className={cn('text-body text-foreground', className)}>{children}</Tag>;\n}\n","import type { ReactNode } from 'react';\n\nimport { MetricsCardDescription } from './metrics-card-description';\nimport { MetricsCardTitle } from './metrics-card-title';\n\ntype PropsWithTitleDescription = {\n  title: string;\n  description?: string;\n  titleAs?: 'h2' | 'h3' | 'h4';\n  children?: never;\n  className?: string;\n};\n\ntype PropsWithChildren = {\n  title?: never;\n  description?: never;\n  children: ReactNode;\n  className?: string;\n};\n\nexport function MetricsCardTitleAndDescription(props: PropsWithTitleDescription | PropsWithChildren) {\n  if ('children' in props) {\n    return <div className={props.className}>{props.children}</div>;\n  }\n\n  const { title, description, titleAs } = props;\n\n  return (\n    <div className={props.className}>\n      <MetricsCardTitle as={titleAs}>{title}</MetricsCardTitle>\n      {description && <MetricsCardDescription>{description}</MetricsCardDescription>}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * One row under the top bar for a card's controls: small tabs, a legend, list column headers.\n * The first child sits on the left, the last on the right; either side may be omitted. When\n * both don't fit (a narrow card), the right side wraps to its own line, still on the right.\n */\nexport function MetricsCardToolbar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      className={cn(\n        'flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 [&>*:first-child]:min-w-0 [&>*:last-child:not(:first-child)]:ml-auto',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardTopBar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={cn('flex items-start gap-4 [&>:first-child]:min-w-0 [&>:first-child]:flex-1', className)}>\n      {children}\n    </div>\n  );\n}\n","import { MetricsCardActions } from './metrics-card-actions';\nimport { MetricsCardContent } from './metrics-card-content';\nimport { MetricsCardDescription } from './metrics-card-description';\nimport { MetricsCardError } from './metrics-card-error';\nimport { MetricsCardLoading } from './metrics-card-loading';\nimport { MetricsCardNoData } from './metrics-card-no-data';\nimport { MetricsCardRoot } from './metrics-card-root';\nimport { MetricsCardSummary } from './metrics-card-summary';\nimport { MetricsCardTab, MetricsCardTabs } from './metrics-card-tabs';\nimport { MetricsCardTitle } from './metrics-card-title';\nimport { MetricsCardTitleAndDescription } from './metrics-card-title-and-description';\nimport { MetricsCardToolbar } from './metrics-card-toolbar';\nimport { MetricsCardTopBar } from './metrics-card-top-bar';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\n\nexport const MetricsCard = Object.assign(MetricsCardRoot, {\n  Root: MetricsCardRoot,\n  Kpi: MetricsKpiCard,\n  TopBar: MetricsCardTopBar,\n  Toolbar: MetricsCardToolbar,\n  Tabs: MetricsCardTabs,\n  Tab: MetricsCardTab,\n  Actions: MetricsCardActions,\n  TitleAndDescription: MetricsCardTitleAndDescription,\n  Title: MetricsCardTitle,\n  Description: MetricsCardDescription,\n  Summary: MetricsCardSummary,\n  Loading: MetricsCardLoading,\n  Error: MetricsCardError,\n  Content: MetricsCardContent,\n  NoData: MetricsCardNoData,\n});\n"],"names":[],"mappings":"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"}

package/dist/{metrics-card-Bv2A5G41.cjs → metrics-card-CxOVpP1t.cjs}

@@ -8,7 +8,7 @@ const Card = require('./Card-RlL14eS5.cjs');
 const skeletonText = require('./skeleton-text-BIxW9ohx.cjs');
 const tabsRoot = require('./tabs-root-Phsi-P1b.cjs');
 const tabsList = require('./tabs-list-xikY_dug.cjs');
-const tabsTab = require('./tabs-tab-D9ndsGQu.cjs');
+const tabsTab = require('./tabs-tab-CqcY4tHE.cjs');
 const metricsKpiCard = require('./metrics-kpi-card-B-CKwzcj.cjs');
 
 function MetricsCardActions({
@@ -145,4 +145,4 @@ const MetricsCard = Object.assign(MetricsCardRoot, {
 });
 
 exports.MetricsCard = MetricsCard;
-//# sourceMappingURL=metrics-card-Bv2A5G41.cjs.map
+//# sourceMappingURL=metrics-card-CxOVpP1t.cjs.map

package/dist/{metrics-card-Bv2A5G41.cjs.map → metrics-card-CxOVpP1t.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"metrics-card-Bv2A5G41.cjs","sources":["../src/ds/components/MetricsCard/metrics-card-actions.tsx","../src/ds/components/MetricsCard/metrics-card-content.tsx","../src/ds/components/MetricsCard/metrics-card-description.tsx","../src/ds/components/MetricsCard/metrics-card-error.tsx","../src/ds/components/MetricsCard/metrics-card-loading.tsx","../src/ds/components/MetricsCard/metrics-card-no-data.tsx","../src/ds/components/MetricsCard/metrics-card-root.tsx","../src/ds/components/MetricsCard/metrics-card-summary.tsx","../src/ds/components/MetricsCard/metrics-card-tabs.tsx","../src/ds/components/MetricsCard/metrics-card-title.tsx","../src/ds/components/MetricsCard/metrics-card-title-and-description.tsx","../src/ds/components/MetricsCard/metrics-card-toolbar.tsx","../src/ds/components/MetricsCard/metrics-card-top-bar.tsx","../src/ds/components/MetricsCard/metrics-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/** Container for icon buttons / small actions in the top bar of a MetricsCard,\n *  placed between `TitleAndDescription` and `Summary` (which always renders last). */\nexport function MetricsCardActions({\n  children,\n  reveal = 'always',\n  className,\n}: {\n  children: ReactNode;\n  /**\n   * `hover`: the actions appear while the card is hovered or one of them has focus, so a page\n   * of cards doesn't read as a page of buttons.\n   */\n  reveal?: 'always' | 'hover';\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        'flex shrink-0 items-center gap-1 self-center',\n        reveal === 'hover' &&\n          'opacity-0 transition-opacity duration-150 group-hover/metrics-card:opacity-100 focus-within:opacity-100',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * Scrolls sideways only (wide tables). Vertical overflow is hidden: a chart filling a card with a\n * fractional height rounds 1px past it, which otherwise turns the content into a scroll box.\n * Tables inside a card drop the last row's border: the card edge already closes them.\n */\nexport function MetricsCardContent({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={cn('overflow-x-auto overflow-y-hidden [&_tbody>tr:last-child]:border-b-0', className)}>\n      {children}\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardDescription({ children, className }: { children: string; className?: string }) {\n  return (\n    <Txt tone=\"faint\" className={cn('mt-0.5', className)}>\n      {children}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-col items-center justify-center gap-3', className)}>\n      <Txt variant=\"caption\" className=\"text-destructive-foreground\">\n        {message}\n      </Txt>\n    </div>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardLoading({ className }: { className?: string }) {\n  return (\n    <div className={cn('flex items-center justify-center', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <div className={cn('flex h-full items-center justify-center', className)}>\n      <Txt tone=\"faint\">{message}</Txt>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <Card\n      className={cn(\n        'group/metrics-card grid min-h-72 min-w-80 flex-1 grid-rows-[auto_1fr] gap-4 px-4 py-3 2xl:min-w-120 md:min-w-88 lg:min-w-sm xl:min-w-104',\n        className,\n      )}\n    >\n      {children}\n    </Card>\n  );\n}\n","import { SkeletonText } from '@/ds/components/Skeleton';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/** Always the top bar's last item, so action buttons sit to its left and the value hugs the edge. */\nexport function MetricsCardSummary({\n  value,\n  label,\n  isLoading = false,\n  className,\n}: {\n  value: string;\n  label?: string;\n  /** Skeletons in the value's and label's own line boxes, so the top bar keeps its height. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  if (isLoading) {\n    return (\n      <div className={cn('order-last flex shrink-0 flex-col items-end', className)}>\n        <SkeletonText line=\"text-body\" className=\"h-4 w-14\" />\n        {label && <SkeletonText line=\"text-body mt-0.5\" className=\"w-10\" />}\n      </div>\n    );\n  }\n  return (\n    <div className={cn('order-last text-right', className)}>\n      <Txt tone=\"muted\" className=\"tabular-nums\">\n        {value}\n      </Txt>\n      {label && (\n        <Txt tone=\"faint\" className=\"mt-0.5\">\n          {label}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsCardTabsProps<T extends string> = {\n  value: T;\n  onValueChange: (value: T) => void;\n  /** `MetricsCard.Tab`s. */\n  children: ReactNode;\n};\n\n/**\n * The view switch in a metrics card's toolbar (e.g. Agents / Workflows / Tools): ghost tabs a\n * size under the control rung, so the switch stays quieter than the data. Metrics cards only;\n * anywhere else use `TabList`, which lines up with buttons and inputs.\n */\nexport function MetricsCardTabs<T extends string>({ value, onValueChange, children }: MetricsCardTabsProps<T>) {\n  return (\n    <Tabs<T> value={value} onValueChange={onValueChange} defaultTab={value}>\n      <TabList variant=\"pill-ghost\" size=\"sm\">\n        {children}\n      </TabList>\n    </Tabs>\n  );\n}\n\n/** One `MetricsCard.Tabs` option: 24px tall with 12px labels. */\nexport function MetricsCardTab({ className, ...props }: TabProps) {\n  return <Tab {...props} className={cn('h-6 px-2.5 text-column', className)} />;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardTitle({\n  children,\n  className,\n  as: Tag = 'h2',\n}: {\n  children: string;\n  className?: string;\n  as?: 'h2' | 'h3' | 'h4';\n}) {\n  return <Tag className={cn('text-body text-foreground', className)}>{children}</Tag>;\n}\n","import type { ReactNode } from 'react';\n\nimport { MetricsCardDescription } from './metrics-card-description';\nimport { MetricsCardTitle } from './metrics-card-title';\n\ntype PropsWithTitleDescription = {\n  title: string;\n  description?: string;\n  titleAs?: 'h2' | 'h3' | 'h4';\n  children?: never;\n  className?: string;\n};\n\ntype PropsWithChildren = {\n  title?: never;\n  description?: never;\n  children: ReactNode;\n  className?: string;\n};\n\nexport function MetricsCardTitleAndDescription(props: PropsWithTitleDescription | PropsWithChildren) {\n  if ('children' in props) {\n    return <div className={props.className}>{props.children}</div>;\n  }\n\n  const { title, description, titleAs } = props;\n\n  return (\n    <div className={props.className}>\n      <MetricsCardTitle as={titleAs}>{title}</MetricsCardTitle>\n      {description && <MetricsCardDescription>{description}</MetricsCardDescription>}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * One row under the top bar for a card's controls: small tabs, a legend, list column headers.\n * The first child sits on the left, the last on the right; either side may be omitted. When\n * both don't fit (a narrow card), the right side wraps to its own line, still on the right.\n */\nexport function MetricsCardToolbar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      className={cn(\n        'flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 [&>*:first-child]:min-w-0 [&>*:last-child:not(:first-child)]:ml-auto',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardTopBar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={cn('flex items-start gap-4 [&>:first-child]:min-w-0 [&>:first-child]:flex-1', className)}>\n      {children}\n    </div>\n  );\n}\n","import { MetricsCardActions } from './metrics-card-actions';\nimport { MetricsCardContent } from './metrics-card-content';\nimport { MetricsCardDescription } from './metrics-card-description';\nimport { MetricsCardError } from './metrics-card-error';\nimport { MetricsCardLoading } from './metrics-card-loading';\nimport { MetricsCardNoData } from './metrics-card-no-data';\nimport { MetricsCardRoot } from './metrics-card-root';\nimport { MetricsCardSummary } from './metrics-card-summary';\nimport { MetricsCardTab, MetricsCardTabs } from './metrics-card-tabs';\nimport { MetricsCardTitle } from './metrics-card-title';\nimport { MetricsCardTitleAndDescription } from './metrics-card-title-and-description';\nimport { MetricsCardToolbar } from './metrics-card-toolbar';\nimport { MetricsCardTopBar } from './metrics-card-top-bar';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\n\nexport const MetricsCard = Object.assign(MetricsCardRoot, {\n  Root: MetricsCardRoot,\n  Kpi: MetricsKpiCard,\n  TopBar: MetricsCardTopBar,\n  Toolbar: MetricsCardToolbar,\n  Tabs: MetricsCardTabs,\n  Tab: MetricsCardTab,\n  Actions: MetricsCardActions,\n  TitleAndDescription: MetricsCardTitleAndDescription,\n  Title: MetricsCardTitle,\n  Description: MetricsCardDescription,\n  Summary: MetricsCardSummary,\n  Loading: MetricsCardLoading,\n  Error: MetricsCardError,\n  Content: MetricsCardContent,\n  NoData: MetricsCardNoData,\n});\n"],"names":["jsx","cn","Txt","Spinner","Card","SkeletonText","Tabs","TabList","Tab","jsxs","MetricsKpiCard"],"mappings":"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"}
+{"version":3,"file":"metrics-card-CxOVpP1t.cjs","sources":["../src/ds/components/MetricsCard/metrics-card-actions.tsx","../src/ds/components/MetricsCard/metrics-card-content.tsx","../src/ds/components/MetricsCard/metrics-card-description.tsx","../src/ds/components/MetricsCard/metrics-card-error.tsx","../src/ds/components/MetricsCard/metrics-card-loading.tsx","../src/ds/components/MetricsCard/metrics-card-no-data.tsx","../src/ds/components/MetricsCard/metrics-card-root.tsx","../src/ds/components/MetricsCard/metrics-card-summary.tsx","../src/ds/components/MetricsCard/metrics-card-tabs.tsx","../src/ds/components/MetricsCard/metrics-card-title.tsx","../src/ds/components/MetricsCard/metrics-card-title-and-description.tsx","../src/ds/components/MetricsCard/metrics-card-toolbar.tsx","../src/ds/components/MetricsCard/metrics-card-top-bar.tsx","../src/ds/components/MetricsCard/metrics-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/** Container for icon buttons / small actions in the top bar of a MetricsCard,\n *  placed between `TitleAndDescription` and `Summary` (which always renders last). */\nexport function MetricsCardActions({\n  children,\n  reveal = 'always',\n  className,\n}: {\n  children: ReactNode;\n  /**\n   * `hover`: the actions appear while the card is hovered or one of them has focus, so a page\n   * of cards doesn't read as a page of buttons.\n   */\n  reveal?: 'always' | 'hover';\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        'flex shrink-0 items-center gap-1 self-center',\n        reveal === 'hover' &&\n          'opacity-0 transition-opacity duration-150 group-hover/metrics-card:opacity-100 focus-within:opacity-100',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * Scrolls sideways only (wide tables). Vertical overflow is hidden: a chart filling a card with a\n * fractional height rounds 1px past it, which otherwise turns the content into a scroll box.\n * Tables inside a card drop the last row's border: the card edge already closes them.\n */\nexport function MetricsCardContent({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={cn('overflow-x-auto overflow-y-hidden [&_tbody>tr:last-child]:border-b-0', className)}>\n      {children}\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardDescription({ children, className }: { children: string; className?: string }) {\n  return (\n    <Txt tone=\"faint\" className={cn('mt-0.5', className)}>\n      {children}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-col items-center justify-center gap-3', className)}>\n      <Txt variant=\"caption\" className=\"text-destructive-foreground\">\n        {message}\n      </Txt>\n    </div>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardLoading({ className }: { className?: string }) {\n  return (\n    <div className={cn('flex items-center justify-center', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <div className={cn('flex h-full items-center justify-center', className)}>\n      <Txt tone=\"faint\">{message}</Txt>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <Card\n      className={cn(\n        'group/metrics-card grid min-h-72 min-w-80 flex-1 grid-rows-[auto_1fr] gap-4 px-4 py-3 2xl:min-w-120 md:min-w-88 lg:min-w-sm xl:min-w-104',\n        className,\n      )}\n    >\n      {children}\n    </Card>\n  );\n}\n","import { SkeletonText } from '@/ds/components/Skeleton';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/** Always the top bar's last item, so action buttons sit to its left and the value hugs the edge. */\nexport function MetricsCardSummary({\n  value,\n  label,\n  isLoading = false,\n  className,\n}: {\n  value: string;\n  label?: string;\n  /** Skeletons in the value's and label's own line boxes, so the top bar keeps its height. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  if (isLoading) {\n    return (\n      <div className={cn('order-last flex shrink-0 flex-col items-end', className)}>\n        <SkeletonText line=\"text-body\" className=\"h-4 w-14\" />\n        {label && <SkeletonText line=\"text-body mt-0.5\" className=\"w-10\" />}\n      </div>\n    );\n  }\n  return (\n    <div className={cn('order-last text-right', className)}>\n      <Txt tone=\"muted\" className=\"tabular-nums\">\n        {value}\n      </Txt>\n      {label && (\n        <Txt tone=\"faint\" className=\"mt-0.5\">\n          {label}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsCardTabsProps<T extends string> = {\n  value: T;\n  onValueChange: (value: T) => void;\n  /** `MetricsCard.Tab`s. */\n  children: ReactNode;\n};\n\n/**\n * The view switch in a metrics card's toolbar (e.g. Agents / Workflows / Tools): ghost tabs a\n * size under the control rung, so the switch stays quieter than the data. Metrics cards only;\n * anywhere else use `TabList`, which lines up with buttons and inputs.\n */\nexport function MetricsCardTabs<T extends string>({ value, onValueChange, children }: MetricsCardTabsProps<T>) {\n  return (\n    <Tabs<T> value={value} onValueChange={onValueChange} defaultTab={value}>\n      <TabList variant=\"pill-ghost\" size=\"sm\">\n        {children}\n      </TabList>\n    </Tabs>\n  );\n}\n\n/** One `MetricsCard.Tabs` option: 24px tall with 12px labels. */\nexport function MetricsCardTab({ className, ...props }: TabProps) {\n  return <Tab {...props} className={cn('h-6 px-2.5 text-column', className)} />;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardTitle({\n  children,\n  className,\n  as: Tag = 'h2',\n}: {\n  children: string;\n  className?: string;\n  as?: 'h2' | 'h3' | 'h4';\n}) {\n  return <Tag className={cn('text-body text-foreground', className)}>{children}</Tag>;\n}\n","import type { ReactNode } from 'react';\n\nimport { MetricsCardDescription } from './metrics-card-description';\nimport { MetricsCardTitle } from './metrics-card-title';\n\ntype PropsWithTitleDescription = {\n  title: string;\n  description?: string;\n  titleAs?: 'h2' | 'h3' | 'h4';\n  children?: never;\n  className?: string;\n};\n\ntype PropsWithChildren = {\n  title?: never;\n  description?: never;\n  children: ReactNode;\n  className?: string;\n};\n\nexport function MetricsCardTitleAndDescription(props: PropsWithTitleDescription | PropsWithChildren) {\n  if ('children' in props) {\n    return <div className={props.className}>{props.children}</div>;\n  }\n\n  const { title, description, titleAs } = props;\n\n  return (\n    <div className={props.className}>\n      <MetricsCardTitle as={titleAs}>{title}</MetricsCardTitle>\n      {description && <MetricsCardDescription>{description}</MetricsCardDescription>}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * One row under the top bar for a card's controls: small tabs, a legend, list column headers.\n * The first child sits on the left, the last on the right; either side may be omitted. When\n * both don't fit (a narrow card), the right side wraps to its own line, still on the right.\n */\nexport function MetricsCardToolbar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      className={cn(\n        'flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 [&>*:first-child]:min-w-0 [&>*:last-child:not(:first-child)]:ml-auto',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardTopBar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={cn('flex items-start gap-4 [&>:first-child]:min-w-0 [&>:first-child]:flex-1', className)}>\n      {children}\n    </div>\n  );\n}\n","import { MetricsCardActions } from './metrics-card-actions';\nimport { MetricsCardContent } from './metrics-card-content';\nimport { MetricsCardDescription } from './metrics-card-description';\nimport { MetricsCardError } from './metrics-card-error';\nimport { MetricsCardLoading } from './metrics-card-loading';\nimport { MetricsCardNoData } from './metrics-card-no-data';\nimport { MetricsCardRoot } from './metrics-card-root';\nimport { MetricsCardSummary } from './metrics-card-summary';\nimport { MetricsCardTab, MetricsCardTabs } from './metrics-card-tabs';\nimport { MetricsCardTitle } from './metrics-card-title';\nimport { MetricsCardTitleAndDescription } from './metrics-card-title-and-description';\nimport { MetricsCardToolbar } from './metrics-card-toolbar';\nimport { MetricsCardTopBar } from './metrics-card-top-bar';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\n\nexport const MetricsCard = Object.assign(MetricsCardRoot, {\n  Root: MetricsCardRoot,\n  Kpi: MetricsKpiCard,\n  TopBar: MetricsCardTopBar,\n  Toolbar: MetricsCardToolbar,\n  Tabs: MetricsCardTabs,\n  Tab: MetricsCardTab,\n  Actions: MetricsCardActions,\n  TitleAndDescription: MetricsCardTitleAndDescription,\n  Title: MetricsCardTitle,\n  Description: MetricsCardDescription,\n  Summary: MetricsCardSummary,\n  Loading: MetricsCardLoading,\n  Error: MetricsCardError,\n  Content: MetricsCardContent,\n  NoData: MetricsCardNoData,\n});\n"],"names":["jsx","cn","Txt","Spinner","Card","SkeletonText","Tabs","TabList","Tab","jsxs","MetricsKpiCard"],"mappings":"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"}

package/dist/new/layout/app-shell.cjs.js

@@ -28,9 +28,10 @@ function AppShell({ children, className, mobileHeader, ref, sidebar, ...props })
               "data-slot": "app-shell-body",
               className: utils_cn.cn(
                 "flex min-h-0 flex-1 flex-col",
-                // Inset on every side; at lg with a sidebar column the sidebar's own padding provides the left gap.
-                // Disjoint longhands: consumer CSS that also emits `.p-1.5` can't override the lg inset.
-                "max-lg:p-1.5 lg:py-2 lg:pr-2",
+                // Below lg the sidebar is a drawer and the content runs edge to edge under the mobile header.
+                // From lg it's inset on every side; with a sidebar column the sidebar's own padding provides the left gap.
+                // Longhands only: consumer CSS that also emits a padding shorthand can't override the lg inset.
+                "lg:py-2 lg:pr-2",
                 sidebar ? "lg:pl-0" : "lg:pl-2"
               ),
               children
@@ -47,7 +48,11 @@ function MainCard({ children, className }) {
     "div",
     {
       "data-slot": "main-card",
-      className: utils_cn.cn("relative min-h-0 flex-1 overflow-hidden rounded-studio-frame p-px", primitives_raisedSurface.frameSurfaceStyle, className),
+      className: utils_cn.cn(
+        "relative min-h-0 flex-1 overflow-hidden lg:rounded-studio-frame lg:p-px lg:shadow-raised",
+        primitives_raisedSurface.frameFillStyle,
+        className
+      ),
       children
     }
   );

package/dist/new/layout/app-shell.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.cjs.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx","../../../src/ds/new/layout/app-shell/main-card.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './app-shell.css';\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mobileHeader?: ReactNode;\n  sidebar?: ReactNode;\n}\n\nexport function AppShell({ children, className, mobileHeader, ref, sidebar, ...props }: AppShellProps) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"app-shell\"\n      className={cn(\n        'h-full min-h-0',\n        sidebar && 'lg:grid lg:grid-cols-[auto_minmax(0,1fr)] lg:grid-rows-[1fr]',\n        className,\n      )}\n      {...props}\n    >\n      {sidebar}\n      <div data-slot=\"app-shell-content\" className=\"flex h-full min-h-0 min-w-0 flex-col\">\n        {mobileHeader}\n        <div\n          data-slot=\"app-shell-body\"\n          className={cn(\n            'flex min-h-0 flex-1 flex-col',\n            // Inset on every side; at lg with a sidebar column the sidebar's own padding provides the left gap.\n            // Disjoint longhands: consumer CSS that also emits `.p-1.5` can't override the lg inset.\n            'max-lg:p-1.5 lg:py-2 lg:pr-2',\n            sidebar ? 'lg:pl-0' : 'lg:pl-2',\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { frameSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// The app frame surface inside `AppShell`. Spacing around it is owned by the shell, not the card.\n// Reserve the 1px inset rim so child dividers don't paint over it and stack their alpha.\nexport function MainCard({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      data-slot=\"main-card\"\n      className={cn('relative min-h-0 flex-1 overflow-hidden rounded-studio-frame p-px', frameSurfaceStyle, className)}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","frameSurfaceStyle"],"mappings":";;;;;;;;AAYO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAW,cAAc,GAAA,EAAK,OAAA,EAAS,GAAG,KAAA,EAAM,EAAkB;AACrG,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,gBAAA;AAAA,QACA,OAAA,IAAW,8DAAA;AAAA,QACX;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBACDD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,WAAU,sCAAA,EAC1C,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,0BACDE,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,gBAAA;AAAA,cACV,SAAA,EAAWD,WAAA;AAAA,gBACT,8BAAA;AAAA;AAAA;AAAA,gBAGA,8BAAA;AAAA,gBACA,UAAU,SAAA,GAAY;AAAA,eACxB;AAAA,cAEC;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;ACnCO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAWD,WAAA,CAAG,mEAAA,EAAqEE,0CAAA,EAAmB,SAAS,CAAA;AAAA,MAE9G;AAAA;AAAA,GACH;AAEJ;;;;;"}
+{"version":3,"file":"app-shell.cjs.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx","../../../src/ds/new/layout/app-shell/main-card.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './app-shell.css';\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mobileHeader?: ReactNode;\n  sidebar?: ReactNode;\n}\n\nexport function AppShell({ children, className, mobileHeader, ref, sidebar, ...props }: AppShellProps) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"app-shell\"\n      className={cn(\n        'h-full min-h-0',\n        sidebar && 'lg:grid lg:grid-cols-[auto_minmax(0,1fr)] lg:grid-rows-[1fr]',\n        className,\n      )}\n      {...props}\n    >\n      {sidebar}\n      <div data-slot=\"app-shell-content\" className=\"flex h-full min-h-0 min-w-0 flex-col\">\n        {mobileHeader}\n        <div\n          data-slot=\"app-shell-body\"\n          className={cn(\n            'flex min-h-0 flex-1 flex-col',\n            // Below lg the sidebar is a drawer and the content runs edge to edge under the mobile header.\n            // From lg it's inset on every side; with a sidebar column the sidebar's own padding provides the left gap.\n            // Longhands only: consumer CSS that also emits a padding shorthand can't override the lg inset.\n            'lg:py-2 lg:pr-2',\n            sidebar ? 'lg:pl-0' : 'lg:pl-2',\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { frameFillStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// The app frame surface inside `AppShell`. Spacing around it is owned by the shell, not the card.\n// Framed only from lg, where the sidebar sits beside it (the sidebar's drawer breakpoint); below lg it is\n// flat page content under the mobile header. lg-only classes, not max-lg overrides, so consumer CSS that\n// also emits the base classes can't undo the flat state by source order.\n// Reserve the 1px inset rim so child dividers don't paint over it and stack their alpha.\nexport function MainCard({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      data-slot=\"main-card\"\n      className={cn(\n        'relative min-h-0 flex-1 overflow-hidden lg:rounded-studio-frame lg:p-px lg:shadow-raised',\n        frameFillStyle,\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","frameFillStyle"],"mappings":";;;;;;;;AAYO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAW,cAAc,GAAA,EAAK,OAAA,EAAS,GAAG,KAAA,EAAM,EAAkB;AACrG,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,gBAAA;AAAA,QACA,OAAA,IAAW,8DAAA;AAAA,QACX;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBACDD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,WAAU,sCAAA,EAC1C,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,0BACDE,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,gBAAA;AAAA,cACV,SAAA,EAAWD,WAAA;AAAA,gBACT,8BAAA;AAAA;AAAA;AAAA;AAAA,gBAIA,iBAAA;AAAA,gBACA,UAAU,SAAA,GAAY;AAAA,eACxB;AAAA,cAEC;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;ACjCO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAWD,WAAA;AAAA,QACT,0FAAA;AAAA,QACAE,uCAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;;"}

package/dist/new/layout/app-shell.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { c as cn } from '../../cn-coERSHz5.js';
-import { frameSurfaceStyle } from '../../primitives/raised-surface.es.js';
+import { frameFillStyle } from '../../primitives/raised-surface.es.js';
 
 import '../../app-shell.css';function AppShell({ children, className, mobileHeader, ref, sidebar, ...props }) {
   return /* @__PURE__ */ jsxs(
@@ -24,9 +24,10 @@ import '../../app-shell.css';function AppShell({ children, className, mobileHead
               "data-slot": "app-shell-body",
               className: cn(
                 "flex min-h-0 flex-1 flex-col",
-                // Inset on every side; at lg with a sidebar column the sidebar's own padding provides the left gap.
-                // Disjoint longhands: consumer CSS that also emits `.p-1.5` can't override the lg inset.
-                "max-lg:p-1.5 lg:py-2 lg:pr-2",
+                // Below lg the sidebar is a drawer and the content runs edge to edge under the mobile header.
+                // From lg it's inset on every side; with a sidebar column the sidebar's own padding provides the left gap.
+                // Longhands only: consumer CSS that also emits a padding shorthand can't override the lg inset.
+                "lg:py-2 lg:pr-2",
                 sidebar ? "lg:pl-0" : "lg:pl-2"
               ),
               children
@@ -43,7 +44,11 @@ function MainCard({ children, className }) {
     "div",
     {
       "data-slot": "main-card",
-      className: cn("relative min-h-0 flex-1 overflow-hidden rounded-studio-frame p-px", frameSurfaceStyle, className),
+      className: cn(
+        "relative min-h-0 flex-1 overflow-hidden lg:rounded-studio-frame lg:p-px lg:shadow-raised",
+        frameFillStyle,
+        className
+      ),
       children
     }
   );

package/dist/new/layout/app-shell.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.es.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx","../../../src/ds/new/layout/app-shell/main-card.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './app-shell.css';\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mobileHeader?: ReactNode;\n  sidebar?: ReactNode;\n}\n\nexport function AppShell({ children, className, mobileHeader, ref, sidebar, ...props }: AppShellProps) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"app-shell\"\n      className={cn(\n        'h-full min-h-0',\n        sidebar && 'lg:grid lg:grid-cols-[auto_minmax(0,1fr)] lg:grid-rows-[1fr]',\n        className,\n      )}\n      {...props}\n    >\n      {sidebar}\n      <div data-slot=\"app-shell-content\" className=\"flex h-full min-h-0 min-w-0 flex-col\">\n        {mobileHeader}\n        <div\n          data-slot=\"app-shell-body\"\n          className={cn(\n            'flex min-h-0 flex-1 flex-col',\n            // Inset on every side; at lg with a sidebar column the sidebar's own padding provides the left gap.\n            // Disjoint longhands: consumer CSS that also emits `.p-1.5` can't override the lg inset.\n            'max-lg:p-1.5 lg:py-2 lg:pr-2',\n            sidebar ? 'lg:pl-0' : 'lg:pl-2',\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { frameSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// The app frame surface inside `AppShell`. Spacing around it is owned by the shell, not the card.\n// Reserve the 1px inset rim so child dividers don't paint over it and stack their alpha.\nexport function MainCard({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      data-slot=\"main-card\"\n      className={cn('relative min-h-0 flex-1 overflow-hidden rounded-studio-frame p-px', frameSurfaceStyle, className)}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAYO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAW,cAAc,GAAA,EAAK,OAAA,EAAS,GAAG,KAAA,EAAM,EAAkB;AACrG,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,gBAAA;AAAA,QACA,OAAA,IAAW,8DAAA;AAAA,QACX;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBACD,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,WAAU,sCAAA,EAC1C,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,0BACD,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,gBAAA;AAAA,cACV,SAAA,EAAW,EAAA;AAAA,gBACT,8BAAA;AAAA;AAAA;AAAA,gBAGA,8BAAA;AAAA,gBACA,UAAU,SAAA,GAAY;AAAA,eACxB;AAAA,cAEC;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;ACnCO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,mEAAA,EAAqE,iBAAA,EAAmB,SAAS,CAAA;AAAA,MAE9G;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"app-shell.es.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx","../../../src/ds/new/layout/app-shell/main-card.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './app-shell.css';\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mobileHeader?: ReactNode;\n  sidebar?: ReactNode;\n}\n\nexport function AppShell({ children, className, mobileHeader, ref, sidebar, ...props }: AppShellProps) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"app-shell\"\n      className={cn(\n        'h-full min-h-0',\n        sidebar && 'lg:grid lg:grid-cols-[auto_minmax(0,1fr)] lg:grid-rows-[1fr]',\n        className,\n      )}\n      {...props}\n    >\n      {sidebar}\n      <div data-slot=\"app-shell-content\" className=\"flex h-full min-h-0 min-w-0 flex-col\">\n        {mobileHeader}\n        <div\n          data-slot=\"app-shell-body\"\n          className={cn(\n            'flex min-h-0 flex-1 flex-col',\n            // Below lg the sidebar is a drawer and the content runs edge to edge under the mobile header.\n            // From lg it's inset on every side; with a sidebar column the sidebar's own padding provides the left gap.\n            // Longhands only: consumer CSS that also emits a padding shorthand can't override the lg inset.\n            'lg:py-2 lg:pr-2',\n            sidebar ? 'lg:pl-0' : 'lg:pl-2',\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { frameFillStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// The app frame surface inside `AppShell`. Spacing around it is owned by the shell, not the card.\n// Framed only from lg, where the sidebar sits beside it (the sidebar's drawer breakpoint); below lg it is\n// flat page content under the mobile header. lg-only classes, not max-lg overrides, so consumer CSS that\n// also emits the base classes can't undo the flat state by source order.\n// Reserve the 1px inset rim so child dividers don't paint over it and stack their alpha.\nexport function MainCard({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      data-slot=\"main-card\"\n      className={cn(\n        'relative min-h-0 flex-1 overflow-hidden lg:rounded-studio-frame lg:p-px lg:shadow-raised',\n        frameFillStyle,\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAYO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAW,cAAc,GAAA,EAAK,OAAA,EAAS,GAAG,KAAA,EAAM,EAAkB;AACrG,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,gBAAA;AAAA,QACA,OAAA,IAAW,8DAAA;AAAA,QACX;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBACD,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,WAAU,sCAAA,EAC1C,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,0BACD,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,gBAAA;AAAA,cACV,SAAA,EAAW,EAAA;AAAA,gBACT,8BAAA;AAAA;AAAA;AAAA;AAAA,gBAIA,iBAAA;AAAA,gBACA,UAAU,SAAA,GAAY;AAAA,eACxB;AAAA,cAEC;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;ACjCO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,0FAAA;AAAA,QACA,cAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/new/layout/page-header.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const pageHeader = require('../../page-header-CLxPq7T5.cjs');
+const pageHeader = require('../../page-header-9Q9vOrh-.cjs');
 
 
 

package/dist/new/layout/page-header.es.js

@@ -1,2 +1,2 @@
-export { P as PageHeader } from '../../page-header-Bf0zLkyY.js';
+export { P as PageHeader } from '../../page-header-d2cK2zOg.js';
 //# sourceMappingURL=page-header.es.js.map

package/dist/{page-header-CLxPq7T5.cjs → page-header-9Q9vOrh-.cjs}

@@ -115,16 +115,10 @@ function groupSlots(items) {
 function PageHeaderRoot({ children, className, spacing = "default", ...props }) {
   const items = React.Children.toArray(children);
   const { eyebrows, icons, headline, below, actions } = groupSlots(items);
-  const hasControls = icons.length > 0 || actions.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "header",
     {
-      className: utils_cn.cn(
-        "relative flex w-full flex-col",
-        !hasControls && "gap-1",
-        className,
-        spacing === "breathing" && "pt-10"
-      ),
+      className: utils_cn.cn("relative flex w-full flex-col", className, spacing === "breathing" && "pt-10"),
       "data-page-header-spacing": spacing === "breathing" ? spacing : void 0,
       ...props,
       children: [
@@ -132,7 +126,7 @@ function PageHeaderRoot({ children, className, spacing = "default", ...props })
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start gap-3", children: [
           icons,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-            headline.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex min-w-0 items-start gap-3", hasControls && "py-1"), children: headline }),
+            headline.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-start gap-3 py-1", children: headline }),
             below
           ] }),
           actions
@@ -152,4 +146,4 @@ const PageHeader = Object.assign(PageHeaderRoot, {
 });
 
 exports.PageHeader = PageHeader;
-//# sourceMappingURL=page-header-CLxPq7T5.cjs.map
+//# sourceMappingURL=page-header-9Q9vOrh-.cjs.map

package/dist/page-header-9Q9vOrh-.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-9Q9vOrh-.cjs","sources":["../src/ds/new/layout/page-header/page-header-action.tsx","../src/ds/new/layout/page-header/page-header-description.tsx","../src/ds/new/layout/page-header/page-header-eyebrow.tsx","../src/ds/new/layout/page-header/page-header-icon.tsx","../src/ds/new/layout/page-header/page-header-meta.tsx","../src/ds/new/layout/page-header/page-header-title.tsx","../src/ds/new/layout/page-header/page-header-root.tsx","../src/ds/new/layout/page-header/page-header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderActionProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderAction({ className, ...props }: PageHeaderActionProps) {\n  return (\n    <div\n      data-slot=\"page-header-action\"\n      className={cn('ml-auto flex min-h-control-lg shrink-0 items-center self-start', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderDescriptionProps extends ComponentPropsWithoutRef<'p'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderDescription({ children, className, isLoading, ...props }: PageHeaderDescriptionProps) {\n  return (\n    <Txt\n      variant=\"caption\"\n      tone=\"muted\"\n      data-slot=\"page-header-description\"\n      className={cn(\n        'flex max-w-140 flex-wrap gap-x-4 gap-y-1',\n        isLoading && 'w-160 max-w-4/5 animate-pulse rounded-md bg-muted',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </Txt>\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderEyebrowProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderEyebrow({ className, ...props }: PageHeaderEyebrowProps) {\n  return (\n    <div\n      data-slot=\"page-header-eyebrow\"\n      {...props}\n      className={cn(\n        'text-caption text-muted-foreground',\n        'flex min-w-0 items-center',\n        '*:inline-flex *:items-center *:gap-1 *:rounded-sm *:transition-colors *:hover:text-foreground',\n        className,\n      )}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderIconProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderIcon({ className, ...props }: PageHeaderIconProps) {\n  return (\n    <div\n      data-slot=\"page-header-icon\"\n      className={cn('flex min-h-control-lg items-center self-start text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderMetaProps extends ComponentPropsWithoutRef<'div'> {\n  beside?: boolean;\n}\n\nexport function PageHeaderMeta({ beside = false, className, ...props }: PageHeaderMetaProps) {\n  return (\n    <div\n      data-slot=\"page-header-meta\"\n      data-placement={beside ? 'beside' : 'below'}\n      {...props}\n      className={cn(\n        'text-meta text-muted-foreground',\n        'flex min-w-0 flex-wrap items-center gap-2',\n        beside && 'min-h-6 shrink-0',\n        className,\n      )}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderTitleProps extends ComponentPropsWithoutRef<'h1'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderTitle({ children, className, isLoading, ...props }: PageHeaderTitleProps) {\n  return (\n    <Txt\n      as=\"h1\"\n      variant=\"heading\"\n      tone=\"ink\"\n      data-slot=\"page-header-title\"\n      className={cn(\n        'flex min-w-0 items-center gap-2',\n        isLoading && 'w-60 max-w-1/2 animate-pulse rounded-md bg-fill',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </Txt>\n  );\n}\n","import { Children, isValidElement } from 'react';\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderEyebrow } from './page-header-eyebrow';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport type { PageHeaderMetaProps } from './page-header-meta';\nimport { PageHeaderTitle } from './page-header-title';\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderRootProps = ComponentPropsWithoutRef<'header'> & {\n  spacing?: 'default' | 'breathing';\n};\n\nfunction isSlot(child: ReactNode, type: ElementType) {\n  return isValidElement(child) && child.type === type;\n}\n\nfunction isBesideMeta(child: ReactNode) {\n  return isValidElement<PageHeaderMetaProps>(child) && child.type === PageHeaderMeta && Boolean(child.props.beside);\n}\n\nfunction groupSlots(items: ReactNode[]) {\n  const eyebrows = items.filter(child => isSlot(child, PageHeaderEyebrow));\n  const icons = items.filter(child => isSlot(child, PageHeaderIcon));\n  const headline = [...items.filter(child => isSlot(child, PageHeaderTitle)), ...items.filter(isBesideMeta)];\n  // Actions sit outside the title column so their height never affects title/meta/description alignment.\n  const actions = items.filter(child => isSlot(child, PageHeaderAction));\n  const placed = [...eyebrows, ...icons, ...headline, ...actions];\n  const below = items.filter(child => !placed.includes(child));\n  return { eyebrows, icons, headline, below, actions };\n}\n\nexport function PageHeaderRoot({ children, className, spacing = 'default', ...props }: PageHeaderRootProps) {\n  const items = Children.toArray(children);\n  const { eyebrows, icons, headline, below, actions } = groupSlots(items);\n\n  return (\n    <header\n      className={cn('relative flex w-full flex-col', className, spacing === 'breathing' && 'pt-10')}\n      data-page-header-spacing={spacing === 'breathing' ? spacing : undefined}\n      {...props}\n    >\n      {eyebrows}\n      <div className=\"flex w-full items-start gap-3\">\n        {icons}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          {headline.length > 0 && <div className=\"flex min-w-0 items-start gap-3 py-1\">{headline}</div>}\n          {below}\n        </div>\n        {actions}\n      </div>\n    </header>\n  );\n}\n","import './page-header.css';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderEyebrow } from './page-header-eyebrow';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport { PageHeaderRoot } from './page-header-root';\nimport { PageHeaderTitle } from './page-header-title';\n\nexport type { PageHeaderActionProps } from './page-header-action';\nexport type { PageHeaderDescriptionProps } from './page-header-description';\nexport type { PageHeaderEyebrowProps } from './page-header-eyebrow';\nexport type { PageHeaderIconProps } from './page-header-icon';\nexport type { PageHeaderMetaProps } from './page-header-meta';\nexport type { PageHeaderRootProps } from './page-header-root';\nexport type { PageHeaderTitleProps } from './page-header-title';\n\nexport const PageHeader = Object.assign(PageHeaderRoot, {\n  Eyebrow: PageHeaderEyebrow,\n  Icon: PageHeaderIcon,\n  Title: PageHeaderTitle,\n  Meta: PageHeaderMeta,\n  Description: PageHeaderDescription,\n  Action: PageHeaderAction,\n});\n"],"names":["jsx","cn","Txt","Fragment","isValidElement","Children","jsxs"],"mappings":"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"}

package/dist/{page-header-Bf0zLkyY.js → page-header-d2cK2zOg.js}

@@ -113,16 +113,10 @@ function groupSlots(items) {
 function PageHeaderRoot({ children, className, spacing = "default", ...props }) {
   const items = Children.toArray(children);
   const { eyebrows, icons, headline, below, actions } = groupSlots(items);
-  const hasControls = icons.length > 0 || actions.length > 0;
   return /* @__PURE__ */ jsxs(
     "header",
     {
-      className: cn(
-        "relative flex w-full flex-col",
-        !hasControls && "gap-1",
-        className,
-        spacing === "breathing" && "pt-10"
-      ),
+      className: cn("relative flex w-full flex-col", className, spacing === "breathing" && "pt-10"),
       "data-page-header-spacing": spacing === "breathing" ? spacing : void 0,
       ...props,
       children: [
@@ -130,7 +124,7 @@ function PageHeaderRoot({ children, className, spacing = "default", ...props })
         /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-3", children: [
           icons,
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-            headline.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-start gap-3", hasControls && "py-1"), children: headline }),
+            headline.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-start gap-3 py-1", children: headline }),
             below
           ] }),
           actions
@@ -150,4 +144,4 @@ const PageHeader = Object.assign(PageHeaderRoot, {
 });
 
 export { PageHeader as P };
-//# sourceMappingURL=page-header-Bf0zLkyY.js.map
+//# sourceMappingURL=page-header-d2cK2zOg.js.map

package/dist/page-header-d2cK2zOg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-d2cK2zOg.js","sources":["../src/ds/new/layout/page-header/page-header-action.tsx","../src/ds/new/layout/page-header/page-header-description.tsx","../src/ds/new/layout/page-header/page-header-eyebrow.tsx","../src/ds/new/layout/page-header/page-header-icon.tsx","../src/ds/new/layout/page-header/page-header-meta.tsx","../src/ds/new/layout/page-header/page-header-title.tsx","../src/ds/new/layout/page-header/page-header-root.tsx","../src/ds/new/layout/page-header/page-header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderActionProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderAction({ className, ...props }: PageHeaderActionProps) {\n  return (\n    <div\n      data-slot=\"page-header-action\"\n      className={cn('ml-auto flex min-h-control-lg shrink-0 items-center self-start', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderDescriptionProps extends ComponentPropsWithoutRef<'p'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderDescription({ children, className, isLoading, ...props }: PageHeaderDescriptionProps) {\n  return (\n    <Txt\n      variant=\"caption\"\n      tone=\"muted\"\n      data-slot=\"page-header-description\"\n      className={cn(\n        'flex max-w-140 flex-wrap gap-x-4 gap-y-1',\n        isLoading && 'w-160 max-w-4/5 animate-pulse rounded-md bg-muted',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </Txt>\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderEyebrowProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderEyebrow({ className, ...props }: PageHeaderEyebrowProps) {\n  return (\n    <div\n      data-slot=\"page-header-eyebrow\"\n      {...props}\n      className={cn(\n        'text-caption text-muted-foreground',\n        'flex min-w-0 items-center',\n        '*:inline-flex *:items-center *:gap-1 *:rounded-sm *:transition-colors *:hover:text-foreground',\n        className,\n      )}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderIconProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderIcon({ className, ...props }: PageHeaderIconProps) {\n  return (\n    <div\n      data-slot=\"page-header-icon\"\n      className={cn('flex min-h-control-lg items-center self-start text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderMetaProps extends ComponentPropsWithoutRef<'div'> {\n  beside?: boolean;\n}\n\nexport function PageHeaderMeta({ beside = false, className, ...props }: PageHeaderMetaProps) {\n  return (\n    <div\n      data-slot=\"page-header-meta\"\n      data-placement={beside ? 'beside' : 'below'}\n      {...props}\n      className={cn(\n        'text-meta text-muted-foreground',\n        'flex min-w-0 flex-wrap items-center gap-2',\n        beside && 'min-h-6 shrink-0',\n        className,\n      )}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderTitleProps extends ComponentPropsWithoutRef<'h1'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderTitle({ children, className, isLoading, ...props }: PageHeaderTitleProps) {\n  return (\n    <Txt\n      as=\"h1\"\n      variant=\"heading\"\n      tone=\"ink\"\n      data-slot=\"page-header-title\"\n      className={cn(\n        'flex min-w-0 items-center gap-2',\n        isLoading && 'w-60 max-w-1/2 animate-pulse rounded-md bg-fill',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </Txt>\n  );\n}\n","import { Children, isValidElement } from 'react';\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderEyebrow } from './page-header-eyebrow';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport type { PageHeaderMetaProps } from './page-header-meta';\nimport { PageHeaderTitle } from './page-header-title';\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderRootProps = ComponentPropsWithoutRef<'header'> & {\n  spacing?: 'default' | 'breathing';\n};\n\nfunction isSlot(child: ReactNode, type: ElementType) {\n  return isValidElement(child) && child.type === type;\n}\n\nfunction isBesideMeta(child: ReactNode) {\n  return isValidElement<PageHeaderMetaProps>(child) && child.type === PageHeaderMeta && Boolean(child.props.beside);\n}\n\nfunction groupSlots(items: ReactNode[]) {\n  const eyebrows = items.filter(child => isSlot(child, PageHeaderEyebrow));\n  const icons = items.filter(child => isSlot(child, PageHeaderIcon));\n  const headline = [...items.filter(child => isSlot(child, PageHeaderTitle)), ...items.filter(isBesideMeta)];\n  // Actions sit outside the title column so their height never affects title/meta/description alignment.\n  const actions = items.filter(child => isSlot(child, PageHeaderAction));\n  const placed = [...eyebrows, ...icons, ...headline, ...actions];\n  const below = items.filter(child => !placed.includes(child));\n  return { eyebrows, icons, headline, below, actions };\n}\n\nexport function PageHeaderRoot({ children, className, spacing = 'default', ...props }: PageHeaderRootProps) {\n  const items = Children.toArray(children);\n  const { eyebrows, icons, headline, below, actions } = groupSlots(items);\n\n  return (\n    <header\n      className={cn('relative flex w-full flex-col', className, spacing === 'breathing' && 'pt-10')}\n      data-page-header-spacing={spacing === 'breathing' ? spacing : undefined}\n      {...props}\n    >\n      {eyebrows}\n      <div className=\"flex w-full items-start gap-3\">\n        {icons}\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          {headline.length > 0 && <div className=\"flex min-w-0 items-start gap-3 py-1\">{headline}</div>}\n          {below}\n        </div>\n        {actions}\n      </div>\n    </header>\n  );\n}\n","import './page-header.css';\n\nimport { PageHeaderAction } from './page-header-action';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderEyebrow } from './page-header-eyebrow';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport { PageHeaderRoot } from './page-header-root';\nimport { PageHeaderTitle } from './page-header-title';\n\nexport type { PageHeaderActionProps } from './page-header-action';\nexport type { PageHeaderDescriptionProps } from './page-header-description';\nexport type { PageHeaderEyebrowProps } from './page-header-eyebrow';\nexport type { PageHeaderIconProps } from './page-header-icon';\nexport type { PageHeaderMetaProps } from './page-header-meta';\nexport type { PageHeaderRootProps } from './page-header-root';\nexport type { PageHeaderTitleProps } from './page-header-title';\n\nexport const PageHeader = Object.assign(PageHeaderRoot, {\n  Eyebrow: PageHeaderEyebrow,\n  Icon: PageHeaderIcon,\n  Title: PageHeaderTitle,\n  Meta: PageHeaderMeta,\n  Description: PageHeaderDescription,\n  Action: PageHeaderAction,\n});\n"],"names":[],"mappings":";;;;;AAMO,SAAS,gBAAA,CAAiB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA0B;AAC/E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,oBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,gEAAA,EAAkE,SAAS,CAAA;AAAA,MACxF,GAAG;AAAA;AAAA,GACN;AAEJ;;ACLO,SAAS,sBAAsB,EAAE,QAAA,EAAU,WAAW,SAAA,EAAW,GAAG,OAAM,EAA+B;AAC9G,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,0CAAA;AAAA,QACA,SAAA,IAAa,mDAAA;AAAA,QACb;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,SAAA,mBAAY,GAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA,GAAA,EAAM,CAAA,GAAM;AAAA;AAAA,GAC7B;AAEJ;;ACnBO,SAAS,iBAAA,CAAkB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA2B;AACjF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,qBAAA;AAAA,MACT,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA;AAAA,QACT,oCAAA;AAAA,QACA,2BAAA;AAAA,QACA,+FAAA;AAAA,QACA;AAAA;AACF;AAAA,GACF;AAEJ;;ACbO,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAC3E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,qEAAA,EAAuE,SAAS,CAAA;AAAA,MAC7F,GAAG;AAAA;AAAA,GACN;AAEJ;;ACNO,SAAS,eAAe,EAAE,MAAA,GAAS,OAAO,SAAA,EAAW,GAAG,OAAM,EAAwB;AAC3F,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,gBAAA,EAAgB,SAAS,QAAA,GAAW,OAAA;AAAA,MACnC,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA;AAAA,QACT,iCAAA;AAAA,QACA,2CAAA;AAAA,QACA,MAAA,IAAU,kBAAA;AAAA,QACV;AAAA;AACF;AAAA,GACF;AAEJ;;ACbO,SAAS,gBAAgB,EAAE,QAAA,EAAU,WAAW,SAAA,EAAW,GAAG,OAAM,EAAyB;AAClG,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,IAAA;AAAA,MACH,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,KAAA;AAAA,MACL,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,iCAAA;AAAA,QACA,SAAA,IAAa,iDAAA;AAAA,QACb;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,SAAA,mBAAY,GAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA,GAAA,EAAM,CAAA,GAAM;AAAA;AAAA,GAC7B;AAEJ;;ACXA,SAAS,MAAA,CAAO,OAAkB,IAAA,EAAmB;AACnD,EAAA,OAAO,cAAA,CAAe,KAAK,CAAA,IAAK,KAAA,CAAM,IAAA,KAAS,IAAA;AACjD;AAEA,SAAS,aAAa,KAAA,EAAkB;AACtC,EAAA,OAAO,cAAA,CAAoC,KAAK,CAAA,IAAK,KAAA,CAAM,SAAS,cAAA,IAAkB,OAAA,CAAQ,KAAA,CAAM,KAAA,CAAM,MAAM,CAAA;AAClH;AAEA,SAAS,WAAW,KAAA,EAAoB;AACtC,EAAA,MAAM,WAAW,KAAA,CAAM,MAAA,CAAO,WAAS,MAAA,CAAO,KAAA,EAAO,iBAAiB,CAAC,CAAA;AACvE,EAAA,MAAM,QAAQ,KAAA,CAAM,MAAA,CAAO,WAAS,MAAA,CAAO,KAAA,EAAO,cAAc,CAAC,CAAA;AACjE,EAAA,MAAM,QAAA,GAAW,CAAC,GAAG,KAAA,CAAM,OAAO,CAAA,KAAA,KAAS,MAAA,CAAO,KAAA,EAAO,eAAe,CAAC,CAAA,EAAG,GAAG,KAAA,CAAM,MAAA,CAAO,YAAY,CAAC,CAAA;AAEzG,EAAA,MAAM,UAAU,KAAA,CAAM,MAAA,CAAO,WAAS,MAAA,CAAO,KAAA,EAAO,gBAAgB,CAAC,CAAA;AACrE,EAAA,MAAM,MAAA,GAAS,CAAC,GAAG,QAAA,EAAU,GAAG,KAAA,EAAO,GAAG,QAAA,EAAU,GAAG,OAAO,CAAA;AAC9D,EAAA,MAAM,KAAA,GAAQ,MAAM,MAAA,CAAO,CAAA,KAAA,KAAS,CAAC,MAAA,CAAO,QAAA,CAAS,KAAK,CAAC,CAAA;AAC3D,EAAA,OAAO,EAAE,QAAA,EAAU,KAAA,EAAO,QAAA,EAAU,OAAO,OAAA,EAAQ;AACrD;AAEO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,SAAA,EAAW,GAAG,OAAM,EAAwB;AAC1G,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA;AACvC,EAAA,MAAM,EAAE,UAAU,KAAA,EAAO,QAAA,EAAU,OAAO,OAAA,EAAQ,GAAI,WAAW,KAAK,CAAA;AAEtE,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,EAAA,CAAG,+BAAA,EAAiC,SAAA,EAAW,OAAA,KAAY,eAAe,OAAO,CAAA;AAAA,MAC5F,0BAAA,EAA0B,OAAA,KAAY,WAAA,GAAc,OAAA,GAAU,MAAA;AAAA,MAC7D,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+BAAA,EACZ,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,0BACD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oCAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,CAAS,SAAS,CAAA,oBAAK,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uCAAuC,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,YACtF;AAAA,WAAA,EACH,CAAA;AAAA,UACC;AAAA,SAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ;;ACrCO,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,cAAA,EAAgB;AAAA,EACtD,OAAA,EAAS,iBAAA;AAAA,EACT,IAAA,EAAM,cAAA;AAAA,EACN,KAAA,EAAO,eAAA;AAAA,EACP,IAAA,EAAM,cAAA;AAAA,EACN,WAAA,EAAa,qBAAA;AAAA,EACb,MAAA,EAAQ;AACV,CAAC;;;;"}