pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.51

package/dist/Components/SideBar/SideBar.js

@@ -8,9 +8,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const sidebarAccentColors_1 = require("./sidebarAccentColors");
+const sidebarId_1 = require("./sidebarId");
 const Sidebar_1 = require("../../Constants/Sidebar");
+const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
 const lucide_react_1 = require("lucide-react");
 // Overlay stacking — mirrors theme.zIndices (overlay=1300 scrim, modal=1400 panel).
 const Z_SCRIM = 1300;
@@ -28,22 +32,36 @@ const defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
 const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
 const SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
 const OtherApps_1 = __importDefault(require("./components/OtherApps"));
+const sidebarScale_1 = require("./sidebarScale");
+const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
 const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (isLoading) {
-        return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
+        return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
     }
-    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.primary[500], color: (0, accentText_1.onFilled)(theme.colors.primary[500], theme.colors.white, theme.colors.black), borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "10px", color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "base", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", children: overlay ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, color: theme.colors.sidebar.mutedIcon })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14, color: theme.colors.sidebar.mutedIcon })) }))] }));
+    const primaryFillRung = (0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white);
+    const primaryFill = theme.colors.primary[primaryFillRung];
+    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "lg", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: primaryFill, color: (0, filledSurface_1.labelOnFill)(primaryFill, theme.colors.white, theme.colors.black), borderRadius: "lg", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: 2, px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: sidebarScale_1.SIDEBAR_CHROME.titleFontSize, textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "lg", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", sx: {
+                    "&::after": {
+                        content: '""',
+                        position: "absolute",
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, -50%)",
+                        width: "44px",
+                        height: "44px",
+                    },
+                }, children: overlay ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, color: theme.colors.sidebar.mutedIcon })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14, color: theme.colors.sidebar.mutedIcon })) }))] }));
 };
 const SkeletonMenuRow = ({ toggle }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 1 : 2, py: 2, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "24px", h: "24px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "18px", h: "18px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "0.875rem", w: "80%", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 1 : 2, py: 2, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "24px", h: "24px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "18px", h: "18px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "0.875rem", w: "80%", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
 };
 const AddNewButton = ({ toggle, onClick, overlay }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "md", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: onClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, color: activeAccent.icon }) }), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12.5px", color: "whiteAlpha.900", fontWeight: "medium", children: "Add New" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: onClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, color: activeAccent.icon }) }), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -58,14 +76,14 @@ const deriveInitials = (user) => {
 const UserFooter = ({ user, toggle, overlay }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
-    const avatar = user.avatarUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "26px", borderRadius: "full", bg: theme.colors.primary.opacity[32], color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "10px", fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: "8px", px: "8px", py: overlay ? "10px" : "6px", w: "100%", borderRadius: "md", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.100" }, transition: "background 0.12s", children: [avatar, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "11.5px", fontWeight: 500, color: "whiteAlpha.800", isTruncated: true, children: user.name }), user.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "10px", color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
+    const avatar = user.avatarUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "26px", borderRadius: "full", bg: theme.colors.primary.opacity[32], color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.100" }, transition: "background 0.12s", children: [avatar, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
 };
 // Footer "cell" — one segment of the Collapse | Hide/Show control.
 const ControlCell = ({ onClick, ariaLabel, label, accent, children }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "10px", py: "14px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: "background 0.15s", children: [children, label && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "11.5px", color: accent ? activeAccent.label : theme.colors.sidebar.mutedLabel, fontWeight: "medium", children: label }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "10px", py: "14px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: "background 0.15s", children: [children, label && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, color: accent ? activeAccent.label : theme.colors.sidebar.mutedLabel, fontWeight: "medium", children: label }))] }));
 };
 // Collapse (mini-rail) sits next to the Hide/Show navbar-mode toggle. In the
 // desktop mobile-nav overlay only "Show" (return to the docked sidebar) is shown;
