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

package/dist/MessageScroller-nV_zBF3H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageScroller-nV_zBF3H.js","names":["React","React","_Fragment","React"],"sources":["../src/ds/components/MessageScroller/message-scroller-context.ts","../src/ds/components/MessageScroller/message-scroller-geometry.ts","../src/ds/components/MessageScroller/message-scroller-glide.ts","../src/ds/components/MessageScroller/message-scroller-trip.ts","../src/ds/components/MessageScroller/message-scroller-visibility-store.ts","../src/ds/components/MessageScroller/message-scroller.tsx","../src/ds/components/MessageScroller/message-scroller-hooks.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { MessageScrollerVisibilityStore } from './message-scroller-visibility-store';\n\nexport type MessageScrollerDefaultScrollPosition = 'start' | 'end' | 'last-anchor';\nexport type MessageScrollerButtonDirection = 'start' | 'end';\nexport type MessageScrollerScrollAlign = 'start' | 'center' | 'end' | 'nearest';\n\nexport type MessageScrollerScrollOptions = {\n  align?: MessageScrollerScrollAlign;\n  behavior?: ScrollBehavior;\n  scrollMargin?: number;\n};\n\nexport type MessageScrollerScrollable = {\n  start: boolean;\n  end: boolean;\n};\n\nexport type MessageScrollerVisibility = {\n  currentAnchorId: string | undefined;\n  visibleMessageIds: string[];\n};\n\nexport type MessageScrollerActionsContextValue = {\n  notifyContentResize: () => void;\n  notifyScroll: () => void;\n  registerItem: (messageId: string, element: HTMLElement, scrollAnchor: boolean) => () => void;\n  scrollToEnd: (options?: MessageScrollerScrollOptions) => boolean;\n  scrollToMessage: (messageId: string, options?: MessageScrollerScrollOptions) => boolean;\n  scrollToStart: (options?: MessageScrollerScrollOptions) => boolean;\n  setContentElement: (element: HTMLDivElement | null) => void;\n  setRootElement: (element: HTMLDivElement | null) => void;\n  setViewportElement: (element: HTMLDivElement | null) => void;\n  syncAfterScroll: () => void;\n};\n\nexport const DEFAULT_SCROLLABLE: MessageScrollerScrollable = { start: false, end: false };\nexport const DEFAULT_VISIBILITY: MessageScrollerVisibility = { currentAnchorId: undefined, visibleMessageIds: [] };\nexport const DEFAULT_SCROLL_EDGE_THRESHOLD = 8;\nexport const DEFAULT_SCROLL_MARGIN = 0;\nexport const DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK = 64;\nexport const DEFAULT_REACH_START_THRESHOLD = 160;\n\n// Looser than the edge threshold, which only decides whether the scroll buttons\n// are active: how far from the end a reader may sit and still be carried along\n// by growing content.\nexport const AUTO_SCROLL_ATTACH_THRESHOLD = 160;\n\nexport const MessageScrollerActionsContext = React.createContext<MessageScrollerActionsContextValue | null>(null);\nexport const MessageScrollerScrollableContext = React.createContext<MessageScrollerScrollable | null>(null);\nexport const MessageScrollerVisibilityContext = React.createContext<MessageScrollerVisibilityStore | null>(null);\n\nconst useRequiredContext = <TValue>(context: React.Context<TValue | null>, hookName: string) => {\n  const value = React.useContext(context);\n  if (!value) throw new Error(`${hookName} must be used within MessageScrollerProvider.`);\n  return value;\n};\n\nexport const useRequiredMessageScrollerActionsContext = (hookName: string) =>\n  useRequiredContext(MessageScrollerActionsContext, hookName);\n\nexport const useRequiredMessageScrollerScrollableContext = (hookName: string) =>\n  useRequiredContext(MessageScrollerScrollableContext, hookName);\n\nexport const useRequiredMessageScrollerVisibilityContext = (hookName: string) =>\n  useRequiredContext(MessageScrollerVisibilityContext, hookName);\n","import type { MessageScrollerScrollAlign } from './message-scroller-context';\n\n/**\n * Geometry behind the scroller: how far to scroll for a given alignment, and\n * which anchored message the reader is currently on. Split out from the\n * component so each rule can be reasoned about — and tested — on its own.\n */\n\n/** A message the scroller tracks, and whether a turn is anchored to it. */\nexport type MessageScrollerItemRecord = {\n  element: HTMLElement;\n  scrollAnchor: boolean;\n};\n\n/** Sub-pixel slack, so a message resting exactly on the anchor line still counts. */\nexport const VISIBILITY_EPSILON = 0.5;\n\nexport const getContentPadding = (contentElement: HTMLElement | null) => {\n  if (!contentElement) return { start: 0, end: 0 };\n  const styles = window.getComputedStyle(contentElement);\n  return {\n    start: Number.parseFloat(styles.paddingBlockStart || styles.paddingTop) || 0,\n    end: Number.parseFloat(styles.paddingBlockEnd || styles.paddingBottom) || 0,\n  };\n};\n\nexport const getMaxScroll = (viewportElement: HTMLElement) =>\n  Math.max(0, viewportElement.scrollHeight - viewportElement.clientHeight);\n\nexport const getRelativeTop = (element: HTMLElement, viewportElement: HTMLElement) => {\n  const elementRect = element.getBoundingClientRect();\n  const viewportRect = viewportElement.getBoundingClientRect();\n  return elementRect.top - viewportRect.top + viewportElement.scrollTop;\n};\n\nexport const getScrollTarget = ({\n  align,\n  contentElement,\n  element,\n  scrollMargin,\n  viewportElement,\n}: {\n  align: MessageScrollerScrollAlign;\n  /** The padding framing the transcript lives here, however deep the rows nest. */\n  contentElement: HTMLElement | null;\n  element: HTMLElement;\n  scrollMargin: number;\n  viewportElement: HTMLElement;\n}) => {\n  const contentPadding = getContentPadding(contentElement);\n  const elementTop = getRelativeTop(element, viewportElement);\n  const elementHeight = element.getBoundingClientRect().height;\n  const visibleHeight = Math.max(0, viewportElement.clientHeight - contentPadding.start - contentPadding.end);\n\n  if (align === 'center') return elementTop - contentPadding.start - (visibleHeight - elementHeight) / 2 - scrollMargin;\n  if (align === 'end')\n    return elementTop - viewportElement.clientHeight + elementHeight + contentPadding.end + scrollMargin;\n\n  if (align === 'nearest') {\n    const elementBottom = elementTop + elementHeight;\n    const viewportTop = viewportElement.scrollTop + contentPadding.start;\n    const viewportBottom = viewportElement.scrollTop + viewportElement.clientHeight - contentPadding.end;\n    if (elementTop >= viewportTop && elementBottom <= viewportBottom) return viewportElement.scrollTop;\n    return elementTop < viewportTop\n      ? elementTop - contentPadding.start - scrollMargin\n      : elementBottom - viewportElement.clientHeight + contentPadding.end + scrollMargin;\n  }\n\n  return elementTop - contentPadding.start - scrollMargin;\n};\n\n/**\n * Whether a row has a box to measure. A row hidden by `display: none` — its own or\n * an ancestor's — stays registered but has none, and reports a zero rect at the\n * window origin: read as a position, it sits wherever the reader happens to be.\n */\nconst isDrawn = (element: HTMLElement) => element.getClientRects().length > 0;\n\n/**\n * Where the reader must sit for the last drawn row to rest at the end of the view.\n *\n * Not the end of the scroll: a chat reserves room under a live turn so a reply\n * grows into empty space, and docks its composer in the flow. Both sit below the\n * last row, so scrolling to the end of the box carries that row — and the message\n * that opened the turn — out of the view above. Reading it from the rows means no\n * one has to publish a height for anyone else to subtract.\n */\nexport const getFollowTarget = ({\n  contentElement,\n  items,\n  viewportElement,\n}: {\n  contentElement: HTMLElement | null;\n  items: Array<readonly [string, MessageScrollerItemRecord]>;\n  viewportElement: HTMLElement;\n}) => {\n  const end = getMaxScroll(viewportElement);\n  const lastRow = items.findLast(([, item]) => isDrawn(item.element))?.[1].element;\n  if (!lastRow || !contentElement) return end;\n\n  const contentBottom = getRelativeTop(contentElement, viewportElement) + contentElement.getBoundingClientRect().height;\n  const belowContent = Math.max(0, viewportElement.scrollHeight - contentBottom);\n  const rowBottom = getRelativeTop(lastRow, viewportElement) + lastRow.getBoundingClientRect().height;\n\n  return Math.min(end, Math.max(0, rowBottom + belowContent - viewportElement.clientHeight));\n};\n\nexport const getCurrentAnchorId = ({\n  fallbackAnchorId,\n  items,\n  scrollMargin,\n  scrollPreviousItemPeek,\n  visibleMessageIds,\n  viewportElement,\n}: {\n  fallbackAnchorId: string | undefined;\n  items: Array<readonly [string, MessageScrollerItemRecord]>;\n  scrollMargin: number;\n  scrollPreviousItemPeek: number;\n  visibleMessageIds: Set<string>;\n  viewportElement: HTMLElement;\n}) => {\n  const anchorLine = viewportElement.getBoundingClientRect().top + scrollMargin + scrollPreviousItemPeek;\n  const anchors = items.filter(([, item]) => item.scrollAnchor);\n  const passedLine = (index: number) =>\n    (anchors[index]?.[1].element.getBoundingClientRect().top ?? Infinity) <= anchorLine + VISIBILITY_EPSILON;\n  // Anchors stack top to bottom in document order, so their tops only grow: a scroll reads log(n) of them.\n  let firstUnpassed = 0;\n  let lastCandidate = anchors.length;\n  while (firstUnpassed < lastCandidate) {\n    const middle = (firstUnpassed + lastCandidate) >>> 1;\n    if (passedLine(middle)) firstUnpassed = middle + 1;\n    else lastCandidate = middle;\n  }\n\n  const anchoredAboveViewport = anchors[firstUnpassed - 1]?.[0];\n  if (anchoredAboveViewport) return anchoredAboveViewport;\n  return anchors.find(([messageId]) => visibleMessageIds.has(messageId))?.[0] ?? fallbackAnchorId;\n};\n","/** Longest single growth worth smoothing. Past it the move is one the reader asked for. */\nconst GLIDE_MAX = 240;\nconst GLIDE_MS = 220;\nconst GLIDE_EASE = 'cubic-bezier(0.33, 1, 0.68, 1)';\n\nfunction currentOffset(element: HTMLElement): number {\n  if (typeof DOMMatrixReadOnly === 'undefined') return 0;\n  const { transform } = getComputedStyle(element);\n  if (!transform || transform === 'none') return 0;\n  return new DOMMatrixReadOnly(transform).m42;\n}\n\nconst travels = new WeakMap<HTMLElement, AbortController>();\n\nfunction release(element: HTMLElement): void {\n  travels.get(element)?.abort();\n  travels.delete(element);\n  element.style.transition = '';\n  element.style.transform = '';\n}\n\nfunction calm(): boolean {\n  if (typeof window === 'undefined' || !window.matchMedia) return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Hides a scroll that has already happened. The end is pinned instantly, as it must\n * be, then the content is put back where the reader last saw it and travels to zero\n * on the compositor — so a reply growing a line at a time reads as one movement\n * rather than a snap per wrapped line.\n *\n * Transform, not layout: `scrollHeight` never changes, so nothing here can feed the\n * resize that called it. A line landing mid-travel only adds to the distance left.\n */\nexport function glideContent(element: HTMLElement | null, delta: number): void {\n  if (!element || delta <= 0 || calm()) return;\n\n  const offset = currentOffset(element) + delta;\n  if (offset > GLIDE_MAX) {\n    release(element);\n    return;\n  }\n\n  element.style.transition = 'none';\n  element.style.transform = `translateY(${offset}px)`;\n  // Commit the displaced position, or the browser only ever sees the settled one.\n  void element.offsetHeight;\n  element.style.transition = `transform ${GLIDE_MS}ms ${GLIDE_EASE}`;\n  element.style.transform = 'translateY(0)';\n  // A settled transform would leave the content a containing block for anything\n  // fixed inside it, so the styles come off once the travel is spent. Descendants'\n  // transitions bubble here too, so only the content's own settle counts.\n  travels.get(element)?.abort();\n  const travel = new AbortController();\n  travels.set(element, travel);\n  const settle = (event: TransitionEvent) => {\n    if (event.target !== element) return;\n    if (currentOffset(element) === 0) release(element);\n  };\n  element.addEventListener('transitionend', settle, { signal: travel.signal });\n  element.addEventListener('transitioncancel', settle, { signal: travel.signal });\n}\n","import { VISIBILITY_EPSILON } from './message-scroller-geometry';\n\n/** One designed curve for the one scripted trip: fast liftoff, long settle. */\nconst TRIP_MS = 560;\n/** How long past its clock a trip may chase a destination the layout hasn't released yet. */\nconst TRIP_OVERTIME_MS = 240;\n\nconst easeOutQuint = (t: number) => 1 - (1 - t) ** 5;\n\nexport type TripEndReason = 'arrived' | 'interrupted' | 'expired';\n\nexport interface TripAnimation {\n  cancel: () => void;\n}\n\n/**\n * Drives the viewport to a destination the way a transition would, not the way\n * `scrollTo({ behavior: 'smooth' })` does: the destination is re-read every frame,\n * so a layout still settling under the trip — the reserved room opening beneath a\n * new turn — bends the path instead of restarting the curve. Writes are clamped by\n * the browser, so until the room has opened far enough the trip simply rides the\n * end of the box down.\n *\n * The reader keeps the last word: a scroll position this trip didn't write ends it.\n */\nexport function startTrip(\n  viewportElement: HTMLElement,\n  getTarget: () => number | undefined,\n  onEnd: (reason: TripEndReason) => void,\n): TripAnimation {\n  const reduceMotion =\n    typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  const duration = reduceMotion ? 0 : TRIP_MS;\n  const startedAt = performance.now();\n  const from = viewportElement.scrollTop;\n  let lastWritten = from;\n  let frame = 0;\n  let ended = false;\n\n  const end = (reason: TripEndReason) => {\n    ended = true;\n    onEnd(reason);\n  };\n\n  const step = () => {\n    if (Math.abs(viewportElement.scrollTop - lastWritten) > 1) return end('interrupted');\n    const target = getTarget();\n    if (target === undefined) return end('expired');\n    const elapsed = performance.now() - startedAt;\n    const progress = duration === 0 ? 1 : Math.min(1, elapsed / duration);\n    viewportElement.scrollTop = from + (target - from) * easeOutQuint(progress);\n    lastWritten = viewportElement.scrollTop;\n    if (progress === 1 && Math.abs(lastWritten - target) <= VISIBILITY_EPSILON) return end('arrived');\n    if (elapsed >= duration + TRIP_OVERTIME_MS) return end('expired');\n    frame = window.requestAnimationFrame(step);\n  };\n\n  frame = window.requestAnimationFrame(step);\n\n  return {\n    cancel: () => {\n      if (ended) return;\n      ended = true;\n      window.cancelAnimationFrame(frame);\n    },\n  };\n}\n","import { DEFAULT_VISIBILITY } from './message-scroller-context';\nimport type { MessageScrollerVisibility } from './message-scroller-context';\n\n/** Changes nearly every scroll frame: a context value would make React walk the whole transcript on each change. */\nexport interface MessageScrollerVisibilityStore {\n  getSnapshot: () => MessageScrollerVisibility;\n  subscribe: (onChange: () => void) => () => void;\n  publish: (next: MessageScrollerVisibility) => void;\n}\n\nconst visibilityMatches = (left: MessageScrollerVisibility, right: MessageScrollerVisibility) =>\n  left.currentAnchorId === right.currentAnchorId &&\n  left.visibleMessageIds.length === right.visibleMessageIds.length &&\n  left.visibleMessageIds.every((messageId, index) => messageId === right.visibleMessageIds[index]);\n\nexport function createVisibilityStore(): MessageScrollerVisibilityStore {\n  let visibility = DEFAULT_VISIBILITY;\n  const listeners = new Set<() => void>();\n\n  return {\n    getSnapshot: () => visibility,\n    subscribe: onChange => {\n      listeners.add(onChange);\n      return () => listeners.delete(onChange);\n    },\n    publish: next => {\n      if (visibilityMatches(visibility, next)) return;\n      visibility = next;\n      for (const listener of listeners) listener();\n    },\n  };\n}\n","import { ArrowDownIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport {\n  AUTO_SCROLL_ATTACH_THRESHOLD,\n  DEFAULT_REACH_START_THRESHOLD,\n  DEFAULT_SCROLL_EDGE_THRESHOLD,\n  DEFAULT_SCROLL_MARGIN,\n  DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK,\n  DEFAULT_SCROLLABLE,\n  DEFAULT_VISIBILITY,\n  MessageScrollerActionsContext,\n  MessageScrollerScrollableContext,\n  MessageScrollerVisibilityContext,\n  useRequiredMessageScrollerActionsContext,\n  useRequiredMessageScrollerScrollableContext,\n} from './message-scroller-context';\nimport type {\n  MessageScrollerActionsContextValue,\n  MessageScrollerButtonDirection,\n  MessageScrollerDefaultScrollPosition,\n  MessageScrollerScrollAlign,\n  MessageScrollerScrollOptions,\n  MessageScrollerScrollable,\n} from './message-scroller-context';\n\nimport {\n  VISIBILITY_EPSILON,\n  getCurrentAnchorId,\n  getFollowTarget,\n  getMaxScroll,\n  getScrollTarget,\n} from './message-scroller-geometry';\nimport type { MessageScrollerItemRecord } from './message-scroller-geometry';\nimport { glideContent } from './message-scroller-glide';\nimport { startTrip } from './message-scroller-trip';\nimport type { TripAnimation } from './message-scroller-trip';\nimport { createVisibilityStore } from './message-scroller-visibility-store';\n\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { mergeRefs } from '@/lib/merge-refs';\nimport { cn } from '@/lib/utils';\n\nexport type {\n  MessageScrollerButtonDirection,\n  MessageScrollerDefaultScrollPosition,\n  MessageScrollerScrollAlign,\n  MessageScrollerScrollOptions,\n  MessageScrollerScrollable,\n  MessageScrollerVisibility,\n} from './message-scroller-context';\n\nconst scrollableMatches = (left: MessageScrollerScrollable, right: MessageScrollerScrollable) =>\n  left.start === right.start && left.end === right.end;\n\nconst orderItemsByDocumentPosition = (items: Array<readonly [string, MessageScrollerItemRecord]>) =>\n  items.sort(([, left], [, right]) => {\n    const position = left.element.compareDocumentPosition(right.element);\n    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n    return 0;\n  });\n\nconst scrollViewportTo = (viewportElement: HTMLElement, top: number, behavior: ScrollBehavior) => {\n  if (typeof viewportElement.scrollTo === 'function') {\n    viewportElement.scrollTo({ top, behavior });\n    return;\n  }\n\n  viewportElement.scrollTop = top;\n};\n\nconst scheduleScrollSync = (callback: () => void) => {\n  if (typeof window.requestAnimationFrame === 'function') {\n    window.requestAnimationFrame(callback);\n    return;\n  }\n\n  window.setTimeout(callback, 0);\n};\n\nexport interface MessageScrollerProviderProps {\n  /** Carry the reader with the stream, re-attaching on a new turn. Off still parks a new turn, without following the reply. */\n  autoScroll?: boolean;\n  children?: React.ReactNode;\n  defaultScrollPosition?: MessageScrollerDefaultScrollPosition;\n  /** Called when the reader scrolls near the start — where older history is loaded. */\n  onReachStart?: () => void;\n  /** Hold the reading position when older items are added above the current ones. */\n  preserveScrollOnPrepend?: boolean;\n  reachStartThreshold?: number;\n  scrollEdgeThreshold?: number;\n  scrollMargin?: number;\n  scrollPreviousItemPeek?: number;\n}\n\nexport function MessageScrollerProvider({\n  autoScroll = false,\n  children,\n  defaultScrollPosition = 'end',\n  onReachStart,\n  preserveScrollOnPrepend = false,\n  reachStartThreshold = DEFAULT_REACH_START_THRESHOLD,\n  scrollEdgeThreshold = DEFAULT_SCROLL_EDGE_THRESHOLD,\n  scrollMargin = DEFAULT_SCROLL_MARGIN,\n  scrollPreviousItemPeek = DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK,\n}: MessageScrollerProviderProps) {\n  const itemsRef = React.useRef<Map<string, MessageScrollerItemRecord> | null>(null);\n  itemsRef.current ??= new Map<string, MessageScrollerItemRecord>();\n  const itemsRegistry = itemsRef.current;\n  // Rebuilt on register/unregister only — scroll runs this too often to sort per event.\n  const orderedItemsRef = React.useRef<Array<readonly [string, MessageScrollerItemRecord]> | null>(null);\n  const visibleMessageIdsRef = React.useRef<Set<string> | null>(null);\n  visibleMessageIdsRef.current ??= new Set<string>();\n  const intersectingMessageIds = visibleMessageIdsRef.current;\n  const [itemsVersion, setItemsVersion] = React.useState(0);\n  const [rootElement, setRootElement] = React.useState<HTMLDivElement | null>(null);\n  const [viewportElement, setViewportElement] = React.useState<HTMLDivElement | null>(null);\n  const [contentElement, setContentElement] = React.useState<HTMLDivElement | null>(null);\n  const defaultScrollAppliedRef = React.useRef(false);\n  const deferDefaultScrollRef = React.useRef(false);\n  const defaultScrollScheduledRef = React.useRef(false);\n  const seenAnchorIdsRef = React.useRef<Set<string> | null>(null);\n  seenAnchorIdsRef.current ??= new Set<string>();\n  const seenAnchorIds = seenAnchorIdsRef.current;\n  // Message ID reconciliation keeps the row element while replacing its ID.\n  const seenAnchorElementsRef = React.useRef<WeakSet<HTMLElement> | null>(null);\n  seenAnchorElementsRef.current ??= new WeakSet<HTMLElement>();\n  const seenAnchorElements = seenAnchorElementsRef.current;\n  const turnAnchoringArmedRef = React.useRef(false);\n  const [scrollable, setScrollable] = React.useState<MessageScrollerScrollable>(DEFAULT_SCROLLABLE);\n  const [visibilityStore] = React.useState(createVisibilityStore);\n  const publishVisibility = visibilityStore.publish;\n  const atEndRef = React.useRef(true);\n  // Attachment is a mode, not a measurement: a growing reply moves the end away\n  // without the reader having moved, so only the reader detaches it.\n  const followingRef = React.useRef(true);\n  // A smooth trip in flight, remembered by destination — the end of the stream, or\n  // the anchor a new turn parks at. Sampled mid-flight it reads as a reader who\n  // left, so it suspends detachment; a position going backwards calls it off.\n  const tripRef = React.useRef<'end' | { anchorId: string } | null>(null);\n  // The frame loop behind an anchor trip. Owns clearing its trip: it alone can\n  // tell the reader taking over from its own writes landing.\n  const tripAnimationRef = React.useRef<TripAnimation | null>(null);\n  const lastScrollTopRef = React.useRef(0);\n  // Only a reader moving backwards asks for older history: a mount sitting at\n  // scrollTop 0 before the default scroll lands has not moved.\n  const reachStartArmedRef = React.useRef(false);\n  const reachStartFiredRef = React.useRef(false);\n  const prependAnchorRef = React.useRef<{ scrollHeight: number; scrollTop: number } | null>(null);\n  const firstItemIdRef = React.useRef<string | undefined>(undefined);\n  // Off notifyScroll's deps on purpose: consumers pass it inline, and a fresh\n  // identity per render would republish the actions context to every consumer.\n  const onReachStartRef = React.useRef(onReachStart);\n  React.useEffect(() => {\n    onReachStartRef.current = onReachStart;\n  }, [onReachStart]);\n\n  const publishScrollable = React.useCallback(\n    (nextScrollable: MessageScrollerScrollable) => {\n      const scrollableValue = [nextScrollable.start && 'start', nextScrollable.end && 'end'].filter(Boolean).join(' ');\n\n      for (const element of [rootElement, viewportElement]) {\n        if (!element) continue;\n        if (scrollableValue) {\n          element.setAttribute('data-scrollable', scrollableValue);\n        } else {\n          element.removeAttribute('data-scrollable');\n        }\n      }\n\n      setScrollable(current => (scrollableMatches(current, nextScrollable) ? current : nextScrollable));\n    },\n    [rootElement, viewportElement],\n  );\n\n  // Registration is mount order, not document order, once history is prepended.\n  const getOrderedItems = React.useCallback(() => {\n    orderedItemsRef.current ??= orderItemsByDocumentPosition(Array.from(itemsRegistry.entries()));\n    return orderedItemsRef.current;\n  }, [itemsRegistry]);\n\n  // The one definition of \"the end\" — following it, resting at it, offering the trip\n  // back to it. Everything below the last row (reserved room, the docked composer)\n  // is room to grow into, never somewhere to scroll.\n  const followTarget = React.useCallback(() => {\n    if (!viewportElement) return 0;\n\n    return getFollowTarget({ contentElement, items: getOrderedItems(), viewportElement });\n  }, [contentElement, getOrderedItems, viewportElement]);\n\n  const anchorTripTarget = React.useCallback(\n    (anchorId: string) => {\n      const item = itemsRegistry.get(anchorId);\n      if (!item || !viewportElement) return undefined;\n      return Math.max(\n        0,\n        getScrollTarget({ align: 'start', contentElement, element: item.element, scrollMargin, viewportElement }),\n      );\n    },\n    [contentElement, itemsRegistry, scrollMargin, viewportElement],\n  );\n\n  // The motion's destination, never the decision's: the room under a fresh turn is\n  // still opening when the trip starts — on a short thread the box has not even\n  // grown yet — so the cap is re-read per frame and the trip rides the end of the\n  // box until the opened room decides where the message rests.\n  const parkTripTarget = React.useCallback(\n    (anchorId: string) => {\n      const target = anchorTripTarget(anchorId);\n      if (target === undefined || !viewportElement) return target;\n      return Math.min(target, getMaxScroll(viewportElement));\n    },\n    [anchorTripTarget, viewportElement],\n  );\n\n  const cancelTripAnimation = React.useCallback(() => {\n    tripAnimationRef.current?.cancel();\n    tripAnimationRef.current = null;\n  }, []);\n\n  const updateScrollable = React.useCallback(\n    ({ fromScroll = false }: { fromScroll?: boolean } = {}) => {\n      if (!viewportElement) {\n        atEndRef.current = true;\n        publishScrollable(DEFAULT_SCROLLABLE);\n        return false;\n      }\n\n      const { scrollTop } = viewportElement;\n      const remainingScroll = followTarget() - scrollTop;\n      const wentBack = scrollTop < lastScrollTopRef.current;\n      atEndRef.current = remainingScroll < AUTO_SCROLL_ATTACH_THRESHOLD;\n      if (tripRef.current === 'end' && (wentBack || atEndRef.current)) tripRef.current = null;\n      lastScrollTopRef.current = scrollTop;\n      // Scrolling back is the only way out of the stream, the end the only way back in:\n      // a position merely left behind by a growing reply is us chasing it, not them leaving.\n      if (fromScroll && tripRef.current === null && (wentBack || atEndRef.current)) {\n        followingRef.current = atEndRef.current;\n      }\n\n      publishScrollable({\n        start: scrollTop > scrollEdgeThreshold,\n        end: remainingScroll > scrollEdgeThreshold && !(autoScroll && followingRef.current),\n      });\n\n      return wentBack;\n    },\n    [autoScroll, followTarget, publishScrollable, scrollEdgeThreshold, viewportElement],\n  );\n\n  const getLastAnchorId = React.useCallback(\n    () =>\n      getOrderedItems()\n        .filter(([, item]) => item.scrollAnchor)\n        .at(-1)?.[0],\n    [getOrderedItems],\n  );\n\n  const updateVisibility = React.useCallback(() => {\n    const items = getOrderedItems();\n    const fallbackAnchorId = getLastAnchorId() ?? items.at(-1)?.[0];\n\n    if (items.length === 0) {\n      publishVisibility(DEFAULT_VISIBILITY);\n      return;\n    }\n\n    if (!viewportElement) {\n      publishVisibility({\n        currentAnchorId: fallbackAnchorId,\n        visibleMessageIds: fallbackAnchorId ? [fallbackAnchorId] : [],\n      });\n      return;\n    }\n\n    const viewportRect = viewportElement.getBoundingClientRect();\n    const visibleMessageIds = new Set<string>();\n\n    if (typeof IntersectionObserver === 'undefined') {\n      const visibilityTop = viewportRect.top + scrollMargin + scrollPreviousItemPeek;\n      items.forEach(([messageId, item]) => {\n        const rect = item.element.getBoundingClientRect();\n        if (rect.bottom > visibilityTop && rect.top < viewportRect.bottom) visibleMessageIds.add(messageId);\n      });\n    } else {\n      intersectingMessageIds.forEach(messageId => visibleMessageIds.add(messageId));\n    }\n\n    const orderedVisibleMessageIds = items.flatMap(([messageId]) =>\n      visibleMessageIds.has(messageId) ? [messageId] : [],\n    );\n\n    publishVisibility({\n      currentAnchorId: getCurrentAnchorId({\n        fallbackAnchorId,\n        items,\n        scrollMargin,\n        scrollPreviousItemPeek,\n        visibleMessageIds,\n        viewportElement,\n      }),\n      visibleMessageIds:\n        orderedVisibleMessageIds.length > 0 ? orderedVisibleMessageIds : fallbackAnchorId ? [fallbackAnchorId] : [],\n    });\n  }, [\n    getLastAnchorId,\n    getOrderedItems,\n    intersectingMessageIds,\n    publishVisibility,\n    scrollMargin,\n    scrollPreviousItemPeek,\n    viewportElement,\n  ]);\n\n  const syncAfterScroll = React.useCallback(() => {\n    updateScrollable();\n    updateVisibility();\n  }, [updateScrollable, updateVisibility]);\n\n  const notifyScroll = React.useCallback(() => {\n    const wasScrollable = Boolean(viewportElement && viewportElement.scrollHeight > viewportElement.clientHeight);\n    const readerWentBack = updateScrollable({ fromScroll: true });\n    updateVisibility();\n    if (!viewportElement) return;\n\n    if (readerWentBack && wasScrollable) reachStartArmedRef.current = true;\n\n    if (!reachStartArmedRef.current) return;\n    if (!wasScrollable) return;\n    if (viewportElement.scrollTop > reachStartThreshold) {\n      reachStartFiredRef.current = false;\n      return;\n    }\n    // One request per trip to the start: staying there must not queue a second.\n    if (reachStartFiredRef.current) return;\n    if (!onReachStartRef.current) return;\n\n    reachStartFiredRef.current = true;\n    if (preserveScrollOnPrepend) {\n      prependAnchorRef.current = {\n        scrollHeight: viewportElement.scrollHeight,\n        scrollTop: viewportElement.scrollTop,\n      };\n    }\n    onReachStartRef.current();\n  }, [preserveScrollOnPrepend, reachStartThreshold, updateScrollable, updateVisibility, viewportElement]);\n\n  const scrollToElement = React.useCallback(\n    (\n      element: HTMLElement,\n      {\n        align = 'start',\n        behavior = 'auto',\n        scrollMargin: optionScrollMargin = scrollMargin,\n      }: MessageScrollerScrollOptions = {},\n    ) => {\n      if (!viewportElement || !contentElement?.contains(element)) return false;\n\n      const nextScrollTop = Math.max(\n        0,\n        getScrollTarget({ align, contentElement, element, scrollMargin: optionScrollMargin, viewportElement }),\n      );\n\n      if (Math.abs(viewportElement.scrollTop - nextScrollTop) <= VISIBILITY_EPSILON) {\n        scrollViewportTo(viewportElement, nextScrollTop, 'auto');\n        syncAfterScroll();\n        return true;\n      }\n\n      scrollViewportTo(viewportElement, nextScrollTop, behavior);\n      scheduleScrollSync(syncAfterScroll);\n      return true;\n    },\n    [contentElement, scrollMargin, syncAfterScroll, viewportElement],\n  );\n\n  const scrollToStart = React.useCallback(\n    ({ behavior = 'auto' }: MessageScrollerScrollOptions = {}) => {\n      if (!viewportElement) return false;\n      cancelTripAnimation();\n      tripRef.current = null;\n      scrollViewportTo(viewportElement, 0, behavior);\n      scheduleScrollSync(syncAfterScroll);\n      return true;\n    },\n    [cancelTripAnimation, syncAfterScroll, viewportElement],\n  );\n\n  const scrollToEnd = React.useCallback(\n    ({ behavior = 'auto' }: MessageScrollerScrollOptions = {}) => {\n      if (!viewportElement) return false;\n      cancelTripAnimation();\n      followingRef.current = true;\n      tripRef.current = behavior === 'smooth' ? 'end' : null;\n      scrollViewportTo(viewportElement, followTarget(), behavior);\n      // Published now, not next frame: a button that hears about the trip late flashes.\n      syncAfterScroll();\n      scheduleScrollSync(syncAfterScroll);\n      return true;\n    },\n    [cancelTripAnimation, followTarget, syncAfterScroll, viewportElement],\n  );\n\n  const scrollToMessage = React.useCallback(\n    (messageId: string, options?: MessageScrollerScrollOptions) => {\n      const item = itemsRegistry.get(messageId);\n      if (!item) return false;\n      return scrollToElement(item.element, options);\n    },\n    [itemsRegistry, scrollToElement],\n  );\n\n  // A reply grows into the room its turn reserved and moves nothing: only once the\n  // last row would fall past the end of the view is there anything to follow, and\n  // then by exactly what it overflowed — pinned instantly, glided on the compositor.\n  const notifyContentResize = React.useCallback(() => {\n    const trip = tripRef.current;\n    const onAnchorTrip = trip !== null && trip !== 'end';\n    // An anchor trip re-reads its destination every frame, so a layout settling\n    // under it — the reserved room opening — bends its path without help from here.\n    if (!onAnchorTrip && autoScroll && defaultScrollAppliedRef.current && followingRef.current && viewportElement) {\n      const overflow = followTarget() - viewportElement.scrollTop;\n      if (overflow > VISIBILITY_EPSILON) {\n        // A trip already in flight is retargeted rather than cut short; only the\n        // instant catch-up needs the glide to read as one movement.\n        const travelling = trip === 'end';\n        scrollViewportTo(viewportElement, followTarget(), travelling ? 'smooth' : 'auto');\n        if (!travelling) glideContent(contentElement, overflow);\n      }\n    }\n    syncAfterScroll();\n  }, [autoScroll, contentElement, followTarget, syncAfterScroll, viewportElement]);\n\n  const registerItem = React.useCallback(\n    (messageId: string, element: HTMLElement, scrollAnchor: boolean) => {\n      itemsRegistry.set(messageId, { element, scrollAnchor });\n      orderedItemsRef.current = null;\n      setItemsVersion(version => version + 1);\n\n      return () => {\n        const current = itemsRegistry.get(messageId);\n        if (current?.element !== element) return;\n        itemsRegistry.delete(messageId);\n        intersectingMessageIds.delete(messageId);\n        orderedItemsRef.current = null;\n        setItemsVersion(version => version + 1);\n      };\n    },\n    [intersectingMessageIds, itemsRegistry],\n  );\n\n  React.useEffect(() => {\n    if (!contentElement || !viewportElement || typeof IntersectionObserver === 'undefined') {\n      updateVisibility();\n      return undefined;\n    }\n\n    const messageIdByElement = new Map<Element, string>();\n    for (const [messageId, item] of itemsRegistry) {\n      messageIdByElement.set(item.element, messageId);\n    }\n\n    const observer = new IntersectionObserver(\n      entries => {\n        for (const entry of entries) {\n          const messageId = messageIdByElement.get(entry.target);\n          if (!messageId) continue;\n          if (entry.isIntersecting) {\n            intersectingMessageIds.add(messageId);\n          } else {\n            intersectingMessageIds.delete(messageId);\n          }\n        }\n        updateVisibility();\n      },\n      {\n        root: viewportElement,\n        rootMargin: `${-(scrollMargin + scrollPreviousItemPeek)}px 0px 0px 0px`,\n        threshold: [0, 0.01, 0.5, 1],\n      },\n    );\n\n    for (const [, item] of itemsRegistry) observer.observe(item.element);\n    updateVisibility();\n\n    return () => observer.disconnect();\n  }, [\n    contentElement,\n    intersectingMessageIds,\n    itemsRegistry,\n    itemsVersion,\n    scrollMargin,\n    scrollPreviousItemPeek,\n    updateVisibility,\n    viewportElement,\n  ]);\n\n  React.useEffect(() => {\n    if (!viewportElement || typeof ResizeObserver === 'undefined') return undefined;\n    const observer = new ResizeObserver(syncAfterScroll);\n    observer.observe(viewportElement);\n    return () => observer.disconnect();\n  }, [syncAfterScroll, viewportElement]);\n\n  React.useLayoutEffect(() => {\n    updateScrollable();\n    updateVisibility();\n  }, [itemsVersion, updateScrollable, updateVisibility]);\n\n  React.useLayoutEffect(() => {\n    if (defaultScrollAppliedRef.current || !viewportElement) return undefined;\n    if (itemsRegistry.size === 0) {\n      deferDefaultScrollRef.current = true;\n      return undefined;\n    }\n\n    const applyDefaultScroll = () => {\n      const lastAnchorId = getLastAnchorId();\n      // Where a thread opens decides whether it starts attached: a restored reading\n      // position has the stream below it. `scrollToEnd` takes this back when it lands.\n      followingRef.current = false;\n      let didScroll = false;\n      if (defaultScrollPosition === 'start') {\n        didScroll = scrollToStart({ behavior: 'auto' });\n      } else if (defaultScrollPosition === 'last-anchor') {\n        didScroll = lastAnchorId\n          ? scrollToMessage(lastAnchorId, { align: 'start', behavior: 'auto' })\n          : scrollToEnd({ behavior: 'auto' });\n      } else {\n        didScroll = scrollToEnd({ behavior: 'auto' });\n      }\n\n      if (!didScroll) return;\n      defaultScrollAppliedRef.current = true;\n      // A fresh thread opens on its first message with nothing to scroll yet: it is\n      // at its end, so the reply streaming in under it is followed.\n      if (autoScroll && getMaxScroll(viewportElement) <= VISIBILITY_EPSILON) followingRef.current = true;\n      // Settling is what arms turn anchoring: the rows the transcript opened with\n      // are recorded as read here, and on a settled thread the next anchor to\n      // register is the send itself — an arming left to a later anchoring pass\n      // would be eaten by that send instead of parking it.\n      for (const [messageId, item] of getOrderedItems()) {\n        if (!item.scrollAnchor) continue;\n        seenAnchorIds.add(messageId);\n        seenAnchorElements.add(item.element);\n      }\n      turnAnchoringArmedRef.current = true;\n    };\n\n    if (!deferDefaultScrollRef.current) {\n      applyDefaultScroll();\n      return undefined;\n    }\n    if (defaultScrollScheduledRef.current) return undefined;\n\n    defaultScrollScheduledRef.current = true;\n    let cancelled = false;\n    scheduleScrollSync(() => {\n      scheduleScrollSync(() => {\n        defaultScrollScheduledRef.current = false;\n        if (!cancelled && !defaultScrollAppliedRef.current) applyDefaultScroll();\n      });\n    });\n    return () => {\n      cancelled = true;\n      defaultScrollScheduledRef.current = false;\n    };\n  }, [\n    autoScroll,\n    defaultScrollPosition,\n    getLastAnchorId,\n    getOrderedItems,\n    itemsRegistry,\n    itemsVersion,\n    scrollToEnd,\n    scrollToMessage,\n    scrollToStart,\n    seenAnchorElements,\n    seenAnchorIds,\n    viewportElement,\n  ]);\n\n  // A turn opening is the one scripted scroll of a conversation: it carries the\n  // reader to the message they just sent and parks it as high as the room the turn\n  // reserves under it allows. The answer then grows into that room and moves\n  // nothing at all — following only takes over once it outgrows the room.\n  React.useLayoutEffect(() => {\n    const lastAnchorId = getLastAnchorId();\n    const lastAnchor = lastAnchorId ? itemsRegistry.get(lastAnchorId) : undefined;\n    const opensTurn =\n      turnAnchoringArmedRef.current &&\n      lastAnchorId !== undefined &&\n      lastAnchor !== undefined &&\n      !seenAnchorIds.has(lastAnchorId) &&\n      !seenAnchorElements.has(lastAnchor.element);\n\n    for (const [messageId, item] of getOrderedItems()) {\n      if (!item.scrollAnchor) continue;\n      seenAnchorIds.add(messageId);\n      seenAnchorElements.add(item.element);\n    }\n    turnAnchoringArmedRef.current = defaultScrollAppliedRef.current;\n\n    if (opensTurn && lastAnchorId) {\n      if (autoScroll) followingRef.current = true;\n      cancelTripAnimation();\n      const target = viewportElement ? anchorTripTarget(lastAnchorId) : undefined;\n      // A turn opening at the top of the transcript — the first message of a fresh\n      // thread — is already parked: no trip, and nothing moves.\n      if (\n        target === undefined ||\n        !viewportElement ||\n        Math.abs(target - viewportElement.scrollTop) <= VISIBILITY_EPSILON\n      ) {\n        tripRef.current = null;\n      } else {\n        tripRef.current = { anchorId: lastAnchorId };\n        tripAnimationRef.current = startTrip(\n          viewportElement,\n          () => parkTripTarget(lastAnchorId),\n          reason => {\n            tripAnimationRef.current = null;\n            tripRef.current = null;\n            if (reason === 'interrupted') followingRef.current = atEndRef.current;\n            syncAfterScroll();\n          },\n        );\n      }\n      // Published now: the reader just re-attached, and a button that hears late flashes.\n      syncAfterScroll();\n      return;\n    }\n\n    // Rows landing outside a turn — restored history, a notice — still belong to a\n    // reader riding the stream, and reach them without a second animation. A trip\n    // to an anchor keeps the viewport; a parked reader has new rows growing into\n    // the room above the fold, with nothing below to catch up to.\n    if (!autoScroll || !defaultScrollAppliedRef.current || !followingRef.current) return;\n    if (tripRef.current !== null && tripRef.current !== 'end') return;\n    if (viewportElement && followTarget() - viewportElement.scrollTop <= VISIBILITY_EPSILON) return;\n    scrollToEnd({ behavior: tripRef.current === 'end' ? 'smooth' : 'auto' });\n  }, [\n    anchorTripTarget,\n    autoScroll,\n    cancelTripAnimation,\n    followTarget,\n    getLastAnchorId,\n    getOrderedItems,\n    itemsRegistry,\n    itemsVersion,\n    parkTripTarget,\n    scrollToEnd,\n    seenAnchorElements,\n    seenAnchorIds,\n    syncAfterScroll,\n    viewportElement,\n  ]);\n\n  // A viewport going away mid-trip strands the frame loop on a detached element.\n  React.useEffect(\n    () => () => {\n      cancelTripAnimation();\n      tripRef.current = null;\n    },\n    [cancelTripAnimation, viewportElement],\n  );\n\n  // Older items land above the reader and shove their position down. A prepend is\n  // told from an append by the first item's id, then undone by offsetting\n  // scrollTop by however much taller the content got.\n  React.useLayoutEffect(() => {\n    const previousFirstItemId = firstItemIdRef.current;\n    // From the DOM, not the registry: prepended items register last, so registry\n    // order stops matching reading order.\n    const firstItemId = contentElement?.querySelector<HTMLElement>('[data-slot=\"message-scroller-item\"]')?.dataset\n      .messageId;\n    firstItemIdRef.current = firstItemId;\n\n    const anchor = prependAnchorRef.current;\n    prependAnchorRef.current = null;\n    if (!anchor || !viewportElement || firstItemId === previousFirstItemId) return;\n\n    reachStartFiredRef.current = false;\n    const grownBy = viewportElement.scrollHeight - anchor.scrollHeight;\n    if (grownBy > 0) viewportElement.scrollTop = anchor.scrollTop + grownBy;\n  }, [contentElement, itemsVersion, viewportElement]);\n\n  const actionsContextValue = React.useMemo<MessageScrollerActionsContextValue>(\n    () => ({\n      notifyContentResize,\n      notifyScroll,\n      registerItem,\n      scrollToEnd,\n      scrollToMessage,\n      scrollToStart,\n      setContentElement,\n      setRootElement,\n      setViewportElement,\n      syncAfterScroll,\n    }),\n    [notifyContentResize, notifyScroll, registerItem, scrollToEnd, scrollToMessage, scrollToStart, syncAfterScroll],\n  );\n\n  const scrollableContextValue = React.useMemo<MessageScrollerScrollable>(\n    () => ({\n      end: scrollable.end,\n      start: scrollable.start,\n    }),\n    [scrollable.end, scrollable.start],\n  );\n\n  return (\n    <MessageScrollerActionsContext.Provider value={actionsContextValue}>\n      <MessageScrollerScrollableContext.Provider value={scrollableContextValue}>\n        <MessageScrollerVisibilityContext.Provider value={visibilityStore}>\n          {children}\n        </MessageScrollerVisibilityContext.Provider>\n      </MessageScrollerScrollableContext.Provider>\n    </MessageScrollerActionsContext.Provider>\n  );\n}\n\nexport type MessageScrollerProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const MessageScroller = React.forwardRef<HTMLDivElement, MessageScrollerProps>(\n  ({ className, ...props }, ref) => {\n    const { setRootElement } = useRequiredMessageScrollerActionsContext('MessageScroller');\n    return (\n      <div\n        ref={mergeRefs(setRootElement, ref)}\n        data-slot=\"message-scroller\"\n        className={cn('group/message-scroller relative flex size-full min-h-0 flex-col', className)}\n        {...props}\n      />\n    );\n  },\n);\nMessageScroller.displayName = 'MessageScroller';\n\nexport type MessageScrollerViewportProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const MessageScrollerViewport = React.forwardRef<HTMLDivElement, MessageScrollerViewportProps>(\n  ({ className, onScroll, role, tabIndex, ...props }, ref) => {\n    const { setViewportElement, notifyScroll } = useRequiredMessageScrollerActionsContext('MessageScrollerViewport');\n    const viewportRef = React.useMemo(() => mergeRefs(setViewportElement, ref), [ref, setViewportElement]);\n\n    return (\n      <div\n        ref={viewportRef}\n        role={role ?? 'region'}\n        tabIndex={tabIndex ?? 0}\n        data-slot=\"message-scroller-viewport\"\n        className={cn(\n          // Size container so consumers can size the room under a live turn in cqh.\n          '[container-type:size] size-full min-h-0 min-w-0 overflow-y-auto overscroll-y-contain',\n          'data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent',\n          className,\n        )}\n        onScroll={event => {\n          notifyScroll();\n          onScroll?.(event);\n        }}\n        {...props}\n      />\n    );\n  },\n);\nMessageScrollerViewport.displayName = 'MessageScrollerViewport';\n\nexport type MessageScrollerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  spacerClassName?: string;\n};\n\nexport const MessageScrollerContent = React.forwardRef<HTMLDivElement, MessageScrollerContentProps>(\n  ({ children, className, spacerClassName, role, 'aria-relevant': ariaRelevant = 'additions', ...props }, ref) => {\n    const { setContentElement, notifyContentResize, syncAfterScroll } =\n      useRequiredMessageScrollerActionsContext('MessageScrollerContent');\n    const [contentElement, setLocalContentElement] = React.useState<HTMLDivElement | null>(null);\n\n    const contentRef = React.useMemo(\n      () => mergeRefs<HTMLDivElement>(setContentElement, setLocalContentElement, ref),\n      [ref, setContentElement],\n    );\n\n    React.useLayoutEffect(() => {\n      syncAfterScroll();\n    }, [syncAfterScroll]);\n\n    React.useEffect(() => {\n      if (!contentElement || typeof MutationObserver === 'undefined') return undefined;\n      const observer = new MutationObserver(notifyContentResize);\n      observer.observe(contentElement, { childList: true, subtree: false });\n      return () => observer.disconnect();\n    }, [contentElement, notifyContentResize]);\n\n    React.useEffect(() => {\n      if (!contentElement || typeof ResizeObserver === 'undefined') return undefined;\n      const observer = new ResizeObserver(notifyContentResize);\n      observer.observe(contentElement);\n      return () => observer.disconnect();\n    }, [contentElement, notifyContentResize]);\n\n    return (\n      <div\n        ref={contentRef}\n        role={role ?? 'log'}\n        aria-relevant={ariaRelevant}\n        data-slot=\"message-scroller-content\"\n        className={cn('flex h-max min-h-full flex-col gap-6', className)}\n        {...props}\n      >\n        {children}\n        <div aria-hidden=\"true\" data-message-scroller-spacer=\"\" hidden className={spacerClassName} />\n      </div>\n    );\n  },\n);\nMessageScrollerContent.displayName = 'MessageScrollerContent';\n\nexport type MessageScrollerItemProps = React.HTMLAttributes<HTMLDivElement> & {\n  messageId?: string;\n  scrollAnchor?: boolean;\n};\n\nexport const MessageScrollerItem = React.forwardRef<HTMLDivElement, MessageScrollerItemProps>(\n  ({ className, messageId, scrollAnchor = false, ...props }, ref) => {\n    // Optional, unlike the other slots: the same row renderer is reused outside a\n    // scroller (draft pages, previews), where there is simply nothing to register.\n    const registerItem = React.useContext(MessageScrollerActionsContext)?.registerItem;\n    const unregisterRef = React.useRef<(() => void) | undefined>(undefined);\n    const itemRef = React.useCallback(\n      (element: HTMLDivElement | null) => {\n        unregisterRef.current?.();\n        unregisterRef.current = undefined;\n        mergeRefs(ref)(element);\n\n        if (!element || !messageId || !registerItem) return;\n        unregisterRef.current = registerItem(messageId, element, scrollAnchor);\n      },\n      [messageId, ref, registerItem, scrollAnchor],\n    );\n\n    return (\n      <div\n        ref={itemRef}\n        data-slot=\"message-scroller-item\"\n        data-message-id={messageId}\n        data-scroll-anchor={scrollAnchor ? 'true' : 'false'}\n        // content-visibility contains painting. Reserve room for a 2px outline + 2px offset,\n        // and compensate with negative margins so message alignment and spacing stay unchanged.\n        className={cn(\n          '-m-1 min-w-0 shrink-0 p-1 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nMessageScrollerItem.displayName = 'MessageScrollerItem';\n\nexport type MessageScrollerButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {\n  behavior?: ScrollBehavior;\n  children?: React.ReactNode;\n  direction?: MessageScrollerButtonDirection;\n};\n\nexport const MessageScrollerButton = React.forwardRef<HTMLButtonElement, MessageScrollerButtonProps>(\n  (\n    { behavior = 'smooth', direction = 'end', className, children, onClick, tabIndex, type = 'button', ...props },\n    ref,\n  ) => {\n    const { scrollToEnd, scrollToStart } = useRequiredMessageScrollerActionsContext('MessageScrollerButton');\n    const { start, end } = useRequiredMessageScrollerScrollableContext('MessageScrollerButton');\n    const active = direction === 'start' ? start : end;\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        {...props}\n        data-slot=\"message-scroller-button\"\n        data-active={active ? 'true' : 'false'}\n        data-direction={direction}\n        tabIndex={active ? tabIndex : -1}\n        className={cn(\n          overlaySurfaceStyle,\n          'absolute inset-s-1/2 inline-flex min-h-5 min-w-7 -translate-x-1/2 items-center justify-center rounded-full text-foreground transition-[scale,opacity] duration-200 hover:[--surface-tint:var(--fill-subtle)] data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=start]:top-4 rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180',\n          className,\n        )}\n        onClick={event => {\n          if (!active) return;\n          onClick?.(event);\n          if (event.defaultPrevented) return;\n          event.currentTarget.blur();\n          if (direction === 'start') {\n            scrollToStart({ behavior });\n          } else {\n            scrollToEnd({ behavior });\n          }\n        }}\n      >\n        {children ?? (\n          <>\n            <ArrowDownIcon className=\"size-4\" aria-hidden />\n            <span className=\"sr-only\">{direction === 'end' ? 'Scroll to end' : 'Scroll to start'}</span>\n          </>\n        )}\n      </button>\n    );\n  },\n);\nMessageScrollerButton.displayName = 'MessageScrollerButton';\n","import * as React from 'react';\n\nimport {\n  MessageScrollerActionsContext,\n  MessageScrollerScrollableContext,\n  MessageScrollerVisibilityContext,\n  useRequiredMessageScrollerActionsContext,\n  useRequiredMessageScrollerScrollableContext,\n  useRequiredMessageScrollerVisibilityContext,\n} from './message-scroller-context';\n\nconst subscribeNowhere = () => () => {};\nconst noVisibility = () => undefined;\n\nexport const useMessageScroller = () => {\n  const { scrollToEnd, scrollToMessage, scrollToStart } =\n    useRequiredMessageScrollerActionsContext('useMessageScroller');\n  return React.useMemo(\n    () => ({ scrollToEnd, scrollToMessage, scrollToStart }),\n    [scrollToEnd, scrollToMessage, scrollToStart],\n  );\n};\n\nexport const useOptionalMessageScroller = () => {\n  const context = React.useContext(MessageScrollerActionsContext);\n  return React.useMemo(() => {\n    if (!context) return undefined;\n    return {\n      scrollToEnd: context.scrollToEnd,\n      scrollToMessage: context.scrollToMessage,\n      scrollToStart: context.scrollToStart,\n    };\n  }, [context]);\n};\n\nexport const useMessageScrollerScrollable = () => {\n  const { start, end } = useRequiredMessageScrollerScrollableContext('useMessageScrollerScrollable');\n  return React.useMemo(() => ({ start, end }), [end, start]);\n};\n\nexport const useOptionalMessageScrollerScrollable = () => {\n  const context = React.useContext(MessageScrollerScrollableContext);\n  return React.useMemo(() => (context ? { start: context.start, end: context.end } : undefined), [context]);\n};\n\nexport const useMessageScrollerVisibility = () => {\n  const store = useRequiredMessageScrollerVisibilityContext('useMessageScrollerVisibility');\n  return React.useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n};\n\nexport const useOptionalMessageScrollerVisibility = () => {\n  const store = React.useContext(MessageScrollerVisibilityContext);\n  const getSnapshot = store?.getSnapshot ?? noVisibility;\n  return React.useSyncExternalStore(store?.subscribe ?? subscribeNowhere, getSnapshot, getSnapshot);\n};\n"],"mappings":"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"}

