@ixo/ui 0.0.4 → 0.0.6

package/dist/{components-qFMVWjVp.js → components-BoLr9Qow.js}

@@ -1,23 +1,23 @@
 import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
 import { isString, toggle, get, isFunction, assign } from "radash";
 import { useTheme, jsx as jsx$1, keyframes, ThemeProvider } from "@emotion/react";
-import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, L as Loading, P as PlusSolid, S as SearchSolid, b as Assistant, c as ArrowUpSolid, E as EllipsisVSolid, U as User, G as Globe, D as Dashboard, d as Groups, e as UserCircleSolid, f as Assets$1, h as Claims, i as Accounts, H as HistorySolid, j as LinkedResources, k as Proposals, I as ImpactCredits, l as GoTo, m as Share, n as PiePiece, o as ImpactCertificates, p as CommentDotsSolid, q as CommentAltSolid, M as MicrophoneSolid, r as Command, s as ArrowCircleRightSolid, t as Protocols, u as Investments, O as Oracles, v as Projects, w as Daos, x as Star, y as AngleLeftSolid, z as AngleRightSolid, B as Expand, F as LeafSolid, J as ArrowDownSolid, K as ArrowLeftSolid, N as ArrowRightSolid, Q as Play, R as CheckCircle, T as Events, V as ThumbsUpSolid, W as CommentsSolid, X as CopySolid, Y as Hourglass, Z as Act, _ as Info$1, $ as ClaimsW, a0 as TachometerAltSolid, a1 as UserCogSolid, a2 as UsersSolid, a3 as EllipsisHSolid, a4 as Resources, a5 as ShieldAltSolid } from "./UsersSolid-CEMcHCoD.js";
+import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, L as Loading, P as PlusSolid, S as SearchSolid, b as Assistant, c as ArrowUpSolid, E as EllipsisVSolid, U as User, d as AngleRightSolid, e as EllipsisHSolid, f as AngleLeftSolid, G as Globe, D as Dashboard, h as Groups, i as UserCircleSolid, j as Assets$1, k as Claims, l as Accounts, H as HistorySolid, m as LinkedResources, n as Proposals, I as ImpactCredits, o as GoTo, p as Share, q as PiePiece, r as ImpactCertificates, s as CommentDotsSolid, t as CommentAltSolid, M as MicrophoneSolid, u as Command, v as ArrowCircleRightSolid, w as Protocols, x as Investments, O as Oracles, y as Projects, z as Daos, B as Star, F as Expand, J as LeafSolid, K as ArrowDownSolid, N as ArrowLeftSolid, Q as ArrowRightSolid, R as Play, T as CheckCircle, V as Events, W as ThumbsUpSolid, X as CommentsSolid, Y as CopySolid, Z as Hourglass, _ as Act, $ as Info$1, a0 as ClaimsW, a1 as TachometerAltSolid, a2 as UserCogSolid, a3 as UsersSolid } from "./UsersSolid-CYOWcNJV.js";
 import { useState, useCallback, useRef, useEffect, Suspense, lazy, forwardRef, useId, useMemo, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, memo } from "react";
 import { T as TAG_SMALL_HEIGHT, D as DEFAULT_ICON_SIZE } from "./constants-B7xlU8b8.js";
-import { Accordion as Accordion$1, Box, Image, Text as Text$1, Badge as Badge$1, Stack as Stack$1, Center } from "@mantine/core";
+import { Accordion as Accordion$1, Box, Image, AppShell, Stack as Stack$1, Center, Divider, Paper, Text as Text$1, Badge as Badge$1 } from "@mantine/core";
 import { cx, css } from "@emotion/css";
 import { createPortal } from "react-dom";
 import DOMPurify from "dompurify";
 import { Popover } from "react-tiny-popover";
+import { useDisclosure, useHover } from "@mantine/hooks";
 import { u as useUITheme } from "./useUITheme-7i8NJ2FG.js";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useCombobox, useSelect } from "downshift";
