@mastra/playground-ui 68.0.0-alpha.2 → 68.0.0

package/dist/MarkdownRenderer-y65WGBhC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownRenderer-y65WGBhC.cjs","names":["ARRIVING_CLASS","useCopyToClipboard","ButtonsGroup","Button","CheckIcon","CopyIcon","DropdownMenu","ChevronDownIcon","DownloadIcon","gfmToMarkdown","toMarkdown","useWatched","useState","useRef","memo","useMemo","cn","Markdown","CodeBlock","remarkGfm"],"sources":["../src/ds/components/MarkdownRenderer/arriving.ts","../src/ds/components/MarkdownRenderer/blocks.ts","../src/ds/components/MarkdownRenderer/table-csv.ts","../src/ds/components/MarkdownRenderer/markdown-table.tsx","../src/ds/components/MarkdownRenderer/table-markdown.ts","../src/ds/components/MarkdownRenderer/use-settled.ts","../src/ds/components/MarkdownRenderer/markdown-renderer.tsx"],"sourcesContent":["import type { ExtraProps } from 'react-markdown';\n\nimport { ARRIVING_CLASS } from '@/ds/tokens';\n\nimport '@/ds/components/Arrival/arrival.css';\n\ntype MarkdownElement = NonNullable<ExtraProps['node']>;\ntype MarkdownChild = MarkdownElement['children'][number];\n\n/** Fades whole: a fence renders through `CodeBlock`, and inline code carries a background. */\nconst UNBROKEN = new Set(['pre', 'code']);\n\nconst wrap = (value: string, arriving: boolean): MarkdownChild => ({\n  type: 'element',\n  tagName: 'span',\n  properties: arriving ? { className: [ARRIVING_CLASS] } : {},\n  children: [{ type: 'text', value }],\n});\n\nfunction markArriving(node: MarkdownElement): void {\n  const classes = node.properties.className;\n\n  node.properties.className = Array.isArray(classes) ? [...classes, ARRIVING_CLASS] : [ARRIVING_CLASS];\n}\n\nfunction rebuild(nodes: MarkdownChild[], arriving: () => boolean): MarkdownChild[] {\n  const out: MarkdownChild[] = [];\n\n  for (const node of nodes) {\n    if (node.type === 'text') {\n      for (const piece of node.value.match(/\\S+|\\s+/g) ?? []) {\n        if (/\\S/.test(piece)) out.push(wrap(piece, arriving()));\n        else out.push({ type: 'text', value: piece });\n      }\n\n      continue;\n    }\n\n    out.push(node);\n\n    if (node.type !== 'element') continue;\n\n    if (!UNBROKEN.has(node.tagName)) node.children = rebuild(node.children, arriving);\n    else if (arriving()) markArriving(node);\n  }\n\n  return out;\n}\n\n/**\n * Gives every word of a block an element of its own, and the entrance class to\n * those past the first `settled` — the words that were not on screen yet when\n * the reader joined this reply.\n *\n * Every word, not just the arriving ones: react-markdown parses afresh on each\n * landing and React matches the children it already mounted by position, so a\n * wrapper that came and went would land where a bare text node used to be and\n * remount half the paragraph, replaying entrances that had long finished.\n * Wrapping the lot keeps every position fixed — a new word only ever appends —\n * and a word never gains the class it did not mount with, so nothing replays.\n */\nexport function rehypeArriving(settled: number) {\n  return function attach() {\n    return (tree: { children: MarkdownChild[] }) => {\n      let word = 0;\n\n      tree.children = rebuild(tree.children, () => word++ >= settled);\n    };\n  };\n}\n","const FENCE_OPEN = /^ {0,3}(`{3,}|~{3,})/;\nconst FENCE_CLOSE = /^ {0,3}(`{3,}|~{3,})[ \\t]*$/;\nconst LIST_ITEM = /^ {0,3}(?:[-*+]|\\d{1,9}[.)])(?:[ \\t]|$)/;\nconst INDENTED = /^(?:\\t| {2,})/;\nconst DEFINITION = /^ {0,3}\\[[^\\]]+\\]:/;\n\nfunction fenceOpenedBy(line: string): string | undefined {\n  return FENCE_OPEN.exec(line)?.[1];\n}\n\n// Both are runs of one character, so `startsWith` is \"same marker, at least as long\".\nfunction closesFence(line: string, marker: string): boolean {\n  return FENCE_CLOSE.exec(line)?.[1]?.startsWith(marker) ?? false;\n}\n\nfunction startsBlock(line: string, inList: boolean): boolean {\n  if (INDENTED.test(line)) return false;\n\n  return !(inList && LIST_ITEM.test(line));\n}\n\n/**\n * Cuts markdown into top-level blocks so a growing reply re-parses its last\n * block instead of all of them. Rejoining the result returns the input, and\n * every block renders as it would have inside the whole.\n *\n * Each rule only ever merges: over-merging costs a re-parse, while cutting a\n * construct in two changes what it renders as. Link reference and footnote\n * definitions resolve across blank lines, which no line-level rule can see, so\n * reaching one outside a fence abandons the split for the whole text.\n */\nexport function splitBlocks(markdown: string): string[] {\n  const lines = markdown.split('\\n');\n  const starts = [0];\n  let fence: string | undefined;\n  let started = false;\n  let broken = false;\n  let inList = false;\n\n  for (const [index, line] of lines.entries()) {\n    if (fence) {\n      if (closesFence(line, fence)) fence = undefined;\n      continue;\n    }\n\n    if (line.trim() === '') {\n      broken = started;\n      continue;\n    }\n\n    if (DEFINITION.test(line)) return [markdown];\n\n    if (broken && startsBlock(line, inList)) {\n      starts.push(index);\n      started = false;\n    }\n\n    if (!started) inList = LIST_ITEM.test(line);\n\n    started = true;\n    broken = false;\n    fence = fenceOpenedBy(line);\n  }\n\n  return starts.map((start, position) => {\n    const end = starts[position + 1];\n    const block = lines.slice(start, end ?? lines.length).join('\\n');\n\n    return end === undefined ? block : `${block}\\n`;\n  });\n}\n","function spreadsheetCell(value: string): string {\n  // Quoting alone does not stop spreadsheet apps from evaluating formulas.\n  const numeric = /^[+-]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:e[+-]?\\d+)?$/i.test(value.trim());\n  const formula = /^[\\s\\uFEFF]*[=+\\-@＝＋－＠]/u.test(value);\n  const controlPrefix = /^[\\t\\r\\n]/.test(value);\n  const safe = controlPrefix || (formula && !numeric) ? `'${value}` : value;\n  return `\"${safe.replaceAll('\"', '\"\"')}\"`;\n}\n\nexport function tableToCsv(rows: string[][]): string {\n  return rows.map(row => row.map(spreadsheetCell).join(',')).join('\\r\\n');\n}\n\nexport function downloadTableCsv(csv: string): void {\n  const blob = new Blob(['\\uFEFF', csv], { type: 'text/csv;charset=utf-8' });\n  const url = URL.createObjectURL(blob);\n  const anchor = document.createElement('a');\n  anchor.href = url;\n  anchor.download = 'table.csv';\n  document.body.appendChild(anchor);\n  anchor.click();\n  anchor.remove();\n  URL.revokeObjectURL(url);\n}\n","import { CheckIcon, ChevronDownIcon, CopyIcon, DownloadIcon } from 'lucide-react';\nimport type { ComponentProps } from 'react';\nimport type { ExtraProps } from 'react-markdown';\nimport { downloadTableCsv } from './table-csv';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\n\nexport function MarkdownTable({ node, children }: ComponentProps<'table'> & ExtraProps) {\n  const markdown = node?.properties.tableMarkdown;\n  const csv = node?.properties.tableCsv;\n  const { isCopied, copyToClipboard } = useCopyToClipboard({ copyMessage: 'Copied table markdown' });\n\n  return (\n    <div className=\"my-3 w-fit max-w-full min-w-0\">\n      <div className=\"flex justify-end\">\n        <ButtonsGroup size=\"sm\" aria-label=\"Table actions\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            disabled={typeof markdown !== 'string'}\n            onClick={() => {\n              if (typeof markdown === 'string') copyToClipboard(markdown);\n            }}\n            aria-label=\"Copy table as markdown\"\n          >\n            {isCopied ? <CheckIcon /> : <CopyIcon />}\n            {isCopied ? 'Copied!' : 'Copy table as markdown'}\n          </Button>\n          <DropdownMenu>\n            <DropdownMenu.Trigger\n              disabled={typeof csv !== 'string'}\n              render={\n                <Button type=\"button\" size=\"icon-sm\" variant=\"ghost\" aria-label=\"More table options\">\n                  <ChevronDownIcon />\n                </Button>\n              }\n            />\n            <DropdownMenu.Content align=\"end\" size=\"sm\" className=\"w-max min-w-0\">\n              <DropdownMenu.Item\n                size=\"sm\"\n                onClick={() => {\n                  if (typeof csv === 'string') downloadTableCsv(csv);\n                }}\n              >\n                <DownloadIcon />\n                Download CSV\n              </DropdownMenu.Item>\n            </DropdownMenu.Content>\n          </DropdownMenu>\n        </ButtonsGroup>\n      </div>\n      <div className=\"max-w-full overflow-x-auto\">\n        <table className=\"table min-w-full\">{children}</table>\n      </div>\n    </div>\n  );\n}\n","import type { Definition, FootnoteDefinition, Nodes, Root, Table } from 'mdast';\nimport { gfmToMarkdown } from 'mdast-util-gfm';\nimport { toMarkdown } from 'mdast-util-to-markdown';\nimport { tableToCsv } from './table-csv';\n\nfunction cellText(node: Nodes): string {\n  if (node.type === 'footnoteReference') return `[^${node.label ?? node.identifier}]`;\n  if ('value' in node) return node.value;\n  if (node.type === 'image' || node.type === 'imageReference') return node.alt ?? '';\n  return 'children' in node ? node.children.map(cellText).join('') : '';\n}\n\nfunction walk(node: Nodes, visit: (node: Nodes) => void): void {\n  visit(node);\n  if ('children' in node) node.children.forEach(child => walk(child, visit));\n}\n\nconst SERIALIZE_OPTIONS = { extensions: [gfmToMarkdown()] };\n\n/** Capture table exports before rehype replaces text with animation spans. */\nexport function remarkTableMarkdown() {\n  return (tree: Root, file: { value: unknown }) => {\n    const source = String(file.value);\n    const definitions = new Map<string, Definition | FootnoteDefinition>();\n    const tables: Table[] = [];\n    walk(tree, node => {\n      if (node.type === 'definition' || node.type === 'footnoteDefinition') {\n        const key = `${node.type}:${node.identifier}`;\n        if (!definitions.has(key)) definitions.set(key, node);\n      }\n      if (node.type === 'table') tables.push(node);\n    });\n\n    const lines = source.split(/\\r\\n|\\r|\\n/);\n    for (const table of tables) {\n      const header = table.children[0];\n      if (!header?.position) continue;\n      const rows = table.children.map(row => {\n        const start = row.position?.start.offset;\n        const end = row.position?.end.offset;\n        return start === undefined || end === undefined ? undefined : source.slice(start, end);\n      });\n      // Only offer exports when the parser supplied the original row locations.\n      if (!rows.every(row => row !== undefined)) continue;\n      // Row positions exclude list/blockquote prefixes. The delimiter has no AST node.\n      const delimiter = lines[header.position.start.line]?.replace(/^[\\t >]*/, '');\n      if (delimiter === undefined) continue;\n      const markdown = [rows[0], delimiter, ...rows.slice(1)];\n      const used = new Set<string>();\n      const collectReference = (node: Nodes) => {\n        if (node.type === 'linkReference' || node.type === 'imageReference') {\n          used.add(`definition:${node.identifier}`);\n        } else if (node.type === 'footnoteReference') {\n          used.add(`footnoteDefinition:${node.identifier}`);\n        }\n      };\n      walk(table, collectReference);\n      // Visiting appended definitions also collects links/footnotes they depend on.\n      // The set prevents duplicates and cycles, including self-referencing footnotes.\n      for (const key of used) {\n        const definition = definitions.get(key);\n        if (!definition) continue;\n        markdown.push('', toMarkdown(definition, SERIALIZE_OPTIONS).trimEnd());\n        walk(definition, collectReference);\n      }\n      const cells = table.children.map(row =>\n        Array.from({ length: header.children.length }, (_, index) => {\n          const cell = row.children[index];\n          return cell ? cellText(cell) : '';\n        }),\n      );\n      table.data = {\n        ...table.data,\n        hProperties: {\n          ...table.data?.hProperties,\n          tableMarkdown: markdown.join('\\n'),\n          tableCsv: tableToCsv(cells),\n        },\n      };\n    }\n  };\n}\n","import { useEffect, useRef, useState } from 'react';\n\nimport { useWatched } from '@/ds/components/Arrival';\nimport { ARRIVING_MS } from '@/ds/tokens';\n\ninterface Landing {\n  words: number;\n  at: number;\n}\n\n/**\n * How many of a reply's words have been on screen long enough that their entrance is over.\n *\n * The entrance plays on whatever mounts carrying the class, so it replays every time a\n * word's element is rebuilt — and markdown rebuilds a growing tail constantly: a `-`\n * turns a paragraph into a list item, a closing `**` splits it around a `<strong>`, the\n * stream ends and the mend comes off. Each of those swaps the element a settled word\n * lives in, which is what makes a word already read fade in again.\n *\n * Ageing them out is the whole answer: a word carries the class only while it is new,\n * so however often the tail is rebuilt, only what is genuinely arriving animates.\n *\n * What counts as new at mount is not this hook's call. A reply the reader was handed\n * is already there, and a block that mounts complete — a card's output, an expanded\n * body — enters with its container. Only a passage born streaming under the reader's\n * eyes is new from its first word: the reveal often lands several words in its first\n * commit, and they enter like every word after them.\n */\nexport function useSettledWords(words: number, streaming: boolean): number {\n  const watched = useWatched();\n  const [settled, setSettled] = useState(() => (watched && streaming ? 0 : words));\n  const landings = useRef<Landing[]>([]);\n  const recorded = useRef(settled);\n\n  useEffect(() => {\n    if (recorded.current !== words) {\n      landings.current.push({ words, at: performance.now() });\n      recorded.current = words;\n    }\n\n    const waiting = landings.current[0];\n    if (!waiting) return;\n\n    const timer = setTimeout(\n      () => {\n        landings.current.shift();\n        setSettled(waiting.words);\n      },\n      Math.max(0, waiting.at + ARRIVING_MS - performance.now()),\n    );\n\n    return () => clearTimeout(timer);\n  }, [settled, words]);\n\n  // A shorter reply replacing the one on screen settles at once: nothing of it is new.\n  return Math.min(settled, words);\n}\n","import { memo, useMemo } from 'react';\nimport type { MouseEvent, MouseEventHandler, ReactNode } from 'react';\nimport Markdown from 'react-markdown';\nimport type { Components, ExtraProps, Options } from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport remend from 'remend';\n\nimport { rehypeArriving } from './arriving';\nimport { splitBlocks } from './blocks';\nimport { MarkdownTable } from './markdown-table';\nimport { remarkTableMarkdown } from './table-markdown';\nimport { useSettledWords } from './use-settled';\nimport { CodeBlock } from '@/ds/components/CodeBlock';\nimport { cn } from '@/lib/utils';\n\nimport './markdown-renderer.css';\n\nexport type MarkdownExternalLinkTarget = 'tab' | 'window';\n\ntype RemarkPlugins = NonNullable<Options['remarkPlugins']>;\n\nexport interface MarkdownRendererProps {\n  children: string;\n  className?: string;\n  externalLinkTarget?: MarkdownExternalLinkTarget;\n  /** The text is a prefix of one still being written: close the markers the stream has not reached. */\n  streaming?: boolean;\n  /** Opt in to table copy/download controls; disabled while this text is streaming. */\n  tableActions?: boolean;\n  /** Remark plugins run after the built-in ones, e.g. to turn a syntax of the host's into elements. Keep it stable. */\n  remarkPlugins?: RemarkPlugins;\n  /** Element overrides merged over the built-in ones. Keep it stable: a new object re-renders every block. */\n  components?: Components;\n}\n\n/**\n * Renders a markdown string. Agent output can carry attacker-influenced text\n * (file contents, tool output, web pages): react-markdown escapes raw HTML and\n * drops dangerous link schemes, so nothing here reaches the DOM as markup.\n *\n * react-markdown re-parses on every render, and a streaming reply re-renders\n * its whole transcript on every delta. Memoizing spares the settled messages;\n * rendering block by block — streaming or not — spares every block of the live\n * one but the last, and lets a reply settle without remounting what is already\n * on screen.\n *\n * The text is drawn as given: pacing a stream is `useRevealedText`, and belongs to\n * whoever owns the whole of what is being laid down — a reply is prose, tool rows\n * and cards, and they have to arrive in the order they were written. Only what\n * lands after the reader joined plays an entrance, and only while it is still new:\n * a reply opened part-written is already there, and fading in what someone is\n * halfway through reading would be both a lie and a screenful of animations at\n * once.\n */\nexport const MarkdownRenderer = memo(function MarkdownRenderer({\n  children,\n  className,\n  externalLinkTarget = 'tab',\n  streaming = false,\n  tableActions = false,\n  remarkPlugins: extraRemarkPlugins,\n  components: extraComponents,\n}: MarkdownRendererProps) {\n  const shown = decodeEscapedNewlines(children);\n  const blocks = useMemo(() => splitBlocks(shown), [shown]);\n  const last = blocks.length - 1;\n  const baseComponents = (tableActions ? TABLE_COMPONENTS : DEFAULT_COMPONENTS)[externalLinkTarget];\n  const components = useMemo(\n    () => (extraComponents ? { ...baseComponents, ...extraComponents } : baseComponents),\n    [baseComponents, extraComponents],\n  );\n\n  const spans = wordSpans(blocks);\n  const settled = useSettledWords(spans.at(-1)?.end ?? 0, streaming);\n\n  // A block whose words have all finished their entrance has nothing left to play,\n  // which is what `undefined` says: leave it as plain text, no spans at all.\n  const settledWords = (span: WordSpan | undefined): number | undefined =>\n    !span || settled >= span.end ? undefined : Math.max(0, settled - span.start);\n\n  const tail = blocks[last] ?? '';\n  const mended = useMemo(() => (streaming ? remend(tail, REMEND_OPTIONS) : tail), [streaming, tail]);\n\n  return (\n    <div className={cn('mastra-markdown', className)}>\n      {blocks.map((block, index) => (\n        <MarkdownBlock\n          key={index}\n          content={index === last ? mended : block}\n          settledWords={settledWords(spans[index])}\n          components={components}\n          streaming={streaming}\n          tableActions={tableActions}\n          extraRemarkPlugins={extraRemarkPlugins}\n        />\n      ))}\n    </div>\n  );\n});\n\n/** Keyed by position at the call site: a content key remounts on every character. */\nconst MarkdownBlock = memo(function MarkdownBlock({\n  components,\n  content,\n  settledWords,\n  streaming,\n  tableActions,\n  extraRemarkPlugins,\n}: {\n  components: Components;\n  content: string;\n  settledWords?: number;\n  streaming: boolean;\n  tableActions: boolean;\n  extraRemarkPlugins?: RemarkPlugins;\n}) {\n  const remarkPlugins = useMemo(() => {\n    const builtIn = tableActions && !streaming ? COPYABLE_REMARK_PLUGINS : REMARK_PLUGINS;\n    return extraRemarkPlugins ? [...builtIn, ...extraRemarkPlugins] : builtIn;\n  }, [tableActions, streaming, extraRemarkPlugins]);\n  const rehypePlugins = useMemo(\n    () => (settledWords === undefined ? SETTLED : [rehypeArriving(settledWords)]),\n    [settledWords],\n  );\n\n  return (\n    <Markdown remarkPlugins={remarkPlugins} rehypePlugins={rehypePlugins} components={components}>\n      {content}\n    </Markdown>\n  );\n});\n\nconst SETTLED: Options['rehypePlugins'] = [];\n\ninterface WordSpan {\n  start: number;\n  end: number;\n}\n\n/**\n * Where each block's words fall in the reply's own count, so one settled count covers\n * them all. Counting the source counts its markers too, so the boundary only ever errs\n * towards leaving a word unanimated.\n */\nfunction wordSpans(blocks: string[]): WordSpan[] {\n  let read = 0;\n\n  return blocks.map(block => {\n    const span = { start: read, end: read + countWords(block) };\n    read = span.end;\n\n    return span;\n  });\n}\n\nfunction countWords(text: string): number {\n  return text.match(/\\S+/g)?.length ?? 0;\n}\n\n// Agent networks emit their text with literal `\\n`. Only unescape when the text\n// has no real newline, otherwise a `\"a\\nb\"` inside a code fence gets shredded.\nfunction decodeEscapedNewlines(text: string): string {\n  return text.includes('\\n') ? text : text.replace(/\\\\n/g, '\\n');\n}\n\ntype MarkdownNode = NonNullable<ExtraProps['node']>;\n\nfunction languageOf(node: MarkdownNode): string | undefined {\n  const classNames = node.properties.className;\n  if (!Array.isArray(classNames)) return undefined;\n\n  const language = classNames.find(entry => typeof entry === 'string' && entry.startsWith('language-'));\n  return typeof language === 'string' ? language.slice('language-'.length) : undefined;\n}\n\nfunction fencedCode(node: MarkdownNode | undefined): { code: string; language?: string } | undefined {\n  const child = node?.children.find(entry => entry.type === 'element' && entry.tagName === 'code');\n  if (child?.type !== 'element') return undefined;\n\n  const code = child.children.map(entry => (entry.type === 'text' ? entry.value : '')).join('');\n  return { code: code.replace(/\\n$/, ''), language: languageOf(child) };\n}\n\nfunction MarkdownCodeBlock({\n  node,\n  children,\n  className,\n}: {\n  node?: MarkdownNode;\n  children?: ReactNode;\n  className?: string;\n}) {\n  const fenced = fencedCode(node);\n  if (!fenced) return <pre className={className}>{children}</pre>;\n\n  return (\n    <CodeBlock\n      code={fenced.code}\n      lang={fenced.language}\n      overflow=\"scroll\"\n      className={cn('my-3 bg-sidebar', className)}\n      copyMessage=\"Copied code to clipboard\"\n    />\n  );\n}\n\nconst POPUP_WINDOW_FEATURES = 'popup=yes,width=720,height=800,resizable=yes,scrollbars=yes';\n\nfunction isPlainLeftClick(event: MouseEvent): boolean {\n  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;\n}\n\nfunction markdownLink(externalLinkTarget: MarkdownExternalLinkTarget): NonNullable<Components['a']> {\n  return function MarkdownLink({ href, title, children }) {\n    const isExternal = /^https?:\\/\\//i.test(href ?? '');\n\n    const openInPopup: MouseEventHandler<HTMLAnchorElement> = event => {\n      if (!isExternal || externalLinkTarget !== 'window' || !isPlainLeftClick(event)) return;\n\n      const popup = window.open(href, '_blank', POPUP_WINDOW_FEATURES);\n      if (!popup) return;\n\n      popup.opener = null;\n      event.preventDefault();\n    };\n\n    return (\n      <a\n        href={href}\n        title={title}\n        onClick={openInPopup}\n        target={isExternal ? '_blank' : undefined}\n        rel={isExternal ? 'noopener noreferrer' : undefined}\n      >\n        {children}\n      </a>\n    );\n  };\n}\n\nconst REMARK_PLUGINS = [remarkGfm];\nconst COPYABLE_REMARK_PLUGINS = [remarkGfm, remarkTableMarkdown];\n\n// Links stay text until their URL lands: remend's placeholder href would render\n// a live anchor to nowhere. No math is rendered here, so pairing `$$` would only\n// turn one literal into another.\nconst REMEND_OPTIONS = { katex: false, linkMode: 'text-only' } as const;\n\n// Elements are listed one by one: react-markdown also passes its `node`, which\n// React would forward to the DOM as a stray attribute. Everything else is\n// styled from markdown-renderer.css.\nconst COMPONENTS: Components = {\n  pre: MarkdownCodeBlock,\n  a: markdownLink('tab'),\n};\n\nconst WINDOW_COMPONENTS: Components = {\n  ...COMPONENTS,\n  a: markdownLink('window'),\n};\n\nconst DEFAULT_COMPONENTS = { tab: COMPONENTS, window: WINDOW_COMPONENTS };\nconst TABLE_COMPONENTS = {\n  tab: { ...COMPONENTS, table: MarkdownTable },\n  window: { ...WINDOW_COMPONENTS, table: MarkdownTable },\n};\n"],"mappings":"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"}

