@mastra/playground-ui 35.0.0 → 35.1.0-alpha.1

package/dist/scroll-area-DjZ6nTm5.js

@@ -0,0 +1,221 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import * as React from 'react';
+import { useAutoscroll } from './hooks/use-autoscroll.es.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const DEFAULT_SCROLL_BUTTON_SPEED = 100;
+const DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;
+const MIN_SCROLL_BUTTON_SPEED = 1;
+const MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;
+function resolveMask(mask, orientation) {
+  if (mask === false) return { top: false, bottom: false, left: false, right: false };
+  const vertical = orientation === "vertical" || orientation === "both";
+  const horizontal = orientation === "horizontal" || orientation === "both";
+  const sides = { top: vertical, bottom: vertical, left: horizontal, right: horizontal };
+  if (mask === true || mask === void 0) return sides;
+  if (mask.y !== void 0) {
+    sides.top = mask.y;
+    sides.bottom = mask.y;
+  }
+  if (mask.x !== void 0) {
+    sides.left = mask.x;
+    sides.right = mask.x;
+  }
+  if (mask.top !== void 0) sides.top = mask.top;
+  if (mask.bottom !== void 0) sides.bottom = mask.bottom;
+  if (mask.left !== void 0) sides.left = mask.left;
+  if (mask.right !== void 0) sides.right = mask.right;
+  return sides;
+}
+function maskClasses(sides) {
+  return cn(
+    sides.top && "data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)]",
+    sides.bottom && "data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)]",
+    sides.left && "data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)]",
+    sides.right && "data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]"
+  );
+}
+function clampScrollButtonNumber(value, fallback, min) {
+  const resolvedValue = value ?? fallback;
+  return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);
+}
+const ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }) => {
+  const Icon = direction === "left" ? ChevronLeftIcon : ChevronRightIcon;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      className: cn(
+        "absolute top-1 bottom-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",
+        "outline-hidden focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55",
+        direction === "left" ? "left-1 group-data-[overflow-x-start]/scroll-area:flex" : "right-1 group-data-[overflow-x-end]/scroll-area:flex"
+      ),
+      onPointerDown: (event) => onStartScrolling(direction, event),
+      onPointerUp: onStopScrolling,
+      onPointerLeave: onStopScrolling,
+      onPointerCancel: onStopScrolling,
+      onBlur: onStopScrolling,
+      onClick: (event) => {
+        if (event.detail === 0) onKeyboardScroll(direction);
+      },
+      children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+};
+const ScrollButtons = ({ areaRef, scrollButtons }) => {
+  const scrollButtonInterval = React.useRef(null);
+  const scrollButtonOptions = typeof scrollButtons === "object" ? scrollButtons : void 0;
+  const scrollButtonSpeed = clampScrollButtonNumber(
+    scrollButtonOptions?.scrollSpeed,
+    DEFAULT_SCROLL_BUTTON_SPEED,
+    MIN_SCROLL_BUTTON_SPEED
+  );
+  const scrollButtonIntervalTime = clampScrollButtonNumber(
+    scrollButtonOptions?.scrollIntervalTime,
+    DEFAULT_SCROLL_BUTTON_INTERVAL_TIME,
+    MIN_SCROLL_BUTTON_INTERVAL_TIME
+  );
+  const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? "Scroll left";
+  const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? "Scroll right";
+  const stopScrollButtonScrolling = React.useCallback(() => {
+    if (!scrollButtonInterval.current) return;
+    clearInterval(scrollButtonInterval.current);
+    scrollButtonInterval.current = null;
+  }, []);
+  const scrollByDirection = React.useCallback(
+    (direction, multiplier = 1) => {
+      const viewport = areaRef.current;
+      if (!viewport) return;
+      viewport.scrollBy({
+        left: direction === "right" ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,
+        behavior: "smooth"
+      });
+    },
+    [areaRef, scrollButtonSpeed]
+  );
+  const startScrollButtonScrolling = React.useCallback(
+    (direction, event) => {
+      event?.preventDefault();
+      event?.stopPropagation();
+      event?.currentTarget.setPointerCapture?.(event.pointerId);
+      stopScrollButtonScrolling();
+      scrollByDirection(direction, 2);
+      scrollButtonInterval.current = setInterval(() => {
+        scrollByDirection(direction);
+      }, scrollButtonIntervalTime);
+    },
+    [scrollButtonIntervalTime, scrollByDirection, stopScrollButtonScrolling]
+  );
+  React.useEffect(() => {
+    return () => {
+      stopScrollButtonScrolling();
+    };
+  }, [stopScrollButtonScrolling]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ScrollButton,
+      {
+        direction: "left",
+        label: leftScrollButtonLabel,
+        onStartScrolling: startScrollButtonScrolling,
+        onStopScrolling: stopScrollButtonScrolling,
+        onKeyboardScroll: (direction) => scrollByDirection(direction, 2)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScrollButton,
+      {
+        direction: "right",
+        label: rightScrollButtonLabel,
+        onStartScrolling: startScrollButtonScrolling,
+        onStopScrolling: stopScrollButtonScrolling,
+        onKeyboardScroll: (direction) => scrollByDirection(direction, 2)
+      }
+    )
+  ] });
+};
+const ScrollArea = React.forwardRef(
+  ({
+    className,
+    children,
+    viewPortClassName,
+    maxHeight,
+    autoScroll = false,
+    orientation = "vertical",
+    scrollButtons,
+    mask,
+    showMask,
+    viewportRef,
+    ...props
+  }, ref) => {
+    const areaRef = React.useRef(null);
+    useAutoscroll(areaRef, { enabled: autoScroll });
+    const setViewportRef = React.useCallback(
+      (node) => {
+        areaRef.current = node;
+        if (typeof viewportRef === "function") viewportRef(node);
+        else if (viewportRef) viewportRef.current = node;
+      },
+      [viewportRef]
+    );
+    const effectiveMask = mask !== void 0 ? mask : showMask;
+    const sides = resolveMask(effectiveMask, orientation);
+    const viewportStyle = {};
+    if (maxHeight) viewportStyle.maxHeight = maxHeight;
+    if (orientation === "vertical") {
+      viewportStyle.overflowX = "hidden";
+      viewportStyle.overflowY = "scroll";
+    } else if (orientation === "horizontal") {
+      viewportStyle.overflowX = "scroll";
+      viewportStyle.overflowY = "hidden";
+    }
+    const contentStyle = orientation === "vertical" ? { minWidth: "0px" } : orientation === "horizontal" ? { minHeight: "0px" } : void 0;
+    return /* @__PURE__ */ jsxs(
+      ScrollArea$1.Root,
+      {
+        ref,
+        className: cn("group/scroll-area relative overflow-hidden", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            ScrollArea$1.Viewport,
+            {
+              ref: setViewportRef,
+              className: cn("h-full w-full rounded-[inherit]", maskClasses(sides), viewPortClassName),
+              style: viewportStyle,
+              children: /* @__PURE__ */ jsx(ScrollArea$1.Content, { style: contentStyle, children })
+            }
+          ),
+          scrollButtons && orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollButtons, { areaRef, scrollButtons }),
+          (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
+          (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
+          orientation === "both" && /* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
+        ]
+      }
+    );
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollArea$1.Scrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-opacity duration-normal ease-out-custom",
+      "opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0",
+      orientation === "vertical" && "h-full w-1.5 p-px",
+      orientation === "horizontal" && "h-1.5 w-full flex-col p-px",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, { className: "relative flex-1 rounded-full bg-neutral4/30 hover:bg-neutral4/60 transition-colors duration-normal" })
+  }
+));
+ScrollBar.displayName = "ScrollBar";
+
+export { ScrollArea as S, ScrollBar as a };
+//# sourceMappingURL=scroll-area-DjZ6nTm5.js.map

package/dist/scroll-area-DjZ6nTm5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-DjZ6nTm5.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   * 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 top-1 bottom-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 focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55',\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      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('h-full w-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') && <ScrollBar orientation=\"vertical\" />}\n        {(orientation === 'horizontal' || orientation === 'both') && <ScrollBar orientation=\"horizontal\" />}\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>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.Scrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'flex touch-none select-none transition-opacity duration-normal ease-out-custom',\n      'opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0',\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=\"relative flex-1 rounded-full bg-neutral4/30 hover:bg-neutral4/60 transition-colors duration-normal\" />\n  </ScrollAreaPrimitive.Scrollbar>\n));\nScrollBar.displayName = 'ScrollBar';\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollAreaPrimitive"],"mappings":"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"}

package/dist/src/ds/components/Combobox/combobox-styles.d.ts

@@ -23,6 +23,9 @@ export declare function comboboxTriggerClass({ variant, size, error, className,
     error?: boolean;
     className?: string;
 }): string;
+export declare const comboboxItemClass: (props?: ({
+    multiple?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const comboboxStyles: {
     /** Root wrapper */
     readonly root: "flex flex-col gap-1.5";
@@ -46,24 +49,14 @@ export declare const comboboxStyles: {
     readonly list: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1";
     /** Option item base — rounded-md sits concentrically inside rounded-xl + p-1. */
     readonly item: string;
-    /** Multi-select item — keeps the left checkbox slot, no right indicator. */
+    /** Multi-select item — same item rhythm with a right-aligned selected check. */
     readonly itemMulti: string;
     /** Right-aligned slot grouping end content + selection check. */
     readonly itemRightSlot: "ml-auto flex items-center gap-2 shrink-0";
     /** Check indicator container — inline, fixed 16x16, shown only when item is selected. */
-    readonly checkContainer: "flex h-4 w-4 shrink-0 items-center justify-center text-accent1";
+    readonly checkContainer: "flex h-4 w-4 shrink-0 items-center justify-center text-neutral6";
     /** Check icon (single select) */
     readonly checkIcon: "h-3.5 w-3.5";
-    /** Checkbox container (multi select) */
-    readonly checkbox: "flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border";
-    /** Checkbox selected state */
-    readonly checkboxSelected: "bg-accent1 border-accent1";
-    /** Checkbox unselected state */
-    readonly checkboxUnselected: "border-border2";
-    /** Check icon for checkbox (multi select) */
-    readonly checkboxIcon: "h-3 w-3 text-surface1";
-    /** Option content wrapper */
-    readonly optionContent: "flex items-center gap-2 w-full min-w-0";
     /** Option label/description wrapper */
     readonly optionText: "flex flex-col gap-0.5 min-w-0";
     /** Option label */

package/dist/src/ds/components/Combobox/combobox.d.ts

@@ -9,10 +9,8 @@ export type ComboboxOption = {
     start?: React.ReactNode;
     end?: React.ReactNode;
 };
-export type ComboboxProps = {
+type ComboboxSharedProps = {
     options: ComboboxOption[];
-    value?: string;
-    onValueChange?: (value: string) => void;
     placeholder?: string;
     searchPlaceholder?: string;
     emptyText?: string;
@@ -25,4 +23,15 @@ export type ComboboxProps = {
     container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;
     error?: string;
 };
-export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, className, disabled, variant, size, open, onOpenChange, container, error, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+export type ComboboxSingleProps = ComboboxSharedProps & {
+    multiple?: false;
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+export type ComboboxMultipleProps = ComboboxSharedProps & {
+    multiple: true;
+    value?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+};
+export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+export declare function Combobox(props: ComboboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/Combobox/combobox.stories.d.ts

@@ -12,3 +12,4 @@ export declare const ManyOptions: Story;
 export declare const Variants: Story;
 export declare const WithDescriptions: Story;
 export declare const Sizes: Story;
+export declare const Multiple: Story;

package/dist/src/ds/components/Combobox/index.d.ts

@@ -1,4 +1,3 @@
 export * from './combobox';
-export * from './multi-combobox';
 export { comboboxStyles } from './combobox-styles';
 export { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';

package/dist/src/ds/components/Command/command.d.ts

@@ -5,8 +5,12 @@ type CommandDialogProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'c
     children?: React.ReactNode;
     title?: string;
     description?: string;
+    contentClassName?: string;
+    commandClassName?: string;
+    showOverlay?: boolean;
+    overlayClassName?: string;
 };
-declare const CommandDialog: ({ children, title, description, ...props }: CommandDialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommandDialog: ({ children, title, description, contentClassName, commandClassName, showOverlay, overlayClassName, ...props }: CommandDialogProps) => import("react/jsx-runtime").JSX.Element;
 declare const CommandInput: React.ForwardRefExoticComponent<any>;
 declare const CommandList: React.ForwardRefExoticComponent<any>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<any>;

package/dist/src/ds/components/Command/command.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Command>;
 export default meta;
 type Story = StoryObj<typeof Command>;
 export declare const Default: Story;
+export declare const InlineVercelStyle: Story;
 export declare const WithDialog: Story;
 export declare const Empty: Story;
 export declare const WithShortcuts: Story;

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

@@ -2,13 +2,12 @@ import { ReactNode, RefObject } from 'react';
 /**
  * Visual treatment for the whole list.
  *
- * - `default`: bordered card, `surface2` body, hairline row separators.
  * - `striped`: borderless and full-bleed, zebra-striped rows (every other row
  *   tinted), contrasting sticky header band, no row separators.
  * - `lined`: borderless and full-bleed like `striped`, but rows stay transparent
  *   and use subtle separators instead of zebra tints.
  */
-export type DataListVariant = 'default' | 'striped' | 'lined';
+export type DataListVariant = 'striped' | 'lined';
 export type DataListRootProps = {
     children: ReactNode;
     columns: string;
@@ -16,8 +15,8 @@ export type DataListRootProps = {
     variant?: DataListVariant;
     /**
      * Ref to the scroll container — pass this to TanStack Virtual's
-     * `getScrollElement` when virtualizing. Without it, the list behaves as a
-     * normal scrollable grid.
+     * `getScrollElement` when virtualizing. Without it, the ScrollArea viewport
+     * scrolls normally.
      */
     scrollRef?: RefObject<HTMLDivElement | null>;
 };

package/dist/src/ds/components/Dialog/dialog.d.ts

@@ -18,6 +18,8 @@ type DialogOverlayProps = Omit<DialogPrimitive.Backdrop.Props, 'className'> & {
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 type DialogContentProps = Omit<DialogPrimitive.Popup.Props, 'className'> & {
     className?: string;
+    showOverlay?: boolean;
+    overlayClassName?: string;
 };
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {

package/dist/src/ds/components/MainSidebar/main-sidebar-nav-item-classes.d.ts

@@ -0,0 +1,12 @@
+type ItemStyleOptions = {
+    isActive?: boolean;
+    isCollapsed?: boolean;
+    isFeatured?: boolean;
+};
+/**
+ * Shared classes for any sidebar nav row element (anchor, button, custom).
+ * Apply directly to the interactive element so `asChild` and custom slotted
+ * elements all receive the same styling.
+ */
+export declare const navItemClasses: ({ isActive, isCollapsed, isFeatured }?: ItemStyleOptions) => string;
+export {};

package/dist/src/ds/components/MainSidebar/main-sidebar-nav-link.d.ts

@@ -11,18 +11,6 @@ export type NavLink = {
     /** @deprecated Sidebar nav items now render flush; this option is accepted but ignored. */
     indent?: boolean;
 };
-type ItemStyleOptions = {
-    isActive?: boolean;
-    isCollapsed?: boolean;
-    isFeatured?: boolean;
-};
-/**
- * Shared classes for any sidebar nav row element (anchor, button, custom).
- * Apply directly to the interactive element so `asChild` and custom slotted
- * elements (e.g. router Links) all receive the same styling without relying
- * on `[&>a]:` child selectors.
- */
-export declare const navItemClasses: ({ isActive, isCollapsed, isFeatured }?: ItemStyleOptions) => string;
 export type MainSidebarNavLinkProps = Omit<ComponentPropsWithoutRef<'li'>, 'children'> & {
     link?: NavLink;
     isActive?: boolean;
@@ -39,4 +27,3 @@ export type MainSidebarNavLinkProps = Omit<ComponentPropsWithoutRef<'li'>, 'chil
     asChild?: boolean;
 };
 export declare function MainSidebarNavLink({ link, state: stateProp, children, isActive, className, LinkComponent: LinkProp, asChild, ...props }: MainSidebarNavLinkProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/ds/components/MainSidebar/main-sidebar.d.ts

@@ -12,7 +12,8 @@ import { MainSidebarSections } from './main-sidebar-sections';
 import { MainSidebarTrigger } from './main-sidebar-trigger';
 export { MainSidebarProvider, type SidebarState, type MainSidebarProviderProps } from './main-sidebar-context';
 export { useMainSidebar, useMaybeSidebar } from './main-sidebar-context';
-export { type NavLink, navItemClasses } from './main-sidebar-nav-link';
+export { navItemClasses } from './main-sidebar-nav-item-classes';
+export { type NavLink } from './main-sidebar-nav-link';
 export { type NavSection } from './main-sidebar-nav-section';
 export { MainSidebarTrigger } from './main-sidebar-trigger';
 export { MainSidebarMobileTrigger } from './main-sidebar-mobile-trigger';

package/dist/src/ds/components/ScrollArea/scroll-area.d.ts

@@ -17,11 +17,21 @@ export type MaskSides = {
  * - object: per-side override on top of the orientation default.
  */
 export type ScrollAreaMask = boolean | MaskSides;
+export type ScrollAreaScrollButtons = boolean | {
+    /** Pixels to scroll per repeated interval. */
+    scrollSpeed?: number;
+    /** Milliseconds between repeated scroll steps while the button is held. */
+    scrollIntervalTime?: number;
+    leftLabel?: string;
+    rightLabel?: string;
+};
 export type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
     viewPortClassName?: string;
     maxHeight?: string;
     autoScroll?: boolean;
     orientation?: Orientation;
+    /** Show left/right controls for horizontal overflow. Only applies to `horizontal` and `both` orientations. */
+    scrollButtons?: ScrollAreaScrollButtons;
     /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */
     mask?: ScrollAreaMask;
     /** @deprecated Use `mask` instead. Retained for backward compatibility. */
@@ -38,6 +48,8 @@ declare const ScrollArea: React.ForwardRefExoticComponent<Omit<Omit<import('@bas
     maxHeight?: string;
     autoScroll?: boolean;
     orientation?: Orientation;
+    /** Show left/right controls for horizontal overflow. Only applies to `horizontal` and `both` orientations. */
+    scrollButtons?: ScrollAreaScrollButtons;
     /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */
     mask?: ScrollAreaMask;
     /** @deprecated Use `mask` instead. Retained for backward compatibility. */

package/dist/src/ds/components/ScrollArea/scroll-area.stories.d.ts

@@ -6,6 +6,8 @@ type Story = StoryObj<typeof ScrollArea>;
 export declare const Default: Story;
 export declare const WithMaxHeight: Story;
 export declare const HorizontalScroll: Story;
+export declare const HorizontalScrollButtons: Story;
+export declare const Badges: Story;
 export declare const CodeBlock: Story;
 export declare const ChatMessages: Story;
 export declare const MaskDisabled: Story;

package/dist/src/hooks/use-copy-to-clipboard.d.ts

@@ -1,9 +1,17 @@
 type UseCopyToClipboardProps = {
     text: string;
     copyMessage?: string;
+    copiedDuration?: number;
+    showToast?: boolean;
 };
-export declare function useCopyToClipboard({ text, copyMessage }: UseCopyToClipboardProps): {
+type UseCopyToClipboardOptions = Omit<UseCopyToClipboardProps, 'text'>;
+type UseCopyToClipboardDynamicResult = {
     isCopied: boolean;
+    copyToClipboard: (value: string) => void;
+};
+type UseCopyToClipboardConfiguredResult = UseCopyToClipboardDynamicResult & {
     handleCopy: () => void;
 };
+export declare function useCopyToClipboard(props: UseCopyToClipboardProps): UseCopyToClipboardConfiguredResult;
+export declare function useCopyToClipboard(props: UseCopyToClipboardOptions): UseCopyToClipboardDynamicResult;
 export {};

package/dist/src/hooks/use-keyboard-shortcut-label.d.ts

@@ -0,0 +1,2 @@
+export declare function useIsApplePlatform(): boolean;
+export declare function useKeyboardShortcutLabel(key: string): string;

package/dist/src/index.d.ts

@@ -89,7 +89,6 @@ export * from './ds/components/DateTimeRangePicker';
 export * from './ds/components/HorizontalBars';
 export * from './ds/components/MetricsDataTable';
 export * from './ds/components/MetricsLineChart';
-export * from './ds/components/ScrollableContainer';
 export * from './ds/components/StatusBadge';
 export * from './ds/icons/index';
 export * from './ds/tokens';
@@ -100,6 +99,7 @@ export * from './hooks/use-copy-to-clipboard';
 export * from './hooks/use-in-view';
 export * from './hooks/use-autoscroll';
 export * from './hooks/use-is-mobile';
+export * from './hooks/use-keyboard-shortcut-label';
 export { cn } from './lib/utils';
 export * from './lib/string';
 export * from './lib/number';

package/dist/src/lib/file/index.d.ts

@@ -1,4 +1,5 @@
 export * from './constants';
 export * from './contentTypeFromUrl';
 export * from './downloadJson';
+export * from './schemes';
 export * from './toBase64';

package/dist/src/lib/file/schemes.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Single source of truth for the URL schemes the attachment pipeline understands.
+ *
+ * These MUST stay aligned with the protocols Mastra core accepts in
+ * `packages/core/src/agent/message-list/prompt/attachments-to-parts.ts` (its
+ * `switch (url.protocol)` whitelists exactly `http:`, `https:`, `gs:`, `s3:`
+ * and throws `Unsupported URL protocol` for anything else). Forwarding a scheme
+ * the UI accepts but core rejects would surface as a runtime error, so the sets
+ * are kept in lockstep — see `schemes.parity.test.ts`.
+ */
+/** Schemes the browser can fetch directly (for inline previews and HEAD lookups). */
+export declare const BROWSER_FETCHABLE_SCHEMES: readonly ["https://", "http://"];
+/**
+ * Cloud-storage schemes that are forwarded to the model provider and resolved
+ * server-side (e.g. Vertex AI for `gs://`, Bedrock for `s3://`). The browser
+ * cannot fetch these, so they are never HEAD-ed or previewed inline.
+ */
+export declare const NON_FETCHABLE_REMOTE_SCHEMES: readonly ["gs://", "s3://"];
+/** Every remote scheme an attachment URL may use (fetchable + cloud-storage). */
+export declare const REMOTE_URL_SCHEMES: readonly ["https://", "http://", "gs://", "s3://"];
+/** True when the value starts with any supported remote scheme. */
+export declare const isRemoteUrl: (value: string) => boolean;
+/** True when the browser can fetch the value directly (http/https). */
+export declare const isBrowserFetchableUrl: (value: string) => boolean;
+/** True when the value is a cloud-storage URI the browser cannot fetch (gs/s3). */
+export declare const isNonFetchableRemoteUrl: (value: string) => boolean;

package/dist/{traces-data-list-BPTKzaN6.cjs → traces-data-list-BNmnKyDD.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const dataListSkeleton = require('./data-list-skeleton-COjCBzBF.cjs');
+const dataListSkeleton = require('./data-list-skeleton-BlOwAki1.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const Button = require('./Button-DpIX8JMz.cjs');
@@ -88,7 +88,12 @@ const DataListTopCells = React.forwardRef(
       "div",
       {
         ref,
-        className: utils.cn("grid grid-cols-subgrid gap-8 col-span-full px-5", flushLeft && "pl-0!", className),
+        className: utils.cn(
+          "grid grid-cols-subgrid gap-8 px-5 pointer-events-none [&>*]:pointer-events-auto",
+          !colStart && "col-span-full",
+          flushLeft && "pl-0!",
+          className
+        ),
         style: colStart ? { ...style, gridColumn: `${colStart} / -1` } : style,
         ...rest,
         children
@@ -238,4 +243,4 @@ const TracesDataList = Object.assign(TracesDataListRoot, {
 exports.DataList = DataList;
 exports.ScoresDataList = ScoresDataList;
 exports.TracesDataList = TracesDataList;
-//# sourceMappingURL=traces-data-list-BPTKzaN6.cjs.map
+//# sourceMappingURL=traces-data-list-BNmnKyDD.cjs.map