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

package/dist/components/layout/index.d.mts

@@ -236,6 +236,9 @@ interface NavigationLayoutProps {
     className?: string;
     collapsedSidebarAccountMenu?: ReactNode;
     collapsedSidebarWidth?: string;
+    contextualSidebar?: boolean;
+    contextualSidebarHeader?: ReactNode;
+    contextualSidebarWidth?: string;
     defaultMode?: NavigationMode;
     defaultSidebarCollapsed?: boolean;
     expandedSidebarWidth?: string;
@@ -281,5 +284,5 @@ interface NavigationHeadbarProps {
     onNavigate?: (itemId: string) => void;
 }
 declare function NavigationHeadbar({ activeItemId, activeRootId, actions, accountMenu, className, extra, layout, brand, logo, navigation, navItems, onNavigate, }: NavigationHeadbarProps): react_jsx_runtime.JSX.Element;
-declare function NavigationLayout({ activeItemId, activeRootId, allowModeSwitch, accountMenu, children, className, collapsedSidebarAccountMenu, collapsedSidebarWidth, defaultMode, defaultSidebarCollapsed, expandedSidebarWidth, expandSidebarLabel, flush, headbarActions, headbarLayout, logo, mode, navItems, onModeChange, onNavigate, onSidebarCollapsedChange, renderHeadbarExtra, collapseSidebarLabel, sidebarCollapsed: controlledSidebarCollapsed, sidebarAccountMenu, sidebarFooter, sidebarHeader, switchToHeadbarLabel, switchToSidebarLabel, }: NavigationLayoutProps): react_jsx_runtime.JSX.Element;
+declare function NavigationLayout({ activeItemId, activeRootId, allowModeSwitch, accountMenu, children, className, collapsedSidebarAccountMenu, collapsedSidebarWidth, contextualSidebar, contextualSidebarHeader, contextualSidebarWidth, defaultMode, defaultSidebarCollapsed, expandedSidebarWidth, expandSidebarLabel, flush, headbarActions, headbarLayout, logo, mode, navItems, onModeChange, onNavigate, onSidebarCollapsedChange, renderHeadbarExtra, collapseSidebarLabel, sidebarCollapsed: controlledSidebarCollapsed, sidebarAccountMenu, sidebarFooter, sidebarHeader, switchToHeadbarLabel, switchToSidebarLabel, }: NavigationLayoutProps): react_jsx_runtime.JSX.Element;
 export { AppHeader, type AppHeaderLogo, type AppHeaderProps, type AppHeaderUser, AppLayout, type AppLayoutProps, AppShellSidebar, type AppShellSidebarClassNames, type AppShellSidebarProps, AppSidebar, type AppSidebarProps, type HeadbarLayout, type HeadbarLayoutMode, type HeadbarMenuRadius, type HeadbarNavPosition, type HeadbarSurface, type HeaderTab, type LayoutNavItem, NavButton, type NavButtonProps, NavigationHeadbar, NavigationHeadbarMenu, type NavigationHeadbarMenuProps, type NavigationHeadbarProps, NavigationLayout, type NavigationLayoutProps, type NavigationMode, type SidebarAccount, type SidebarNavItem, UserAccountMenu, type UserAccountMenuClassNames, type UserAccountMenuItem, type UserAccountMenuProps, type UserAccountMenuRadius, type UserAccountMenuSelectorConfig, type UserAccountMenuSelectorOption, type UserAccountMenuSide, type UserAccountMenuTriggerVariant, type UserAccountMenuUser, cn };

package/dist/components/layout/index.d.ts

@@ -236,6 +236,9 @@ interface NavigationLayoutProps {
     className?: string;
     collapsedSidebarAccountMenu?: ReactNode;
     collapsedSidebarWidth?: string;
+    contextualSidebar?: boolean;
+    contextualSidebarHeader?: ReactNode;
+    contextualSidebarWidth?: string;
     defaultMode?: NavigationMode;
     defaultSidebarCollapsed?: boolean;
     expandedSidebarWidth?: string;
@@ -281,5 +284,5 @@ interface NavigationHeadbarProps {
     onNavigate?: (itemId: string) => void;
 }
 declare function NavigationHeadbar({ activeItemId, activeRootId, actions, accountMenu, className, extra, layout, brand, logo, navigation, navItems, onNavigate, }: NavigationHeadbarProps): react_jsx_runtime.JSX.Element;
-declare function NavigationLayout({ activeItemId, activeRootId, allowModeSwitch, accountMenu, children, className, collapsedSidebarAccountMenu, collapsedSidebarWidth, defaultMode, defaultSidebarCollapsed, expandedSidebarWidth, expandSidebarLabel, flush, headbarActions, headbarLayout, logo, mode, navItems, onModeChange, onNavigate, onSidebarCollapsedChange, renderHeadbarExtra, collapseSidebarLabel, sidebarCollapsed: controlledSidebarCollapsed, sidebarAccountMenu, sidebarFooter, sidebarHeader, switchToHeadbarLabel, switchToSidebarLabel, }: NavigationLayoutProps): react_jsx_runtime.JSX.Element;
+declare function NavigationLayout({ activeItemId, activeRootId, allowModeSwitch, accountMenu, children, className, collapsedSidebarAccountMenu, collapsedSidebarWidth, contextualSidebar, contextualSidebarHeader, contextualSidebarWidth, defaultMode, defaultSidebarCollapsed, expandedSidebarWidth, expandSidebarLabel, flush, headbarActions, headbarLayout, logo, mode, navItems, onModeChange, onNavigate, onSidebarCollapsedChange, renderHeadbarExtra, collapseSidebarLabel, sidebarCollapsed: controlledSidebarCollapsed, sidebarAccountMenu, sidebarFooter, sidebarHeader, switchToHeadbarLabel, switchToSidebarLabel, }: NavigationLayoutProps): react_jsx_runtime.JSX.Element;
 export { AppHeader, type AppHeaderLogo, type AppHeaderProps, type AppHeaderUser, AppLayout, type AppLayoutProps, AppShellSidebar, type AppShellSidebarClassNames, type AppShellSidebarProps, AppSidebar, type AppSidebarProps, type HeadbarLayout, type HeadbarLayoutMode, type HeadbarMenuRadius, type HeadbarNavPosition, type HeadbarSurface, type HeaderTab, type LayoutNavItem, NavButton, type NavButtonProps, NavigationHeadbar, NavigationHeadbarMenu, type NavigationHeadbarMenuProps, type NavigationHeadbarProps, NavigationLayout, type NavigationLayoutProps, type NavigationMode, type SidebarAccount, type SidebarNavItem, UserAccountMenu, type UserAccountMenuClassNames, type UserAccountMenuItem, type UserAccountMenuProps, type UserAccountMenuRadius, type UserAccountMenuSelectorConfig, type UserAccountMenuSelectorOption, type UserAccountMenuSide, type UserAccountMenuTriggerVariant, type UserAccountMenuUser, cn };

package/dist/components/layout/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var react = require('react');
-var DropdownMenu = require('@radix-ui/react-dropdown-menu');
+var DropdownMenu2 = require('@radix-ui/react-dropdown-menu');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 require('react-dom');
@@ -25,7 +25,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
+var DropdownMenu2__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu2);
 var Tooltip__namespace = /*#__PURE__*/_interopNamespace(Tooltip);
 
 // src/components/layout/index.tsx
@@ -2652,9 +2652,9 @@ function UserAccountMenuSelector({
   if (selector.visible === false || selector.options.length === 0) return null;
   const radiusClass = radiusClassNames[menuRadius];
   const currentLabel = getCurrentOptionLabel(selector);
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Sub, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Sub, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
-      DropdownMenu__namespace.SubTrigger,
+      DropdownMenu2__namespace.SubTrigger,
       {
         disabled: selector.disabled,
         className: cn(
@@ -2669,8 +2669,8 @@ function UserAccountMenuSelector({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      DropdownMenu__namespace.SubContent,
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenu2__namespace.SubContent,
       {
         sideOffset: 8,
         className: cn(
@@ -2679,8 +2679,8 @@ function UserAccountMenuSelector({
           selector.contentWidthClassName,
           classNames?.subContent
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.RadioGroup, { value: selector.value, onValueChange: selector.onChange, children: selector.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-          DropdownMenu__namespace.RadioItem,
+        children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.RadioGroup, { value: selector.value, onValueChange: selector.onChange, children: selector.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+          DropdownMenu2__namespace.RadioItem,
           {
             value: option.value,
             disabled: option.disabled,
@@ -2690,7 +2690,7 @@ function UserAccountMenuSelector({
               classNames?.item
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.ItemIndicator, { className: "absolute left-2 inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.ItemIndicator, { className: "absolute left-2 inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }),
               renderIcon(option.icon, classNames?.itemIcon),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
             ]
@@ -2739,8 +2739,8 @@ function UserAccountMenu({
     }
   );
   const isProfileTrigger = triggerVariant === "profile";
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       BaseButton,
       {
         appearance,
@@ -2766,8 +2766,8 @@ function UserAccountMenu({
         tone: "muted"
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-      DropdownMenu__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenu2__namespace.Content,
       {
         align,
         side,
@@ -2779,7 +2779,7 @@ function UserAccountMenu({
           classNames?.content
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Label, { className: cn("px-2 py-1.5 font-normal", classNames?.label), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Label, { className: cn("px-2 py-1.5 font-normal", classNames?.label), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
             avatar,
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate text-sm font-medium leading-none", classNames?.userName), children: displayName }),
@@ -2796,7 +2796,7 @@ function UserAccountMenu({
             ] })
           ] }) }),
           hasMenuBody ? /* @__PURE__ */ jsxRuntime.jsx(
-            DropdownMenu__namespace.Separator,
+            DropdownMenu2__namespace.Separator,
             {
               className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
             }
@@ -2811,20 +2811,20 @@ function UserAccountMenu({
             selector.id ?? `selector-${index}`
           )),
           visibleSelectors.length > 0 && visibleItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-            DropdownMenu__namespace.Separator,
+            DropdownMenu2__namespace.Separator,
             {
               className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
             }
           ) : null,
           visibleItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             item.separatorBefore ? /* @__PURE__ */ jsxRuntime.jsx(
-              DropdownMenu__namespace.Separator,
+              DropdownMenu2__namespace.Separator,
               {
                 className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
               }
             ) : null,
             /* @__PURE__ */ jsxRuntime.jsxs(
-              DropdownMenu__namespace.Item,
+              DropdownMenu2__namespace.Item,
               {
                 disabled: item.disabled,
                 onSelect: item.disabled ? void 0 : item.onSelect,
@@ -2948,8 +2948,8 @@ function AppHeader({
         (!tabs || tabs.length === 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [
           extra,
-          user && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Root, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          user && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Root, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
               "img",
               {
                 src: user.photo,
@@ -2957,14 +2957,14 @@ function AppHeader({
                 className: "h-8 w-8 rounded-full object-cover"
               }
             ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-              DropdownMenu__namespace.Content,
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              DropdownMenu2__namespace.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__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Label, { className: "flex items-center gap-2 px-2 py-1.5 font-normal", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Label, { className: "flex items-center gap-2 px-2 py-1.5 font-normal", children: [
                     user.photo ? /* @__PURE__ */ jsxRuntime.jsx(
                       "img",
                       {
@@ -2978,11 +2978,11 @@ function AppHeader({
                       user.email && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))] leading-none mt-1", children: user.email })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Separator, { className: "h-px bg-[hsl(var(--border))] my-1" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Group, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Separator, { className: "h-px bg-[hsl(var(--border))] my-1" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Group, { children: [
                     userMenuItems,
                     /* @__PURE__ */ jsxRuntime.jsxs(
-                      DropdownMenu__namespace.Item,
+                      DropdownMenu2__namespace.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?.(),
@@ -3259,6 +3259,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;
@@ -3386,11 +3387,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);
 }
@@ -3459,10 +3467,7 @@ function SidebarNavigationList({
   const [expandedByRoot, setExpandedByRoot] = react.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,
@@ -3471,13 +3476,10 @@ function SidebarNavigationList({
   };
   react.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({
@@ -3489,6 +3491,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__ */ jsxRuntime.jsxs("div", { "data-navigation-sidebar-item-id": item.id, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -3501,64 +3531,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__ */ jsxRuntime.jsxs("div", { "data-navigation-sidebar-root-id": item.id, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    NavButton,
-                    {
-                      active: isActive,
-                      disabled: item.disabled,
-                      icon: item.icon,
-                      onClick: () => toggleRoot(item.id),
-                      postfix: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" })
-                        }
-                      ) }),
-                      children: item.label
-                    }
-                  ),
-                  isExpanded ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex flex-col gap-1", children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-                    NavButton,
-                    {
-                      active: activeItemId === child.id,
-                      disabled: child.disabled,
-                      onClick: () => onNavigate?.(child.id),
-                      children: child.label
-                    },
-                    child.id
-                  )) }) : null
-                ] }, item.id);
-              }
-              return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-navigation-sidebar-root-id": item.id, children: /* @__PURE__ */ jsxRuntime.jsx(
-                NavButton,
-                {
-                  active: isActive,
-                  disabled: item.disabled,
-                  icon: item.icon,
-                  onClick: () => onNavigate?.(item.id),
-                  children: item.label
-                }
-              ) }, item.id);
-            })
+            children: renderItems(items)
           }
         )
       ]
@@ -3717,22 +3690,30 @@ function Sidebar({
     ] })
   ] });
 }
-function HeadbarChevronIcon({ open }) {
+function HeadbarChevronIcon({
+  className,
+  open,
+  sideways = false,
+  style
+}) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: sideways ? "m9 18 6-6-6-6" : "m6 9 6 6 6-6" })
     }
   );
 }
@@ -3744,6 +3725,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      item.icon ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Sub, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          DropdownMenu2__namespace.SubTrigger,
+          {
+            disabled: item.disabled,
+            className: cn2(HEADBAR_DROPDOWN_ITEM_CLASS, menuItemRadiusClass),
+            children: [
+              label,
+              /* @__PURE__ */ jsxRuntime.jsx(HeadbarChevronIcon, { open: false, sideways: true })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownMenu2__namespace.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__ */ jsxRuntime.jsx(
+              HeadbarDropdownItems,
+              {
+                activeItemId,
+                items: item.children,
+                menuContentRadiusClass,
+                menuItemRadiusClass,
+                onNavigate,
+                onNavigateComplete,
+                useTokenRadius
+              }
+            )
+          }
+        ) })
+      ] }, item.id);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenu2__namespace.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,
@@ -3787,13 +3862,13 @@ function HeadbarNavMenuItem({
   };
   react.useEffect(() => clearCloseTimer, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenu__namespace.Root,
+    DropdownMenu2__namespace.Root,
     {
       modal: false,
       open: isOpen,
       onOpenChange: (nextOpen) => setOpen(!item.disabled && nextOpen),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           BaseButton,
           {
             appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
@@ -3839,8 +3914,8 @@ function HeadbarNavMenuItem({
             )
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          DropdownMenu__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownMenu2__namespace.Content,
           {
             align: "start",
             sideOffset: 5,
@@ -3852,40 +3927,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__ */ jsxRuntime.jsxs(
-              DropdownMenu__namespace.Item,
+            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
+              }
+            )
           }
         ) })
       ]
@@ -3911,9 +3968,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__ */ jsxRuntime.jsxs(
       "span",
@@ -4119,6 +4174,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,
@@ -4150,6 +4208,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 ?? [];
   react.useEffect(() => {
     if (!isModeControlled) {
       setUncontrolledMode(defaultMode);
@@ -4220,7 +4281,25 @@ function NavigationLayout({
       }
     )
   });
-  const sidebar = isHeadbarMode ? null : /* @__PURE__ */ jsxRuntime.jsx(
+  const sidebar = isHeadbarMode && contextualSidebar && contextualItems.length ? /* @__PURE__ */ jsxRuntime.jsx(
+    "aside",
+    {
+      className: "relative h-full min-h-0 shrink-0 overflow-hidden",
+      "data-navigation-contextual-sidebar": resolvedActiveRootId,
+      style: { width: contextualSidebarWidth },
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "shrink-0 px-2 text-sm font-semibold text-[hsl(var(--foreground))]", children: contextualSidebarHeader ?? activeRoot?.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SidebarNavigationList,
+          {
+            activeItemId,
+            items: contextualItems,
+            onNavigate
+          }
+        )
+      ] })
+    }
+  ) : isHeadbarMode ? null : /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn2(
@@ -4259,7 +4338,7 @@ function NavigationLayout({
     NavigationHeadbar,
     {
       activeItemId,
-      activeRootId: activeRootId ?? findNavigationRootId(navItems, activeItemId),
+      activeRootId: resolvedActiveRootId,
       actions: allowModeSwitch ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         headbarActions,
         /* @__PURE__ */ jsxRuntime.jsx(