package/dist/Metadata-5GJlO4GU.cjs

@@ -0,0 +1,32 @@
+const require_utils = require("./utils-uDc1ofX1.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/ds/components/Metadata/metadata.tsx
+var SingleLineContext = (0, react.createContext)(false);
+function Metadata({ singleLine = false, className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleLineContext.Provider, {
+		value: singleLine,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			...props,
+			"data-slot": "metadata",
+			className: require_utils.cn(singleLine ? "flex max-w-full min-w-0 items-center gap-x-2 overflow-hidden" : "inline-flex max-w-full min-w-0 flex-wrap items-center gap-x-2 gap-y-1", className)
+		})
+	});
+}
+function MetadataItem({ className, ...props }) {
+	const singleLine = (0, react.useContext)(SingleLineContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
+		"data-slot": "metadata-item",
+		className: require_utils.cn(singleLine ? "min-w-0 truncate" : "inline-flex max-w-full min-w-0 items-center gap-1 wrap-anywhere whitespace-normal", className)
+	});
+}
+Metadata.Item = MetadataItem;
+Object.defineProperty(exports, "Metadata", {
+	enumerable: true,
+	get: function() {
+		return Metadata;
+	}
+});
+
+//# sourceMappingURL=Metadata-5GJlO4GU.cjs.map

