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

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useContext, useLayoutEffect, Children, isValidElement, useCallback, Fragment as Fragment$1 } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as ContextMenu from '@radix-ui/react-context-menu';
-import * as DropdownMenu3 from '@radix-ui/react-dropdown-menu';
+import * as DropdownMenu5 from '@radix-ui/react-dropdown-menu';
 import { useSensors, useSensor, PointerSensor, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
 import '@dnd-kit/sortable';
 import '@dnd-kit/utilities';
@@ -1251,7 +1251,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);
         }
@@ -2051,7 +2051,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) {
@@ -3102,7 +3102,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);
@@ -3894,7 +3894,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) {
@@ -3910,7 +3910,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;
@@ -3922,7 +3922,7 @@ var require_lodash = __commonJS({
           }
           function cancel() {
             if (timerId !== undefined2) {
-              clearTimeout(timerId);
+              clearTimeout2(timerId);
             }
             lastInvokeTime = 0;
             lastArgs = lastCallTime = lastThis = timerId = undefined2;
@@ -3940,13 +3940,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;
           }
@@ -14769,8 +14769,8 @@ function DataExplorerSelect({
     /* @__PURE__ */ jsx("span", { children: label }),
     /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: selected?.label ?? placeholder })
   ] }) : selected?.label ?? label ?? placeholder;