package/dist/{MetricsCard-CEB-f2sv.cjs → MetricsCard-BEwiS7Pe.cjs}

@@ -44,7 +44,7 @@ function MetricsCardError({ message = "Failed to load data", className }) {
 /**
 * The header of a card with one large chart (an explorer, a detail page): the label over a large
 * value, the change against the previous period beside it. Cards in a grid use the compact title
-* and `MetricsCard.Total` instead. A skeleton while loading, in the value's own line box.
+* and `MetricsCard.Total` instead. A skeleton while loading, at the value's own trimmed height.
 */
 function MetricsCardHeadline({ label, value, change, isLoading = false, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -55,13 +55,13 @@ function MetricsCardHeadline({ label, value, change, isLoading = false, classNam
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "flex items-baseline gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]",
-				children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, {
-					line: "text-title",
-					className: "w-24"
-				}) : value
+				className: require_utils.cn("text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]", isLoading && "relative min-w-24"),
+				children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "invisible",
+					children: "0"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.Skeleton, { className: "absolute inset-0" })] }) : value
 			}), !isLoading && change && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "text-body-sm text-muted-foreground tabular-nums",
+				className: "text-body-sm text-muted-foreground tabular-nums [text-box:trim-both_cap_alphabetic]",
 				children: [change, " vs previous"]
 			})]
 		})]