package/dist/Metadata-5GJlO4GU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Metadata-5GJlO4GU.cjs","names":["createContext","cn","useContext"],"sources":["../src/ds/components/Metadata/metadata.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\nconst SingleLineContext = createContext(false);\n\nexport type MetadataProps = ComponentProps<'span'> & {\n  singleLine?: boolean;\n};\n\nexport function Metadata({ singleLine = false, className, ...props }: MetadataProps) {\n  return (\n    <SingleLineContext.Provider value={singleLine}>\n      <span\n        {...props}\n        data-slot=\"metadata\"\n        className={cn(\n          singleLine\n            ? 'flex max-w-full min-w-0 items-center gap-x-2 overflow-hidden'\n            : 'inline-flex max-w-full min-w-0 flex-wrap items-center gap-x-2 gap-y-1',\n          className,\n        )}\n      />\n    </SingleLineContext.Provider>\n  );\n}\n\nfunction MetadataItem({ className, ...props }: ComponentProps<'span'>) {\n  const singleLine = useContext(SingleLineContext);\n\n  return (\n    <span\n      {...props}\n      data-slot=\"metadata-item\"\n      className={cn(\n        singleLine\n          ? 'min-w-0 truncate'\n          : 'inline-flex max-w-full min-w-0 items-center gap-1 wrap-anywhere whitespace-normal',\n        className,\n      )}\n    />\n  );\n}\n\nMetadata.Item = MetadataItem;\n"],"mappings":";;;;AAIA,IAAM,qBAAA,GAAoBA,MAAAA,cAAAA,CAAc,KAAK;AAM7C,SAAgB,SAAS,EAAE,aAAa,OAAO,WAAW,GAAG,SAAwB;CACnF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAkB,UAAnB;EAA4B,OAAO;EACjC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,GAAI;GACJ,aAAU;GACV,WAAWC,cAAAA,GACT,aACI,iEACA,yEACJ,SACF;EACD,CAAA;CACyB,CAAA;AAEhC;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAiC;CACrE,MAAM,cAAA,GAAaC,MAAAA,WAAAA,CAAW,iBAAiB;CAE/C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAWD,cAAAA,GACT,aACI,qBACA,qFACJ,SACF;CACD,CAAA;AAEL;AAEA,SAAS,OAAO"}

