@inf-monkeys-tech/monkeys-design 2.0.2 → 2.0.3

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { ChevronDown, Search, Circle, Check, ChevronRight, ChevronUp, ShoppingBag, Code2, FileText, Palette, Sparkles, ArrowLeft, Upload, ArrowUpRight, Plus, Pin, Blocks, Settings, TerminalSquare, FileOutput, Download, X, PanelLeft, PanelRight, Loader2, UploadCloud, RefreshCw, Bot, SquarePen, MessageSquare, Clock3, CheckCircle2, XCircle, CircleStop, AlertCircle, GitFork, PencilLine, Copy, RotateCcw, FileCode2, Files, TestTube2, Image, Video, Music2, Ellipsis, Trash2, Pencil } from 'lucide-react';
 import { twMerge } from 'tailwind-merge';
-import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
+import * as DropdownMenu3 from '@radix-ui/react-dropdown-menu';
 import * as ContextMenu from '@radix-ui/react-context-menu';
 import { createPortal } from 'react-dom';
 import * as Dialog from '@radix-ui/react-dialog';
@@ -8768,7 +8768,7 @@ var BaseDropdownMenu = forwardRef(function BaseDropdownMenu2({
     onOpenChange?.(nextOpen);
   };
   const menuContent = /* @__PURE__ */ jsxs(
-    DropdownMenu2.Content,
+    DropdownMenu3.Content,
     {
       ...componentAttributes,
       side,
@@ -8785,7 +8785,7 @@ var BaseDropdownMenu = forwardRef(function BaseDropdownMenu2({
       style: theme.styles.dropdownMenu,
       children: [
         hasRenderableNode(label) ? /* @__PURE__ */ jsx(
-          DropdownMenu2.Label,
+          DropdownMenu3.Label,
           {
             ...componentAttributes,
             "data-monkeys-component": "dropdown-menu",
@@ -8805,7 +8805,7 @@ var BaseDropdownMenu = forwardRef(function BaseDropdownMenu2({
               "data-slot": "item-wrapper",
               children: [
                 item.separatorBefore ? /* @__PURE__ */ jsx(
-                  DropdownMenu2.Separator,
+                  DropdownMenu3.Separator,
                   {
                     ...componentAttributes,
                     "data-monkeys-component": "dropdown-menu",
@@ -8818,7 +8818,7 @@ var BaseDropdownMenu = forwardRef(function BaseDropdownMenu2({
                   }
                 ) : null,
                 /* @__PURE__ */ jsx(
-                  DropdownMenu2.Item,
+                  DropdownMenu3.Item,
                   {
                     asChild: true,
                     disabled: itemDisabled,
@@ -8938,7 +8938,7 @@ var BaseDropdownMenu = forwardRef(function BaseDropdownMenu2({
       className: cn(theme.slots.dropdownRoot, classNames?.root, className),
       style,
       children: /* @__PURE__ */ jsxs(
-        DropdownMenu2.Root,
+        DropdownMenu3.Root,
         {
           open: isOpen,
           onOpenChange: handleOpenChange,
@@ -8946,7 +8946,7 @@ var BaseDropdownMenu = forwardRef(function BaseDropdownMenu2({
           modal: false,
           children: [
             /* @__PURE__ */ jsx(
-              DropdownMenu2.Trigger,
+              DropdownMenu3.Trigger,
               {
                 ...componentAttributes,
                 asChild: true,
@@ -8971,7 +8971,7 @@ var BaseDropdownMenu = forwardRef(function BaseDropdownMenu2({
                 })
               }
             ),
-            portal && overlayPortal.shouldPortal ? /* @__PURE__ */ jsx(DropdownMenu2.Portal, { ...overlayPortal.radixPortalProps, children: menuContent }) : menuContent
+            portal && overlayPortal.shouldPortal ? /* @__PURE__ */ jsx(DropdownMenu3.Portal, { ...overlayPortal.radixPortalProps, children: menuContent }) : menuContent
           ]
         }
       )
@@ -16253,9 +16253,9 @@ function UserAccountMenuSelector({
   if (selector.visible === false || selector.options.length === 0) return null;
   const radiusClass = radiusClassNames[menuRadius];
   const currentLabel = getCurrentOptionLabel(selector);
-  return /* @__PURE__ */ jsxs(DropdownMenu2.Sub, { children: [
+  return /* @__PURE__ */ jsxs(DropdownMenu3.Sub, { children: [
     /* @__PURE__ */ jsxs(
-      DropdownMenu2.SubTrigger,
+      DropdownMenu3.SubTrigger,
       {
         disabled: selector.disabled,
         className: cn(
@@ -16270,8 +16270,8 @@ function UserAccountMenuSelector({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu2.SubContent,
+    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu3.SubContent,
       {
         sideOffset: 8,
         className: cn(
@@ -16280,8 +16280,8 @@ function UserAccountMenuSelector({
           selector.contentWidthClassName,
           classNames?.subContent
         ),
-        children: /* @__PURE__ */ jsx(DropdownMenu2.RadioGroup, { value: selector.value, onValueChange: selector.onChange, children: selector.options.map((option) => /* @__PURE__ */ jsxs(
-          DropdownMenu2.RadioItem,
+        children: /* @__PURE__ */ jsx(DropdownMenu3.RadioGroup, { value: selector.value, onValueChange: selector.onChange, children: selector.options.map((option) => /* @__PURE__ */ jsxs(
+          DropdownMenu3.RadioItem,
           {
             value: option.value,
             disabled: option.disabled,
@@ -16291,7 +16291,7 @@ function UserAccountMenuSelector({
               classNames?.item
             ),
             children: [
-              /* @__PURE__ */ jsx(DropdownMenu2.ItemIndicator, { className: "absolute left-2 inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(CheckIcon2, {}) }),
+              /* @__PURE__ */ jsx(DropdownMenu3.ItemIndicator, { className: "absolute left-2 inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(CheckIcon2, {}) }),
               renderIcon(option.icon, classNames?.itemIcon),
               /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label })
             ]
@@ -16340,8 +16340,8 @@ function UserAccountMenu({
     }
   );
   const isProfileTrigger = triggerVariant === "profile";
-  return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
       BaseButton,
       {
         appearance,
@@ -16367,8 +16367,8 @@ function UserAccountMenu({
         tone: "muted"
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs(
-      DropdownMenu2.Content,
+    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu3.Content,
       {
         align,
         side,
@@ -16380,7 +16380,7 @@ function UserAccountMenu({
           classNames?.content
         ),
         children: [
-          /* @__PURE__ */ jsx(DropdownMenu2.Label, { className: cn("px-2 py-1.5 font-normal", classNames?.label), children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx(DropdownMenu3.Label, { className: cn("px-2 py-1.5 font-normal", classNames?.label), children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
             avatar,
             /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
               /* @__PURE__ */ jsx("span", { className: cn("truncate text-sm font-medium leading-none", classNames?.userName), children: displayName }),
@@ -16397,7 +16397,7 @@ function UserAccountMenu({
             ] })
           ] }) }),
           hasMenuBody ? /* @__PURE__ */ jsx(
-            DropdownMenu2.Separator,
+            DropdownMenu3.Separator,
             {
               className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
             }
@@ -16412,20 +16412,20 @@ function UserAccountMenu({
             selector.id ?? `selector-${index}`
           )),
           visibleSelectors.length > 0 && visibleItems.length > 0 ? /* @__PURE__ */ jsx(
-            DropdownMenu2.Separator,
+            DropdownMenu3.Separator,
             {
               className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
             }
           ) : null,
           visibleItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
             item.separatorBefore ? /* @__PURE__ */ jsx(
-              DropdownMenu2.Separator,
+              DropdownMenu3.Separator,
               {
                 className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
               }
             ) : null,
             /* @__PURE__ */ jsxs(
-              DropdownMenu2.Item,
+              DropdownMenu3.Item,
               {
                 disabled: item.disabled,
                 onSelect: item.disabled ? void 0 : item.onSelect,
@@ -16549,8 +16549,8 @@ function AppHeader({
         (!tabs || tabs.length === 0) && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [
           extra,
-          user && /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
-            /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "flex h-8 w-8 items-center justify-center rounded-full hover:ring-2 hover:ring-[hsl(var(--ring))]/20 transition-all overflow-hidden focus-visible:outline-none", children: user.photo ? /* @__PURE__ */ jsx(
+          user && /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
+            /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "flex h-8 w-8 items-center justify-center rounded-full hover:ring-2 hover:ring-[hsl(var(--ring))]/20 transition-all overflow-hidden focus-visible:outline-none", children: user.photo ? /* @__PURE__ */ jsx(
               "img",
               {
                 src: user.photo,
@@ -16558,14 +16558,14 @@ function AppHeader({
                 className: "h-8 w-8 rounded-full object-cover"
               }
             ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-xs font-medium", children: user.name ? getUserInitials(user.name) : "U" }) }) }),
-            /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs(
-              DropdownMenu2.Content,
+            /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsxs(
+              DropdownMenu3.Content,
               {
                 className: "z-50 w-52 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
                 sideOffset: 5,
                 align: "end",
                 children: [
-                  /* @__PURE__ */ jsxs(DropdownMenu2.Label, { className: "flex items-center gap-2 px-2 py-1.5 font-normal", children: [
+                  /* @__PURE__ */ jsxs(DropdownMenu3.Label, { className: "flex items-center gap-2 px-2 py-1.5 font-normal", children: [
                     user.photo ? /* @__PURE__ */ jsx(
                       "img",
                       {
@@ -16579,11 +16579,11 @@ function AppHeader({
                       user.email && /* @__PURE__ */ jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))] leading-none mt-1", children: user.email })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx(DropdownMenu2.Separator, { className: "h-px bg-[hsl(var(--border))] my-1" }),
-                  /* @__PURE__ */ jsxs(DropdownMenu2.Group, { children: [
+                  /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: "h-px bg-[hsl(var(--border))] my-1" }),
+                  /* @__PURE__ */ jsxs(DropdownMenu3.Group, { children: [
                     userMenuItems,
                     /* @__PURE__ */ jsxs(
-                      DropdownMenu2.Item,
+                      DropdownMenu3.Item,
                       {
                         className: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-[hsl(var(--destructive))] outline-none transition-colors hover:bg-[hsl(var(--accent))]",
                         onSelect: () => onLogout?.(),
@@ -16860,6 +16860,7 @@ function AppLayout({
 }
 var NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH = "13.7rem";
 var NAVIGATION_LAYOUT_SIDEBAR_COLLAPSED_WIDTH = "4.25rem";
+var NAVIGATION_LAYOUT_CONTEXTUAL_SIDEBAR_WIDTH = "15rem";
 var NAVIGATION_LAYOUT_TRANSITION_TIMING = "cubic-bezier(0.22, 1, 0.36, 1)";
 var NAVIGATION_LAYOUT_HEADBAR_DEFAULT_HEIGHT_PX = 72;
 var NAVIGATION_LAYOUT_HEADBAR_MIN_HEIGHT_PX = 56;
@@ -16987,11 +16988,18 @@ function getHeadbarCompoundStyle(active, useTokenRadius = true) {
 function findNavigationRootId(items, activeItemId) {
   for (const item of items) {
     if (item.id === activeItemId) return item.id;
-    if (item.children?.some((child) => child.id === activeItemId))
-      return item.id;
+    if (containsNavigationItem(item, activeItemId)) return item.id;
   }
   return activeItemId;
 }
+function containsNavigationItem(item, itemId) {
+  if (!itemId) return false;
+  if (item.id === itemId) return true;
+  return item.children?.some((child) => containsNavigationItem(child, itemId)) ?? false;
+}
+function findActiveNavigationBranch(item, activeItemId) {
+  return item.children?.find((child) => containsNavigationItem(child, activeItemId));
+}
 function getNavigationActionTitle(action) {
   return action.title || (typeof action.label === "string" ? action.label : void 0);
 }
@@ -17060,10 +17068,7 @@ function SidebarNavigationList({
   const [expandedByRoot, setExpandedByRoot] = useState(
     {}
   );
-  const canReveal = revealRequest ? items.some(
-    (item) => item.id === revealRequest.id && !item.disabled
-  ) : false;
-  const activeRootId = findNavigationRootId(items, activeItemId);
+  const canReveal = revealRequest ? items.some((item) => containsNavigationItem(item, revealRequest.id) && !item.disabled) : false;
   const toggleRoot = (id) => {
     setExpandedByRoot((current) => ({
       ...current,
@@ -17072,13 +17077,10 @@ function SidebarNavigationList({
   };
   useEffect(() => {
     if (!revealRequest || !canReveal) return;
-    setExpandedByRoot((current) => ({
-      ...current,
-      [revealRequest.id]: true
-    }));
+    setExpandedByRoot((current) => ({ ...current, [revealRequest.id]: true }));
     const frameId = window.requestAnimationFrame(() => {
       const targetElement = navRef.current?.querySelector(
-        `[data-navigation-sidebar-root-id="${CSS.escape(revealRequest.id)}"]`
+        `[data-navigation-sidebar-item-id="${CSS.escape(revealRequest.id)}"]`
       );
       if (targetElement instanceof HTMLElement) {
         targetElement.scrollIntoView({
@@ -17090,6 +17092,34 @@ function SidebarNavigationList({
     });
     return () => window.cancelAnimationFrame(frameId);
   }, [canReveal, revealRequest]);
+  const renderItems = (navigationItems, depth = 0) => navigationItems.map((item) => {
+    const isGroup = Boolean(item.children?.length);
+    const containsActiveItem = containsNavigationItem(item, activeItemId);
+    const isExpanded = !item.disabled && (expandedByRoot[item.id] ?? containsActiveItem);
+    return /* @__PURE__ */ jsxs("div", { "data-navigation-sidebar-item-id": item.id, children: [
+      /* @__PURE__ */ jsx(
+        NavButton,
+        {
+          active: containsActiveItem,
+          className: depth > 0 ? "pl-3" : void 0,
+          disabled: item.disabled,
+          icon: item.icon,
+          onClick: () => isGroup ? toggleRoot(item.id) : onNavigate?.(item.id),
+          postfix: isGroup ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsx(
+            HeadbarChevronIcon,
+            {
+              open: false,
+              sideways: true,
+              className: "text-[hsl(var(--foreground))] transition-transform duration-200",
+              style: { transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" }
+            }
+          ) }) : void 0,
+          children: item.label
+        }
+      ),
+      isGroup && isExpanded ? /* @__PURE__ */ jsx("div", { className: "mt-1 ml-3 flex flex-col gap-1 border-l border-[hsl(var(--input))] pl-2", children: renderItems(item.children ?? [], depth + 1) }) : null
+    ] }, item.id);
+  });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -17102,64 +17132,7 @@ function SidebarNavigationList({
           {
             ref: navRef,
             className: "monkeys-navigation-sidebar-nav flex w-full flex-col gap-2 text-xs text-[hsl(var(--foreground))]",
-            children: items.map((item) => {
-              const isGroup = Boolean(item.children?.length);
-              const isExpanded = !item.disabled && Boolean(expandedByRoot[item.id]);
-              const isActive = activeRootId === item.id;
-              if (isGroup) {
-                return /* @__PURE__ */ jsxs("div", { "data-navigation-sidebar-root-id": item.id, children: [
-                  /* @__PURE__ */ jsx(
-                    NavButton,
-                    {
-                      active: isActive,
-                      disabled: item.disabled,
-                      icon: item.icon,
-                      onClick: () => toggleRoot(item.id),
-                      postfix: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsx(
-                        "svg",
-                        {
-                          xmlns: "http://www.w3.org/2000/svg",
-                          width: "16",
-                          height: "16",
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          className: "shrink-0 text-[hsl(var(--foreground))] transition-transform duration-200",
-                          style: {
-                            transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
-                          },
-                          children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
-                        }
-                      ) }),
-                      children: item.label
-                    }
-                  ),
-                  isExpanded ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-col gap-1", children: item.children?.map((child) => /* @__PURE__ */ jsx(
-                    NavButton,
-                    {
-                      active: activeItemId === child.id,
-                      disabled: child.disabled,
-                      onClick: () => onNavigate?.(child.id),
-                      children: child.label
-                    },
-                    child.id
-                  )) }) : null
-                ] }, item.id);
-              }
-              return /* @__PURE__ */ jsx("div", { "data-navigation-sidebar-root-id": item.id, children: /* @__PURE__ */ jsx(
-                NavButton,
-                {
-                  active: isActive,
-                  disabled: item.disabled,
-                  icon: item.icon,
-                  onClick: () => onNavigate?.(item.id),
-                  children: item.label
-                }
-              ) }, item.id);
-            })
+            children: renderItems(items)
           }
         )
       ]
@@ -17318,22 +17291,30 @@ function Sidebar({
     ] })
   ] });
 }
-function HeadbarChevronIcon({ open }) {
+function HeadbarChevronIcon({
+  className,
+  open,
+  sideways = false,
+  style
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
       "aria-hidden": "true",
       className: cn2(
-        "h-4 w-4 shrink-0 transition-transform duration-200",
-        open && "rotate-180"
+        "h-4 w-4 shrink-0",
+        !sideways && "transition-transform duration-200",
+        !sideways && open && "rotate-180",
+        className
       ),
+      style,
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ jsx("path", { d: sideways ? "m9 18 6-6-6-6" : "m6 9 6 6 6-6" })
     }
   );
 }
@@ -17345,6 +17326,100 @@ function getHeadbarSummaryTitle(rootLabel, childLabel) {
   const childText = childLabel.trim();
   return rootText && childText ? `${rootText} ${childText}` : void 0;
 }
+var HEADBAR_DROPDOWN_ITEM_CLASS = "relative flex w-full min-w-0 cursor-pointer select-none items-center gap-2.5 px-3 py-2 text-sm outline-none transition-colors hover:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] hover:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))] focus:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] focus:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))] data-[highlighted]:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] data-[highlighted]:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))]";
+var HEADBAR_DROPDOWN_CONTENT_STYLE = {
+  width: "max-content",
+  maxWidth: "min(20rem, var(--radix-dropdown-menu-content-available-width))",
+  background: "var(--monkeys-component-navigation-headbar-menu-background, hsl(var(--popover)))",
+  borderColor: "var(--monkeys-component-navigation-headbar-menu-border-color, hsl(var(--border)))",
+  color: "var(--monkeys-component-navigation-headbar-menu-foreground, hsl(var(--popover-foreground)))",
+  boxShadow: "var(--monkeys-component-navigation-headbar-menu-shadow, 0 10px 15px -3px rgb(0 0 0 / 0.1))"
+};
+function HeadbarDropdownItems({
+  activeItemId,
+  items,
+  menuContentRadiusClass,
+  menuItemRadiusClass,
+  onNavigate,
+  onNavigateComplete,
+  useTokenRadius
+}) {
+  return items.map((item) => {
+    const label = /* @__PURE__ */ jsxs(Fragment, { children: [
+      item.icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-[hsl(var(--muted-foreground))]", children: item.icon }) : null,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn2(
+            "min-w-0 truncate",
+            Boolean(item.children?.length) && "flex-1"
+          ),
+          children: item.headbarLabel ?? item.label
+        }
+      )
+    ] });
+    if (item.children?.length) {
+      return /* @__PURE__ */ jsxs(DropdownMenu3.Sub, { children: [
+        /* @__PURE__ */ jsxs(
+          DropdownMenu3.SubTrigger,
+          {
+            disabled: item.disabled,
+            className: cn2(HEADBAR_DROPDOWN_ITEM_CLASS, menuItemRadiusClass),
+            children: [
+              label,
+              /* @__PURE__ */ jsx(HeadbarChevronIcon, { open: false, sideways: true })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
+          DropdownMenu3.SubContent,
+          {
+            sideOffset: 4,
+            alignOffset: -6,
+            className: cn2(
+              "z-50 border p-1.5 animate-in fade-in-0 zoom-in-95",
+              menuContentRadiusClass
+            ),
+            style: {
+              ...HEADBAR_DROPDOWN_CONTENT_STYLE,
+              minWidth: "12rem"
+            },
+            children: /* @__PURE__ */ jsx(
+              HeadbarDropdownItems,
+              {
+                activeItemId,
+                items: item.children,
+                menuContentRadiusClass,
+                menuItemRadiusClass,
+                onNavigate,
+                onNavigateComplete,
+                useTokenRadius
+              }
+            )
+          }
+        ) })
+      ] }, item.id);
+    }
+    return /* @__PURE__ */ jsxs(
+      DropdownMenu3.Item,
+      {
+        disabled: item.disabled,
+        className: cn2(HEADBAR_DROPDOWN_ITEM_CLASS, menuItemRadiusClass),
+        style: getHeadbarItemStyle(item.id === activeItemId, useTokenRadius),
+        onSelect: () => {
+          if (item.disabled) return;
+          onNavigateComplete();
+          onNavigate?.(item.id);
+        },
+        children: [
+          label,
+          item.trailing
+        ]
+      },
+      item.id
+    );
+  });
+}
 function HeadbarNavMenuItem({
   activeItemId,
   compound,
@@ -17388,13 +17463,13 @@ function HeadbarNavMenuItem({
   };
   useEffect(() => clearCloseTimer, []);
   return /* @__PURE__ */ jsxs(
-    DropdownMenu2.Root,
+    DropdownMenu3.Root,
     {
       modal: false,
       open: isOpen,
       onOpenChange: (nextOpen) => setOpen(!item.disabled && nextOpen),
       children: [
-        /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
           BaseButton,
           {
             appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
@@ -17440,8 +17515,8 @@ function HeadbarNavMenuItem({
             )
           }
         ) }),
-        /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
-          DropdownMenu2.Content,
+        /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
+          DropdownMenu3.Content,
           {
             align: "start",
             sideOffset: 5,
@@ -17453,40 +17528,22 @@ function HeadbarNavMenuItem({
               menuContentRadiusClass
             ),
             style: {
-              width: "max-content",
+              ...HEADBAR_DROPDOWN_CONTENT_STYLE,
               minWidth: "var(--radix-dropdown-menu-trigger-width)",
-              maxWidth: "min(20rem, var(--radix-dropdown-menu-content-available-width))",
-              background: "var(--monkeys-component-navigation-headbar-menu-background, hsl(var(--popover)))",
-              borderColor: "var(--monkeys-component-navigation-headbar-menu-border-color, hsl(var(--border)))",
-              color: "var(--monkeys-component-navigation-headbar-menu-foreground, hsl(var(--popover-foreground)))",
-              boxShadow: "var(--monkeys-component-navigation-headbar-menu-shadow, 0 10px 15px -3px rgb(0 0 0 / 0.1))",
               backdropFilter: "blur(var(--monkeys-component-navigation-headbar-menu-backdrop-blur, 0px))"
             },
-            children: item.children?.map((child) => /* @__PURE__ */ jsxs(
-              DropdownMenu2.Item,
+            children: /* @__PURE__ */ jsx(
+              HeadbarDropdownItems,
               {
-                disabled: child.disabled,
-                className: cn2(
-                  "relative flex w-full min-w-0 cursor-pointer select-none items-center gap-2.5 px-3 py-2 text-sm outline-none transition-colors hover:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] hover:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))] focus:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] focus:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))] data-[highlighted]:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))] data-[highlighted]:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--accent-foreground)))]",
-                  menuItemRadiusClass
-                ),
-                style: getHeadbarItemStyle(
-                  child.id === activeItemId,
-                  useTokenRadius
-                ),
-                onSelect: () => {
-                  if (child.disabled) return;
-                  setOpen(false);
-                  onNavigate?.(child.id);
-                },
-                children: [
-                  child.icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-[hsl(var(--muted-foreground))]", children: child.icon }) : null,
-                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: child.headbarLabel ?? child.label }),
-                  child.trailing
-                ]
-              },
-              child.id
-            ))
+                activeItemId,
+                items: item.children ?? [],
+                menuContentRadiusClass,
+                menuItemRadiusClass,
+                onNavigate,
+                onNavigateComplete: () => setOpen(false),
+                useTokenRadius
+              }
+            )
           }
         ) })
       ]
@@ -17512,9 +17569,7 @@ function NavigationHeadbarMenu({
     const isActive = activeRootId === item.id || activeItemId === item.id;
     const hasSecondaryAction = Boolean(item.headbarSecondaryAction);
     const rootLabel = item.headbarLabel ?? item.label;
-    const activeChild = item.children?.find(
-      (child) => child.id === activeItemId
-    );
+    const activeChild = findActiveNavigationBranch(item, activeItemId);
     const activeChildLabel = activeChild ? activeChild.headbarLabel ?? activeChild.label : void 0;
     const label = activeChild ? /* @__PURE__ */ jsxs(
       "span",
@@ -17720,6 +17775,9 @@ function NavigationLayout({
   className,
   collapsedSidebarAccountMenu,
   collapsedSidebarWidth = NAVIGATION_LAYOUT_SIDEBAR_COLLAPSED_WIDTH,
+  contextualSidebar = false,
+  contextualSidebarHeader,
+  contextualSidebarWidth = NAVIGATION_LAYOUT_CONTEXTUAL_SIDEBAR_WIDTH,
   defaultMode = "headbar",
   defaultSidebarCollapsed = false,
   expandedSidebarWidth = NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH,
@@ -17751,6 +17809,9 @@ function NavigationLayout({
   const sidebarCollapsed = isSidebarCollapsedControlled ? controlledSidebarCollapsed : uncontrolledSidebarCollapsed;
   const isHeadbarMode = navigationMode === "headbar";
   const sidebarWidth = sidebarCollapsed ? collapsedSidebarWidth : expandedSidebarWidth;
+  const resolvedActiveRootId = activeRootId ?? findNavigationRootId(navItems, activeItemId);
+  const activeRoot = navItems.find((item) => item.id === resolvedActiveRootId);
+  const contextualItems = activeRoot?.children ?? [];
   useEffect(() => {
     if (!isModeControlled) {
       setUncontrolledMode(defaultMode);
@@ -17821,7 +17882,25 @@ function NavigationLayout({
       }
     )
   });
-  const sidebar = isHeadbarMode ? null : /* @__PURE__ */ jsx(
+  const sidebar = isHeadbarMode && contextualSidebar && contextualItems.length ? /* @__PURE__ */ jsx(
+    "aside",
+    {
+      className: "relative h-full min-h-0 shrink-0 overflow-hidden",
+      "data-navigation-contextual-sidebar": resolvedActiveRootId,
+      style: { width: contextualSidebarWidth },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 w-full flex-col gap-3 rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] px-4 py-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 px-2 text-sm font-semibold text-[hsl(var(--foreground))]", children: contextualSidebarHeader ?? activeRoot?.label }),
+        /* @__PURE__ */ jsx(
+          SidebarNavigationList,
+          {
+            activeItemId,
+            items: contextualItems,
+            onNavigate
+          }
+        )
+      ] })
+    }
+  ) : isHeadbarMode ? null : /* @__PURE__ */ jsx(
     "div",
     {
       className: cn2(
@@ -17860,7 +17939,7 @@ function NavigationLayout({
     NavigationHeadbar,
     {
       activeItemId,
-      activeRootId: activeRootId ?? findNavigationRootId(navItems, activeItemId),
+      activeRootId: resolvedActiveRootId,
       actions: allowModeSwitch ? /* @__PURE__ */ jsxs(Fragment, { children: [
         headbarActions,
         /* @__PURE__ */ jsx(
@@ -18323,45 +18402,45 @@ var InputGroupTextarea = React4.forwardRef(({ className, ...props }, ref) => /*
 InputGroupTextarea.displayName = "InputGroupTextarea";
 var menuItemClassName = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
 var menuContentClassName = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-menu-surface p-1 text-popover-foreground shadow-md 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-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
-var DropdownMenu4 = DropdownMenu2.Root;
-var DropdownMenuTrigger = DropdownMenu2.Trigger;
-var DropdownMenuSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenu2.SubTrigger, { ref, className: cn(menuItemClassName, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
+var DropdownMenu4 = DropdownMenu3.Root;
+var DropdownMenuTrigger = DropdownMenu3.Trigger;
+var DropdownMenuSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenu3.SubTrigger, { ref, className: cn(menuItemClassName, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
   children,
   /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "ml-auto" })
 ] }));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
 var DropdownMenuSubContent = React4.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu2.SubContent, { ref, className: cn(menuContentClassName, className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu3.SubContent, { ref, className: cn(menuContentClassName, className), ...props })
 );
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 var DropdownMenuContent = React4.forwardRef(
-  ({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu2.Content, { ref, sideOffset, className: cn(menuContentClassName, className), ...props }) })
+  ({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu3.Content, { ref, sideOffset, className: cn(menuContentClassName, className), ...props }) })
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";
 var DropdownMenuItem = React4.forwardRef(
-  ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu2.Item, { ref, className: cn(menuItemClassName, inset && "pl-8", className), ...props })
+  ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu3.Item, { ref, className: cn(menuItemClassName, inset && "pl-8", className), ...props })
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
 var DropdownMenuCheckboxItem = React4.forwardRef(
-  ({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenu2.CheckboxItem, { ref, className: cn(menuItemClassName, "pl-8", className), checked, ...props, children: [
-    /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu2.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "h-4 w-4" }) }) }),
+  ({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenu3.CheckboxItem, { ref, className: cn(menuItemClassName, "pl-8", className), checked, ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu3.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "h-4 w-4" }) }) }),
     children
   ] })
 );
 DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
 var DropdownMenuRadioItem = React4.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenu2.RadioItem, { ref, className: cn(menuItemClassName, "pl-8", className), ...props, children: [
-    /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu2.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", className: "h-2 w-2 fill-current" }) }) }),
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenu3.RadioItem, { ref, className: cn(menuItemClassName, "pl-8", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu3.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { "aria-hidden": "true", className: "h-2 w-2 fill-current" }) }) }),
     children
   ] })
 );
 DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
 var DropdownMenuLabel = React4.forwardRef(
-  ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu2.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })
+  ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu3.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })
 );
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
 var DropdownMenuSeparator = React4.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu2.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu3.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })
 );
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 var SelectTrigger = React4.forwardRef(
@@ -22619,8 +22698,8 @@ function DataExplorerSelect({
     /* @__PURE__ */ jsx("span", { children: label }),
     /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: selected?.label ?? placeholder })
   ] }) : selected?.label ?? label ?? placeholder;
-  return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -22648,8 +22727,8 @@ function DataExplorerSelect({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu2.Content,
+    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu3.Content,
       {
         align,
         sideOffset,
@@ -22657,7 +22736,7 @@ function DataExplorerSelect({
         style: theme.styles.menuContent,
         onClick: (event) => event.stopPropagation(),
         children: /* @__PURE__ */ jsx(
-          DropdownMenu2.RadioGroup,
+          DropdownMenu3.RadioGroup,
           {
             value,
             onValueChange: (nextValue) => {
@@ -22665,7 +22744,7 @@ function DataExplorerSelect({
               void onValueChange?.(nextValue);
             },
             children: options.map((option) => /* @__PURE__ */ jsxs(
-              DropdownMenu2.RadioItem,
+              DropdownMenu3.RadioItem,
               {
                 value: option.value,
                 title: option.title,
@@ -22711,9 +22790,9 @@ function renderMenuItem(action, context, theme, className) {
   const disabled = (resolveDataExplorerValue(action.disabled, context) ?? false) || (resolveDataExplorerValue(action.loading, context) ?? false);
   const active = resolveDataExplorerValue(action.active, context) ?? false;
   return /* @__PURE__ */ jsxs("div", { children: [
-    action.separatorBefore ? /* @__PURE__ */ jsx(DropdownMenu2.Separator, { className: theme.slots.menuSeparator }) : null,
+    action.separatorBefore ? /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator }) : null,
     /* @__PURE__ */ jsxs(
-      DropdownMenu2.Item,
+      DropdownMenu3.Item,
       {
         title: action.title,
         disabled,
@@ -22734,7 +22813,7 @@ function renderMenuItem(action, context, theme, className) {
         ]
       }
     ),
-    action.separatorAfter ? /* @__PURE__ */ jsx(DropdownMenu2.Separator, { className: theme.slots.menuSeparator }) : null
+    action.separatorAfter ? /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator }) : null
   ] }, action.id);
 }
 function renderMenuAction(action, context, theme, classNames, appearance) {
@@ -22743,8 +22822,8 @@ function renderMenuAction(action, context, theme, classNames, appearance) {
   const visibleItems = (action.items ?? []).filter(
     (item) => resolveDataExplorerValue(item.visible, context) ?? true
   );
-  return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
       DataExplorerButton,
       {
         title: action.title,
@@ -22760,8 +22839,8 @@ function renderMenuAction(action, context, theme, classNames, appearance) {
         className: classNames?.action
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs(
-      DropdownMenu2.Content,
+    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu3.Content,
       {
         align: action.align ?? "end",
         sideOffset: action.sideOffset ?? 6,
@@ -22770,8 +22849,8 @@ function renderMenuAction(action, context, theme, classNames, appearance) {
         onClick: (event) => event.stopPropagation(),
         children: [
           action.menuLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(DropdownMenu2.Label, { className: theme.slots.menuLabel, children: action.menuLabel }),
-            /* @__PURE__ */ jsx(DropdownMenu2.Separator, { className: theme.slots.menuSeparator })
+            /* @__PURE__ */ jsx(DropdownMenu3.Label, { className: theme.slots.menuLabel, children: action.menuLabel }),
+            /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator })
           ] }) : null,
           visibleItems.map(
             (item) => renderMenuItem(item, context, theme, classNames?.menuItem)
@@ -23602,8 +23681,8 @@ function DataExplorerDisplayActionMenu({
   if (visibleActions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("span", { className: cn3("inline-flex", classNames?.root), children: /* @__PURE__ */ jsxs(DropdownMenu2.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("span", { className: cn3("inline-flex", classNames?.root), children: /* @__PURE__ */ jsxs(DropdownMenu3.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -23620,8 +23699,8 @@ function DataExplorerDisplayActionMenu({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs(
-      DropdownMenu2.Content,
+    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu3.Content,
       {
         align,
         sideOffset,
@@ -23634,7 +23713,7 @@ function DataExplorerDisplayActionMenu({
         children: [
           label ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
-              DropdownMenu2.Label,
+              DropdownMenu3.Label,
               {
                 className: cn3(
                   theme.slots.menuLabel,
@@ -23644,7 +23723,7 @@ function DataExplorerDisplayActionMenu({
               }
             ),
             /* @__PURE__ */ jsx(
-              DropdownMenu2.Separator,
+              DropdownMenu3.Separator,
               {
                 className: cn3(
                   theme.slots.menuSeparator,
@@ -23658,7 +23737,7 @@ function DataExplorerDisplayActionMenu({
             if (action.render) {
               return /* @__PURE__ */ jsxs("div", { children: [
                 action.separatorBefore ? /* @__PURE__ */ jsx(
-                  DropdownMenu2.Separator,
+                  DropdownMenu3.Separator,
                   {
                     className: cn3(
                       theme.slots.menuSeparator,
@@ -23668,7 +23747,7 @@ function DataExplorerDisplayActionMenu({
                 ) : null,
                 action.render(context),
                 action.separatorAfter ? /* @__PURE__ */ jsx(
-                  DropdownMenu2.Separator,
+                  DropdownMenu3.Separator,
                   {
                     className: cn3(
                       theme.slots.menuSeparator,
@@ -23680,7 +23759,7 @@ function DataExplorerDisplayActionMenu({
             }
             return /* @__PURE__ */ jsxs("div", { children: [
               action.separatorBefore ? /* @__PURE__ */ jsx(
-                DropdownMenu2.Separator,
+                DropdownMenu3.Separator,
                 {
                   className: cn3(
                     "-mx-1 my-1 h-px bg-border",
@@ -23689,7 +23768,7 @@ function DataExplorerDisplayActionMenu({
                 }
               ) : null,
               /* @__PURE__ */ jsxs(
-                DropdownMenu2.Item,
+                DropdownMenu3.Item,
                 {
                   title: action.title,
                   disabled,
@@ -23740,7 +23819,7 @@ function DataExplorerDisplayActionMenu({
                 }
               ),
               action.separatorAfter ? /* @__PURE__ */ jsx(
-                DropdownMenu2.Separator,
+                DropdownMenu3.Separator,
                 {
                   className: cn3(
                     theme.slots.menuSeparator,
@@ -26219,8 +26298,8 @@ function DataExplorerViewTree({
       return resolveDataExplorerValue(action.visible, payload) ?? true;
     });
     if (visibleActions.length === 0) return null;
-    return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
-      /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
+      /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -26235,8 +26314,8 @@ function DataExplorerViewTree({
           children: /* @__PURE__ */ jsx(MoreIcon3, {})
         }
       ) }),
-      /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
-        DropdownMenu2.Content,
+      /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
+        DropdownMenu3.Content,
         {
           align: "end",
           sideOffset: 6,
@@ -26251,9 +26330,9 @@ function DataExplorerViewTree({
               return /* @__PURE__ */ jsx("div", { children: action.render(payload) }, action.id);
             }
             return /* @__PURE__ */ jsxs("div", { children: [
-              action.separatorBefore ? /* @__PURE__ */ jsx(DropdownMenu2.Separator, { className: theme.slots.menuSeparator }) : null,
+              action.separatorBefore ? /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator }) : null,
               /* @__PURE__ */ jsxs(
-                DropdownMenu2.Item,
+                DropdownMenu3.Item,
                 {
                   title: action.title,
                   disabled,
@@ -26275,7 +26354,7 @@ function DataExplorerViewTree({
                   ]
                 }
               ),
-              action.separatorAfter ? /* @__PURE__ */ jsx(DropdownMenu2.Separator, { className: theme.slots.menuSeparator }) : null
+              action.separatorAfter ? /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator }) : null
             ] }, action.id);
           })
         }
@@ -27546,8 +27625,8 @@ function CollapsedChildMenu({
   const itemLabel = typeof item.label === "string" ? item.label : item.id;
   const itemTriggerDisabled = Boolean(item.disabled) || !onChildSelect || enabledChildren.length === 0;
   const domProps = item.domProps ?? {};
-  return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: triggerVariant === "item" && appearance ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: triggerVariant === "item" && appearance ? /* @__PURE__ */ jsx(
       "button",
       {
         ...domProps,
@@ -27593,8 +27672,8 @@ function CollapsedChildMenu({
         children: triggerVariant === "disclosure" ? /* @__PURE__ */ jsx(DisclosureIcon, { expanded: false }) : /* @__PURE__ */ jsx(MoreIcon4, {})
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu2.Content,
+    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu3.Content,
       {
         side: "right",
         align: "start",
@@ -27604,7 +27683,7 @@ function CollapsedChildMenu({
           classNames?.childMenuContent
         ),
         children: item.children?.map((child) => /* @__PURE__ */ jsxs(
-          DropdownMenu2.Item,
+          DropdownMenu3.Item,
           {
             disabled: child.disabled,
             "data-navigation-sidebar-child-id": child.id,
@@ -35087,7 +35166,7 @@ function DarkModeSelector({
     { value: "light", label: resolvedLabels.light, Icon: SunIcon },
     { value: "dark", label: resolvedLabels.dark, Icon: MoonIcon }
   ];
-  const trigger = /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  const trigger = /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
     "button",
     {
       ...componentAttributes,
@@ -35101,7 +35180,7 @@ function DarkModeSelector({
       ]
     }
   ) });
-  return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
+  return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
     tooltip ? /* @__PURE__ */ jsx(Tooltip2.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(Tooltip2.Root, { children: [
       /* @__PURE__ */ jsx(Tooltip2.Trigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ jsx(Tooltip2.Portal, { children: /* @__PURE__ */ jsxs(
@@ -35116,14 +35195,14 @@ function DarkModeSelector({
         }
       ) })
     ] }) }) : trigger,
-    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu2.Content,
+    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu3.Content,
       {
         className: "z-50 min-w-[8rem] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
         sideOffset: 5,
         align: "end",
         children: options.map(({ value, label, Icon: Icon2 }) => /* @__PURE__ */ jsxs(
-          DropdownMenu2.Item,
+          DropdownMenu3.Item,
           {
             className: cn5(
               "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]",
@@ -35180,9 +35259,9 @@ function DarkModeSubMenu({
     { value: "light", label: resolvedLabels.light, Icon: SunIcon },
     { value: "dark", label: resolvedLabels.dark, Icon: MoonIcon }
   ];
-  return /* @__PURE__ */ jsxs(DropdownMenu2.Sub, { children: [
+  return /* @__PURE__ */ jsxs(DropdownMenu3.Sub, { children: [
     /* @__PURE__ */ jsxs(
-      DropdownMenu2.SubTrigger,
+      DropdownMenu3.SubTrigger,
       {
         ...componentAttributes,
         className: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))] data-[state=open]:bg-[hsl(var(--accent))]",
@@ -35193,13 +35272,13 @@ function DarkModeSubMenu({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu2.SubContent,
+    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu3.SubContent,
       {
         className: "z-50 min-w-[8rem] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
         sideOffset: 8,
         children: options.map(({ value, label: optLabel, Icon: Icon2 }) => /* @__PURE__ */ jsxs(
-          DropdownMenu2.CheckboxItem,
+          DropdownMenu3.CheckboxItem,
           {
             checked: mode === value,
             disabled: mode === value,
@@ -35208,7 +35287,7 @@ function DarkModeSubMenu({
             ),
             onCheckedChange: () => onModeChange(value),
             children: [
-              /* @__PURE__ */ jsx(DropdownMenu2.ItemIndicator, { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
+              /* @__PURE__ */ jsx(DropdownMenu3.ItemIndicator, { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
               /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4" }),
               optLabel
             ]
@@ -35238,7 +35317,7 @@ function I18nSelector({
 }) {
   const locale = useMonkeysLocale();
   const componentAttributes = useMonkeysComponentAttributes();
-  const trigger = /* @__PURE__ */ jsx(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  const trigger = /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
     "button",
     {
       ...componentAttributes,
@@ -35252,7 +35331,7 @@ function I18nSelector({
       ]
     }
   ) });
-  return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { children: [
+  return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
     tooltip ? /* @__PURE__ */ jsx(Tooltip2.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(Tooltip2.Root, { children: [
       /* @__PURE__ */ jsx(Tooltip2.Trigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ jsx(Tooltip2.Portal, { children: /* @__PURE__ */ jsxs(
@@ -35267,14 +35346,14 @@ function I18nSelector({
         }
       ) })
     ] }) }) : trigger,
-    /* @__PURE__ */ jsx(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu2.Content,
+    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu3.Content,
       {
         className: "z-50 min-w-[8rem] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
         sideOffset: 5,
         align: "end",
         children: languages.map(({ code, label }) => /* @__PURE__ */ jsx(
-          DropdownMenu2.Item,
+          DropdownMenu3.Item,
           {
             className: cn6(
               "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]",