@seedgrid/fe-components 2026.3.19 → 2026.3.26

package/dist/layout/SgMenu.js

@@ -9,6 +9,8 @@ import { SgAutocomplete } from "../inputs/SgAutocomplete";
 import { SgCard } from "./SgCard";
 import { useSgDockLayout } from "./SgDockLayout";
 import { useHasSgEnvironmentProvider, useSgPersistence } from "../environment/SgEnvironmentProvider";
+import { t, useComponentsI18n } from "../i18n";
+import { buildMenuMaps, collectMenuSearchEntries, collectParentChain, computeActiveSets, filterMenuNodes, flattenVisibleNodes, mergeExpandedIdsForActivePath, resolveEffectiveActiveId, resolveExpandedIdsToggle, resolveHorizontalDockAlign, resolveMegaMenuActiveNode, resolveMegaMenuHoverActiveId, resolveMegaMenuInteraction, resolveMenuAutocompleteItems, resolveMenuHintPosition as resolveMenuHintPositionHelper, resolveMenuKeyboardAction, resolveMenuLayoutState, resolveMenuNodeActionIntent, resolveMenuSearchSelectionState, resolveTieredActiveState, resolveTieredHoverIntent, resolveTieredNodeClickIntent } from "./menu-logic";
 const ROOT_PARENT_ID = "__sg_menu_root__";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
@@ -66,81 +68,6 @@ function useControllableState(value, defaultValue, onChange) {
     }, [isControlled, onChange]);
     return [current, setValue];
 }
-function buildMenuMaps(menu) {
-    const parentById = new Map();
-    const nodeById = new Map();
-    const childrenByParent = new Map();
-    const firstByUrl = new Map();
-    const walk = (nodes, parentId) => {
-        childrenByParent.set(parentId, nodes.map((node) => node.id));
-        for (const node of nodes) {
-            parentById.set(node.id, parentId);
-            nodeById.set(node.id, node);
-            if (node.url && !firstByUrl.has(node.url))
-                firstByUrl.set(node.url, node.id);
-            if (node.children?.length)
-                walk(node.children, node.id);
-        }
-    };
-    walk(menu, ROOT_PARENT_ID);
-    return { parentById, nodeById, childrenByParent, firstByUrl };
-}
-function filterMenuNodes(nodes, query) {
-    const q = query.trim().toLowerCase();
-    if (!q)
-        return nodes;
-    const walk = (list) => {
-        const out = [];
-        for (const node of list) {
-            const selfMatch = node.label.toLowerCase().includes(q);
-            const children = node.children?.length ? walk(node.children) : [];
-            if (selfMatch || children.length > 0) {
-                out.push({
-                    ...node,
-                    children: children.length > 0 ? children : undefined
-                });
-            }
-        }
-        return out;
-    };
-    return walk(nodes);
-}
-function collectMenuSearchEntries(nodes, trail = [], out = []) {
-    for (const node of nodes) {
-        const nextTrail = [...trail, node.label];
-        out.push({
-            id: node.id,
-            label: node.label,
-            path: nextTrail.join(" > "),
-            group: trail[0] ?? node.label
-        });
-        if (node.children?.length)
-            collectMenuSearchEntries(node.children, nextTrail, out);
-    }
-    return out;
-}
-function flattenVisibleNodes(nodes, expandedSet, collapsed, forceExpand, depth = 0, parentId = ROOT_PARENT_ID, out = []) {
-    for (const node of nodes) {
-        out.push({ node, depth, parentId });
-        if (collapsed)
-            continue;
-        const hasChildren = !!node.children?.length;
-        const isOpen = forceExpand || expandedSet.has(node.id);
-        if (hasChildren && isOpen) {
-            flattenVisibleNodes(node.children, expandedSet, collapsed, forceExpand, depth + 1, node.id, out);
-        }
-    }
-    return out;
-}
-function collectParentChain(parentById, id) {
-    const out = [];
-    let current = parentById.get(id);
-    while (current && current !== ROOT_PARENT_ID) {
-        out.push(current);
-        current = parentById.get(current);
-    }
-    return out;
-}
 function firstChars(value, amount = 2) {
     const normalized = value.trim().replace(/\s+/g, " ");
     if (!normalized)
@@ -162,27 +89,6 @@ function sameStringArray(a, b) {
     }
     return true;
 }