@@ -213,4 +213,4 @@ Object.defineProperty(exports, "MetricsCard", {
 	}
 });
 
-//# sourceMappingURL=MetricsCard-CEB-f2sv.cjs.map
+//# sourceMappingURL=MetricsCard-BEwiS7Pe.cjs.map

package/dist/MetricsCard-BEwiS7Pe.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsCard-BEwiS7Pe.cjs","names":["cn","cn","cn","Txt","cn","_Fragment","Skeleton","cn","Spinner","cn","Txt","Card","cn","cn","DropdownMenu","cn","ChevronDownIcon","cn","cn","cn","SkeletonText","MetricsKpiCard"],"sources":["../src/ds/components/MetricsCard/metrics-card-actions.tsx","../src/ds/components/MetricsCard/metrics-card-content.tsx","../src/ds/components/MetricsCard/metrics-card-error.tsx","../src/ds/components/MetricsCard/metrics-card-headline.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-title.tsx","../src/ds/components/MetricsCard/metrics-card-title-menu.tsx","../src/ds/components/MetricsCard/metrics-card-toolbar.tsx","../src/ds/components/MetricsCard/metrics-card-top-bar.tsx","../src/ds/components/MetricsCard/metrics-card-total.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 the title and `Total` (which always renders last). Small (28px) buttons sit\n *  centered on the 20px title line without making the top bar taller. */\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        '-my-1 flex shrink-0 items-center gap-1 self-start',\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 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 { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/**\n * The header of a card with one large chart (an explorer, a detail page): the label over a large\n * value, the change against the previous period beside it. Cards in a grid use the compact title\n * and `MetricsCard.Total` instead. A skeleton while loading, at the value's own trimmed height.\n */\nexport function MetricsCardHeadline({\n  label,\n  value,\n  change,\n  isLoading = false,\n  className,\n}: {\n  label: string;\n  value: string;\n  /** E.g. \"+71.4%\"; shown as \"+71.4% vs previous\". */\n  change?: string;\n  isLoading?: boolean;\n  className?: string;\n}) {\n  return (\n    <div className={cn('grid gap-1.5', className)}>\n      <h3 className=\"text-body-sm text-muted-foreground\">{label}</h3>\n      <span className=\"flex items-baseline gap-2\">\n        <span\n          className={cn(\n            'text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]',\n            isLoading && 'relative min-w-24',\n          )}\n        >\n          {isLoading ? (\n            // Hidden text keeps the value's trimmed height, so the row (and the actions centred on\n            // it) doesn't move when the value arrives; the bar covers it.\n            <>\n              <span className=\"invisible\">0</span>\n              <Skeleton className=\"absolute inset-0\" />\n            </>\n          ) : (\n            value\n          )}\n        </span>\n        {!isLoading &&\n          change && (\n            // Trimmed like the value, so its line box doesn't make the row taller than while loading.\n            <span className=\"text-body-sm text-muted-foreground tabular-nums [text-box:trim-both_cap_alphabetic]\">\n              {change} vs previous\n            </span>\n          )}\n      </span>\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 { cn } from '@/lib/utils';\n\nexport function MetricsCardTitle({\n  children,\n  className,\n  as: Tag = 'h3',\n}: {\n  children: string;\n  className?: string;\n  as?: 'h2' | 'h3' | 'h4';\n}) {\n  return <Tag className={cn('text-body font-medium text-foreground', className)}>{children}</Tag>;\n}\n","import { ChevronDownIcon } from 'lucide-react';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport type { DropdownMenuRadioOption } from '@/ds/components/DropdownMenu';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsCardTitleMenuProps<V extends string> = {\n  /** The card title for the picked view (e.g. \"Spend by model\"). */\n  title: string;\n  value: V;\n  onValueChange: (value: V) => void;\n  /** The views (e.g. \"By model\", \"By provider\"). */\n  options: readonly DropdownMenuRadioOption<V>[];\n  className?: string;\n};\n\n/**\n * A card title that switches the card's view, as on Vercel's usage cards: the title is the\n * trigger, with a chevron. The hover fill bleeds past the text so the title stays aligned.\n * Wrapped, so the top bar stretches the wrapper rather than the button, and the menu's open-state\n * nodes next to the trigger don't become the top bar's first child.\n */\nexport function MetricsCardTitleMenu<V extends string>({\n  title,\n  value,\n  onValueChange,\n  options,\n  className,\n}: MetricsCardTitleMenuProps<V>) {\n  return (\n    <div className=\"flex min-w-0\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger\n          render={\n            <button\n              type=\"button\"\n              className={cn(\n                '-mx-1.5 -my-0.5 flex items-center gap-1 self-start rounded-md px-1.5 py-0.5 text-left text-body font-medium text-foreground hover:bg-fill-subtle',\n                className,\n              )}\n            />\n          }\n        >\n          {title}\n          <ChevronDownIcon className=\"size-3.5 text-muted-foreground\" />\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content align=\"start\">\n          <DropdownMenu.RadioOptions options={options} value={value} onValueChange={onValueChange} closeOnSelect />\n        </DropdownMenu.Content>\n      </DropdownMenu>\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: 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. At least 24px\n * tall, so toolbars line up across cards in the same row.\n */\nexport function MetricsCardToolbar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      className={cn(\n        'flex min-h-6 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 { SkeletonText } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/** One of several totals in a card that charts a few series, marked with its series' color. */\nexport type MetricsCardTotalPart = { label: string; value: string; color: string };\n\n/**\n * A card's total, right of the title in the same type (14px, medium). Always the top\n * bar's last item. A skeleton while loading, in the value's own line box. A card charting a\n * few series of different things (resources, threads) can give one total each, each after a\n * marker in its series' color, like the legend.\n */\nexport function MetricsCardTotal({\n  value,\n  isLoading = false,\n  className,\n}: {\n  value: string | readonly MetricsCardTotalPart[];\n  isLoading?: boolean;\n  className?: string;\n}) {\n  return (\n    <span className={cn('order-last shrink-0 text-body font-medium text-foreground tabular-nums', className)}>\n      <TotalValue value={value} isLoading={isLoading} />\n    </span>\n  );\n}\n\nfunction TotalValue({ value, isLoading }: { value: string | readonly MetricsCardTotalPart[]; isLoading: boolean }) {\n  if (isLoading) return <SkeletonText line=\"text-body\" className=\"h-4 w-14\" />;\n  if (typeof value === 'string') return value;\n  return (\n    <span className=\"inline-flex items-center gap-3\">\n      {value.map(part => (\n        <span key={part.label} className=\"inline-flex items-center gap-1.5\">\n          <span aria-hidden className=\"size-2 shrink-0 rounded-[2px]\" style={{ backgroundColor: part.color }} />\n          {/* The marker is decorative; screen readers hear which total this is. */}\n          <span className=\"sr-only\">{part.label} </span>\n          {part.value}\n        </span>\n      ))}\n    </span>\n  );\n}\n","import { MetricsCardActions } from './metrics-card-actions';\nimport { MetricsCardContent } from './metrics-card-content';\nimport { MetricsCardError } from './metrics-card-error';\nimport { MetricsCardHeadline } from './metrics-card-headline';\nimport { MetricsCardLoading } from './metrics-card-loading';\nimport { MetricsCardNoData } from './metrics-card-no-data';\nimport { MetricsCardRoot } from './metrics-card-root';\nimport { MetricsCardTitle } from './metrics-card-title';\nimport { MetricsCardTitleMenu } from './metrics-card-title-menu';\nimport { MetricsCardToolbar } from './metrics-card-toolbar';\nimport { MetricsCardTopBar } from './metrics-card-top-bar';\nimport { MetricsCardTotal } from './metrics-card-total';\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  Actions: MetricsCardActions,\n  Title: MetricsCardTitle,\n  TitleMenu: MetricsCardTitleMenu,\n  Total: MetricsCardTotal,\n  Headline: MetricsCardHeadline,\n  Loading: MetricsCardLoading,\n  Error: MetricsCardError,\n  Content: MetricsCardContent,\n  NoData: MetricsCardNoData,\n});\n"],"mappings":"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"}

package/dist/{MetricsCard-M8awJ2B_.js → MetricsCard-ua6C6b8a.js}

@@ -1,11 +1,11 @@
 import { t as cn } from "./utils-DQx8TpNT.js";
 import { t as Txt } from "./Txt-BM6TVV_c.js";
 import { t as DropdownMenu } from "./dropdown-menu-B4jY3J9e.js";
-import { SkeletonText } from "./components/Skeleton.es.js";
+import { Skeleton, SkeletonText } from "./components/Skeleton.es.js";
 import { t as Spinner } from "./spinner-CnLgLj9R.js";
 import { t as MetricsKpiCard } from "./MetricsKpiCard-OHbAElTl.js";
 import { t as Card } from "./Card-LU1aWO7U.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
 // src/ds/components/MetricsCard/metrics-card-actions.tsx
 /** Container for icon buttons / small actions in the top bar of a MetricsCard,
@@ -44,7 +44,7 @@ function MetricsCardError({ message = "Failed to load data", className }) {
 /**
 * The header of a card with one large chart (an explorer, a detail page): the label over a large
 * value, the change against the previous period beside it. Cards in a grid use the compact title
-* and `MetricsCard.Total` instead. A skeleton while loading, in the value's own line box.
+* and `MetricsCard.Total` instead. A skeleton while loading, at the value's own trimmed height.
 */
 function MetricsCardHeadline({ label, value, change, isLoading = false, className }) {
 	return /* @__PURE__ */ jsxs("div", {
@@ -55,13 +55,13 @@ function MetricsCardHeadline({ label, value, change, isLoading = false, classNam
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "flex items-baseline gap-2",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]",
-				children: isLoading ? /* @__PURE__ */ jsx(SkeletonText, {
-					line: "text-title",
-					className: "w-24"
-				}) : value
+				className: cn("text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]", isLoading && "relative min-w-24"),
+				children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "invisible",
+					children: "0"
+				}), /* @__PURE__ */ jsx(Skeleton, { className: "absolute inset-0" })] }) : value
 			}), !isLoading && change && /* @__PURE__ */ jsxs("span", {
-				className: "text-body-sm text-muted-foreground tabular-nums",
+				className: "text-body-sm text-muted-foreground tabular-nums [text-box:trim-both_cap_alphabetic]",
 				children: [change, " vs previous"]
 			})]
 		})]
@@ -208,4 +208,4 @@ var MetricsCard = Object.assign(MetricsCardRoot, {
 });
 export { MetricsCard as t };
 
-//# sourceMappingURL=MetricsCard-M8awJ2B_.js.map
+//# sourceMappingURL=MetricsCard-ua6C6b8a.js.map

