@mastra/playground-ui 30.0.0-alpha.4 → 30.0.0-alpha.8

package/CHANGELOG.md

@@ -1,5 +1,72 @@
 # @mastra/playground-ui
 
+## 30.0.0-alpha.8
+
+### Patch Changes
+
+- Exported ContextMenu from the package entry so it can be imported alongside other Base UI primitives. ([#17062](https://github.com/mastra-ai/mastra/pull/17062))
+
+- Updated dependencies [[`c35b962`](https://github.com/mastra-ai/mastra/commit/c35b9625c7e854fcfdeee226a3338a750d0ff211), [`c35b962`](https://github.com/mastra-ai/mastra/commit/c35b9625c7e854fcfdeee226a3338a750d0ff211), [`9be1545`](https://github.com/mastra-ai/mastra/commit/9be1545475eb81a716169bb1281a37853cc739e0), [`4084113`](https://github.com/mastra-ai/mastra/commit/408411370fc48a822e8b616b3b63f9409774e0e9), [`bc01b1b`](https://github.com/mastra-ai/mastra/commit/bc01b1bfafe381d90af909f8bce7eeb4eee779f2), [`1120b4f`](https://github.com/mastra-ai/mastra/commit/1120b4fa928552c6ee1751efa5603d955841e766)]:
+  - @mastra/core@1.37.0-alpha.8
+  - @mastra/client-js@1.21.0-alpha.8
+  - @mastra/react@0.4.1-alpha.8
+
+## 30.0.0-alpha.7
+
+### Patch Changes
+
+- Design-system additions to support theming: ([#17059](https://github.com/mastra-ai/mastra/pull/17059))
+  - `Avatar` now accepts optional `color` and `textColor` props for per-instance tinting, and falls back to the initial when the image fails to load.
+  - `Searchbar` accepts an optional `className` to let consumers tune layout without forking.
+  - `TabList` accepts a `style` prop and the active-tab indicator now reads from the `--tab-indicator-color` CSS variable, letting parents theme the indicator (e.g. per-agent accent color).
+  - `stringToColor` now accepts any `number` for the `lightness` argument and defaults to `90` instead of `75` for a lighter fallback chip.
+  - Global `body` rule enables `font-smoothing` / `-webkit-font-smoothing` for crisper UI text.
+
+- Updated dependencies [[`f1b9f87`](https://github.com/mastra-ai/mastra/commit/f1b9f87a00505f15d4fe39f92de287674adc2198), [`168fa09`](https://github.com/mastra-ai/mastra/commit/168fa09d6b39114cb8c13bd06f1dccb9bc81c6cd), [`af2e1f8`](https://github.com/mastra-ai/mastra/commit/af2e1f8e2a2d2c4ba75167d5c93ca44395639eff)]:
+  - @mastra/react@0.4.1-alpha.7
+  - @mastra/core@1.37.0-alpha.7
+  - @mastra/client-js@1.21.0-alpha.7
+
+## 30.0.0-alpha.6
+
+### Patch Changes
+
+- Updated dependencies [[`0cbece9`](https://github.com/mastra-ai/mastra/commit/0cbece9d832cb134a74cdbf3682d390a058215a4), [`7dfe1bc`](https://github.com/mastra-ai/mastra/commit/7dfe1bcfe71d261a6fd6bbf29b1dec49d78fb98f), [`70cb714`](https://github.com/mastra-ai/mastra/commit/70cb7149c8f16f478e15b58498254a53181750a4), [`7f9da22`](https://github.com/mastra-ai/mastra/commit/7f9da22efd5aa595e138a31de55a5f0f2f28b33d)]:
+  - @mastra/core@1.37.0-alpha.6
+  - @mastra/client-js@1.21.0-alpha.6
+  - @mastra/react@0.4.1-alpha.6
+
+## 30.0.0-alpha.5
+
+### Patch Changes
+
+- Improved the Select component by migrating it to Base UI for more reliable positioning and accessibility. The public API (`Select`, `SelectTrigger`, `SelectContent`, `SelectItem`, `SelectValue`, `SelectGroup`) is unchanged, so no consumer updates are needed. ([#16918](https://github.com/mastra-ai/mastra/pull/16918))
+
+- Added `DataList.RowStatic`, a non-interactive row primitive. It renders a row that looks identical to other list rows but does not respond to clicks and shows no hover/focus state — use it alongside `DataList.RowButton` / `DataList.RowLink` when only some rows are clickable (e.g. error or placeholder entries in an otherwise navigable list). ([#16970](https://github.com/mastra-ai/mastra/pull/16970))
+
+  ```tsx
+  {
+    rows.map(row =>
+      row.href ? (
+        <DataList.RowLink key={row.id} to={row.href} LinkComponent={Link}>
+          {row.cells}
+        </DataList.RowLink>
+      ) : (
+        <DataList.RowStatic key={row.id}>{row.cells}</DataList.RowStatic>
+      ),
+    );
+  }
+  ```
+
+- Fixed Studio Settings page (and other default-height `PageLayout` pages) clipping their content with no scrollbar on viewports shorter than the form. Users on short laptop screens (under ~991px tall) could not reach the Save button under the Mastra Connection headers form, making it impossible to apply changes. Default-height `PageLayout` pages now grow with their content and scroll through the studio chrome wrapper; `height="full"` pages (Logs, Traces, Metrics, etc.) are unchanged. ([#16999](https://github.com/mastra-ai/mastra/pull/16999))
+
+- Restyled scrollbars across the studio UI to match the design system — thin, themed thumb on a transparent track — replacing the default OS scrollbars that clashed with dark and light surfaces. ([#16918](https://github.com/mastra-ai/mastra/pull/16918))
+
+- Updated dependencies [[`6096445`](https://github.com/mastra-ai/mastra/commit/60964459733f0ab384584d95e19c36607ffdf7b0), [`91cf0e0`](https://github.com/mastra-ai/mastra/commit/91cf0e027e511b871481a8576b56b7af83b15afd)]:
+  - @mastra/core@1.37.0-alpha.5
+  - @mastra/client-js@1.21.0-alpha.5
+  - @mastra/react@0.4.1-alpha.5
+
 ## 30.0.0-alpha.4
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('./index.css');const jsxRuntime = require('react/jsx-runtime');
-const tokens = require('./tokens.cjs.js');
 const React = require('react');
+const tokens = require('./tokens.cjs.js');
 const tooltip = require('@base-ui/react/tooltip');
 const langJson = require('@codemirror/lang-json');
 const langMarkdown = require('@codemirror/lang-markdown');
@@ -25,7 +25,8 @@ const collapsible = require('@base-ui/react/collapsible');
 const combobox = require('@base-ui/react/combobox');
 const cmdk = require('cmdk');
 const dialog = require('@base-ui/react/dialog');
-const SelectPrimitive = require('@radix-ui/react-select');
+const contextMenu = require('@base-ui/react/context-menu');
+const select = require('@base-ui/react/select');
 const tabs = require('@base-ui/react/tabs');
 const drawer = require('@base-ui/react/drawer');
 const menu = require('@base-ui/react/menu');
@@ -75,7 +76,6 @@ function _interopNamespaceDefault(e) {
 }
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
 const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
 const Dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(Dialog$1);
 
@@ -3424,17 +3424,31 @@ const sizeClasses$4 = {
   md: "h-avatar-md w-avatar-md",
   lg: "h-avatar-lg w-avatar-lg"
 };
-const Avatar = ({ src, name, size = "sm", interactive = false }) => {
+const Avatar = ({ src, name, size = "sm", interactive = false, color, textColor }) => {
+  const [didError, setDidError] = React.useState(false);
+  const initial = name.trim()[0]?.toUpperCase() ?? "A";
+  const showImage = Boolean(src) && !didError;
+  const showFallbackTint = !showImage && Boolean(color);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
         sizeClasses$4[size],
-        "border border-border1 bg-surface3 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
+        "border border-border1 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
+        !showFallbackTint && "bg-surface3",
         transitions.all,
         interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
       ),
-      children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-center text-neutral4", children: name[0].toUpperCase() })
+      style: showFallbackTint ? { backgroundColor: color } : void 0,
+      children: showImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "h-full w-full object-cover", onError: () => setDidError(true) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        Txt,
+        {
+          variant: "ui-md",
+          className: cn("text-center", !showFallbackTint && "text-neutral4"),
+          style: showFallbackTint && textColor ? { color: textColor } : void 0,
+          children: initial
+        }
+      )
     }
   );
 };
@@ -6695,13 +6709,226 @@ const CommandShortcut = ({ className, ...props }) => {
 };
 CommandShortcut.displayName = "CommandShortcut";
 
-const Select = SelectPrimitive__namespace.Root;
-const SelectGroup = SelectPrimitive__namespace.Group;
-const SelectValue = SelectPrimitive__namespace.Value;
+const ContextMenuRoot = contextMenu.ContextMenu.Root;
+const ContextMenuGroup = contextMenu.ContextMenu.Group;
+const ContextMenuPortal = contextMenu.ContextMenu.Portal;
+const ContextMenuSub = contextMenu.ContextMenu.SubmenuRoot;
+const ContextMenuRadioGroup = contextMenu.ContextMenu.RadioGroup;
+const itemClass$1 = cn(
+  "relative flex cursor-pointer select-none items-center gap-2.5 rounded-lg px-2 py-1.5 text-ui-smd leading-ui-sm transition-colors text-neutral4 hover:text-neutral6 focus:text-neutral6 hover:bg-surface4 focus:bg-surface4 data-[highlighted]:bg-surface4 data-[highlighted]:text-neutral6 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent data-disabled:hover:text-neutral4 data-disabled:focus:bg-transparent data-disabled:focus:text-neutral4 data-disabled:data-[highlighted]:bg-transparent data-disabled:data-[highlighted]:text-neutral4 [&>span]:truncate [&_svg]:size-4 [&_svg]:shrink-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0",
+  "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-60 [&:hover>svg]:opacity-100"
+);
+const popupClass$1 = cn(
+  "bg-surface3 text-neutral4 z-50 min-w-44 max-h-[min(20rem,var(--available-height))] overflow-x-hidden overflow-y-auto rounded-xl border border-border1 p-1 shadow-dialog origin-[var(--transform-origin)] outline-none",
+  "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
+  "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1"
+);
+const ContextMenuTrigger = contextMenu.ContextMenu.Trigger;
+const ContextMenuContent = React__namespace.forwardRef(
+  ({ className, align = "start", alignOffset = 4, side, sideOffset = 0, container, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(contextMenu.ContextMenu.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
+    contextMenu.ContextMenu.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        contextMenu.ContextMenu.Popup,
+        {
+          ref,
+          "data-slot": "context-menu-content",
+          className: cn(popupClass$1, className),
+          ...props
+        }
+      )
+    }
+  ) })
+);
+ContextMenuContent.displayName = "ContextMenuContent";
+const ContextMenuItem = React__namespace.forwardRef(
+  ({ className, inset, variant = "default", onSelect, onClick, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    contextMenu.ContextMenu.Item,
+    {
+      ref,
+      "data-inset": inset ? "" : void 0,
+      "data-variant": variant,
+      onClick: (event) => {
+        onClick?.(event);
+        onSelect?.(event);
+      },
+      className: cn(
+        itemClass$1,
+        inset && "pl-8",
+        "data-[variant=destructive]:text-accent2 data-[variant=destructive]:hover:bg-accent2/10 data-[variant=destructive]:hover:text-accent2 data-[variant=destructive]:data-[highlighted]:bg-accent2/10 data-[variant=destructive]:data-[highlighted]:text-accent2",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ContextMenuItem.displayName = "ContextMenuItem";
+const ContextMenuCheckboxItem = React__namespace.forwardRef(
+  ({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    contextMenu.ContextMenu.CheckboxItem,
+    {
+      ref,
+      checked,
+      className: cn(itemClass$1, "w-full", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-border2 flex h-4 w-4 items-center justify-center rounded-sm", children: /* @__PURE__ */ jsxRuntime.jsx(contextMenu.ContextMenu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }) }),
+        children
+      ]
+    }
+  )
+);
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+const ContextMenuRadioItem = React__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    contextMenu.ContextMenu.RadioItem,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-ui-smd leading-ui-sm transition-colors text-neutral4 hover:text-neutral6 focus:text-neutral6 hover:bg-surface4 focus:bg-surface4 data-[highlighted]:bg-surface4 data-[highlighted]:text-neutral6 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent data-disabled:hover:text-neutral4 data-disabled:focus:bg-transparent data-disabled:focus:text-neutral4 data-disabled:data-[highlighted]:bg-transparent data-disabled:data-[highlighted]:text-neutral4 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(contextMenu.ContextMenu.RadioItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  )
+);
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+const ContextMenuLabel = React__namespace.forwardRef(
+  ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "px-2 pt-1.5 pb-1 text-ui-xs font-medium uppercase tracking-wider text-neutral3",
+        inset && "pl-8",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ContextMenuLabel.displayName = "ContextMenuLabel";
+const ContextMenuSeparator = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(contextMenu.ContextMenu.Separator, { ref, className: cn("bg-border1 -mx-1 my-1 h-px", className), ...props })
+);
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+const ContextMenuShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+const ContextMenuSubTrigger = React__namespace.forwardRef(
+  ({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    contextMenu.ContextMenu.SubmenuTrigger,
+    {
+      ref,
+      className: cn(
+        itemClass$1,
+        "data-[popup-open]:bg-surface4 data-[popup-open]:text-neutral6",
+        inset && "pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pl-2", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "-rotate-90 opacity-50" }) })
+      ]
+    }
+  )
+);
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+const ContextMenuSubContent = React__namespace.forwardRef(
+  ({ className, align = "start", alignOffset = -4, side = "right", sideOffset = -4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(contextMenu.ContextMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    contextMenu.ContextMenu.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        contextMenu.ContextMenu.Popup,
+        {
+          ref,
+          "data-slot": "context-menu-sub-content",
+          className: cn(popupClass$1, className),
+          ...props
+        }
+      )
+    }
+  ) })
+);
+ContextMenuSubContent.displayName = "ContextMenuSubContent";
+function ContextMenu({
+  open,
+  defaultOpen,
+  onOpenChange,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuRoot, { open, defaultOpen, onOpenChange, children });
+}
+ContextMenu.Trigger = ContextMenuTrigger;
+ContextMenu.Content = ContextMenuContent;
+ContextMenu.Group = ContextMenuGroup;
+ContextMenu.Portal = ContextMenuPortal;
+ContextMenu.Item = ContextMenuItem;
+ContextMenu.CheckboxItem = ContextMenuCheckboxItem;
+ContextMenu.RadioItem = ContextMenuRadioItem;
+ContextMenu.Label = ContextMenuLabel;
+ContextMenu.Separator = ContextMenuSeparator;
+ContextMenu.Shortcut = ContextMenuShortcut;
+ContextMenu.Sub = ContextMenuSub;
+ContextMenu.SubContent = ContextMenuSubContent;
+ContextMenu.SubTrigger = ContextMenuSubTrigger;
+ContextMenu.RadioGroup = ContextMenuRadioGroup;
+
+function isSelectItem(node) {
+  return React__namespace.isValidElement(node) && node.type?.displayName === "SelectItem";
+}
+function collectItems(children, acc) {
+  React__namespace.Children.forEach(children, (child) => {
+    if (!React__namespace.isValidElement(child)) return;
+    if (isSelectItem(child)) {
+      acc.push({ value: child.props.value, label: child.props.children });
+      return;
+    }
+    const nested = child.props?.children;
+    if (nested != null) collectItems(nested, acc);
+  });
+}
+function Select({ children, items, onValueChange, ...props }) {
+  const derivedItems = React__namespace.useMemo(() => {
+    if (items != null) return items;
+    const acc = [];
+    collectItems(children, acc);
+    return acc.length > 0 ? acc : void 0;
+  }, [items, children]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select.Root,
+    {
+      items: derivedItems,
+      onValueChange: onValueChange ? (value, eventDetails) => onValueChange(value, eventDetails) : void 0,
+      ...props,
+      children
+    }
+  );
+}
+Select.displayName = "Select";
+const SelectGroup = select.Select.Group;
+const SelectValue = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(select.Select.Value, { ref, className: cn("truncate", className), ...props }));
+SelectValue.displayName = "SelectValue";
 const SelectTrigger = React__namespace.forwardRef(
-  ({ className, children, size = "default", ...props }, ref) => {
+  ({ className, children, size = "default", variant: _variant, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      SelectPrimitive__namespace.Trigger,
+      select.Select.Trigger,
       {
         ref,
         className: cn(
@@ -6711,7 +6938,7 @@ const SelectTrigger = React__namespace.forwardRef(
           "outline-none transition-colors duration-normal ease-out-custom",
           "hover:bg-surface3 hover:text-neutral6 hover:border-border2 active:bg-surface4",
           "focus:outline-none focus-visible:outline-none focus-visible:border-border2",
-          "data-[state=open]:bg-surface3 data-[state=open]:text-neutral6 data-[state=open]:border-border2",
+          "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2",
           "data-[placeholder]:text-neutral3",
           "disabled:cursor-not-allowed disabled:opacity-50",
           "[&>span]:truncate",
@@ -6720,39 +6947,47 @@ const SelectTrigger = React__namespace.forwardRef(
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("h-4 w-4 shrink-0 text-neutral3 opacity-70", transitions.colors) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            select.Select.Icon,
+            {
+              render: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("h-4 w-4 shrink-0 text-neutral3 opacity-70", transitions.colors) })
+            }
+          )
         ]
       }
     );
   }
 );
-SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-const SelectContent = React__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.Content,
-  {
-    ref,
-    className: cn(
-      "relative z-50 min-w-32 max-h-dropdown-max-height overflow-y-auto overflow-x-hidden rounded-xl border border-border1 bg-surface3 text-neutral4 shadow-dialog data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      SelectPrimitive__namespace.Viewport,
-      {
-        className: cn(
-          "p-1",
-          position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
-        ),
-        children
-      }
-    )
-  }
-) }));
-SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
+SelectTrigger.displayName = "SelectTrigger";
+const SelectContent = React__namespace.forwardRef(
+  ({ className, children, position: _position, container, side = "bottom", align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select.Positioner,
+    {
+      className: "z-50 outline-none",
+      side,
+      align,
+      sideOffset,
+      alignItemWithTrigger: false,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        select.Select.Popup,
+        {
+          ref,
+          className: cn(
+            "relative z-50 min-w-32 min-w-[var(--anchor-width)] max-h-dropdown-max-height max-h-[var(--available-height)] overflow-y-auto overflow-x-hidden rounded-xl border border-border1 bg-surface3 p-1 text-neutral4 shadow-dialog origin-[var(--transform-origin)]",
+            "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
+            "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.List, { children })
+        }
+      )
+    }
+  ) })
+);
+SelectContent.displayName = "SelectContent";
 const SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Item,
+  select.Select.Item,
   {
     ref,
     className: cn(
@@ -6762,18 +6997,18 @@ const SelectItem = React__namespace.forwardRef(({ className, children, ...props
       "hover:bg-surface4 hover:text-neutral6",
       "focus:bg-surface4 focus:text-neutral6",
       "data-[highlighted]:bg-surface4 data-[highlighted]:text-neutral6",
-      "data-[state=checked]:text-neutral6",
+      "data-[selected]:text-neutral6",
       "data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-neutral6" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-neutral6" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemText, { children })
     ]
   }
 ));
-SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
+SelectItem.displayName = "SelectItem";
 
 const Tabs = ({ children, defaultTab, value, onValueChange, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -6800,20 +7035,21 @@ const tabListVariants = cva("flex items-center relative text-ui-lg", {
     variant: "line"
   }
 });
-const TabList = ({ children, className, variant, sticky }) => {
+const TabList = ({ children, className, variant, sticky, style }) => {
   const resolvedVariant = variant ?? "line";
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", sticky && "sticky top-0 z-10 bg-surface2"), children: /* @__PURE__ */ jsxRuntime.jsxs(
     tabs.Tabs.List,
     {
       "data-variant": resolvedVariant,
       className: cn("group/tabs-list", tabListVariants({ variant: resolvedVariant }), className),
+      style,
       children: [
         children,
         resolvedVariant === "line" && /* @__PURE__ */ jsxRuntime.jsx(
           tabs.Tabs.Indicator,
           {
             className: cn(
-              "absolute bottom-0 left-0 bg-neutral3",
+              "absolute bottom-0 left-0 bg-[var(--tab-indicator-color,var(--neutral3))]",
               "w-[var(--active-tab-width)] h-0.5",
               "transition-all duration-200 ease-in-out"
             ),
@@ -6824,7 +7060,7 @@ const TabList = ({ children, className, variant, sticky }) => {
           tabs.Tabs.Indicator,
           {
             className: cn(
-              "absolute top-1/2 left-0 z-0 rounded-full bg-surface4",
+              "absolute top-1/2 left-0 z-0 rounded-full bg-[var(--tab-indicator-color,var(--surface4))]",
               "w-[var(--active-tab-width)] h-[calc(100%-0.5rem)]",
               "transition-all duration-200 ease-in-out"
             ),
@@ -9233,7 +9469,14 @@ const searchbarSizeClasses = {
   lg: formElementSizes.lg,
   default: formElementSizes.default
 };
-const Searchbar = ({ onSearch, label, placeholder, debounceMs = 300, size = "md" }) => {
+const Searchbar = ({
+  onSearch,
+  label,
+  placeholder,
+  debounceMs = 300,
+  size = "md",
+  className
+}) => {
   const id = React.useId();
   const inputRef = React.useRef(null);
   const debouncedSearch = useDebounce.useDebouncedCallback((value) => {
@@ -9270,7 +9513,8 @@ const Searchbar = ({ onSearch, label, placeholder, debounceMs = 300, size = "md"
         formElementFocusWithin,
         transitions.all,
         "hover:border-neutral2",
-        searchbarSizeClasses[size]
+        searchbarSizeClasses[size],
+        className
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: cn("text-neutral3 h-4 w-4", transitions.colors) }),
@@ -13334,6 +13578,31 @@ function DataListRowLink({
   );
 }
 
+const DataListRowStatic = React.forwardRef(
+  ({ children, className, flushLeft, flushRight, colStart, colEnd, featured, style, ...rest }, ref) => {
+    const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "mx-1 grid grid-cols-subgrid gap-8 px-5",
+          ...dataListRowOuterStyles,
+          flushLeft && "ml-0!",
+          flushRight && "mr-0!",
+          featured && "bg-surface4",
+          className
+        ),
+        style: resolvedStyle,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListRowStatic.displayName = "DataListRowStatic";
+
 function DataListSpacer({ height }) {
   if (height <= 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full", style: { height } });
@@ -13468,6 +13737,7 @@ const DataList = Object.assign(DataListRoot, {
   Row: DataListRow,
   RowButton: DataListRowButton,
   RowLink: DataListRowLink,
+  RowStatic: DataListRowStatic,
   Cell: DataListCell,
   TextCell: DataListTextCell,
   NameCell: DataListNameCell,
@@ -13958,10 +14228,10 @@ function PageLayoutRoot({
     "main",
     {
       className: cn(
-        "w-full h-full grid grid-rows-[auto_auto] p-6 content-start overflow-y-auto",
+        "w-full grid grid-rows-[auto_auto] p-6 content-start",
         {
           "max-w-screen-lg mx-auto pt-8": width === "narrow",
-          "grid-rows-[auto_1fr]": height === "full"
+          "h-full grid-rows-[auto_1fr] overflow-y-auto": height === "full"
         },
         className
         //   'LAYOUT_ROOT border border-dashed border-orange-400',
@@ -15686,7 +15956,7 @@ const isValidJson = (str) => {
   }
 };
 
-const stringToColor = (str, lightness = 75, saturation = 100) => {
+const stringToColor = (str, lightness = 90, saturation = 100) => {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
     hash = str.charCodeAt(i) + ((hash << 5) - hash);
@@ -22139,6 +22409,7 @@ exports.CommandShortcut = CommandShortcut;
 exports.CommitIcon = CommitIcon;
 exports.ContentBlock = ContentBlock;
 exports.ContentBlocks = ContentBlocks;
+exports.ContextMenu = ContextMenu;
 exports.CopyButton = CopyButton;
 exports.CrossIcon = CrossIcon;
 exports.Crumb = Crumb;