package/dist/Metadata-DlVgmRTA.js

@@ -0,0 +1,27 @@
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/ds/components/Metadata/metadata.tsx
+var SingleLineContext = createContext(false);
+function Metadata({ singleLine = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(SingleLineContext.Provider, {
+		value: singleLine,
+		children: /* @__PURE__ */ jsx("span", {
+			...props,
+			"data-slot": "metadata",
+			className: cn(singleLine ? "flex max-w-full min-w-0 items-center gap-x-2 overflow-hidden" : "inline-flex max-w-full min-w-0 flex-wrap items-center gap-x-2 gap-y-1", className)
+		})
+	});
+}
+function MetadataItem({ className, ...props }) {
+	const singleLine = useContext(SingleLineContext);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-slot": "metadata-item",
+		className: cn(singleLine ? "min-w-0 truncate" : "inline-flex max-w-full min-w-0 items-center gap-1 wrap-anywhere whitespace-normal", className)
+	});
+}
+Metadata.Item = MetadataItem;
+export { Metadata as t };
+
+//# sourceMappingURL=Metadata-DlVgmRTA.js.map

package/dist/Metadata-DlVgmRTA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Metadata-DlVgmRTA.js","names":[],"sources":["../src/ds/components/Metadata/metadata.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\nconst SingleLineContext = createContext(false);\n\nexport type MetadataProps = ComponentProps<'span'> & {\n  singleLine?: boolean;\n};\n\nexport function Metadata({ singleLine = false, className, ...props }: MetadataProps) {\n  return (\n    <SingleLineContext.Provider value={singleLine}>\n      <span\n        {...props}\n        data-slot=\"metadata\"\n        className={cn(\n          singleLine\n            ? 'flex max-w-full min-w-0 items-center gap-x-2 overflow-hidden'\n            : 'inline-flex max-w-full min-w-0 flex-wrap items-center gap-x-2 gap-y-1',\n          className,\n        )}\n      />\n    </SingleLineContext.Provider>\n  );\n}\n\nfunction MetadataItem({ className, ...props }: ComponentProps<'span'>) {\n  const singleLine = useContext(SingleLineContext);\n\n  return (\n    <span\n      {...props}\n      data-slot=\"metadata-item\"\n      className={cn(\n        singleLine\n          ? 'min-w-0 truncate'\n          : 'inline-flex max-w-full min-w-0 items-center gap-1 wrap-anywhere whitespace-normal',\n        className,\n      )}\n    />\n  );\n}\n\nMetadata.Item = MetadataItem;\n"],"mappings":";;;;AAIA,IAAM,oBAAoB,cAAc,KAAK;AAM7C,SAAgB,SAAS,EAAE,aAAa,OAAO,WAAW,GAAG,SAAwB;CACnF,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EACjC,UAAA,oBAAC,QAAD;GACE,GAAI;GACJ,aAAU;GACV,WAAW,GACT,aACI,iEACA,yEACJ,SACF;EACD,CAAA;CACyB,CAAA;AAEhC;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAiC;CACrE,MAAM,aAAa,WAAW,iBAAiB;CAE/C,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GACT,aACI,qBACA,qFACJ,SACF;CACD,CAAA;AAEL;AAEA,SAAS,OAAO"}

