@mastra/playground-ui 68.0.0 → 69.0.0-alpha.0

package/dist/domains/metrics/components/chart-card.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-card.cjs.js","names":["cn","MetricsCard","Maximize2Icon"],"sources":["../../../../src/domains/metrics/components/chart-card.tsx"],"sourcesContent":["import { Maximize2Icon } from 'lucide-react';\nimport type { ElementType, ReactNode } from 'react';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsCardTitleMenuProps, MetricsCardTotalPart } from '@/ds/components/MetricsCard';\nimport type { LinkComponentProps } from '@/lib/framework';\n\n/** What `LinkComponent` gets: anchor props, with `href` always set. */\ntype ChartCardLinkProps = LinkComponentProps & { href: string };\nimport { cn } from '@/lib/utils';\n\nexport type ChartCardProps<V extends string = string> = {\n  /**\n   * Card layout. `default` and `compact` share one header: the title, and `total` on the right.\n   * - `default`: a 240px body.\n   * - `compact`: one card height, so cards in a grid line up; the chart fills what the toolbar\n   *   leaves. For small cards in a grid.\n   * - `hero`: one large chart that is the page's subject (an explorer): the title as a label over\n   *   a large `total`, with `change` beside it, and `actions` always shown. The body is as tall\n   *   as its content.\n   */\n  variant?: 'default' | 'compact' | 'hero';\n  title: string;\n  /**\n   * Makes the title a link, marked by an expand icon, to a fuller view of the chart (e.g. the\n   * chart in an explorer). Ignored with `titleMenu` and on `hero` cards.\n   */\n  href?: string;\n  /** Renders `href` links, e.g. the app's router link; it gets anchor props. Default `a`. */\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  /**\n   * Makes the title a dropdown of the card's views (e.g. \"Agent latency\", \"Tool latency\"), in\n   * place of tabs. `title` is the picked view's label. Ignored on `hero` cards.\n   */\n  titleMenu?: Omit<MetricsCardTitleMenuProps<V>, 'title' | 'className'>;\n  /**\n   * The card's headline number: right of the title, or the large value on `hero` cards. A card\n   * charting a few different things can pass one total each, marked with its series' color.\n   */\n  total?: string | readonly MetricsCardTotalPart[];\n  /** `hero` cards: the change against the previous period, e.g. \"+71.4%\". */\n  change?: string;\n  /** A skeleton in place of `total`. */\n  isLoading?: boolean;\n  /** Top-bar buttons, e.g. \"View in traces\": revealed on hover, except on `hero` cards. */\n  actions?: ReactNode;\n  /**\n   * Legend and controls above the body; they stay in every state. Pass `false` or `null` while\n   * there's nothing to show yet, and the row keeps its height.\n   */\n  toolbar?: ReactNode;\n  /** Previous data stays on screen, dimmed, while a new range or filter loads. */\n  isUpdating?: boolean;\n  /**\n   * `default` cards. `fixed` (default): a chart, at least 240px high in every state and filling\n   * the card when the card is taller (a grid row). `fit`: at least that high, and as tall as the\n   * content needs, for lists that grow with \"Show more\".\n   */\n  bodyHeight?: 'fixed' | 'fit';\n  className?: string;\n  children: ReactNode;\n};\n\n/**\n * Pure layout for a metrics chart card. The body has a fixed height, so the loading,\n * error, empty and loaded states take the same room and nothing shifts around the card.\n */\nexport function ChartCard<V extends string = string>({\n  variant = 'default',\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n  total,\n  change,\n  isLoading = false,\n  actions,\n  toolbar,\n  isUpdating = false,\n  bodyHeight = 'fixed',\n  className,\n  children,\n}: ChartCardProps<V>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  const compact = variant === 'compact';\n  const hero = variant === 'hero';\n  const chart = !hero && bodyHeight === 'fixed';\n  return (\n    <MetricsCard className={cn('min-h-0! min-w-0! grid-cols-1', compact && 'h-84', className)}>\n      <MetricsCard.TopBar>\n        {hero ? (\n          <MetricsCard.Headline\n            label={title}\n            value={typeof total === 'string' ? total : '—'}\n            change={change}\n            isLoading={isLoading}\n            className={fade}\n          />\n        ) : (\n          <ChartCardHeading title={title} href={href} LinkComponent={LinkComponent} titleMenu={titleMenu} />\n        )}\n        {actions && (\n          <MetricsCard.Actions reveal={hero ? 'always' : 'hover'} className={cn(hero && 'my-0 self-center')}>\n            {actions}\n          </MetricsCard.Actions>\n        )}\n        {!hero && total !== undefined && <MetricsCard.Total value={total} isLoading={isLoading} className={fade} />}\n      </MetricsCard.TopBar>\n      <MetricsCard.Content className={cn('flex flex-col gap-4 overflow-visible', compact && 'min-h-0')}>\n        {/* A card with a toolbar keeps its row while the toolbar is empty (`false` or `null` while\n            loading, empty or on error), so its plot starts where its neighbours' do. A card that\n            passes no toolbar (a legend drawn by the chart itself) gets no row. */}\n        {toolbar || (chart && toolbar !== undefined && <div aria-hidden className=\"min-h-6\" />)}\n        <div\n          className={cn(\n            'relative flex min-h-0 min-w-0 flex-col',\n            // A chart fills the card, so a card stretched to its row's height draws a taller chart, not a gap.\n            bodyClass(variant, bodyHeight),\n            fade,\n          )}\n        >\n          {children}\n        </div>\n      </MetricsCard.Content>\n    </MetricsCard>\n  );\n}\n\n/** The body's height: compact cards fill what the toolbar leaves; charts fill the card, at least 240px. */\nfunction bodyClass(variant: ChartCardProps['variant'], bodyHeight: ChartCardProps['bodyHeight']) {\n  if (variant === 'compact') return 'flex-1';\n  if (variant === 'hero') return undefined;\n  if (bodyHeight === 'fit') return 'min-h-60';\n  return 'min-h-60 flex-1';\n}\n\n/** The title: a view menu, a link to a fuller view, or plain. */\nfunction ChartCardHeading<V extends string>({\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n}: Pick<ChartCardProps<V>, 'title' | 'href' | 'LinkComponent' | 'titleMenu'>) {\n  if (titleMenu) return <MetricsCard.TitleMenu title={title} {...titleMenu} />;\n  if (href) {\n    return (\n      <h3 className=\"flex\">\n        <ChartCardTitleLink href={href} LinkComponent={LinkComponent}>\n          {title}\n        </ChartCardTitleLink>\n      </h3>\n    );\n  }\n  return <MetricsCard.Title>{title}</MetricsCard.Title>;\n}\n\n/** The title as a link to a fuller view, with an expand icon after it; hover fills its own box, not the row. */\nfunction ChartCardTitleLink({\n  href,\n  LinkComponent,\n  children,\n}: {\n  href: string;\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  children: string;\n}) {\n  const Anchor = LinkComponent ?? 'a';\n  return (\n    <Anchor\n      href={href}\n      className={cn(\n        '-mx-1.5 -my-0.5 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-body font-medium text-foreground hover:bg-fill-subtle',\n        'focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus focus-visible:outline-solid',\n      )}\n    >\n      {children}\n      <Maximize2Icon aria-hidden className=\"size-3.5 text-muted-foreground\" />\n    </Anchor>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkEA,SAAgB,UAAqC,EACnD,UAAU,WACV,OACA,MACA,eACA,WACA,OACA,QACA,YAAY,OACZ,SACA,SACA,aAAa,OACb,aAAa,SACb,WACA,YACoB;CACpB,MAAM,OAAOA,cAAAA,GAAG,mCAAmC,cAAc,YAAY;CAC7E,MAAM,UAAU,YAAY;CAC5B,MAAM,OAAO,YAAY;CACzB,MAAM,QAAQ,CAAC,QAAQ,eAAe;CACtC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,aAAD;EAAa,WAAWD,cAAAA,GAAG,iCAAiC,WAAW,QAAQ,SAAS;EAAxF,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,YAAY,QAAb,EAAA,UAAA;GACG,OACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,UAAb;IACE,OAAO;IACP,OAAO,OAAO,UAAU,WAAW,QAAQ;IACnC;IACG;IACX,WAAW;GACZ,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;IAAyB;IAAa;IAAqB;IAA0B;GAAY,CAAA;GAElG,WACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,SAAb;IAAqB,QAAQ,OAAO,WAAW;IAAS,WAAWD,cAAAA,GAAG,QAAQ,kBAAkB;IAC7F,UAAA;GACkB,CAAA;GAEtB,CAAC,QAAQ,UAAU,KAAA,KAAa,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,OAAb;IAAmB,OAAO;IAAkB;IAAW,WAAW;GAAO,CAAA;EACxF,EAAA,CAAA,GACpB,iBAAA,GAAA,kBAAA,KAAA,CAACA,oBAAAA,YAAY,SAAb;GAAqB,WAAWD,cAAAA,GAAG,wCAAwC,WAAW,SAAS;GAA/F,UAAA,CAIG,WAAY,SAAS,YAAY,KAAA,KAAa,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,eAAA;IAAY,WAAU;GAAW,CAAA,GACrF,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAWA,cAAAA,GACT,0CAEA,UAAU,SAAS,UAAU,GAC7B,IACF;IAEC;GACE,CAAA,CACc;EACV,CAAA,CAAA;;AAEjB;;AAGA,SAAS,UAAU,SAAoC,YAA0C;CAC/F,IAAI,YAAY,WAAW,OAAO;CAClC,IAAI,YAAY,QAAQ,OAAO,KAAA;CAC/B,IAAI,eAAe,OAAO,OAAO;CACjC,OAAO;AACT;;AAGA,SAAS,iBAAmC,EAC1C,OACA,MACA,eACA,aAC4E;CAC5E,IAAI,WAAW,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,WAAb;EAA8B;EAAO,GAAI;CAAY,CAAA;CAC3E,IAAI,MACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,WAAU;EACZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD;GAA0B;GAAqB;GAC5C,UAAA;EACiB,CAAA;CAClB,CAAA;CAGR,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,OAAb,EAAA,UAAoB,MAAyB,CAAA;AACtD;;AAGA,SAAS,mBAAmB,EAC1B,MACA,eACA,YAKC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAFa,iBAAiB,KAE9B;EACQ;EACN,WAAWD,cAAAA,GACT,wIACA,wHACF;EALF,UAAA,CAOG,UACD,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,eAAD;GAAe,eAAA;GAAY,WAAU;EAAkC,CAAA,CACjE;;AAEZ"}
+{"version":3,"file":"chart-card.cjs.js","names":["cn","MetricsCard","Maximize2Icon"],"sources":["../../../../src/domains/metrics/components/chart-card.tsx"],"sourcesContent":["import { Maximize2Icon } from 'lucide-react';\nimport type { ElementType, ReactNode } from 'react';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type {\n  MetricsCardDragHandleProps,\n  MetricsCardTitleMenuProps,\n  MetricsCardTotalPart,\n} from '@/ds/components/MetricsCard';\nimport type { LinkComponentProps } from '@/lib/framework';\n\n/** What `LinkComponent` gets: anchor props, with `href` always set. */\ntype ChartCardLinkProps = LinkComponentProps & { href: string };\nimport { cn } from '@/lib/utils';\n\nexport type ChartCardProps<V extends string = string> = {\n  /**\n   * Card layout. `default` and `compact` share one header: the title, and `total` on the right.\n   * - `default`: a 240px body.\n   * - `compact`: one card height, so cards in a grid line up; the chart fills what the toolbar\n   *   leaves. For small cards in a grid.\n   * - `hero`: one large chart that is the page's subject (an explorer): the title as a label over\n   *   a large `total`, with `change` beside it, and `actions` always shown. The body is as tall\n   *   as its content.\n   */\n  variant?: 'default' | 'compact' | 'hero';\n  title: string;\n  /**\n   * Makes the title a link, marked by an expand icon, to a fuller view of the chart (e.g. the\n   * chart in an explorer). Ignored with `titleMenu` and on `hero` cards.\n   */\n  href?: string;\n  /** Renders `href` links, e.g. the app's router link; it gets anchor props. Default `a`. */\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  /**\n   * Makes the title a dropdown of the card's views (e.g. \"Agent latency\", \"Tool latency\"), in\n   * place of tabs. `title` is the picked view's label. Ignored on `hero` cards.\n   */\n  titleMenu?: Omit<MetricsCardTitleMenuProps<V>, 'title' | 'className'>;\n  /** A grip left of the title that drags the card, e.g. while a dashboard is being arranged. Ignored on `hero` cards. */\n  dragHandle?: MetricsCardDragHandleProps;\n  /**\n   * The card's headline number: right of the title, or the large value on `hero` cards. A card\n   * charting a few different things can pass one total each, marked with its series' color.\n   */\n  total?: string | readonly MetricsCardTotalPart[];\n  /** `hero` cards: the change against the previous period, e.g. \"+71.4%\". */\n  change?: string;\n  /** A skeleton in place of `total`. */\n  isLoading?: boolean;\n  /** Top-bar buttons, e.g. \"View in traces\": revealed on hover, except on `hero` cards. */\n  actions?: ReactNode;\n  /** Top-bar buttons always shown, after `actions`: ones that show a state, e.g. a pinned widget's unpin button. */\n  persistentActions?: ReactNode;\n  /**\n   * Legend and controls above the body; they stay in every state. Pass `false` or `null` while\n   * there's nothing to show yet, and the row keeps its height.\n   */\n  toolbar?: ReactNode;\n  /** Previous data stays on screen, dimmed, while a new range or filter loads. */\n  isUpdating?: boolean;\n  /**\n   * `default` cards. `fixed` (default): a chart, at least 240px high in every state and filling\n   * the card when the card is taller (a grid row). `fit`: at least that high, and as tall as the\n   * content needs, for lists that grow with \"Show more\".\n   */\n  bodyHeight?: 'fixed' | 'fit';\n  className?: string;\n  children: ReactNode;\n};\n\n/**\n * Pure layout for a metrics chart card. The body has a fixed height, so the loading,\n * error, empty and loaded states take the same room and nothing shifts around the card.\n */\nexport function ChartCard<V extends string = string>({\n  variant = 'default',\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n  dragHandle,\n  total,\n  change,\n  isLoading = false,\n  actions,\n  persistentActions,\n  toolbar,\n  isUpdating = false,\n  bodyHeight = 'fixed',\n  className,\n  children,\n}: ChartCardProps<V>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  const compact = variant === 'compact';\n  const hero = variant === 'hero';\n  const chart = !hero && bodyHeight === 'fixed';\n  return (\n    <MetricsCard className={cn('min-h-0! min-w-0! grid-cols-1', compact && 'h-84', className)}>\n      <MetricsCard.TopBar>\n        {hero ? (\n          <MetricsCard.Headline\n            label={title}\n            value={typeof total === 'string' ? total : '—'}\n            change={change}\n            isLoading={isLoading}\n            className={fade}\n          />\n        ) : (\n          <ChartCardHeading\n            title={title}\n            href={href}\n            LinkComponent={LinkComponent}\n            titleMenu={titleMenu}\n            dragHandle={dragHandle}\n          />\n        )}\n        {persistentActions ? (\n          // One group, so the buttons keep their spacing; only `actions` wait for hover.\n          <MetricsCard.Actions className={cn(hero && 'my-0 self-center')}>\n            {actions &&\n              (hero ? (\n                actions\n              ) : (\n                <MetricsCard.Actions reveal=\"hover\" className=\"my-0\">\n                  {actions}\n                </MetricsCard.Actions>\n              ))}\n            {persistentActions}\n          </MetricsCard.Actions>\n        ) : (\n          actions && (\n            <MetricsCard.Actions reveal={hero ? 'always' : 'hover'} className={cn(hero && 'my-0 self-center')}>\n              {actions}\n            </MetricsCard.Actions>\n          )\n        )}\n        {!hero && total !== undefined && <MetricsCard.Total value={total} isLoading={isLoading} className={fade} />}\n      </MetricsCard.TopBar>\n      <MetricsCard.Content className={cn('flex flex-col gap-4 overflow-visible', compact && 'min-h-0')}>\n        {/* A card with a toolbar keeps its row while the toolbar is empty (`false` or `null` while\n            loading, empty or on error), so its plot starts where its neighbours' do. A card that\n            passes no toolbar (a legend drawn by the chart itself) gets no row. */}\n        {toolbar || (chart && toolbar !== undefined && <div aria-hidden className=\"min-h-6\" />)}\n        <div\n          className={cn(\n            'relative flex min-h-0 min-w-0 flex-col',\n            // A chart fills the card, so a card stretched to its row's height draws a taller chart, not a gap.\n            bodyClass(variant, bodyHeight),\n            fade,\n          )}\n        >\n          {children}\n        </div>\n      </MetricsCard.Content>\n    </MetricsCard>\n  );\n}\n\n/** The body's height: compact cards fill what the toolbar leaves; charts fill the card, at least 240px. */\nfunction bodyClass(variant: ChartCardProps['variant'], bodyHeight: ChartCardProps['bodyHeight']) {\n  if (variant === 'compact') return 'flex-1';\n  if (variant === 'hero') return undefined;\n  if (bodyHeight === 'fit') return 'min-h-60';\n  return 'min-h-60 flex-1';\n}\n\n/** The title, after the drag handle when there is one. */\nfunction ChartCardHeading<V extends string>({\n  dragHandle,\n  ...title\n}: Pick<ChartCardProps<V>, 'title' | 'href' | 'LinkComponent' | 'titleMenu' | 'dragHandle'>) {\n  if (!dragHandle) return <ChartCardTitle {...title} />;\n  // One wrapper, so the top bar stretches it as its first child rather than the handle.\n  return (\n    <div className=\"flex min-w-0 items-center gap-1.5\">\n      <MetricsCard.DragHandle {...dragHandle} />\n      <ChartCardTitle {...title} />\n    </div>\n  );\n}\n\n/** The title: a view menu, a link to a fuller view, or plain. */\nfunction ChartCardTitle<V extends string>({\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n}: Pick<ChartCardProps<V>, 'title' | 'href' | 'LinkComponent' | 'titleMenu'>) {\n  if (titleMenu) return <MetricsCard.TitleMenu title={title} {...titleMenu} />;\n  if (href) {\n    return (\n      <h3 className=\"flex\">\n        <ChartCardTitleLink href={href} LinkComponent={LinkComponent}>\n          {title}\n        </ChartCardTitleLink>\n      </h3>\n    );\n  }\n  return <MetricsCard.Title>{title}</MetricsCard.Title>;\n}\n\n/** The title as a link to a fuller view, with an expand icon after it; hover fills its own box, not the row. */\nfunction ChartCardTitleLink({\n  href,\n  LinkComponent,\n  children,\n}: {\n  href: string;\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  children: string;\n}) {\n  const Anchor = LinkComponent ?? 'a';\n  return (\n    <Anchor\n      href={href}\n      className={cn(\n        '-mx-1.5 -my-0.5 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-body font-medium text-foreground hover:bg-fill-subtle',\n        'focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus focus-visible:outline-solid',\n      )}\n    >\n      {children}\n      <Maximize2Icon aria-hidden className=\"size-3.5 text-muted-foreground\" />\n    </Anchor>\n  );\n}\n"],"mappings":";;;;;;;;;;AA0EA,SAAgB,UAAqC,EACnD,UAAU,WACV,OACA,MACA,eACA,WACA,YACA,OACA,QACA,YAAY,OACZ,SACA,mBACA,SACA,aAAa,OACb,aAAa,SACb,WACA,YACoB;CACpB,MAAM,OAAOA,cAAAA,GAAG,mCAAmC,cAAc,YAAY;CAC7E,MAAM,UAAU,YAAY;CAC5B,MAAM,OAAO,YAAY;CACzB,MAAM,QAAQ,CAAC,QAAQ,eAAe;CACtC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,aAAD;EAAa,WAAWD,cAAAA,GAAG,iCAAiC,WAAW,QAAQ,SAAS;EAAxF,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,oBAAAA,YAAY,QAAb,EAAA,UAAA;GACG,OACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,UAAb;IACE,OAAO;IACP,OAAO,OAAO,UAAU,WAAW,QAAQ;IACnC;IACG;IACX,WAAW;GACZ,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;IACS;IACD;IACS;IACJ;IACC;GACb,CAAA;GAEF,oBAEC,iBAAA,GAAA,kBAAA,KAAA,CAACA,oBAAAA,YAAY,SAAb;IAAqB,WAAWD,cAAAA,GAAG,QAAQ,kBAAkB;IAA7D,UAAA,CACG,YACE,OACC,UAEA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,SAAb;KAAqB,QAAO;KAAQ,WAAU;KAC3C,UAAA;IACkB,CAAA,IAExB,iBACkB;GAErB,CAAA,IAAA,WACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,SAAb;IAAqB,QAAQ,OAAO,WAAW;IAAS,WAAWD,cAAAA,GAAG,QAAQ,kBAAkB;IAC7F,UAAA;GACkB,CAAA;GAGxB,CAAC,QAAQ,UAAU,KAAA,KAAa,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,OAAb;IAAmB,OAAO;IAAkB;IAAW,WAAW;GAAO,CAAA;EACxF,EAAA,CAAA,GACpB,iBAAA,GAAA,kBAAA,KAAA,CAACA,oBAAAA,YAAY,SAAb;GAAqB,WAAWD,cAAAA,GAAG,wCAAwC,WAAW,SAAS;GAA/F,UAAA,CAIG,WAAY,SAAS,YAAY,KAAA,KAAa,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,eAAA;IAAY,WAAU;GAAW,CAAA,GACrF,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAWA,cAAAA,GACT,0CAEA,UAAU,SAAS,UAAU,GAC7B,IACF;IAEC;GACE,CAAA,CACc;EACV,CAAA,CAAA;;AAEjB;;AAGA,SAAS,UAAU,SAAoC,YAA0C;CAC/F,IAAI,YAAY,WAAW,OAAO;CAClC,IAAI,YAAY,QAAQ,OAAO,KAAA;CAC/B,IAAI,eAAe,OAAO,OAAO;CACjC,OAAO;AACT;;AAGA,SAAS,iBAAmC,EAC1C,YACA,GAAG,SACwF;CAC3F,IAAI,CAAC,YAAY,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA;CAEpD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,YAAb,EAAwB,GAAI,WAAa,CAAA,GACzC,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA,CACzB;;AAET;;AAGA,SAAS,eAAiC,EACxC,OACA,MACA,eACA,aAC4E;CAC5E,IAAI,WAAW,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,WAAb;EAA8B;EAAO,GAAI;CAAY,CAAA;CAC3E,IAAI,MACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EAAI,WAAU;EACZ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD;GAA0B;GAAqB;GAC5C,UAAA;EACiB,CAAA;CAClB,CAAA;CAGR,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,oBAAAA,YAAY,OAAb,EAAA,UAAoB,MAAyB,CAAA;AACtD;;AAGA,SAAS,mBAAmB,EAC1B,MACA,eACA,YAKC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAFa,iBAAiB,KAE9B;EACQ;EACN,WAAWD,cAAAA,GACT,wIACA,wHACF;EALF,UAAA,CAOG,UACD,iBAAA,GAAA,kBAAA,IAAA,CAACE,aAAAA,eAAD;GAAe,eAAA;GAAY,WAAU;EAAkC,CAAA,CACjE;;AAEZ"}

package/dist/domains/metrics/components/chart-card.es.js

@@ -1,5 +1,5 @@
+import { t as MetricsCard } from "../../../MetricsCard-kAqSCPPe.js";
 import { t as cn } from "../../../utils-DQx8TpNT.js";
-import { t as MetricsCard } from "../../../MetricsCard-ua6C6b8a.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Maximize2Icon } from "lucide-react";
 // src/domains/metrics/components/chart-card.tsx
@@ -7,7 +7,7 @@ import { Maximize2Icon } from "lucide-react";
 * Pure layout for a metrics chart card. The body has a fixed height, so the loading,
 * error, empty and loaded states take the same room and nothing shifts around the card.
 */
-function ChartCard({ variant = "default", title, href, LinkComponent, titleMenu, total, change, isLoading = false, actions, toolbar, isUpdating = false, bodyHeight = "fixed", className, children }) {
+function ChartCard({ variant = "default", title, href, LinkComponent, titleMenu, dragHandle, total, change, isLoading = false, actions, persistentActions, toolbar, isUpdating = false, bodyHeight = "fixed", className, children }) {
 	const fade = cn("transition-opacity duration-200", isUpdating && "opacity-50");
 	const compact = variant === "compact";
 	const hero = variant === "hero";
@@ -25,9 +25,17 @@ function ChartCard({ variant = "default", title, href, LinkComponent, titleMenu,
 				title,
 				href,
 				LinkComponent,
-				titleMenu
+				titleMenu,
+				dragHandle
 			}),
-			actions && /* @__PURE__ */ jsx(MetricsCard.Actions, {
+			persistentActions ? /* @__PURE__ */ jsxs(MetricsCard.Actions, {
+				className: cn(hero && "my-0 self-center"),
+				children: [actions && (hero ? actions : /* @__PURE__ */ jsx(MetricsCard.Actions, {
+					reveal: "hover",
+					className: "my-0",
+					children: actions
+				})), persistentActions]
+			}) : actions && /* @__PURE__ */ jsx(MetricsCard.Actions, {
 				reveal: hero ? "always" : "hover",
 				className: cn(hero && "my-0 self-center"),
 				children: actions
@@ -56,8 +64,16 @@ function bodyClass(variant, bodyHeight) {
 	if (bodyHeight === "fit") return "min-h-60";
 	return "min-h-60 flex-1";
 }
+/** The title, after the drag handle when there is one. */
+function ChartCardHeading({ dragHandle, ...title }) {
+	if (!dragHandle) return /* @__PURE__ */ jsx(ChartCardTitle, { ...title });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 items-center gap-1.5",
+		children: [/* @__PURE__ */ jsx(MetricsCard.DragHandle, { ...dragHandle }), /* @__PURE__ */ jsx(ChartCardTitle, { ...title })]
+	});
+}
 /** The title: a view menu, a link to a fuller view, or plain. */
-function ChartCardHeading({ title, href, LinkComponent, titleMenu }) {
+function ChartCardTitle({ title, href, LinkComponent, titleMenu }) {
 	if (titleMenu) return /* @__PURE__ */ jsx(MetricsCard.TitleMenu, {
 		title,
 		...titleMenu

package/dist/domains/metrics/components/chart-card.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/chart-card.tsx"],"sourcesContent":["import { Maximize2Icon } from 'lucide-react';\nimport type { ElementType, ReactNode } from 'react';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type { MetricsCardTitleMenuProps, MetricsCardTotalPart } from '@/ds/components/MetricsCard';\nimport type { LinkComponentProps } from '@/lib/framework';\n\n/** What `LinkComponent` gets: anchor props, with `href` always set. */\ntype ChartCardLinkProps = LinkComponentProps & { href: string };\nimport { cn } from '@/lib/utils';\n\nexport type ChartCardProps<V extends string = string> = {\n  /**\n   * Card layout. `default` and `compact` share one header: the title, and `total` on the right.\n   * - `default`: a 240px body.\n   * - `compact`: one card height, so cards in a grid line up; the chart fills what the toolbar\n   *   leaves. For small cards in a grid.\n   * - `hero`: one large chart that is the page's subject (an explorer): the title as a label over\n   *   a large `total`, with `change` beside it, and `actions` always shown. The body is as tall\n   *   as its content.\n   */\n  variant?: 'default' | 'compact' | 'hero';\n  title: string;\n  /**\n   * Makes the title a link, marked by an expand icon, to a fuller view of the chart (e.g. the\n   * chart in an explorer). Ignored with `titleMenu` and on `hero` cards.\n   */\n  href?: string;\n  /** Renders `href` links, e.g. the app's router link; it gets anchor props. Default `a`. */\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  /**\n   * Makes the title a dropdown of the card's views (e.g. \"Agent latency\", \"Tool latency\"), in\n   * place of tabs. `title` is the picked view's label. Ignored on `hero` cards.\n   */\n  titleMenu?: Omit<MetricsCardTitleMenuProps<V>, 'title' | 'className'>;\n  /**\n   * The card's headline number: right of the title, or the large value on `hero` cards. A card\n   * charting a few different things can pass one total each, marked with its series' color.\n   */\n  total?: string | readonly MetricsCardTotalPart[];\n  /** `hero` cards: the change against the previous period, e.g. \"+71.4%\". */\n  change?: string;\n  /** A skeleton in place of `total`. */\n  isLoading?: boolean;\n  /** Top-bar buttons, e.g. \"View in traces\": revealed on hover, except on `hero` cards. */\n  actions?: ReactNode;\n  /**\n   * Legend and controls above the body; they stay in every state. Pass `false` or `null` while\n   * there's nothing to show yet, and the row keeps its height.\n   */\n  toolbar?: ReactNode;\n  /** Previous data stays on screen, dimmed, while a new range or filter loads. */\n  isUpdating?: boolean;\n  /**\n   * `default` cards. `fixed` (default): a chart, at least 240px high in every state and filling\n   * the card when the card is taller (a grid row). `fit`: at least that high, and as tall as the\n   * content needs, for lists that grow with \"Show more\".\n   */\n  bodyHeight?: 'fixed' | 'fit';\n  className?: string;\n  children: ReactNode;\n};\n\n/**\n * Pure layout for a metrics chart card. The body has a fixed height, so the loading,\n * error, empty and loaded states take the same room and nothing shifts around the card.\n */\nexport function ChartCard<V extends string = string>({\n  variant = 'default',\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n  total,\n  change,\n  isLoading = false,\n  actions,\n  toolbar,\n  isUpdating = false,\n  bodyHeight = 'fixed',\n  className,\n  children,\n}: ChartCardProps<V>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  const compact = variant === 'compact';\n  const hero = variant === 'hero';\n  const chart = !hero && bodyHeight === 'fixed';\n  return (\n    <MetricsCard className={cn('min-h-0! min-w-0! grid-cols-1', compact && 'h-84', className)}>\n      <MetricsCard.TopBar>\n        {hero ? (\n          <MetricsCard.Headline\n            label={title}\n            value={typeof total === 'string' ? total : '—'}\n            change={change}\n            isLoading={isLoading}\n            className={fade}\n          />\n        ) : (\n          <ChartCardHeading title={title} href={href} LinkComponent={LinkComponent} titleMenu={titleMenu} />\n        )}\n        {actions && (\n          <MetricsCard.Actions reveal={hero ? 'always' : 'hover'} className={cn(hero && 'my-0 self-center')}>\n            {actions}\n          </MetricsCard.Actions>\n        )}\n        {!hero && total !== undefined && <MetricsCard.Total value={total} isLoading={isLoading} className={fade} />}\n      </MetricsCard.TopBar>\n      <MetricsCard.Content className={cn('flex flex-col gap-4 overflow-visible', compact && 'min-h-0')}>\n        {/* A card with a toolbar keeps its row while the toolbar is empty (`false` or `null` while\n            loading, empty or on error), so its plot starts where its neighbours' do. A card that\n            passes no toolbar (a legend drawn by the chart itself) gets no row. */}\n        {toolbar || (chart && toolbar !== undefined && <div aria-hidden className=\"min-h-6\" />)}\n        <div\n          className={cn(\n            'relative flex min-h-0 min-w-0 flex-col',\n            // A chart fills the card, so a card stretched to its row's height draws a taller chart, not a gap.\n            bodyClass(variant, bodyHeight),\n            fade,\n          )}\n        >\n          {children}\n        </div>\n      </MetricsCard.Content>\n    </MetricsCard>\n  );\n}\n\n/** The body's height: compact cards fill what the toolbar leaves; charts fill the card, at least 240px. */\nfunction bodyClass(variant: ChartCardProps['variant'], bodyHeight: ChartCardProps['bodyHeight']) {\n  if (variant === 'compact') return 'flex-1';\n  if (variant === 'hero') return undefined;\n  if (bodyHeight === 'fit') return 'min-h-60';\n  return 'min-h-60 flex-1';\n}\n\n/** The title: a view menu, a link to a fuller view, or plain. */\nfunction ChartCardHeading<V extends string>({\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n}: Pick<ChartCardProps<V>, 'title' | 'href' | 'LinkComponent' | 'titleMenu'>) {\n  if (titleMenu) return <MetricsCard.TitleMenu title={title} {...titleMenu} />;\n  if (href) {\n    return (\n      <h3 className=\"flex\">\n        <ChartCardTitleLink href={href} LinkComponent={LinkComponent}>\n          {title}\n        </ChartCardTitleLink>\n      </h3>\n    );\n  }\n  return <MetricsCard.Title>{title}</MetricsCard.Title>;\n}\n\n/** The title as a link to a fuller view, with an expand icon after it; hover fills its own box, not the row. */\nfunction ChartCardTitleLink({\n  href,\n  LinkComponent,\n  children,\n}: {\n  href: string;\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  children: string;\n}) {\n  const Anchor = LinkComponent ?? 'a';\n  return (\n    <Anchor\n      href={href}\n      className={cn(\n        '-mx-1.5 -my-0.5 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-body font-medium text-foreground hover:bg-fill-subtle',\n        'focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus focus-visible:outline-solid',\n      )}\n    >\n      {children}\n      <Maximize2Icon aria-hidden className=\"size-3.5 text-muted-foreground\" />\n    </Anchor>\n  );\n}\n"],"mappings":";;;;;;;;;AAkEA,SAAgB,UAAqC,EACnD,UAAU,WACV,OACA,MACA,eACA,WACA,OACA,QACA,YAAY,OACZ,SACA,SACA,aAAa,OACb,aAAa,SACb,WACA,YACoB;CACpB,MAAM,OAAO,GAAG,mCAAmC,cAAc,YAAY;CAC7E,MAAM,UAAU,YAAY;CAC5B,MAAM,OAAO,YAAY;CACzB,MAAM,QAAQ,CAAC,QAAQ,eAAe;CACtC,OACE,qBAAC,aAAD;EAAa,WAAW,GAAG,iCAAiC,WAAW,QAAQ,SAAS;EAAxF,UAAA,CACE,qBAAC,YAAY,QAAb,EAAA,UAAA;GACG,OACC,oBAAC,YAAY,UAAb;IACE,OAAO;IACP,OAAO,OAAO,UAAU,WAAW,QAAQ;IACnC;IACG;IACX,WAAW;GACZ,CAAA,IAED,oBAAC,kBAAD;IAAyB;IAAa;IAAqB;IAA0B;GAAY,CAAA;GAElG,WACC,oBAAC,YAAY,SAAb;IAAqB,QAAQ,OAAO,WAAW;IAAS,WAAW,GAAG,QAAQ,kBAAkB;IAC7F,UAAA;GACkB,CAAA;GAEtB,CAAC,QAAQ,UAAU,KAAA,KAAa,oBAAC,YAAY,OAAb;IAAmB,OAAO;IAAkB;IAAW,WAAW;GAAO,CAAA;EACxF,EAAA,CAAA,GACpB,qBAAC,YAAY,SAAb;GAAqB,WAAW,GAAG,wCAAwC,WAAW,SAAS;GAA/F,UAAA,CAIG,WAAY,SAAS,YAAY,KAAA,KAAa,oBAAC,OAAD;IAAK,eAAA;IAAY,WAAU;GAAW,CAAA,GACrF,oBAAC,OAAD;IACE,WAAW,GACT,0CAEA,UAAU,SAAS,UAAU,GAC7B,IACF;IAEC;GACE,CAAA,CACc;EACV,CAAA,CAAA;;AAEjB;;AAGA,SAAS,UAAU,SAAoC,YAA0C;CAC/F,IAAI,YAAY,WAAW,OAAO;CAClC,IAAI,YAAY,QAAQ,OAAO,KAAA;CAC/B,IAAI,eAAe,OAAO,OAAO;CACjC,OAAO;AACT;;AAGA,SAAS,iBAAmC,EAC1C,OACA,MACA,eACA,aAC4E;CAC5E,IAAI,WAAW,OAAO,oBAAC,YAAY,WAAb;EAA8B;EAAO,GAAI;CAAY,CAAA;CAC3E,IAAI,MACF,OACE,oBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,oBAAC,oBAAD;GAA0B;GAAqB;GAC5C,UAAA;EACiB,CAAA;CAClB,CAAA;CAGR,OAAO,oBAAC,YAAY,OAAb,EAAA,UAAoB,MAAyB,CAAA;AACtD;;AAGA,SAAS,mBAAmB,EAC1B,MACA,eACA,YAKC;CAED,OACE,qBAFa,iBAAiB,KAE9B;EACQ;EACN,WAAW,GACT,wIACA,wHACF;EALF,UAAA,CAOG,UACD,oBAAC,eAAD;GAAe,eAAA;GAAY,WAAU;EAAkC,CAAA,CACjE;;AAEZ"}
+{"version":3,"file":"chart-card.es.js","names":[],"sources":["../../../../src/domains/metrics/components/chart-card.tsx"],"sourcesContent":["import { Maximize2Icon } from 'lucide-react';\nimport type { ElementType, ReactNode } from 'react';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\nimport type {\n  MetricsCardDragHandleProps,\n  MetricsCardTitleMenuProps,\n  MetricsCardTotalPart,\n} from '@/ds/components/MetricsCard';\nimport type { LinkComponentProps } from '@/lib/framework';\n\n/** What `LinkComponent` gets: anchor props, with `href` always set. */\ntype ChartCardLinkProps = LinkComponentProps & { href: string };\nimport { cn } from '@/lib/utils';\n\nexport type ChartCardProps<V extends string = string> = {\n  /**\n   * Card layout. `default` and `compact` share one header: the title, and `total` on the right.\n   * - `default`: a 240px body.\n   * - `compact`: one card height, so cards in a grid line up; the chart fills what the toolbar\n   *   leaves. For small cards in a grid.\n   * - `hero`: one large chart that is the page's subject (an explorer): the title as a label over\n   *   a large `total`, with `change` beside it, and `actions` always shown. The body is as tall\n   *   as its content.\n   */\n  variant?: 'default' | 'compact' | 'hero';\n  title: string;\n  /**\n   * Makes the title a link, marked by an expand icon, to a fuller view of the chart (e.g. the\n   * chart in an explorer). Ignored with `titleMenu` and on `hero` cards.\n   */\n  href?: string;\n  /** Renders `href` links, e.g. the app's router link; it gets anchor props. Default `a`. */\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  /**\n   * Makes the title a dropdown of the card's views (e.g. \"Agent latency\", \"Tool latency\"), in\n   * place of tabs. `title` is the picked view's label. Ignored on `hero` cards.\n   */\n  titleMenu?: Omit<MetricsCardTitleMenuProps<V>, 'title' | 'className'>;\n  /** A grip left of the title that drags the card, e.g. while a dashboard is being arranged. Ignored on `hero` cards. */\n  dragHandle?: MetricsCardDragHandleProps;\n  /**\n   * The card's headline number: right of the title, or the large value on `hero` cards. A card\n   * charting a few different things can pass one total each, marked with its series' color.\n   */\n  total?: string | readonly MetricsCardTotalPart[];\n  /** `hero` cards: the change against the previous period, e.g. \"+71.4%\". */\n  change?: string;\n  /** A skeleton in place of `total`. */\n  isLoading?: boolean;\n  /** Top-bar buttons, e.g. \"View in traces\": revealed on hover, except on `hero` cards. */\n  actions?: ReactNode;\n  /** Top-bar buttons always shown, after `actions`: ones that show a state, e.g. a pinned widget's unpin button. */\n  persistentActions?: ReactNode;\n  /**\n   * Legend and controls above the body; they stay in every state. Pass `false` or `null` while\n   * there's nothing to show yet, and the row keeps its height.\n   */\n  toolbar?: ReactNode;\n  /** Previous data stays on screen, dimmed, while a new range or filter loads. */\n  isUpdating?: boolean;\n  /**\n   * `default` cards. `fixed` (default): a chart, at least 240px high in every state and filling\n   * the card when the card is taller (a grid row). `fit`: at least that high, and as tall as the\n   * content needs, for lists that grow with \"Show more\".\n   */\n  bodyHeight?: 'fixed' | 'fit';\n  className?: string;\n  children: ReactNode;\n};\n\n/**\n * Pure layout for a metrics chart card. The body has a fixed height, so the loading,\n * error, empty and loaded states take the same room and nothing shifts around the card.\n */\nexport function ChartCard<V extends string = string>({\n  variant = 'default',\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n  dragHandle,\n  total,\n  change,\n  isLoading = false,\n  actions,\n  persistentActions,\n  toolbar,\n  isUpdating = false,\n  bodyHeight = 'fixed',\n  className,\n  children,\n}: ChartCardProps<V>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  const compact = variant === 'compact';\n  const hero = variant === 'hero';\n  const chart = !hero && bodyHeight === 'fixed';\n  return (\n    <MetricsCard className={cn('min-h-0! min-w-0! grid-cols-1', compact && 'h-84', className)}>\n      <MetricsCard.TopBar>\n        {hero ? (\n          <MetricsCard.Headline\n            label={title}\n            value={typeof total === 'string' ? total : '—'}\n            change={change}\n            isLoading={isLoading}\n            className={fade}\n          />\n        ) : (\n          <ChartCardHeading\n            title={title}\n            href={href}\n            LinkComponent={LinkComponent}\n            titleMenu={titleMenu}\n            dragHandle={dragHandle}\n          />\n        )}\n        {persistentActions ? (\n          // One group, so the buttons keep their spacing; only `actions` wait for hover.\n          <MetricsCard.Actions className={cn(hero && 'my-0 self-center')}>\n            {actions &&\n              (hero ? (\n                actions\n              ) : (\n                <MetricsCard.Actions reveal=\"hover\" className=\"my-0\">\n                  {actions}\n                </MetricsCard.Actions>\n              ))}\n            {persistentActions}\n          </MetricsCard.Actions>\n        ) : (\n          actions && (\n            <MetricsCard.Actions reveal={hero ? 'always' : 'hover'} className={cn(hero && 'my-0 self-center')}>\n              {actions}\n            </MetricsCard.Actions>\n          )\n        )}\n        {!hero && total !== undefined && <MetricsCard.Total value={total} isLoading={isLoading} className={fade} />}\n      </MetricsCard.TopBar>\n      <MetricsCard.Content className={cn('flex flex-col gap-4 overflow-visible', compact && 'min-h-0')}>\n        {/* A card with a toolbar keeps its row while the toolbar is empty (`false` or `null` while\n            loading, empty or on error), so its plot starts where its neighbours' do. A card that\n            passes no toolbar (a legend drawn by the chart itself) gets no row. */}\n        {toolbar || (chart && toolbar !== undefined && <div aria-hidden className=\"min-h-6\" />)}\n        <div\n          className={cn(\n            'relative flex min-h-0 min-w-0 flex-col',\n            // A chart fills the card, so a card stretched to its row's height draws a taller chart, not a gap.\n            bodyClass(variant, bodyHeight),\n            fade,\n          )}\n        >\n          {children}\n        </div>\n      </MetricsCard.Content>\n    </MetricsCard>\n  );\n}\n\n/** The body's height: compact cards fill what the toolbar leaves; charts fill the card, at least 240px. */\nfunction bodyClass(variant: ChartCardProps['variant'], bodyHeight: ChartCardProps['bodyHeight']) {\n  if (variant === 'compact') return 'flex-1';\n  if (variant === 'hero') return undefined;\n  if (bodyHeight === 'fit') return 'min-h-60';\n  return 'min-h-60 flex-1';\n}\n\n/** The title, after the drag handle when there is one. */\nfunction ChartCardHeading<V extends string>({\n  dragHandle,\n  ...title\n}: Pick<ChartCardProps<V>, 'title' | 'href' | 'LinkComponent' | 'titleMenu' | 'dragHandle'>) {\n  if (!dragHandle) return <ChartCardTitle {...title} />;\n  // One wrapper, so the top bar stretches it as its first child rather than the handle.\n  return (\n    <div className=\"flex min-w-0 items-center gap-1.5\">\n      <MetricsCard.DragHandle {...dragHandle} />\n      <ChartCardTitle {...title} />\n    </div>\n  );\n}\n\n/** The title: a view menu, a link to a fuller view, or plain. */\nfunction ChartCardTitle<V extends string>({\n  title,\n  href,\n  LinkComponent,\n  titleMenu,\n}: Pick<ChartCardProps<V>, 'title' | 'href' | 'LinkComponent' | 'titleMenu'>) {\n  if (titleMenu) return <MetricsCard.TitleMenu title={title} {...titleMenu} />;\n  if (href) {\n    return (\n      <h3 className=\"flex\">\n        <ChartCardTitleLink href={href} LinkComponent={LinkComponent}>\n          {title}\n        </ChartCardTitleLink>\n      </h3>\n    );\n  }\n  return <MetricsCard.Title>{title}</MetricsCard.Title>;\n}\n\n/** The title as a link to a fuller view, with an expand icon after it; hover fills its own box, not the row. */\nfunction ChartCardTitleLink({\n  href,\n  LinkComponent,\n  children,\n}: {\n  href: string;\n  LinkComponent?: ElementType<ChartCardLinkProps>;\n  children: string;\n}) {\n  const Anchor = LinkComponent ?? 'a';\n  return (\n    <Anchor\n      href={href}\n      className={cn(\n        '-mx-1.5 -my-0.5 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-body font-medium text-foreground hover:bg-fill-subtle',\n        'focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-focus focus-visible:outline-solid',\n      )}\n    >\n      {children}\n      <Maximize2Icon aria-hidden className=\"size-3.5 text-muted-foreground\" />\n    </Anchor>\n  );\n}\n"],"mappings":";;;;;;;;;AA0EA,SAAgB,UAAqC,EACnD,UAAU,WACV,OACA,MACA,eACA,WACA,YACA,OACA,QACA,YAAY,OACZ,SACA,mBACA,SACA,aAAa,OACb,aAAa,SACb,WACA,YACoB;CACpB,MAAM,OAAO,GAAG,mCAAmC,cAAc,YAAY;CAC7E,MAAM,UAAU,YAAY;CAC5B,MAAM,OAAO,YAAY;CACzB,MAAM,QAAQ,CAAC,QAAQ,eAAe;CACtC,OACE,qBAAC,aAAD;EAAa,WAAW,GAAG,iCAAiC,WAAW,QAAQ,SAAS;EAAxF,UAAA,CACE,qBAAC,YAAY,QAAb,EAAA,UAAA;GACG,OACC,oBAAC,YAAY,UAAb;IACE,OAAO;IACP,OAAO,OAAO,UAAU,WAAW,QAAQ;IACnC;IACG;IACX,WAAW;GACZ,CAAA,IAED,oBAAC,kBAAD;IACS;IACD;IACS;IACJ;IACC;GACb,CAAA;GAEF,oBAEC,qBAAC,YAAY,SAAb;IAAqB,WAAW,GAAG,QAAQ,kBAAkB;IAA7D,UAAA,CACG,YACE,OACC,UAEA,oBAAC,YAAY,SAAb;KAAqB,QAAO;KAAQ,WAAU;KAC3C,UAAA;IACkB,CAAA,IAExB,iBACkB;GAErB,CAAA,IAAA,WACE,oBAAC,YAAY,SAAb;IAAqB,QAAQ,OAAO,WAAW;IAAS,WAAW,GAAG,QAAQ,kBAAkB;IAC7F,UAAA;GACkB,CAAA;GAGxB,CAAC,QAAQ,UAAU,KAAA,KAAa,oBAAC,YAAY,OAAb;IAAmB,OAAO;IAAkB;IAAW,WAAW;GAAO,CAAA;EACxF,EAAA,CAAA,GACpB,qBAAC,YAAY,SAAb;GAAqB,WAAW,GAAG,wCAAwC,WAAW,SAAS;GAA/F,UAAA,CAIG,WAAY,SAAS,YAAY,KAAA,KAAa,oBAAC,OAAD;IAAK,eAAA;IAAY,WAAU;GAAW,CAAA,GACrF,oBAAC,OAAD;IACE,WAAW,GACT,0CAEA,UAAU,SAAS,UAAU,GAC7B,IACF;IAEC;GACE,CAAA,CACc;EACV,CAAA,CAAA;;AAEjB;;AAGA,SAAS,UAAU,SAAoC,YAA0C;CAC/F,IAAI,YAAY,WAAW,OAAO;CAClC,IAAI,YAAY,QAAQ,OAAO,KAAA;CAC/B,IAAI,eAAe,OAAO,OAAO;CACjC,OAAO;AACT;;AAGA,SAAS,iBAAmC,EAC1C,YACA,GAAG,SACwF;CAC3F,IAAI,CAAC,YAAY,OAAO,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA;CAEpD,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,YAAY,YAAb,EAAwB,GAAI,WAAa,CAAA,GACzC,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA,CACzB;;AAET;;AAGA,SAAS,eAAiC,EACxC,OACA,MACA,eACA,aAC4E;CAC5E,IAAI,WAAW,OAAO,oBAAC,YAAY,WAAb;EAA8B;EAAO,GAAI;CAAY,CAAA;CAC3E,IAAI,MACF,OACE,oBAAC,MAAD;EAAI,WAAU;EACZ,UAAA,oBAAC,oBAAD;GAA0B;GAAqB;GAC5C,UAAA;EACiB,CAAA;CAClB,CAAA;CAGR,OAAO,oBAAC,YAAY,OAAb,EAAA,UAAoB,MAAyB,CAAA;AACtD;;AAGA,SAAS,mBAAmB,EAC1B,MACA,eACA,YAKC;CAED,OACE,qBAFa,iBAAiB,KAE9B;EACQ;EACN,WAAW,GACT,wIACA,wHACF;EALF,UAAA,CAOG,UACD,oBAAC,eAAD;GAAe,eAAA;GAAY,WAAU;EAAkC,CAAA,CACjE;;AAEZ"}

package/dist/domains/metrics/components/date-range-selector.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_date_time_range_picker = require("../../../date-time-range-picker-Bq-8IPtS.cjs");
 const require_domains_metrics_hooks_use_metrics = require("../hooks/use-metrics.cjs.js");
-const require_date_time_range_picker = require("../../../date-time-range-picker-CWGjoR3j.cjs");
 const require_domains_metrics_metrics_date_presets = require("../metrics-date-presets.cjs.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/domains/metrics/components/date-range-selector.es.js

@@ -1,5 +1,5 @@
+import { t as DateTimeRangePicker } from "../../../date-time-range-picker-DdNgKD87.js";
 import { useMetrics } from "../hooks/use-metrics.es.js";
-import { t as DateTimeRangePicker } from "../../../date-time-range-picker-CdSiXwB4.js";
 import { METRICS_PICKER_PRESETS, fromPickerPreset, toPickerPreset } from "../metrics-date-presets.es.js";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/domains/metrics/components/distinct-ids/distinct-ids-chart.cjs.js

@@ -1,15 +1,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_metrics_hooks_use_metrics_trace_aggregate = require("../../hooks/use-metrics-trace-aggregate.cjs.js");
+const require_domains_metrics_lib_chart_axis = require("../../lib/chart-axis.cjs.js");
+const require_domains_metrics_lib_chart_colors = require("../../lib/chart-colors.cjs.js");
 const require_domains_metrics_lib_chart_format = require("../../lib/chart-format.cjs.js");
 const require_domains_metrics_lib_metrics_buckets = require("../../lib/metrics-buckets.cjs.js");
 const require_domains_metrics_lib_trace_aggregate = require("../../lib/trace-aggregate.cjs.js");
-const require_domains_metrics_hooks_use_metrics_trace_aggregate = require("../../hooks/use-metrics-trace-aggregate.cjs.js");
-const require_MetricsCard = require("../../../../MetricsCard-BEwiS7Pe.cjs");
 const require_domains_metrics_components_chart_area = require("../chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("../chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("../chart-card-error.cjs.js");
-const require_domains_metrics_lib_chart_axis = require("../../lib/chart-axis.cjs.js");
-const require_domains_metrics_lib_chart_colors = require("../../lib/chart-colors.cjs.js");
-const require_MetricsLineChart = require("../../../../MetricsLineChart-tZxsauau.cjs");
+const require_MetricsCard = require("../../../../MetricsCard-DojbLiEx.cjs");
+const require_MetricsLineChart = require("../../../../MetricsLineChart-BnY9JKzc.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/distinct-ids/distinct-ids-chart.tsx
 /** Most apps set resource and thread ids (through memory); few set user and session ids. */

package/dist/domains/metrics/components/distinct-ids/distinct-ids-chart.es.js

@@ -1,14 +1,14 @@
+import { useMetricsTraceAggregate } from "../../hooks/use-metrics-trace-aggregate.es.js";
+import { EDGE_BUCKET_AXIS } from "../../lib/chart-axis.es.js";
+import { CHART_COLORS } from "../../lib/chart-colors.es.js";
 import { formatAxisCount, formatCount } from "../../lib/chart-format.es.js";
 import { bucketWindow, intervalHours } from "../../lib/metrics-buckets.es.js";
 import { bucketTraceAggregateRows } from "../../lib/trace-aggregate.es.js";
-import { useMetricsTraceAggregate } from "../../hooks/use-metrics-trace-aggregate.es.js";
-import { t as MetricsCard } from "../../../../MetricsCard-ua6C6b8a.js";
 import { ChartArea } from "../chart-area.es.js";
 import { ChartCard } from "../chart-card.es.js";
 import { ChartCardError } from "../chart-card-error.es.js";
-import { EDGE_BUCKET_AXIS } from "../../lib/chart-axis.es.js";
-import { CHART_COLORS } from "../../lib/chart-colors.es.js";
-import { r as MetricsLineChartLegend, t as MetricsLineChart } from "../../../../MetricsLineChart-4SwxBbQx.js";
+import { t as MetricsCard } from "../../../../MetricsCard-kAqSCPPe.js";
+import { r as MetricsLineChartLegend, t as MetricsLineChart } from "../../../../MetricsLineChart-4w5lpH63.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/metrics/components/distinct-ids/distinct-ids-chart.tsx
 /** Most apps set resource and thread ids (through memory); few set user and session ids. */

package/dist/domains/metrics/components/failure-rate-card.cjs.js

@@ -1,16 +1,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_chart_format = require("../lib/chart-format.cjs.js");
+const require_domains_metrics_hooks_use_metrics_activity = require("../hooks/use-metrics-activity.cjs.js");
 const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.cjs.js");
+const require_domains_metrics_lib_chart_axis = require("../lib/chart-axis.cjs.js");
+const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
+const require_domains_metrics_lib_chart_format = require("../lib/chart-format.cjs.js");
 const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
-const require_MetricsCard = require("../../../MetricsCard-BEwiS7Pe.cjs");
+const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
 const require_domains_metrics_components_chart_area = require("./chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./chart-card-error.cjs.js");
-const require_domains_metrics_lib_chart_axis = require("../lib/chart-axis.cjs.js");
-const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
-const require_MetricsLineChart = require("../../../MetricsLineChart-tZxsauau.cjs");
-const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
-const require_domains_metrics_hooks_use_metrics_activity = require("../hooks/use-metrics-activity.cjs.js");
+const require_MetricsCard = require("../../../MetricsCard-DojbLiEx.cjs");
+const require_MetricsLineChart = require("../../../MetricsLineChart-BnY9JKzc.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/failure-rate-card.tsx
 var SERIES = [{

package/dist/domains/metrics/components/failure-rate-card.es.js

@@ -1,15 +1,15 @@
-import { formatPercent } from "../lib/chart-format.es.js";
+import { useMetricsActivity } from "../hooks/use-metrics-activity.es.js";
 import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
+import { EDGE_BUCKET_AXIS } from "../lib/chart-axis.es.js";
+import { CHART_COLORS } from "../lib/chart-colors.es.js";
+import { formatPercent } from "../lib/chart-format.es.js";
 import { bucketPlan, bucketWindow } from "../lib/metrics-buckets.es.js";
-import { t as MetricsCard } from "../../../MetricsCard-ua6C6b8a.js";
+import { OpenErrorsInLogsButton } from "./card-action-buttons.es.js";
 import { ChartArea } from "./chart-area.es.js";
 import { ChartCard } from "./chart-card.es.js";
 import { ChartCardError } from "./chart-card-error.es.js";
-import { EDGE_BUCKET_AXIS } from "../lib/chart-axis.es.js";
-import { CHART_COLORS } from "../lib/chart-colors.es.js";
-import { r as MetricsLineChartLegend, t as MetricsLineChart } from "../../../MetricsLineChart-4SwxBbQx.js";
-import { OpenErrorsInLogsButton } from "./card-action-buttons.es.js";
-import { useMetricsActivity } from "../hooks/use-metrics-activity.es.js";
+import { t as MetricsCard } from "../../../MetricsCard-kAqSCPPe.js";
+import { r as MetricsLineChartLegend, t as MetricsLineChart } from "../../../MetricsLineChart-4w5lpH63.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/metrics/components/failure-rate-card.tsx
 var SERIES = [{

package/dist/domains/metrics/components/kpi-card.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_MetricsKpiCard = require("../../../MetricsKpiCard-C_9GvRAp.cjs");
 const require_utils = require("../../../utils-uDc1ofX1.cjs");
-const require_MetricsKpiCard = require("../../../MetricsKpiCard-By_-sagx.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/kpi-card.tsx
 /** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */

package/dist/domains/metrics/components/kpi-card.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"kpi-card.cjs.js","names":["MetricsKpiCard","_Fragment","cn"],"sources":["../../../../src/domains/metrics/components/kpi-card.tsx"],"sourcesContent":["import type { LucideIcon } from 'lucide-react';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\nimport { cn } from '@/lib/utils';\n\nexport type KpiCardProps = {\n  label: string;\n  icon: LucideIcon;\n  value: string;\n  /** Change from the previous period, in percent. Omitted when there is nothing to compare. */\n  change?: number;\n  lowerIsBetter?: boolean;\n  detail: string;\n  /** The previous period's value, formatted. Shown only beside a `change`. */\n  previous?: string;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". */\n  comparison?: string;\n  isLoading?: boolean;\n  /** A new range is loading: the previous values stay on screen, dimmed. */\n  isUpdating?: boolean;\n  /** The data failed to load: a dash and an error note replace the value and the detail. */\n  isError?: boolean;\n};\n\n/** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */\nexport function KpiCard({ label, icon: Icon, isError = false, ...reading }: KpiCardProps) {\n  return (\n    <MetricsKpiCard busy={!isError && (reading.isLoading || reading.isUpdating)}>\n      <MetricsKpiCard.Label icon={<Icon />}>{label}</MetricsKpiCard.Label>\n      {isError ? <KpiError /> : <KpiReading {...reading} />}\n    </MetricsKpiCard>\n  );\n}\n\nfunction KpiError() {\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className=\"mt-1\">\n        <MetricsKpiCard.Value>—</MetricsKpiCard.Value>\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer detail={<span className=\"text-destructive-foreground\">Couldn't load</span>} />\n    </>\n  );\n}\n\nfunction KpiReading({\n  value,\n  change,\n  lowerIsBetter,\n  detail,\n  previous,\n  comparison,\n  isLoading = false,\n  isUpdating = false,\n}: Omit<KpiCardProps, 'label' | 'icon' | 'isError'>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className={cn('mt-1', fade)} isLoading={isLoading}>\n        <MetricsKpiCard.Value>{value}</MetricsKpiCard.Value>\n        {change !== undefined && (\n          <MetricsKpiCard.Change\n            changePct={change}\n            comparison={comparison}\n            lowerIsBetter={lowerIsBetter}\n            prevValue={previous}\n          />\n        )}\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer\n        detail={detail}\n        // Without a change there is nothing to compare: a lone \"vs 0\" would read as data.\n        prevValue={change === undefined ? undefined : previous}\n        isLoading={isLoading}\n        className={fade}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;AAwBA,SAAgB,QAAQ,EAAE,OAAO,MAAM,MAAM,UAAU,OAAO,GAAG,WAAyB;CACxF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,uBAAAA,gBAAD;EAAgB,MAAM,CAAC,YAAY,QAAQ,aAAa,QAAQ;EAAhE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,OAAhB;GAAsB,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,CAAO,CAAA;GAAI,UAAA;EAA4B,CAAA,GAClE,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,CAAW,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD,EAAY,GAAI,QAAU,CAAA,CACtC;;AAEpB;AAEA,SAAS,WAAW;CAClB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,uBAAAA,eAAe,UAAhB;EAAyB,WAAU;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,OAAhB,EAAA,UAAsB,IAAuB,CAAA;CACtB,CAAA,GACzB,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,QAAhB,EAAuB,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EAA8B,UAAA;CAAmB,CAAA,EAAI,CAAA,CACpG,EAAA,CAAA;AAEN;AAEA,SAAS,WAAW,EAClB,OACA,QACA,eACA,QACA,UACA,YACA,YAAY,OACZ,aAAa,SACsC;CACnD,MAAM,OAAOE,cAAAA,GAAG,mCAAmC,cAAc,YAAY;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAD,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACD,uBAAAA,eAAe,UAAhB;EAAyB,WAAWE,cAAAA,GAAG,QAAQ,IAAI;EAAc;EAAjE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,eAAe,OAAhB,EAAA,UAAuB,MAA4B,CAAA,GAClD,WAAW,KAAA,KACV,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,QAAhB;GACE,WAAW;GACC;GACG;GACf,WAAW;EACZ,CAAA,CAEoB;CACzB,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,QAAhB;EACU;EAER,WAAW,WAAW,KAAA,IAAY,KAAA,IAAY;EACnC;EACX,WAAW;CACZ,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"kpi-card.cjs.js","names":["MetricsKpiCard","_Fragment","cn"],"sources":["../../../../src/domains/metrics/components/kpi-card.tsx"],"sourcesContent":["import type { LucideIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\nimport { cn } from '@/lib/utils';\n\nexport type KpiCardProps = {\n  label: string;\n  icon: LucideIcon;\n  value: string;\n  /** Change from the previous period, in percent. Omitted when there is nothing to compare. */\n  change?: number;\n  lowerIsBetter?: boolean;\n  detail: ReactNode;\n  /** The previous period's value, formatted. Shown only beside a `change`. */\n  previous?: string;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". */\n  comparison?: string;\n  isLoading?: boolean;\n  /** A new range is loading: the previous values stay on screen, dimmed. */\n  isUpdating?: boolean;\n  /** The data failed to load: a dash and an error note replace the value and the detail. */\n  isError?: boolean;\n};\n\n/** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */\nexport function KpiCard({ label, icon: Icon, isError = false, ...reading }: KpiCardProps) {\n  return (\n    <MetricsKpiCard busy={!isError && (reading.isLoading || reading.isUpdating)}>\n      <MetricsKpiCard.Label icon={<Icon />}>{label}</MetricsKpiCard.Label>\n      {isError ? <KpiError /> : <KpiReading {...reading} />}\n    </MetricsKpiCard>\n  );\n}\n\nfunction KpiError() {\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className=\"mt-1\">\n        <MetricsKpiCard.Value>—</MetricsKpiCard.Value>\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer detail={<span className=\"text-destructive-foreground\">Couldn't load</span>} />\n    </>\n  );\n}\n\nfunction KpiReading({\n  value,\n  change,\n  lowerIsBetter,\n  detail,\n  previous,\n  comparison,\n  isLoading = false,\n  isUpdating = false,\n}: Omit<KpiCardProps, 'label' | 'icon' | 'isError'>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className={cn('mt-1', fade)} isLoading={isLoading}>\n        <MetricsKpiCard.Value>{value}</MetricsKpiCard.Value>\n        {change !== undefined && (\n          <MetricsKpiCard.Change\n            changePct={change}\n            comparison={comparison}\n            lowerIsBetter={lowerIsBetter}\n            prevValue={previous}\n          />\n        )}\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer\n        detail={detail}\n        // Without a change there is nothing to compare: a lone \"vs 0\" would read as data.\n        prevValue={change === undefined ? undefined : previous}\n        isLoading={isLoading}\n        className={fade}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;AAyBA,SAAgB,QAAQ,EAAE,OAAO,MAAM,MAAM,UAAU,OAAO,GAAG,WAAyB;CACxF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,uBAAAA,gBAAD;EAAgB,MAAM,CAAC,YAAY,QAAQ,aAAa,QAAQ;EAAhE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,OAAhB;GAAsB,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,CAAO,CAAA;GAAI,UAAA;EAA4B,CAAA,GAClE,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,CAAW,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD,EAAY,GAAI,QAAU,CAAA,CACtC;;AAEpB;AAEA,SAAS,WAAW;CAClB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,uBAAAA,eAAe,UAAhB;EAAyB,WAAU;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,OAAhB,EAAA,UAAsB,IAAuB,CAAA;CACtB,CAAA,GACzB,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,QAAhB,EAAuB,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EAA8B,UAAA;CAAmB,CAAA,EAAI,CAAA,CACpG,EAAA,CAAA;AAEN;AAEA,SAAS,WAAW,EAClB,OACA,QACA,eACA,QACA,UACA,YACA,YAAY,OACZ,aAAa,SACsC;CACnD,MAAM,OAAOE,cAAAA,GAAG,mCAAmC,cAAc,YAAY;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAAD,kBAAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACD,uBAAAA,eAAe,UAAhB;EAAyB,WAAWE,cAAAA,GAAG,QAAQ,IAAI;EAAc;EAAjE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,eAAe,OAAhB,EAAA,UAAuB,MAA4B,CAAA,GAClD,WAAW,KAAA,KACV,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,QAAhB;GACE,WAAW;GACC;GACG;GACf,WAAW;EACZ,CAAA,CAEoB;CACzB,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,QAAhB;EACU;EAER,WAAW,WAAW,KAAA,IAAY,KAAA,IAAY;EACnC;EACX,WAAW;CACZ,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/domains/metrics/components/kpi-card.es.js

@@ -1,5 +1,5 @@
+import { t as MetricsKpiCard } from "../../../MetricsKpiCard-1blTbzUs.js";
 import { t as cn } from "../../../utils-DQx8TpNT.js";
-import { t as MetricsKpiCard } from "../../../MetricsKpiCard-OHbAElTl.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/domains/metrics/components/kpi-card.tsx
 /** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */

package/dist/domains/metrics/components/kpi-card.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"kpi-card.es.js","names":["_Fragment"],"sources":["../../../../src/domains/metrics/components/kpi-card.tsx"],"sourcesContent":["import type { LucideIcon } from 'lucide-react';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\nimport { cn } from '@/lib/utils';\n\nexport type KpiCardProps = {\n  label: string;\n  icon: LucideIcon;\n  value: string;\n  /** Change from the previous period, in percent. Omitted when there is nothing to compare. */\n  change?: number;\n  lowerIsBetter?: boolean;\n  detail: string;\n  /** The previous period's value, formatted. Shown only beside a `change`. */\n  previous?: string;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". */\n  comparison?: string;\n  isLoading?: boolean;\n  /** A new range is loading: the previous values stay on screen, dimmed. */\n  isUpdating?: boolean;\n  /** The data failed to load: a dash and an error note replace the value and the detail. */\n  isError?: boolean;\n};\n\n/** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */\nexport function KpiCard({ label, icon: Icon, isError = false, ...reading }: KpiCardProps) {\n  return (\n    <MetricsKpiCard busy={!isError && (reading.isLoading || reading.isUpdating)}>\n      <MetricsKpiCard.Label icon={<Icon />}>{label}</MetricsKpiCard.Label>\n      {isError ? <KpiError /> : <KpiReading {...reading} />}\n    </MetricsKpiCard>\n  );\n}\n\nfunction KpiError() {\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className=\"mt-1\">\n        <MetricsKpiCard.Value>—</MetricsKpiCard.Value>\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer detail={<span className=\"text-destructive-foreground\">Couldn't load</span>} />\n    </>\n  );\n}\n\nfunction KpiReading({\n  value,\n  change,\n  lowerIsBetter,\n  detail,\n  previous,\n  comparison,\n  isLoading = false,\n  isUpdating = false,\n}: Omit<KpiCardProps, 'label' | 'icon' | 'isError'>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className={cn('mt-1', fade)} isLoading={isLoading}>\n        <MetricsKpiCard.Value>{value}</MetricsKpiCard.Value>\n        {change !== undefined && (\n          <MetricsKpiCard.Change\n            changePct={change}\n            comparison={comparison}\n            lowerIsBetter={lowerIsBetter}\n            prevValue={previous}\n          />\n        )}\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer\n        detail={detail}\n        // Without a change there is nothing to compare: a lone \"vs 0\" would read as data.\n        prevValue={change === undefined ? undefined : previous}\n        isLoading={isLoading}\n        className={fade}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;AAwBA,SAAgB,QAAQ,EAAE,OAAO,MAAM,MAAM,UAAU,OAAO,GAAG,WAAyB;CACxF,OACE,qBAAC,gBAAD;EAAgB,MAAM,CAAC,YAAY,QAAQ,aAAa,QAAQ;EAAhE,UAAA,CACE,oBAAC,eAAe,OAAhB;GAAsB,MAAM,oBAAC,MAAD,CAAO,CAAA;GAAI,UAAA;EAA4B,CAAA,GAClE,UAAU,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,YAAD,EAAY,GAAI,QAAU,CAAA,CACtC;;AAEpB;AAEA,SAAS,WAAW;CAClB,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,eAAe,UAAhB;EAAyB,WAAU;EACjC,UAAA,oBAAC,eAAe,OAAhB,EAAA,UAAsB,IAAuB,CAAA;CACtB,CAAA,GACzB,oBAAC,eAAe,QAAhB,EAAuB,QAAQ,oBAAC,QAAD;EAAM,WAAU;EAA8B,UAAA;CAAmB,CAAA,EAAI,CAAA,CACpG,EAAA,CAAA;AAEN;AAEA,SAAS,WAAW,EAClB,OACA,QACA,eACA,QACA,UACA,YACA,YAAY,OACZ,aAAa,SACsC;CACnD,MAAM,OAAO,GAAG,mCAAmC,cAAc,YAAY;CAC7E,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,qBAAC,eAAe,UAAhB;EAAyB,WAAW,GAAG,QAAQ,IAAI;EAAc;EAAjE,UAAA,CACE,oBAAC,eAAe,OAAhB,EAAA,UAAuB,MAA4B,CAAA,GAClD,WAAW,KAAA,KACV,oBAAC,eAAe,QAAhB;GACE,WAAW;GACC;GACG;GACf,WAAW;EACZ,CAAA,CAEoB;CACzB,CAAA,GAAA,oBAAC,eAAe,QAAhB;EACU;EAER,WAAW,WAAW,KAAA,IAAY,KAAA,IAAY;EACnC;EACX,WAAW;CACZ,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"kpi-card.es.js","names":["_Fragment"],"sources":["../../../../src/domains/metrics/components/kpi-card.tsx"],"sourcesContent":["import type { LucideIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\nimport { cn } from '@/lib/utils';\n\nexport type KpiCardProps = {\n  label: string;\n  icon: LucideIcon;\n  value: string;\n  /** Change from the previous period, in percent. Omitted when there is nothing to compare. */\n  change?: number;\n  lowerIsBetter?: boolean;\n  detail: ReactNode;\n  /** The previous period's value, formatted. Shown only beside a `change`. */\n  previous?: string;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". */\n  comparison?: string;\n  isLoading?: boolean;\n  /** A new range is loading: the previous values stay on screen, dimmed. */\n  isUpdating?: boolean;\n  /** The data failed to load: a dash and an error note replace the value and the detail. */\n  isError?: boolean;\n};\n\n/** One headline number, with its change and the previous value. Group them in `MetricsCardGroup`. */\nexport function KpiCard({ label, icon: Icon, isError = false, ...reading }: KpiCardProps) {\n  return (\n    <MetricsKpiCard busy={!isError && (reading.isLoading || reading.isUpdating)}>\n      <MetricsKpiCard.Label icon={<Icon />}>{label}</MetricsKpiCard.Label>\n      {isError ? <KpiError /> : <KpiReading {...reading} />}\n    </MetricsKpiCard>\n  );\n}\n\nfunction KpiError() {\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className=\"mt-1\">\n        <MetricsKpiCard.Value>—</MetricsKpiCard.Value>\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer detail={<span className=\"text-destructive-foreground\">Couldn't load</span>} />\n    </>\n  );\n}\n\nfunction KpiReading({\n  value,\n  change,\n  lowerIsBetter,\n  detail,\n  previous,\n  comparison,\n  isLoading = false,\n  isUpdating = false,\n}: Omit<KpiCardProps, 'label' | 'icon' | 'isError'>) {\n  const fade = cn('transition-opacity duration-200', isUpdating && 'opacity-50');\n  return (\n    <>\n      <MetricsKpiCard.ValueRow className={cn('mt-1', fade)} isLoading={isLoading}>\n        <MetricsKpiCard.Value>{value}</MetricsKpiCard.Value>\n        {change !== undefined && (\n          <MetricsKpiCard.Change\n            changePct={change}\n            comparison={comparison}\n            lowerIsBetter={lowerIsBetter}\n            prevValue={previous}\n          />\n        )}\n      </MetricsKpiCard.ValueRow>\n      <MetricsKpiCard.Footer\n        detail={detail}\n        // Without a change there is nothing to compare: a lone \"vs 0\" would read as data.\n        prevValue={change === undefined ? undefined : previous}\n        isLoading={isLoading}\n        className={fade}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;AAyBA,SAAgB,QAAQ,EAAE,OAAO,MAAM,MAAM,UAAU,OAAO,GAAG,WAAyB;CACxF,OACE,qBAAC,gBAAD;EAAgB,MAAM,CAAC,YAAY,QAAQ,aAAa,QAAQ;EAAhE,UAAA,CACE,oBAAC,eAAe,OAAhB;GAAsB,MAAM,oBAAC,MAAD,CAAO,CAAA;GAAI,UAAA;EAA4B,CAAA,GAClE,UAAU,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,YAAD,EAAY,GAAI,QAAU,CAAA,CACtC;;AAEpB;AAEA,SAAS,WAAW;CAClB,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,eAAe,UAAhB;EAAyB,WAAU;EACjC,UAAA,oBAAC,eAAe,OAAhB,EAAA,UAAsB,IAAuB,CAAA;CACtB,CAAA,GACzB,oBAAC,eAAe,QAAhB,EAAuB,QAAQ,oBAAC,QAAD;EAAM,WAAU;EAA8B,UAAA;CAAmB,CAAA,EAAI,CAAA,CACpG,EAAA,CAAA;AAEN;AAEA,SAAS,WAAW,EAClB,OACA,QACA,eACA,QACA,UACA,YACA,YAAY,OACZ,aAAa,SACsC;CACnD,MAAM,OAAO,GAAG,mCAAmC,cAAc,YAAY;CAC7E,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,qBAAC,eAAe,UAAhB;EAAyB,WAAW,GAAG,QAAQ,IAAI;EAAc;EAAjE,UAAA,CACE,oBAAC,eAAe,OAAhB,EAAA,UAAuB,MAA4B,CAAA,GAClD,WAAW,KAAA,KACV,oBAAC,eAAe,QAAhB;GACE,WAAW;GACC;GACG;GACf,WAAW;EACZ,CAAA,CAEoB;CACzB,CAAA,GAAA,oBAAC,eAAe,QAAhB;EACU;EAER,WAAW,WAAW,KAAA,IAAY,KAAA,IAAY;EACnC;EACX,WAAW;CACZ,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -1,16 +1,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_chart_format = require("../lib/chart-format.cjs.js");
 const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.cjs.js");
+const require_domains_metrics_hooks_use_metrics_latency = require("../hooks/use-metrics-latency.cjs.js");
+const require_domains_metrics_lib_chart_axis = require("../lib/chart-axis.cjs.js");
+const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
+const require_domains_metrics_lib_chart_format = require("../lib/chart-format.cjs.js");
 const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
-const require_MetricsCard = require("../../../MetricsCard-BEwiS7Pe.cjs");
+const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
 const require_domains_metrics_components_chart_area = require("./chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./chart-card-error.cjs.js");
-const require_domains_metrics_lib_chart_axis = require("../lib/chart-axis.cjs.js");
-const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
-const require_MetricsLineChart = require("../../../MetricsLineChart-tZxsauau.cjs");
-const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
-const require_domains_metrics_hooks_use_metrics_latency = require("../hooks/use-metrics-latency.cjs.js");
+const require_MetricsCard = require("../../../MetricsCard-DojbLiEx.cjs");
+const require_MetricsLineChart = require("../../../MetricsLineChart-BnY9JKzc.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mastra_core_observability = require("@mastra/core/observability");

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

@@ -1,15 +1,15 @@
-import { formatAxisDuration, formatDuration } from "../lib/chart-format.es.js";
 import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
+import { useMetricsLatency } from "../hooks/use-metrics-latency.es.js";
+import { EDGE_BUCKET_AXIS } from "../lib/chart-axis.es.js";
+import { CHART_COLORS } from "../lib/chart-colors.es.js";
+import { formatAxisDuration, formatDuration } from "../lib/chart-format.es.js";
 import { bucketPlan, bucketWindow, intervalHours } from "../lib/metrics-buckets.es.js";
-import { t as MetricsCard } from "../../../MetricsCard-ua6C6b8a.js";
+import { OpenInTracesButton } from "./card-action-buttons.es.js";
 import { ChartArea } from "./chart-area.es.js";
 import { ChartCard } from "./chart-card.es.js";
 import { ChartCardError } from "./chart-card-error.es.js";
-import { EDGE_BUCKET_AXIS } from "../lib/chart-axis.es.js";
-import { CHART_COLORS } from "../lib/chart-colors.es.js";
-import { r as MetricsLineChartLegend, t as MetricsLineChart } from "../../../MetricsLineChart-4SwxBbQx.js";
-import { OpenInTracesButton } from "./card-action-buttons.es.js";
-import { useMetricsLatency } from "../hooks/use-metrics-latency.es.js";
+import { t as MetricsCard } from "../../../MetricsCard-kAqSCPPe.js";
+import { r as MetricsLineChartLegend, t as MetricsLineChart } from "../../../MetricsLineChart-4w5lpH63.js";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { EntityType } from "@mastra/core/observability";

package/dist/domains/metrics/components/metrics-time-range-chip.cjs.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_domains_metrics_hooks_use_metrics = require("../hooks/use-metrics.cjs.js");
-const require_domains_metrics_metrics_date_presets = require("../metrics-date-presets.cjs.js");
 const require_domains_metrics_hooks_use_trace_retention_min_date = require("../hooks/use-trace-retention-min-date.cjs.js");
-const require_filter_bar_time_range = require("../../../filter-bar-time-range-zdM024JD.cjs");
+const require_domains_metrics_metrics_date_presets = require("../metrics-date-presets.cjs.js");
+const require_filter_bar_time_range = require("../../../filter-bar-time-range-DlVNjw43.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/metrics-time-range-chip.tsx
 /**

package/dist/domains/metrics/components/metrics-time-range-chip.es.js

@@ -1,7 +1,7 @@
 import { useMetrics } from "../hooks/use-metrics.es.js";
-import { METRICS_PICKER_PRESETS, fromPickerPreset, toPickerPreset } from "../metrics-date-presets.es.js";
 import { useTraceRetentionMinDate } from "../hooks/use-trace-retention-min-date.es.js";
-import { i as FilterBarTimeRange } from "../../../filter-bar-time-range-qlV8p7hp.js";
+import { METRICS_PICKER_PRESETS, fromPickerPreset, toPickerPreset } from "../metrics-date-presets.es.js";
+import { i as FilterBarTimeRange } from "../../../filter-bar-time-range-D9SnzR2J.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/metrics/components/metrics-time-range-chip.tsx
 /**

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

@@ -1,11 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_metrics_hooks_use_metrics_scores = require("../hooks/use-metrics-scores.cjs.js");
+const require_domains_metrics_lib_chart_axis = require("../lib/chart-axis.cjs.js");
+const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
 const require_domains_metrics_components_chart_area = require("./chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./chart-card-error.cjs.js");
-const require_domains_metrics_lib_chart_axis = require("../lib/chart-axis.cjs.js");
-const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
-const require_MetricsLineChart = require("../../../MetricsLineChart-tZxsauau.cjs");
-const require_domains_metrics_hooks_use_metrics_scores = require("../hooks/use-metrics-scores.cjs.js");
+const require_MetricsLineChart = require("../../../MetricsLineChart-BnY9JKzc.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/scores-card.tsx
 /** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */

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

@@ -1,10 +1,10 @@
+import { useMetricsScores } from "../hooks/use-metrics-scores.es.js";
+import { BUCKET_AXIS } from "../lib/chart-axis.es.js";
+import { CHART_COLORS } from "../lib/chart-colors.es.js";
 import { ChartArea } from "./chart-area.es.js";
 import { ChartCard } from "./chart-card.es.js";
 import { ChartCardError } from "./chart-card-error.es.js";
-import { BUCKET_AXIS } from "../lib/chart-axis.es.js";
-import { CHART_COLORS } from "../lib/chart-colors.es.js";
-import { t as MetricsLineChart } from "../../../MetricsLineChart-4SwxBbQx.js";
-import { useMetricsScores } from "../hooks/use-metrics-scores.es.js";
+import { t as MetricsLineChart } from "../../../MetricsLineChart-4w5lpH63.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/metrics/components/scores-card.tsx
 /** Scores aren't problems, so no warm hues; past five scorers the colors repeat. */

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

@@ -1,17 +1,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_chart_format = require("../lib/chart-format.cjs.js");
+const require_domains_metrics_hooks_use_metrics_activity = require("../hooks/use-metrics-activity.cjs.js");
 const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.cjs.js");
+const require_domains_metrics_lib_chart_axis = require("../lib/chart-axis.cjs.js");
+const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
+const require_domains_metrics_lib_chart_format = require("../lib/chart-format.cjs.js");
 const require_domains_metrics_lib_metrics_buckets = require("../lib/metrics-buckets.cjs.js");
-const require_MetricsCard = require("../../../MetricsCard-BEwiS7Pe.cjs");
+const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
 const require_domains_metrics_components_chart_area = require("./chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./chart-card-error.cjs.js");
-const require_domains_metrics_lib_chart_axis = require("../lib/chart-axis.cjs.js");
-const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
-const require_MetricsLineChart = require("../../../MetricsLineChart-tZxsauau.cjs");
-const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
-const require_MetricsStackedBarChart = require("../../../MetricsStackedBarChart-CDLE76IB.cjs");
-const require_domains_metrics_hooks_use_metrics_activity = require("../hooks/use-metrics-activity.cjs.js");
+const require_MetricsCard = require("../../../MetricsCard-DojbLiEx.cjs");
+const require_MetricsLineChart = require("../../../MetricsLineChart-BnY9JKzc.cjs");
+const require_MetricsStackedBarChart = require("../../../MetricsStackedBarChart-CJQF99sc.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/token-usage-card.tsx

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

@@ -1,16 +1,16 @@
-import { formatAxisCount, formatAxisUsd, formatCount, formatUsd } from "../lib/chart-format.es.js";
+import { useMetricsActivity } from "../hooks/use-metrics-activity.es.js";
 import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
+import { EDGE_BUCKET_AXIS } from "../lib/chart-axis.es.js";
+import { CHART_COLORS } from "../lib/chart-colors.es.js";
+import { formatAxisCount, formatAxisUsd, formatCount, formatUsd } from "../lib/chart-format.es.js";
 import { bucketPlan, bucketWindow } from "../lib/metrics-buckets.es.js";
-import { t as MetricsCard } from "../../../MetricsCard-ua6C6b8a.js";
+import { OpenInTracesButton } from "./card-action-buttons.es.js";
 import { ChartArea } from "./chart-area.es.js";
 import { ChartCard } from "./chart-card.es.js";
 import { ChartCardError } from "./chart-card-error.es.js";
-import { EDGE_BUCKET_AXIS } from "../lib/chart-axis.es.js";
-import { CHART_COLORS } from "../lib/chart-colors.es.js";
-import { r as MetricsLineChartLegend } from "../../../MetricsLineChart-4SwxBbQx.js";
-import { OpenInTracesButton } from "./card-action-buttons.es.js";
-import { t as MetricsStackedBarChart } from "../../../MetricsStackedBarChart-D2QyS4-z.js";
-import { useMetricsActivity } from "../hooks/use-metrics-activity.es.js";
+import { t as MetricsCard } from "../../../MetricsCard-kAqSCPPe.js";
+import { r as MetricsLineChartLegend } from "../../../MetricsLineChart-4w5lpH63.js";
+import { t as MetricsStackedBarChart } from "../../../MetricsStackedBarChart-Bmk0OjYp.js";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/domains/metrics/components/token-usage-card.tsx

package/dist/domains/metrics/components/trace-aggregate-card.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_domains_metrics_hooks_use_metrics_trace_aggregate = require("../hooks/use-metrics-trace-aggregate.cjs.js");
-const require_MetricsCard = require("../../../MetricsCard-BEwiS7Pe.cjs");
 const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
+const require_MetricsCard = require("../../../MetricsCard-DojbLiEx.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/metrics/components/trace-aggregate-card.tsx
 var FILTER_NAMES = {

package/dist/domains/metrics/components/trace-aggregate-card.es.js

@@ -1,6 +1,6 @@
 import { useTraceAggregateGate } from "../hooks/use-metrics-trace-aggregate.es.js";
-import { t as MetricsCard } from "../../../MetricsCard-ua6C6b8a.js";
 import { ChartCard } from "./chart-card.es.js";
+import { t as MetricsCard } from "../../../MetricsCard-kAqSCPPe.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/metrics/components/trace-aggregate-card.tsx
 var FILTER_NAMES = {

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

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_chart_format = require("../lib/chart-format.cjs.js");
 const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.cjs.js");
+const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
+const require_domains_metrics_lib_chart_format = require("../lib/chart-format.cjs.js");
+const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
 const require_domains_metrics_components_chart_area = require("./chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./chart-card-error.cjs.js");
-const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
-const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
-const require_ShareBar = require("../../../ShareBar-3Z5np-NY.cjs");
+const require_ShareBar = require("../../../ShareBar-DERy_egz.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _tanstack_react_query = require("@tanstack/react-query");

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

@@ -1,11 +1,11 @@
-import { formatCount, formatPercent } from "../lib/chart-format.es.js";
 import { useMetricsFilters } from "../hooks/use-metrics-filters.es.js";
+import { CHART_COLORS } from "../lib/chart-colors.es.js";
+import { formatCount, formatPercent } from "../lib/chart-format.es.js";
+import { OpenErrorsInLogsButton, OpenInTracesButton } from "./card-action-buttons.es.js";
 import { ChartArea } from "./chart-area.es.js";
 import { ChartCard } from "./chart-card.es.js";
 import { ChartCardError } from "./chart-card-error.es.js";
-import { CHART_COLORS } from "../lib/chart-colors.es.js";
-import { OpenErrorsInLogsButton, OpenInTracesButton } from "./card-action-buttons.es.js";
-import { t as ShareBar } from "../../../ShareBar-D6dWWl4C.js";
+import { t as ShareBar } from "../../../ShareBar-KrzzdcyI.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { keepPreviousData } from "@tanstack/react-query";

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

@@ -1,13 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_metrics_lib_chart_format = require("../lib/chart-format.cjs.js");
 const require_domains_metrics_hooks_use_metrics_filters = require("../hooks/use-metrics-filters.cjs.js");
+const require_domains_metrics_hooks_use_token_spend = require("../hooks/use-token-spend.cjs.js");
+const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
+const require_domains_metrics_lib_chart_format = require("../lib/chart-format.cjs.js");
+const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
 const require_domains_metrics_components_chart_area = require("./chart-area.cjs.js");
 const require_domains_metrics_components_chart_card = require("./chart-card.cjs.js");
 const require_domains_metrics_components_chart_card_error = require("./chart-card-error.cjs.js");
-const require_domains_metrics_lib_chart_colors = require("../lib/chart-colors.cjs.js");
-const require_domains_metrics_components_card_action_buttons = require("./card-action-buttons.cjs.js");
-const require_ShareBar = require("../../../ShareBar-3Z5np-NY.cjs");
-const require_domains_metrics_hooks_use_token_spend = require("../hooks/use-token-spend.cjs.js");
+const require_ShareBar = require("../../../ShareBar-DERy_egz.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _tanstack_react_query = require("@tanstack/react-query");