@ixo/ui 0.0.4 → 0.0.6

package/dist/{components-_1aj7fli.cjs → components-2IYis_pS.cjs}

@@ -24,7 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const radash = require("radash");
 const react = require("@emotion/react");
-const UsersSolid = require("./UsersSolid-Cr_JcwNT.cjs");
+const UsersSolid = require("./UsersSolid-Bj2vwEHq.cjs");
 const react$1 = require("react");
 const constants = require("./constants-DFJRYpE2.cjs");
 const core = require("@mantine/core");
@@ -32,15 +32,15 @@ const css = require("@emotion/css");
 const reactDom = require("react-dom");
 const DOMPurify = require("dompurify");
 const reactTinyPopover = require("react-tiny-popover");
+const hooks = require("@mantine/hooks");
 const useUITheme = require("./useUITheme-DqgAb7n1.cjs");
 const Markdown = require("react-markdown");
 const remarkGfm = require("remark-gfm");
 const downshift = require("downshift");
-const hooks = require("@mantine/hooks");
 const dayjs = require("dayjs");
 const Blank = require("./Blank-DapEucFF.cjs");
 const useEventSubscribe = require("./useEventSubscribe-BTFTMdWH.cjs");
-const themes = require("./themes-ssj6M2ml.cjs");
+const themes = require("./themes-DxTEP-Kl.cjs");
 function SlideUpArea({ children, isVisible }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -797,8 +797,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BAhWhzU2.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-nO1TT3Hv.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-DBvgEa5H.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-BViyRAH_.cjs")));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -882,7 +882,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-DGfDxTQ6.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-D_Sg8YF7.cjs")));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = react$1.useRef(null);
   const handleOnClick = react$1.useCallback(
@@ -1317,7 +1317,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-CDhhze5V.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-B6xg69Dq.cjs")));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = react$1.useRef(null);
   const wrapperContentAreaRef = react$1.useRef(null);
@@ -2095,6 +2095,281 @@ function Avatar({ src, rounded = true, size = 62, did }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
 }
+const Flex = react$1.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__ */ jsxRuntime.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 } = hooks.useHover();
+  const theme = useUITheme.useUITheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.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__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: icon, w: 32, h: 32 }) : icon
+    }
+  );
+}
+function MenuItem({ item, onMenuItemClick }) {
+  const { hovered, ref } = hooks.useHover();
+  const theme = useUITheme.useUITheme();
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(item.icon, { size: 20, color: "secondary" }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 14, c: theme.neutral.lightGray, children: item.name })
+      ]
+    }
+  );
+}
+function RoomItem({ room }) {
+  const { hovered, ref } = hooks.useHover();
+  const theme = useUITheme.useUITheme();
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(room.icon, { size: 16, color: "secondary" }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 13, c: theme.text.secondary, children: room.name })
+      ]
+    }
+  );
+}
+function RoomCategory({ category }) {
+  const { hovered, ref } = hooks.useHover();
+  const theme = useUITheme.useUITheme();
+  const { value, toggle } = useToggle(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.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: toggle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 12, c: theme.neutral.lightGray, children: category.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Center,
+            {
+              sx: {
+                transform: value ? "rotate(-90deg)" : "rotate(0deg)",
+                transition: "transform 0.2s ease"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleLeftSolid, { size: 12, color: "secondary" })
+            }
+          )
+        ]
+      }
+    ),
+    !value && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 1, children: category.rooms.map((room) => /* @__PURE__ */ jsxRuntime.jsx(RoomItem, { room }, room.id)) })
+  ] });
+}
+function AppShellNavigation({
+  spaces,
+  selectedSpace,
+  menuItems,
+  roomCategories,
+  companyIcon,
+  onAddSpaceClick,
+  avatarIcon,
+  onMenuItemClick,
+  onPersonalSpaceClick,
+  children
+}) {
+  const [desktopOpened, { toggle: toggleDesktop }] = hooks.useDisclosure(true);
+  const theme = useUITheme.useUITheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.AppShell,
+    {
+      withBorder: false,
+      styles: {
+        navbar: {
+          background: theme.bg.navScaled
+        }
+      },
+      bg: theme.bg.navScaled,
+      navbar: {
+        width: desktopOpened ? 300 : 56,
+        breakpoint: "sm"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Navbar, { children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { style: { height: "100%" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { p: 8, w: 56, justify: "space-between", h: "100%", bg: theme.bg.navSpaces, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { align: "center", style: { flex: 1, overflowY: "auto", overflowX: "hidden" }, gap: 8, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: companyIcon.onClick, children: typeof companyIcon.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: companyIcon.icon, w: 32, h: 32 }) : companyIcon.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: onPersonalSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.User, { color: "secondary" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                core.Stack,
+                {
+                  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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    selectedSpace === id && /* @__PURE__ */ jsxRuntime.jsx(core.Paper, { bg: theme.neutral.whiteFull, h: 30, w: 4, pos: "absolute", left: 0, top: 116 + i * 49.5 }),
+                    /* @__PURE__ */ jsxRuntime.jsx(SpaceItem, { icon, name, id, onClick }, id)
+                  ] }))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.PlusSolid, { color: "secondary" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { align: "center", gap: 8, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: avatarIcon.onClick, children: typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon }),
+              !desktopOpened && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navScaled, h: 40, w: 40, onClick: toggleDesktop, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleRightSolid, { color: "secondary" }) })
+            ] })
+          ] }),
+          desktopOpened && /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { w: "100%", gap: 5, py: 16, px: 12, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(core.Text, { lh: 1, c: theme.text.overPicture, children: spaces.find(({ id }) => id === selectedSpace)?.name || "Unknown" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 12, align: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.EllipsisHSolid, { color: "secondary" }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer" }, onClick: toggleDesktop, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleLeftSolid, { color: "secondary" }) })
+              ] })
+            ] }),
+            menuItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onMenuItemClick, item }, item.id)),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Flex,
+              {
+                align: "center",
+                gap: 8,
+                px: 12,
+                py: 6,
+                style: {
+                  cursor: "pointer",
+                  borderRadius: 8,
+                  backgroundColor: "transparent"
+                },
+                onClick: () => {
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.EllipsisHSolid, { size: 20, color: "secondary" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 14, c: theme.neutral.lightGray, children: "More" })
+                ]
+              }
+            ),
+            roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(core.Text, { pl: 11, mt: 16, fz: 14, c: theme.neutral.lightGray, children: "Rooms" }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 8, children: roomCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(RoomCategory, { category }, category.id)) })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Main, { children })
+      ]
+    }
+  );
+}
 function AvatarInfo({ src, title, description, onClick }) {
   const content = /* @__PURE__ */ jsxRuntime.jsxs(Spacer, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Avatar, { size: 40, src }),
@@ -3737,62 +4012,6 @@ function DomainToolbarTypes({ domainType, active, onClick, ConnectActive }) {
     document.body
   );
 }
