@inf-monkeys-tech/monkeys-design 0.4.46 → 0.4.48

package/dist/index.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var ContextMenu = require('@radix-ui/react-context-menu');
-var DropdownMenu3 = require('@radix-ui/react-dropdown-menu');
+var DropdownMenu5 = require('@radix-ui/react-dropdown-menu');
 var core = require('@dnd-kit/core');
 require('@dnd-kit/sortable');
 require('@dnd-kit/utilities');
@@ -33,7 +33,7 @@ function _interopNamespace(e) {
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var ContextMenu__namespace = /*#__PURE__*/_interopNamespace(ContextMenu);
-var DropdownMenu3__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu3);
+var DropdownMenu5__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu5);
 var Tooltip__namespace = /*#__PURE__*/_interopNamespace(Tooltip);
 
 var __create = Object.create;
@@ -1278,7 +1278,7 @@ var require_lodash = __commonJS({
           if (typeof func != "function") {
             throw new TypeError2(FUNC_ERROR_TEXT);
           }
-          return setTimeout(function() {
+          return setTimeout2(function() {
             func.apply(undefined2, args);
           }, wait);
         }
@@ -2078,7 +2078,7 @@ var require_lodash = __commonJS({
           end = end === undefined2 ? length : end;
           return !start && end >= length ? array : baseSlice(array, start, end);
         }
-        var clearTimeout = ctxClearTimeout || function(id) {
+        var clearTimeout2 = ctxClearTimeout || function(id) {
           return root.clearTimeout(id);
         };
         function cloneBuffer(buffer, isDeep) {
@@ -3129,7 +3129,7 @@ var require_lodash = __commonJS({
           return object[key];
         }
         var setData = shortOut(baseSetData);
-        var setTimeout = ctxSetTimeout || function(func, wait) {
+        var setTimeout2 = ctxSetTimeout || function(func, wait) {
           return root.setTimeout(func, wait);
         };
         var setToString = shortOut(baseSetToString);
@@ -3921,7 +3921,7 @@ var require_lodash = __commonJS({
           }
           function leadingEdge(time) {
             lastInvokeTime = time;
-            timerId = setTimeout(timerExpired, wait);
+            timerId = setTimeout2(timerExpired, wait);
             return leading ? invokeFunc(time) : result2;
           }
           function remainingWait(time) {
@@ -3937,7 +3937,7 @@ var require_lodash = __commonJS({
             if (shouldInvoke(time)) {
               return trailingEdge(time);
             }
-            timerId = setTimeout(timerExpired, remainingWait(time));
+            timerId = setTimeout2(timerExpired, remainingWait(time));
           }
           function trailingEdge(time) {
             timerId = undefined2;
@@ -3949,7 +3949,7 @@ var require_lodash = __commonJS({
           }
           function cancel() {
             if (timerId !== undefined2) {
-              clearTimeout(timerId);
+              clearTimeout2(timerId);
             }
             lastInvokeTime = 0;
             lastArgs = lastCallTime = lastThis = timerId = undefined2;
@@ -3967,13 +3967,13 @@ var require_lodash = __commonJS({
                 return leadingEdge(lastCallTime);
               }
               if (maxing) {
-                clearTimeout(timerId);
-                timerId = setTimeout(timerExpired, wait);
+                clearTimeout2(timerId);
+                timerId = setTimeout2(timerExpired, wait);
                 return invokeFunc(lastCallTime);
               }
             }
             if (timerId === undefined2) {
-              timerId = setTimeout(timerExpired, wait);
+              timerId = setTimeout2(timerExpired, wait);
             }
             return result2;
           }
@@ -14796,8 +14796,8 @@ function DataExplorerSelect({
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: selected?.label ?? placeholder })
   ] }) : selected?.label ?? label ?? placeholder;
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu3__namespace.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
@@ -14825,8 +14825,8 @@ function DataExplorerSelect({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      DropdownMenu3__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenu5__namespace.Content,
       {
         align,
         sideOffset,
@@ -14834,7 +14834,7 @@ function DataExplorerSelect({
         style: theme.styles.menuContent,
         onClick: (event) => event.stopPropagation(),
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          DropdownMenu3__namespace.RadioGroup,
+          DropdownMenu5__namespace.RadioGroup,
           {
             value,
             onValueChange: (nextValue) => {
@@ -14842,7 +14842,7 @@ function DataExplorerSelect({
               void onValueChange?.(nextValue);
             },
             children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-              DropdownMenu3__namespace.RadioItem,
+              DropdownMenu5__namespace.RadioItem,
               {
                 value: option.value,
                 title: option.title,
@@ -14888,9 +14888,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__ */ jsxRuntime.jsxs("div", { children: [
-    action.separatorBefore ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Separator, { className: theme.slots.menuSeparator }) : null,
+    action.separatorBefore ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Separator, { className: theme.slots.menuSeparator }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
-      DropdownMenu3__namespace.Item,
+      DropdownMenu5__namespace.Item,
       {
         title: action.title,
         disabled,
@@ -14911,7 +14911,7 @@ function renderMenuItem(action, context, theme, className) {
         ]
       }
     ),
-    action.separatorAfter ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Separator, { className: theme.slots.menuSeparator }) : null
+    action.separatorAfter ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Separator, { className: theme.slots.menuSeparator }) : null
   ] }, action.id);
 }
 function renderMenuAction(action, context, theme, classNames, appearance) {
@@ -14920,8 +14920,8 @@ function renderMenuAction(action, context, theme, classNames, appearance) {
   const visibleItems = (action.items ?? []).filter(
     (item) => resolveDataExplorerValue(item.visible, context) ?? true
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu3__namespace.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       DataExplorerButton,
       {
         title: action.title,
@@ -14937,8 +14937,8 @@ function renderMenuAction(action, context, theme, classNames, appearance) {
         className: classNames?.action
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-      DropdownMenu3__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenu5__namespace.Content,
       {
         align: action.align ?? "end",
         sideOffset: action.sideOffset ?? 6,
@@ -14947,8 +14947,8 @@ function renderMenuAction(action, context, theme, classNames, appearance) {
         onClick: (event) => event.stopPropagation(),
         children: [
           action.menuLabel ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Label, { className: theme.slots.menuLabel, children: action.menuLabel }),
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Separator, { className: theme.slots.menuSeparator })
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Label, { className: theme.slots.menuLabel, children: action.menuLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Separator, { className: theme.slots.menuSeparator })
           ] }) : null,
           visibleItems.map(
             (item) => renderMenuItem(item, context, theme, classNames?.menuItem)
@@ -15771,8 +15771,8 @@ function DataExplorerDisplayActionMenu({
   if (visibleActions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn2("inline-flex", classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu3__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn2("inline-flex", classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
@@ -15789,8 +15789,8 @@ function DataExplorerDisplayActionMenu({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-      DropdownMenu3__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenu5__namespace.Content,
       {
         align,
         sideOffset,
@@ -15803,7 +15803,7 @@ function DataExplorerDisplayActionMenu({
         children: [
           label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              DropdownMenu3__namespace.Label,
+              DropdownMenu5__namespace.Label,
               {
                 className: cn2(
                   theme.slots.menuLabel,
@@ -15813,7 +15813,7 @@ function DataExplorerDisplayActionMenu({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              DropdownMenu3__namespace.Separator,
+              DropdownMenu5__namespace.Separator,
               {
                 className: cn2(
                   theme.slots.menuSeparator,
@@ -15827,7 +15827,7 @@ function DataExplorerDisplayActionMenu({
             if (action.render) {
               return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 action.separatorBefore ? /* @__PURE__ */ jsxRuntime.jsx(
-                  DropdownMenu3__namespace.Separator,
+                  DropdownMenu5__namespace.Separator,
                   {
                     className: cn2(
                       theme.slots.menuSeparator,
@@ -15837,7 +15837,7 @@ function DataExplorerDisplayActionMenu({
                 ) : null,
                 action.render(context),
                 action.separatorAfter ? /* @__PURE__ */ jsxRuntime.jsx(
-                  DropdownMenu3__namespace.Separator,
+                  DropdownMenu5__namespace.Separator,
                   {
                     className: cn2(
                       theme.slots.menuSeparator,
@@ -15849,7 +15849,7 @@ function DataExplorerDisplayActionMenu({
             }
             return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               action.separatorBefore ? /* @__PURE__ */ jsxRuntime.jsx(
-                DropdownMenu3__namespace.Separator,
+                DropdownMenu5__namespace.Separator,
                 {
                   className: cn2(
                     "-mx-1 my-1 h-px bg-border",
@@ -15858,7 +15858,7 @@ function DataExplorerDisplayActionMenu({
                 }
               ) : null,
               /* @__PURE__ */ jsxRuntime.jsxs(
-                DropdownMenu3__namespace.Item,
+                DropdownMenu5__namespace.Item,
                 {
                   title: action.title,
                   disabled,
@@ -15909,7 +15909,7 @@ function DataExplorerDisplayActionMenu({
                 }
               ),
               action.separatorAfter ? /* @__PURE__ */ jsxRuntime.jsx(
-                DropdownMenu3__namespace.Separator,
+                DropdownMenu5__namespace.Separator,
                 {
                   className: cn2(
                     theme.slots.menuSeparator,
@@ -17983,8 +17983,8 @@ function DataExplorerViewTree({
       return resolveDataExplorerValue(action.visible, payload) ?? true;
     });
     if (visibleActions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu3__namespace.Root, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -17999,8 +17999,8 @@ function DataExplorerViewTree({
           children: /* @__PURE__ */ jsxRuntime.jsx(MoreIcon2, {})
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        DropdownMenu3__namespace.Content,
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        DropdownMenu5__namespace.Content,
         {
           align: "end",
           sideOffset: 6,
@@ -18015,9 +18015,9 @@ function DataExplorerViewTree({
               return /* @__PURE__ */ jsxRuntime.jsx("div", { children: action.render(payload) }, action.id);
             }
             return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              action.separatorBefore ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Separator, { className: theme.slots.menuSeparator }) : null,
+              action.separatorBefore ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Separator, { className: theme.slots.menuSeparator }) : null,
               /* @__PURE__ */ jsxRuntime.jsxs(
-                DropdownMenu3__namespace.Item,
+                DropdownMenu5__namespace.Item,
                 {
                   title: action.title,
                   disabled,
@@ -18039,7 +18039,7 @@ function DataExplorerViewTree({
                   ]
                 }
               ),
-              action.separatorAfter ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Separator, { className: theme.slots.menuSeparator }) : null
+              action.separatorAfter ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Separator, { className: theme.slots.menuSeparator }) : null
             ] }, action.id);
           })
         }
@@ -20823,6 +20823,277 @@ function LoginPage({
     }
   );
 }
+var defaultAppearance = {
+  preset: "admin",
+  density: "compact",
+  radius: "lg",
+  border: "subtle",
+  background: "soft"
+};
+var radiusClassNames = {
+  default: "rounded-md",
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  full: "rounded-full"
+};
+function CheckIcon4() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "h-3 w-3",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function MoreIcon3() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "h-4 w-4",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "5", cy: "12", r: "1" })
+      ]
+    }
+  );
+}
+function getInitials2(name) {
+  if (!name) return "U";
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (!words.length) return "U";
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return words.slice(0, 2).map((word) => word[0]).join("").toUpperCase();
+}
+function renderIcon(icon, className) {
+  if (!icon) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-flex h-4 w-4 shrink-0 items-center justify-center", className), children: icon });
+}
+function getCurrentOptionLabel(selector) {
+  return selector.options.find((option) => option.value === selector.value)?.label ?? selector.value;
+}
+function UserAccountMenuSelector({
+  classNames,
+  menuRadius,
+  selector
+}) {
+  if (selector.visible === false || selector.options.length === 0) return null;
+  const radiusClass = radiusClassNames[menuRadius];
+  const currentLabel = getCurrentOptionLabel(selector);
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Sub, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenu5__namespace.SubTrigger,
+      {
+        disabled: selector.disabled,
+        className: cn(
+          "relative flex cursor-pointer select-none items-center gap-2 px-2 py-2 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))] data-[state=open]:bg-[hsl(var(--accent))] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          radiusClass,
+          classNames?.subTrigger
+        ),
+        children: [
+          renderIcon(selector.icon),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: selector.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto min-w-0 max-w-[7rem] truncate text-xs text-[hsl(var(--muted-foreground))]", children: currentLabel })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenu5__namespace.SubContent,
+      {
+        sideOffset: 8,
+        className: cn(
+          "z-50 min-w-40 border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1.5 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
+          radiusClass,
+          selector.contentWidthClassName,
+          classNames?.subContent
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.RadioGroup, { value: selector.value, onValueChange: selector.onChange, children: selector.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+          DropdownMenu5__namespace.RadioItem,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            className: cn(
+              "relative flex cursor-pointer select-none items-center gap-2 px-2 py-2 pl-8 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+              radiusClass,
+              classNames?.item
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.ItemIndicator, { className: "absolute left-2 inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon4, {}) }),
+              renderIcon(option.icon, classNames?.itemIcon),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
+            ]
+          },
+          option.value
+        )) })
+      }
+    ) })
+  ] });
+}
+function UserAccountMenu({
+  align = "end",
+  appearance = defaultAppearance,
+  ariaLabel,
+  className,
+  classNames,
+  contentWidthClassName = "w-56",
+  fallbackName = "User",
+  items = [],
+  menuRadius = "default",
+  selectors = [],
+  side = "bottom",
+  sideOffset = 8,
+  triggerEndIcon,
+  triggerTitle,
+  triggerVariant = "avatar",
+  user
+}) {
+  const displayName = user.name?.trim() || fallbackName;
+  const initials = user.initials ?? getInitials2(displayName);
+  const radiusClass = radiusClassNames[menuRadius];
+  const visibleSelectors = selectors.filter(
+    (selector) => selector.visible !== false && selector.options.length > 0
+  );
+  const visibleItems = items.filter((item) => item.visible !== false);
+  const hasMenuBody = visibleSelectors.length > 0 || visibleItems.length > 0;
+  const avatar = /* @__PURE__ */ jsxRuntime.jsx(
+    BaseAvatar,
+    {
+      appearance,
+      alt: user.avatarAlt ?? displayName,
+      className: cn("h-8 w-8", classNames?.avatar),
+      initials,
+      name: displayName,
+      size: "sm",
+      src: user.avatarUrl
+    }
+  );
+  const isProfileTrigger = triggerVariant === "profile";
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      BaseButton,
+      {
+        appearance,
+        ariaLabel: ariaLabel ?? displayName,
+        className: cn(
+          isProfileTrigger ? "h-auto w-full justify-start rounded-lg border-transparent bg-transparent px-2 py-2 text-left shadow-none transition-all hover:bg-[hsl(var(--muted))]/60" : "h-9 w-9 overflow-visible rounded-full border-transparent bg-transparent p-0 shadow-none transition-all hover:ring-2 hover:ring-[hsl(var(--ring))]/20",
+          className,
+          classNames?.root,
+          classNames?.trigger
+        ),
+        classNames: {
+          icon: "h-8 w-8",
+          label: isProfileTrigger ? "min-w-0 flex-1 text-left" : void 0
+        },
+        endIcon: isProfileTrigger ? triggerEndIcon ?? /* @__PURE__ */ jsxRuntime.jsx(MoreIcon3, {}) : void 0,
+        icon: avatar,
+        iconOnly: !isProfileTrigger,
+        label: isProfileTrigger ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col items-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-full truncate text-sm font-medium leading-none text-[hsl(var(--foreground))]", children: displayName }),
+          user.secondaryText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 max-w-full truncate text-xs leading-none text-[hsl(var(--muted-foreground))]", children: user.secondaryText }) : null
+        ] }) : void 0,
+        title: triggerTitle ?? displayName,
+        tone: "muted"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenu5__namespace.Content,
+      {
+        align,
+        side,
+        sideOffset,
+        className: cn(
+          "z-50 border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1.5 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
+          contentWidthClassName,
+          radiusClass,
+          classNames?.content
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__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 }),
+              user.secondaryText ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "truncate pt-1 text-xs leading-none text-[hsl(var(--muted-foreground))]",
+                    classNames?.secondaryText
+                  ),
+                  children: user.secondaryText
+                }
+              ) : null
+            ] })
+          ] }) }),
+          hasMenuBody ? /* @__PURE__ */ jsxRuntime.jsx(
+            DropdownMenu5__namespace.Separator,
+            {
+              className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
+            }
+          ) : null,
+          visibleSelectors.map((selector, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            UserAccountMenuSelector,
+            {
+              classNames,
+              menuRadius,
+              selector
+            },
+            selector.id ?? `selector-${index}`
+          )),
+          visibleSelectors.length > 0 && visibleItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            DropdownMenu5__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(
+              DropdownMenu5__namespace.Separator,
+              {
+                className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
+              }
+            ) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              DropdownMenu5__namespace.Item,
+              {
+                disabled: item.disabled,
+                onSelect: item.onSelect,
+                className: cn(
+                  "relative flex cursor-pointer select-none items-center gap-2 px-2 py-2 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                  radiusClass,
+                  item.tone === "danger" && "text-[hsl(var(--destructive))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--destructive))] focus:text-[hsl(var(--destructive))]",
+                  classNames?.item,
+                  item.tone === "danger" && classNames?.dangerItem
+                ),
+                children: [
+                  renderIcon(item.icon, classNames?.itemIcon),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+                  item.shortcut ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-3 shrink-0 text-xs text-[hsl(var(--muted-foreground))]", children: item.shortcut }) : null
+                ]
+              }
+            )
+          ] }, item.id))
+        ]
+      }
+    ) })
+  ] });
+}
 function cn3(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
@@ -20903,27 +21174,27 @@ 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(DropdownMenu3__namespace.Root, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__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, alt: user.name, 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(DropdownMenu3__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-              DropdownMenu3__namespace.Content,
+          user && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Root, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__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, alt: user.name, 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(DropdownMenu5__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              DropdownMenu5__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(DropdownMenu3__namespace.Label, { className: "flex items-center gap-2 px-2 py-1.5 font-normal", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Label, { className: "flex items-center gap-2 px-2 py-1.5 font-normal", children: [
                     user.photo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: user.photo, alt: user.name, 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.jsxs("div", { className: "flex flex-col", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium leading-none", children: user.name }),
                       user.email && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))] leading-none mt-1", children: user.email })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Separator, { className: "h-px bg-[hsl(var(--border))] my-1" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu3__namespace.Group, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Separator, { className: "h-px bg-[hsl(var(--border))] my-1" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Group, { children: [
                     userMenuItems,
                     /* @__PURE__ */ jsxRuntime.jsxs(
-                      DropdownMenu3__namespace.Item,
+                      DropdownMenu5__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?.(),
@@ -21099,9 +21370,9 @@ function AppLayout({ header, sidebar, children, flush = false, className }) {
     "flex h-screen flex-col gap-[var(--global-spacing,0.75rem)] overflow-hidden p-[var(--global-spacing,0.75rem)]",
     className
   ), style: { backgroundColor: "hsl(var(--muted))" }, children: [
-    header,
+    header ? header : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 gap-[var(--global-spacing,0.75rem)] overflow-hidden min-h-0", children: [
-      sidebar,
+      sidebar ? sidebar : null,
       /* @__PURE__ */ jsxRuntime.jsx("main", { className: cn3(
         "flex-1 min-h-0 overflow-hidden rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))]",
         !flush && "overflow-y-auto"
@@ -21109,6 +21380,717 @@ function AppLayout({ header, sidebar, children, flush = false, className }) {
     ] })
   ] });
 }
+var NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH = "13.7rem";
+var NAVIGATION_LAYOUT_SIDEBAR_COLLAPSED_WIDTH = "4.25rem";
+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;
+var NAVIGATION_LAYOUT_HEADBAR_MAX_HEIGHT_PX = 120;
+var NAVIGATION_LAYOUT_HEADBAR_COMPACT_HEIGHT_THRESHOLD_PX = 64;
+var NAVIGATION_LAYOUT_HEADBAR_BOXED_VERTICAL_PADDING_PX = 12;
+var NAVIGATION_LAYOUT_HEADBAR_COMPACT_VERTICAL_PADDING_PX = 8;
+var NAVIGATION_LAYOUT_HEADBAR_LOGO_DEFAULT_SIZE_PX = 44;
+var NAVIGATION_LAYOUT_HEADBAR_LOGO_COMPACT_SIZE_PX = 36;
+var NAVIGATION_LAYOUT_DEFAULT_APPEARANCE = {
+  preset: "admin",
+  density: "compact",
+  radius: "lg",
+  border: "subtle",
+  background: "soft"
+};
+var NAVIGATION_LAYOUT_MENU_RADIUS_CLASS_MAP = {
+  none: { all: "rounded-none", left: "!rounded-none", right: "!rounded-none" },
+  sm: { all: "rounded-sm", left: "!rounded-l-sm !rounded-r-none", right: "!rounded-l-none !rounded-r-sm" },
+  md: { all: "rounded-md", left: "!rounded-l-md !rounded-r-none", right: "!rounded-l-none !rounded-r-md" },
+  lg: { all: "rounded-lg", left: "!rounded-l-lg !rounded-r-none", right: "!rounded-l-none !rounded-r-lg" },
+  xl: { all: "rounded-xl", left: "!rounded-l-xl !rounded-r-none", right: "!rounded-l-none !rounded-r-xl" },
+  full: { all: "rounded-full", left: "!rounded-l-full !rounded-r-none", right: "!rounded-l-none !rounded-r-full" }
+};
+function clampHeadbarHeight(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return NAVIGATION_LAYOUT_HEADBAR_DEFAULT_HEIGHT_PX;
+  return Math.min(NAVIGATION_LAYOUT_HEADBAR_MAX_HEIGHT_PX, Math.max(NAVIGATION_LAYOUT_HEADBAR_MIN_HEIGHT_PX, Math.round(value)));
+}
+function getHeadbarVerticalPaddingPx(heightPx) {
+  return heightPx <= NAVIGATION_LAYOUT_HEADBAR_COMPACT_HEIGHT_THRESHOLD_PX ? NAVIGATION_LAYOUT_HEADBAR_COMPACT_VERTICAL_PADDING_PX : NAVIGATION_LAYOUT_HEADBAR_BOXED_VERTICAL_PADDING_PX;
+}
+function getHeadbarLogoSizePx(heightPx) {
+  return heightPx <= NAVIGATION_LAYOUT_HEADBAR_COMPACT_HEIGHT_THRESHOLD_PX ? NAVIGATION_LAYOUT_HEADBAR_LOGO_COMPACT_SIZE_PX : NAVIGATION_LAYOUT_HEADBAR_LOGO_DEFAULT_SIZE_PX;
+}
+function getHeadbarMenuRadiusClass(menuRadius = "default", part = "all") {
+  if (menuRadius === "default") {
+    if (part === "left") return "rounded-l-lg rounded-r-none";
+    if (part === "right") return "rounded-l-none rounded-r-lg";
+    return "rounded-lg";
+  }
+  return NAVIGATION_LAYOUT_MENU_RADIUS_CLASS_MAP[menuRadius][part];
+}
+function getHeadbarFrameClass(layoutMode = "boxed") {
+  return layoutMode === "full-bleed" ? "relative z-40 grid w-full shrink-0 grid-cols-[minmax(0,1fr)_minmax(0,max-content)_minmax(0,1fr)] items-center gap-4 rounded-none border-b border-x-0 border-t-0 border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]" : "relative z-40 grid w-full shrink-0 grid-cols-[minmax(0,1fr)_minmax(0,max-content)_minmax(0,1fr)] items-center gap-4 rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]";
+}
+function getHeadbarFrameStyle(layoutMode = "boxed", heightPx) {
+  const verticalPaddingPx = getHeadbarVerticalPaddingPx(heightPx);
+  const style = {
+    height: `${heightPx}px`,
+    minHeight: `${heightPx}px`,
+    paddingTop: `${verticalPaddingPx}px`,
+    paddingBottom: `${verticalPaddingPx}px`
+  };
+  if (layoutMode === "full-bleed") {
+    style.marginLeft = "calc(var(--global-spacing,0.75rem) * -1)";
+    style.marginRight = "calc(var(--global-spacing,0.75rem) * -1)";
+    style.marginTop = "calc(var(--global-spacing,0.75rem) * -1)";
+    style.width = "calc(100% + (var(--global-spacing,0.75rem) * 2))";
+  }
+  return style;
+}
+function getHeadbarNavClass(navPosition = "center") {
+  if (navPosition === "left") return "justify-start";
+  if (navPosition === "right") return "justify-end";
+  return "justify-center";
+}
+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;
+  }
+  return activeItemId;
+}
+function getNavigationActionTitle(action) {
+  return action.title || (typeof action.label === "string" ? action.label : void 0);
+}
+function NavigationLayoutActionButtons({
+  actions,
+  compact
+}) {
+  if (!actions.length) return null;
+  if (compact) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-2", children: actions.map((action) => {
+      const title = getNavigationActionTitle(action);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        BaseTooltip,
+        {
+          appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+          content: action.label,
+          placement: "right",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            BaseButton,
+            {
+              appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+              tone: "muted",
+              iconOnly: true,
+              icon: action.icon,
+              onClick: action.onClick,
+              title,
+              ariaLabel: title,
+              className: cn3(
+                "h-10 w-10 rounded-lg border-transparent text-[hsl(var(--muted-foreground))] shadow-none",
+                "hover:-translate-y-0.5 hover:border-[hsl(var(--input))]/80 hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))]",
+                "active:translate-y-0 active:scale-[0.96]"
+              )
+            }
+          )
+        },
+        action.id
+      );
+    }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
+    BaseButton,
+    {
+      appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+      tone: "muted",
+      icon: action.icon,
+      label: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: action.label }),
+      onClick: action.onClick,
+      title: getNavigationActionTitle(action),
+      className: cn3(
+        "h-9 w-full justify-start gap-2.5 rounded-lg border-transparent px-3 text-left text-[13px] text-[hsl(var(--muted-foreground))] shadow-none",
+        "hover:-translate-y-0.5 hover:border-[hsl(var(--input))]/80 hover:bg-[hsl(var(--muted))]/70 hover:text-[hsl(var(--foreground))]",
+        "active:translate-y-0 active:scale-[0.985]"
+      )
+    },
+    action.id
+  )) });
+}
+function SidebarNavigationList({
+  activeItemId,
+  items,
+  onNavigate,
+  revealRequest
+}) {
+  const navRef = React.useRef(null);
+  const [expandedByRoot, setExpandedByRoot] = React.useState({});
+  const toggleRoot = (id) => {
+    setExpandedByRoot((current) => ({
+      ...current,
+      [id]: !current[id]
+    }));
+  };
+  React.useEffect(() => {
+    if (!revealRequest) return;
+    setExpandedByRoot((current) => ({
+      ...current,
+      [revealRequest.id]: true
+    }));
+    const frameId = window.requestAnimationFrame(() => {
+      const targetElement = navRef.current?.querySelector(
+        `[data-navigation-sidebar-root-id="${CSS.escape(revealRequest.id)}"]`
+      );
+      if (targetElement instanceof HTMLElement) {
+        targetElement.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });
+      }
+    });
+    return () => window.cancelAnimationFrame(frameId);
+  }, [revealRequest]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex-1 overflow-y-auto", style: { scrollbarWidth: "none", msOverflowStyle: "none" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `.monkeys-navigation-sidebar-nav::-webkit-scrollbar { display: none; }` }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        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 = Boolean(expandedByRoot[item.id]);
+          const isActive = activeItemId === item.id;
+          if (isGroup) {
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-navigation-sidebar-root-id": item.id, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NavButton,
+                {
+                  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,
+                  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, icon: item.icon, onClick: () => onNavigate?.(item.id), children: item.label }) }, item.id);
+        })
+      }
+    )
+  ] });
+}
+function SidebarBrand({
+  collapsed,
+  logo,
+  title
+}) {
+  if (!logo) return null;
+  const brandTitle = title ?? logo.title;
+  const logoMark = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn3(
+        "flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg",
+        logo.url ? "bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+      ),
+      children: logo.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo.url, alt: logo.title, className: "h-full w-full object-contain" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold", children: logo.title.charAt(0) })
+    }
+  );
+  if (collapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseTooltip,
+      {
+        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+        content: brandTitle,
+        placement: "right",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          BaseButton,
+          {
+            appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+            ariaLabel: typeof brandTitle === "string" ? brandTitle : logo.title,
+            className: "h-10 w-10 rounded-lg border-transparent bg-transparent p-0 shadow-none hover:bg-[hsl(var(--muted))]/60",
+            icon: logoMark,
+            iconOnly: true,
+            onClick: logo.onClick,
+            title: typeof brandTitle === "string" ? brandTitle : logo.title,
+            tone: "muted"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseButton,
+    {
+      appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+      ariaLabel: logo.title,
+      className: "h-auto w-full justify-start gap-3 border-transparent bg-transparent p-0 text-left shadow-none hover:bg-transparent",
+      classNames: { icon: "h-9 w-9" },
+      icon: logoMark,
+      label: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-sm font-semibold text-[hsl(var(--foreground))]", children: brandTitle }),
+      onClick: logo.onClick,
+      title: typeof brandTitle === "string" ? brandTitle : logo.title,
+      tone: "muted"
+    }
+  );
+}
+function Sidebar({
+  accountMenu,
+  activeItemId,
+  actions = [],
+  collapsed,
+  collapsedAccountMenu,
+  footer,
+  header,
+  items,
+  logo,
+  onCollapsedChange,
+  onNavigate,
+  onRevealRoot,
+  revealRequest,
+  title
+}) {
+  if (collapsed) {
+    const activeRootId = findNavigationRootId(items, activeItemId);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 w-full flex-col rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] p-2 shadow-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 flex shrink-0 justify-center", children: header ?? /* @__PURE__ */ jsxRuntime.jsx(SidebarBrand, { collapsed: true, logo, title }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "flex min-h-0 flex-1 flex-col items-center gap-2 overflow-y-auto pb-3",
+          style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+          children: items.map((item) => {
+            const isActive = activeRootId === item.id;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              BaseTooltip,
+              {
+                appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+                content: item.label,
+                placement: "right",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  BaseButton,
+                  {
+                    appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+                    tone: "muted",
+                    active: isActive,
+                    iconOnly: true,
+                    icon: item.icon,
+                    onClick: () => {
+                      onRevealRoot?.(item.id);
+                      onCollapsedChange?.(false);
+                      if (item.children?.length) return;
+                      onNavigate?.(item.id);
+                    },
+                    title: typeof item.label === "string" ? item.label : void 0,
+                    ariaLabel: typeof item.label === "string" ? item.label : item.id,
+                    className: cn3(
+                      "h-10 w-10 rounded-lg border text-[hsl(var(--muted-foreground))] shadow-none",
+                      "hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.96]",
+                      isActive ? "border-[hsl(var(--input))] bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] shadow-sm" : "border-transparent hover:border-[hsl(var(--input))]/80 hover:bg-[hsl(var(--muted))]/70 hover:text-[hsl(var(--foreground))]"
+                    )
+                  }
+                )
+              },
+              item.id
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "-mx-2 mt-2 border-t border-[hsl(var(--input))] bg-[hsl(var(--background))] px-2 pt-2.5 pb-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(NavigationLayoutActionButtons, { actions, compact: true }),
+        collapsedAccountMenu ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex justify-center border-t border-[hsl(var(--input))] pt-2", children: collapsedAccountMenu }) : null
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 w-full flex-col justify-between gap-0 overflow-y-hidden rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] px-5 pt-5 pb-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 shrink-0", children: header ?? /* @__PURE__ */ jsxRuntime.jsx(SidebarBrand, { logo, title }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SidebarNavigationList,
+      {
+        activeItemId,
+        items,
+        onNavigate,
+        revealRequest
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "-mx-5 mt-2 border-t border-[hsl(var(--input))] bg-[hsl(var(--background))] px-4 pt-2.5 pb-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(NavigationLayoutActionButtons, { actions, compact: false }),
+      footer,
+      accountMenu ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 border-t border-[hsl(var(--input))] pt-2", children: accountMenu }) : null
+    ] })
+  ] });
+}
+function HeadbarChevronIcon({ open }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: cn3("h-4 w-4 shrink-0 transition-transform duration-200", open && "rotate-180"),
+      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" })
+    }
+  );
+}
+function HeadbarNavMenuItem({
+  activeItemId,
+  isActive,
+  item,
+  label,
+  menuButtonRadiusClass,
+  menuContentRadiusClass,
+  menuItemRadiusClass,
+  onNavigate
+}) {
+  const [open, setOpen] = React.useState(false);
+  const closeTimerRef = React.useRef(null);
+  const clearCloseTimer = () => {
+    if (!closeTimerRef.current) return;
+    clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = null;
+  };
+  const openMenu = () => {
+    clearCloseTimer();
+    setOpen(true);
+  };
+  const scheduleCloseMenu = () => {
+    clearCloseTimer();
+    closeTimerRef.current = setTimeout(() => {
+      setOpen(false);
+      closeTimerRef.current = null;
+    }, 120);
+  };
+  React.useEffect(() => clearCloseTimer, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Root, { modal: false, open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      BaseButton,
+      {
+        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+        tone: "muted",
+        active: isActive || open,
+        icon: item.icon,
+        endIcon: /* @__PURE__ */ jsxRuntime.jsx(HeadbarChevronIcon, { open }),
+        label: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate whitespace-nowrap", children: label }),
+        onClick: () => setOpen(true),
+        onMouseEnter: openMenu,
+        onMouseLeave: scheduleCloseMenu,
+        className: cn3(
+          "h-9 max-w-[12rem] border-transparent !bg-transparent px-3 text-sm font-medium shadow-none",
+          menuButtonRadiusClass,
+          isActive || open ? "!bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]" : "text-[hsl(var(--muted-foreground))] hover:!bg-[hsl(var(--muted))]/60 hover:text-[hsl(var(--foreground))]"
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenu5__namespace.Content,
+      {
+        align: "start",
+        sideOffset: 5,
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        onMouseEnter: openMenu,
+        onMouseLeave: scheduleCloseMenu,
+        className: cn3(
+          "z-50 min-w-56 border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1.5 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
+          menuContentRadiusClass
+        ),
+        children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsxs(
+          DropdownMenu5__namespace.Item,
+          {
+            className: cn3(
+              "relative flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))]",
+              menuItemRadiusClass,
+              child.id === activeItemId && "bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]"
+            ),
+            onSelect: () => {
+              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.id
+        ))
+      }
+    ) })
+  ] });
+}
+function HeadbarNav({
+  activeItemId,
+  activeRootId,
+  items,
+  menuRadius,
+  onNavigate
+}) {
+  const menuButtonRadiusClass = getHeadbarMenuRadiusClass(menuRadius);
+  const menuContentRadiusClass = getHeadbarMenuRadiusClass(menuRadius);
+  const menuItemRadiusClass = getHeadbarMenuRadiusClass(menuRadius);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-1", children: items.map((item) => {
+    const isActive = activeRootId === item.id || activeItemId === item.id;
+    const label = item.headbarLabel ?? item.label;
+    if (item.children?.length) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        HeadbarNavMenuItem,
+        {
+          activeItemId,
+          isActive,
+          item,
+          label,
+          menuButtonRadiusClass,
+          menuContentRadiusClass,
+          menuItemRadiusClass,
+          onNavigate
+        },
+        item.id
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseButton,
+      {
+        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+        tone: "muted",
+        active: isActive,
+        icon: item.icon,
+        label: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate whitespace-nowrap", children: label }),
+        onClick: () => onNavigate?.(item.id),
+        className: cn3(
+          "h-9 max-w-[12rem] border-transparent !bg-transparent px-3 text-sm font-medium shadow-none",
+          menuButtonRadiusClass,
+          isActive ? "!bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]" : "text-[hsl(var(--muted-foreground))] hover:!bg-[hsl(var(--muted))]/60 hover:text-[hsl(var(--foreground))]"
+        )
+      },
+      item.id
+    );
+  }) });
+}
+function Headbar({
+  activeItemId,
+  activeRootId,
+  actions,
+  accountMenu,
+  extra,
+  layout,
+  logo,
+  navItems,
+  onNavigate
+}) {
+  const heightPx = clampHeadbarHeight(layout?.heightPx);
+  const layoutMode = layout?.layoutMode ?? "boxed";
+  const menuRadius = layout?.menuRadius ?? "default";
+  const logoHeightPx = getHeadbarLogoSizePx(heightPx);
+  const frameStyle = getHeadbarFrameStyle(layoutMode, heightPx);
+  const showBrandTitle = Boolean(layout?.brandTitle);
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: getHeadbarFrameClass(layoutMode), style: frameStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center justify-start", children: logo ? /* @__PURE__ */ jsxRuntime.jsx(
+      BaseButton,
+      {
+        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+        tone: "muted",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn3(
+              "flex items-center justify-center overflow-hidden rounded-lg",
+              logo.url ? "w-auto max-w-[min(22rem,30vw)] bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+            ),
+            style: logo.url ? { height: logoHeightPx } : { width: logoHeightPx, height: logoHeightPx },
+            children: logo.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo.url, alt: logo.title, className: "block h-full w-auto object-contain" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold", children: logo.title.charAt(0) })
+          }
+        ),
+        label: showBrandTitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate whitespace-nowrap text-base font-medium text-[hsl(var(--foreground))]", children: layout?.brandTitle }) : null,
+        ariaLabel: logo.title,
+        title: logo.title,
+        className: "h-auto min-w-0 justify-start border-transparent bg-transparent p-0 shadow-none hover:bg-transparent",
+        classNames: logo.url ? { icon: "!h-auto !w-auto shrink-0" } : void 0,
+        onClick: logo.onClick
+      }
+    ) : null }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn3("flex min-w-0 items-center", getHeadbarNavClass(layout?.navPosition)), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "no-scrollbar flex max-w-full min-w-0 items-center overflow-x-auto overscroll-x-contain", children: /* @__PURE__ */ jsxRuntime.jsx(
+      HeadbarNav,
+      {
+        activeItemId,
+        activeRootId,
+        items: navItems,
+        menuRadius,
+        onNavigate
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center justify-end gap-3", children: [
+      actions,
+      extra,
+      accountMenu
+    ] })
+  ] });
+}
+function NavigationLayout({
+  activeItemId,
+  activeRootId,
+  allowModeSwitch = false,
+  accountMenu,
+  children,
+  className,
+  collapsedSidebarAccountMenu,
+  collapsedSidebarWidth = NAVIGATION_LAYOUT_SIDEBAR_COLLAPSED_WIDTH,
+  defaultMode = "headbar",
+  defaultSidebarCollapsed = false,
+  expandedSidebarWidth = NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH,
+  expandSidebarLabel = "Expand sidebar",
+  flush = false,
+  headbarActions,
+  headbarLayout,
+  logo,
+  mode,
+  navItems,
+  onModeChange,
+  onNavigate,
+  onSidebarCollapsedChange,
+  renderHeadbarExtra,
+  collapseSidebarLabel = "Collapse sidebar",
+  sidebarCollapsed: controlledSidebarCollapsed,
+  sidebarAccountMenu,
+  sidebarFooter,
+  sidebarHeader,
+  switchToHeadbarLabel = "Switch to headbar",
+  switchToSidebarLabel = "Switch to sidebar"
+}) {
+  const [uncontrolledMode, setUncontrolledMode] = React.useState(defaultMode);
+  const [uncontrolledSidebarCollapsed, setUncontrolledSidebarCollapsed] = React.useState(defaultSidebarCollapsed);
+  const [revealRequest, setRevealRequest] = React.useState(null);
+  const isModeControlled = mode !== void 0;
+  const isSidebarCollapsedControlled = controlledSidebarCollapsed !== void 0;
+  const navigationMode = isModeControlled ? mode : uncontrolledMode;
+  const sidebarCollapsed = isSidebarCollapsedControlled ? controlledSidebarCollapsed : uncontrolledSidebarCollapsed;
+  const isHeadbarMode = navigationMode === "headbar";
+  const sidebarWidth = sidebarCollapsed ? collapsedSidebarWidth : expandedSidebarWidth;
+  React.useEffect(() => {
+    if (!isModeControlled) {
+      setUncontrolledMode(defaultMode);
+    }
+  }, [defaultMode, isModeControlled]);
+  React.useEffect(() => {
+    if (!isSidebarCollapsedControlled) {
+      setUncontrolledSidebarCollapsed(defaultSidebarCollapsed);
+    }
+  }, [defaultSidebarCollapsed, isSidebarCollapsedControlled]);
+  const setNavigationMode = (nextMode) => {
+    if (!isModeControlled) {
+      setUncontrolledMode(nextMode);
+    }
+    onModeChange?.(nextMode);
+  };
+  const setCollapsed = (collapsed) => {
+    if (!isSidebarCollapsedControlled) {
+      setUncontrolledSidebarCollapsed(collapsed);
+    }
+    onSidebarCollapsedChange?.(collapsed);
+  };
+  const navigationActions = [];
+  if (allowModeSwitch) {
+    navigationActions.push({
+      id: "toggle-headbar",
+      label: switchToHeadbarLabel,
+      onClick: () => setNavigationMode("headbar"),
+      icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-[18px] w-[18px] rotate-180", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 9h18" })
+      ] })
+    });
+  }
+  navigationActions.push({
+    id: "toggle-sidebar",
+    label: sidebarCollapsed ? expandSidebarLabel : collapseSidebarLabel,
+    onClick: () => setCollapsed(!sidebarCollapsed),
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-[18px] w-[18px]", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3v18" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: sidebarCollapsed ? "m14 9 3 3-3 3" : "m16 15-3-3 3-3" })
+    ] })
+  });
+  const sidebar = isHeadbarMode ? null : /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "relative h-full min-h-0 shrink-0 overflow-hidden transition-[width] duration-260",
+      style: { width: sidebarWidth, transitionTimingFunction: NAVIGATION_LAYOUT_TRANSITION_TIMING },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Sidebar,
+        {
+          accountMenu: sidebarAccountMenu ?? accountMenu,
+          activeItemId,
+          actions: navigationActions,
+          collapsed: sidebarCollapsed,
+          collapsedAccountMenu: collapsedSidebarAccountMenu ?? accountMenu,
+          footer: sidebarFooter,
+          header: sidebarHeader,
+          items: navItems,
+          logo,
+          onCollapsedChange: setCollapsed,
+          onNavigate,
+          onRevealRoot: (rootId) => setRevealRequest((prev) => ({ id: rootId, nonce: (prev?.nonce ?? 0) + 1 })),
+          revealRequest,
+          title: headbarLayout?.brandTitle
+        }
+      )
+    }
+  );
+  const header = isHeadbarMode ? /* @__PURE__ */ jsxRuntime.jsx(
+    Headbar,
+    {
+      activeItemId,
+      activeRootId: activeRootId ?? findNavigationRootId(navItems, activeItemId),
+      actions: allowModeSwitch ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        headbarActions,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BaseButton,
+          {
+            appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+            tone: "muted",
+            icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3v18" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m14 9 3 3-3 3" })
+            ] }),
+            label: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate whitespace-nowrap", children: switchToSidebarLabel }),
+            onClick: () => setNavigationMode("sidebar"),
+            className: cn3(
+              "h-auto min-w-0 shrink px-3 py-2 text-sm font-medium text-[hsl(var(--muted-foreground))] shadow-none hover:border-[hsl(var(--input))]/70 hover:bg-[hsl(var(--muted))]/60 hover:text-[hsl(var(--foreground))]",
+              getHeadbarMenuRadiusClass(headbarLayout?.menuRadius)
+            )
+          }
+        )
+      ] }) : headbarActions,
+      accountMenu,
+      extra: renderHeadbarExtra,
+      layout: headbarLayout,
+      logo,
+      navItems,
+      onNavigate
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(AppLayout, { header, sidebar, flush, className, children });
+}
 function ClampIcon({ expanded }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", className: "h-4 w-4", fill: "none", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -25053,7 +26035,7 @@ function DarkModeSelector({
     { value: "light", label: resolvedLabels.light, Icon: SunIcon },
     { value: "dark", label: resolvedLabels.dark, Icon: MoonIcon }
   ];