-function computeActiveSets(nodes, activeId, activeUrl) {
-    const exact = new Set();
-    const branch = new Set();
-    const walk = (list) => {
-        let found = false;
-        for (const node of list) {
-            const childFound = node.children?.length ? walk(node.children) : false;
-            const selfActive = (activeId ? node.id === activeId : false) ||
-                (activeUrl ? node.url === activeUrl : false);
-            if (selfActive)
-                exact.add(node.id);
-            if (childFound)
-                branch.add(node.id);
-            if (selfActive || childFound)
-                found = true;
-        }
-        return found;
-    };
-    walk(nodes);
-    return { exact, branch };
-}
 function elevationClass(elevation) {
     if (elevation === "sm")
         return "shadow-sm";
@@ -194,7 +100,9 @@ function resolveIcon(node) {
     return node.icon ?? null;
 }
 export function SgMenu(props) {
-    const { id, menu, selection, brand, user, userMenu, menuStyle = "sidebar", menuVariantStyle = "panel", position = "left", density = "comfortable", indent = 16, collapsedWidth = 72, expandedWidth = 280, overlaySize, overlayBackdrop, dockable = false, dockZone, draggable = false, orientationDirection, mode = "multiple", expandedIds: expandedIdsProp, defaultExpandedIds = [], onExpandedIdsChange, collapsed, defaultCollapsed = false, onCollapsedChange, showCollapseButton = false, open, defaultOpen = false, onOpenChange, closeOnNavigate, pinned, defaultPinned = false, onPinnedChange, showPinButton = false, onNavigate, onAction, onItemClick, ariaLabel = "Menu", keyboardNavigation = true, openSubmenuOnHover = false, search, elevation = "none", border = true, className, style, userSectionClassName, userSectionStyle, footer } = props;
+    const i18n = useComponentsI18n();
+    const { id, menu, selection, brand, user, userMenu, menuStyle = "sidebar", menuVariantStyle = "panel", position = "left", density = "comfortable", indent = 16, collapsedWidth = 72, expandedWidth = 280, overlaySize, overlayBackdrop, dockable = false, dockZone, draggable = false, orientationDirection, mode = "multiple", expandedIds: expandedIdsProp, defaultExpandedIds = [], onExpandedIdsChange, collapsed, defaultCollapsed = false, onCollapsedChange, showCollapseButton = false, open, defaultOpen = false, onOpenChange, closeOnNavigate, pinned, defaultPinned = false, onPinnedChange, showPinButton = false, onNavigate, onAction, onItemClick, ariaLabel, keyboardNavigation = true, openSubmenuOnHover = false, search, elevation = "none", border = true, className, style, userSectionClassName, userSectionStyle, footer } = props;
+    const resolvedAriaLabel = ariaLabel ?? t(i18n, "components.menu.ariaLabel");
     const densityCfg = density === "compact"
         ? {
             row: "min-h-8 px-2 py-1 text-xs",
@@ -298,54 +206,47 @@ export function SgMenu(props) {
     const dockDragMovedRef = React.useRef(false);
     const dockHoverZoneRef = React.useRef(null);
     const searchEntries = React.useMemo(() => collectMenuSearchEntries(menu), [menu]);
-    const autocompleteSource = React.useCallback((query) => {
-        const q = query.trim().toLowerCase();
-        const matches = !q
-            ? searchEntries
-            : searchEntries.filter((entry) => entry.label.toLowerCase().includes(q) ||
-                entry.path.toLowerCase().includes(q));
-        return matches.slice(0, 120).map((entry) => ({
-            id: entry.id,
-            label: entry.label,
-            value: entry.path,
-            group: entry.group,
-            data: { nodeId: entry.id, path: entry.path }
-        }));
-    }, [searchEntries]);
+    const autocompleteSource = React.useCallback((query) => resolveMenuAutocompleteItems(searchEntries, query), [searchEntries]);
     const filteredMenu = React.useMemo(() => (searchEnabled ? filterMenuNodes(menu, searchValue) : menu), [menu, searchEnabled, searchValue]);
     const hasSearch = searchEnabled && searchValue.trim().length > 0;
     const effectiveMenuStyle = isCollapsed || hasSearch ? "panel" : resolvedMenuStyle;
-    const resolvedPosition = dockMode && effectiveDockZone
-        ? effectiveDockZone === "right"
-            ? "right"
-            : effectiveDockZone === "left"
-                ? "left"
-                : orientationDirection === "horizontal-right"
-                    ? "right"
-                    : "left"
-        : position;
-    const isHorizontalDockZone = effectiveDockZone === "top" || effectiveDockZone === "bottom";
-    const isVerticalDockZone = effectiveDockZone === "left" || effectiveDockZone === "right";
-    const tieredOpenToLeft = resolvedPosition === "right" ||
-        (isHorizontalDockZone && horizontalDockAlign === "right");
+    const layoutState = React.useMemo(() => resolveMenuLayoutState({
+        dockMode,
+        effectiveDockZone,
+        orientationDirection,
+        position,
+        horizontalDockAlign,
+        isCollapsed,
+        menuStyle,
+        effectiveMenuStyle,
+        pinnedState,
+        expandedWidthCss,
+        collapsedWidthCss
+    }), [
+        collapsedWidthCss,
+        dockMode,
+        effectiveDockZone,
+        effectiveMenuStyle,
+        expandedWidthCss,
+        horizontalDockAlign,
+        isCollapsed,
+        menuStyle,
+        orientationDirection,
+        pinnedState,
+        position
+    ]);
+    const { resolvedPosition, isHorizontalDockZone, isVerticalDockZone, tieredOpenToLeft, isMegaMenuStyle, dockAlign, sidebarWidthCss } = layoutState;
     const hideMenuHint = React.useCallback(() => {
         menuHintAnchorRef.current = null;
         setMenuHint(null);
     }, []);
     const resolveMenuHintPosition = React.useCallback((anchor) => {
-        if (!anchor.target.isConnected)
-            return null;
         const rect = anchor.target.getBoundingClientRect();
-        if (anchor.placement === "right") {
-            return {
-                x: rect.right + 8,
-                y: rect.top + (rect.height / 2)
-            };
-        }
-        return {
-            x: rect.left + (rect.width / 2),
-            y: rect.top - 8
-        };
+        return resolveMenuHintPositionHelper({
+            isConnected: anchor.target.isConnected,
+            rect,
+            placement: anchor.placement
+        });
     }, []);
     const showMenuHint = React.useCallback((target, text, placement = "top") => {
         if (!text)
@@ -427,9 +328,12 @@ export function SgMenu(props) {
     React.useEffect(() => () => {
         clearDockDragVisual();
     }, [clearDockDragVisual]);
-    const effectiveActiveId = selection?.activeId ??
-        (selection?.activeUrl ? maps.firstByUrl.get(selection.activeUrl) : undefined) ??
-        localActiveId;
+    const effectiveActiveId = resolveEffectiveActiveId({
+        activeId: selection?.activeId,
+        activeUrl: selection?.activeUrl,
+        localActiveId,
+        firstByUrl: maps.firstByUrl
+    });
     const effectiveActiveUrl = selection?.activeUrl;
     const activeSets = React.useMemo(() => computeActiveSets(menu, effectiveActiveId, effectiveActiveUrl), [menu, effectiveActiveId, effectiveActiveUrl]);
     React.useEffect(() => {
@@ -439,21 +343,20 @@ export function SgMenu(props) {
         if (chain.length === 0)
             return;
         setExpandedIds((prev) => {
-            const next = Array.from(new Set([...prev, ...chain]));
+            const next = mergeExpandedIdsForActivePath(prev, chain);
             return sameStringArray(prev, next) ? prev : next;
         });
     }, [effectiveActiveId, maps.parentById, setExpandedIds]);
     React.useEffect(() => {
-        if (!effectiveActiveId)
-            return;
-        const parentChain = collectParentChain(maps.parentById, effectiveActiveId).reverse();
-        const activeNode = maps.nodeById.get(effectiveActiveId);
-        const nextTieredPath = [...parentChain];
-        if (activeNode?.children?.length)
-            nextTieredPath.push(activeNode.id);
-        setTieredPath(nextTieredPath);
-        setMegaActiveId(parentChain[0] ?? activeNode?.id ?? menu[0]?.id);
-    }, [effectiveActiveId, maps.nodeById, maps.parentById, menu]);
+        const nextState = resolveTieredActiveState({
+            effectiveActiveId,
+            maps,
+            menu,
+            rootParentId: ROOT_PARENT_ID
+        });
+        setTieredPath(nextState.tieredPath);
+        setMegaActiveId(nextState.megaActiveId);
+    }, [effectiveActiveId, maps, menu]);
     React.useEffect(() => {
         if (effectiveMenuStyle !== "tiered")
             return;
@@ -503,24 +406,14 @@ export function SgMenu(props) {
             hideMenuHint();
     }, [filteredMenu, effectiveMenuStyle, isCollapsed, drawerOpen, pinnedState, hideMenuHint]);
     const toggleExpanded = React.useCallback((nodeId) => {
-        setExpandedIds((prev) => {
-            const next = new Set(prev);
-            const isOpen = next.has(nodeId);
-            if (isOpen) {
-                next.delete(nodeId);
-                return Array.from(next);
-            }
-            if (mode === "accordion") {
-                const parentId = maps.parentById.get(nodeId) ?? ROOT_PARENT_ID;
-                const siblings = maps.childrenByParent.get(parentId) ?? [];
-                for (const siblingId of siblings) {
-                    if (siblingId !== nodeId)
-                        next.delete(siblingId);
-                }
-            }
-            next.add(nodeId);
-            return Array.from(next);
-        });
+        setExpandedIds((prev) => resolveExpandedIdsToggle({
+            currentIds: prev,
+            nodeId,
+            mode,
+            parentById: maps.parentById,
+            childrenByParent: maps.childrenByParent,
+            rootParentId: ROOT_PARENT_ID
+        }));
     }, [maps.childrenByParent, maps.parentById, mode, setExpandedIds]);
     const activateNode = React.useCallback((node) => {
         if (node.disabled)
@@ -615,7 +508,7 @@ export function SgMenu(props) {
                     const zoneEl = dock.getZoneElement(zone);
                     if (zoneEl) {
                         const zoneRect = zoneEl.getBoundingClientRect();
-                        setHorizontalDockAlign(upEvent.clientX < zoneRect.left + zoneRect.width / 2 ? "left" : "right");
+                        setHorizontalDockAlign(resolveHorizontalDockAlign(upEvent.clientX, zoneRect));
                     }
                 }
                 else {
@@ -651,62 +544,30 @@ export function SgMenu(props) {
     const onListKeyDown = React.useCallback((event) => {
         if (!keyboardNavigation)
             return;
-        if (visibleNodes.length === 0)
-            return;
-        const currentIndex = visibleNodes.findIndex((item) => item.node.id === focusedId);
-        const activeIndex = currentIndex >= 0 ? currentIndex : 0;
-        const current = visibleNodes[activeIndex];
-        if (!current)
-            return;
-        const node = current.node;
-        const hasChildren = !!node.children?.length;
-        const isOpen = hasSearch || expandedSet.has(node.id);
-        if (event.key === "ArrowDown") {
-            event.preventDefault();
-            const next = visibleNodes[Math.min(activeIndex + 1, visibleNodes.length - 1)];
-            focusById(next?.node.id);
-            return;
-        }
-        if (event.key === "ArrowUp") {
-            event.preventDefault();
-            const next = visibleNodes[Math.max(activeIndex - 1, 0)];
-            focusById(next?.node.id);
+        const action = resolveMenuKeyboardAction({
+            key: event.key,
+            visibleNodes,
+            focusedId,
+            expandedIds: expandedSet,
+            hasSearch,
+            isCollapsed,
+            parentById: maps.parentById,
+            rootParentId: ROOT_PARENT_ID
+        });
+        if (action.type === "noop")
             return;
-        }
-        if (event.key === "ArrowRight") {
-            if (hasChildren && !isCollapsed && !isOpen && !hasSearch) {
-                event.preventDefault();
-                toggleExpanded(node.id);
-                return;
-            }
-            if (hasChildren && !isCollapsed) {
-                event.preventDefault();
-                const next = visibleNodes[activeIndex + 1];
-                if (next && next.depth > current.depth)
-                    focusById(next.node.id);
-            }
+        event.preventDefault();
+        if (action.type === "focus") {
+            focusById(action.id);
             return;
         }
-        if (event.key === "ArrowLeft") {
-            if (hasChildren && !isCollapsed && isOpen && !hasSearch) {
-                event.preventDefault();
-                toggleExpanded(node.id);
-                return;
-            }
-            event.preventDefault();
-            const parentId = maps.parentById.get(node.id);
-            if (parentId && parentId !== ROOT_PARENT_ID)
-                focusById(parentId);
+        if (action.type === "toggle") {
+            toggleExpanded(action.id);
             return;
         }
-        if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            if (hasChildren && !node.url && !node.onClick && !isCollapsed) {
-                toggleExpanded(node.id);
-                return;
-            }
+        const node = maps.nodeById.get(action.id);
+        if (node)
             activateNode(node);
-        }
     }, [
         activateNode,
         expandedSet,
@@ -715,6 +576,7 @@ export function SgMenu(props) {
         hasSearch,
         isCollapsed,
         keyboardNavigation,
+        maps.nodeById,
         maps.parentById,
         toggleExpanded,
         visibleNodes
@@ -740,12 +602,18 @@ export function SgMenu(props) {
                             }, "data-sg-menu-node": node.id, type: "button", "aria-disabled": disabled || undefined, "aria-current": isExactActive ? "page" : undefined, onFocus: () => setFocusedId(node.id), onClick: () => {
                                 if (disabled)
                                     return;
-                                if (hasChildren && !node.url && !node.onClick && !isCollapsed) {
+                                const intent = resolveMenuNodeActionIntent({
+                                    variant: "panel",
+                                    hasChildren,
+                                    hasActionTarget: Boolean(node.url || node.onClick),
+                                    isCollapsed
+                                });
+                                if (intent === "toggle") {
                                     toggleExpanded(node.id);
                                     return;
                                 }
                                 activateNode(node);
-                            }, className: cn("min-w-0 flex-1 rounded-md", "flex items-center text-left", densityCfg.gap, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: [_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center rounded", densityCfg.icon, iconNode ? "" : "bg-muted text-[10px] font-semibold"), children: iconNode ?? firstChars(node.label, 1) }), !isCollapsed ? _jsx("span", { className: "min-w-0 flex-1 truncate", children: node.label }) : null, !isCollapsed && node.badge !== undefined ? (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground", densityCfg.badge), children: node.badge })) : null] }), !isCollapsed && hasChildren ? (_jsx("button", { type: "button", "aria-label": openNow ? "Collapse group" : "Expand group", onClick: () => !disabled && toggleExpanded(node.id), className: cn("inline-flex size-7 shrink-0 items-center justify-center rounded", "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: openNow ? _jsx(ChevronDown, { className: "size-4" }) : _jsx(ChevronRight, { className: "size-4" }) })) : null] }), !hideChildren && hasChildren && openNow ? (_jsx("div", { className: "mt-0.5 space-y-0.5", children: node.children?.map((child) => renderNode(child, depth + 1)) })) : null] }, node.id));
+                            }, className: cn("min-w-0 flex-1 rounded-md", "flex items-center text-left", densityCfg.gap, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: [_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center rounded", densityCfg.icon, iconNode ? "" : "bg-muted text-[10px] font-semibold"), children: iconNode ?? firstChars(node.label, 1) }), !isCollapsed ? _jsx("span", { className: "min-w-0 flex-1 truncate", children: node.label }) : null, !isCollapsed && node.badge !== undefined ? (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground", densityCfg.badge), children: node.badge })) : null] }), !isCollapsed && hasChildren ? (_jsx("button", { type: "button", "aria-label": openNow ? t(i18n, "components.actions.collapse") : t(i18n, "components.actions.expand"), onClick: () => !disabled && toggleExpanded(node.id), className: cn("inline-flex size-7 shrink-0 items-center justify-center rounded", "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: openNow ? _jsx(ChevronDown, { className: "size-4" }) : _jsx(ChevronRight, { className: "size-4" }) })) : null] }), !hideChildren && hasChildren && openNow ? (_jsx("div", { className: "mt-0.5 space-y-0.5", children: node.children?.map((child) => renderNode(child, depth + 1)) })) : null] }, node.id));
     }, [
         activateNode,
         activeSets.branch,
@@ -770,7 +638,12 @@ export function SgMenu(props) {
         return (_jsxs("button", { type: "button", disabled: node.disabled, "aria-current": isExactActive ? "page" : undefined, onMouseEnter: node.hint ? (event) => showMenuHint(event.currentTarget, node.hint) : undefined, onMouseLeave: node.hint ? hideMenuHint : undefined, onClick: () => {
                 if (node.disabled)
                     return;
-                if (hasChildren && !node.url && !node.onClick)
+                const intent = resolveMenuNodeActionIntent({
+                    variant: "flat",
+                    hasChildren,
+                    hasActionTarget: Boolean(node.url || node.onClick)
+                });
+                if (intent === "noop")
                     return;
                 activateNode(node);
             }, className: cn("flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm transition-colors", isExactActive
@@ -794,27 +667,28 @@ export function SgMenu(props) {
                         return (_jsxs("button", { type: "button", disabled: node.disabled, "aria-current": isExactActive ? "page" : undefined, onMouseEnter: (event) => {
                                 if (node.hint)
                                     showMenuHint(event.currentTarget, node.hint);
-                                if (!openSubmenuOnHover)
-                                    return;
-                                if (!hasChildren) {
-                                    setTieredPath((prev) => prev.slice(0, depth));
-                                    return;
-                                }
-                                setTieredPath((prev) => [...prev.slice(0, depth), node.id]);
+                                setTieredPath((prev) => resolveTieredHoverIntent({
+                                    currentPath: prev,
+                                    depth,
+                                    nodeId: node.id,
+                                    hasChildren,
+                                    openSubmenuOnHover
+                                }) ?? prev);
                             }, onMouseLeave: node.hint ? hideMenuHint : undefined, onClick: () => {
                                 if (node.disabled)
                                     return;
+                                const nextState = resolveTieredNodeClickIntent({
+                                    currentPath: tieredPath,
+                                    depth,
+                                    nodeId: node.id,
+                                    hasChildren,
+                                    hasActionTarget: Boolean(node.url || node.onClick)
+                                });
                                 if (hasChildren) {
-                                    const isOpenAtDepth = tieredPath[depth] === node.id;
-                                    setTieredPath((prev) => {
-                                        const base = prev.slice(0, depth);
-                                        return isOpenAtDepth ? base : [...base, node.id];
-                                    });
-                                    if (isOpenAtDepth)
-                                        return;
-                                    if (!node.url && !node.onClick)
-                                        return;
+                                    setTieredPath(nextState.nextPath);
                                 }
+                                if (!nextState.shouldActivateNode)
+                                    return;
                                 activateNode(node);
                             }, className: cn("flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm transition-colors", isExactActive ? "bg-primary/15 text-primary" : isOpen ? "bg-muted/70" : "hover:bg-muted/60", node.disabled ? "cursor-not-allowed opacity-55" : ""), children: [_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center rounded", densityCfg.icon, iconNode ? "" : "bg-muted text-[10px] font-semibold"), children: iconNode ?? firstChars(node.label, 1) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: node.label }), hasChildren ? (tieredOpenToLeft ? (_jsx(ChevronLeft, { className: "size-4 shrink-0 text-muted-foreground" })) : (_jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground" }))) : null] }, node.id));
                     }) }), activeNode?.children?.length
@@ -832,13 +706,13 @@ export function SgMenu(props) {
     ]);
     const renderMegaColumns = React.useCallback((nodes) => {
         if (!nodes.length) {
-            return _jsx("div", { className: "text-sm text-muted-foreground", children: "No items found." });
+            return _jsx("div", { className: "text-sm text-muted-foreground", children: t(i18n, "components.menu.empty") });
         }
         return (_jsx("div", { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: nodes.map((group) => (_jsx("div", { className: "space-y-3", children: group.children?.length ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-base font-semibold", children: group.label }), _jsx("div", { className: "space-y-1", children: group.children.map((item) => item.children?.length ? (_jsxs("div", { className: "space-y-1 pt-1", children: [_jsx("p", { className: "text-sm font-semibold", children: item.label }), _jsx("div", { className: "space-y-1 pl-1", children: item.children.map((leaf) => renderFlatAction(leaf, "px-1.5 py-1.5 text-sm")) })] }, item.id)) : (renderFlatAction(item, "px-1.5 py-1.5 text-sm"))) })] })) : (renderFlatAction(group, "px-1.5 py-1.5 text-sm")) }, group.id))) }));
     }, [renderFlatAction]);
     const renderMenuTree = (items) => {
         if (items.length === 0) {
-            return _jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: "No items found." });
+            return _jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: t(i18n, "components.menu.empty") });
         }
         if (effectiveMenuStyle === "panel") {
             return _jsx("div", { className: "space-y-0.5", children: items.map((node) => renderNode(node, 0)) });
@@ -846,8 +720,7 @@ export function SgMenu(props) {
         if (effectiveMenuStyle === "tiered") {
             return _jsx("div", { className: "relative min-h-[120px]", children: renderTieredLevels(items, 0) });
         }
-        const activeMegaNode = items.find((node) => node.id === megaActiveId) ??
-            items[0];
+        const activeMegaNode = resolveMegaMenuActiveNode(items, megaActiveId);
         if (effectiveMenuStyle === "mega-horizontal") {
             return (_jsxs("div", { className: "rounded-md border border-border bg-background", children: [_jsx("div", { className: "flex flex-wrap items-center gap-1 border-b border-border p-1", children: items.map((node) => {
                             const hasChildren = !!node.children?.length;
@@ -856,15 +729,24 @@ export function SgMenu(props) {
                             return (_jsxs("button", { type: "button", disabled: node.disabled, onMouseEnter: (event) => {
                                     if (node.hint)
                                         showMenuHint(event.currentTarget, node.hint);
-                                    if (hasChildren)
-                                        setMegaActiveId(node.id);
+                                    const nextMegaActiveId = resolveMegaMenuHoverActiveId({
+                                        nodeId: node.id,
+                                        hasChildren
+                                    });
+                                    if (nextMegaActiveId)
+                                        setMegaActiveId(nextMegaActiveId);
                                 }, onMouseLeave: node.hint ? hideMenuHint : undefined, onClick: () => {
                                     if (node.disabled)
                                         return;
-                                    if (hasChildren) {
-                                        setMegaActiveId(node.id);
-                                        return;
+                                    const nextState = resolveMegaMenuInteraction({
+                                        nodeId: node.id,
+                                        hasChildren
+                                    });
+                                    if (nextState.nextMegaActiveId) {
+                                        setMegaActiveId(nextState.nextMegaActiveId);
                                     }
+                                    if (!nextState.shouldActivateNode)
+                                        return;
                                     activateNode(node);
                                 }, className: cn("inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors", active ? "bg-muted/80 text-foreground" : "hover:bg-muted/60", node.disabled ? "cursor-not-allowed opacity-55" : ""), children: [iconNode ? (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", densityCfg.icon), children: iconNode })) : null, _jsx("span", { className: "truncate", children: node.label }), hasChildren ? _jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground" }) : null] }, node.id));
                         }) }), _jsx("div", { className: "p-4", children: renderMegaColumns(activeMegaNode?.children ?? []) })] }));
@@ -876,15 +758,24 @@ export function SgMenu(props) {
                         return (_jsxs("button", { type: "button", disabled: node.disabled, onMouseEnter: (event) => {
                                 if (node.hint)
                                     showMenuHint(event.currentTarget, node.hint);
-                                if (hasChildren)
-                                    setMegaActiveId(node.id);
+                                const nextMegaActiveId = resolveMegaMenuHoverActiveId({
+                                    nodeId: node.id,
+                                    hasChildren
+                                });
+                                if (nextMegaActiveId)
+                                    setMegaActiveId(nextMegaActiveId);
                             }, onMouseLeave: node.hint ? hideMenuHint : undefined, onClick: () => {
                                 if (node.disabled)
                                     return;
-                                if (hasChildren) {
-                                    setMegaActiveId(node.id);
-                                    return;
+                                const nextState = resolveMegaMenuInteraction({
+                                    nodeId: node.id,
+                                    hasChildren
+                                });
+                                if (nextState.nextMegaActiveId) {
+                                    setMegaActiveId(nextState.nextMegaActiveId);
                                 }
+                                if (!nextState.shouldActivateNode)
+                                    return;
                                 activateNode(node);
                             }, className: cn("flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm transition-colors", active ? "bg-muted/80 text-foreground" : "hover:bg-muted/60", node.disabled ? "cursor-not-allowed opacity-55" : ""), children: [iconNode ? (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", densityCfg.icon), children: iconNode })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: node.label }), hasChildren ? _jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground" }) : null] }, node.id));
                     }) }), _jsx("div", { className: "min-h-[220px] flex-1 p-4", children: renderMegaColumns(activeMegaNode?.children ?? []) })] }));
@@ -904,13 +795,13 @@ export function SgMenu(props) {
             setCollapsedState(!collapsedState);
         }, "aria-label": menuStyle === "hybrid"
             ? pinnedState
-                ? "Unpin and collapse menu"
+                ? t(i18n, "components.menu.unpinAndCollapse")
                 : drawerOpen
-                    ? "Close menu"
-                    : "Open menu"
+                    ? t(i18n, "components.menu.close")
+                    : t(i18n, "components.menu.open")
             : collapsedState
-                ? "Expand menu"
-                : "Collapse menu", className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: _jsx(CollapseIcon, { collapsed: menuStyle === "hybrid" ? !(pinnedState || drawerOpen) : collapsedState, side: collapseIconSide }) })) : null;
+                ? t(i18n, "components.menu.expand")
+                : t(i18n, "components.menu.collapse"), className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: _jsx(CollapseIcon, { collapsed: menuStyle === "hybrid" ? !(pinnedState || drawerOpen) : collapsedState, side: collapseIconSide }) })) : null;
     const showBrandContent = Boolean(brand && (!isCollapsed || isHorizontalDockZone));
     const showBrandSpacer = !showBrandContent && !isCollapsed;
     // In horizontal zones: collapse goes left when aligned left/center, right when aligned right.
@@ -918,13 +809,13 @@ export function SgMenu(props) {
     const collapseOnLeft = isHorizontalDockZone
         ? horizontalDockAlign !== "right"
         : resolvedPosition === "right";
-    const shellHeaderRow = (brand || showCollapseButton || showPinButton || showDockDragHandle) ? (_jsxs("div", { className: cn("flex items-center gap-2 border-b border-border", densityCfg.section), children: [collapseOnLeft ? collapseButton : null, showBrandContent && brand ? (_jsxs("button", { type: "button", onClick: brand.onClick, className: cn("min-w-0 rounded-md", isHorizontalDockZone ? "flex-none" : "flex-1", "flex items-center gap-2", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: [brand.image ? (_jsx("span", { className: "inline-flex shrink-0 items-center justify-center", children: brand.image })) : brand.imageSrc ? (_jsx("img", { src: brand.imageSrc, alt: brand.title ?? "brand", className: cn("w-auto", isHorizontalDockZone ? "h-7 max-w-[120px]" : "h-12 max-w-[160px]") })) : null, brand.title ? (_jsx("span", { className: "truncate text-sm font-semibold", children: brand.title })) : null] })) : showBrandSpacer ? (_jsx("div", { className: "flex-1" })) : null, showDockDragHandle ? (_jsx("button", { type: "button", onPointerDown: handleDockDragPointerDown, "aria-label": "Drag menu", className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", dockDragActive ? "cursor-grabbing" : "cursor-grab"), children: _jsxs("svg", { viewBox: "0 0 24 24", className: "size-4", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "12", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "16", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "8", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "12", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "16", r: "1.25", fill: "currentColor" })] }) })) : null, showPinButton ? (_jsx("button", { type: "button", onClick: () => {
+    const shellHeaderRow = (brand || showCollapseButton || showPinButton || showDockDragHandle) ? (_jsxs("div", { className: cn("flex items-center gap-2 border-b border-border", densityCfg.section), children: [collapseOnLeft ? collapseButton : null, showBrandContent && brand ? (_jsxs("button", { type: "button", onClick: brand.onClick, className: cn("min-w-0 rounded-md", isHorizontalDockZone ? "flex-none" : "flex-1", "flex items-center gap-2", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: [brand.image ? (_jsx("span", { className: "inline-flex shrink-0 items-center justify-center", children: brand.image })) : brand.imageSrc ? (_jsx("img", { src: brand.imageSrc, alt: brand.title ?? t(i18n, "components.menu.brandAlt"), className: cn("w-auto", isHorizontalDockZone ? "h-7 max-w-[120px]" : "h-12 max-w-[160px]") })) : null, brand.title ? (_jsx("span", { className: "truncate text-sm font-semibold", children: brand.title })) : null] })) : showBrandSpacer ? (_jsx("div", { className: "flex-1" })) : null, showDockDragHandle ? (_jsx("button", { type: "button", onPointerDown: handleDockDragPointerDown, "aria-label": t(i18n, "components.menu.drag"), className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", dockDragActive ? "cursor-grabbing" : "cursor-grab"), children: _jsxs("svg", { viewBox: "0 0 24 24", className: "size-4", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "12", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "16", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "8", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "12", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "16", r: "1.25", fill: "currentColor" })] }) })) : null, showPinButton ? (_jsx("button", { type: "button", onClick: () => {
                     const next = !pinnedState;
                     setPinnedState(next);
                     if (menuStyle === "hybrid" && next)
                         setDrawerOpen(false);
-                }, "aria-label": pinnedState ? "Unpin menu" : "Pin menu", className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: _jsx(PinIcon, { pinned: pinnedState }) })) : null, !collapseOnLeft ? collapseButton : null] })) : null;
-    const shellContentArea = (_jsxs(_Fragment, { children: [searchEnabled && !isCollapsed ? (_jsx("div", { className: cn("border-b border-border", densityCfg.section), children: _jsx(SgAutocomplete, { id: `${searchInputId}-menu-search`, label: search?.placeholder ?? "Search", placeholder: search?.placeholder ?? "Search", value: searchValue, onChange: setSearchValue, source: autocompleteSource, minLengthForSearch: 0, openOnFocus: true, showDropDownButton: true, clearOnSelect: true, grouped: true, onSelect: (item) => {
+                }, "aria-label": pinnedState ? t(i18n, "components.menu.unpin") : t(i18n, "components.menu.pin"), className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: _jsx(PinIcon, { pinned: pinnedState }) })) : null, !collapseOnLeft ? collapseButton : null] })) : null;
+    const shellContentArea = (_jsxs(_Fragment, { children: [searchEnabled && !isCollapsed ? (_jsx("div", { className: cn("border-b border-border", densityCfg.section), children: _jsx(SgAutocomplete, { id: `${searchInputId}-menu-search`, label: search?.placeholder ?? t(i18n, "components.actions.search"), placeholder: search?.placeholder ?? t(i18n, "components.actions.search"), value: searchValue, onChange: setSearchValue, source: autocompleteSource, minLengthForSearch: 0, openOnFocus: true, showDropDownButton: true, clearOnSelect: true, grouped: true, onSelect: (item) => {
                         const nodeId = item.data?.nodeId;
                         if (!nodeId)
                             return;
@@ -933,25 +824,22 @@ export function SgMenu(props) {
                             return;
                         const parentChain = collectParentChain(maps.parentById, node.id);
                         const rootToParent = [...parentChain].reverse();
-                        if (parentChain.length > 0) {
-                            setExpandedIds((prev) => {
-                                const next = Array.from(new Set([...prev, ...parentChain]));
-                                return sameStringArray(prev, next) ? prev : next;
-                            });
-                        }
-                        setTieredPath([
-                            ...rootToParent,
-                            ...(node.children?.length ? [node.id] : [])
-                        ]);
-                        setMegaActiveId(rootToParent[0] ?? node.id);
-                        if (node.children?.length && !node.url && !node.onClick) {
-                            setExpandedIds((prev) => {
-                                const nextSet = new Set(prev);
-                                nextSet.add(node.id);
-                                const next = Array.from(nextSet);
-                                return sameStringArray(prev, next) ? prev : next;
-                            });
-                            setLocalActiveId(node.id);
+                        const nextState = resolveMenuSearchSelectionState({
+                            currentExpandedIds: expandedIds,
+                            parentChain,
+                            rootToParent,
+                            nodeId: node.id,
+                            hasChildren: Boolean(node.children?.length),
+                            hasActionTarget: Boolean(node.url || node.onClick)
+                        });
+                        setExpandedIds((prev) => {
+                            const next = nextState.expandedIds;
+                            return sameStringArray(prev, next) ? prev : next;
+                        });
+                        setTieredPath(nextState.tieredPath);
+                        setMegaActiveId(nextState.megaActiveId);
+                        if (!nextState.shouldActivateNode) {
+                            setLocalActiveId(nextState.localActiveId);
                             return;
                         }
                         activateNode(node);
@@ -961,28 +849,16 @@ export function SgMenu(props) {
                         const node = data?.nodeId ? maps.nodeById.get(data.nodeId) : undefined;
                         const iconNode = node ? resolveIcon(node) : null;
                         return (_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx("span", { className: cn("mt-0.5 inline-flex shrink-0 items-center justify-center rounded", densityCfg.icon, iconNode ? "" : "bg-muted text-[10px] font-semibold"), children: iconNode ?? firstChars(item.label, 1) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate", children: item.label }), path ? _jsx("div", { className: "truncate text-xs text-muted-foreground", children: path }) : null] })] }));
-                    } }) })) : null, _jsx("div", { className: cn("min-h-0 flex-1", effectiveMenuStyle === "panel" ? "overflow-auto" : "overflow-visible", densityCfg.section), role: "navigation", "aria-label": ariaLabel, onKeyDown: effectiveMenuStyle === "panel" ? onListKeyDown : undefined, children: renderMenuTree(filteredMenu) }), (user || (userMenu && userMenu.length > 0) || footer) ? (_jsx("div", { className: cn("border-t border-border", densityCfg.section, userSectionClassName), style: userSectionStyle, children: user ? (isCollapsed ? (_jsx("button", { type: "button", onClick: user.onClick, className: cn("mb-2 w-full rounded-md", "flex items-center gap-2", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", "hover:bg-muted/60", densityCfg.row), title: user.name, children: _jsx(SgAvatar, { src: user.avatar ? undefined : user.avatarSrc, label: user.name, size: density === "compact" ? "sm" : "md", severity: "secondary", children: user.avatar ?? undefined }) })) : (_jsxs(SgCard, { className: "mb-2", cardStyle: "outlined", size: density === "compact" ? "sm" : "md", collapsible: true, defaultOpen: false, title: user.name, description: user.subtitle, leading: (_jsx("button", { type: "button", onClick: (event) => {
+                    } }) })) : null, _jsx("div", { className: cn("min-h-0 flex-1", effectiveMenuStyle === "panel" ? "overflow-auto" : "overflow-visible", densityCfg.section), role: "navigation", "aria-label": resolvedAriaLabel, onKeyDown: effectiveMenuStyle === "panel" ? onListKeyDown : undefined, children: renderMenuTree(filteredMenu) }), (user || (userMenu && userMenu.length > 0) || footer) ? (_jsx("div", { className: cn("border-t border-border", densityCfg.section, userSectionClassName), style: userSectionStyle, children: user ? (isCollapsed ? (_jsx("button", { type: "button", onClick: user.onClick, className: cn("mb-2 w-full rounded-md", "flex items-center gap-2", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", "hover:bg-muted/60", densityCfg.row), title: user.name, children: _jsx(SgAvatar, { src: user.avatar ? undefined : user.avatarSrc, label: user.name, size: density === "compact" ? "sm" : "md", severity: "secondary", children: user.avatar ?? undefined }) })) : (_jsxs(SgCard, { className: "mb-2", cardStyle: "outlined", size: density === "compact" ? "sm" : "md", collapsible: true, defaultOpen: false, title: user.name, description: user.subtitle, leading: (_jsx("button", { type: "button", onClick: (event) => {
                             event.stopPropagation();
                             user.onClick?.();
                         }, className: "inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", "aria-label": user.name, children: _jsx(SgAvatar, { src: user.avatar ? undefined : user.avatarSrc, label: user.name, size: density === "compact" ? "sm" : "md", severity: "secondary", children: user.avatar ?? undefined }) })), children: [userMenu && userMenu.length > 0 ? (_jsx("div", { className: "space-y-0.5", children: userMenu.map((node) => renderNode(node, 0)) })) : null, footer ? _jsx("div", { className: userMenu && userMenu.length > 0 ? "mt-2" : undefined, children: footer }) : null] }))) : (_jsxs(_Fragment, { children: [userMenu && userMenu.length > 0 && !isCollapsed ? (_jsx("div", { className: "space-y-0.5", children: userMenu.map((node) => renderNode(node, 0)) })) : null, footer ? _jsx("div", { className: "mt-2", children: footer }) : null] })) })) : null] }));
     const shellBody = (_jsxs("div", { ref: menuRootRef, className: cn("flex h-full min-h-0 flex-col bg-background text-foreground"), children: [shellHeaderRow, shellContentArea] }));
-    const isMegaMenuStyle = effectiveMenuStyle === "mega-horizontal" || effectiveMenuStyle === "mega-vertical";
-    const dockAlignStyle = dockMode && effectiveDockZone === "right" && !isCollapsed
+    const dockAlignStyle = dockAlign === "end"
         ? { alignSelf: "flex-end" }
-        : dockMode && effectiveDockZone === "left"
+        : dockAlign === "start"
             ? { alignSelf: "flex-start" }
             : undefined;
-    const sidebarWidthCss = dockMode && isHorizontalDockZone && menuStyle !== "sidebar"
-        ? "100%"
-        : menuStyle === "inline" && isMegaMenuStyle
-            ? "100%"
-            : menuStyle === "hybrid"
-                ? pinnedState
-                    ? expandedWidthCss
-                    : collapsedWidthCss
-                : isCollapsed
-                    ? collapsedWidthCss
-                    : expandedWidthCss;
     const sidebarWidthStyle = sidebarWidthCss;
     const sidebarShell = (_jsx("aside", { ref: (node) => {
             sidebarShellRef.current = node;
@@ -1005,10 +881,10 @@ export function SgMenu(props) {
         return (_jsxs(_Fragment, { children: [createPortal(shellForRender, portalTarget), menuHintNode] }));
     }
     if (menuStyle === "drawer") {
-        return (_jsxs(_Fragment, { children: [_jsx(SgExpandablePanel, { mode: "overlay", open: drawerOpen, onOpenChange: setDrawerOpen, expandTo: resolvedPosition === "left" ? "right" : "left", placement: "start", size: resolvedOverlaySize, animation: { type: "slide", durationMs: 180 }, border: border, elevation: elevation === "md" ? "lg" : elevation, rounded: "none", closeOnOutsideClick: !pinnedState, closeOnEsc: !pinnedState, trapFocus: true, showBackdrop: overlayBackdropResolved, ariaLabel: ariaLabel, role: "dialog", className: className, style: style, children: shellBody }), menuHintNode] }));
+        return (_jsxs(_Fragment, { children: [_jsx(SgExpandablePanel, { mode: "overlay", open: drawerOpen, onOpenChange: setDrawerOpen, expandTo: resolvedPosition === "left" ? "right" : "left", placement: "start", size: resolvedOverlaySize, animation: { type: "slide", durationMs: 180 }, border: border, elevation: elevation === "md" ? "lg" : elevation, rounded: "none", closeOnOutsideClick: !pinnedState, closeOnEsc: !pinnedState, trapFocus: true, showBackdrop: overlayBackdropResolved, ariaLabel: resolvedAriaLabel, role: "dialog", className: className, style: style, children: shellBody }), menuHintNode] }));
     }
     if (menuStyle === "hybrid") {
-        return (_jsxs(_Fragment, { children: [shellForRender, !pinnedState ? (_jsx(SgExpandablePanel, { mode: "overlay", open: drawerOpen, onOpenChange: setDrawerOpen, expandTo: resolvedPosition === "left" ? "right" : "left", placement: "start", size: resolvedOverlaySize, animation: { type: "slide", durationMs: 180 }, border: border, elevation: elevation === "md" ? "lg" : elevation, rounded: "none", closeOnOutsideClick: true, closeOnEsc: true, trapFocus: true, showBackdrop: overlayBackdropResolved, ariaLabel: ariaLabel, role: "dialog", children: _jsx(SgMenu, { menu: menu, selection: { activeId: effectiveActiveId, activeUrl: effectiveActiveUrl }, brand: brand, user: user, userMenu: userMenu, menuStyle: "inline", menuVariantStyle: menuVariantStyle, position: position, density: density, indent: indent, collapsed: false, collapsedWidth: collapsedWidth, expandedWidth: expandedWidth, mode: mode, expandedIds: expandedIds, onExpandedIdsChange: setExpandedIds, showCollapseButton: false, showPinButton: showPinButton, pinned: pinnedState, onPinnedChange: (next) => {
+        return (_jsxs(_Fragment, { children: [shellForRender, !pinnedState ? (_jsx(SgExpandablePanel, { mode: "overlay", open: drawerOpen, onOpenChange: setDrawerOpen, expandTo: resolvedPosition === "left" ? "right" : "left", placement: "start", size: resolvedOverlaySize, animation: { type: "slide", durationMs: 180 }, border: border, elevation: elevation === "md" ? "lg" : elevation, rounded: "none", closeOnOutsideClick: true, closeOnEsc: true, trapFocus: true, showBackdrop: overlayBackdropResolved, ariaLabel: resolvedAriaLabel, role: "dialog", children: _jsx(SgMenu, { menu: menu, selection: { activeId: effectiveActiveId, activeUrl: effectiveActiveUrl }, brand: brand, user: user, userMenu: userMenu, menuStyle: "inline", menuVariantStyle: menuVariantStyle, position: position, density: density, indent: indent, collapsed: false, collapsedWidth: collapsedWidth, expandedWidth: expandedWidth, mode: mode, expandedIds: expandedIds, onExpandedIdsChange: setExpandedIds, showCollapseButton: false, showPinButton: showPinButton, pinned: pinnedState, onPinnedChange: (next) => {
                             setPinnedState(next);
                             if (next)
                                 setDrawerOpen(false);
@@ -1023,7 +899,7 @@ export function SgMenu(props) {
                         }, onAction: onAction, onItemClick: (node) => {
                             setLocalActiveId(node.id);
                             onItemClick?.(node);
-                        }, ariaLabel: ariaLabel, keyboardNavigation: keyboardNavigation, openSubmenuOnHover: openSubmenuOnHover, search: search, elevation: "none", border: false, footer: footer }) })) : null, menuHintNode] }));
+                        }, ariaLabel: resolvedAriaLabel, keyboardNavigation: keyboardNavigation, openSubmenuOnHover: openSubmenuOnHover, search: search, elevation: "none", border: false, footer: footer }) })) : null, menuHintNode] }));
     }
     return (_jsxs(_Fragment, { children: [shellForRender, menuHintNode] }));
 }