@@ -74,19 +92,20 @@ const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggle
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const iconColor = theme.colors.sidebar.mutedIcon;
-    const shell = (children) => ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "10px 6px", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { display: "flex", gap: "0", borderRadius: "lg", overflow: "hidden", border: "1px solid", borderColor: "whiteAlpha.100", bg: "whiteAlpha.50", sx: { "& > * + *": { borderLeft: "1px solid", borderColor: "whiteAlpha.100" } }, children: children }) }));
+    const shell = (children) => ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, p: "10px 6px", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { display: "flex", gap: "0", borderRadius: "lg", overflow: "hidden", border: "1px solid", borderColor: theme.colors.sidebar.divider, bg: "whiteAlpha.50", sx: { "& > * + *": { borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider } }, children: children }) }));
     if (overlay) {
         // Pure below-lg overlay (no manual nav-mode switch) → no footer control.
         if (!mobileNav || !onToggleMobileNav)
             return null;
         return shell((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, label: "Show", accent: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { size: 14, color: activeAccent.icon }) }));
     }
-    return shell((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRightToLine, { size: 14, color: iconColor })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && ((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, label: toggle ? undefined : "Hide", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 14, color: iconColor }) }))] }));
+    return shell((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRightToLine, { size: 14, color: iconColor })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && ((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, ariaLabel: toggle ? "Show sidebar in overlay mode" : undefined, label: toggle ? undefined : "Hide", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 14, color: iconColor }) }))] }));
 };
 // --- Main Sidebar component ---
 function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, peekOpen = false, onPeekEnd, }) {
     var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const scrollContainerId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
     // Below `lg` the sidebar renders as a slide-in overlay above the content; at
     // `lg` and up it is inline (the original behaviour, untouched).
     const belowLg = (_a = (0, react_2.useBreakpointValue)({ base: true, lg: false }, { ssr: false })) !== null && _a !== void 0 ? _a : false;
@@ -104,6 +123,8 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
         onPeekEnd === null || onPeekEnd === void 0 ? void 0 : onPeekEnd();
         onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
     };
+    const closeOverlayRef = (0, react_1.useRef)(closeOverlay);
+    closeOverlayRef.current = closeOverlay;
     // In overlay mode, navigating to a leaf item auto-closes the overlay (content
     // returns to full-screen). Parent items with a submenu only expand, so they
     // must NOT close it.
@@ -141,11 +162,11 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
             return;
         const onKey = (e) => {
             if (e.key === "Escape")
-                closeOverlay();
+                closeOverlayRef.current();
         };
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
-    }, [isOverlayOpen, onMobileClose]);
+    }, [isOverlayOpen]);
     // `role="dialog" aria-modal` only promises modality — focus has to be moved in and
     // kept in, or Tab walks straight into the content behind the scrim.
     const panelRef = (0, react_1.useRef)(null);
@@ -228,7 +249,7 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
         : isOverlayOpen
             ? "translateX(0)"
             : "translateX(-100%)";
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileNav ? "block" : { base: "block", lg: "none" }, position: "fixed", inset: 0, bg: "blackAlpha.600", zIndex: Z_SCRIM, opacity: isOverlayOpen ? 1 : 0, visibility: isOverlayOpen ? "visible" : "hidden", transition: "opacity 0.28s ease, visibility 0.28s ease", onClick: closeOverlay, "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: panelRef, onKeyDown: trapTab, tabIndex: overlay ? -1 : undefined, outline: "none", position: mobileNav ? "fixed" : { base: "fixed", lg: "sticky" }, top: 0, left: mobileNav ? 0 : { base: 0, lg: "auto" }, bottom: mobileNav ? 0 : { base: 0, lg: "auto" }, zIndex: mobileNav ? Z_PANEL : { base: Z_PANEL, lg: "auto" }, height: "100vh", maxW: mobileNav ? "88vw" : { base: "88vw", lg: "none" }, transform: mobileNav ? baseTransform : { base: baseTransform, lg: "none" }, transition: mobileNav
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileNav ? "block" : { base: "block", lg: "none" }, position: "fixed", inset: 0, ...(0, overlay_styles_1.overlayScrimStyles)(theme.colors), zIndex: Z_SCRIM, opacity: isOverlayOpen ? 1 : 0, visibility: isOverlayOpen ? "visible" : "hidden", transition: "opacity 0.28s ease, visibility 0.28s ease", sx: { [motion_1.REDUCED_MOTION_QUERY]: { transition: "none" } }, onClick: closeOverlay, "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: panelRef, onKeyDown: trapTab, tabIndex: overlay ? -1 : undefined, outline: "none", position: mobileNav ? "fixed" : { base: "fixed", lg: "sticky" }, top: 0, left: mobileNav ? 0 : { base: 0, lg: "auto" }, bottom: mobileNav ? 0 : { base: 0, lg: "auto" }, zIndex: mobileNav ? Z_PANEL : { base: Z_PANEL, lg: "auto" }, maxW: mobileNav ? "88vw" : { base: "88vw", lg: "none" }, transform: mobileNav ? baseTransform : { base: baseTransform, lg: "none" }, transition: mobileNav
                     ? dragging
                         ? "none"
                         : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)"