-  return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(DropdownMenu5.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -14798,8 +14798,8 @@ function DataExplorerSelect({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu3.Content,
+    /* @__PURE__ */ jsx(DropdownMenu5.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu5.Content,
       {
         align,
         sideOffset,
@@ -14807,7 +14807,7 @@ function DataExplorerSelect({
         style: theme.styles.menuContent,
         onClick: (event) => event.stopPropagation(),
         children: /* @__PURE__ */ jsx(
-          DropdownMenu3.RadioGroup,
+          DropdownMenu5.RadioGroup,
           {
             value,
             onValueChange: (nextValue) => {
@@ -14815,7 +14815,7 @@ function DataExplorerSelect({
               void onValueChange?.(nextValue);
             },
             children: options.map((option) => /* @__PURE__ */ jsxs(
-              DropdownMenu3.RadioItem,
+              DropdownMenu5.RadioItem,
               {
                 value: option.value,
                 title: option.title,
@@ -14861,9 +14861,9 @@ function renderMenuItem(action, context, theme, className) {
   const disabled = (resolveDataExplorerValue(action.disabled, context) ?? false) || (resolveDataExplorerValue(action.loading, context) ?? false);
   const active = resolveDataExplorerValue(action.active, context) ?? false;
   return /* @__PURE__ */ jsxs("div", { children: [
-    action.separatorBefore ? /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator }) : null,
+    action.separatorBefore ? /* @__PURE__ */ jsx(DropdownMenu5.Separator, { className: theme.slots.menuSeparator }) : null,
     /* @__PURE__ */ jsxs(
-      DropdownMenu3.Item,
+      DropdownMenu5.Item,
       {
         title: action.title,
         disabled,
@@ -14884,7 +14884,7 @@ function renderMenuItem(action, context, theme, className) {
         ]
       }
     ),
-    action.separatorAfter ? /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator }) : null
+    action.separatorAfter ? /* @__PURE__ */ jsx(DropdownMenu5.Separator, { className: theme.slots.menuSeparator }) : null
   ] }, action.id);
 }
 function renderMenuAction(action, context, theme, classNames, appearance) {
@@ -14893,8 +14893,8 @@ function renderMenuAction(action, context, theme, classNames, appearance) {
   const visibleItems = (action.items ?? []).filter(
     (item) => resolveDataExplorerValue(item.visible, context) ?? true
   );
-  return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
-    /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(DropdownMenu5.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
       DataExplorerButton,
       {
         title: action.title,
@@ -14910,8 +14910,8 @@ function renderMenuAction(action, context, theme, classNames, appearance) {
         className: classNames?.action
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsxs(
-      DropdownMenu3.Content,
+    /* @__PURE__ */ jsx(DropdownMenu5.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu5.Content,
       {
         align: action.align ?? "end",
         sideOffset: action.sideOffset ?? 6,
@@ -14920,8 +14920,8 @@ function renderMenuAction(action, context, theme, classNames, appearance) {
         onClick: (event) => event.stopPropagation(),
         children: [
           action.menuLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(DropdownMenu3.Label, { className: theme.slots.menuLabel, children: action.menuLabel }),
-            /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator })
+            /* @__PURE__ */ jsx(DropdownMenu5.Label, { className: theme.slots.menuLabel, children: action.menuLabel }),
+            /* @__PURE__ */ jsx(DropdownMenu5.Separator, { className: theme.slots.menuSeparator })
           ] }) : null,
           visibleItems.map(
             (item) => renderMenuItem(item, context, theme, classNames?.menuItem)
@@ -15744,8 +15744,8 @@ function DataExplorerDisplayActionMenu({
   if (visibleActions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("span", { className: cn2("inline-flex", classNames?.root), children: /* @__PURE__ */ jsxs(DropdownMenu3.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("span", { className: cn2("inline-flex", classNames?.root), children: /* @__PURE__ */ jsxs(DropdownMenu5.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenu5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -15762,8 +15762,8 @@ function DataExplorerDisplayActionMenu({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsxs(
-      DropdownMenu3.Content,
+    /* @__PURE__ */ jsx(DropdownMenu5.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu5.Content,
       {
         align,
         sideOffset,
@@ -15776,7 +15776,7 @@ function DataExplorerDisplayActionMenu({
         children: [
           label ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
-              DropdownMenu3.Label,
+              DropdownMenu5.Label,
               {
                 className: cn2(
                   theme.slots.menuLabel,
@@ -15786,7 +15786,7 @@ function DataExplorerDisplayActionMenu({
               }
             ),
             /* @__PURE__ */ jsx(
-              DropdownMenu3.Separator,
+              DropdownMenu5.Separator,
               {
                 className: cn2(
                   theme.slots.menuSeparator,
@@ -15800,7 +15800,7 @@ function DataExplorerDisplayActionMenu({
             if (action.render) {
               return /* @__PURE__ */ jsxs("div", { children: [
                 action.separatorBefore ? /* @__PURE__ */ jsx(
-                  DropdownMenu3.Separator,
+                  DropdownMenu5.Separator,
                   {
                     className: cn2(
                       theme.slots.menuSeparator,
@@ -15810,7 +15810,7 @@ function DataExplorerDisplayActionMenu({
                 ) : null,
                 action.render(context),
                 action.separatorAfter ? /* @__PURE__ */ jsx(
-                  DropdownMenu3.Separator,
+                  DropdownMenu5.Separator,
                   {
                     className: cn2(
                       theme.slots.menuSeparator,
@@ -15822,7 +15822,7 @@ function DataExplorerDisplayActionMenu({
             }
             return /* @__PURE__ */ jsxs("div", { children: [
               action.separatorBefore ? /* @__PURE__ */ jsx(
-                DropdownMenu3.Separator,
+                DropdownMenu5.Separator,
                 {
                   className: cn2(
                     "-mx-1 my-1 h-px bg-border",
@@ -15831,7 +15831,7 @@ function DataExplorerDisplayActionMenu({
                 }
               ) : null,
               /* @__PURE__ */ jsxs(
-                DropdownMenu3.Item,
+                DropdownMenu5.Item,
                 {
                   title: action.title,
                   disabled,
@@ -15882,7 +15882,7 @@ function DataExplorerDisplayActionMenu({
                 }
               ),
               action.separatorAfter ? /* @__PURE__ */ jsx(
-                DropdownMenu3.Separator,
+                DropdownMenu5.Separator,
                 {
                   className: cn2(
                     theme.slots.menuSeparator,
@@ -17956,8 +17956,8 @@ function DataExplorerViewTree({
       return resolveDataExplorerValue(action.visible, payload) ?? true;
     });
     if (visibleActions.length === 0) return null;
-    return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
-      /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(DropdownMenu5.Root, { children: [
+      /* @__PURE__ */ jsx(DropdownMenu5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -17972,8 +17972,8 @@ function DataExplorerViewTree({
           children: /* @__PURE__ */ jsx(MoreIcon2, {})
         }
       ) }),
-      /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
-        DropdownMenu3.Content,
+      /* @__PURE__ */ jsx(DropdownMenu5.Portal, { children: /* @__PURE__ */ jsx(
+        DropdownMenu5.Content,
         {
           align: "end",
           sideOffset: 6,
@@ -17988,9 +17988,9 @@ function DataExplorerViewTree({
               return /* @__PURE__ */ jsx("div", { children: action.render(payload) }, action.id);
             }
             return /* @__PURE__ */ jsxs("div", { children: [
-              action.separatorBefore ? /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator }) : null,
+              action.separatorBefore ? /* @__PURE__ */ jsx(DropdownMenu5.Separator, { className: theme.slots.menuSeparator }) : null,
               /* @__PURE__ */ jsxs(
-                DropdownMenu3.Item,
+                DropdownMenu5.Item,
                 {
                   title: action.title,
                   disabled,
@@ -18012,7 +18012,7 @@ function DataExplorerViewTree({
                   ]
                 }
               ),
-              action.separatorAfter ? /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: theme.slots.menuSeparator }) : null
+              action.separatorAfter ? /* @__PURE__ */ jsx(DropdownMenu5.Separator, { className: theme.slots.menuSeparator }) : null
             ] }, action.id);
           })
         }
@@ -20796,6 +20796,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__ */ 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__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function MoreIcon3() {
+  return /* @__PURE__ */ 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__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ 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__ */ 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__ */ jsxs(DropdownMenu5.Sub, { children: [
+    /* @__PURE__ */ jsxs(
+      DropdownMenu5.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__ */ jsx("span", { className: "min-w-0 truncate", children: selector.label }),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto min-w-0 max-w-[7rem] truncate text-xs text-[hsl(var(--muted-foreground))]", children: currentLabel })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownMenu5.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu5.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__ */ jsx(DropdownMenu5.RadioGroup, { value: selector.value, onValueChange: selector.onChange, children: selector.options.map((option) => /* @__PURE__ */ jsxs(
+          DropdownMenu5.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__ */ jsx(DropdownMenu5.ItemIndicator, { className: "absolute left-2 inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(CheckIcon4, {}) }),
+              renderIcon(option.icon, classNames?.itemIcon),
+              /* @__PURE__ */ 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__ */ 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__ */ jsxs(DropdownMenu5.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu5.Trigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(MoreIcon3, {}) : void 0,
+        icon: avatar,
+        iconOnly: !isProfileTrigger,
+        label: isProfileTrigger ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col items-start", children: [
+          /* @__PURE__ */ jsx("span", { className: "max-w-full truncate text-sm font-medium leading-none text-[hsl(var(--foreground))]", children: displayName }),
+          user.secondaryText ? /* @__PURE__ */ 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__ */ jsx(DropdownMenu5.Portal, { children: /* @__PURE__ */ jsxs(
+      DropdownMenu5.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__ */ jsx(DropdownMenu5.Label, { className: cn("px-2 py-1.5 font-normal", classNames?.label), children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            avatar,
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+              /* @__PURE__ */ jsx("span", { className: cn("truncate text-sm font-medium leading-none", classNames?.userName), children: displayName }),
+              user.secondaryText ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "truncate pt-1 text-xs leading-none text-[hsl(var(--muted-foreground))]",
+                    classNames?.secondaryText
+                  ),
+                  children: user.secondaryText
+                }
+              ) : null
+            ] })
+          ] }) }),
+          hasMenuBody ? /* @__PURE__ */ jsx(
+            DropdownMenu5.Separator,
+            {
+              className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
+            }
+          ) : null,
+          visibleSelectors.map((selector, index) => /* @__PURE__ */ jsx(
+            UserAccountMenuSelector,
+            {
+              classNames,
+              menuRadius,
+              selector
+            },
+            selector.id ?? `selector-${index}`
+          )),
+          visibleSelectors.length > 0 && visibleItems.length > 0 ? /* @__PURE__ */ jsx(
+            DropdownMenu5.Separator,
+            {
+              className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
+            }
+          ) : null,
+          visibleItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+            item.separatorBefore ? /* @__PURE__ */ jsx(
+              DropdownMenu5.Separator,
+              {
+                className: cn("my-1 h-px bg-[hsl(var(--border))]", classNames?.separator)
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs(
+              DropdownMenu5.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__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+                  item.shortcut ? /* @__PURE__ */ 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(" ");
 }
@@ -20876,27 +21147,27 @@ function AppHeader({
         (!tabs || tabs.length === 0) && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [
           extra,
-          user && /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
-            /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "flex h-8 w-8 items-center justify-center rounded-full hover:ring-2 hover:ring-[hsl(var(--ring))]/20 transition-all overflow-hidden focus-visible:outline-none", children: user.photo ? /* @__PURE__ */ jsx("img", { src: user.photo, alt: user.name, className: "h-8 w-8 rounded-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-xs font-medium", children: user.name ? getUserInitials(user.name) : "U" }) }) }),
-            /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsxs(
-              DropdownMenu3.Content,
+          user && /* @__PURE__ */ jsxs(DropdownMenu5.Root, { children: [
+            /* @__PURE__ */ jsx(DropdownMenu5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "flex h-8 w-8 items-center justify-center rounded-full hover:ring-2 hover:ring-[hsl(var(--ring))]/20 transition-all overflow-hidden focus-visible:outline-none", children: user.photo ? /* @__PURE__ */ jsx("img", { src: user.photo, alt: user.name, className: "h-8 w-8 rounded-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-xs font-medium", children: user.name ? getUserInitials(user.name) : "U" }) }) }),
+            /* @__PURE__ */ jsx(DropdownMenu5.Portal, { children: /* @__PURE__ */ jsxs(
+              DropdownMenu5.Content,
               {
                 className: "z-50 w-52 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
                 sideOffset: 5,
                 align: "end",
                 children: [
-                  /* @__PURE__ */ jsxs(DropdownMenu3.Label, { className: "flex items-center gap-2 px-2 py-1.5 font-normal", children: [
+                  /* @__PURE__ */ jsxs(DropdownMenu5.Label, { className: "flex items-center gap-2 px-2 py-1.5 font-normal", children: [
                     user.photo ? /* @__PURE__ */ jsx("img", { src: user.photo, alt: user.name, className: "h-8 w-8 rounded-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-xs font-medium", children: user.name ? getUserInitials(user.name) : "U" }),
                     /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
                       /* @__PURE__ */ jsx("span", { className: "text-sm font-medium leading-none", children: user.name }),
                       user.email && /* @__PURE__ */ jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))] leading-none mt-1", children: user.email })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx(DropdownMenu3.Separator, { className: "h-px bg-[hsl(var(--border))] my-1" }),
-                  /* @__PURE__ */ jsxs(DropdownMenu3.Group, { children: [
+                  /* @__PURE__ */ jsx(DropdownMenu5.Separator, { className: "h-px bg-[hsl(var(--border))] my-1" }),
+                  /* @__PURE__ */ jsxs(DropdownMenu5.Group, { children: [
                     userMenuItems,
                     /* @__PURE__ */ jsxs(
-                      DropdownMenu3.Item,
+                      DropdownMenu5.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?.(),
@@ -21072,9 +21343,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__ */ jsxs("div", { className: "flex flex-1 gap-[var(--global-spacing,0.75rem)] overflow-hidden min-h-0", children: [
-      sidebar,
+      sidebar ? sidebar : null,
       /* @__PURE__ */ 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"
@@ -21082,6 +21353,705 @@ 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__ */ jsx("div", { className: "flex flex-col items-center gap-2", children: actions.map((action) => {
+      const title = getNavigationActionTitle(action);
+      return /* @__PURE__ */ jsx(
+        BaseTooltip,
+        {
+          appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+          content: action.label,
+          placement: "right",
+          children: /* @__PURE__ */ 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__ */ jsx("div", { className: "flex flex-col gap-2", children: actions.map((action) => /* @__PURE__ */ jsx(
+    BaseButton,
+    {
+      appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+      tone: "muted",
+      icon: action.icon,
+      label: /* @__PURE__ */ 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 = useRef(null);
+  const [expandedByRoot, setExpandedByRoot] = useState({});
+  const toggleRoot = (id) => {
+    setExpandedByRoot((current) => ({
+      ...current,
+      [id]: !current[id]
+    }));
+  };
+  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__ */ jsxs("div", { className: "h-full flex-1 overflow-y-auto", style: { scrollbarWidth: "none", msOverflowStyle: "none" }, children: [
+    /* @__PURE__ */ jsx("style", { children: `.monkeys-navigation-sidebar-nav::-webkit-scrollbar { display: none; }` }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { "data-navigation-sidebar-root-id": item.id, children: [
+              /* @__PURE__ */ jsx(
+                NavButton,
+                {
+                  icon: item.icon,
+                  onClick: () => toggleRoot(item.id),
+                  postfix: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "shrink-0 text-[hsl(var(--foreground))] transition-transform duration-200",
+                      style: { transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" },
+                      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+                    }
+                  ) }),
+                  children: item.label
+                }
+              ),
+              isExpanded ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-col gap-1", children: item.children?.map((child) => /* @__PURE__ */ jsx(
+                NavButton,
+                {
+                  active: activeItemId === child.id,
+                  onClick: () => onNavigate?.(child.id),
+                  children: child.label
+                },
+                child.id
+              )) }) : null
+            ] }, item.id);
+          }
+          return /* @__PURE__ */ jsx("div", { "data-navigation-sidebar-root-id": item.id, children: /* @__PURE__ */ jsx(NavButton, { active: isActive, 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__ */ 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__ */ jsx("img", { src: logo.url, alt: logo.title, className: "h-full w-full object-contain" }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-bold", children: logo.title.charAt(0) })
+    }
+  );
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(
+      BaseTooltip,
+      {
+        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+        content: brandTitle,
+        placement: "right",
+        children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "mb-3 flex shrink-0 justify-center", children: header ?? /* @__PURE__ */ jsx(SidebarBrand, { collapsed: true, logo, title }) }),
+      /* @__PURE__ */ 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__ */ jsx(
+              BaseTooltip,
+              {
+                appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+                content: item.label,
+                placement: "right",
+                children: /* @__PURE__ */ 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__ */ 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__ */ jsx(NavigationLayoutActionButtons, { actions, compact: true }),
+        collapsedAccountMenu ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex justify-center border-t border-[hsl(var(--input))] pt-2", children: collapsedAccountMenu }) : null
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ 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__ */ jsx("div", { className: "mb-4 shrink-0", children: header ?? /* @__PURE__ */ jsx(SidebarBrand, { logo, title }) }),
+    /* @__PURE__ */ jsx(
+      SidebarNavigationList,
+      {
+        activeItemId,
+        items,
+        onNavigate,
+        revealRequest
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx(NavigationLayoutActionButtons, { actions, compact: false }),
+      footer,
+      accountMenu ? /* @__PURE__ */ jsx("div", { className: "mt-2 border-t border-[hsl(var(--input))] pt-2", children: accountMenu }) : null
+    ] })
+  ] });
+}
+function HeadbarChevronIcon({ open }) {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function HeadbarNavMenuItem({
+  activeItemId,
+  isActive,
+  item,
+  label,
+  menuButtonRadiusClass,
+  menuContentRadiusClass,
+  menuItemRadiusClass,
+  onNavigate
+}) {
+  const [open, setOpen] = useState(false);
+  const closeTimerRef = 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);
+  };
+  useEffect(() => clearCloseTimer, []);
+  return /* @__PURE__ */ jsxs(DropdownMenu5.Root, { modal: false, open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenu5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      BaseButton,
+      {
+        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+        tone: "muted",
+        active: isActive || open,
+        icon: item.icon,
+        endIcon: /* @__PURE__ */ jsx(HeadbarChevronIcon, { open }),
+        label: /* @__PURE__ */ 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__ */ jsx(DropdownMenu5.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu5.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__ */ jsxs(
+          DropdownMenu5.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__ */ jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-[hsl(var(--muted-foreground))]", children: child.icon }) : null,
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: child.headbarLabel ?? child.label })
+            ]
+          },
+          child.id
+        ))
+      }
+    ) })
+  ] });
+}
+function HeadbarNav({
+  activeItemId,
+  activeRootId,
+  items,
+  menuRadius,
+  onNavigate
+}) {
+  const menuButtonRadiusClass = getHeadbarMenuRadiusClass(menuRadius);
+  const menuContentRadiusClass = getHeadbarMenuRadiusClass(menuRadius);
+  const menuItemRadiusClass = getHeadbarMenuRadiusClass(menuRadius);
+  return /* @__PURE__ */ 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__ */ jsx(
+        HeadbarNavMenuItem,
+        {
+          activeItemId,
+          isActive,
+          item,
+          label,
+          menuButtonRadiusClass,
+          menuContentRadiusClass,
+          menuItemRadiusClass,
+          onNavigate
+        },
+        item.id
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      BaseButton,
+      {
+        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+        tone: "muted",
+        active: isActive,
+        icon: item.icon,
+        label: /* @__PURE__ */ 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__ */ jsxs("header", { className: getHeadbarFrameClass(layoutMode), style: frameStyle, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center justify-start", children: logo ? /* @__PURE__ */ jsx(
+      BaseButton,
+      {
+        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+        tone: "muted",
+        icon: /* @__PURE__ */ 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__ */ jsx("img", { src: logo.url, alt: logo.title, className: "block h-full w-auto object-contain" }) : /* @__PURE__ */ jsx("span", { className: "text-base font-bold", children: logo.title.charAt(0) })
+          }
+        ),
+        label: showBrandTitle ? /* @__PURE__ */ 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__ */ jsx("div", { className: cn3("flex min-w-0 items-center", getHeadbarNavClass(layout?.navPosition)), children: /* @__PURE__ */ jsx("div", { className: "no-scrollbar flex max-w-full min-w-0 items-center overflow-x-auto overscroll-x-contain", children: /* @__PURE__ */ jsx(
+      HeadbarNav,
+      {
+        activeItemId,
+        activeRootId,
+        items: navItems,
+        menuRadius,
+        onNavigate
+      }
+    ) }) }),
+    /* @__PURE__ */ 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,
+  flush = false,
+  headbarActions,
+  headbarLayout,
+  logo,
+  mode,
+  navItems,
+  onModeChange,
+  onNavigate,
+  onSidebarCollapsedChange,
+  renderHeadbarExtra,
+  sidebarAccountMenu,
+  sidebarFooter,
+  sidebarHeader,
+  switchToHeadbarLabel = "Switch to headbar",
+  switchToSidebarLabel = "Switch to sidebar"
+}) {
+  const [uncontrolledMode, setUncontrolledMode] = useState(defaultMode);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultSidebarCollapsed);
+  const [revealRequest, setRevealRequest] = useState(null);
+  const isModeControlled = mode !== void 0;
+  const navigationMode = isModeControlled ? mode : uncontrolledMode;
+  const isHeadbarMode = navigationMode === "headbar";
+  const sidebarWidth = sidebarCollapsed ? collapsedSidebarWidth : expandedSidebarWidth;
+  useEffect(() => {
+    if (!isModeControlled) {
+      setUncontrolledMode(defaultMode);
+    }
+  }, [defaultMode, isModeControlled]);
+  const setNavigationMode = (nextMode) => {
+    if (!isModeControlled) {
+      setUncontrolledMode(nextMode);
+    }
+    onModeChange?.(nextMode);
+  };
+  const setCollapsed = (collapsed) => {
+    setSidebarCollapsed(collapsed);
+    onSidebarCollapsedChange?.(collapsed);
+  };
+  const navigationActions = [];
+  if (allowModeSwitch) {
+    navigationActions.push({
+      id: "toggle-headbar",
+      label: switchToHeadbarLabel,
+      onClick: () => setNavigationMode("headbar"),
+      icon: /* @__PURE__ */ 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__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 9h18" })
+      ] })
+    });
+  }
+  navigationActions.push({
+    id: "toggle-sidebar",
+    label: sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar",
+    onClick: () => setCollapsed(!sidebarCollapsed),
+    icon: /* @__PURE__ */ 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__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+      /* @__PURE__ */ jsx("path", { d: sidebarCollapsed ? "m14 9 3 3-3 3" : "m16 15-3-3 3-3" })
+    ] })
+  });
+  const sidebar = isHeadbarMode ? null : /* @__PURE__ */ 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__ */ 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__ */ jsx(
+    Headbar,
+    {
+      activeItemId,
+      activeRootId: activeRootId ?? findNavigationRootId(navItems, activeItemId),
+      actions: allowModeSwitch ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        headbarActions,
+        /* @__PURE__ */ jsx(
+          BaseButton,
+          {
+            appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+            tone: "muted",
+            icon: /* @__PURE__ */ 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__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+              /* @__PURE__ */ jsx("path", { d: "m14 9 3 3-3 3" })
+            ] }),
+            label: /* @__PURE__ */ 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__ */ jsx(AppLayout, { header, sidebar, flush, className, children });
+}
 function ClampIcon({ expanded }) {
   return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", className: "h-4 w-4", fill: "none", children: [
     /* @__PURE__ */ jsx(
@@ -25026,7 +25996,7 @@ function DarkModeSelector({
     { value: "light", label: resolvedLabels.light, Icon: SunIcon },
     { value: "dark", label: resolvedLabels.dark, Icon: MoonIcon }
   ];
-  const trigger = /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  const trigger = /* @__PURE__ */ jsx(DropdownMenu5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
     "button",
     {
       className: cn5(
@@ -25039,7 +26009,7 @@ function DarkModeSelector({
       ]
     }
   ) });
-  return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
+  return /* @__PURE__ */ jsxs(DropdownMenu5.Root, { children: [
     tooltip ? /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
       /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsxs(
@@ -25054,14 +26024,14 @@ function DarkModeSelector({
         }
       ) })
     ] }) }) : trigger,
-    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu3.Content,
+    /* @__PURE__ */ jsx(DropdownMenu5.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu5.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__ */ jsxs(
-          DropdownMenu3.Item,
+          DropdownMenu5.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))]",
@@ -25109,19 +26079,19 @@ function DarkModeSubMenu({
     { value: "light", label: resolvedLabels.light, Icon: SunIcon },
     { value: "dark", label: resolvedLabels.dark, Icon: MoonIcon }
   ];
-  return /* @__PURE__ */ jsxs(DropdownMenu3.Sub, { children: [
-    /* @__PURE__ */ jsxs(DropdownMenu3.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__ */ jsxs(DropdownMenu5.Sub, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenu5.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__ */ jsx(SunMoonIcon, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsx("span", { children: label }),
       /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-[hsl(var(--muted-foreground))]", children: currentLabel })
     ] }),
-    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu3.SubContent,
+    /* @__PURE__ */ jsx(DropdownMenu5.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu5.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__ */ jsxs(
-          DropdownMenu3.CheckboxItem,
+          DropdownMenu5.CheckboxItem,
           {
             checked: mode === value,
             disabled: mode === value,
@@ -25130,7 +26100,7 @@ function DarkModeSubMenu({
             ),
             onCheckedChange: () => onModeChange(value),
             children: [
-              /* @__PURE__ */ jsx(DropdownMenu3.ItemIndicator, { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
+              /* @__PURE__ */ jsx(DropdownMenu5.ItemIndicator, { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
               /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
               optLabel
             ]
@@ -25158,7 +26128,7 @@ function I18nSelector({
   tooltip,
   className
 }) {
-  const trigger = /* @__PURE__ */ jsx(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  const trigger = /* @__PURE__ */ jsx(DropdownMenu5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
     "button",
     {
       className: cn6(
@@ -25171,7 +26141,7 @@ function I18nSelector({
       ]
     }
   ) });
-  return /* @__PURE__ */ jsxs(DropdownMenu3.Root, { children: [
+  return /* @__PURE__ */ jsxs(DropdownMenu5.Root, { children: [
     tooltip ? /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
       /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsxs(
@@ -25186,14 +26156,14 @@ function I18nSelector({
         }
       ) })
     ] }) }) : trigger,
-    /* @__PURE__ */ jsx(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx(
-      DropdownMenu3.Content,
+    /* @__PURE__ */ jsx(DropdownMenu5.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu5.Content,
       {
         className: "z-50 min-w-[8rem] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
         sideOffset: 5,
         align: "end",
         children: languages.map(({ code, label }) => /* @__PURE__ */ jsx(
-          DropdownMenu3.Item,
+          DropdownMenu5.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))]",
@@ -25270,6 +26240,6 @@ lodash/lodash.js:
    *)
 */
 
-export { ARTIST_CONFIG, ARTIST_DEFAULT_QUICK_ACTIONS, AppHeader, AppLayout, AppSidebar, ArtistLandingPage, BSD_CONFIG, BSD_DEFAULT_FEATURE_CARDS, BaseAccordion, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseInput, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLoadingState, BaseMultiSelect, BaseNotice, BasePagination, BasePanel, BaseProgress, BaseRadioGroup, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSwitch, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseTextarea, BaseToolbar, BaseTooltip, BsdLandingPage, BsdToolboxPanel, CONCEPT_CONFIG, CONCEPT_DEFAULT_QUICK_ACTIONS, ConceptDesignLandingPage, DarkModeSelector, DarkModeSubMenu, DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, DefaultLandingPage, DynamicComponent, I18nSelector, InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, LoginPage, MonkeysToastProvider, MonkeysToaster, NavButton, MonkeysToastProvider as ToastProvider, MonkeysToaster as Toaster, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchResizableSidebar, WorkbenchTableView, applyMonkeysTheme, calculateHue, calculateLightness, calculateSaturation, clearRegistry, cn3 as cn, createSolidColorScale, extractToastMessage, genTailwindTheme, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, getRegisteredComponents, getRegisteredThemes, getThemeConfig, hasCustomComponent, markDarkColor, registerComponent, registerTheme, resolveBaseAppearance, resolveComponent, resolveDataExplorerAppearance, resolveMonkeysTheme, resolveToastVariantForMessage, setNeocardTheme, setTailwindTheme, toast, useDarkMode, useToastFeed, useToastOnValue };
+export { ARTIST_CONFIG, ARTIST_DEFAULT_QUICK_ACTIONS, AppHeader, AppLayout, AppSidebar, ArtistLandingPage, BSD_CONFIG, BSD_DEFAULT_FEATURE_CARDS, BaseAccordion, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseInput, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLoadingState, BaseMultiSelect, BaseNotice, BasePagination, BasePanel, BaseProgress, BaseRadioGroup, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSwitch, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseTextarea, BaseToolbar, BaseTooltip, BsdLandingPage, BsdToolboxPanel, CONCEPT_CONFIG, CONCEPT_DEFAULT_QUICK_ACTIONS, ConceptDesignLandingPage, DarkModeSelector, DarkModeSubMenu, DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, DefaultLandingPage, DynamicComponent, I18nSelector, InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, LoginPage, MonkeysToastProvider, MonkeysToaster, NavButton, NavigationLayout, MonkeysToastProvider as ToastProvider, MonkeysToaster as Toaster, UserAccountMenu, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchResizableSidebar, WorkbenchTableView, applyMonkeysTheme, calculateHue, calculateLightness, calculateSaturation, clearRegistry, cn3 as cn, createSolidColorScale, extractToastMessage, genTailwindTheme, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, getRegisteredComponents, getRegisteredThemes, getThemeConfig, hasCustomComponent, markDarkColor, registerComponent, registerTheme, resolveBaseAppearance, resolveComponent, resolveDataExplorerAppearance, resolveMonkeysTheme, resolveToastVariantForMessage, setNeocardTheme, setTailwindTheme, toast, useDarkMode, useToastFeed, useToastOnValue };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map