@ixo/ui 0.0.33 → 0.0.35

package/dist/{components-DTMttD70.cjs → components-DF2Bd0es.cjs}

@@ -797,8 +797,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-Dgo89leo.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-CXKd9L7W.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BQ1DH7WK.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-CFWPityN.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-CrGDWCSQ.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-MFrpv1U1.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-DRTHOayr.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-DF1KwyRS.cjs")));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = react$1.useRef(null);
   const wrapperContentAreaRef = react$1.useRef(null);
@@ -2207,6 +2207,7 @@ function Avatar({ src, rounded = true, size = 62, did }) {
   return /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
 }
 const MIN_WIDTH = 200;
+const MAX_WIDTH = 700;
 function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width = 450, onWidthChange, onMaxExpand }) {
   const [isResizing, setIsResizing] = react$1.useState(false);
   const [ref] = hooks.useResizeObserver();
@@ -2242,7 +2243,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
   const handleMouseMove = (e) => {
     if (!isResizing) return;
     const newWidth = window.innerWidth - e.clientX;
-    const maxWidth = window.innerWidth - 600;
+    const maxWidth = Math.min(window.innerWidth - 600, MAX_WIDTH);
     const constrainedWidth = Math.min(Math.max(newWidth, MIN_WIDTH), maxWidth);
     onWidthChange?.(constrainedWidth);
   };
@@ -2253,7 +2254,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
     }
   }, [width, asideCollapsed, onAsideToggle]);
   react$1.useEffect(() => {
-    const maxWidth = window.innerWidth - 600;
+    const maxWidth = Math.min(window.innerWidth - 600, MAX_WIDTH);
     if (width >= maxWidth && onMaxExpand && !hasFiredMaxExpand.current) {
       hasFiredMaxExpand.current = true;
       clearListeners();
@@ -2264,7 +2265,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
   }, [width, onMaxExpand]);
   react$1.useEffect(() => {
     const handleWindowResize = () => {
-      const newMaxWidth = window.innerWidth - 600;
+      const newMaxWidth = Math.min(window.innerWidth - 600, MAX_WIDTH);
       const newMinWidth = MIN_WIDTH;
       if (width > newMaxWidth) {
         onWidthChange?.(newMaxWidth);
@@ -2286,7 +2287,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
     {
       w: width,
       miw: 200,
-      maw: window.innerWidth - 340,
+      maw: MAX_WIDTH,
       ref,
       sx: {
         overflowY: "auto",
@@ -2429,19 +2430,70 @@ function RoomCategory({ category }) {
     !value && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 1, children: category.rooms.map((room) => /* @__PURE__ */ jsxRuntime.jsx(RoomItem, { room }, room.id)) })
   ] });
 }
+function hasActiveDescendant(children) {
+  if (!children || children.length === 0) return false;
+  return children.some((child) => child.isActive === true || hasActiveDescendant(child.children));
+}
 function MenuItem({ item, onMenuItemClick, depth = 0 }) {
   const { hovered, ref } = hooks.useHover();
   const theme = useUITheme.useUITheme();
-  const { value: isExpanded, toggle } = useToggle(false);
   const hasChildren = item.children && item.children.length > 0;
+  const hasActiveChild = react$1.useMemo(() => hasActiveDescendant(item.children), [item.children]);
+  const initialExpanded = item?.isActive === true || hasActiveChild;
+  const { value: isExpanded, toggle, set: setIsExpanded } = useToggle(initialExpanded);
+  const prevHasActiveChildRef = react$1.useRef(hasActiveChild);
+  const manuallyToggledRef = react$1.useRef(false);
+  react$1.useEffect(() => {
+    if (item?.isActive !== void 0) {
+      setIsExpanded(item.isActive);
+      manuallyToggledRef.current = false;
+    }
+  }, [item?.isActive, setIsExpanded]);
+  react$1.useEffect(() => {
+    if (hasActiveChild && !prevHasActiveChildRef.current) {
+      if (!manuallyToggledRef.current || isExpanded) {
+        setIsExpanded(true);
+      }
+    }
+    prevHasActiveChildRef.current = hasActiveChild;
+  }, [hasActiveChild, isExpanded, setIsExpanded]);
   const handleItemClick = () => {
     if (!!item?.disabled) return;
     onMenuItemClick(item);
   };
   const handleToggleClick = (e) => {
     e.stopPropagation();
+    manuallyToggledRef.current = true;
     toggle();
   };
+  const shouldShowActiveStyle = item.isActive === true && !hasActiveChild;
+  const renderIcon = () => {
+    if (hasChildren && hovered) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        core.Center,
+        {
+          onClick: handleToggleClick,
+          p: 4,
+          sx: {
+            cursor: "pointer",
+            borderRadius: 4,
+            transform: isExpanded ? "rotate(-90deg)" : "rotate(0deg)",
+            transition: "transform 0.2s ease",
+            "&:hover": {
+              backgroundColor: theme.neutral.transparent10
+            }
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleLeftSolid, { size: 12, color: "secondary" })
+        }
+      );
+    } else {
+      if (typeof item.icon === "string") {
+        return /* @__PURE__ */ jsxRuntime.jsx(core.Image, { w: 20, h: 20, src: item.icon, radius: "50%" });
+      } else {
+        return /* @__PURE__ */ jsxRuntime.jsx(item.icon, { size: 20, color: shouldShowActiveStyle ? "overPicture" : "secondary" });
+      }
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 1, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       Flex,
@@ -2456,50 +2508,31 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
         style: {
           cursor: "pointer",
           borderRadius: 8,
-          backgroundColor: item.isActive ? theme.neutral.transparent10 : hovered ? theme.neutral.transparent10 : "transparent",
+          backgroundColor: shouldShowActiveStyle ? theme.neutral.transparent10 : hovered ? theme.neutral.transparent10 : "transparent",
           transform: hovered ? "translateX(4px)" : "translateX(0px)",
           transition: "all 0.2s ease"
         },
         onClick: handleItemClick,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 8, children: [
-            typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { w: 20, h: 20, src: item.icon, radius: "50%" }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { size: 20, color: item.isActive ? "overPicture" : "secondary" }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 14, fw: 500, c: item.isActive ? theme.neutral.lightGray : theme.text.secondary, style: { flex: 1 }, children: item.name }),
+            renderIcon(),
+            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 14, fw: 500, c: shouldShowActiveStyle ? theme.neutral.lightGray : theme.text.secondary, style: { flex: 1 }, children: item.name }),
             item.badgeCount ? /* @__PURE__ */ jsxRuntime.jsx(core.Badge, { size: "xs", variant: "filled", ml: 4, style: { minWidth: "16px", height: "15px", padding: "0 4px", fontSize: "8px" }, children: item.badgeCount }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Flex, { children: [
-            hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
-              core.Center,
-              {
-                onClick: handleToggleClick,
-                p: 4,
-                sx: {
-                  cursor: "pointer",
-                  borderRadius: 4,
-                  transform: isExpanded ? "rotate(-90deg)" : "rotate(0deg)",
-                  transition: "transform 0.2s ease",
-                  "&:hover": {
-                    backgroundColor: theme.neutral.transparent10
-                  }
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleLeftSolid, { size: 12, color: "secondary" })
-              }
-            ),
-            item?.actions && item.actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-              core.Center,
-              {
-                sx: {
-                  cursor: "pointer",
-                  borderRadius: 4,
-                  transition: "transform 0.2s ease",
-                  "&:hover": {
-                    backgroundColor: theme.neutral.transparent10
-                  }
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(MoreMenu, { items: item.actions, controlColor: "secondary" })
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx(Flex, { children: item?.actions && item.actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            core.Center,
+            {
+              sx: {
+                cursor: "pointer",
+                borderRadius: 4,
+                transition: "transform 0.2s ease",
+                "&:hover": {
+                  backgroundColor: theme.neutral.transparent10
+                }
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(MoreMenu, { items: item.actions, controlColor: "secondary" })
+            }
+          ) })
         ]
       }
     ),
@@ -2576,6 +2609,64 @@ function AppShellNavigation({
   const [isNavbarNotCollapsed, { toggle: toggleNavbar }] = hooks.useDisclosure(true);
   const [asideWidth, setAsideWidth] = react$1.useState(450);
   const theme = useUITheme.useUITheme();
+  const [navbarWidth, setNavbarWidth] = react$1.useState(isAiOpened ? 450 : 300);
+  const [isNavbarResizing, setIsNavbarResizing] = react$1.useState(false);
+  const isNavbarResizingRef = react$1.useRef(false);
+  react$1.useEffect(() => {
+    const minWidth = isAiOpened ? 450 : 300;
+    if (navbarWidth < minWidth) {
+      setNavbarWidth(minWidth);
+    }
+  }, [isAiOpened, navbarWidth]);
+  function clearNavbarListeners() {
+    document.removeEventListener("mousemove", handleNavbarMouseMove);
+    document.removeEventListener("mouseup", handleNavbarMouseUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }
+  const handleNavbarMouseMove = react$1.useCallback(
+    (e) => {
+      if (!isNavbarResizingRef.current) return;
+      const minWidth = isAiOpened ? 450 : 300;
+      const maxWidth = 700;
+      const newWidth = Math.min(Math.max(e.clientX, minWidth), maxWidth);
+      setNavbarWidth(newWidth);
+    },
+    [isAiOpened]
+  );
+  const handleNavbarMouseUp = react$1.useCallback(() => {
+    setIsNavbarResizing(false);
+    isNavbarResizingRef.current = false;
+  }, []);
+  const handleNavbarMouseDown = (e) => {
+    e.preventDefault();
+    setIsNavbarResizing(true);
+    isNavbarResizingRef.current = true;
+  };
+  react$1.useEffect(() => {
+    if (isNavbarResizing) {
+      document.addEventListener("mousemove", handleNavbarMouseMove);
+      document.addEventListener("mouseup", handleNavbarMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    } else {
+      clearNavbarListeners();
+    }
+    return () => clearNavbarListeners();
+  }, [isNavbarResizing, handleNavbarMouseMove, handleNavbarMouseUp]);
+  react$1.useEffect(() => {
+    const handleWindowResize = () => {
+      const maxWidth = 700;
+      const minWidth = isAiOpened ? 450 : 300;
+      if (navbarWidth > maxWidth) {
+        setNavbarWidth(maxWidth);
+      } else if (navbarWidth < minWidth) {
+        setNavbarWidth(minWidth);
+      }
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, [navbarWidth, isAiOpened]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.AppShell,
     {
@@ -2583,7 +2674,7 @@ function AppShellNavigation({
       styles: {
         navbar: {
           background: theme.bg.navIconsBg,
-          transition: "width 0.3s ease"
+          transition: isNavbarResizing ? "none" : "width 0.3s ease"
         },
         aside: {
           background: theme.bg.navScaled
@@ -2591,7 +2682,7 @@ function AppShellNavigation({
       },
       bg: theme.bg.centralCanvasBg,
       navbar: {
-        width: isNavbarNotCollapsed ? isAiOpened ? 450 : 300 : 56,
+        width: isNavbarNotCollapsed ? navbarWidth : 56,
         breakpoint: "sm"
       },
       aside: {
@@ -2599,90 +2690,109 @@ function AppShellNavigation({
         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 }, gap: 8, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", 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,
-                companyIcon.isSelected && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, {})
-              ] }),
-              avatarIcon && /* @__PURE__ */ jsxRuntime.jsxs(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: avatarIcon.onClick, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: "Home", position: "right", withArrow: true, ml: 5, fz: 12, children: typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon }),
-                avatarIcon.isSelected && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, {})
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
-              temporarySpace && !spaces?.some((space) => space.id === temporarySpace.id) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SpaceItem,
-                  {
-                    selectedSpace,
-                    icon: temporarySpace.icon,
-                    name: temporarySpace.name,
-                    id: temporarySpace.id,
-                    onClick: temporarySpace.onClick
-                  },
-                  temporarySpace.id
-                ),
-                /* @__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 }) => /* @__PURE__ */ jsxRuntime.jsx(SpaceItem, { selectedSpace, icon, name, id, onClick }, id))
-                }
-              )
-            ] }),
-            onAddSpaceClick && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.PlusSolid, { color: "secondary" }) }),
-            onMinusSpaceClick && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onMinusSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.MinusCircleSolid, { 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.navIconsBg, h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.SettingsBarSolid, { size: 22, color: "secondary" }) })
-            ] })
-          ] }),
-          isAiOpened && isNavbarNotCollapsed && aiNavbarContent,
-          isNavbarNotCollapsed && !isAiOpened && /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 5, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: "10px", children: [
-                  isBackButtonVisible ? /* @__PURE__ */ jsxRuntime.jsx(core.Center, { onClick: onBackClick, sx: { borderRadius: 4, cursor: "pointer", padding: 2, background: theme.bg.navIconsBg }, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.ArrowLeftSolid, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { borderRadius: 4, padding: 2, background: theme.bg.navIconsBg }, children: pageItem.pageIcon ? /* @__PURE__ */ jsxRuntime.jsx(pageItem.pageIcon, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Globe, { size: 18 }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(core.Text, { lh: 1, c: theme.text.overPicture, children: pageItem.pageTitle || "Unknown" })
+        /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Navbar, { children: /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { sx: { position: "relative", height: "100%" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Box,
+            {
+              w: 4,
+              top: 0,
+              right: 0,
+              h: "100%",
+              pos: "absolute",
+              bg: isNavbarResizing ? theme.colors.focus : "transparent",
+              sx: {
+                zIndex: 2,
+                cursor: "col-resize",
+                transition: "background-color 0.2s ease"
+              },
+              onMouseDown: handleNavbarMouseDown
+            }
+          ),
+          /* @__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 }, gap: 8, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", 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,
+                  companyIcon.isSelected && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, {})
                 ] }),
-                isAiBtnVisible && !isAiOpened && /* @__PURE__ */ jsxRuntime.jsx(
-                  core.Center,
+                avatarIcon && /* @__PURE__ */ jsxRuntime.jsxs(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: avatarIcon.onClick, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: "Home", position: "right", withArrow: true, ml: 5, fz: 12, children: typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon }),
+                  avatarIcon.isSelected && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, {})
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+                temporarySpace && !spaces?.some((space) => space.id === temporarySpace.id) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SpaceItem,
+                    {
+                      selectedSpace,
+                      icon: temporarySpace.icon,
+                      name: temporarySpace.name,
+                      id: temporarySpace.id,
+                      onClick: temporarySpace.onClick
+                    },
+                    temporarySpace.id
+                  ),
+                  /* @__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: {
-                      cursor: "pointer",
-                      borderRadius: 8,
-                      transition: "background 0.15s",
-                      background: theme.neutral.transparent10,
-                      "&:hover": {
-                        background: theme.neutral.transparent30
+                      "&::-webkit-scrollbar": {
+                        display: "none"
                       }
                     },
-                    p: 4,
-                    onClick: onAiOpen,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Assistant, { size: 18, color: "primary" })
+                    children: spaces.map(({ icon, id, name, onClick }) => /* @__PURE__ */ jsxRuntime.jsx(SpaceItem, { selectedSpace, icon, name, id, onClick }, id))
                   }
                 )
               ] }),