@@ -236,15 +257,12 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
                         base: dragging
                             ? "none"
                             : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)",
-                        lg: "all 0.5s",
-                    }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: "whiteAlpha.100", role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !isOverlayOpen ? { inert: "" } : {}), sx: { touchAction: overlay ? "pan-y" : "auto" }, onMouseLeave: overlayPeeking ? onPeekEnd : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { width: mobileNav
+                        lg: (0, motion_2.transitionFor)(["box-shadow"], "base"),
+                    }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: theme.colors.sidebar.divider, role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !isOverlayOpen ? { inert: "" } : {}), sx: {
+                    ...viewportHeight_1.fullViewportHeight,
+                    touchAction: overlay ? "pan-y" : "auto",
+                    [motion_1.REDUCED_MOTION_QUERY]: { "&, & *": { transition: "none", animation: "none" } },
+                }, onMouseLeave: overlayPeeking ? onPeekEnd : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { width: mobileNav
                             ? OVERLAY_WIDTH
-                            : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, transition: `width 0.26s ${PANEL_EASE}`, display: "flex", flexDirection: "column", justifyContent: "space-between", sx: { "@media (prefers-reduced-motion: reduce)": { transition: "none" } }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100vh", children: [(0, jsx_runtime_1.jsx)(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "sidebar-scroll-container", flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", p: "8px 6px", css: {
-                                        ...Sidebar_1.FlexCss,
-                                        transition: "all 0.3s ease",
-                                        // (a) larger touch targets for menu rows in overlay mode
-                                        ...(overlay
-                                            ? { "[data-menu-id]": { paddingTop: "10px", paddingBottom: "10px" } }
-                                            : {}),
-                                    }, children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => ((0, jsx_runtime_1.jsx)(SkeletonMenuRow, { toggle: effToggle }, i)))) : ((0, jsx_runtime_1.jsx)(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu })) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flexShrink: 0, children: [!isDisableAddNew && ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px", children: (0, jsx_runtime_1.jsx)(AddNewButton, { toggle: effToggle, onClick: onAddNewClick, overlay: overlay }) })), (0, jsx_runtime_1.jsx)(OtherApps_1.default, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && (0, jsx_runtime_1.jsx)(UserFooter, { user: user, toggle: effToggle, overlay: overlay }), (0, jsx_runtime_1.jsx)(FooterControls, { toggle: effToggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), secondaryItems.length > 0 && ((0, jsx_runtime_1.jsx)(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: effToggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon })), overlay && ((0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileOpen ? "block" : "none", position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: "4px", h: "42px", borderRadius: "full", bg: "whiteAlpha.300", "aria-hidden": "true" }))] })] }));
+                            : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, transition: `width 0.26s ${PANEL_EASE}`, display: "flex", flexDirection: "column", justifyContent: "space-between", sx: { "@media (prefers-reduced-motion: reduce)": { transition: "none" } }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100%", children: [(0, jsx_runtime_1.jsx)(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: scrollContainerId, flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: (0, Sidebar_1.cssForScrollBar)(theme), children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => ((0, jsx_runtime_1.jsx)(SkeletonMenuRow, { toggle: effToggle }, i)))) : ((0, jsx_runtime_1.jsx)(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu, overlay: overlay, containerId: scrollContainerId })) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flexShrink: 0, children: [!isDisableAddNew && ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", children: (0, jsx_runtime_1.jsx)(AddNewButton, { toggle: effToggle, onClick: onAddNewClick, overlay: overlay }) })), (0, jsx_runtime_1.jsx)(OtherApps_1.default, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && (0, jsx_runtime_1.jsx)(UserFooter, { user: user, toggle: effToggle, overlay: overlay }), (0, jsx_runtime_1.jsx)(FooterControls, { toggle: effToggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), secondaryItems.length > 0 && ((0, jsx_runtime_1.jsx)(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: effToggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon })), overlay && ((0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileOpen ? "block" : "none", position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: "4px", h: "42px", borderRadius: "full", bg: theme.colors.sidebar.mutedIcon, "aria-hidden": "true" }))] })] }));
 }