package/dist/MetricsCard-ua6C6b8a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsCard-ua6C6b8a.js","names":["_Fragment"],"sources":["../src/ds/components/MetricsCard/metrics-card-actions.tsx","../src/ds/components/MetricsCard/metrics-card-content.tsx","../src/ds/components/MetricsCard/metrics-card-error.tsx","../src/ds/components/MetricsCard/metrics-card-headline.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-title.tsx","../src/ds/components/MetricsCard/metrics-card-title-menu.tsx","../src/ds/components/MetricsCard/metrics-card-toolbar.tsx","../src/ds/components/MetricsCard/metrics-card-top-bar.tsx","../src/ds/components/MetricsCard/metrics-card-total.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 the title and `Total` (which always renders last). Small (28px) buttons sit\n *  centered on the 20px title line without making the top bar taller. */\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        '-my-1 flex shrink-0 items-center gap-1 self-start',\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 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 { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/**\n * The header of a card with one large chart (an explorer, a detail page): the label over a large\n * value, the change against the previous period beside it. Cards in a grid use the compact title\n * and `MetricsCard.Total` instead. A skeleton while loading, at the value's own trimmed height.\n */\nexport function MetricsCardHeadline({\n  label,\n  value,\n  change,\n  isLoading = false,\n  className,\n}: {\n  label: string;\n  value: string;\n  /** E.g. \"+71.4%\"; shown as \"+71.4% vs previous\". */\n  change?: string;\n  isLoading?: boolean;\n  className?: string;\n}) {\n  return (\n    <div className={cn('grid gap-1.5', className)}>\n      <h3 className=\"text-body-sm text-muted-foreground\">{label}</h3>\n      <span className=\"flex items-baseline gap-2\">\n        <span\n          className={cn(\n            'text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]',\n            isLoading && 'relative min-w-24',\n          )}\n        >\n          {isLoading ? (\n            // Hidden text keeps the value's trimmed height, so the row (and the actions centred on\n            // it) doesn't move when the value arrives; the bar covers it.\n            <>\n              <span className=\"invisible\">0</span>\n              <Skeleton className=\"absolute inset-0\" />\n            </>\n          ) : (\n            value\n          )}\n        </span>\n        {!isLoading &&\n          change && (\n            // Trimmed like the value, so its line box doesn't make the row taller than while loading.\n            <span className=\"text-body-sm text-muted-foreground tabular-nums [text-box:trim-both_cap_alphabetic]\">\n              {change} vs previous\n            </span>\n          )}\n      </span>\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 { cn } from '@/lib/utils';\n\nexport function MetricsCardTitle({\n  children,\n  className,\n  as: Tag = 'h3',\n}: {\n  children: string;\n  className?: string;\n  as?: 'h2' | 'h3' | 'h4';\n}) {\n  return <Tag className={cn('text-body font-medium text-foreground', className)}>{children}</Tag>;\n}\n","import { ChevronDownIcon } from 'lucide-react';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport type { DropdownMenuRadioOption } from '@/ds/components/DropdownMenu';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsCardTitleMenuProps<V extends string> = {\n  /** The card title for the picked view (e.g. \"Spend by model\"). */\n  title: string;\n  value: V;\n  onValueChange: (value: V) => void;\n  /** The views (e.g. \"By model\", \"By provider\"). */\n  options: readonly DropdownMenuRadioOption<V>[];\n  className?: string;\n};\n\n/**\n * A card title that switches the card's view, as on Vercel's usage cards: the title is the\n * trigger, with a chevron. The hover fill bleeds past the text so the title stays aligned.\n * Wrapped, so the top bar stretches the wrapper rather than the button, and the menu's open-state\n * nodes next to the trigger don't become the top bar's first child.\n */\nexport function MetricsCardTitleMenu<V extends string>({\n  title,\n  value,\n  onValueChange,\n  options,\n  className,\n}: MetricsCardTitleMenuProps<V>) {\n  return (\n    <div className=\"flex min-w-0\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger\n          render={\n            <button\n              type=\"button\"\n              className={cn(\n                '-mx-1.5 -my-0.5 flex items-center gap-1 self-start rounded-md px-1.5 py-0.5 text-left text-body font-medium text-foreground hover:bg-fill-subtle',\n                className,\n              )}\n            />\n          }\n        >\n          {title}\n          <ChevronDownIcon className=\"size-3.5 text-muted-foreground\" />\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content align=\"start\">\n          <DropdownMenu.RadioOptions options={options} value={value} onValueChange={onValueChange} closeOnSelect />\n        </DropdownMenu.Content>\n      </DropdownMenu>\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: 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. At least 24px\n * tall, so toolbars line up across cards in the same row.\n */\nexport function MetricsCardToolbar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      className={cn(\n        'flex min-h-6 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 { SkeletonText } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/** One of several totals in a card that charts a few series, marked with its series' color. */\nexport type MetricsCardTotalPart = { label: string; value: string; color: string };\n\n/**\n * A card's total, right of the title in the same type (14px, medium). Always the top\n * bar's last item. A skeleton while loading, in the value's own line box. A card charting a\n * few series of different things (resources, threads) can give one total each, each after a\n * marker in its series' color, like the legend.\n */\nexport function MetricsCardTotal({\n  value,\n  isLoading = false,\n  className,\n}: {\n  value: string | readonly MetricsCardTotalPart[];\n  isLoading?: boolean;\n  className?: string;\n}) {\n  return (\n    <span className={cn('order-last shrink-0 text-body font-medium text-foreground tabular-nums', className)}>\n      <TotalValue value={value} isLoading={isLoading} />\n    </span>\n  );\n}\n\nfunction TotalValue({ value, isLoading }: { value: string | readonly MetricsCardTotalPart[]; isLoading: boolean }) {\n  if (isLoading) return <SkeletonText line=\"text-body\" className=\"h-4 w-14\" />;\n  if (typeof value === 'string') return value;\n  return (\n    <span className=\"inline-flex items-center gap-3\">\n      {value.map(part => (\n        <span key={part.label} className=\"inline-flex items-center gap-1.5\">\n          <span aria-hidden className=\"size-2 shrink-0 rounded-[2px]\" style={{ backgroundColor: part.color }} />\n          {/* The marker is decorative; screen readers hear which total this is. */}\n          <span className=\"sr-only\">{part.label} </span>\n          {part.value}\n        </span>\n      ))}\n    </span>\n  );\n}\n","import { MetricsCardActions } from './metrics-card-actions';\nimport { MetricsCardContent } from './metrics-card-content';\nimport { MetricsCardError } from './metrics-card-error';\nimport { MetricsCardHeadline } from './metrics-card-headline';\nimport { MetricsCardLoading } from './metrics-card-loading';\nimport { MetricsCardNoData } from './metrics-card-no-data';\nimport { MetricsCardRoot } from './metrics-card-root';\nimport { MetricsCardTitle } from './metrics-card-title';\nimport { MetricsCardTitleMenu } from './metrics-card-title-menu';\nimport { MetricsCardToolbar } from './metrics-card-toolbar';\nimport { MetricsCardTopBar } from './metrics-card-top-bar';\nimport { MetricsCardTotal } from './metrics-card-total';\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  Actions: MetricsCardActions,\n  Title: MetricsCardTitle,\n  TitleMenu: MetricsCardTitleMenu,\n  Total: MetricsCardTotal,\n  Headline: MetricsCardHeadline,\n  Loading: MetricsCardLoading,\n  Error: MetricsCardError,\n  Content: MetricsCardContent,\n  NoData: MetricsCardNoData,\n});\n"],"mappings":"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"}

package/dist/{MetricsLineChart-BhHoduO0.js → MetricsLineChart-4SwxBbQx.js}

@@ -9,7 +9,7 @@ import { ChartPlot } from "./primitives/chart-plot.es.js";
 import { ChartTooltipPosition } from "./primitives/chart-tooltip-position.es.js";
 import { useChartDefsId } from "./primitives/use-chart-defs-id.es.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Area, CartesianGrid, ComposedChart, Line, Tooltip } from "recharts";
+import { Area, CartesianGrid, ComposedChart, Line, ReferenceLine, Tooltip } from "recharts";
 // src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx
 /** A marker and a label per series. Totals belong in the card's header, not here. */
 function MetricsLineChartLegend({ series, className }) {
@@ -141,7 +141,7 @@ function MetricsLineChart(props) {
 	});
 }
 /** The plot itself, once the data is in. */
