@mastra/playground-ui 52.0.1-alpha.0 → 53.0.0-alpha.2

package/dist/{scroll-area-DVSQTnjk.js.map → scroll-area-BiHnOfzg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"scroll-area-DVSQTnjk.js","sources":["../src/ds/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'vertical' | 'horizontal' | 'both';\ntype ScrollButtonDirection = 'left' | 'right';\n\nconst DEFAULT_SCROLL_BUTTON_SPEED = 100;\nconst DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;\nconst MIN_SCROLL_BUTTON_SPEED = 1;\nconst MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;\n\nexport type MaskSides = {\n  top?: boolean;\n  bottom?: boolean;\n  left?: boolean;\n  right?: boolean;\n  /** Shorthand: sets both `left` and `right`. Per-side keys override. */\n  x?: boolean;\n  /** Shorthand: sets both `top` and `bottom`. Per-side keys override. */\n  y?: boolean;\n};\n\n/**\n * - `true` / omitted: fade the edges that match `orientation`.\n * - `false`: no fade.\n * - object: per-side override on top of the orientation default.\n */\nexport type ScrollAreaMask = boolean | MaskSides;\n\nexport type ScrollAreaScrollButtons =\n  | boolean\n  | {\n      /** Pixels to scroll per repeated interval. */\n      scrollSpeed?: number;\n      /** Milliseconds between repeated scroll steps while the button is held. */\n      scrollIntervalTime?: number;\n      leftLabel?: string;\n      rightLabel?: string;\n    };\n\nexport type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {\n  viewPortClassName?: string;\n  maxHeight?: string;\n  autoScroll?: boolean;\n  orientation?: Orientation;\n  /** Show left/right controls for horizontal overflow. Only applies to `horizontal` and `both` orientations. */\n  scrollButtons?: ScrollAreaScrollButtons;\n  /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */\n  mask?: ScrollAreaMask;\n  /** @deprecated Use `mask` instead. Retained for backward compatibility. */\n  showMask?: boolean;\n  /**\n   * Reveal the overlay scrollbar when the pointer hovers the area. When `false`,\n   * the scrollbar only appears while actively scrolling. Defaults to `true`.\n   */\n  revealScrollbarOnHover?: boolean;\n  /**\n   * Ref to the scrolling viewport element. Use this as the scroll element for a\n   * virtualizer (`getScrollElement: () => viewportRef.current`) so the list can\n   * virtualize while still using the ScrollArea's overlay scrollbar + masks.\n   */\n  viewportRef?: React.Ref<HTMLDivElement>;\n};\n\ntype ResolvedMask = { top: boolean; bottom: boolean; left: boolean; right: boolean };\n\nfunction resolveMask(mask: ScrollAreaMask | undefined, orientation: Orientation): ResolvedMask {\n  if (mask === false) return { top: false, bottom: false, left: false, right: false };\n\n  const vertical = orientation === 'vertical' || orientation === 'both';\n  const horizontal = orientation === 'horizontal' || orientation === 'both';\n  const sides: ResolvedMask = { top: vertical, bottom: vertical, left: horizontal, right: horizontal };\n\n  if (mask === true || mask === undefined) return sides;\n\n  if (mask.y !== undefined) {\n    sides.top = mask.y;\n    sides.bottom = mask.y;\n  }\n  if (mask.x !== undefined) {\n    sides.left = mask.x;\n    sides.right = mask.x;\n  }\n  if (mask.top !== undefined) sides.top = mask.top;\n  if (mask.bottom !== undefined) sides.bottom = mask.bottom;\n  if (mask.left !== undefined) sides.left = mask.left;\n  if (mask.right !== undefined) sides.right = mask.right;\n\n  return sides;\n}\n\nfunction maskClasses(sides: ResolvedMask) {\n  return cn(\n    sides.top && 'data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)]',\n    sides.bottom && 'data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)]',\n    sides.left && 'data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)]',\n    sides.right && 'data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]',\n  );\n}\n\nfunction clampScrollButtonNumber(value: number | undefined, fallback: number, min: number) {\n  const resolvedValue = value ?? fallback;\n  return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);\n}\n\ntype ScrollButtonProps = {\n  direction: ScrollButtonDirection;\n  label: string;\n  onStartScrolling: (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => void;\n  onStopScrolling: () => void;\n  onKeyboardScroll: (direction: ScrollButtonDirection) => void;\n};\n\nconst ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }: ScrollButtonProps) => {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      className={cn(\n        'duration-normal absolute inset-y-1 z-10 hidden w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-neutral3 transition-colors ease-out-custom hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10',\n        'outline-hidden focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55 focus-visible:outline-solid',\n        direction === 'left'\n          ? 'left-1 group-data-[overflow-x-start]/scroll-area:flex'\n          : 'right-1 group-data-[overflow-x-end]/scroll-area:flex',\n      )}\n      onPointerDown={event => onStartScrolling(direction, event)}\n      onPointerUp={onStopScrolling}\n      onPointerLeave={onStopScrolling}\n      onPointerCancel={onStopScrolling}\n      onBlur={onStopScrolling}\n      onClick={event => {\n        if (event.detail === 0) onKeyboardScroll(direction);\n      }}\n    >\n      <Icon aria-hidden=\"true\" className=\"size-4\" />\n    </button>\n  );\n};\n\ntype ScrollButtonsProps = {\n  areaRef: React.RefObject<HTMLDivElement | null>;\n  scrollButtons: Exclude<ScrollAreaScrollButtons, false | undefined>;\n};\n\nconst ScrollButtons = ({ areaRef, scrollButtons }: ScrollButtonsProps) => {\n  const scrollButtonInterval = React.useRef<ReturnType<typeof setInterval> | null>(null);\n  const scrollButtonOptions = typeof scrollButtons === 'object' ? scrollButtons : undefined;\n  const scrollButtonSpeed = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollSpeed,\n    DEFAULT_SCROLL_BUTTON_SPEED,\n    MIN_SCROLL_BUTTON_SPEED,\n  );\n  const scrollButtonIntervalTime = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollIntervalTime,\n    DEFAULT_SCROLL_BUTTON_INTERVAL_TIME,\n    MIN_SCROLL_BUTTON_INTERVAL_TIME,\n  );\n  const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? 'Scroll left';\n  const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? 'Scroll right';\n\n  const stopScrollButtonScrolling = React.useCallback(() => {\n    if (!scrollButtonInterval.current) return;\n    clearInterval(scrollButtonInterval.current);\n    scrollButtonInterval.current = null;\n  }, []);\n\n  const scrollByDirection = React.useCallback(\n    (direction: ScrollButtonDirection, multiplier = 1) => {\n      const viewport = areaRef.current;\n      if (!viewport) return;\n\n      viewport.scrollBy({\n        left: direction === 'right' ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,\n        behavior: 'smooth',\n      });\n    },\n    [areaRef, scrollButtonSpeed],\n  );\n\n  const startScrollButtonScrolling = React.useCallback(\n    (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => {\n      event?.preventDefault();\n      event?.stopPropagation();\n      event?.currentTarget.setPointerCapture?.(event.pointerId);\n\n      stopScrollButtonScrolling();\n      scrollByDirection(direction, 2);\n\n      scrollButtonInterval.current = setInterval(() => {\n        scrollByDirection(direction);\n      }, scrollButtonIntervalTime);\n    },\n    [scrollButtonIntervalTime, scrollByDirection, stopScrollButtonScrolling],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      stopScrollButtonScrolling();\n    };\n  }, [stopScrollButtonScrolling]);\n\n  return (\n    <>\n      <ScrollButton\n        direction=\"left\"\n        label={leftScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n      <ScrollButton\n        direction=\"right\"\n        label={rightScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n    </>\n  );\n};\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      className,\n      children,\n      viewPortClassName,\n      maxHeight,\n      autoScroll = false,\n      orientation = 'vertical',\n      scrollButtons,\n      mask,\n      showMask,\n      revealScrollbarOnHover = true,\n      viewportRef,\n      ...props\n    },\n    ref,\n  ) => {\n    const areaRef = React.useRef<HTMLDivElement>(null);\n    useAutoscroll(areaRef, { enabled: autoScroll });\n\n    // Keep the internal autoscroll ref while also exposing the viewport to callers\n    // (e.g. a virtualizer's scroll element).\n    const setViewportRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        areaRef.current = node;\n        if (typeof viewportRef === 'function') viewportRef(node);\n        else if (viewportRef) (viewportRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      },\n      [viewportRef],\n    );\n\n    const effectiveMask: ScrollAreaMask | undefined = mask !== undefined ? mask : showMask;\n    const sides = resolveMask(effectiveMask, orientation);\n\n    const viewportStyle: React.CSSProperties = {};\n    if (maxHeight) viewportStyle.maxHeight = maxHeight;\n    if (orientation === 'vertical') {\n      viewportStyle.overflowX = 'hidden';\n      viewportStyle.overflowY = 'scroll';\n    } else if (orientation === 'horizontal') {\n      viewportStyle.overflowX = 'scroll';\n      viewportStyle.overflowY = 'hidden';\n    }\n\n    // Base UI's ScrollAreaContent forces `min-width: fit-content` so the\n    // content can grow wider than the viewport (required for horizontal scroll\n    // measurement). For vertical-only scroll we override it so children shrink\n    // to the viewport width instead of forcing horizontal scroll.\n    const contentStyle: React.CSSProperties | undefined =\n      orientation === 'vertical'\n        ? { minWidth: '0px' }\n        : orientation === 'horizontal'\n          ? { minHeight: '0px' }\n          : undefined;\n\n    return (\n      <ScrollAreaPrimitive.Root\n        ref={ref}\n        className={cn('group/scroll-area relative overflow-hidden', className)}\n        {...props}\n      >\n        <ScrollAreaPrimitive.Viewport\n          ref={setViewportRef}\n          className={cn('size-full rounded-[inherit]', maskClasses(sides), viewPortClassName)}\n          style={viewportStyle}\n        >\n          <ScrollAreaPrimitive.Content style={contentStyle}>{children}</ScrollAreaPrimitive.Content>\n        </ScrollAreaPrimitive.Viewport>\n        {scrollButtons && orientation !== 'vertical' && (\n          <ScrollButtons areaRef={areaRef} scrollButtons={scrollButtons} />\n        )}\n        {(orientation === 'vertical' || orientation === 'both') && (\n          <ScrollBar orientation=\"vertical\" revealOnHover={revealScrollbarOnHover} />\n        )}\n        {(orientation === 'horizontal' || orientation === 'both') && (\n          <ScrollBar orientation=\"horizontal\" revealOnHover={revealScrollbarOnHover} />\n        )}\n        {orientation === 'both' && <ScrollAreaPrimitive.Corner />}\n      </ScrollAreaPrimitive.Root>\n    );\n  },\n);\nScrollArea.displayName = 'ScrollArea';\n\nconst ScrollBar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar> & { revealOnHover?: boolean }\n>(({ className, orientation = 'vertical', revealOnHover = true, ...props }, ref) => (\n  <ScrollAreaPrimitive.Scrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'duration-normal flex touch-none transition-opacity ease-out-custom select-none',\n      'opacity-0 data-[scrolling]:opacity-100 data-[scrolling]:duration-0',\n      revealOnHover && 'data-[hovering]:opacity-100',\n      orientation === 'vertical' && 'h-full w-1.5 p-px',\n      orientation === 'horizontal' && 'h-1.5 w-full flex-col p-px',\n      className,\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Thumb className=\"duration-normal bg-neutral4/30 hover:bg-neutral4/60 relative flex-1 rounded-full transition-colors\" />\n  </ScrollAreaPrimitive.Scrollbar>\n));\nScrollBar.displayName = 'ScrollBar';\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollAreaPrimitive"],"mappings":"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"}
+{"version":3,"file":"scroll-area-BiHnOfzg.js","sources":["../src/ds/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'vertical' | 'horizontal' | 'both';\ntype ScrollButtonDirection = 'left' | 'right';\n\nconst DEFAULT_SCROLL_BUTTON_SPEED = 100;\nconst DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;\nconst MIN_SCROLL_BUTTON_SPEED = 1;\nconst MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;\n\nexport type MaskSides = {\n  top?: boolean;\n  bottom?: boolean;\n  left?: boolean;\n  right?: boolean;\n  /** Shorthand: sets both `left` and `right`. Per-side keys override. */\n  x?: boolean;\n  /** Shorthand: sets both `top` and `bottom`. Per-side keys override. */\n  y?: boolean;\n};\n\n/**\n * - `true` / omitted: fade the edges that match `orientation`.\n * - `false`: no fade.\n * - object: per-side override on top of the orientation default.\n */\nexport type ScrollAreaMask = boolean | MaskSides;\n\nexport type ScrollAreaScrollButtons =\n  | boolean\n  | {\n      /** Pixels to scroll per repeated interval. */\n      scrollSpeed?: number;\n      /** Milliseconds between repeated scroll steps while the button is held. */\n      scrollIntervalTime?: number;\n      leftLabel?: string;\n      rightLabel?: string;\n    };\n\nexport type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {\n  viewPortClassName?: string;\n  maxHeight?: string;\n  autoScroll?: boolean;\n  orientation?: Orientation;\n  /** Show left/right controls for horizontal overflow. Only applies to `horizontal` and `both` orientations. */\n  scrollButtons?: ScrollAreaScrollButtons;\n  /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */\n  mask?: ScrollAreaMask;\n  /** @deprecated Use `mask` instead. Retained for backward compatibility. */\n  showMask?: boolean;\n  /**\n   * Reveal the overlay scrollbar when the pointer hovers the area. When `false`,\n   * the scrollbar only appears while actively scrolling. Defaults to `true`.\n   */\n  revealScrollbarOnHover?: boolean;\n  /**\n   * Ref to the scrolling viewport element. Use this as the scroll element for a\n   * virtualizer (`getScrollElement: () => viewportRef.current`) so the list can\n   * virtualize while still using the ScrollArea's overlay scrollbar + masks.\n   */\n  viewportRef?: React.Ref<HTMLDivElement>;\n};\n\ntype ResolvedMask = { top: boolean; bottom: boolean; left: boolean; right: boolean };\n\nfunction resolveMask(mask: ScrollAreaMask | undefined, orientation: Orientation): ResolvedMask {\n  if (mask === false) return { top: false, bottom: false, left: false, right: false };\n\n  const vertical = orientation === 'vertical' || orientation === 'both';\n  const horizontal = orientation === 'horizontal' || orientation === 'both';\n  const sides: ResolvedMask = { top: vertical, bottom: vertical, left: horizontal, right: horizontal };\n\n  if (mask === true || mask === undefined) return sides;\n\n  if (mask.y !== undefined) {\n    sides.top = mask.y;\n    sides.bottom = mask.y;\n  }\n  if (mask.x !== undefined) {\n    sides.left = mask.x;\n    sides.right = mask.x;\n  }\n  if (mask.top !== undefined) sides.top = mask.top;\n  if (mask.bottom !== undefined) sides.bottom = mask.bottom;\n  if (mask.left !== undefined) sides.left = mask.left;\n  if (mask.right !== undefined) sides.right = mask.right;\n\n  return sides;\n}\n\nfunction maskClasses(sides: ResolvedMask) {\n  return cn(\n    sides.top && 'data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)]',\n    sides.bottom && 'data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)]',\n    sides.left && 'data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)]',\n    sides.right && 'data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]',\n  );\n}\n\nfunction clampScrollButtonNumber(value: number | undefined, fallback: number, min: number) {\n  const resolvedValue = value ?? fallback;\n  return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);\n}\n\ntype ScrollButtonProps = {\n  direction: ScrollButtonDirection;\n  label: string;\n  onStartScrolling: (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => void;\n  onStopScrolling: () => void;\n  onKeyboardScroll: (direction: ScrollButtonDirection) => void;\n};\n\nconst ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }: ScrollButtonProps) => {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      className={cn(\n        'absolute inset-y-1 z-10 hidden w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-neutral3 transition-colors duration-normal ease-out-custom hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10',\n        'outline-hidden focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55 focus-visible:outline-solid',\n        direction === 'left'\n          ? 'left-1 group-data-[overflow-x-start]/scroll-area:flex'\n          : 'right-1 group-data-[overflow-x-end]/scroll-area:flex',\n      )}\n      onPointerDown={event => onStartScrolling(direction, event)}\n      onPointerUp={onStopScrolling}\n      onPointerLeave={onStopScrolling}\n      onPointerCancel={onStopScrolling}\n      onBlur={onStopScrolling}\n      onClick={event => {\n        if (event.detail === 0) onKeyboardScroll(direction);\n      }}\n    >\n      <Icon aria-hidden=\"true\" className=\"size-4\" />\n    </button>\n  );\n};\n\ntype ScrollButtonsProps = {\n  areaRef: React.RefObject<HTMLDivElement | null>;\n  scrollButtons: Exclude<ScrollAreaScrollButtons, false | undefined>;\n};\n\nconst ScrollButtons = ({ areaRef, scrollButtons }: ScrollButtonsProps) => {\n  const scrollButtonInterval = React.useRef<ReturnType<typeof setInterval> | null>(null);\n  const scrollButtonOptions = typeof scrollButtons === 'object' ? scrollButtons : undefined;\n  const scrollButtonSpeed = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollSpeed,\n    DEFAULT_SCROLL_BUTTON_SPEED,\n    MIN_SCROLL_BUTTON_SPEED,\n  );\n  const scrollButtonIntervalTime = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollIntervalTime,\n    DEFAULT_SCROLL_BUTTON_INTERVAL_TIME,\n    MIN_SCROLL_BUTTON_INTERVAL_TIME,\n  );\n  const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? 'Scroll left';\n  const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? 'Scroll right';\n\n  const stopScrollButtonScrolling = React.useCallback(() => {\n    if (!scrollButtonInterval.current) return;\n    clearInterval(scrollButtonInterval.current);\n    scrollButtonInterval.current = null;\n  }, []);\n\n  const scrollByDirection = React.useCallback(\n    (direction: ScrollButtonDirection, multiplier = 1) => {\n      const viewport = areaRef.current;\n      if (!viewport) return;\n\n      viewport.scrollBy({\n        left: direction === 'right' ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,\n        behavior: 'smooth',\n      });\n    },\n    [areaRef, scrollButtonSpeed],\n  );\n\n  const startScrollButtonScrolling = React.useCallback(\n    (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => {\n      event?.preventDefault();\n      event?.stopPropagation();\n      event?.currentTarget.setPointerCapture?.(event.pointerId);\n\n      stopScrollButtonScrolling();\n      scrollByDirection(direction, 2);\n\n      scrollButtonInterval.current = setInterval(() => {\n        scrollByDirection(direction);\n      }, scrollButtonIntervalTime);\n    },\n    [scrollButtonIntervalTime, scrollByDirection, stopScrollButtonScrolling],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      stopScrollButtonScrolling();\n    };\n  }, [stopScrollButtonScrolling]);\n\n  return (\n    <>\n      <ScrollButton\n        direction=\"left\"\n        label={leftScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n      <ScrollButton\n        direction=\"right\"\n        label={rightScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n    </>\n  );\n};\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      className,\n      children,\n      viewPortClassName,\n      maxHeight,\n      autoScroll = false,\n      orientation = 'vertical',\n      scrollButtons,\n      mask,\n      showMask,\n      revealScrollbarOnHover = true,\n      viewportRef,\n      ...props\n    },\n    ref,\n  ) => {\n    const areaRef = React.useRef<HTMLDivElement>(null);\n    useAutoscroll(areaRef, { enabled: autoScroll });\n\n    // Keep the internal autoscroll ref while also exposing the viewport to callers\n    // (e.g. a virtualizer's scroll element).\n    const setViewportRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        areaRef.current = node;\n        if (typeof viewportRef === 'function') viewportRef(node);\n        else if (viewportRef) (viewportRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      },\n      [viewportRef],\n    );\n\n    const effectiveMask: ScrollAreaMask | undefined = mask !== undefined ? mask : showMask;\n    const sides = resolveMask(effectiveMask, orientation);\n\n    const viewportStyle: React.CSSProperties = {};\n    if (maxHeight) viewportStyle.maxHeight = maxHeight;\n    if (orientation === 'vertical') {\n      viewportStyle.overflowX = 'hidden';\n      viewportStyle.overflowY = 'scroll';\n    } else if (orientation === 'horizontal') {\n      viewportStyle.overflowX = 'scroll';\n      viewportStyle.overflowY = 'hidden';\n    }\n\n    // Base UI's ScrollAreaContent forces `min-width: fit-content` so the\n    // content can grow wider than the viewport (required for horizontal scroll\n    // measurement). For vertical-only scroll we override it so children shrink\n    // to the viewport width instead of forcing horizontal scroll.\n    const contentStyle: React.CSSProperties | undefined =\n      orientation === 'vertical'\n        ? { minWidth: '0px' }\n        : orientation === 'horizontal'\n          ? { minHeight: '0px' }\n          : undefined;\n\n    return (\n      <ScrollAreaPrimitive.Root\n        ref={ref}\n        className={cn('group/scroll-area relative overflow-hidden', className)}\n        {...props}\n      >\n        <ScrollAreaPrimitive.Viewport\n          ref={setViewportRef}\n          className={cn('size-full', maskClasses(sides), viewPortClassName)}\n          style={viewportStyle}\n        >\n          <ScrollAreaPrimitive.Content style={contentStyle}>{children}</ScrollAreaPrimitive.Content>\n        </ScrollAreaPrimitive.Viewport>\n        {scrollButtons && orientation !== 'vertical' && (\n          <ScrollButtons areaRef={areaRef} scrollButtons={scrollButtons} />\n        )}\n        {(orientation === 'vertical' || orientation === 'both') && (\n          <ScrollBar orientation=\"vertical\" revealOnHover={revealScrollbarOnHover} />\n        )}\n        {(orientation === 'horizontal' || orientation === 'both') && (\n          <ScrollBar orientation=\"horizontal\" revealOnHover={revealScrollbarOnHover} />\n        )}\n        {orientation === 'both' && <ScrollAreaPrimitive.Corner />}\n      </ScrollAreaPrimitive.Root>\n    );\n  },\n);\nScrollArea.displayName = 'ScrollArea';\n\nconst ScrollBar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar> & { revealOnHover?: boolean }\n>(({ className, orientation = 'vertical', revealOnHover = true, ...props }, ref) => (\n  <ScrollAreaPrimitive.Scrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'flex touch-none transition-opacity duration-normal ease-out-custom select-none',\n      'opacity-0 data-[scrolling]:opacity-100 data-[scrolling]:duration-0',\n      revealOnHover && 'data-[hovering]:opacity-100',\n      orientation === 'vertical' && 'h-full w-1.5 p-px',\n      orientation === 'horizontal' && 'h-1.5 w-full flex-col p-px',\n      className,\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Thumb className=\"bg-neutral4/30 duration-normal hover:bg-neutral4/60 relative flex-1 rounded-full transition-colors\" />\n  </ScrollAreaPrimitive.Scrollbar>\n));\nScrollBar.displayName = 'ScrollBar';\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollAreaPrimitive"],"mappings":";;;;;;;AAUA,MAAM,2BAAA,GAA8B,GAAA;AACpC,MAAM,mCAAA,GAAsC,EAAA;AAC5C,MAAM,uBAAA,GAA0B,CAAA;AAChC,MAAM,+BAAA,GAAkC,EAAA;AAyDxC,SAAS,WAAA,CAAY,MAAkC,WAAA,EAAwC;AAC7F,EAAA,IAAI,IAAA,KAAS,KAAA,EAAO,OAAO,EAAE,GAAA,EAAK,KAAA,EAAO,MAAA,EAAQ,KAAA,EAAO,IAAA,EAAM,KAAA,EAAO,KAAA,EAAO,KAAA,EAAM;AAElF,EAAA,MAAM,QAAA,GAAW,WAAA,KAAgB,UAAA,IAAc,WAAA,KAAgB,MAAA;AAC/D,EAAA,MAAM,UAAA,GAAa,WAAA,KAAgB,YAAA,IAAgB,WAAA,KAAgB,MAAA;AACnE,EAAA,MAAM,KAAA,GAAsB,EAAE,GAAA,EAAK,QAAA,EAAU,QAAQ,QAAA,EAAU,IAAA,EAAM,UAAA,EAAY,KAAA,EAAO,UAAA,EAAW;AAEnG,EAAA,IAAI,IAAA,KAAS,IAAA,IAAQ,IAAA,KAAS,MAAA,EAAW,OAAO,KAAA;AAEhD,EAAA,IAAI,IAAA,CAAK,MAAM,MAAA,EAAW;AACxB,IAAA,KAAA,CAAM,MAAM,IAAA,CAAK,CAAA;AACjB,IAAA,KAAA,CAAM,SAAS,IAAA,CAAK,CAAA;AAAA,EACtB;AACA,EAAA,IAAI,IAAA,CAAK,MAAM,MAAA,EAAW;AACxB,IAAA,KAAA,CAAM,OAAO,IAAA,CAAK,CAAA;AAClB,IAAA,KAAA,CAAM,QAAQ,IAAA,CAAK,CAAA;AAAA,EACrB;AACA,EAAA,IAAI,IAAA,CAAK,GAAA,KAAQ,MAAA,EAAW,KAAA,CAAM,MAAM,IAAA,CAAK,GAAA;AAC7C,EAAA,IAAI,IAAA,CAAK,MAAA,KAAW,MAAA,EAAW,KAAA,CAAM,SAAS,IAAA,CAAK,MAAA;AACnD,EAAA,IAAI,IAAA,CAAK,IAAA,KAAS,MAAA,EAAW,KAAA,CAAM,OAAO,IAAA,CAAK,IAAA;AAC/C,EAAA,IAAI,IAAA,CAAK,KAAA,KAAU,MAAA,EAAW,KAAA,CAAM,QAAQ,IAAA,CAAK,KAAA;AAEjD,EAAA,OAAO,KAAA;AACT;AAEA,SAAS,YAAY,KAAA,EAAqB;AACxC,EAAA,OAAO,EAAA;AAAA,IACL,MAAM,GAAA,IAAO,uDAAA;AAAA,IACb,MAAM,MAAA,IAAU,qDAAA;AAAA,IAChB,MAAM,IAAA,IAAQ,uDAAA;AAAA,IACd,MAAM,KAAA,IAAS;AAAA,GACjB;AACF;AAEA,SAAS,uBAAA,CAAwB,KAAA,EAA2B,QAAA,EAAkB,GAAA,EAAa;AACzF,EAAA,MAAM,gBAAgB,KAAA,IAAS,QAAA;AAC/B,EAAA,OAAO,MAAA,CAAO,QAAA,CAAS,aAAa,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,aAAa,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,QAAQ,CAAA;AAC/F;AAUA,MAAM,YAAA,GAAe,CAAC,EAAE,SAAA,EAAW,OAAO,gBAAA,EAAkB,eAAA,EAAiB,kBAAiB,KAAyB;AACrH,EAAA,MAAM,IAAA,GAAO,SAAA,KAAc,MAAA,GAAS,eAAA,GAAkB,gBAAA;AAEtD,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAW,EAAA;AAAA,QACT,gPAAA;AAAA,QACA,qIAAA;AAAA,QACA,SAAA,KAAc,SACV,uDAAA,GACA;AAAA,OACN;AAAA,MACA,aAAA,EAAe,CAAA,KAAA,KAAS,gBAAA,CAAiB,SAAA,EAAW,KAAK,CAAA;AAAA,MACzD,WAAA,EAAa,eAAA;AAAA,MACb,cAAA,EAAgB,eAAA;AAAA,MAChB,eAAA,EAAiB,eAAA;AAAA,MACjB,MAAA,EAAQ,eAAA;AAAA,MACR,SAAS,CAAA,KAAA,KAAS;AAChB,QAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,gBAAA,CAAiB,SAAS,CAAA;AAAA,MACpD,CAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAU,QAAA,EAAS;AAAA;AAAA,GAC9C;AAEJ,CAAA;AAOA,MAAM,aAAA,GAAgB,CAAC,EAAE,OAAA,EAAS,eAAc,KAA0B;AACxE,EAAA,MAAM,oBAAA,GAAuB,KAAA,CAAM,MAAA,CAA8C,IAAI,CAAA;AACrF,EAAA,MAAM,mBAAA,GAAsB,OAAO,aAAA,KAAkB,QAAA,GAAW,aAAA,GAAgB,MAAA;AAChF,EAAA,MAAM,iBAAA,GAAoB,uBAAA;AAAA,IACxB,mBAAA,EAAqB,WAAA;AAAA,IACrB,2BAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,wBAAA,GAA2B,uBAAA;AAAA,IAC/B,mBAAA,EAAqB,kBAAA;AAAA,IACrB,mCAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,qBAAA,GAAwB,qBAAqB,SAAA,IAAa,aAAA;AAChE,EAAA,MAAM,sBAAA,GAAyB,qBAAqB,UAAA,IAAc,cAAA;AAElE,EAAA,MAAM,yBAAA,GAA4B,KAAA,CAAM,WAAA,CAAY,MAAM;AACxD,IAAA,IAAI,CAAC,qBAAqB,OAAA,EAAS;AACnC,IAAA,aAAA,CAAc,qBAAqB,OAAO,CAAA;AAC1C,IAAA,oBAAA,CAAqB,OAAA,GAAU,IAAA;AAAA,EACjC,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,oBAAoB,KAAA,CAAM,WAAA;AAAA,IAC9B,CAAC,SAAA,EAAkC,UAAA,GAAa,CAAA,KAAM;AACpD,MAAA,MAAM,WAAW,OAAA,CAAQ,OAAA;AACzB,MAAA,IAAI,CAAC,QAAA,EAAU;AAEf,MAAA,QAAA,CAAS,QAAA,CAAS;AAAA,QAChB,MAAM,SAAA,KAAc,OAAA,GAAU,iBAAA,GAAoB,UAAA,GAAa,CAAC,iBAAA,GAAoB,UAAA;AAAA,QACpF,QAAA,EAAU;AAAA,OACX,CAAA;AAAA,IACH,CAAA;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,GAC7B;AAEA,EAAA,MAAM,6BAA6B,KAAA,CAAM,WAAA;AAAA,IACvC,CAAC,WAAkC,KAAA,KAAkD;AACnF,MAAA,KAAA,EAAO,cAAA,EAAe;AACtB,MAAA,KAAA,EAAO,eAAA,EAAgB;AACvB,MAAA,KAAA,EAAO,aAAA,CAAc,iBAAA,GAAoB,KAAA,CAAM,SAAS,CAAA;AAExD,MAAA,yBAAA,EAA0B;AAC1B,MAAA,iBAAA,CAAkB,WAAW,CAAC,CAAA;AAE9B,MAAA,oBAAA,CAAqB,OAAA,GAAU,YAAY,MAAM;AAC/C,QAAA,iBAAA,CAAkB,SAAS,CAAA;AAAA,MAC7B,GAAG,wBAAwB,CAAA;AAAA,IAC7B,CAAA;AAAA,IACA,CAAC,wBAAA,EAA0B,iBAAA,EAAmB,yBAAyB;AAAA,GACzE;AAEA,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,OAAO,MAAM;AACX,MAAA,yBAAA,EAA0B;AAAA,IAC5B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,yBAAyB,CAAC,CAAA;AAE9B,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,MAAA;AAAA,QACV,KAAA,EAAO,qBAAA;AAAA,QACP,gBAAA,EAAkB,0BAAA;AAAA,QAClB,eAAA,EAAiB,yBAAA;AAAA,QACjB,gBAAA,EAAkB,CAAA,SAAA,KAAa,iBAAA,CAAkB,SAAA,EAAW,CAAC;AAAA;AAAA,KAC/D;AAAA,oBACA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,OAAA;AAAA,QACV,KAAA,EAAO,sBAAA;AAAA,QACP,gBAAA,EAAkB,0BAAA;AAAA,QAClB,eAAA,EAAiB,yBAAA;AAAA,QACjB,gBAAA,EAAkB,CAAA,SAAA,KAAa,iBAAA,CAAkB,SAAA,EAAW,CAAC;AAAA;AAAA;AAC/D,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,MAAM,aAAa,KAAA,CAAM,UAAA;AAAA,EACvB,CACE;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA,GAAa,KAAA;AAAA,IACb,WAAA,GAAc,UAAA;AAAA,IACd,aAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,sBAAA,GAAyB,IAAA;AAAA,IACzB,WAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,OAAA,GAAU,KAAA,CAAM,MAAA,CAAuB,IAAI,CAAA;AACjD,IAAA,aAAA,CAAc,OAAA,EAAS,EAAE,OAAA,EAAS,UAAA,EAAY,CAAA;AAI9C,IAAA,MAAM,iBAAiB,KAAA,CAAM,WAAA;AAAA,MAC3B,CAAC,IAAA,KAAgC;AAC/B,QAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAClB,QAAA,IAAI,OAAO,WAAA,KAAgB,UAAA,EAAY,WAAA,CAAY,IAAI,CAAA;AAAA,aAAA,IAC9C,WAAA,EAAc,WAAA,CAA8D,OAAA,GAAU,IAAA;AAAA,MACjG,CAAA;AAAA,MACA,CAAC,WAAW;AAAA,KACd;AAEA,IAAA,MAAM,aAAA,GAA4C,IAAA,KAAS,MAAA,GAAY,IAAA,GAAO,QAAA;AAC9E,IAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,aAAA,EAAe,WAAW,CAAA;AAEpD,IAAA,MAAM,gBAAqC,EAAC;AAC5C,IAAA,IAAI,SAAA,gBAAyB,SAAA,GAAY,SAAA;AACzC,IAAA,IAAI,gBAAgB,UAAA,EAAY;AAC9B,MAAA,aAAA,CAAc,SAAA,GAAY,QAAA;AAC1B,MAAA,aAAA,CAAc,SAAA,GAAY,QAAA;AAAA,IAC5B,CAAA,MAAA,IAAW,gBAAgB,YAAA,EAAc;AACvC,MAAA,aAAA,CAAc,SAAA,GAAY,QAAA;AAC1B,MAAA,aAAA,CAAc,SAAA,GAAY,QAAA;AAAA,IAC5B;AAMA,IAAA,MAAM,YAAA,GACJ,WAAA,KAAgB,UAAA,GACZ,EAAE,QAAA,EAAU,KAAA,EAAM,GAClB,WAAA,KAAgB,YAAA,GACd,EAAE,SAAA,EAAW,KAAA,EAAM,GACnB,MAAA;AAER,IAAA,uBACE,IAAA;AAAA,MAACA,YAAA,CAAoB,IAAA;AAAA,MAApB;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,4CAAA,EAA8C,SAAS,CAAA;AAAA,QACpE,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAACA,YAAA,CAAoB,QAAA;AAAA,YAApB;AAAA,cACC,GAAA,EAAK,cAAA;AAAA,cACL,WAAW,EAAA,CAAG,WAAA,EAAa,WAAA,CAAY,KAAK,GAAG,iBAAiB,CAAA;AAAA,cAChE,KAAA,EAAO,aAAA;AAAA,cAEP,8BAACA,YAAA,CAAoB,OAAA,EAApB,EAA4B,KAAA,EAAO,cAAe,QAAA,EAAS;AAAA;AAAA,WAC9D;AAAA,UACC,iBAAiB,WAAA,KAAgB,UAAA,oBAChC,GAAA,CAAC,aAAA,EAAA,EAAc,SAAkB,aAAA,EAA8B,CAAA;AAAA,UAAA,CAE/D,WAAA,KAAgB,cAAc,WAAA,KAAgB,MAAA,yBAC7C,SAAA,EAAA,EAAU,WAAA,EAAY,UAAA,EAAW,aAAA,EAAe,sBAAA,EAAwB,CAAA;AAAA,UAAA,CAEzE,WAAA,KAAgB,gBAAgB,WAAA,KAAgB,MAAA,yBAC/C,SAAA,EAAA,EAAU,WAAA,EAAY,YAAA,EAAa,aAAA,EAAe,sBAAA,EAAwB,CAAA;AAAA,UAE5E,WAAA,KAAgB,MAAA,oBAAU,GAAA,CAACA,YAAA,CAAoB,QAApB,EAA2B;AAAA;AAAA;AAAA,KACzD;AAAA,EAEJ;AACF;AACA,UAAA,CAAW,WAAA,GAAc,YAAA;AAEzB,MAAM,SAAA,GAAY,KAAA,CAAM,UAAA,CAGtB,CAAC,EAAE,SAAA,EAAW,WAAA,GAAc,UAAA,EAAY,aAAA,GAAgB,IAAA,EAAM,GAAG,KAAA,IAAS,GAAA,qBAC1E,GAAA;AAAA,EAACA,YAAA,CAAoB,SAAA;AAAA,EAApB;AAAA,IACC,GAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,gFAAA;AAAA,MACA,oEAAA;AAAA,MACA,aAAA,IAAiB,6BAAA;AAAA,MACjB,gBAAgB,UAAA,IAAc,mBAAA;AAAA,MAC9B,gBAAgB,YAAA,IAAgB,4BAAA;AAAA,MAChC;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAACA,YAAA,CAAoB,KAAA,EAApB,EAA0B,WAAU,oGAAA,EAAqG;AAAA;AAC5I,CACD;AACD,SAAA,CAAU,WAAA,GAAc,WAAA;;;;"}