package/dist/Components/SideBar/SideBarProps.d.ts

@@ -1,4 +1,5 @@
 import type { ElementType } from "react";
+/** Footer identity block (UserFooter); avatar falls back to initials derived from name when absent. */
 export type SidebarUser = {
     name: string;
     role?: string;
@@ -6,74 +7,78 @@ export type SidebarUser = {
     initials?: string;
     onClick?: () => void;
 };
+/** Docked/collapsible left rail with its own responsive overlay — not NavigationBar (top bar) or WorkspaceWindow (floating panel). */
 export type SidebarProps = {
     menus: MenuProps[];
+    /** Matched against each menu's `title` first, then `id` — a title that collides with another menu's `id` wins silently. */
     activeMenu: string | number;
     handleMenuClick?: (menu: MenuProps) => void;
     handleSecondaryNavClick?: (menu: MenuProps) => void;
     toggle: boolean;
     changeToggle: () => void;
+    /** Falls back to a rendered brand mark (DefaultLogo) tinted by primary color when omitted. */
     logo?: string;
     companyName: string;
     companySubtitle?: string;
+    /** Footer identity block is omitted entirely (not just simplified) when this is not provided. */
     user?: SidebarUser;
+    /** true hides the Add New row completely, rather than disabling it. */
     isDisableAddNew?: boolean;
     onAddNewClick?: () => void;
+    /** @deprecated Dead — threaded down to MenuItemBox but never read there; no known consumer usage. */
     selectedSubMenu?: string | null;
     selectedSecondaryItem?: string | number | null;
+    /** Shows skeleton rows instead of MenuItems; header and footer render normally. */
     isLoading?: boolean;
+    /** Defaults to 15 when isLoading is true; ignored otherwise. */
     loadingLines?: number;
+    /** Not a direct render switch — on change it calls `changeToggle()` once; nothing collapses unless that updates `toggle`. */
     open?: boolean;
+    /** Legacy "Switch app" grid — AppSwitcher supersedes it; avoid wiring both into one shell. */
     otherApps?: OtherAppsProps['otherApps'];
-    /**
-     * Below the `lg` breakpoint the sidebar renders as a slide-in overlay above
-     * the content (it does not occupy layout space). `mobileOpen` controls that
-     * overlay's visibility; it has no effect at `lg` and up, where the sidebar is
-     * always inline. Wire it to the NavigationBar hamburger (`onSideBarToggole`).
-     */
+    /** Controls the overlay's visibility below `lg`; no effect once inline at `lg`+. Wire to NavigationBar's `onSideBarToggole`. */
     mobileOpen?: boolean;
     /** Called when the overlay is dismissed (backdrop click, Esc, close button, or swipe). */
     onMobileClose?: () => void;
-    /**
-     * Forces the "mobile navbar" presentation at ANY width: the sidebar leaves the
-     * inline layout and behaves as the slide-in overlay (hamburger + full-screen
-     * content), exactly like below `lg` — but on big screens too. This is a layout
-     * switch, not a close: toggling it never hides the navigation, it only changes
-     * how it is presented. When `false` the breakpoint alone decides (inline at
-     * `lg`+, overlay below `lg`).
-     */
+    /** Forces overlay presentation at any width — a layout switch, not a close; never hides navigation. */
     mobileNav?: boolean;
-    /**
-     * Handler for the footer Hide/Show control that flips `mobileNav`. Render the
-     * control only when provided. Wire it so entering mobile-nav also opens the
-     * overlay (keeps the sidebar visible) and leaving it returns to the docked
-     * sidebar — see the playground for the canonical wiring.
-     */
+    /** Backs the footer Hide/Show control; render it only when this is provided. */
     onToggleMobileNav?: () => void;
-    /**
-     * Overlay peek: the sidebar shows without pinning, and closes itself when the pointer
-     * leaves the panel. Wire to `NavigationBar`'s `onSideBarPeek`.
-     */
+    /** Shows the sidebar without pinning — closes on pointer-leave. Wire to NavigationBar's `onSideBarPeek`. */
     peekOpen?: boolean;
     onPeekEnd?: () => void;
 };
+/** One nav item; `subMenu` renders inline (expand/collapse), `secondaryItems` opens a separate SecondaryBar instead. */
 export type MenuProps = {
     id: string | number;
     title: string;
     icon?: ElementType;
+    /** Ignored when subMenu is non-empty — the row becomes a toggle button instead of a link. */
     url: string;
+    /** Blocks the click handler and dims the row; wins over `disabled` when both are set. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field. */
     disabled?: boolean;
+    /** Shows a lock icon only — does not block the click handler; pair with `isDisabled` to prevent it. */
     locked?: boolean;
+    /** Runtime also accepts a bare number/string (legacy shorthand) though the type only declares the object shape. */
     badge?: {
+        /** Also triggers the small red dot on the icon when the rail is collapsed. */
         count?: number;
+        /** Chakra colorScheme name; defaults to "teal". */
         color?: string;
+        /** Chakra borderRadius value; defaults to "full". */
         radius?: string | number;
+        /** Chakra Badge variant; defaults to "subtle". */
         variant?: string;
     };
     subMenu?: MenuProps[];
+    /** Non-empty on the active menu auto-collapses the main rail and renders a SecondaryBar, regardless of the `toggle` prop. */
     secondaryItems?: MenuProps[];
+    /** First item with a new value renders a section label plus divider; items must be pre-sorted by group. */
     group?: string;
 };
+/** Props for the internal MenuItems renderer — a narrowed slice of SidebarProps. */
 export type RenderMenuType = {
     menus: MenuProps[];
     activeMenu: string | number;
@@ -81,26 +86,44 @@ export type RenderMenuType = {
     toggle: boolean;
     selectedSubMenu?: string | null;
     selectedSecondaryItem?: string | number | null;
+    /** Touch (overlay) presentation — grows row height to a 48px touch target. */
+    overlay?: boolean;
+    /** The scroll container's own id, read back by the auto-scroll-into-view effect. */
+    containerId: string;
 };
+/** Secondary flyout panel props; `defaultCollapsed` only seeds initial state, then the panel self-manages it. */
 export type SecondaryBarProps = {
     items?: MenuProps[];
+    /** Defaults to true (collapsed) when omitted. */
     defaultCollapsed?: boolean;
+    /** Defaults to "3.5rem". */
     collapsedWidth?: string | number;
+    /** Defaults to "10rem". */
     expandedWidth?: string | number;
+    /** Drill-down title size. Defaults to the shared sidebar row size (13px). */
     headerFontSize?: string;
+    /** Row label size. Defaults to the shared sidebar row size (13px). */
     itemFontSize?: string;
+    /** Matched by string equality against either the item's id or title, whichever matches. */
     selected?: string | number | null;
     onItemClick?: (item: MenuProps) => void;
+    /** Also used as the collapsed-state tooltip label. */
     title?: string;
+    /** Shown only in the expanded header — hidden entirely while collapsed. */
     icon?: ElementType;
 };
+/** "Switch app" footer grid; becomes hover popovers when the sidebar is collapsed. */
 export type OtherAppsProps = {
     toggle: boolean;
     otherApps: {
+        /** Used as the React list key — must be unique among otherApps entries. */
         name: string;
+        /** Fills the fallback dot (no icon) and its glow — ignored when `icon` is provided. */
         color: string;
+        /** Shown only in the collapsed-state hover flyout, never in the expanded grid cell. */
         description?: string;
         onClick: () => void;
+        /** A pre-rendered ReactNode, unlike MenuProps.icon (a component reference). */
         icon?: React.ReactNode;
     }[];
 };

package/dist/Components/SideBar/components/MenuItemBox.d.ts

@@ -8,6 +8,8 @@ interface Props {
     selectedSubMenu?: string | null;
     isOpen?: boolean;
     onToggle?: (menu: MenuProps, clickY?: number) => void;
+    /** Overlay (touch) presentation — rows grow to a 48px touch target instead of the 32px desktop row. */
+    overlay?: boolean;
 }
 declare const MenuItemBox: React.FC<Props>;
 export default MenuItemBox;

package/dist/Components/SideBar/components/MenuItemBox.js

@@ -4,47 +4,60 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const MenuPopoverContent_1 = __importDefault(require("./MenuPopoverContent"));
+const menuDisabled_1 = require("../menuDisabled");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const sidebarAccentColors_1 = require("../sidebarAccentColors");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const sidebarAccent_1 = require("../../../Theme/tokens/builders/sidebarAccent");
+const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
 const TextTruncation_1 = __importDefault(require("./TextTruncation"));
+const sidebarId_1 = require("../sidebarId");
+const sidebarScale_1 = require("../sidebarScale");
 /**
  * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
  * cmd/ctrl-click for a new tab, shift for a window, middle-click. Only a plain left click is
  * routed through the in-app handler.
  */
 const isBrowserNavigationGesture = (e) => e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
-const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, }) => {
-    var _a, _b, _c, _d, _e, _f;
+const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, overlay = false, }) => {
+    var _a, _b, _c, _d, _e;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
-    const { title, icon, disabled, locked, badge, subMenu, url } = menu;
+    // Never the raw label — keeps this id unique across multiple mounted SideBars too.
+    const reactId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
+    const { title, icon, locked, badge, subMenu, url } = menu;
+    // `locked` blocks interaction the same as `disabled` — a locked item showing the padlock icon
+    // but still fully clickable was a real gotcha (see COMPONENT-GOTCHAS.md).
+    const isBlocked = (0, menuDisabled_1.menuDisabled)(menu) || locked;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
-    const submenuPanelId = `submenu-${String((_a = menu.id) !== null && _a !== void 0 ? _a : title)}`;
+    const submenuPanelId = `submenu-${reactId}`;
+    const rowHeight = overlay ? sidebarScale_1.SIDEBAR_ROW.overlayHeight : sidebarScale_1.SIDEBAR_ROW.height;
     // A submenu parent only expands, so it is a button; every other row navigates.
     // Cast: Chakra narrows `as` unions to their *shared* props, which drops `href`.
     const rowAs = (hasSubMenu ? "button" : "a");
     const badgeConfig = typeof badge === "object" && badge !== null ? badge : null;
-    const badgeValue = (_b = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.count) !== null && _b !== void 0 ? _b : (typeof badge !== "object" ? badge : undefined);
-    const hasSubmenuBadge = (_c = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => {
+    const badgeValue = (_a = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.count) !== null && _a !== void 0 ? _a : (typeof badge !== "object" ? badge : undefined);
+    const hasSubmenuBadge = (_b = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => {
         var _a;
         const subCfg = typeof sub.badge === "object" && sub.badge !== null
             ? sub.badge
             : null;
         const value = (_a = subCfg === null || subCfg === void 0 ? void 0 : subCfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
         return value != null;
-    })) !== null && _c !== void 0 ? _c : false;
+    })) !== null && _b !== void 0 ? _b : false;
     const isChildActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => sub.id === activeMenu);
     const isParentActive = activeMenu === menu.id;
     const isAnyActive = isParentActive || isChildActive;
     const handleToggleSubMenu = (e) => {
-        if (!disabled && hasSubMenu) {
+        if (!isBlocked && hasSubMenu) {
             onToggle === null || onToggle === void 0 ? void 0 : onToggle(menu, e === null || e === void 0 ? void 0 : e.clientY);
             return;
         }
-        if (!disabled)
+        if (!isBlocked)
             handleClick === null || handleClick === void 0 ? void 0 : handleClick(menu);
     };
     // Pill-style nav item. The fill is a white overlay, not a brand tint: the sidebar is a
@@ -53,82 +66,89 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
     // light, whose primary[500] IS the sidebar colour. Brand identity stays in the accent bar
     // and icon below. See interactionStates.test.ts.
     const commonStyles = {
-        // `data-group` rather than `role="group"`: the row is now a real link/button, whose
-        // implicit role must not be overridden. Chakra's `_groupHover` accepts either.
+        // `data-group` rather than `role="group"`: Chakra's `_groupHover` accepts either.
         "data-group": "",
-        display: "block",
+        display: "flex",
+        alignItems: "center",
         textAlign: "left",
         textDecoration: "none",
         w: "100%",
-        borderRadius: "md",
+        h: rowHeight,
+        borderRadius: "lg",
         px: "10px",
-        py: "7px",
         fontWeight: "medium",
         border: "none",
         borderLeft: "2px solid",
         borderLeftColor: isAnyActive ? theme.colors.sidebar.activeIcon : "transparent",
         backgroundColor: isAnyActive ? "whiteAlpha.300" : "transparent",
-        color: disabled ? "whiteAlpha.400" : "whiteAlpha.700",
-        _hover: disabled
+        color: theme.colors.sidebar.mutedIcon,
+        _hover: isBlocked
             ? {}
             : {
                 backgroundColor: isAnyActive ? "whiteAlpha.400" : "whiteAlpha.200",
             },
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.6 : 1,
+        cursor: isBlocked ? "not-allowed" : "pointer",
+        opacity: isBlocked ? 0.6 : 1,
         transition: "background 0.12s",
     };
-    const buttonContent = ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, fontSize: "1rem", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isAnyActive ? undefined : { color: "white" }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default
+    const buttonContent = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default
                     // open={isOpen}
                     , { 
                         // open={isOpen}
-                        fontSize: "13px", lineHeight: "1", flex: "1", color: isAnyActive ? activeAccent.label : "whiteAlpha.900", fontWeight: isAnyActive ? 600 : 500, _groupHover: isAnyActive ? undefined : { color: "white" }, children: title }))] }), !toggle && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "0.375rem", children: [(() => {
+                        fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, lineHeight: "1", flex: "1", color: isAnyActive ? activeAccent.label : theme.colors.white, fontWeight: isAnyActive ? 600 : 500, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, children: title }))] }), !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.375rem", children: [(() => {
                         var _a, _b, _c;
                         const value = badgeValue;
