@mastra/playground-ui 29.0.0-alpha.6 → 29.0.0-alpha.8

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @mastra/playground-ui
 
+## 29.0.0-alpha.8
+
+### Minor Changes
+
+- Added `ContextMenu` for right-click interactions. Supports submenus, checkbox and radio items, keyboard shortcuts, and a `destructive` variant for dangerous actions like delete. ([#16791](https://github.com/mastra-ai/mastra/pull/16791))
+
+  ```tsx
+  import { ContextMenu } from '@mastra/playground-ui';
+
+  <ContextMenu>
+    <ContextMenu.Trigger className="…">Right click here</ContextMenu.Trigger>
+    <ContextMenu.Content>
+      <ContextMenu.Item>Rename</ContextMenu.Item>
+      <ContextMenu.Item variant="destructive">Delete</ContextMenu.Item>
+    </ContextMenu.Content>
+  </ContextMenu>;
+  ```
+
+### Patch Changes
+
+- Added a `destructive` variant on `DropdownMenu.Item` to highlight dangerous actions like delete. ([#16791](https://github.com/mastra-ai/mastra/pull/16791))
+
+  ```tsx
+  <DropdownMenu.Item variant="destructive">Delete project</DropdownMenu.Item>
+  ```
+
+- `PopoverContent` no longer forwards the underlying library's auto-focus event handlers (`onOpenAutoFocus`, `onCloseAutoFocus`). To control focus when the popover opens or closes, use `initialFocus` and `finalFocus`. ([#16791](https://github.com/mastra-ai/mastra/pull/16791))
+
+  ```tsx
+  // Before
+  <PopoverContent onOpenAutoFocus={(e) => e.preventDefault()} />
+
+  // After
+  <PopoverContent initialFocus={false} />
+  ```
+
+- Migrated the Slider component to base-ui with a refined neutral visual design. ([#16788](https://github.com/mastra-ai/mastra/pull/16788))
+
+  **What changed**
+  - Replaced `@radix-ui/react-slider` with `@base-ui/react/slider` as the underlying primitive
+  - Refreshed visuals: thin rounded thumb with white border and neutral inside, opacity-based track that adapts to any surface, neutral filled indicator (no green/accent color)
+  - Larger click target via padded `Slider.Control` and an invisible hit area on the thumb so it is easier to grab
+  - Added `cursor-pointer` on the control and `cursor-not-allowed` when disabled
+  - Removed the now unused `@radix-ui/react-slider` and `@radix-ui/react-tabs` dependencies
+
+  **API compatibility**
+
+  The public API is preserved. `onValueChange` and `onValueCommitted` are wrapped so consumers always receive `number[]`, even though base-ui returns `number | number[]` internally. Existing call sites like `<Slider value={[temperature]} onValueChange={value => setTemperature(value[0])} />` continue to work without changes.
+
+- Updated dependencies [[`9aee493`](https://github.com/mastra-ai/mastra/commit/9aee493ed6089b5133472623dcce49934bf2d509)]:
+  - @mastra/core@1.36.0-alpha.8
+  - @mastra/client-js@1.20.0-alpha.8
+  - @mastra/react@0.4.0-alpha.8
+
+## 29.0.0-alpha.7
+
+### Patch Changes
+
+- Updated dependencies [[`a935b0a`](https://github.com/mastra-ai/mastra/commit/a935b0a0977ae3f196b33ec7621f528069c82db0), [`a935b0a`](https://github.com/mastra-ai/mastra/commit/a935b0a0977ae3f196b33ec7621f528069c82db0)]:
+  - @mastra/core@1.36.0-alpha.7
+  - @mastra/react@0.4.0-alpha.7
+  - @mastra/client-js@1.20.0-alpha.7
+
 ## 29.0.0-alpha.6
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -27,16 +27,16 @@ const cmdk = require('cmdk');
 const DialogPrimitive = require('@radix-ui/react-dialog');
 const SelectPrimitive = require('@radix-ui/react-select');
 const tabs = require('@base-ui/react/tabs');
-const DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+const menu = require('@base-ui/react/menu');
 const VisuallyHidden = require('@radix-ui/react-visually-hidden');
 const LabelPrimitive = require('@radix-ui/react-label');
 const Markdown = require('react-markdown');
 const remarkGfm = require('remark-gfm');
-const PopoverPrimitive = require('@radix-ui/react-popover');
+const popover = require('@base-ui/react/popover');
 const RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 const scrollArea = require('@base-ui/react/scroll-area');
 const useDebounce = require('use-debounce');
-const SliderPrimitive = require('@radix-ui/react-slider');
+const slider = require('@base-ui/react/slider');
 const SwitchPrimitives = require('@radix-ui/react-switch');
 const dateFns = require('date-fns');
 const reactDayPicker = require('react-day-picker');
@@ -46,6 +46,7 @@ const dnd = require('@hello-pangea/dnd');
 const merge = require('@codemirror/merge');
 const format = require('date-fns/format');
 const isToday = require('date-fns/isToday');
+const reactDropdownMenu = require('@radix-ui/react-dropdown-menu');
 const search = require('@codemirror/search');
 const recharts = require('recharts');
 const reactResizablePanels = require('react-resizable-panels');
@@ -78,12 +79,9 @@ const CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(Check
 const CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
 const DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
 const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
-const DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
 const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
 const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
-const PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
 const RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(RadioGroupPrimitive);
-const SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderPrimitive);
 const SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitives);
 const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
 
@@ -6929,115 +6927,178 @@ function DashboardCard({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border border-border1 rounded-xl px-4 py-3 bg-surface-overlay-soft", className), children });
 }
 
-const DropdownMenuRoot = DropdownMenuPrimitive__namespace.Root;
-const DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
+const DropdownMenuRoot = menu.Menu.Root;
+const DropdownMenuGroup = menu.Menu.Group;
+const DropdownMenuPortal = menu.Menu.Portal;
+const DropdownMenuSub = menu.Menu.SubmenuRoot;
+const DropdownMenuRadioGroup = menu.Menu.RadioGroup;
 const itemClass = 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:pointer-events-none data-disabled:opacity-50 [&>span]:truncate [&_svg]:size-4 [&_svg]:shrink-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0",
+  "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 DropdownMenuTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Trigger, { ref, className: cn("cursor-pointer outline-none", className), ...props, children }));
-DropdownMenuTrigger.displayName = DropdownMenuPrimitive__namespace.Trigger.displayName;
-const DropdownMenuSubTrigger = React__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DropdownMenuPrimitive__namespace.SubTrigger,
-  {
-    ref,
-    className: cn(itemClass, "data-[state=open]:bg-surface4", 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" }) })
-    ]
-  }
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
-const DropdownMenuSubContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.SubContent,
-  {
-    ref,
-    className: cn(
-      "bg-surface3 text-neutral4 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=closed]:animate-out 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 z-50 min-w-44 max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] overflow-x-hidden overflow-y-auto rounded-xl border border-border1 p-1 shadow-dialog",
-      className
-    ),
-    ...props
+const popupClass = 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 DropdownMenuTrigger = React__namespace.forwardRef(
+  ({ className, asChild, children, ...props }, ref) => {
+    const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      menu.Menu.Trigger,
+      {
+        ref,
+        className: cn("cursor-pointer outline-none", className),
+        ...renderProps,
+        ...props,
+        children: asChild ? void 0 : children
+      }
+    );
   }
-) }));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
-const DropdownMenuContent = React__namespace.forwardRef(({ className, container, sideOffset = 8, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenuPrimitive__namespace.Content,
+);
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+const DropdownMenuSubTrigger = React__namespace.forwardRef(
+  ({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    menu.Menu.SubmenuTrigger,
     {
       ref,
+      className: cn(
+        itemClass,
+        "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" }) })
+      ]
+    }
+  )
+);
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+const DropdownMenuSubContent = React__namespace.forwardRef(
+  ({ className, align = "start", alignOffset = -4, side = "right", sideOffset = 0, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
       sideOffset,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        menu.Menu.Popup,
+        {
+          ref,
+          "data-slot": "dropdown-menu-sub-content",
+          className: cn(popupClass, className),
+          ...props
+        }
+      )
+    }
+  ) })
+);
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+const DropdownMenuContent = React__namespace.forwardRef(
+  ({ className, container, align = "start", alignOffset = 0, side = "bottom", sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        menu.Menu.Popup,
+        {
+          ref,
+          "data-slot": "dropdown-menu-content",
+          className: cn(popupClass, className),
+          ...props
+        }
+      )
+    }
+  ) })
+);
+DropdownMenuContent.displayName = "DropdownMenuContent";
+const DropdownMenuItem = React__namespace.forwardRef(
+  ({ className, inset, variant = "default", onSelect, onClick, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Item,
+    {
+      ref,
+      "data-inset": inset ? "" : void 0,
+      "data-variant": variant,
+      onClick: (event) => {
+        onClick?.(event);
+        onSelect?.(event);
+      },
       className: cn(
-        "bg-surface3 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=closed]:animate-out 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 text-neutral4 z-50 min-w-44 max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] overflow-x-hidden overflow-y-auto rounded-xl border border-border1 p-1 shadow-dialog",
+        itemClass,
+        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
     }
-  ) });
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-const DropdownMenuItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Item, { ref, className: cn(itemClass, className), ...props }));
-DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-const DropdownMenuCheckboxItem = React__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DropdownMenuPrimitive__namespace.CheckboxItem,
-  {
-    ref,
-    className: cn(itemClass, "w-full", className),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-border2 flex h-4 w-4 items-center justify-center rounded-sm", children: checked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }),
-      children
-    ]
-  }
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DropdownMenuPrimitive__namespace.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:pointer-events-none data-disabled:opacity-50 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(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-current" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
-const DropdownMenuLabel = React__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Label,
-  {
-    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
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-const DropdownMenuSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Separator, { ref, className: cn("bg-border1 -mx-1 my-1 h-px", className), ...props }));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
+  )
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+const DropdownMenuCheckboxItem = React__namespace.forwardRef(
+  ({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu.CheckboxItem, { ref, className: cn(itemClass, "w-full", className), checked, ...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(menu.Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }) }),
+    children
+  ] })
+);
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+const DropdownMenuRadioItem = React__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    menu.Menu.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(menu.Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  )
+);
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+const DropdownMenuLabel = 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
+    }
+  )
+);
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+const DropdownMenuSeparator = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Separator, { ref, className: cn("bg-border1 -mx-1 my-1 h-px", className), ...props })
+);
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 const DropdownMenuShortcut = ({ className, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 function DropdownMenu({
   open,
+  defaultOpen,
   onOpenChange,
   children,
   modal
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuRoot, { modal, open, onOpenChange, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuRoot, { modal, open, defaultOpen, onOpenChange, children });
 }
 DropdownMenu.Trigger = DropdownMenuTrigger;
 DropdownMenu.Content = DropdownMenuContent;
@@ -7885,24 +7946,49 @@ function MetricsFlexGrid({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-8", className), children });
 }
 
-const Popover = PopoverPrimitive__namespace.Root;
-const PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-const PopoverContent = React__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  PopoverPrimitive__namespace.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-72 rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden 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",
-      className && /\bp[trblxy]?-\S+/.test(className) ? false : `py-3.5 px-3`,
-      className
-    ),
-    ...props
+const Popover = popover.Popover.Root;
+const PopoverTrigger = React__namespace.forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { ref, ...renderProps, ...props, children: asChild ? void 0 : children });
   }
-) }));
-PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
-function HoverPopover({ children, ...props }) {
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+const PopoverContent = React__namespace.forwardRef(
+  ({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }, ref) => {
+    const classNameString = typeof className === "string" ? className : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      popover.Popover.Positioner,
+      {
+        align,
+        alignOffset,
+        side,
+        sideOffset,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          popover.Popover.Popup,
+          {
+            ref,
+            "data-slot": "popover-content",
+            className: cn(
+              "z-50 w-72 rounded-xl border border-border1 bg-surface3 text-neutral5 shadow-dialog focus-visible:outline-hidden 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",
+              classNameString && /\bp[trblxy]?-\S+/.test(classNameString) ? false : `py-3.5 px-3`,
+              className
+            ),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+function HoverPopover({
+  children,
+  ...props
+}) {
   const [open, setOpen] = React__namespace.useState(false);
   const timeoutRef = React__namespace.useRef(void 0);
   const handleOpen = React__namespace.useCallback(() => {
@@ -8512,12 +8598,13 @@ function PropertyFilterCreator({
       {
         align: "end",
         className: "p-3 w-64",
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        onCloseAutoFocus: (e) => {
+        initialFocus: false,
+        finalFocus: () => {
           if (skipCloseFocusRef.current) {
             skipCloseFocusRef.current = false;
-            e.preventDefault();
+            return false;
           }
+          return true;
         },
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3", children: [
           selectedField && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -8700,7 +8787,7 @@ function PickMultiMenuItem({ field, tokens, onChange, open, onToggle, onClose })
             align: "start",
             sideOffset: 8,
             className: "w-64 p-2",
-            onOpenAutoFocus: (e) => e.preventDefault(),
+            initialFocus: false,
             onKeyDown: (e) => {
               if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
               const items = Array.from(
@@ -8991,37 +9078,87 @@ const SearchbarWrapper = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2.5 border-b border-border1", children });
 };
 
-const Slider = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SliderPrimitive__namespace.Root,
-  {
-    ref,
-    className: cn("relative flex w-full touch-none select-none items-center group", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SliderPrimitive__namespace.Track,
-        {
-          className: cn("relative h-1.5 w-full grow overflow-hidden rounded-full bg-neutral2", transitions.colors),
-          children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: cn("absolute h-full bg-accent1", transitions.all) })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SliderPrimitive__namespace.Thumb,
+function toArray(value) {
+  if (typeof value === "number") {
+    return [value];
+  }
+  return [...value];
+}
+const Slider = ({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  onValueChange,
+  onValueCommitted,
+  ...props
+}) => {
+  const values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    slider.Slider.Root,
+    {
+      className: cn("w-full", className),
+      defaultValue,
+      value,
+      min,
+      max,
+      thumbAlignment: "edge",
+      onValueChange: onValueChange ? (next, details) => onValueChange(toArray(next), details) : void 0,
+      onValueCommitted: onValueCommitted ? (next, details) => onValueCommitted(toArray(next), details) : void 0,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        slider.Slider.Control,
         {
           className: cn(
-            "block h-4 w-4 rounded-full border-2 border-accent1 bg-white shadow-md",
-            "transition-all duration-normal ease-out-custom",
-            formElementFocus,
-            "hover:scale-110 hover:shadow-lg",
-            "active:scale-95",
-            "disabled:pointer-events-none disabled:opacity-50"
-          )
+            "relative flex w-full touch-none items-center select-none group cursor-pointer",
+            "data-[orientation=horizontal]:py-3",
+            "data-[orientation=vertical]:px-3 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+            "data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              slider.Slider.Track,
+              {
+                className: cn(
+                  "relative grow overflow-hidden rounded-full bg-neutral6/20 select-none",
+                  "data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full",
+                  "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  slider.Slider.Indicator,
+                  {
+                    className: cn(
+                      "bg-neutral6 select-none",
+                      "data-[orientation=horizontal]:h-full",
+                      "data-[orientation=vertical]:w-full"
+                    )
+                  }
+                )
+              }
+            ),
+            values.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              slider.Slider.Thumb,
+              {
+                index,
+                className: cn(
+                  "relative block w-2.5 h-5 shrink-0 rounded-full bg-neutral2 border-2 border-neutral6 outline-hidden select-none",
+                  'after:absolute after:-inset-2 after:content-[""]',
+                  "transition-shadow duration-normal",
+                  "hover:ring-2 hover:ring-neutral6/30",
+                  "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-neutral6/60",
+                  "data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-2.5",
+                  "data-[disabled]:pointer-events-none"
+                )
+              },
+              index
+            ))
+          ]
         }
       )
-    ]
-  }
-));
-Slider.displayName = SliderPrimitive__namespace.Root.displayName;
+    }
+  );
+};
 
 const sizeClasses$1 = {
   sm: "w-6",
@@ -12794,7 +12931,7 @@ const subContentClass = cn(
   "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
 );
 function PortalSubContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.SubContent, { className: cn(subContentClass, className), ...props, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.SubContent, { className: cn(subContentClass, className), ...props, children }) });
 }
 function SubMenuSearch({
   value,