package/dist/src/domains/metrics/components/metrics-utils.d.ts

@@ -5,7 +5,6 @@ export declare const METRICS_DATA_LIST_PROPS: {
     mask: {
         left: false;
     };
-    stickyHeaderBackground: "tinted";
 };
 export declare const CHART_COLORS: {
     readonly green: "#22c55e";

package/dist/src/ds/components/Card/Card.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { LinkComponent } from '../../types/link-component';
 import * as React from 'react';
 declare const cardVariants: (props?: ({
-    appearance?: "surface" | "outlined" | null | undefined;
+    appearance?: "outlined" | "surface" | null | undefined;
     elevation?: "flat" | "raised" | "elevated" | null | undefined;
     interactive?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -10,7 +10,7 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<type
     as?: React.ElementType;
 };
 export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    appearance?: "surface" | "outlined" | null | undefined;
+    appearance?: "outlined" | "surface" | null | undefined;
     elevation?: "flat" | "raised" | "elevated" | null | undefined;
     interactive?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {

package/dist/src/ds/components/DataList/data-list-root.d.ts

@@ -1,13 +1,5 @@
 import { ReactNode, RefObject } from 'react';
 import { ScrollAreaMask, ScrollAreaProps } from '../ScrollArea/scroll-area';
-/**
- * Visual treatment for the whole list.
- *
- * Both are borderless and full-bleed, with a contrasting sticky header band and
- * no row separators. `striped` adds a zebra tint to every other row; `plain`
- * leaves rows transparent so only hover and selection tint them.
- */
-export type DataListVariant = 'striped' | 'plain';
 /**
  * Horizontal sizing of the list grid.
  *
@@ -18,19 +10,20 @@ export type DataListVariant = 'striped' | 'plain';
  *   instead of widening the table.
  */
 export type DataListFit = 'content' | 'container';
-export type DataListStickyHeaderBackground = 'tinted' | 'surface' | 'transparent';
+/**
+ * Surface treatment of the list.
+ *
+ * - `default`: rows sit on a rounded `surface4` panel.
+ * - `light`: no panel behind the rows; rows sit directly on the page.
+ */
+export type DataListVariant = 'default' | 'light';
 export type DataListRootProps = Omit<ScrollAreaProps, 'children' | 'orientation' | 'mask' | 'viewportRef'> & {
     children: ReactNode;
     columns: string;
-    variant?: DataListVariant;
     /** Grid width behavior; defaults to `content` (existing horizontal-scroll sizing). */
     fit?: DataListFit;
-    /**
-     * Shared fill for the sticky top header and sticky row-header column.
-     * `tinted` is the opaque `--surface-header` band, so sticky headers do not
-     * reveal scrolled content beneath them.
-     */
-    stickyHeaderBackground?: DataListStickyHeaderBackground;
+    /** Surface treatment; defaults to `default` (rows on a `surface4` panel). */
+    variant?: DataListVariant;
     /**
      * Edge fades from the underlying ScrollArea. DataList keeps the top fade off
      * by default so it does not fade the sticky top header.
@@ -43,4 +36,4 @@ export type DataListRootProps = Omit<ScrollAreaProps, 'children' | 'orientation'
      */
     scrollRef?: RefObject<HTMLDivElement | null>;
 };
-export declare function DataListRoot({ children, columns, className, variant, fit, stickyHeaderBackground, mask, scrollRef, ...props }: DataListRootProps): import("react").JSX.Element;
+export declare function DataListRoot({ children, columns, className, fit, variant, mask, scrollRef, ...props }: DataListRootProps): import("react").JSX.Element;

package/dist/src/ds/components/DataList/data-list-skeleton.d.ts

@@ -1,7 +1,12 @@
-import { DataListFit } from './data-list-root';
+import { DataListFit, DataListVariant } from './data-list-root';
 export type DataListSkeletonProps = {
     columns?: string;
     numberOfRows?: number;
     fit?: DataListFit;
+    variant?: DataListVariant;
 };
-export declare function DataListSkeleton({ columns, numberOfRows, fit }: DataListSkeletonProps): import("react").JSX.Element;
+/**
+ * Loading placeholder mirroring the real list: same root, a sticky header
+ * band with one placeholder label per column, then rows of placeholder cells.
+ */
+export declare function DataListSkeleton({ columns, numberOfRows, fit, variant, }: DataListSkeletonProps): import("react").JSX.Element;

package/dist/src/ds/components/DataList/data-list.d.ts

@@ -8,7 +8,7 @@ import { DataListSpacer } from './data-list-spacer';
 import { DataListSubHeading } from './data-list-subheading';
 import { DataListTop } from './data-list-top';
 import { DataListTopCellWithTooltip, DataListTopCellSmart, DataListTopSelectCell } from './data-list-top-cell';
-export type { DataListRootProps, DataListStickyHeaderBackground, DataListVariant } from './data-list-root';
+export type { DataListRootProps, DataListVariant } from './data-list-root';
 export declare const DataList: typeof DataListRoot & {
     Top: typeof DataListTop;
     TopCells: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/dist/src/ds/components/DataList/data-list.stories.d.ts

@@ -1,49 +1,23 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { DataListStickyHeaderBackground, DataListVariant } from './data-list-root';
-type DataListStoryArgs = {
-    variant: DataListVariant;
-    stickyHeaderBackground: DataListStickyHeaderBackground;
-};
-declare const meta: Meta<DataListStoryArgs>;
+import { DataList } from './data-list';
+declare const meta: Meta<typeof DataList>;
 export default meta;
-type Story = StoryObj<DataListStoryArgs>;
-/** The standard condensed look used by Traces, Logs, Scores, Dataset Items, and Skills. */
-export declare const Compact: Story;
-/** Taller rows — better for prose-heavy content where each row needs more breathing room. */
+type Story = StoryObj<typeof DataList>;
+/** Canonical DataList appearance and density. */
 export declare const Default: Story;
-/**
- * Per-row `variant="error"` lays a subtle, theme-aware destructive tint over the
- * row. Use the `variant` control to compare it with each list treatment.
- */
-export declare const WithErrorRows: Story;
-/** Use `RowLink` when each row should navigate to a detail page (preserves middle-click + open-in-new-tab). */
-export declare const WithRowLink: Story;
-/** Multi-select with a leading checkbox column. Click the header checkbox to toggle all rows. */
+/** `light` drops the panel behind the rows so the list sits directly on the page. */
+export declare const Light: Story;
+/** Semantic error and featured row states. */
+export declare const RowStates: Story;
+/** Multi-select with checkboxes that remain visible without hover. */
 export declare const WithSelection: Story;
-/** Trailing actions column: the row click area is bounded by `colEnd={-2}`, and the last cell hosts per-row controls. */
-export declare const WithTrailingCell: Story;
-/** Use `featured` to highlight the row whose detail panel is currently open. */
-export declare const Featured: Story;
-/** `DateCell` shows `Today` or `MMM dd`; `TimeCell` shows `HH:mm:ss.SSS` with monospaced glyphs. */
-export declare const WithDateAndTimeCells: Story;
-/** Empty / no-match state — usually shown when a search filter yields zero rows. */
+/** Trailing actions stay hidden until their row is hovered or focused. */
+export declare const WithActions: Story;
 export declare const Empty: Story;
-/** Wide grid with constrained columns, horizontal scrolling, and a long badge that must stay inside its cell. */
-export declare const WideColumnsOverflow: Story;
-/** Sticky row headers keep the first column visible while wide metric-like grids scroll horizontally. */
-export declare const StickyRowHeaders: Story;
-/** Loading placeholder for any column layout. Pass the same `columns` string the real list uses. */
 export declare const Loading: Story;
-/** Page-based pagination footer — `Previous` shows when `currentPage > 0`, `Next` shows when `hasMore`.
- *  `currentPage` is zero-based: the footer renders it as `currentPage + 1`, so page `0` reads as "Page 1". */
+/** Horizontal and vertical scrolling with a sticky header and first column. */
+export declare const StickyOverflow: Story;
 export declare const WithPagination: Story;
-/** Group rows under labelled sections using `Subheader` (and an optional `SubHeading` for a quieter sub-label). */
-export declare const WithSubheader: Story;
-/** Scorer data table: Score is always visible, Input/Entity are toggleable. */
-export declare const ScoresTable: Story;
-/**
- * Accessible keyboard navigation via `useTableKeydown` (roving tabindex).
- * Tab into the list to land on the active row, then use ArrowUp/ArrowDown,
- * Home/End, and PageUp/PageDown to move focus. Tab leaves the list in one stop.
- */
+export declare const WithSubheaders: Story;
+/** Roving focus with ArrowUp, ArrowDown, Home, End, PageUp and PageDown. */
 export declare const KeyboardNavigation: Story;

package/dist/src/ds/components/DataList/shared.d.ts

@@ -5,42 +5,37 @@
  *
  * Carries the `.data-list-row` marker class the root styles target.
  */
-export declare const dataListRowOuterStyles: readonly ["group/data-list-row data-list-row col-span-full relative min-h-9", "transition-colors duration-200 rounded-lg"];
+export declare const dataListRowOuterStyles: readonly ["group/data-list-row data-list-row col-span-full relative min-h-9 bg-surface2", "transition-colors duration-200"];
 /**
- * Layout + focus ring only. The root paints the hover/focus fill on
- * `.data-list-row`, so a wrapped row and its button never show two tints.
+ * Interactive state fills for the outer row element. Applied to standalone
+ * `RowButton` / `RowLink` and to `RowWrapper`. The `has-*` forms let a wrapper
+ * mirror the tone of the interactive row nested inside it.
  */
-export declare const dataListRowInteractiveStyles: readonly ["grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer", "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "transition-colors duration-200 rounded-lg"];
-export declare const dataListRowStyles: readonly ["grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer", "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "transition-colors duration-200 rounded-lg", "group/data-list-row data-list-row col-span-full relative min-h-9", "transition-colors duration-200 rounded-lg"];
-export declare const dataListRowStaticStyles: readonly ["grid grid-cols-subgrid gap-8 px-5", "group/data-list-row data-list-row col-span-full relative min-h-9", "transition-colors duration-200 rounded-lg"];
+export declare const dataListRowStateStyles: readonly ["hover:bg-surface3 active:bg-surface4", "data-featured:bg-surface3 has-data-featured:bg-surface3 has-data-selected:bg-surface3", "data-featured:hover:bg-surface4 has-data-featured:hover:bg-surface4 has-data-selected:hover:bg-surface4", "data-[variant=error]:bg-notice-destructive/10 has-data-[variant=error]:bg-notice-destructive/10"];
 /**
- * Row controls that stay out of the way until the row is hovered or focused.
+ * Layout and focus for the interactive element. The background lives on the
+ * outer row element so it sits inside the root surface.
+ */
+export declare const dataListRowInteractiveStyles: readonly ["grid grid-cols-subgrid gap-8 px-5 cursor-pointer", "outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1"];
+export declare const dataListRowStyles: readonly ["grid grid-cols-subgrid gap-8 px-5 cursor-pointer", "outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "group/data-list-row data-list-row col-span-full relative min-h-9 bg-surface2", "transition-colors duration-200", "hover:bg-surface3 active:bg-surface4", "data-featured:bg-surface3 has-data-featured:bg-surface3 has-data-selected:bg-surface3", "data-featured:hover:bg-surface4 has-data-featured:hover:bg-surface4 has-data-selected:hover:bg-surface4", "data-[variant=error]:bg-notice-destructive/10 has-data-[variant=error]:bg-notice-destructive/10"];
+export declare const dataListRowStaticStyles: readonly ["grid grid-cols-subgrid gap-8 px-5", "group/data-list-row data-list-row col-span-full relative min-h-9 bg-surface2", "transition-colors duration-200"];
+/**
+ * Row actions that stay out of the way until the row is hovered or focused.
  * Opacity, not display, so the column keeps its width and nothing shifts. A
  * coarse pointer never hovers, so there they stay visible — hidden controls
  * that still take taps would be worse than no reveal at all.
  */
-export declare const dataListRowRevealStyles = "opacity-0 pointer-coarse:opacity-100 group-focus-within/data-list-row:opacity-100 group-hover/data-list-row:opacity-100";
-/** Header counterpart of {@link dataListRowRevealStyles}. */
-export declare const dataListTopRevealStyles = "opacity-0 pointer-coarse:opacity-100 group-focus-within/data-list-top:opacity-100 group-hover/data-list-top:opacity-100";
+export declare const dataListRowActionRevealStyles = "opacity-0 pointer-coarse:opacity-100 group-focus-within/data-list-row:opacity-100 group-hover/data-list-row:opacity-100";
 export type DataListSticky = 'start';
-export declare const dataListStickyStartStyles: readonly ["data-list-sticky-start sticky left-0 z-10 isolate self-stretch overflow-visible", "after:absolute after:-right-4 after:top-1/2 after:-translate-y-1/2 after:h-4 after:w-px after:bg-border2 after:content-[\"\"] after:pointer-events-none"];
-/** Tone for a single row. `error` lays a subtle, theme-aware destructive tint
- *  over whatever background the row already has. */
+export declare const dataListStickyStartStyles: readonly ["data-list-sticky-start sticky left-0 z-10 isolate self-stretch overflow-visible"];
+/** Tone for a single row. Exposed as `data-variant`; `error` tints the row. */
 export type DataListRowVariant = 'default' | 'error';
-/**
- * Per-row tone. Kept as a `.ts` cva (safe to export — no react-refresh concern).
- * The error tint uses `!` so it wins over borderless table root-level styling
- * (higher-specificity descendant rules) and over the base row hover.
- */
-export declare const dataListRowVariants: (props?: ({
-    variant?: "default" | "error" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Layout/state modifiers shared by interactive row primitives
  * (`DataList.RowButton`, `DataList.RowLink`).
  */
 export type DataListRowSharedProps = {
-    /** Row tone — `error` applies a subtle destructive background tint. */
+    /** Row tone — exposed on the element as `data-variant`. */
     variant?: DataListRowVariant;
     /**
      * Place the row starting at this column line. Defaults to column 1. Use
@@ -54,8 +49,8 @@ export type DataListRowSharedProps = {
      */
     colEnd?: number;
     /**
-     * Apply the highlighted background. Use to mark the row that is currently
-     * featured (e.g. the row whose detail is open in a side panel).
+     * Mark the row as featured (e.g. the row whose detail is open in a side
+     * panel). Exposed on the element as `data-featured` and tints the row.
      */
     featured?: boolean;
 };

package/dist/src/ds/components/EnvironmentVariablesEditor/environment-variables-editor-read-only-list.d.ts

@@ -1,2 +1,2 @@
 import { EnvironmentVariablesEditorReadOnlyListProps } from './environment-variables-editor.types';
-export declare function EnvironmentVariablesEditorReadOnlyList({ className, children, columns, header, showHeader, showIcon, nameLabel, valueLabel, updatedAtLabel, variant, scrollRef, ...props }: EnvironmentVariablesEditorReadOnlyListProps): import("react").JSX.Element;
+export declare function EnvironmentVariablesEditorReadOnlyList({ className, children, columns, header, showHeader, showIcon, nameLabel, valueLabel, updatedAtLabel, scrollRef, ...props }: EnvironmentVariablesEditorReadOnlyListProps): import("react").JSX.Element;

package/dist/src/ds/components/LogsDataList/logs-data-list.stories.d.ts

@@ -4,5 +4,4 @@ declare const meta: Meta<typeof LogsDataList>;
 export default meta;
 type Story = StoryObj<typeof LogsDataList>;
 export declare const Populated: Story;
-export declare const NoMatches: Story;
 export declare const Loading: Story;

package/dist/src/ds/components/ThemeToggle/theme-toggle.d.ts

@@ -5,6 +5,29 @@ export interface ThemeToggleOption {
     label: string;
     icon: React.ReactNode;
 }
+declare const SIZE_CONFIG: {
+    readonly md: {
+        readonly itemGap: 2;
+        readonly itemWidth: 28;
+        readonly root: "gap-0.5 p-0.5";
+        readonly indicator: "inset-y-0.5 left-0.5";
+        readonly item: "h-6 [&_svg]:size-3.5";
+    };
+    readonly xs: {
+        readonly itemGap: 1;
+        readonly itemWidth: 20;
+        readonly root: "gap-px p-px";
+        readonly indicator: "inset-y-px left-px";
+        readonly item: "h-4 [&_svg]:h-icon-sm [&_svg]:w-icon-sm";
+    };
+    readonly sm: {
+        readonly itemGap: 1;
+        readonly itemWidth: 24;
+        readonly root: "gap-px p-px";
+        readonly indicator: "inset-y-px left-px";
+        readonly item: "h-5 [&_svg]:h-icon-sm [&_svg]:w-icon-sm";
+    };
+};
 type RadioRootProps = Omit<RadioGroupPrimitive.Props, 'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'> & {
     className?: string;
 };
@@ -18,6 +41,7 @@ type UncontrolledProps = {
 };
 export type ThemeToggleProps = RadioRootProps & {
     options?: ReadonlyArray<ThemeToggleOption>;
+    size?: keyof typeof SIZE_CONFIG;
 } & (ControlledProps | UncontrolledProps);
-export declare const ThemeToggle: ({ value, onChange, options, className, "aria-label": ariaLabel, ...rest }: ThemeToggleProps) => import("react").JSX.Element;
+export declare const ThemeToggle: ({ value, onChange, options, size, className, "aria-label": ariaLabel, ...rest }: ThemeToggleProps) => import("react").JSX.Element;
 export {};

package/dist/src/ds/components/ThemeToggle/theme-toggle.stories.d.ts

@@ -4,4 +4,7 @@ declare const meta: Meta<typeof ThemeToggle>;
 export default meta;
 type Story = StoryObj<typeof ThemeToggle>;
 export declare const Default: Story;
+export declare const ExtraSmall: Story;
+export declare const Small: Story;
+export declare const Sizes: Story;
 export declare const Controlled: Story;

package/dist/src/hooks/use-debounced-value.d.ts

@@ -0,0 +1 @@
+export declare function useDebouncedValue<T>(value: T, delay: number): T;