+                        if (value == null)
+                            return null;
                         const colorScheme = (_a = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.color) !== null && _a !== void 0 ? _a : "teal";
                         const radius = (_b = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.radius) !== null && _b !== void 0 ? _b : "full";
                         const variant = (_c = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.variant) !== null && _c !== void 0 ? _c : "subtle";
-                        return value != null ? ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
-                    })(), locked && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" }), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon }))] }))] }));
+                        const tone = (0, tone_1.resolveSoftTone)(theme.colors, (0, paletteFromTheme_1.scaleFor)(theme.colors, colorScheme), (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500]));
+                        return ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: variant, borderRadius: radius, children: value }));
+                    })(), locked && (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))] }))] }));
     if (toggle) {
         // Collapsed sidebar: show Popover
-        return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-label": title, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": disabled ? true : undefined, onClick: (e) => {
+        return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-label": title, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": isBlocked ? true : undefined, onClick: (e) => {
                             if (!hasSubMenu && url && isBrowserNavigationGesture(e))
                                 return;
                             e.preventDefault();
                             handleToggleSubMenu(e);
-                        }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }) }), (0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500, children: (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: "0.625rem", color: "white", children: (0, jsx_runtime_1.jsx)(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
+                        }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title), children: buttonContent }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: isBlocked ? "not-allowed" : "pointer", zIndex: 1500, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.625rem", color: theme.colors.white, children: (0, jsx_runtime_1.jsx)(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-expanded": hasSubMenu ? !!isOpen : undefined, "aria-controls": hasSubMenu ? submenuPanelId : undefined, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": disabled ? true : undefined, onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-expanded": hasSubMenu ? !!isOpen : undefined, "aria-controls": hasSubMenu ? submenuPanelId : undefined, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": isBlocked ? true : undefined, onClick: (e) => {
                     if (!hasSubMenu && url && isBrowserNavigationGesture(e))
                         return;
                     e.preventDefault();
                     handleToggleSubMenu(e);