package/dist/MetricsCard-CSJ4TsNq.cjs

@@ -0,0 +1,229 @@
+const require_utils = require("./utils-uDc1ofX1.cjs");
+const require_Button = require("./Button-BfICfyxD.cjs");
+const require_Txt = require("./Txt-_00wWxTd.cjs");
+const require_components_Skeleton = require("./components/Skeleton.cjs.js");
+const require_spinner = require("./spinner-oS6q4pwx.cjs");
+const require_Card = require("./Card-C9oCXvxU.cjs");
+const require_dropdown_menu = require("./dropdown-menu-D3D8USIY.cjs");
+const require_MetricsKpiCard = require("./MetricsKpiCard-C_9GvRAp.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+// src/ds/components/MetricsCard/metrics-card-actions.tsx
+/** Container for icon buttons / small actions in the top bar of a MetricsCard,
+*  placed between the title and `Total` (which always renders last). Small (28px) buttons sit
+*  centered on the 20px title line without making the top bar taller. */
+function MetricsCardActions({ children, reveal = "always", className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("-my-1 flex shrink-0 items-center gap-1 self-start", reveal === "hover" && "opacity-0 transition-opacity duration-150 group-hover/metrics-card:opacity-100 focus-within:opacity-100 has-data-popup-open:opacity-100", className),
+		children
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-content.tsx
+/**
+* Scrolls sideways only (wide tables). Vertical overflow is hidden: a chart filling a card with a
+* fractional height rounds 1px past it, which otherwise turns the content into a scroll box.
+* Tables inside a card drop the last row's border: the card edge already closes them.
+*/
+function MetricsCardContent({ children, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("overflow-x-auto overflow-y-hidden [&_tbody>tr:last-child]:border-b-0", className),
+		children
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-drag-handle.tsx
+/** The grip a card is dragged by, left of its title. Its negative margin keeps the top bar's height. */
+function MetricsCardDragHandle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		variant: "ghost",
+		size: "icon-sm",
+		className: require_utils.cn("-my-1 shrink-0 cursor-grab active:cursor-grabbing", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GripVerticalIcon, {})
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-error.tsx
+function MetricsCardError({ message = "Failed to load data", className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("flex flex-col items-center justify-center gap-3", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+			variant: "caption",
+			className: "text-destructive-foreground",
+			children: message
+		})
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-headline.tsx
+/**
+* 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, at the value's own trimmed height.
+*/
+function MetricsCardHeadline({ label, value, change, isLoading = false, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.cn("grid gap-1.5", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+			className: "text-body-sm text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex items-baseline gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				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 [text-box:trim-both_cap_alphabetic]",
+				children: [change, " vs previous"]
+			})]
+		})]
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-loading.tsx
+function MetricsCardLoading({ className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("flex items-center justify-center", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_spinner.Spinner, {
+			size: "md",
+			variant: "pulse",
+			className: "text-placeholder"
+		})
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-no-data.tsx
+function MetricsCardNoData({ message = "No data yet", className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("flex h-full items-center justify-center", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+			tone: "faint",
+			children: message
+		})
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-root.tsx
+function MetricsCardRoot({ children, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.Card, {
+		className: require_utils.cn("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", className),
+		children
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-title.tsx
+function MetricsCardTitle({ children, className, as: Tag = "h3" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		className: require_utils.cn("text-body font-medium text-foreground", className),
+		children
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-title-menu.tsx
+/**
+* A card title that switches the card's view, as on Vercel's usage cards: the title is the
+* trigger, with a chevron. The hover fill bleeds past the text so the title stays aligned.
+* Wrapped, so the top bar stretches the wrapper rather than the button, and the menu's open-state
+* nodes next to the trigger don't become the top bar's first child.
+*/
+function MetricsCardTitleMenu({ title, value, onValueChange, options, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex min-w-0",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu.Trigger, {
+			render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: require_utils.cn("-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", className)
+			}),
+			children: [title, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: "size-3.5 text-muted-foreground" })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.Content, {
+			align: "start",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.RadioOptions, {
+				options,
+				value,
+				onValueChange,
+				closeOnSelect: true
+			})
+		})] })
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-toolbar.tsx
+/**
+* One row under the top bar for a card's controls: a legend, list column headers.
+* The first child sits on the left, the last on the right; either side may be omitted. When
+* both don't fit (a narrow card), the right side wraps to its own line, still on the right. At least 24px
+* tall, so toolbars line up across cards in the same row.
+*/
+function MetricsCardToolbar({ children, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("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", className),
+		children
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-top-bar.tsx
+function MetricsCardTopBar({ children, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("flex items-start gap-4 [&>:first-child]:min-w-0 [&>:first-child]:flex-1", className),
+		children
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-total.tsx
+/**
+* A card's total, right of the title in the same type (14px, medium). Always the top
+* bar's last item. A skeleton while loading, in the value's own line box. A card charting a
+* few series of different things (resources, threads) can give one total each, each after a
+* marker in its series' color, like the legend.
+*/
+function MetricsCardTotal({ value, isLoading = false, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_utils.cn("order-last shrink-0 text-body font-medium text-foreground tabular-nums", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TotalValue, {
+			value,
+			isLoading
+		})
+	});
+}
+function TotalValue({ value, isLoading }) {
+	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, {
+		line: "text-body",
+		className: "h-4 w-14"
+	});
+	if (typeof value === "string") return value;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "inline-flex items-center gap-3",
+		children: value.map((part) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "inline-flex items-center gap-1.5",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": true,
+					className: "size-2 shrink-0 rounded-[2px]",
+					style: { backgroundColor: part.color }
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "sr-only",
+					children: [part.label, " "]
+				}),
+				part.value
+			]
+		}, part.label))
+	});
+}
+// src/ds/components/MetricsCard/metrics-card.tsx
+var MetricsCard = Object.assign(MetricsCardRoot, {
+	Root: MetricsCardRoot,
+	Kpi: require_MetricsKpiCard.MetricsKpiCard,
+	TopBar: MetricsCardTopBar,
+	Toolbar: MetricsCardToolbar,
+	Actions: MetricsCardActions,
+	DragHandle: MetricsCardDragHandle,
+	Title: MetricsCardTitle,
+	TitleMenu: MetricsCardTitleMenu,
+	Total: MetricsCardTotal,
+	Headline: MetricsCardHeadline,
+	Loading: MetricsCardLoading,
+	Error: MetricsCardError,
+	Content: MetricsCardContent,
+	NoData: MetricsCardNoData
+});
+Object.defineProperty(exports, "MetricsCard", {
+	enumerable: true,
+	get: function() {
+		return MetricsCard;
+	}
+});
+
+//# sourceMappingURL=MetricsCard-CSJ4TsNq.cjs.map

package/dist/MetricsCard-CSJ4TsNq.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsCard-CSJ4TsNq.cjs","names":["cn","cn","Button","cn","GripVerticalIcon","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-drag-handle.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 has-data-popup-open: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 { GripVerticalIcon } from 'lucide-react';\nimport type { DragEventHandler } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\n/** What a host's layout hands a card so it can be dragged, e.g. to rearrange a dashboard. */\nexport type MetricsCardDragHandleProps = {\n  /** What dragging does, e.g. \"Move widget\". */\n  'aria-label': string;\n  draggable?: boolean;\n  onDragStart?: DragEventHandler<HTMLElement>;\n  onDragEnd?: DragEventHandler<HTMLElement>;\n  className?: string;\n};\n\n/** The grip a card is dragged by, left of its title. Its negative margin keeps the top bar's height. */\nexport function MetricsCardDragHandle({ className, ...props }: MetricsCardDragHandleProps) {\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn('-my-1 shrink-0 cursor-grab active:cursor-grabbing', className)}\n      {...props}\n    >\n      <GripVerticalIcon />\n    </Button>\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 { MetricsCardDragHandle } from './metrics-card-drag-handle';\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  DragHandle: MetricsCardDragHandle,\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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"}