-  const trigger = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const trigger = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       className: cn5(
@@ -25066,7 +26048,7 @@ function DarkModeSelector({
       ]
     }
   ) });
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu3__namespace.Root, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Root, { children: [
     tooltip ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip__namespace.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip__namespace.Root, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Tooltip__namespace.Trigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ jsxRuntime.jsx(Tooltip__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -25081,14 +26063,14 @@ function DarkModeSelector({
         }
       ) })
     ] }) }) : trigger,
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      DropdownMenu3__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenu5__namespace.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 }) => /* @__PURE__ */ jsxRuntime.jsxs(
-          DropdownMenu3__namespace.Item,
+          DropdownMenu5__namespace.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))]",
@@ -25136,19 +26118,19 @@ function DarkModeSubMenu({
     { value: "light", label: resolvedLabels.light, Icon: SunIcon },
     { value: "dark", label: resolvedLabels.dark, Icon: MoonIcon }
   ];
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu3__namespace.Sub, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu3__namespace.SubTrigger, { 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))]", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Sub, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.SubTrigger, { 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))]", children: [
       /* @__PURE__ */ jsxRuntime.jsx(SunMoonIcon, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-[hsl(var(--muted-foreground))]", children: currentLabel })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      DropdownMenu3__namespace.SubContent,
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenu5__namespace.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 }) => /* @__PURE__ */ jsxRuntime.jsxs(
-          DropdownMenu3__namespace.CheckboxItem,
+          DropdownMenu5__namespace.CheckboxItem,
           {
             checked: mode === value,
             disabled: mode === value,
@@ -25157,7 +26139,7 @@ function DarkModeSubMenu({
             ),
             onCheckedChange: () => onModeChange(value),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.ItemIndicator, { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.ItemIndicator, { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
               /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }),
               optLabel
             ]
@@ -25185,7 +26167,7 @@ function I18nSelector({
   tooltip,
   className
 }) {
-  const trigger = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const trigger = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       className: cn6(
@@ -25198,7 +26180,7 @@ function I18nSelector({
       ]
     }
   ) });
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu3__namespace.Root, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu5__namespace.Root, { children: [
     tooltip ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip__namespace.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip__namespace.Root, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Tooltip__namespace.Trigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ jsxRuntime.jsx(Tooltip__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -25213,14 +26195,14 @@ function I18nSelector({
         }
       ) })
     ] }) }) : trigger,
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu3__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      DropdownMenu3__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu5__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenu5__namespace.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__ */ jsxRuntime.jsx(
-          DropdownMenu3__namespace.Item,
+          DropdownMenu5__namespace.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))]",
@@ -25406,8 +26388,10 @@ exports.LoginPage = LoginPage;
 exports.MonkeysToastProvider = MonkeysToastProvider;
 exports.MonkeysToaster = MonkeysToaster;
 exports.NavButton = NavButton;
+exports.NavigationLayout = NavigationLayout;
 exports.ToastProvider = MonkeysToastProvider;
 exports.Toaster = MonkeysToaster;
+exports.UserAccountMenu = UserAccountMenu;
 exports.WorkbenchContentPane = WorkbenchContentPane;
 exports.WorkbenchContentToolbar = WorkbenchContentToolbar;
 exports.WorkbenchDetailSidebar = WorkbenchDetailSidebar;