-import { useHover } from "@mantine/hooks";
 import dayjs from "dayjs";
 import { B as Blank } from "./Blank-CElsicB7.js";
 import { E as EventEmitter, u as useEventSubscribe } from "./useEventSubscribe-16wxaghO.js";
-import { d as dark, l as light } from "./themes-BxAZpKEj.js";
+import { d as dark, l as light } from "./themes-B3gRP8Wm.js";
 function SlideUpArea({ children, isVisible }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -774,8 +774,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-DQYpSmzE.js"));
-const Footer = lazy(() => import("./index-4Ok7zUt7.js"));
+const Header$3 = lazy(() => import("./index-GZOZ7L0s.js"));
+const Footer = lazy(() => import("./index-CNWC1hG3.js"));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -859,7 +859,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = lazy(() => import("./index-BAoRqihu.js"));
+const Header$2 = lazy(() => import("./index-BfkAX8vS.js"));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = useRef(null);
   const handleOnClick = useCallback(
@@ -1294,7 +1294,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = lazy(() => import("./index-C6py_EuP.js"));
+const Badge = lazy(() => import("./index-7eiS7IVr.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -2072,6 +2072,281 @@ function Avatar({ src, rounded = true, size = 62, did }) {
   }
   return /* @__PURE__ */ jsx(User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
 }
+const Flex = forwardRef(
+  ({
+    direction = "row",
+    align = "stretch",
+    justify = "flex-start",
+    gap = 0,
+    m = 0,
+    mt = 0,
+    mb = 0,
+    ml = 0,
+    mr = 0,
+    mx = 0,
+    my = 0,
+    p = 0,
+    pt = 0,
+    pb = 0,
+    pl = 0,
+    pr = 0,
+    px = 0,
+    py = 0,
+    bg,
+    radius = 0,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        style: {
+          display: "flex",
+          flexDirection: direction,
+          alignItems: align,
+          justifyContent: justify,
+          gap,
+          margin: m,
+          marginTop: mt || my,
+          marginBottom: mb || my,
+          marginLeft: ml || mx,
+          marginRight: mr || mx,
+          padding: p,
+          paddingTop: pt || py,
+          paddingBottom: pb || py,
+          paddingLeft: pl || px,
+          paddingRight: pr || px,
+          backgroundColor: bg,
+          borderRadius: radius,
+          ...props.style
+        },
+        children
+      }
+    );
+  }
+);
+Flex.displayName = "Flex";
+function SpaceItem({ icon, id, onClick }) {
+  const { hovered, ref } = useHover();
+  const theme = useUITheme();
+  return /* @__PURE__ */ jsx(
+    Center,
+    {
+      ref,
+      sx: {
+        cursor: "pointer",
+        borderRadius: 24,
+        transform: hovered ? "scale(1.1)" : "scale(1)",
+        transition: "transform 0.2s ease"
+      },
+      pos: "relative",
+      bg: hovered ? theme.neutral.transparent10 : theme.bg.navScaled,
+      mih: 40,
+      w: 40,
+      onClick: () => onClick(id),
+      children: typeof icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: icon, w: 32, h: 32 }) : icon
+    }
+  );
+}
+function MenuItem({ item, onMenuItemClick }) {
+  const { hovered, ref } = useHover();
+  const theme = useUITheme();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      ref,
+      align: "center",
+      gap: 8,
+      px: 12,
+      py: 6,
+      style: {
+        cursor: "pointer",
+        borderRadius: 8,
+        backgroundColor: item.isActive ? theme.neutral.transparent10 : hovered ? theme.neutral.transparent10 : "transparent",
+        transform: hovered ? "translateX(4px)" : "translateX(0px)",
+        transition: "all 0.2s ease"
+      },
+      onClick: () => onMenuItemClick(item),
+      children: [
+        /* @__PURE__ */ jsx(item.icon, { size: 20, color: "secondary" }),
+        /* @__PURE__ */ jsx(Text$1, { fz: 14, c: theme.neutral.lightGray, children: item.name })
+      ]
+    }
+  );
+}
+function RoomItem({ room }) {
+  const { hovered, ref } = useHover();
+  const theme = useUITheme();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      ref,
+      align: "center",
+      gap: 8,
+      px: 12,
+      py: 4,
+      ml: 16,
+      style: {
+        cursor: "pointer",
+        borderRadius: 6,
+        backgroundColor: room.isActive || hovered ? theme.neutral.transparent10 : "transparent",
+        transform: hovered ? "translateX(2px)" : "translateX(0px)",
+        transition: "all 0.15s ease"
+      },
+      onClick: () => room.onClick(room.id),
+      children: [
+        /* @__PURE__ */ jsx(room.icon, { size: 16, color: "secondary" }),
+        /* @__PURE__ */ jsx(Text$1, { fz: 13, c: theme.text.secondary, children: room.name })
+      ]
+    }
+  );
+}
+function RoomCategory({ category }) {
+  const { hovered, ref } = useHover();
+  const theme = useUITheme();
+  const { value, toggle: toggle2 } = useToggle(false);
+  return /* @__PURE__ */ jsxs(Stack$1, { gap: 2, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref,
+        align: "center",
+        justify: "space-between",
+        px: 12,
+        py: 4,
+        style: {
+          cursor: "pointer",
+          borderRadius: 6,
+          backgroundColor: hovered ? theme.neutral.transparent50 : "transparent",
+          transition: "all 0.15s ease"
+        },
+        onClick: toggle2,
+        children: [
+          /* @__PURE__ */ jsx(Text$1, { fz: 12, c: theme.neutral.lightGray, children: category.name }),
+          /* @__PURE__ */ jsx(
+            Center,
+            {
+              sx: {
+                transform: value ? "rotate(-90deg)" : "rotate(0deg)",
+                transition: "transform 0.2s ease"
+              },
+              children: /* @__PURE__ */ jsx(AngleLeftSolid, { size: 12, color: "secondary" })
+            }
+          )
+        ]
+      }
+    ),
+    !value && /* @__PURE__ */ jsx(Stack$1, { gap: 1, children: category.rooms.map((room) => /* @__PURE__ */ jsx(RoomItem, { room }, room.id)) })
+  ] });
+}
+function AppShellNavigation({
+  spaces,
+  selectedSpace,
+  menuItems,
+  roomCategories,
+  companyIcon,
+  onAddSpaceClick,
+  avatarIcon,
+  onMenuItemClick,
+  onPersonalSpaceClick,
+  children
+}) {
+  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
+  const theme = useUITheme();
+  return /* @__PURE__ */ jsxs(
+    AppShell,
+    {
+      withBorder: false,
+      styles: {
+        navbar: {
+          background: theme.bg.navScaled
+        }
+      },
+      bg: theme.bg.navScaled,
+      navbar: {
+        width: desktopOpened ? 300 : 56,
+        breakpoint: "sm"
+      },
+      children: [
+        /* @__PURE__ */ jsx(AppShell.Navbar, { children: /* @__PURE__ */ jsxs(Flex, { style: { height: "100%" }, children: [
+          /* @__PURE__ */ jsxs(Stack$1, { p: 8, w: 56, justify: "space-between", h: "100%", bg: theme.bg.navSpaces, children: [
+            /* @__PURE__ */ jsxs(Stack$1, { align: "center", style: { flex: 1, overflowY: "auto", overflowX: "hidden" }, gap: 8, children: [
+              /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: companyIcon.onClick, children: typeof companyIcon.icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: companyIcon.icon, w: 32, h: 32 }) : companyIcon.icon }),
+              /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: onPersonalSpaceClick, children: /* @__PURE__ */ jsx(User, { color: "secondary" }) }),
+              /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+              /* @__PURE__ */ jsx(
+                Stack$1,
+                {
+                  align: "center",
+                  gap: 8,
+                  style: {
+                    flex: 1,
+                    overflowY: "auto",
+                    maxHeight: "calc(100vh - 300px)",
+                    scrollbarWidth: "none",
+                    msOverflowStyle: "none"
+                  },
+                  sx: {
+                    "&::-webkit-scrollbar": {
+                      display: "none"
+                    }
+                  },
+                  children: spaces.map(({ icon, id, name, onClick }, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                    selectedSpace === id && /* @__PURE__ */ jsx(Paper, { bg: theme.neutral.whiteFull, h: 30, w: 4, pos: "absolute", left: 0, top: 116 + i * 49.5 }),
+                    /* @__PURE__ */ jsx(SpaceItem, { icon, name, id, onClick }, id)
+                  ] }))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsx(PlusSolid, { color: "secondary" }) }),
+            /* @__PURE__ */ jsxs(Stack$1, { align: "center", gap: 8, children: [
+              /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+              /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: avatarIcon.onClick, children: typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon }),
+              !desktopOpened && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: toggleDesktop, children: /* @__PURE__ */ jsx(AngleRightSolid, { color: "secondary" }) })
+            ] })
+          ] }),
+          desktopOpened && /* @__PURE__ */ jsxs(Stack$1, { w: "100%", gap: 5, py: 16, px: 12, children: [
+            /* @__PURE__ */ jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
+              /* @__PURE__ */ jsx(Text$1, { lh: 1, c: theme.text.overPicture, children: spaces.find(({ id }) => id === selectedSpace)?.name || "Unknown" }),
+              /* @__PURE__ */ jsxs(Flex, { gap: 12, align: "center", children: [
+                /* @__PURE__ */ jsx(EllipsisHSolid, { color: "secondary" }),
+                /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer" }, onClick: toggleDesktop, children: /* @__PURE__ */ jsx(AngleLeftSolid, { color: "secondary" }) })
+              ] })
+            ] }),
+            menuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)),
+            /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                align: "center",
+                gap: 8,
+                px: 12,
+                py: 6,
+                style: {
+                  cursor: "pointer",
+                  borderRadius: 8,
+                  backgroundColor: "transparent"
+                },
+                onClick: () => {
+                },
+                children: [
+                  /* @__PURE__ */ jsx(EllipsisHSolid, { size: 20, color: "secondary" }),
+                  /* @__PURE__ */ jsx(Text$1, { fz: 14, c: theme.neutral.lightGray, children: "More" })
+                ]
+              }
+            ),
+            roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Text$1, { pl: 11, mt: 16, fz: 14, c: theme.neutral.lightGray, children: "Rooms" }),
+              /* @__PURE__ */ jsx(Stack$1, { gap: 8, children: roomCategories.map((category) => /* @__PURE__ */ jsx(RoomCategory, { category }, category.id)) })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(AppShell.Main, { children })
+      ]
+    }
+  );
+}
 function AvatarInfo({ src, title, description, onClick }) {
   const content = /* @__PURE__ */ jsxs(Spacer, { children: [
     /* @__PURE__ */ jsx(Avatar, { size: 40, src }),
@@ -3714,62 +3989,6 @@ function DomainToolbarTypes({ domainType, active, onClick, ConnectActive }) {
     document.body
   );
 }
-const Flex = forwardRef(
-  ({
-    direction = "row",
-    align = "stretch",
-    justify = "flex-start",
-    gap = 0,
-    m = 0,
-    mt = 0,
-    mb = 0,
-    ml = 0,
-    mr = 0,
-    mx = 0,
-    my = 0,
-    p = 0,
-    pt = 0,
-    pb = 0,
-    pl = 0,
-    pr = 0,
-    px = 0,
-    py = 0,
-    bg,
-    radius = 0,
-    children,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        ...props,
-        style: {
-          display: "flex",
-          flexDirection: direction,
-          alignItems: align,
-          justifyContent: justify,
-          gap,
-          margin: m,
-          marginTop: mt || my,
-          marginBottom: mb || my,
-          marginLeft: ml || mx,
-          marginRight: mr || mx,
-          padding: p,
-          paddingTop: pt || py,
-          paddingBottom: pb || py,
-          paddingLeft: pl || px,
-          paddingRight: pr || px,
-          backgroundColor: bg,
-          borderRadius: radius,
-          ...props.style
-        },
-        children
-      }
-    );
-  }
-);
-Flex.displayName = "Flex";
 const CommandItem = ({
   name,
   description,
@@ -5059,13 +5278,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-DeBEdBiR.js"));
-const Header$1 = lazy(() => import("./index-DkjLBaSk.js"));
-const Content = lazy(() => import("./index-sTelSbrd.js"));
+const MainAction = lazy(() => import("./index-DRT7h4xd.js"));
+const Header$1 = lazy(() => import("./index-ufMtBCkV.js"));
+const Content = lazy(() => import("./index-Bd5Hg5BP.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-yE1fBF8R.js"));
-const Actions = lazy(() => import("./index-qhANrzdI.js"));
+const Assets = lazy(() => import("./index-BwK5-98B.js"));
+const Actions = lazy(() => import("./index-D-yx5xCK.js"));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = useRef(null);
@@ -9448,22 +9667,6 @@ function NavigationActionSelector({ action, onClick }) {
     color: "rgba(255, 255, 255, 0.5)",
     margin: 0
   };
-  const premiumTagStyle = {
-    display: "flex",
-    alignItems: "center",
-    padding: "0 8px",
-    height: "20px",
-    background: "rgba(0, 210, 255, 0.2)",
-    borderRadius: "16px",
-    fontSize: "12px",
-    fontWeight: "400",
-    color: "#00D2FF",
-    fontFamily: theme.font.main,
-    position: "absolute",
-    right: "16px",
-    top: "50%",
-    transform: "translateY(-50%)"
-  };
   const handleClick = () => {
     onClick?.(action);
   };
@@ -9477,53 +9680,12 @@ function NavigationActionSelector({ action, onClick }) {
   return /* @__PURE__ */ jsxs("button", { style: containerStyle, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [
     /* @__PURE__ */ jsx("div", { style: iconContainerStyle, children: /* @__PURE__ */ jsx(IconComponent, {}) }),
     /* @__PURE__ */ jsxs("div", { style: textContentStyle, children: [
-      /* @__PURE__ */ jsx("div", { style: titleStyle, children: action.title }),
-      /* @__PURE__ */ jsx("div", { style: descriptionStyle, children: action.description })
-    ] }),
-    action.isPremium && /* @__PURE__ */ jsx("div", { style: premiumTagStyle, children: "Premium" })
+      /* @__PURE__ */ jsx("div", { style: titleStyle, children: action.label }),
+      /* @__PURE__ */ jsx("div", { style: descriptionStyle, children: action.label })
+    ] })
   ] });
 }
-function MoreModal({ position, onMouseEnter, onMouseLeave, additionalItems }) {
-  const defaultNavigationActions = [
-    {
-      id: "resources",
-      title: "Resources",
-      description: "Linked Resources of the Domain",
-      Icon: Resources
-    },
-    {
-      id: "activity",
-      title: "Activity",
-      description: "Show the past activity of the Domain",
-      Icon: HistorySolid
-    },
-    {
-      id: "credentials",
-      title: "Credentials",
-      description: "Shows the Credentials of the Domain",
-      Icon: ShieldAltSolid
-    },
-    {
-      id: "impacts",
-      title: "Impacts",
-      description: "Verify the impacts of your Domain",
-      Icon: Resources,
-      // Using Resources as placeholder for impacts icon
-      isPremium: true
-    }
-  ];
-  const convertNavItemsToActions = (items) => {
-    return items.map((item) => ({
-      id: item.id,
-      title: item.label,
-      description: `Navigate to ${item.label}`,
-      // Generic description
-      Icon: item.Icon,
-      isPremium: false
-      // NavItems don't have premium flag
-    }));
-  };
-  const navigationActions = additionalItems.length > 0 ? convertNavItemsToActions(additionalItems) : defaultNavigationActions;
+function MoreModal({ onItemClick, position, onMouseEnter, onMouseLeave, items }) {
   const modalStyle = {
     position: "fixed",
     left: `${position.x}px`,
@@ -9561,12 +9723,9 @@ function MoreModal({ position, onMouseEnter, onMouseLeave, additionalItems }) {
     scrollbarWidth: "thin",
     scrollbarColor: "rgba(255, 255, 255, 0.3) transparent"
   };
-  const handleActionClick = (action) => {
-    console.log("Clicked navigation action:", action);
-  };
   return /* @__PURE__ */ jsxs("div", { style: modalStyle, onMouseEnter, onMouseLeave, children: [
     /* @__PURE__ */ jsx("div", { style: headerStyle, children: /* @__PURE__ */ jsx(Typography.Text, { size: "xs", color: "overPicture", children: "More" }) }),
-    /* @__PURE__ */ jsx("div", { style: navigationActionsContainerStyle, children: navigationActions.map((action) => /* @__PURE__ */ jsx(NavigationActionSelector, { action, onClick: handleActionClick }, action.id)) })
+    /* @__PURE__ */ jsx("div", { style: navigationActionsContainerStyle, children: onItemClick && items.map((action) => /* @__PURE__ */ jsx(NavigationActionSelector, { action, onClick: () => onItemClick(action) }, action.id)) })
   ] });
 }
 function SpaceSelector({ space, onClick, className }) {
@@ -10200,15 +10359,12 @@ function NavigationBar({
             if (estimatedModalHeight <= dynamicNavHeight) {
               maxHeight = dynamicNavHeight;
               yPosition = dynamicRect.bottom - estimatedModalHeight;
-              console.log(`Small modal: positioning at Y=${yPosition} (DynamicNav bottom - modal height)`);
             } else if (estimatedModalHeight <= navBarRect.height) {
               maxHeight = navBarRect.height;
               yPosition = navBarRect.top;
-              console.log(`Medium modal: positioning at Y=${yPosition} (NavigationBar top)`);
             } else {
               maxHeight = navBarRect.height;
               yPosition = navBarRect.top;
-              console.log(`Large modal: positioning at Y=${yPosition} (NavigationBar top, will be scrollable)`);
             }
           }
         } else if (itemId === "workspaces") {
@@ -10219,7 +10375,6 @@ function NavigationBar({
           yPosition = navBarRect.bottom;
         }
       } else {
-        console.warn("NavigationBar rect not found, using fallback positioning");
         xPosition = rect.right + 8;
         yPosition = rect.top;
         maxHeight = Math.min(400, window.innerHeight - rect.top - 20);
@@ -10323,7 +10478,17 @@ function NavigationBar({
         onEcosystemClick
       }
     ),
-    hoveredItem === "more" && /* @__PURE__ */ jsx(MoreModal, { position: modalPosition, onClose: handleModalLeave, onMouseEnter: handleModalEnter, onMouseLeave: handleModalLeave, additionalItems: getMoreItems() }),
+    hoveredItem === "more" && /* @__PURE__ */ jsx(
+      MoreModal,
+      {
+        position: modalPosition,
+        onClose: handleModalLeave,
+        onItemClick: onNavigate,
+        onMouseEnter: handleModalEnter,
+        onMouseLeave: handleModalLeave,
+        items: getMoreItems()
+      }
+    ),
     hoveredItem === "workspaces" && /* @__PURE__ */ jsx(
       WorkspaceModal,
       {
@@ -10341,71 +10506,72 @@ function NavigationBar({
   ] });
 }
 export {
-  GroupSelector as $,
+  GroupActivity as $,
   Avatar as A,
   Button as B,
   CARD_HEADER_HEIGHT as C,
-  Chart$1 as D,
-  Checkbox as E,
+  CardUserFollowUp as D,
+  Chart$1 as E,
   FeedbackMessage as F,
-  CheckboxGroup as G,
-  ComboBox as H,
+  Checkbox as G,
+  CheckboxGroup as H,
   IconButton as I,
-  DomainToolbar as J,
-  DropDown as K,
+  ComboBox as J,
+  DomainToolbar as K,
   Loader as L,
   MoreMenu as M,
-  DomainToolbarTypes as N,
+  DropDown as N,
   OracleMessage as O,
-  FloatingInput as P,
-  EcosystemCard as Q,
-  EntityList as R,
+  DomainToolbarTypes as P,
+  FloatingInput as Q,
+  EcosystemCard as R,
   Spacer as S,
   Typography as T,
   UserMessage as U,
-  Event as V,
-  ExpandableButton as W,
-  FeaturedCard as X,
-  FilterDropDown as Y,
-  FilterTags as Z,
-  GroupActivity as _,
+  EntityList as V,
+  Event as W,
+  ExpandableButton as X,
+  FeaturedCard as Y,
+  FilterDropDown as Z,
+  FilterTags as _,
   Tag as a,
-  HandlerSodaCard as a0,
-  HtmlRender as a1,
-  ImpactCreditState as a2,
-  Layout as a3,
-  Modal as a4,
-  ModalSearch as a5,
-  ModalSheet as a6,
-  OracleProtocolsSelection as a7,
-  OracleReply as a8,
-  PageTitle as a9,
-  PlanCard as aa,
-  Post as ab,
-  ProfileCard as ac,
-  ProfileMenu as ad,
-  ProposalCard as ae,
-  RoundedButton as af,
-  ServiceOffering as ag,
-  SearchInput as ah,
-  Select as ai,
-  SodaCard as aj,
-  SomeComponent as ak,
-  Switch as al,
-  SwitchText as am,
-  Table as an,
-  TableList as ao,
-  TabNavigation as ap,
-  TabSelector as aq,
-  TextInput as ar,
-  UiProvider as as,
-  FloatingModal as at,
-  NavigationBar as au,
-  NavigationItem as av,
-  DomainModal as aw,
-  DomainSelector as ax,
-  MoreModal as ay,
-  WorkspaceModal as az,
+  GroupSelector as a0,
+  HandlerSodaCard as a1,
+  HtmlRender as a2,
+  ImpactCreditState as a3,
+  Layout as a4,
+  Modal as a5,
+  ModalSearch as a6,
+  ModalSheet as a7,
+  OracleProtocolsSelection as a8,
+  OracleReply as a9,
+  WorkspaceModal as aA,
+  PageTitle as aa,
+  PlanCard as ab,
+  Post as ac,
+  ProfileCard as ad,
+  ProfileMenu as ae,
+  ProposalCard as af,
+  RoundedButton as ag,
+  ServiceOffering as ah,
+  SearchInput as ai,
+  Select as aj,
+  SodaCard as ak,
+  SomeComponent as al,
+  Switch as am,
+  SwitchText as an,
+  Table as ao,
+  TableList as ap,
+  TabNavigation as aq,
+  TabSelector as ar,
+  TextInput as as,
+  UiProvider as at,
+  FloatingModal as au,
+  NavigationBar as av,
+  NavigationItem as aw,
+  DomainModal as ax,
+  DomainSelector as ay,
+  MoreModal as az,
   ActionButton as b,
   cutText as c,
   Tooltip$1 as d,
@@ -10419,17 +10585,17 @@ export {
   ActivityCard as l,
   AIResponse as m,
   AIInputBar as n,
-  AvatarInfo as o,
-  ButtonBasic as p,
-  ButtonReadOnly as q,
-  ButtonSubtle as r,
-  Card as s,
-  CardAction as t,
-  CardEntity as u,
-  CardHeader as v,
-  CardHero as w,
-  CardSelector as x,
-  CardOutput as y,
-  CardUserFollowUp as z
+  AppShellNavigation as o,
+  AvatarInfo as p,
+  ButtonBasic as q,
+  ButtonReadOnly as r,
+  ButtonSubtle as s,
+  Card as t,
+  CardAction as u,
+  CardEntity as v,
+  CardHeader as w,
+  CardHero as x,
+  CardSelector as y,
+  CardOutput as z
 };
-//# sourceMappingURL=components-qFMVWjVp.js.map
+//# sourceMappingURL=components-BoLr9Qow.js.map