-                }, "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), children: buttonContent }), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { id: submenuPanelId, "data-collapse": "true", "data-menu-id": String((_f = menu.id) !== null && _f !== void 0 ? _f : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
+                }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Box, { id: submenuPanelId, "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
                         transition: "opacity 0.28s ease, transform 0.28s ease",
                         opacity: isOpen ? 1 : 0,
                         transform: isOpen ? "translateY(0)" : "translateY(-6px)",
                     }, children: subMenu.map((sub, sIdx) => {
                         var _a, _b, _c;
                         const isSubActive = activeMenu === sub.id;
-                        return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": sub.disabled ? true : undefined, textDecoration: "none", py: "5px", pl: "30px", pr: "10px", borderRadius: "md", fontSize: "11.5px", backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: sub.disabled ? 0.6 : 1, cursor: sub.disabled ? "not-allowed" : "pointer", pointerEvents: sub.disabled ? "none" : "auto", onClick: (e) => {
+                        const isSubBlocked = (0, menuDisabled_1.menuDisabled)(sub) || sub.locked;
+                        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", h: sidebarScale_1.SIDEBAR_ROW.subHeight, pl: "30px", pr: "10px", borderRadius: "lg", fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: isSubBlocked ? 0.6 : 1, cursor: isSubBlocked ? "not-allowed" : "pointer", pointerEvents: isSubBlocked ? "none" : "auto", onClick: (e) => {
                                 if (sub.url && isBrowserNavigationGesture(e))
                                     return;
                                 e.preventDefault();
-                                if (!sub.disabled)
+                                if (!isSubBlocked)
                                     handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
-                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : "whiteAlpha.500", _groupHover: isSubActive ? undefined : { bg: "whiteAlpha.700" }, transition: "background 0.12s" })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: "12px", fontWeight: isSubActive ? 600 : 500, lineHeight: "1", 
+                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", 
                                             // open={isOpen}