-              loading ? /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 5, children: Array.from({ length: 6 }).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavigationItemSkeleton, {}, idx)) }) : menuItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onMenuItemClick, item }, item.id)),
-              roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 8, mt: 16, children: roomCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(RoomCategory, { category }, category.id)) })
+              onAddSpaceClick && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.PlusSolid, { color: "secondary" }) }),
+              onMinusSpaceClick && /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onMinusSpaceClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.MinusCircleSolid, { 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.navIconsBg, h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.SettingsBarSolid, { size: 22, color: "secondary" }) })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 5, children: footerContent })
+            isAiOpened && isNavbarNotCollapsed && aiNavbarContent,
+            isNavbarNotCollapsed && !isAiOpened && /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 5, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: "10px", children: [
+                    isBackButtonVisible ? /* @__PURE__ */ jsxRuntime.jsx(core.Center, { onClick: onBackClick, sx: { borderRadius: 4, cursor: "pointer", padding: 2, background: theme.bg.navIconsBg }, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.ArrowLeftSolid, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { borderRadius: 4, padding: 2, background: theme.bg.navIconsBg }, children: pageItem.pageIcon ? /* @__PURE__ */ jsxRuntime.jsx(pageItem.pageIcon, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Globe, { size: 18 }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { lh: 1, c: theme.text.overPicture, children: pageItem.pageTitle || "Unknown" })
+                  ] }),
+                  isAiBtnVisible && !isAiOpened && /* @__PURE__ */ jsxRuntime.jsx(
+                    core.Center,
+                    {
+                      sx: {
+                        cursor: "pointer",
+                        borderRadius: 8,
+                        transition: "background 0.15s",
+                        background: theme.neutral.transparent10,
+                        "&:hover": {
+                          background: theme.neutral.transparent30
+                        }
+                      },
+                      p: 4,
+                      onClick: onAiOpen,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Assistant, { size: 18, color: "primary" })
+                    }
+                  )
+                ] }),
+                loading ? /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 5, children: Array.from({ length: 6 }).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavigationItemSkeleton, {}, idx)) }) : menuItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onMenuItemClick, item }, item.id)),
+                roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 8, mt: 16, children: roomCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(RoomCategory, { category }, category.id)) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 5, children: footerContent })
+            ] })
           ] })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Main, { children }),
@@ -5707,13 +5817,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-CP4dPoSE.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CQD9E1Y0.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-DCDIWKNW.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-lq6zoyTk.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-AIkST7gl.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-pkTICWLF.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-CcdRvpPG.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-O9u1LytR.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-DV9aLRa2.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-RTCppkPk.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);
@@ -11026,4 +11136,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-DTMttD70.cjs.map
+//# sourceMappingURL=components-DF2Bd0es.cjs.map