-const Flex = react$1.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__ */ jsxRuntime.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,
@@ -5082,13 +5301,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-DOi5Kjo8.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CcgvizQl.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-B-QsOYPK.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-7ENn--8R.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-D9Jjiwns.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-DoeAXBYv.cjs")));
 const Map = react$1.lazy(() => Promise.resolve().then(() => require("./index-D4PsPquZ.cjs")));
 const CustomContent = react$1.lazy(() => Promise.resolve().then(() => require("./index-ByrCNpS2.cjs")));
-const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-9wbX0zfU.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-r8jIjbnw.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-Dit9UCpC.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-Jt88FVTH.cjs")));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = react$1.useRef(null);
@@ -9471,22 +9690,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);
   };
@@ -9500,53 +9703,12 @@ function NavigationActionSelector({ action, onClick }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("button", { style: containerStyle, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconContainerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: textContentStyle, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: titleStyle, children: action.title }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: descriptionStyle, children: action.description })
-    ] }),
-    action.isPremium && /* @__PURE__ */ jsxRuntime.jsx("div", { style: premiumTagStyle, children: "Premium" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: titleStyle, children: action.label }),
+      /* @__PURE__ */ jsxRuntime.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: UsersSolid.Resources
-    },
-    {
-      id: "activity",
-      title: "Activity",
-      description: "Show the past activity of the Domain",
-      Icon: UsersSolid.HistorySolid
-    },
-    {
-      id: "credentials",
-      title: "Credentials",
-      description: "Shows the Credentials of the Domain",
-      Icon: UsersSolid.ShieldAltSolid
-    },
-    {
-      id: "impacts",
-      title: "Impacts",
-      description: "Verify the impacts of your Domain",
-      Icon: UsersSolid.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`,
@@ -9584,12 +9746,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__ */ jsxRuntime.jsxs("div", { style: modalStyle, onMouseEnter, onMouseLeave, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: headerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { size: "xs", color: "overPicture", children: "More" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: navigationActionsContainerStyle, children: navigationActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(NavigationActionSelector, { action, onClick: handleActionClick }, action.id)) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: navigationActionsContainerStyle, children: onItemClick && items.map((action) => /* @__PURE__ */ jsxRuntime.jsx(NavigationActionSelector, { action, onClick: () => onItemClick(action) }, action.id)) })
   ] });
 }
 function SpaceSelector({ space, onClick, className }) {
@@ -10223,15 +10382,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") {
@@ -10242,7 +10398,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);
@@ -10346,7 +10501,17 @@ function NavigationBar({
         onEcosystemClick
       }
     ),
-    hoveredItem === "more" && /* @__PURE__ */ jsxRuntime.jsx(MoreModal, { position: modalPosition, onClose: handleModalLeave, onMouseEnter: handleModalEnter, onMouseLeave: handleModalLeave, additionalItems: getMoreItems() }),
+    hoveredItem === "more" && /* @__PURE__ */ jsxRuntime.jsx(
+      MoreModal,
+      {
+        position: modalPosition,
+        onClose: handleModalLeave,
+        onItemClick: onNavigate,
+        onMouseEnter: handleModalEnter,
+        onMouseLeave: handleModalLeave,
+        items: getMoreItems()
+      }
+    ),
     hoveredItem === "workspaces" && /* @__PURE__ */ jsxRuntime.jsx(
       WorkspaceModal,
       {
@@ -10372,6 +10537,7 @@ exports.ActionCard = ActionCard;
 exports.ActionSheet = ActionSheet;
 exports.ActionSheetCompanion = ActionSheetCompanion;
 exports.ActivityCard = ActivityCard;
+exports.AppShellNavigation = AppShellNavigation;
 exports.Avatar = Avatar;
 exports.AvatarInfo = AvatarInfo;
 exports.Button = Button;
@@ -10453,4 +10619,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-_1aj7fli.cjs.map
+//# sourceMappingURL=components-2IYis_pS.cjs.map