-function LinePlot({ data, series, height = 210, yDomain, onPointClick, onBucketClick, xKey = "time", timestampKey = "tsMs", xLabels = "auto", tooltipLabelKey, showDots = false, dots = "auto", lineStyle = "default", valueFormatter, axisFormatter, showYAxis = true }) {
+function LinePlot({ data, series, height = 210, yDomain, onPointClick, onBucketClick, xKey = "time", timestampKey = "tsMs", xLabels = "auto", tooltipLabelKey, showDots = false, dots = "auto", lineStyle = "default", valueFormatter, axisFormatter, showYAxis = true, markers = [] }) {
 	const id = useChartDefsId();
 	const { size, onResize, ref } = useChartSize();
 	const format = valueFormatter ?? compactNumber.format;
@@ -212,6 +212,17 @@ function LinePlot({ data, series, height = 210, yDomain, onPointClick, onBucketC
 					max: dataMax(data, series.map((s) => s.dataKey)),
 					integer: isWholeData(data, series.map((s) => s.dataKey))
 				}),
+				markers.map((m) => /* @__PURE__ */ jsx(ReferenceLine, {
+					x: m.x,
+					stroke: "var(--border-strong)",
+					strokeDasharray: "3 3",
+					label: m.label ? {
+						value: m.label,
+						position: "insideTopLeft",
+						fill: "var(--muted-foreground)",
+						fontSize: 11
+					} : void 0
+				}, m.x)),
 				/* @__PURE__ */ jsx(Tooltip, {
 					...CHART_TOOLTIP_PROPS,
 					content: /* @__PURE__ */ jsx(ChartTooltipPosition, { children: /* @__PURE__ */ jsx(MetricsLineChartTooltip, {
@@ -248,4 +259,4 @@ function isRecord(value) {
 }
 export { MetricsLineChartTooltip as n, MetricsLineChartLegend as r, MetricsLineChart as t };
 
-//# sourceMappingURL=MetricsLineChart-BhHoduO0.js.map
+//# sourceMappingURL=MetricsLineChart-4SwxBbQx.js.map

package/dist/MetricsLineChart-4SwxBbQx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsLineChart-4SwxBbQx.js","names":[],"sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["import type { MetricsLineChartSeries } from './metrics-line-chart';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/** A marker and a label per series. Totals belong in the card's header, not here. */\nexport function MetricsLineChartLegend({\n  series,\n  className,\n}: {\n  series: Pick<MetricsLineChartSeries, 'dataKey' | 'label' | 'color' | 'dashed'>[];\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-wrap items-center gap-x-4 gap-y-1', className)}>\n      {series.map(s => (\n        <div key={s.dataKey} className=\"inline-flex items-center gap-1.5\">\n          {s.dashed ? (\n            <span className=\"h-0 w-3 shrink-0 border-t-2 border-dashed\" style={{ borderColor: s.color }} />\n          ) : (\n            <div className=\"size-2 shrink-0 rounded-[2px]\" style={{ backgroundColor: s.color }} />\n          )}\n          <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"max-w-48 truncate\">\n            {s.label}\n          </Txt>\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { ChartTooltip } from '@/ds/components/ChartTooltip';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsLineChartTooltip({\n  active,\n  payload,\n  label,\n  suffix,\n  formatValue = value => value.toLocaleString('en-US'),\n  showTotal = false,\n  labelKey,\n  formatByKey,\n}: {\n  active?: boolean;\n  payload?: Array<{\n    name: string;\n    value: number;\n    color: string;\n    dataKey?: string | number;\n    payload?: Record<string, unknown>;\n  }>;\n  label?: string;\n  suffix?: string;\n  formatValue?: (value: number) => string;\n  /** Adds a \"Total\" row under a hairline: the sum of every row, e.g. a stacked column's height. */\n  showTotal?: boolean;\n  /** Read the heading from this field of the hovered row instead of the x-axis label. */\n  labelKey?: string;\n  /** Per-series formatters, by data key, for charts that mix units (counts and durations). */\n  formatByKey?: Record<string, (value: number) => string>;\n}) {\n  if (!active || !payload?.length) return null;\n  // A missing reading (NaN, Infinity) shows as a dash and stays out of the total.\n  const finite = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);\n  const total = payload.reduce((sum, entry) => sum + (finite(entry.value) ? entry.value : 0), 0);\n  // A bucket with no readings at all totals to a dash, not 0.\n  const hasReading = payload.some(entry => finite(entry.value));\n  const heading = labelKey ? String(payload[0]?.payload?.[labelKey] ?? label ?? '') : label;\n  const format = (entry: { dataKey?: string | number }) => formatByKey?.[String(entry.dataKey)] ?? formatValue;\n  // A number through its formatter; a missing or non-finite one as a dash; text as it is.\n  const reading = (entry: (typeof payload)[number]) => {\n    if (finite(entry.value)) return format(entry)(entry.value);\n    if (typeof entry.value === 'number' || entry.value == null) return '—';\n    return entry.value;\n  };\n  return (\n    // A floor like shadcn's chart tooltip, so short readouts don't size it to their own label.\n    <ChartTooltip className=\"min-w-32\">\n      <Txt variant=\"column\" tone=\"ink\" className=\"mb-1\">\n        {heading}\n      </Txt>\n      <div className=\"grid grid-cols-[auto_1fr_auto] items-center gap-x-2 gap-y-1\">\n        {payload.map(entry => (\n          <div key={entry.name} className=\"contents\">\n            <span className=\"size-2 rounded-[2px]\" style={{ backgroundColor: entry.color }} />\n            <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"max-w-40 truncate\">\n              {entry.name}\n            </Txt>\n            <span className=\"text-right font-mono text-foreground tabular-nums\">\n              {reading(entry)}\n              {finite(entry.value) && suffix}\n            </span>\n          </div>\n        ))}\n        {showTotal && (\n          <div className=\"col-span-3 grid grid-cols-subgrid items-center border-t border-border pt-1\">\n            <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"col-span-2\">\n              Total\n            </Txt>\n            <span className=\"text-right font-mono text-foreground tabular-nums\">\n              {hasReading ? formatValue(total) : '—'}\n              {hasReading && suffix}\n            </span>\n          </div>\n        )}\n      </div>\n    </ChartTooltip>\n  );\n}\n","import { Area, CartesianGrid, ComposedChart, Line, ReferenceLine, Tooltip } from 'recharts';\nimport { MetricsLineChartLegend } from './metrics-line-chart-legend';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport { CHART_CURSOR_PROPS, CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { Y_AXIS_WIDTH, compactNumber, dataMax, isWholeData, timeXAxis, valueYAxis } from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsLineChartSeries = {\n  dataKey: string;\n  label: string;\n  color: string;\n  /** A secondary reading (e.g. an average next to counts): dashed, no fill under it. */\n  dashed?: boolean;\n  /** The series to read first (e.g. P95 among percentiles): a slightly heavier line. */\n  emphasis?: boolean;\n};\n\n/** Line weight; an emphasised series adds half a pixel. */\nconst LINE_WIDTH = 1.75;\n/** Opacity at the top of the fill under a line (it fades to nothing at the base). */\nconst AREA_OPACITY = 0.12;\n\n/**\n * How the series draw.\n * - `default`: 1.75px lines over a fill.\n * - `thin`: 1.5px lines (emphasis included) over a fainter fill (40% of the default), for small\n *   cards in a grid.\n */\nexport type MetricsLineChartLineStyle = 'default' | 'thin';\n\nconst LINE_STYLES: Record<MetricsLineChartLineStyle, { width: number; emphasis: number; areaOpacity: number }> = {\n  default: { width: LINE_WIDTH, emphasis: LINE_WIDTH + 0.5, areaOpacity: AREA_OPACITY },\n  thin: { width: 1.5, emphasis: 1.5, areaOpacity: AREA_OPACITY * 0.4 },\n};\n\n/**\n * Fills fade out sideways over their first and last 24px, so they don't end in a hard vertical\n * edge where the line starts and stops. A mask sized to each fill's own box.\n */\nconst THIN_FILL_FADE = '[&_.recharts-area-area]:mask-x-from-[calc(100%-24px)]';\n/** A lone point draws no line at all, so it gets a dot; lines already bridge gaps (`connectNulls`). */\nconst SPARSE_POINTS = 1;\n\n// Jumps straight to the hovered point, with the dots and the tooltip.\nfunction HoverLine({ points }: { points?: { x: number; y: number }[] }) {\n  const [top, bottom] = points ?? [];\n  if (!top || !bottom) return null;\n  return (\n    <line x1={top.x} x2={top.x} y1={top.y} y2={bottom.y} {...CHART_CURSOR_PROPS} className=\"pointer-events-none\" />\n  );\n}\n\nexport type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;\n\nexport type MetricsLineChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Click on a series' active dot. */\n  onPointClick?: MetricsLineChartPointClickHandler;\n  /** Click anywhere on a bucket (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  /** Render a visible dot on every point. A series with a single point gets one anyway. */\n  showDots?: boolean;\n  /**\n   * Point markers. `auto`: on a series' lone point (or every point with `showDots`). `hover`:\n   * none at rest, only the hovered point's.\n   */\n  dots?: 'auto' | 'hover';\n  /** Line weight and fill. `thin` suits small cards in a grid. */\n  lineStyle?: MetricsLineChartLineStyle;\n  /** Set to `false` to render `MetricsLineChartLegend` elsewhere, e.g. next to tabs. */\n  showLegend?: boolean;\n  /** Formats tooltip values (e.g. `ms`, `%`), and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  /**\n   * Vertical lines at buckets, e.g. where a billing period starts. `x` must be one of the data's\n   * `xKey` values: the axis is categorical, so any other value draws nothing.\n   */\n  markers?: { x: string; label?: string }[];\n  className?: string;\n};\n\nexport function MetricsLineChart(props: MetricsLineChartProps) {\n  const { data, series, height = 210, showLegend = true, isLoading = false, className } = props;\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root}>\n      {showLegend && <MetricsLineChartLegend series={series} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"line\" height={height} /> : <LinePlot {...props} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in. */\nfunction LinePlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  onPointClick,\n  onBucketClick,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  showDots = false,\n  dots = 'auto',\n  lineStyle = 'default',\n  valueFormatter,\n  axisFormatter,\n  showYAxis = true,\n  markers = [],\n}: MetricsLineChartProps) {\n  const id = useChartDefsId();\n  const { size, onResize, ref } = useChartSize();\n\n  const format = valueFormatter ?? compactNumber.format;\n  const isSparse = (key: string) => data.filter(row => typeof row[key] === 'number').length <= SPARSE_POINTS;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const line = LINE_STYLES[lineStyle];\n  const restDot = (s: MetricsLineChartSeries) =>\n    dots === 'auto' && (showDots || isSparse(s.dataKey)) ? { r: 3, fill: s.color, strokeWidth: 0 } : false;\n  const activeDot = (s: MetricsLineChartSeries) => ({\n    r: 3.5,\n    fill: s.color,\n    stroke: 'var(--background)',\n    strokeWidth: 2,\n    ...(onPointClick && {\n      style: { cursor: 'pointer' },\n      onClick: (_: unknown, payload: unknown) => {\n        // Recharts passes the dot's props; the hovered row is under `payload`.\n        if (isRecord(payload) && isRecord(payload.payload)) onPointClick(payload.payload, s.dataKey);\n      },\n    }),\n  });\n\n  return (\n    <ChartPlot\n      height={height}\n      plotRef={ref}\n      onResize={onResize}\n      clickable={!!onBucketClick}\n      className={cn(lineStyle === 'thin' && THIN_FILL_FADE)}\n    >\n      <ComposedChart\n        data={data}\n        margin={CHART_MARGIN}\n        onClick={state => {\n          const i = state?.activeTooltipIndex;\n          const row = i === undefined || i === null ? undefined : data[Number(i)];\n          if (onBucketClick && row) onBucketClick(row, Number(i));\n        }}\n      >\n        <defs>\n          {series.map((s, i) => (\n            <linearGradient key={s.dataKey} id={`${id}-area-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor={s.color} stopOpacity={line.areaOpacity} />\n              <stop offset=\"95%\" stopColor={s.color} stopOpacity={0} />\n            </linearGradient>\n          ))}\n        </defs>\n        <CartesianGrid {...CHART_GRID_PROPS} />\n        {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n        {valueYAxis({\n          show: showYAxis,\n          size,\n          formatter: axisFormatter ?? format,\n          domain: yDomain,\n          max: dataMax(\n            data,\n            series.map(s => s.dataKey),\n          ),\n          integer: isWholeData(\n            data,\n            series.map(s => s.dataKey),\n          ),\n        })}\n        {markers.map(m => (\n          <ReferenceLine\n            key={m.x}\n            x={m.x}\n            stroke=\"var(--border-strong)\"\n            strokeDasharray=\"3 3\"\n            label={\n              m.label\n                ? { value: m.label, position: 'insideTopLeft', fill: 'var(--muted-foreground)', fontSize: 11 }\n                : undefined\n            }\n          />\n        ))}\n        <Tooltip\n          {...CHART_TOOLTIP_PROPS}\n          content={\n            <ChartTooltipPosition>\n              <MetricsLineChartTooltip formatValue={format} labelKey={tooltipLabelKey} />\n            </ChartTooltipPosition>\n          }\n          cursor={<HoverLine />}\n        />\n        {series.map((s, i) => {\n          const common = {\n            type: 'monotone' as const,\n            dataKey: s.dataKey,\n            name: s.label,\n            stroke: s.color,\n            strokeWidth: s.emphasis ? line.emphasis : line.width,\n            strokeDasharray: s.dashed ? '4 3' : undefined,\n            dot: restDot(s),\n            activeDot: activeDot(s),\n            isAnimationActive: false,\n            connectNulls: true,\n          };\n          return s.dashed ? (\n            <Line key={s.dataKey} {...common} />\n          ) : (\n            <Area key={s.dataKey} {...common} fill={`url(#${id}-area-${i})`} fillOpacity={1} />\n          );\n        })}\n      </ComposedChart>\n    </ChartPlot>\n  );\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null;\n}\n"],"mappings":"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"}

package/dist/{MetricsLineChart-CjBm4IXu.cjs → MetricsLineChart-tZxsauau.cjs}

@@ -141,7 +141,7 @@ function MetricsLineChart(props) {
 	});
 }
 /** The plot itself, once the data is in. */
-function LinePlot({ data, series, height = 210, yDomain, onPointClick, onBucketClick, xKey = "time", timestampKey = "tsMs", xLabels = "auto", tooltipLabelKey, showDots = false, dots = "auto", lineStyle = "default", valueFormatter, axisFormatter, showYAxis = true }) {
+function LinePlot({ data, series, height = 210, yDomain, onPointClick, onBucketClick, xKey = "time", timestampKey = "tsMs", xLabels = "auto", tooltipLabelKey, showDots = false, dots = "auto", lineStyle = "default", valueFormatter, axisFormatter, showYAxis = true, markers = [] }) {
 	const id = require_primitives_use_chart_defs_id.useChartDefsId();
 	const { size, onResize, ref } = require_primitives_chart_axes.useChartSize();
 	const format = valueFormatter ?? require_primitives_chart_frame.compactNumber.format;
@@ -212,6 +212,17 @@ function LinePlot({ data, series, height = 210, yDomain, onPointClick, onBucketC
 					max: require_primitives_chart_frame.dataMax(data, series.map((s) => s.dataKey)),
 					integer: require_primitives_chart_frame.isWholeData(data, series.map((s) => s.dataKey))
 				}),
+				markers.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceLine, {
+					x: m.x,
+					stroke: "var(--border-strong)",
+					strokeDasharray: "3 3",
+					label: m.label ? {
+						value: m.label,
+						position: "insideTopLeft",
+						fill: "var(--muted-foreground)",
+						fontSize: 11
+					} : void 0
+				}, m.x)),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
 					...require_primitives_chart_axes.CHART_TOOLTIP_PROPS,
 					content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_chart_tooltip_position.ChartTooltipPosition, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetricsLineChartTooltip, {
@@ -265,4 +276,4 @@ Object.defineProperty(exports, "MetricsLineChartTooltip", {
 	}
 });
 
-//# sourceMappingURL=MetricsLineChart-CjBm4IXu.cjs.map
+//# sourceMappingURL=MetricsLineChart-tZxsauau.cjs.map

package/dist/MetricsLineChart-tZxsauau.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsLineChart-tZxsauau.cjs","names":["cn","Txt","ChartTooltip","Txt","CHART_CURSOR_PROPS","cn","ChartSkeleton","useChartDefsId","useChartSize","compactNumber","ChartPlot","ComposedChart","CHART_MARGIN","CartesianGrid","CHART_GRID_PROPS","timeXAxis","valueYAxis","dataMax","isWholeData","ReferenceLine","Tooltip","CHART_TOOLTIP_PROPS","ChartTooltipPosition","Line","Area"],"sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["import type { MetricsLineChartSeries } from './metrics-line-chart';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/** A marker and a label per series. Totals belong in the card's header, not here. */\nexport function MetricsLineChartLegend({\n  series,\n  className,\n}: {\n  series: Pick<MetricsLineChartSeries, 'dataKey' | 'label' | 'color' | 'dashed'>[];\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-wrap items-center gap-x-4 gap-y-1', className)}>\n      {series.map(s => (\n        <div key={s.dataKey} className=\"inline-flex items-center gap-1.5\">\n          {s.dashed ? (\n            <span className=\"h-0 w-3 shrink-0 border-t-2 border-dashed\" style={{ borderColor: s.color }} />\n          ) : (\n            <div className=\"size-2 shrink-0 rounded-[2px]\" style={{ backgroundColor: s.color }} />\n          )}\n          <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"max-w-48 truncate\">\n            {s.label}\n          </Txt>\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { ChartTooltip } from '@/ds/components/ChartTooltip';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsLineChartTooltip({\n  active,\n  payload,\n  label,\n  suffix,\n  formatValue = value => value.toLocaleString('en-US'),\n  showTotal = false,\n  labelKey,\n  formatByKey,\n}: {\n  active?: boolean;\n  payload?: Array<{\n    name: string;\n    value: number;\n    color: string;\n    dataKey?: string | number;\n    payload?: Record<string, unknown>;\n  }>;\n  label?: string;\n  suffix?: string;\n  formatValue?: (value: number) => string;\n  /** Adds a \"Total\" row under a hairline: the sum of every row, e.g. a stacked column's height. */\n  showTotal?: boolean;\n  /** Read the heading from this field of the hovered row instead of the x-axis label. */\n  labelKey?: string;\n  /** Per-series formatters, by data key, for charts that mix units (counts and durations). */\n  formatByKey?: Record<string, (value: number) => string>;\n}) {\n  if (!active || !payload?.length) return null;\n  // A missing reading (NaN, Infinity) shows as a dash and stays out of the total.\n  const finite = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);\n  const total = payload.reduce((sum, entry) => sum + (finite(entry.value) ? entry.value : 0), 0);\n  // A bucket with no readings at all totals to a dash, not 0.\n  const hasReading = payload.some(entry => finite(entry.value));\n  const heading = labelKey ? String(payload[0]?.payload?.[labelKey] ?? label ?? '') : label;\n  const format = (entry: { dataKey?: string | number }) => formatByKey?.[String(entry.dataKey)] ?? formatValue;\n  // A number through its formatter; a missing or non-finite one as a dash; text as it is.\n  const reading = (entry: (typeof payload)[number]) => {\n    if (finite(entry.value)) return format(entry)(entry.value);\n    if (typeof entry.value === 'number' || entry.value == null) return '—';\n    return entry.value;\n  };\n  return (\n    // A floor like shadcn's chart tooltip, so short readouts don't size it to their own label.\n    <ChartTooltip className=\"min-w-32\">\n      <Txt variant=\"column\" tone=\"ink\" className=\"mb-1\">\n        {heading}\n      </Txt>\n      <div className=\"grid grid-cols-[auto_1fr_auto] items-center gap-x-2 gap-y-1\">\n        {payload.map(entry => (\n          <div key={entry.name} className=\"contents\">\n            <span className=\"size-2 rounded-[2px]\" style={{ backgroundColor: entry.color }} />\n            <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"max-w-40 truncate\">\n              {entry.name}\n            </Txt>\n            <span className=\"text-right font-mono text-foreground tabular-nums\">\n              {reading(entry)}\n              {finite(entry.value) && suffix}\n            </span>\n          </div>\n        ))}\n        {showTotal && (\n          <div className=\"col-span-3 grid grid-cols-subgrid items-center border-t border-border pt-1\">\n            <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"col-span-2\">\n              Total\n            </Txt>\n            <span className=\"text-right font-mono text-foreground tabular-nums\">\n              {hasReading ? formatValue(total) : '—'}\n              {hasReading && suffix}\n            </span>\n          </div>\n        )}\n      </div>\n    </ChartTooltip>\n  );\n}\n","import { Area, CartesianGrid, ComposedChart, Line, ReferenceLine, Tooltip } from 'recharts';\nimport { MetricsLineChartLegend } from './metrics-line-chart-legend';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport { CHART_CURSOR_PROPS, CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { Y_AXIS_WIDTH, compactNumber, dataMax, isWholeData, timeXAxis, valueYAxis } from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsLineChartSeries = {\n  dataKey: string;\n  label: string;\n  color: string;\n  /** A secondary reading (e.g. an average next to counts): dashed, no fill under it. */\n  dashed?: boolean;\n  /** The series to read first (e.g. P95 among percentiles): a slightly heavier line. */\n  emphasis?: boolean;\n};\n\n/** Line weight; an emphasised series adds half a pixel. */\nconst LINE_WIDTH = 1.75;\n/** Opacity at the top of the fill under a line (it fades to nothing at the base). */\nconst AREA_OPACITY = 0.12;\n\n/**\n * How the series draw.\n * - `default`: 1.75px lines over a fill.\n * - `thin`: 1.5px lines (emphasis included) over a fainter fill (40% of the default), for small\n *   cards in a grid.\n */\nexport type MetricsLineChartLineStyle = 'default' | 'thin';\n\nconst LINE_STYLES: Record<MetricsLineChartLineStyle, { width: number; emphasis: number; areaOpacity: number }> = {\n  default: { width: LINE_WIDTH, emphasis: LINE_WIDTH + 0.5, areaOpacity: AREA_OPACITY },\n  thin: { width: 1.5, emphasis: 1.5, areaOpacity: AREA_OPACITY * 0.4 },\n};\n\n/**\n * Fills fade out sideways over their first and last 24px, so they don't end in a hard vertical\n * edge where the line starts and stops. A mask sized to each fill's own box.\n */\nconst THIN_FILL_FADE = '[&_.recharts-area-area]:mask-x-from-[calc(100%-24px)]';\n/** A lone point draws no line at all, so it gets a dot; lines already bridge gaps (`connectNulls`). */\nconst SPARSE_POINTS = 1;\n\n// Jumps straight to the hovered point, with the dots and the tooltip.\nfunction HoverLine({ points }: { points?: { x: number; y: number }[] }) {\n  const [top, bottom] = points ?? [];\n  if (!top || !bottom) return null;\n  return (\n    <line x1={top.x} x2={top.x} y1={top.y} y2={bottom.y} {...CHART_CURSOR_PROPS} className=\"pointer-events-none\" />\n  );\n}\n\nexport type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;\n\nexport type MetricsLineChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Click on a series' active dot. */\n  onPointClick?: MetricsLineChartPointClickHandler;\n  /** Click anywhere on a bucket (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  /** Render a visible dot on every point. A series with a single point gets one anyway. */\n  showDots?: boolean;\n  /**\n   * Point markers. `auto`: on a series' lone point (or every point with `showDots`). `hover`:\n   * none at rest, only the hovered point's.\n   */\n  dots?: 'auto' | 'hover';\n  /** Line weight and fill. `thin` suits small cards in a grid. */\n  lineStyle?: MetricsLineChartLineStyle;\n  /** Set to `false` to render `MetricsLineChartLegend` elsewhere, e.g. next to tabs. */\n  showLegend?: boolean;\n  /** Formats tooltip values (e.g. `ms`, `%`), and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  /**\n   * Vertical lines at buckets, e.g. where a billing period starts. `x` must be one of the data's\n   * `xKey` values: the axis is categorical, so any other value draws nothing.\n   */\n  markers?: { x: string; label?: string }[];\n  className?: string;\n};\n\nexport function MetricsLineChart(props: MetricsLineChartProps) {\n  const { data, series, height = 210, showLegend = true, isLoading = false, className } = props;\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root}>\n      {showLegend && <MetricsLineChartLegend series={series} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"line\" height={height} /> : <LinePlot {...props} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in. */\nfunction LinePlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  onPointClick,\n  onBucketClick,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  showDots = false,\n  dots = 'auto',\n  lineStyle = 'default',\n  valueFormatter,\n  axisFormatter,\n  showYAxis = true,\n  markers = [],\n}: MetricsLineChartProps) {\n  const id = useChartDefsId();\n  const { size, onResize, ref } = useChartSize();\n\n  const format = valueFormatter ?? compactNumber.format;\n  const isSparse = (key: string) => data.filter(row => typeof row[key] === 'number').length <= SPARSE_POINTS;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const line = LINE_STYLES[lineStyle];\n  const restDot = (s: MetricsLineChartSeries) =>\n    dots === 'auto' && (showDots || isSparse(s.dataKey)) ? { r: 3, fill: s.color, strokeWidth: 0 } : false;\n  const activeDot = (s: MetricsLineChartSeries) => ({\n    r: 3.5,\n    fill: s.color,\n    stroke: 'var(--background)',\n    strokeWidth: 2,\n    ...(onPointClick && {\n      style: { cursor: 'pointer' },\n      onClick: (_: unknown, payload: unknown) => {\n        // Recharts passes the dot's props; the hovered row is under `payload`.\n        if (isRecord(payload) && isRecord(payload.payload)) onPointClick(payload.payload, s.dataKey);\n      },\n    }),\n  });\n\n  return (\n    <ChartPlot\n      height={height}\n      plotRef={ref}\n      onResize={onResize}\n      clickable={!!onBucketClick}\n      className={cn(lineStyle === 'thin' && THIN_FILL_FADE)}\n    >\n      <ComposedChart\n        data={data}\n        margin={CHART_MARGIN}\n        onClick={state => {\n          const i = state?.activeTooltipIndex;\n          const row = i === undefined || i === null ? undefined : data[Number(i)];\n          if (onBucketClick && row) onBucketClick(row, Number(i));\n        }}\n      >\n        <defs>\n          {series.map((s, i) => (\n            <linearGradient key={s.dataKey} id={`${id}-area-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor={s.color} stopOpacity={line.areaOpacity} />\n              <stop offset=\"95%\" stopColor={s.color} stopOpacity={0} />\n            </linearGradient>\n          ))}\n        </defs>\n        <CartesianGrid {...CHART_GRID_PROPS} />\n        {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n        {valueYAxis({\n          show: showYAxis,\n          size,\n          formatter: axisFormatter ?? format,\n          domain: yDomain,\n          max: dataMax(\n            data,\n            series.map(s => s.dataKey),\n          ),\n          integer: isWholeData(\n            data,\n            series.map(s => s.dataKey),\n          ),\n        })}\n        {markers.map(m => (\n          <ReferenceLine\n            key={m.x}\n            x={m.x}\n            stroke=\"var(--border-strong)\"\n            strokeDasharray=\"3 3\"\n            label={\n              m.label\n                ? { value: m.label, position: 'insideTopLeft', fill: 'var(--muted-foreground)', fontSize: 11 }\n                : undefined\n            }\n          />\n        ))}\n        <Tooltip\n          {...CHART_TOOLTIP_PROPS}\n          content={\n            <ChartTooltipPosition>\n              <MetricsLineChartTooltip formatValue={format} labelKey={tooltipLabelKey} />\n            </ChartTooltipPosition>\n          }\n          cursor={<HoverLine />}\n        />\n        {series.map((s, i) => {\n          const common = {\n            type: 'monotone' as const,\n            dataKey: s.dataKey,\n            name: s.label,\n            stroke: s.color,\n            strokeWidth: s.emphasis ? line.emphasis : line.width,\n            strokeDasharray: s.dashed ? '4 3' : undefined,\n            dot: restDot(s),\n            activeDot: activeDot(s),\n            isAnimationActive: false,\n            connectNulls: true,\n          };\n          return s.dashed ? (\n            <Line key={s.dataKey} {...common} />\n          ) : (\n            <Area key={s.dataKey} {...common} fill={`url(#${id}-area-${i})`} fillOpacity={1} />\n          );\n        })}\n      </ComposedChart>\n    </ChartPlot>\n  );\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null;\n}\n"],"mappings":"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"}

package/dist/{MetricsStackedBarChart-BdMlKv6G.cjs → MetricsStackedBarChart-CDLE76IB.cjs}

@@ -1,5 +1,5 @@
 const require_utils = require("./utils-uDc1ofX1.cjs");
-const require_MetricsLineChart = require("./MetricsLineChart-CjBm4IXu.cjs");
+const require_MetricsLineChart = require("./MetricsLineChart-tZxsauau.cjs");
 const require_primitives_chart_layout = require("./primitives/chart-layout.cjs.js");
 const require_components_ChartSkeleton = require("./components/ChartSkeleton.cjs.js");
 const require_primitives_chart_axes = require("./primitives/chart-axes.cjs.js");
@@ -310,4 +310,4 @@ Object.defineProperty(exports, "MetricsStackedBarChart", {
 	}
 });
 
-//# sourceMappingURL=MetricsStackedBarChart-BdMlKv6G.cjs.map
+//# sourceMappingURL=MetricsStackedBarChart-CDLE76IB.cjs.map

package/dist/{MetricsStackedBarChart-BdMlKv6G.cjs.map → MetricsStackedBarChart-CDLE76IB.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"MetricsStackedBarChart-BdMlKv6G.cjs","names":["stackedSegmentBox","singleBarBox","Rectangle","useState","useChartDefsId","cn","MetricsLineChartLegend","ChartSkeleton","useRef","useChartSize","useDragSelection","useMemo","compactNumber","CHART_MARGIN","_Fragment","ChartPlot","ComposedChart","activeIndex","CartesianGrid","CHART_GRID_PROPS","DragSelectionBand","timeXAxis","valueYAxis","dataMax","isWholeData","Tooltip","CHART_TOOLTIP_PROPS","ChartTooltipPosition","MetricsLineChartTooltip","Bar","LabelList","Line","ReferenceLine","CHART_TICK"],"sources":["../src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Bar, CartesianGrid, ComposedChart, LabelList, Line, Rectangle, ReferenceLine, Tooltip } from 'recharts';\nimport type { LabelProps } from 'recharts';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChartLegend, MetricsLineChartTooltip } from '@/ds/components/MetricsLineChart';\nimport { CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { singleBarBox, stackedSegmentBox } from '@/ds/primitives/chart-column-layout';\nimport type { SegmentBox } from '@/ds/primitives/chart-column-layout';\nimport {\n  CHART_TICK,\n  Y_AXIS_WIDTH,\n  compactNumber,\n  dataMax,\n  isWholeData,\n  timeXAxis,\n  valueYAxis,\n} from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { DragSelectionBand, activeIndex, useDragSelection } from '@/ds/primitives/charts/drag-selection';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\n/** Corner radius of every segment; thin segments scale it down so they stay crisp rectangles. */\nconst RADIUS = 2;\n/** Pixels between stacked segments, so neighbouring segments read as separate blocks. */\nconst SEGMENT_GAP = 2;\n/** Opacity at the base of a segment's gradient (the top is fully opaque). */\nconst GRADIENT_BASE = 0.75;\n/** Single-series bars: translucent body under a solid cap that marks the value. */\nconst CAP_BODY = 0.55;\nconst CAP_HEIGHT = 3;\n/** Opacity of the other columns while one is hovered. */\nconst DIMMED = 0.3;\nconst COLUMN_LABEL_SPACE = 16;\n\ntype SegmentProps = {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  index?: number;\n  payload?: Record<string, unknown>;\n};\n\nfunction segmentShape({\n  fill,\n  color,\n  capped,\n  keys,\n  dataKey,\n}: {\n  fill: string;\n  color: string;\n  capped: boolean;\n  /** The column's data keys, bottom to top. */\n  keys: string[];\n  dataKey: string;\n}) {\n  return function Segment({ x = 0, width = 0, index, payload, ...geo }: SegmentProps) {\n    const values = keys.map(k => Number(payload?.[k]) || 0);\n    const self = keys.indexOf(dataKey);\n    const box = { y: geo.y ?? 0, height: Math.max(geo.height ?? 0, 0) };\n    // Every non-zero value gets a few readable pixels; zeros draw nothing.\n    const laid =\n      keys.length > 1\n        ? stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })\n        : singleBarBox(values[self] ?? 0, box);\n    if (!laid) return <g />;\n    const { y, height: h } = laid;\n    const radius = Math.min(RADIUS, Math.floor(h / 3));\n    // Dimming is a CSS rule keyed on `data-bucket` (see `HoverDim`), so hovering re-renders no bars.\n    const bucket = { 'data-bucket': index };\n\n    if (capped) {\n      return (\n        <g {...bucket}>\n          <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={color} fillOpacity={CAP_BODY} />\n          <Rectangle x={x} y={y} width={width} height={Math.min(CAP_HEIGHT, h)} radius={radius} fill={color} />\n        </g>\n      );\n    }\n    return (\n      <g {...bucket}>\n        <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={fill} />\n      </g>\n    );\n  };\n}\n\n/**\n * Dims every column outside the hovered one, or outside the range being dragged. Its own tiny\n * state, so a move only re-renders this <style> tag: with hundreds of buckets, re-rendering the\n * bars on each move froze the pointer.\n */\nfunction HoverDim({\n  scope,\n  setter,\n}: {\n  scope: string;\n  setter: { current: (range: DragSelectionRange | undefined) => void };\n}) {\n  const [lit, setLit] = useState<DragSelectionRange>();\n  useLayoutEffect(() => {\n    setter.current = setLit;\n  }, [setter]);\n  if (!lit) return null;\n  const columns = `[data-chart-scope=\"${scope}\"] [data-bucket]`;\n  const kept = Array.from(\n    { length: lit.end - lit.start + 1 },\n    (_, i) => `${columns}[data-bucket=\"${lit.start + i}\"]`,\n  ).join(',');\n  return <style>{`${columns}{opacity:${DIMMED}}${kept}{opacity:1}`}</style>;\n}\n\n/** A line drawn over the bars on its own scale, e.g. average wake time over cold starts. */\nexport type MetricsStackedBarChartOverlay = MetricsLineChartSeries & {\n  valueFormatter?: (value: number) => string;\n};\n\nexport type MetricsStackedBarChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Formats tooltip values, and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  showLegend?: boolean;\n  referenceLine?: { value: number; label: string; color: string };\n  /**\n   * `gradient`: segments fade gently toward the base. Reads best for stacks.\n   * `capped`: a translucent body under a solid cap that marks the value. Reads best for one\n   * value per column.\n   */\n  variant?: 'gradient' | 'capped';\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Adds a \"Total\" row (the column's height) to the tooltip. Defaults to on for stacks. */\n  showTotal?: boolean;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  columnLabelKey?: string;\n  /** Widest a column gets, in pixels. Defaults to 28; raise it for dense strips of many thin columns. */\n  maxBarSize?: number;\n  /** Click a column (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /**\n   * Drag across two or more columns to select them (e.g. to zoom into that time span); reports the\n   * first and last selected row indices. A press and release on one column stays a click.\n   */\n  onZoom?: (range: DragSelectionRange) => void;\n  /** One dashed line over the bars, on its own hidden scale (e.g. a duration over counts). */\n  overlay?: MetricsStackedBarChartOverlay;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsStackedBarChart(props: MetricsStackedBarChartProps) {\n  const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;\n  const id = useChartDefsId();\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  const legend = overlay ? [...series, { ...overlay, dashed: true }] : series;\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root} data-chart-scope={id}>\n      {showLegend && <MetricsLineChartLegend series={legend} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"bar\" height={height} /> : <BarPlot {...props} id={id} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in; `id` scopes its gradients and hover rule. */\nfunction BarPlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  valueFormatter,\n  axisFormatter,\n  referenceLine,\n  variant = 'gradient',\n  showYAxis = true,\n  showTotal = series.length > 1,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  columnLabelKey,\n  maxBarSize = 28,\n  onBucketClick,\n  onZoom,\n  overlay,\n  id,\n}: MetricsStackedBarChartProps & { id: string }) {\n  const setLit = useRef<(range: DragSelectionRange | undefined) => void>(() => {});\n  const { size, onResize, ref } = useChartSize();\n  // The dragged columns stay lit through the same rule as hover, so a drag never re-renders the bars.\n  const selection = useDragSelection({ onSelect: onZoom, onPreview: range => setLit.current(range) });\n\n  const keyList = series.map(s => s.dataKey).join('\\u0000');\n  const colorList = series.map(s => s.color).join('\\u0000');\n  // Stable shapes, so Recharts doesn't re-render every bar when the parent re-renders.\n  const shapes = useMemo(() => {\n    const keys = keyList.split('\\u0000');\n    const colors = colorList.split('\\u0000');\n    return keys.map((dataKey, i) =>\n      segmentShape({\n        fill: `url(#${id}-bar-${i})`,\n        color: colors[i] ?? '',\n        capped: variant === 'capped',\n        keys,\n        dataKey,\n      }),\n    );\n  }, [keyList, colorList, variant, id]);\n\n  const format = valueFormatter ?? compactNumber.format;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const margin = columnLabelKey ? { ...CHART_MARGIN, top: CHART_MARGIN.top + COLUMN_LABEL_SPACE } : CHART_MARGIN;\n\n  return (\n    <>\n      <HoverDim scope={id} setter={setLit} />\n      <ChartPlot\n        height={height}\n        plotRef={ref}\n        onResize={onResize}\n        clickable={!!onBucketClick && !selection.enabled}\n        className={selection.className}\n      >\n        <ComposedChart\n          data={data}\n          margin={margin}\n          onMouseDown={selection.onMouseDown}\n          onMouseMove={state => {\n            if (selection.isDragging()) return selection.onMouseMove(state);\n            const index = activeIndex(state);\n            setLit.current(index === undefined ? undefined : { start: index, end: index });\n          }}\n          onMouseLeave={() => {\n            // Mid-drag the selection stays lit until the release.\n            if (!selection.isDragging()) setLit.current(undefined);\n          }}\n          onClick={state => {\n            if (selection.consumeReleaseClick()) return;\n            const i = activeIndex(state);\n            const row = i === undefined ? undefined : data[i];\n            if (onBucketClick && row && i !== undefined) onBucketClick(row, i);\n          }}\n        >\n          <defs>\n            {series.map((s, i) => (\n              <linearGradient key={s.dataKey} id={`${id}-bar-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor={s.color} stopOpacity={1} />\n                <stop offset=\"100%\" stopColor={s.color} stopOpacity={GRADIENT_BASE} />\n              </linearGradient>\n            ))}\n          </defs>\n          <CartesianGrid {...CHART_GRID_PROPS} />\n          {selection.enabled && <DragSelectionBand selection={selection} count={data.length} />}\n          {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n          {valueYAxis({\n            show: showYAxis,\n            size,\n            formatter: axisFormatter ?? format,\n            domain: yDomain,\n            // A reference line above the bars stays on the axis.\n            max: Math.max(\n              dataMax(\n                data,\n                series.map(s => s.dataKey),\n                true,\n              ),\n              referenceLine?.value ?? 0,\n            ),\n            integer: isWholeData(\n              data,\n              series.map(s => s.dataKey),\n            ),\n          })}\n          {overlay &&\n            valueYAxis({\n              id: 'overlay',\n              show: false,\n              size,\n              formatter: overlay.valueFormatter ?? compactNumber.format,\n              max: dataMax(data, [overlay.dataKey]),\n              integer: isWholeData(data, [overlay.dataKey]),\n              right: true,\n            })}\n          <Tooltip\n            {...CHART_TOOLTIP_PROPS}\n            cursor={false}\n            content={\n              <ChartTooltipPosition>\n                <MetricsLineChartTooltip\n                  formatValue={format}\n                  showTotal={showTotal && !overlay}\n                  labelKey={tooltipLabelKey}\n                  formatByKey={overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : undefined}\n                />\n              </ChartTooltipPosition>\n            }\n          />\n          {series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              stackId=\"1\"\n              fill={s.color}\n              maxBarSize={maxBarSize}\n              isAnimationActive={false}\n              shape={shapes[i]}\n            >\n              {columnLabelKey && (\n                <LabelList\n                  dataKey={columnLabelKey}\n                  content={(props: LabelProps) => (\n                    <ColumnLabel\n                      {...props}\n                      row={data[Number(props.index)]}\n                      keys={series.map(({ dataKey }) => dataKey)}\n                      self={i}\n                      color={s.color}\n                    />\n                  )}\n                />\n              )}\n            </Bar>\n          ))}\n          {overlay && (\n            <Line\n              yAxisId=\"overlay\"\n              type=\"monotone\"\n              dataKey={overlay.dataKey}\n              name={overlay.label}\n              stroke={overlay.color}\n              strokeWidth={1.75}\n              strokeDasharray=\"4 3\"\n              dot={false}\n              activeDot={{ r: 3.5, fill: overlay.color, stroke: 'var(--background)', strokeWidth: 2 }}\n              isAnimationActive={false}\n              connectNulls\n            />\n          )}\n          {referenceLine && (\n            <ReferenceLine\n              y={referenceLine.value}\n              ifOverflow=\"extendDomain\"\n              stroke={referenceLine.color}\n              strokeDasharray=\"4 4\"\n              label={{ value: referenceLine.label, position: 'insideTopLeft', ...CHART_TICK }}\n            />\n          )}\n        </ComposedChart>\n      </ChartPlot>\n    </>\n  );\n}\n\ntype ColumnLabelProps = LabelProps & {\n  row: MetricsStackedBarChartProps['data'][number] | undefined;\n  keys: string[];\n  self: number;\n  color: string;\n};\n\nfunction paintedTop(values: number[], self: number, box: SegmentBox) {\n  if (values.length > 1) return stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;\n  return singleBarBox(values[self] ?? 0, box)?.y;\n}\n\nfunction ColumnLabel({ x, y, width, height, value, row, keys, self, color }: ColumnLabelProps) {\n  if (value === undefined || value === null || value === '') return null;\n  const values = keys.map(key => Number(row?.[key]) || 0);\n  const topmost = values.findLastIndex(v => v > 0);\n  if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;\n  const top = paintedTop(values, self, { y: Number(y), height: Math.max(Number(height), 0) }) ?? Number(y);\n  return (\n    <text\n      x={Number(x) + Number(width) / 2}\n      y={top - 6}\n      textAnchor=\"middle\"\n      fontSize={CHART_AXIS_FONT_SIZE}\n      fill={color}\n      className=\"tabular-nums\"\n    >\n      {String(value)}\n    </text>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MetricsStackedBarChart-CDLE76IB.cjs","names":["stackedSegmentBox","singleBarBox","Rectangle","useState","useChartDefsId","cn","MetricsLineChartLegend","ChartSkeleton","useRef","useChartSize","useDragSelection","useMemo","compactNumber","CHART_MARGIN","_Fragment","ChartPlot","ComposedChart","activeIndex","CartesianGrid","CHART_GRID_PROPS","DragSelectionBand","timeXAxis","valueYAxis","dataMax","isWholeData","Tooltip","CHART_TOOLTIP_PROPS","ChartTooltipPosition","MetricsLineChartTooltip","Bar","LabelList","Line","ReferenceLine","CHART_TICK"],"sources":["../src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Bar, CartesianGrid, ComposedChart, LabelList, Line, Rectangle, ReferenceLine, Tooltip } from 'recharts';\nimport type { LabelProps } from 'recharts';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChartLegend, MetricsLineChartTooltip } from '@/ds/components/MetricsLineChart';\nimport { CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { singleBarBox, stackedSegmentBox } from '@/ds/primitives/chart-column-layout';\nimport type { SegmentBox } from '@/ds/primitives/chart-column-layout';\nimport {\n  CHART_TICK,\n  Y_AXIS_WIDTH,\n  compactNumber,\n  dataMax,\n  isWholeData,\n  timeXAxis,\n  valueYAxis,\n} from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { DragSelectionBand, activeIndex, useDragSelection } from '@/ds/primitives/charts/drag-selection';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\n/** Corner radius of every segment; thin segments scale it down so they stay crisp rectangles. */\nconst RADIUS = 2;\n/** Pixels between stacked segments, so neighbouring segments read as separate blocks. */\nconst SEGMENT_GAP = 2;\n/** Opacity at the base of a segment's gradient (the top is fully opaque). */\nconst GRADIENT_BASE = 0.75;\n/** Single-series bars: translucent body under a solid cap that marks the value. */\nconst CAP_BODY = 0.55;\nconst CAP_HEIGHT = 3;\n/** Opacity of the other columns while one is hovered. */\nconst DIMMED = 0.3;\nconst COLUMN_LABEL_SPACE = 16;\n\ntype SegmentProps = {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  index?: number;\n  payload?: Record<string, unknown>;\n};\n\nfunction segmentShape({\n  fill,\n  color,\n  capped,\n  keys,\n  dataKey,\n}: {\n  fill: string;\n  color: string;\n  capped: boolean;\n  /** The column's data keys, bottom to top. */\n  keys: string[];\n  dataKey: string;\n}) {\n  return function Segment({ x = 0, width = 0, index, payload, ...geo }: SegmentProps) {\n    const values = keys.map(k => Number(payload?.[k]) || 0);\n    const self = keys.indexOf(dataKey);\n    const box = { y: geo.y ?? 0, height: Math.max(geo.height ?? 0, 0) };\n    // Every non-zero value gets a few readable pixels; zeros draw nothing.\n    const laid =\n      keys.length > 1\n        ? stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })\n        : singleBarBox(values[self] ?? 0, box);\n    if (!laid) return <g />;\n    const { y, height: h } = laid;\n    const radius = Math.min(RADIUS, Math.floor(h / 3));\n    // Dimming is a CSS rule keyed on `data-bucket` (see `HoverDim`), so hovering re-renders no bars.\n    const bucket = { 'data-bucket': index };\n\n    if (capped) {\n      return (\n        <g {...bucket}>\n          <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={color} fillOpacity={CAP_BODY} />\n          <Rectangle x={x} y={y} width={width} height={Math.min(CAP_HEIGHT, h)} radius={radius} fill={color} />\n        </g>\n      );\n    }\n    return (\n      <g {...bucket}>\n        <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={fill} />\n      </g>\n    );\n  };\n}\n\n/**\n * Dims every column outside the hovered one, or outside the range being dragged. Its own tiny\n * state, so a move only re-renders this <style> tag: with hundreds of buckets, re-rendering the\n * bars on each move froze the pointer.\n */\nfunction HoverDim({\n  scope,\n  setter,\n}: {\n  scope: string;\n  setter: { current: (range: DragSelectionRange | undefined) => void };\n}) {\n  const [lit, setLit] = useState<DragSelectionRange>();\n  useLayoutEffect(() => {\n    setter.current = setLit;\n  }, [setter]);\n  if (!lit) return null;\n  const columns = `[data-chart-scope=\"${scope}\"] [data-bucket]`;\n  const kept = Array.from(\n    { length: lit.end - lit.start + 1 },\n    (_, i) => `${columns}[data-bucket=\"${lit.start + i}\"]`,\n  ).join(',');\n  return <style>{`${columns}{opacity:${DIMMED}}${kept}{opacity:1}`}</style>;\n}\n\n/** A line drawn over the bars on its own scale, e.g. average wake time over cold starts. */\nexport type MetricsStackedBarChartOverlay = MetricsLineChartSeries & {\n  valueFormatter?: (value: number) => string;\n};\n\nexport type MetricsStackedBarChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Formats tooltip values, and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  showLegend?: boolean;\n  referenceLine?: { value: number; label: string; color: string };\n  /**\n   * `gradient`: segments fade gently toward the base. Reads best for stacks.\n   * `capped`: a translucent body under a solid cap that marks the value. Reads best for one\n   * value per column.\n   */\n  variant?: 'gradient' | 'capped';\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Adds a \"Total\" row (the column's height) to the tooltip. Defaults to on for stacks. */\n  showTotal?: boolean;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  columnLabelKey?: string;\n  /** Widest a column gets, in pixels. Defaults to 28; raise it for dense strips of many thin columns. */\n  maxBarSize?: number;\n  /** Click a column (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /**\n   * Drag across two or more columns to select them (e.g. to zoom into that time span); reports the\n   * first and last selected row indices. A press and release on one column stays a click.\n   */\n  onZoom?: (range: DragSelectionRange) => void;\n  /** One dashed line over the bars, on its own hidden scale (e.g. a duration over counts). */\n  overlay?: MetricsStackedBarChartOverlay;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsStackedBarChart(props: MetricsStackedBarChartProps) {\n  const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;\n  const id = useChartDefsId();\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  const legend = overlay ? [...series, { ...overlay, dashed: true }] : series;\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root} data-chart-scope={id}>\n      {showLegend && <MetricsLineChartLegend series={legend} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"bar\" height={height} /> : <BarPlot {...props} id={id} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in; `id` scopes its gradients and hover rule. */\nfunction BarPlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  valueFormatter,\n  axisFormatter,\n  referenceLine,\n  variant = 'gradient',\n  showYAxis = true,\n  showTotal = series.length > 1,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  columnLabelKey,\n  maxBarSize = 28,\n  onBucketClick,\n  onZoom,\n  overlay,\n  id,\n}: MetricsStackedBarChartProps & { id: string }) {\n  const setLit = useRef<(range: DragSelectionRange | undefined) => void>(() => {});\n  const { size, onResize, ref } = useChartSize();\n  // The dragged columns stay lit through the same rule as hover, so a drag never re-renders the bars.\n  const selection = useDragSelection({ onSelect: onZoom, onPreview: range => setLit.current(range) });\n\n  const keyList = series.map(s => s.dataKey).join('\\u0000');\n  const colorList = series.map(s => s.color).join('\\u0000');\n  // Stable shapes, so Recharts doesn't re-render every bar when the parent re-renders.\n  const shapes = useMemo(() => {\n    const keys = keyList.split('\\u0000');\n    const colors = colorList.split('\\u0000');\n    return keys.map((dataKey, i) =>\n      segmentShape({\n        fill: `url(#${id}-bar-${i})`,\n        color: colors[i] ?? '',\n        capped: variant === 'capped',\n        keys,\n        dataKey,\n      }),\n    );\n  }, [keyList, colorList, variant, id]);\n\n  const format = valueFormatter ?? compactNumber.format;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const margin = columnLabelKey ? { ...CHART_MARGIN, top: CHART_MARGIN.top + COLUMN_LABEL_SPACE } : CHART_MARGIN;\n\n  return (\n    <>\n      <HoverDim scope={id} setter={setLit} />\n      <ChartPlot\n        height={height}\n        plotRef={ref}\n        onResize={onResize}\n        clickable={!!onBucketClick && !selection.enabled}\n        className={selection.className}\n      >\n        <ComposedChart\n          data={data}\n          margin={margin}\n          onMouseDown={selection.onMouseDown}\n          onMouseMove={state => {\n            if (selection.isDragging()) return selection.onMouseMove(state);\n            const index = activeIndex(state);\n            setLit.current(index === undefined ? undefined : { start: index, end: index });\n          }}\n          onMouseLeave={() => {\n            // Mid-drag the selection stays lit until the release.\n            if (!selection.isDragging()) setLit.current(undefined);\n          }}\n          onClick={state => {\n            if (selection.consumeReleaseClick()) return;\n            const i = activeIndex(state);\n            const row = i === undefined ? undefined : data[i];\n            if (onBucketClick && row && i !== undefined) onBucketClick(row, i);\n          }}\n        >\n          <defs>\n            {series.map((s, i) => (\n              <linearGradient key={s.dataKey} id={`${id}-bar-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor={s.color} stopOpacity={1} />\n                <stop offset=\"100%\" stopColor={s.color} stopOpacity={GRADIENT_BASE} />\n              </linearGradient>\n            ))}\n          </defs>\n          <CartesianGrid {...CHART_GRID_PROPS} />\n          {selection.enabled && <DragSelectionBand selection={selection} count={data.length} />}\n          {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n          {valueYAxis({\n            show: showYAxis,\n            size,\n            formatter: axisFormatter ?? format,\n            domain: yDomain,\n            // A reference line above the bars stays on the axis.\n            max: Math.max(\n              dataMax(\n                data,\n                series.map(s => s.dataKey),\n                true,\n              ),\n              referenceLine?.value ?? 0,\n            ),\n            integer: isWholeData(\n              data,\n              series.map(s => s.dataKey),\n            ),\n          })}\n          {overlay &&\n            valueYAxis({\n              id: 'overlay',\n              show: false,\n              size,\n              formatter: overlay.valueFormatter ?? compactNumber.format,\n              max: dataMax(data, [overlay.dataKey]),\n              integer: isWholeData(data, [overlay.dataKey]),\n              right: true,\n            })}\n          <Tooltip\n            {...CHART_TOOLTIP_PROPS}\n            cursor={false}\n            content={\n              <ChartTooltipPosition>\n                <MetricsLineChartTooltip\n                  formatValue={format}\n                  showTotal={showTotal && !overlay}\n                  labelKey={tooltipLabelKey}\n                  formatByKey={overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : undefined}\n                />\n              </ChartTooltipPosition>\n            }\n          />\n          {series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              stackId=\"1\"\n              fill={s.color}\n              maxBarSize={maxBarSize}\n              isAnimationActive={false}\n              shape={shapes[i]}\n            >\n              {columnLabelKey && (\n                <LabelList\n                  dataKey={columnLabelKey}\n                  content={(props: LabelProps) => (\n                    <ColumnLabel\n                      {...props}\n                      row={data[Number(props.index)]}\n                      keys={series.map(({ dataKey }) => dataKey)}\n                      self={i}\n                      color={s.color}\n                    />\n                  )}\n                />\n              )}\n            </Bar>\n          ))}\n          {overlay && (\n            <Line\n              yAxisId=\"overlay\"\n              type=\"monotone\"\n              dataKey={overlay.dataKey}\n              name={overlay.label}\n              stroke={overlay.color}\n              strokeWidth={1.75}\n              strokeDasharray=\"4 3\"\n              dot={false}\n              activeDot={{ r: 3.5, fill: overlay.color, stroke: 'var(--background)', strokeWidth: 2 }}\n              isAnimationActive={false}\n              connectNulls\n            />\n          )}\n          {referenceLine && (\n            <ReferenceLine\n              y={referenceLine.value}\n              ifOverflow=\"extendDomain\"\n              stroke={referenceLine.color}\n              strokeDasharray=\"4 4\"\n              label={{ value: referenceLine.label, position: 'insideTopLeft', ...CHART_TICK }}\n            />\n          )}\n        </ComposedChart>\n      </ChartPlot>\n    </>\n  );\n}\n\ntype ColumnLabelProps = LabelProps & {\n  row: MetricsStackedBarChartProps['data'][number] | undefined;\n  keys: string[];\n  self: number;\n  color: string;\n};\n\nfunction paintedTop(values: number[], self: number, box: SegmentBox) {\n  if (values.length > 1) return stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;\n  return singleBarBox(values[self] ?? 0, box)?.y;\n}\n\nfunction ColumnLabel({ x, y, width, height, value, row, keys, self, color }: ColumnLabelProps) {\n  if (value === undefined || value === null || value === '') return null;\n  const values = keys.map(key => Number(row?.[key]) || 0);\n  const topmost = values.findLastIndex(v => v > 0);\n  if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;\n  const top = paintedTop(values, self, { y: Number(y), height: Math.max(Number(height), 0) }) ?? Number(y);\n  return (\n    <text\n      x={Number(x) + Number(width) / 2}\n      y={top - 6}\n      textAnchor=\"middle\"\n      fontSize={CHART_AXIS_FONT_SIZE}\n      fill={color}\n      className=\"tabular-nums\"\n    >\n      {String(value)}\n    </text>\n  );\n}\n"],"mappings":"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"}

package/dist/{MetricsStackedBarChart-BRuA6MTE.js → MetricsStackedBarChart-D2QyS4-z.js}

@@ -1,5 +1,5 @@
 import { t as cn } from "./utils-DQx8TpNT.js";
-import { n as MetricsLineChartTooltip, r as MetricsLineChartLegend } from "./MetricsLineChart-BhHoduO0.js";
+import { n as MetricsLineChartTooltip, r as MetricsLineChartLegend } from "./MetricsLineChart-4SwxBbQx.js";
 import { CHART_MARGIN } from "./primitives/chart-layout.es.js";
 import { ChartSkeleton } from "./components/ChartSkeleton.es.js";
 import { CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from "./primitives/chart-axes.es.js";
@@ -305,4 +305,4 @@ function ColumnLabel({ x, y, width, height, value, row, keys, self, color }) {
 }
 export { MetricsStackedBarChart as t };
 
-//# sourceMappingURL=MetricsStackedBarChart-BRuA6MTE.js.map
+//# sourceMappingURL=MetricsStackedBarChart-D2QyS4-z.js.map