@mastra/playground-ui 30.0.1-alpha.0 → 30.0.2-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,102 @@
 # @mastra/playground-ui
 
+## 30.0.2-alpha.1
+
+### Patch Changes
+
+- Pointer drags inside the `SideDialog` body now select text reliably instead of fighting with the close-swipe gesture. The popup chrome (header, edges) still closes the drawer on drag. ([#16959](https://github.com/mastra-ai/mastra/pull/16959))
+
+  **Drawer composition**
+
+  `DrawerContent` is now the shadcn-style opinionated bundle (`DrawerPortal` + `DrawerBackdrop` + `DrawerViewport` + `DrawerPopup`, with a handle bar on top/bottom-anchored drawers and a fade-out when a nested drawer covers the parent). Most drawers can now be written as:
+
+  ```tsx
+  <Drawer>
+    <DrawerTrigger>…</DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>…</DrawerHeader>
+      <DrawerBody>…</DrawerBody>
+    </DrawerContent>
+  </Drawer>
+  ```
+
+  The low-level primitives (`DrawerPortal`, `DrawerBackdrop`, `DrawerViewport`, `DrawerPopup`) remain exported for drawers that need a custom portal target, non-modal page behavior, or chrome outside the popup (see the `SwipeToOpen` and `NonModal` Storybook examples).
+
+  Base UI's text-selectable region (the `Drawer.Content` part — pointer drags inside it select text instead of closing the drawer) is now exported as `DrawerInteractive`. Migration:
+
+  ```tsx
+  // Before
+  import { DrawerContent } from '@mastra/playground-ui';
+  <DrawerContent render={<div>...</div>} />;
+
+  // After
+  import { DrawerInteractive } from '@mastra/playground-ui';
+  <DrawerInteractive render={<div>...</div>} />;
+  ```
+
+- Improved `@mastra/playground-ui` stability by removing legacy runtime UI dependencies without changing `SideDialog`, `MainSidebar`, or accessibility behavior. Nested `SideDialog` levels now stack consistently, so multi-level flows behave predictably. ([#16959](https://github.com/mastra-ai/mastra/pull/16959))
+
+- Updated dependencies [[`49f8abc`](https://github.com/mastra-ai/mastra/commit/49f8abce8258e4f2f87bd326acfbdb641264a47c)]:
+  - @mastra/client-js@1.21.2-alpha.1
+  - @mastra/core@1.37.2-alpha.1
+  - @mastra/react@0.4.3-alpha.1
+
+## 30.0.2-alpha.0
+
+### Patch Changes
+
+- Updated dependencies [[`07c3de7`](https://github.com/mastra-ai/mastra/commit/07c3de7f7bc418beccaea3b5e6b7f7cdda79d492)]:
+  - @mastra/core@1.37.2-alpha.0
+  - @mastra/client-js@1.21.2-alpha.0
+  - @mastra/react@0.4.3-alpha.0
+
+## 30.0.1
+
+### Patch Changes
+
+- Renamed `DataList.Row` (the non-interactive grid wrapper) to `DataList.RowWrapper` for clarity, since the name `Row` was easy to confuse with the interactive row primitives (`.RowButton`, `.RowLink`, `.RowStatic`). The corresponding exported component is now `DataListRowWrapper` (was `DataListRow`). ([#17123](https://github.com/mastra-ai/mastra/pull/17123))
+
+  **Migration**
+
+  ```tsx
+  // Before
+  <DataList.Row>
+    <DataList.SelectCell ... />
+    <DataList.RowButton ...>...</DataList.RowButton>
+  </DataList.Row>
+
+  // After
+  <DataList.RowWrapper>
+    <DataList.SelectCell ... />
+    <DataList.RowButton ...>...</DataList.RowButton>
+  </DataList.RowWrapper>
+  ```
+
+  The `.RowButton`, `.RowLink`, and `.RowStatic` primitives are unchanged.
+
+- `ContextMenu` Positioner and popup raised from `z-50` to `z-1000` with `isolate`, so the menu sits above app chrome that uses higher stacking contexts (e.g. sticky headers with `z-500`). Previously the menu would render behind such elements when opened on triggers near them. ([#17133](https://github.com/mastra-ai/mastra/pull/17133))
+
+- Removed the EntityList and EntityListPageLayout components — they were superseded by DataList. The 9 Studio root list pages (Agents, Datasets, Experiments, MCPs, Processors, Prompts, Scorers, Tools, Workflows) now build on DataList, matching the condensed layout shared across the rest of Studio. ([#17058](https://github.com/mastra-ai/mastra/pull/17058))
+
+  **Migration**
+
+  If you were importing EntityList or EntityListPageLayout from `@mastra/playground-ui`, switch to DataList — its API is a strict superset:
+
+  ```tsx
+  // Before
+  import { EntityList, EntityListSkeleton } from '@mastra/playground-ui';
+
+  // After
+  import { DataList, DataListSkeleton } from '@mastra/playground-ui';
+  ```
+
+  The primitive names match (`.Top`, `.TopCell`, `.TopCellSmart`, `.RowLink`, `.Cell`, `.TextCell`, `.NameCell`, `.DescriptionCell`, `.NoMatch`, `.Pagination`). DataList additionally exposes `.Row`, `.RowButton`, `.RowStatic`, `.IdCell`, `.MonoCell`, `.SelectCell`, `.NextPageLoading`, and more — useful when you need selection rows or action cells outside a RowLink.
+
+- Updated dependencies [[`21db1a4`](https://github.com/mastra-ai/mastra/commit/21db1a4b8ac058d5a4fbe38b516cc1b81e526915)]:
+  - @mastra/core@1.37.1
+  - @mastra/client-js@1.21.1
+  - @mastra/react@0.4.2
+
 ## 30.0.1-alpha.0
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -30,7 +30,7 @@ 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');
-const VisuallyHidden = require('@radix-ui/react-visually-hidden');
+const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 const previewCard = require('@base-ui/react/preview-card');
 const Markdown = require('react-markdown');
 const remarkGfm = require('remark-gfm');
@@ -43,8 +43,6 @@ const slider = require('@base-ui/react/slider');
 const _switch = require('@base-ui/react/switch');
 const dateFns = require('date-fns');
 const reactDayPicker = require('react-day-picker');
-const reactSlot = require('@radix-ui/react-slot');
-const Dialog$1 = require('@radix-ui/react-dialog');
 const dnd = require('@hello-pangea/dnd');
 const merge = require('@codemirror/merge');
 const format = require('date-fns/format');
@@ -76,8 +74,6 @@ function _interopNamespaceDefault(e) {
 }
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
-const Dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(Dialog$1);
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -6719,7 +6715,7 @@ const itemClass$1 = cn(
   "[&>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",
+  "bg-surface3 text-neutral4 z-1000 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"
 );
@@ -6732,7 +6728,7 @@ const ContextMenuContent = React__namespace.forwardRef(
       alignOffset,
       side,
       sideOffset,
-      className: "z-50 outline-none",
+      className: "isolate z-1000 outline-none",
       children: /* @__PURE__ */ jsxRuntime.jsx(
         contextMenu.ContextMenu.Popup,
         {
@@ -6853,7 +6849,7 @@ const ContextMenuSubContent = React__namespace.forwardRef(
       alignOffset,
       side,
       sideOffset,
-      className: "z-50 outline-none",
+      className: "isolate z-1000 outline-none",
       children: /* @__PURE__ */ jsxRuntime.jsx(
         contextMenu.ContextMenu.Popup,
         {
@@ -7247,6 +7243,7 @@ const DrawerIndent = drawer.Drawer.Indent;
 const DrawerIndentBackground = drawer.Drawer.IndentBackground;
 const DrawerSwipeArea = drawer.Drawer.SwipeArea;
 const createDrawerHandle = drawer.Drawer.createHandle;
+const DrawerInteractive = drawer.Drawer.Content;
 const DrawerBackdrop = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   drawer.Drawer.Backdrop,
   {
@@ -7280,7 +7277,6 @@ const drawerPopupBaseClass = cn(
   "drawer-popup group/popup relative z-50 box-border flex flex-col overflow-y-auto overscroll-contain outline-none [touch-action:auto] will-change-transform",
   "border-border1 bg-surface3 text-neutral5 shadow-dialog",
   "data-[swiping]:select-none",
-  // Dim layer drawn over a parent drawer while a nested drawer covers it.
   "after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:transition-[background-color] after:duration-[450ms] after:content-['']",
   "data-[nested-drawer-open]:after:bg-black/25"
 );
@@ -7307,29 +7303,27 @@ const nestedFadeClass = cn(
   "transition-opacity duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:duration-0",
   "group-data-[nested-drawer-open]/popup:opacity-0"
 );
-const HandleBar = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto my-2 h-1 w-12 shrink-0 rounded-full bg-surface5", nestedFadeClass) });
-const DrawerContent = React__namespace.forwardRef(
-  ({ className, children, container, hideBackdrop, hideCloseButton, hideHandle, ...props }, ref) => {
-    const side = useDrawerSide();
-    const showHandle = !hideHandle && (side === "top" || side === "bottom");
-    return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { container: container ?? void 0, children: [
-      !hideBackdrop && /* @__PURE__ */ jsxRuntime.jsx(DrawerBackdrop, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(DrawerViewport, { className: hideBackdrop ? "pointer-events-none" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(DrawerPopup, { ref, className: cn(hideBackdrop && "pointer-events-auto", className), ...props, children: [
-        showHandle && side === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(HandleBar, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "drawer-content", className: cn("relative flex min-h-0 flex-1 flex-col", nestedFadeClass), children: [
-          children,
-          !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
-            drawer.Drawer.Close,
-            {
-              render: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-3 right-3", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
-            }
-          )
-        ] }),
-        showHandle && side === "top" && /* @__PURE__ */ jsxRuntime.jsx(HandleBar, {})
-      ] }) })
-    ] });
+const DrawerHandleBar = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    "aria-hidden": true,
+    "data-slot": "drawer-handle",
+    className: cn("mx-auto my-2 h-1 w-12 shrink-0 rounded-full bg-surface5", nestedFadeClass)
   }
 );
+DrawerHandleBar.displayName = "DrawerHandleBar";
+const DrawerContent = React__namespace.forwardRef(({ className, children, ...props }, ref) => {
+  const side = useDrawerSide();
+  const showHandle = side === "top" || side === "bottom";
+  return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DrawerBackdrop, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(DrawerViewport, { children: /* @__PURE__ */ jsxRuntime.jsxs(DrawerPopup, { ref, className, ...props, children: [
+      showHandle && side === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(DrawerHandleBar, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "drawer-content", className: cn("relative flex min-h-0 flex-1 flex-col", nestedFadeClass), children }),
+      showHandle && side === "top" && /* @__PURE__ */ jsxRuntime.jsx(DrawerHandleBar, {})
+    ] }) })
+  ] });
+});
 DrawerContent.displayName = "DrawerContent";
 const DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "drawer-header", className: cn("flex flex-col gap-0.5 px-4 py-3 text-left", className), ...props });
 DrawerHeader.displayName = "DrawerHeader";
@@ -7746,7 +7740,7 @@ function TextFieldBlock({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(FieldBlock.Layout, { layout, labelColumnWidth, className, children: [
-    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Label, { name, required, size: labelSize || "bigger", children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
+    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Label, { name, required, size: labelSize || "bigger", children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(FieldBlock.Column, { children: [
       !labelIsHidden && layout === "vertical" ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Label, { name, required, size: labelSize || "default", children: label }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -7808,7 +7802,7 @@ function SearchFieldBlock({
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(FieldBlock.Layout, { layout, className, children: [
-    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
+    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(FieldBlock.Column, { children: [
       layout === "vertical" && label && !labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Label, { name, required, children: label }) : null,
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
@@ -7886,7 +7880,7 @@ function SelectFieldBlock({
   className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(FieldBlock.Layout, { layout, labelColumnWidth, className, children: [
-    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
+    layout === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Label, { name, required, children: labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: label }) : label }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(FieldBlock.Column, { children: [
       layout === "vertical" && label && !labelIsHidden ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlock.Label, { name, required, children: label }) : null,
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10824,7 +10818,7 @@ const JSONSchemaForm = {
 
 function KeyValueList({ data, className, labelsAreHidden, isLoading, LinkComponent: Link }) {
   const LabelWrapper = ({ children }) => {
-    return labelsAreHidden ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children }) : children;
+    return labelsAreHidden ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children }) : children;
   };
   if (!data || data.length === 0) {
     return null;
@@ -11194,7 +11188,7 @@ function MainSidebarNavHeader({
       ) : children
     }
   ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("header", { ...props, children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("header", { ...props, children }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "mx-3 h-px flex-1 bg-border1" })
   ] }) });
 }
@@ -11203,7 +11197,7 @@ function MainSidebarNavLabel({ children, className, state: stateProp, ...rest })
   const ctx = useMaybeSidebar();
   const state = stateProp ?? ctx?.state ?? "default";
   if (state === "collapsed") {
-    return /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, className: cn("min-w-0 flex-1 truncate text-left", className), children });
 }
@@ -11247,7 +11241,14 @@ function MainSidebarNavLink({
   });
   let interactiveEl = null;
   if (asChild) {
-    interactiveEl = /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: itemClassName, children });
+    if (!React.isValidElement(children)) {
+      throw new Error(
+        "MainSidebarNavLink requires a valid React element child when `asChild` is true so it can apply `SlottedNavChildProps` and merge `itemClassName`."
+      );
+    }
+    interactiveEl = React.cloneElement(children, {
+      className: cn(itemClassName, children.props.className)
+    });
   } else if (link) {
     interactiveEl = /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: link.url, ...linkParams, className: itemClassName, children: [
       link.icon,
@@ -11426,32 +11427,32 @@ function MainSidebarRoot({ children, className }) {
     [setOpenMobile]
   );
   if (isMobile) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        Dialog__namespace.Overlay,
+        dialog.Dialog.Backdrop,
         {
           className: cn(
             "fixed inset-0 z-40 bg-overlay backdrop-blur-sm",
-            "data-[state=open]:animate-in data-[state=closed]:animate-out",
-            "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+            "opacity-100 transition-opacity duration-200 ease-out motion-reduce:transition-none",
+            "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-in"
           )
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        Dialog__namespace.Content,
+        dialog.Dialog.Popup,
         {
           className: cn(
             "fixed inset-y-0 left-0 z-50 flex h-full flex-col",
             "w-3/4 max-w-(--sidebar-width-mobile)",
             "bg-surface2 shadow-xl",
-            "data-[state=open]:animate-in data-[state=closed]:animate-out",
-            "data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
+            "data-[open]:animate-in data-[closed]:animate-out",
+            "data-[open]:slide-in-from-left data-[closed]:slide-out-to-left",
             "duration-200",
             className
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { children: "Navigation" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Description, { children: "Primary site navigation drawer" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { children: "Navigation" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Description, { children: "Primary site navigation drawer" }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: closeOnAnchor, className: "flex flex-col h-full min-h-0 px-4 py-2 overflow-hidden", children })
           ]
         }
@@ -11911,7 +11912,12 @@ function containsInnerNewline$2(obj) {
 }
 
 function SideDialogContent({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 pl-9 overflow-y-scroll grid gap-6 content-start pb-8", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DrawerInteractive,
+    {
+      render: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 pl-9 overflow-y-scroll grid gap-6 content-start pb-8", className), children })
+    }
+  );
 }
 
 function SideDialogHeader({ children, className }) {
@@ -11973,62 +11979,65 @@ function SideDialogRoot({
   className
 }) {
   const isConfirmation = variant === "confirmation";
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
-    !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(
-      Dialog__namespace.Overlay,
-      {
-        className: cn(
-          "bg-overlay backdrop-blur-sm top-0 bottom-0 right-0 left-0 fixed z-50",
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-200",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-150"
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Dialog__namespace.Content,
-      {
-        className: cn(
-          "fixed top-0 bottom-0 right-0 border-l border-border2 z-50 bg-surface2",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-right-1/4 data-[state=closed]:duration-200",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Drawer,
+    {
+      side: "right",
+      open: isOpen,
+      onOpenChange: (open) => {
+        if (!open) onClose?.();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
+        !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(DrawerBackdrop, { className: "backdrop-blur-sm" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DrawerViewport, { className: isConfirmation ? "pointer-events-none" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          DrawerPopup,
           {
-            "w-[75vw] 2xl:w-[65vw] 4xl:w-[55vw]": level === 1,
-            "w-[70vw] 2xl:w-[59vw] 4xl:w-[48vw]": level === 2,
-            "w-[65vw] 2xl:w-[53vw] 4xl:w-[41vw]": level === 3,
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-right-1/4 data-[state=open]:duration-300 shadow-dialog": !isConfirmation,
-            "bg-surface2/70 backdrop-blur-sm": isConfirmation
-          },
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(VisuallyHidden__namespace.Root, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { children: dialogTitle }),
-            /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Description, { children: dialogDescription })
-          ] }),
-          !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: cn(
-                "flex appearance-none items-center justify-center rounded-bl-lg h-14 w-14 absolute top-0 -left-14 bg-surface2 text-neutral3 border-l border-b border-border2",
-                transitions.all,
-                "hover:bg-surface4 hover:text-neutral5"
+            className: cn(
+              "max-w-none rounded-none border-y-0 border-r-0 border-l border-border2 bg-surface2 overflow-visible",
+              {
+                "w-[75vw] 2xl:w-[65vw] 4xl:w-[55vw]": level === 1,
+                "w-[70vw] 2xl:w-[59vw] 4xl:w-[48vw]": level === 2,
+                "w-[65vw] 2xl:w-[53vw] 4xl:w-[41vw]": level === 3,
+                "pointer-events-auto bg-surface2/70 backdrop-blur-sm shadow-none": isConfirmation
+              },
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { className: "sr-only", children: dialogTitle }),
+              /* @__PURE__ */ jsxRuntime.jsx(DrawerDescription, { className: "sr-only", children: dialogDescription }),
+              !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(
+                DrawerClose,
+                {
+                  render: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: cn(
+                        "flex appearance-none items-center justify-center rounded-bl-lg h-14 w-14 absolute top-0 -left-14 bg-surface2 text-neutral3 border-l border-b border-border2",
+                        transitions.all,
+                        "hover:bg-surface4 hover:text-neutral5"
+                      ),
+                      "aria-label": "Close",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
+                    }
+                  )
+                }
               ),
-              "aria-label": "Close",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn("grid h-full", {
-                "grid-rows-[auto_1fr]": !isConfirmation
-              }),
-              children
-            }
-          )
-        ]
-      }
-    )
-  ] }) });
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("grid h-full", {
+                    "grid-rows-[auto_1fr]": !isConfirmation
+                  }),
+                  children
+                }
+              )
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
 }
 
 function SideDialogTop({ children, className }) {
@@ -13516,11 +13525,6 @@ const dataListRowStyles = [
   ...dataListRowOuterStyles
 ];
 
-const DataListRow = React.forwardRef(({ children, className, ...rest }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("grid grid-cols-subgrid gap-0 mx-1", ...dataListRowOuterStyles, className), ...rest, children });
-});
-DataListRow.displayName = "DataListRow";
-
 const DataListRowButton = React.forwardRef(
   ({ children, className, type = "button", flushLeft, flushRight, colStart, colEnd, featured, style, ...rest }, ref) => {
     const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
@@ -13603,6 +13607,21 @@ const DataListRowStatic = React.forwardRef(
 );
 DataListRowStatic.displayName = "DataListRowStatic";
 
+const DataListRowWrapper = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("grid grid-cols-subgrid gap-0 mx-1", ...dataListRowOuterStyles, className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListRowWrapper.displayName = "DataListRowWrapper";
+
 function DataListSpacer({ height }) {
   if (height <= 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full", style: { height } });
@@ -13734,7 +13753,7 @@ const DataList = Object.assign(DataListRoot, {
   TopCell: DataListTopCell,
   TopCellWithTooltip: DataListTopCellWithTooltip,
   TopCellSmart: DataListTopCellSmart,
-  Row: DataListRow,
+  RowWrapper: DataListRowWrapper,
   RowButton: DataListRowButton,
   RowLink: DataListRowLink,
   RowStatic: DataListRowStatic,
@@ -13943,7 +13962,7 @@ const LogsDataList = Object.assign(DataListRoot, {
   TopCell: DataListTopCell,
   TopCellWithTooltip: DataListTopCellWithTooltip,
   TopCellSmart: DataListTopCellSmart,
-  Row: DataListRow,
+  RowWrapper: DataListRowWrapper,
   RowButton: DataListRowButton,
   RowLink: DataListRowLink,
   Spacer: DataListSpacer,
@@ -22217,6 +22236,7 @@ exports.DrawerFooter = DrawerFooter;
 exports.DrawerHeader = DrawerHeader;
 exports.DrawerIndent = DrawerIndent;
 exports.DrawerIndentBackground = DrawerIndentBackground;
+exports.DrawerInteractive = DrawerInteractive;
 exports.DrawerPopup = DrawerPopup;
 exports.DrawerPortal = DrawerPortal;
 exports.DrawerProvider = DrawerProvider;
@@ -22584,6 +22604,7 @@ exports.useAutoscroll = useAutoscroll;
 exports.useBranch = useBranch;
 exports.useCodemirrorTheme = useCodemirrorTheme$3;
 exports.useCopyToClipboard = useCopyToClipboard;
+exports.useDrawerSide = useDrawerSide;
 exports.useDrilldown = useDrilldown;
 exports.useEntityNames = useEntityNames;
 exports.useEnvironments = useEnvironments;