-                                            color: isSubActive ? "whiteAlpha.900" : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" })) : (() => {
+                                            color: isSubActive ? theme.colors.white : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
                                     var _a, _b, _c, _d;
                                     const subCfg = typeof sub.badge === "object" && sub.badge !== null
                                         ? sub.badge
                                         : null;
                                     const value = (_a = subCfg === null || subCfg === void 0 ? void 0 : subCfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
+                                    if (value == null)
+                                        return null;
                                     const colorScheme = (_b = subCfg === null || subCfg === void 0 ? void 0 : subCfg.color) !== null && _b !== void 0 ? _b : "teal";
                                     const radius = (_c = subCfg === null || subCfg === void 0 ? void 0 : subCfg.radius) !== null && _c !== void 0 ? _c : "full";
                                     const variant = (_d = subCfg === null || subCfg === void 0 ? void 0 : subCfg.variant) !== null && _d !== void 0 ? _d : "subtle";
-                                    return value != null ? ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
+                                    const tone = (0, tone_1.resolveSoftTone)(theme.colors, (0, paletteFromTheme_1.scaleFor)(theme.colors, colorScheme), (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500]));
+                                    return ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: variant, borderRadius: radius, children: value }));
                                 })()] }, `${String((_c = (_b = sub.id) !== null && _b !== void 0 ? _b : sub.title) !== null && _c !== void 0 ? _c : sIdx)}-${sIdx}`));
                     }) }) }))] }));
 };