@seedgrid/fe-components 0.2.9 → 2026.3.1

package/dist/layout/SgMenu.js

@@ -0,0 +1,939 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+import { SgAvatar } from "../commons/SgAvatar";
+import { SgExpandablePanel } from "./SgExpandablePanel";
+import { SgAutocomplete } from "../inputs/SgAutocomplete";
+import { SgCard } from "./SgCard";
+import { useSgDockLayout } from "./SgDockLayout";
+import { useHasSgEnvironmentProvider, useSgPersistence } from "../environment/SgEnvironmentProvider";
+const ROOT_PARENT_ID = "__sg_menu_root__";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function toCssSize(value, fallback) {
+    if (value === undefined || value === null)
+        return `${fallback}px`;
+    if (typeof value === "number")
+        return `${value}px`;
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : `${fallback}px`;
+}
+function normalizeMenuStyle(value) {
+    if (!value)
+        return "panel";
+    if (value === "PanelMenu")
+        return "panel";
+    if (value === "Tiered")
+        return "tiered";
+    if (value === "MegaMenuHorizontal")
+        return "mega-horizontal";
+    if (value === "MegaMenuVertical")
+        return "mega-vertical";
+    return value;
+}
+function resolveDockZoneFromOrientationDirection(orientationDirection) {
+    switch (orientationDirection) {
+        case "horizontal-right":
+            return "bottom";
+        case "horizontal-left":
+            return "top";
+        case "vertical-up":
+        case "vertical-top":
+            return "left";
+        case "vertical-down":
+            return "right";
+        default:
+            return "left";
+    }
+}
+function useControllableState(value, defaultValue, onChange) {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const isControlled = value !== undefined;
+    const current = isControlled ? value : internal;
+    const currentRef = React.useRef(current);
+    React.useEffect(() => {
+        currentRef.current = current;
+    }, [current]);
+    const setValue = React.useCallback((next) => {
+        const base = currentRef.current;
+        const resolved = typeof next === "function" ? next(base) : next;
+        if (!isControlled)
+            setInternal(resolved);
+        onChange?.(resolved);
+    }, [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)
+        return "?";
+    const words = normalized.split(" ");
+    if (words.length >= 2) {
+        return `${words[0]?.[0] ?? ""}${words[1]?.[0] ?? ""}`.toUpperCase();
+    }
+    return normalized.slice(0, amount).toUpperCase();
+}
+function sameStringArray(a, b) {
+    if (a === b)
+        return true;
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i += 1) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    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";
+    if (elevation === "md")
+        return "shadow-md";
+    return "";
+}
+function resolveIcon(node) {
+    return node.icon ?? null;
+}
+export function SgMenu(props) {
+    const { id, menu, selection, brand, user, userMenu, variant = "sidebar", menuStyle = "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 densityCfg = density === "compact"
+        ? {
+            row: "min-h-8 px-2 py-1 text-xs",
+            icon: "size-4",
+            badge: "text-[10px] px-1.5 py-0.5",
+            section: "px-2 py-2",
+            gap: "gap-2"
+        }
+        : {
+            row: "min-h-10 px-3 py-1.5 text-sm",
+            icon: "size-5",
+            badge: "text-xs px-2 py-0.5",
+            section: "px-3 py-3",
+            gap: "gap-2.5"
+        };
+    const maps = React.useMemo(() => buildMenuMaps(menu), [menu]);
+    const resolvedMenuStyle = normalizeMenuStyle(menuStyle);
+    const dock = useSgDockLayout();
+    const autoId = React.useId();
+    const dockableId = React.useMemo(() => id ?? `sg-menu-${autoId.replace(/[:]/g, "")}`, [autoId, id]);
+    const dockMode = Boolean(dockable && dock && variant !== "drawer" && variant !== "hybrid");
+    const defaultDockZone = dockZone ?? resolveDockZoneFromOrientationDirection(orientationDirection);
+    const assignedDockZone = dockMode && dock ? dock.getToolbarZone(dockableId) : null;
+    const effectiveDockZone = dockMode ? assignedDockZone ?? defaultDockZone : null;
+    const portalTarget = dockMode && dock && effectiveDockZone ? dock.getZoneElement(effectiveDockZone) : null;
+    const [expandedIds, setExpandedIds] = useControllableState(expandedIdsProp, defaultExpandedIds, onExpandedIdsChange);
+    const expandedSet = React.useMemo(() => new Set(expandedIds), [expandedIds]);
+    const hasEnvironmentProvider = useHasSgEnvironmentProvider();
+    const { load: loadPersistedState, save: savePersistedState } = useSgPersistence();
+    const collapsePersistKey = id ? `sg-menu:${id}:collapsed` : null;
+    const isCollapsedPropControlled = collapsed !== undefined;
+    const [collapsedInternal, setCollapsedInternal] = React.useState(defaultCollapsed);
+    React.useEffect(() => {
+        if (!collapsePersistKey || isCollapsedPropControlled)
+            return;
+        let alive = true;
+        (async () => {
+            try {
+                let loaded;
+                if (hasEnvironmentProvider) {
+                    loaded = await loadPersistedState(collapsePersistKey);
+                }
+                else {
+                    const raw = localStorage.getItem(collapsePersistKey);
+                    loaded = raw !== null ? (() => { try {
+                        return JSON.parse(raw);
+                    }
+                    catch {
+                        return null;
+                    } })() : null;
+                }
+                if (!alive || loaded === null || loaded === undefined)
+                    return;
+                if (typeof loaded === "boolean")
+                    setCollapsedInternal(loaded);
+            }
+            catch {
+                // ignore
+            }
+        })();
+        return () => { alive = false; };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [collapsePersistKey]);
+    const collapsedState = isCollapsedPropControlled ? collapsed : collapsedInternal;
+    const setCollapsedState = React.useCallback((next) => {
+        if (!isCollapsedPropControlled) {
+            setCollapsedInternal(next);
+            if (collapsePersistKey) {
+                if (hasEnvironmentProvider) {
+                    void savePersistedState(collapsePersistKey, next);
+                }
+                else {
+                    try {
+                        localStorage.setItem(collapsePersistKey, JSON.stringify(next));
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+            }
+        }
+        onCollapsedChange?.(next);
+    }, [isCollapsedPropControlled, collapsePersistKey, hasEnvironmentProvider, savePersistedState, onCollapsedChange]);
+    const [drawerOpen, setDrawerOpen] = useControllableState(open, defaultOpen, onOpenChange);
+    const [pinnedState, setPinnedState] = useControllableState(pinned, defaultPinned, onPinnedChange);
+    const isCollapsed = variant === "drawer" ? false : variant === "hybrid" ? !pinnedState : collapsedState;
+    const collapsedWidthCss = toCssSize(collapsedWidth, 72);
+    const expandedWidthCss = toCssSize(expandedWidth, 280);
+    const resolvedOverlaySize = overlaySize ?? { default: variant === "drawer" ? 320 : expandedWidth, min: 240, max: 520 };
+    const overlayBackdropResolved = overlayBackdrop ?? (variant === "drawer");
+    const closeOnNavigateResolved = closeOnNavigate ?? true;
+    const searchEnabled = search?.enabled ?? false;
+    const [searchValue, setSearchValue] = React.useState("");
+    const menuRootRef = React.useRef(null);
+    const sidebarShellRef = React.useRef(null);
+    const [dockDragActive, setDockDragActive] = React.useState(false);
+    const [horizontalDockAlign, setHorizontalDockAlign] = React.useState(null);
+    const dockDragStartRef = React.useRef(null);
+    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 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 [localActiveId, setLocalActiveId] = React.useState(selection?.activeId);
+    const [tieredPath, setTieredPath] = React.useState([]);
+    const [megaActiveId, setMegaActiveId] = React.useState(menu[0]?.id);
+    React.useEffect(() => {
+        if (selection?.activeId)
+            setLocalActiveId(selection.activeId);
+    }, [selection?.activeId]);
+    React.useEffect(() => {
+        if (menu.length === 0) {
+            setMegaActiveId(undefined);
+            return;
+        }
+        if (!megaActiveId || !menu.some((node) => node.id === megaActiveId)) {
+            setMegaActiveId(menu[0]?.id);
+        }
+    }, [megaActiveId, menu]);
+    React.useEffect(() => {
+        if (variant !== "hybrid")
+            return;
+        if (!pinnedState || !drawerOpen)
+            return;
+        setDrawerOpen(false);
+    }, [drawerOpen, pinnedState, setDrawerOpen, variant]);
+    React.useEffect(() => {
+        if (!dockMode || !dock)
+            return;
+        const orientation = defaultDockZone === "top" || defaultDockZone === "bottom" ? "horizontal" : "vertical";
+        dock.ensureToolbar(dockableId, {
+            zone: defaultDockZone,
+            collapsed: defaultCollapsed,
+            orientation
+        });
+    }, [defaultCollapsed, defaultDockZone, dock, dockMode, dockableId]);
+    React.useEffect(() => {
+        if (!dockDragActive)
+            return;
+        const previousBodyCursor = document.body.style.cursor;
+        const previousHtmlCursor = document.documentElement.style.cursor;
+        document.body.style.cursor = "grabbing";
+        document.documentElement.style.cursor = "grabbing";
+        return () => {
+            document.body.style.cursor = previousBodyCursor;
+            document.documentElement.style.cursor = previousHtmlCursor;
+        };
+    }, [dockDragActive]);
+    const applyDockDragVisual = React.useCallback((dx, dy) => {
+        const shell = sidebarShellRef.current;
+        if (!shell)
+            return;
+        shell.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
+        shell.style.willChange = "transform";
+        shell.style.zIndex = "1300";
+    }, []);
+    const clearDockDragVisual = React.useCallback(() => {
+        const shell = sidebarShellRef.current;
+        if (!shell)
+            return;
+        shell.style.transform = "";
+        shell.style.willChange = "";
+        shell.style.zIndex = "";
+    }, []);
+    React.useEffect(() => () => {
+        clearDockDragVisual();
+    }, [clearDockDragVisual]);
+    const effectiveActiveId = selection?.activeId ??
+        (selection?.activeUrl ? maps.firstByUrl.get(selection.activeUrl) : undefined) ??
+        localActiveId;
+    const effectiveActiveUrl = selection?.activeUrl;
+    const activeSets = React.useMemo(() => computeActiveSets(menu, effectiveActiveId, effectiveActiveUrl), [menu, effectiveActiveId, effectiveActiveUrl]);
+    React.useEffect(() => {
+        if (!effectiveActiveId)
+            return;
+        const chain = collectParentChain(maps.parentById, effectiveActiveId);
+        if (chain.length === 0)
+            return;
+        setExpandedIds((prev) => {
+            const next = Array.from(new Set([...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]);
+    React.useEffect(() => {
+        if (effectiveMenuStyle !== "tiered")
+            return;
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (!(target instanceof Node))
+                return;
+            if (menuRootRef.current?.contains(target))
+                return;
+            setTieredPath((prev) => (prev.length > 0 ? [] : prev));
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, [effectiveMenuStyle]);
+    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);
+        });
+    }, [maps.childrenByParent, maps.parentById, mode, setExpandedIds]);
+    const activateNode = React.useCallback((node) => {
+        if (node.disabled)
+            return;
+        onItemClick?.(node);
+        setLocalActiveId(node.id);
+        const hasUrl = typeof node.url === "string" && node.url.length > 0;
+        if (hasUrl) {
+            if (onNavigate)
+                onNavigate(node);
+            else if (typeof window !== "undefined")
+                window.location.assign(node.url);
+        }
+        if (node.onClick) {
+            node.onClick();
+            onAction?.(node);
+        }
+        if ((variant === "drawer" || variant === "hybrid") && hasUrl && closeOnNavigateResolved && !pinnedState) {
+            setDrawerOpen(false);
+        }
+    }, [
+        closeOnNavigateResolved,
+        onAction,
+        onItemClick,
+        onNavigate,
+        pinnedState,
+        setDrawerOpen,
+        variant
+    ]);
+    const handleDockDragPointerDown = React.useCallback((event) => {
+        if (event.button !== 0)
+            return;
+        if (!dockMode || !dock || !draggable || !effectiveDockZone)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const shellRectBeforeDrag = sidebarShellRef.current?.getBoundingClientRect() ?? null;
+        dock.setDropPreviewActive(true);
+        setDockDragActive(true);
+        dockDragStartRef.current = { x: event.clientX, y: event.clientY };
+        dockDragMovedRef.current = false;
+        dockHoverZoneRef.current = dock.getZoneAtPoint(event.clientX, event.clientY) ?? effectiveDockZone;
+        applyDockDragVisual(0, 0);
+        if (shellRectBeforeDrag) {
+            window.requestAnimationFrame(() => {
+                const shell = sidebarShellRef.current;
+                const start = dockDragStartRef.current;
+                if (!shell || !start)
+                    return;
+                const shellRectAfterDrag = shell.getBoundingClientRect();
+                const adjustDx = shellRectBeforeDrag.left - shellRectAfterDrag.left;
+                const adjustDy = shellRectBeforeDrag.top - shellRectAfterDrag.top;
+                if (Math.abs(adjustDx) < 0.5 && Math.abs(adjustDy) < 0.5)
+                    return;
+                start.x -= adjustDx;
+                start.y -= adjustDy;
+                applyDockDragVisual(adjustDx, adjustDy);
+            });
+        }
+        const handleMove = (moveEvent) => {
+            const start = dockDragStartRef.current;
+            if (!start)
+                return;
+            const dx = moveEvent.clientX - start.x;
+            const dy = moveEvent.clientY - start.y;
+            if (Math.abs(dx) > 3 || Math.abs(dy) > 3)
+                dockDragMovedRef.current = true;
+            applyDockDragVisual(dx, dy);
+            dockHoverZoneRef.current = dock.getZoneAtPoint(moveEvent.clientX, moveEvent.clientY);
+        };
+        const handleEnd = (upEvent) => {
+            window.removeEventListener("pointermove", handleMove);
+            window.removeEventListener("pointerup", handleEnd);
+            window.removeEventListener("pointercancel", handleEnd);
+            setDockDragActive(false);
+            dock.setDropPreviewActive(false);
+            clearDockDragVisual();
+            if (!dockDragStartRef.current)
+                return;
+            dockDragStartRef.current = null;
+            if (!dockDragMovedRef.current) {
+                dockHoverZoneRef.current = null;
+                return;
+            }
+            const zone = dockHoverZoneRef.current ?? dock.getZoneAtPoint(upEvent.clientX, upEvent.clientY);
+            dockHoverZoneRef.current = null;
+            if (zone) {
+                dock.moveToolbar(dockableId, zone);
+                if (zone === "top" || zone === "bottom") {
+                    const zoneEl = dock.getZoneElement(zone);
+                    if (zoneEl) {
+                        const zoneRect = zoneEl.getBoundingClientRect();
+                        setHorizontalDockAlign(upEvent.clientX < zoneRect.left + zoneRect.width / 2 ? "left" : "right");
+                    }
+                }
+                else {
+                    setHorizontalDockAlign(null);
+                }
+            }
+        };
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", handleEnd);
+        window.addEventListener("pointercancel", handleEnd);
+    }, [applyDockDragVisual, clearDockDragVisual, dock, dockMode, dockableId, draggable, effectiveDockZone, setHorizontalDockAlign]);
+    const visibleNodes = React.useMemo(() => effectiveMenuStyle === "panel"
+        ? flattenVisibleNodes(filteredMenu, expandedSet, isCollapsed, hasSearch)
+        : [], [effectiveMenuStyle, expandedSet, filteredMenu, hasSearch, isCollapsed]);
+    const searchInputId = React.useId();
+    const itemRefs = React.useRef({});
+    const [focusedId, setFocusedId] = React.useState(undefined);
+    React.useEffect(() => {
+        if (visibleNodes.length === 0) {
+            setFocusedId(undefined);
+            return;
+        }
+        const exists = visibleNodes.some((item) => item.node.id === focusedId);
+        if (!exists)
+            setFocusedId(visibleNodes[0]?.node.id);
+    }, [focusedId, visibleNodes]);
+    const focusById = React.useCallback((id) => {
+        if (!id)
+            return;
+        itemRefs.current[id]?.focus?.();
+        setFocusedId(id);
+    }, []);
+    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);
+            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);
+            }
+            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);
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (hasChildren && !node.url && !node.onClick && !isCollapsed) {
+                toggleExpanded(node.id);
+                return;
+            }
+            activateNode(node);
+        }
+    }, [
+        activateNode,
+        expandedSet,
+        focusById,
+        focusedId,
+        hasSearch,
+        isCollapsed,
+        keyboardNavigation,
+        maps.parentById,
+        toggleExpanded,
+        visibleNodes
+    ]);
+    const renderNode = React.useCallback((node, depth) => {
+        const hasChildren = !!node.children?.length;
+        const openNow = hasSearch || expandedSet.has(node.id);
+        const isExactActive = activeSets.exact.has(node.id);
+        const isBranchActive = activeSets.branch.has(node.id);
+        const disabled = !!node.disabled;
+        const iconNode = resolveIcon(node);
+        const hideChildren = isCollapsed;
+        return (_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: cn("group flex items-center rounded-md", densityCfg.row, densityCfg.gap, isExactActive
+                        ? "bg-primary/15 text-primary"
+                        : isBranchActive
+                            ? "bg-muted/60 text-foreground"
+                            : "text-foreground hover:bg-muted/60", disabled ? "cursor-not-allowed opacity-55" : ""), style: isCollapsed ? undefined : { paddingLeft: 8 + depth * indent }, title: isCollapsed ? node.label : undefined, children: [_jsxs("button", { ref: (el) => {
+                                itemRefs.current[node.id] = el;
+                            }, "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) {
+                                    toggleExpanded(node.id);
+                                    return;
+                                }
+                                activateNode(node);
+                            }, className: cn("min-w-0 flex-1 rounded-md", "flex items-center", 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));
+    }, [
+        activateNode,
+        activeSets.branch,
+        activeSets.exact,
+        densityCfg.badge,
+        densityCfg.gap,
+        densityCfg.icon,
+        densityCfg.row,
+        expandedSet,
+        hasSearch,
+        indent,
+        isCollapsed,
+        toggleExpanded
+    ]);
+    const renderFlatAction = React.useCallback((node, className) => {
+        const isExactActive = activeSets.exact.has(node.id);
+        const isBranchActive = activeSets.branch.has(node.id);
+        const hasChildren = !!node.children?.length;
+        const iconNode = resolveIcon(node);
+        return (_jsxs("button", { type: "button", disabled: node.disabled, "aria-current": isExactActive ? "page" : undefined, onClick: () => {
+                if (node.disabled)
+                    return;
+                if (hasChildren && !node.url && !node.onClick)
+                    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"
+                : isBranchActive
+                    ? "bg-muted/60 text-foreground"
+                    : "text-foreground hover:bg-muted/60", node.disabled ? "cursor-not-allowed opacity-55" : "", className), 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 ? _jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground" }) : null] }, node.id));
+    }, [activateNode, activeSets.branch, activeSets.exact, densityCfg.icon]);
+    const renderTieredLevels = React.useCallback((nodes, depth) => {
+        if (!nodes.length)
+            return null;
+        const activeIdAtDepth = tieredPath[depth];
+        const activeNode = nodes.find((node) => node.id === activeIdAtDepth);
+        return (_jsxs("div", { className: cn(depth === 0
+                ? "relative w-full"
+                : cn("absolute top-0 min-w-[220px]", tieredOpenToLeft ? "right-full mr-1" : "left-full ml-1"), depth > 0 ? "z-20" : ""), children: [_jsx("div", { className: "rounded-md border border-border bg-background p-1 shadow-sm", children: nodes.map((node) => {
+                        const hasChildren = !!node.children?.length;
+                        const isOpen = activeIdAtDepth === node.id;
+                        const isExactActive = activeSets.exact.has(node.id);
+                        const iconNode = resolveIcon(node);
+                        return (_jsxs("button", { type: "button", disabled: node.disabled, "aria-current": isExactActive ? "page" : undefined, onMouseEnter: () => {
+                                if (!openSubmenuOnHover)
+                                    return;
+                                if (!hasChildren) {
+                                    setTieredPath((prev) => prev.slice(0, depth));
+                                    return;
+                                }
+                                setTieredPath((prev) => [...prev.slice(0, depth), node.id]);
+                            }, onClick: () => {
+                                if (node.disabled)
+                                    return;
+                                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;
+                                }
+                                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
+                    ? renderTieredLevels(activeNode.children, depth + 1)
+                    : null] }));
+    }, [activateNode, activeSets.exact, densityCfg.icon, openSubmenuOnHover, tieredOpenToLeft, tieredPath]);
+    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: "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." });
+        }
+        if (effectiveMenuStyle === "panel") {
+            return _jsx("div", { className: "space-y-0.5", children: items.map((node) => renderNode(node, 0)) });
+        }
+        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];
+        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;
+                            const active = activeMegaNode?.id === node.id;
+                            const iconNode = resolveIcon(node);
+                            return (_jsxs("button", { type: "button", disabled: node.disabled, onMouseEnter: () => hasChildren && setMegaActiveId(node.id), onClick: () => {
+                                    if (node.disabled)
+                                        return;
+                                    if (hasChildren) {
+                                        setMegaActiveId(node.id);
+                                        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 ?? []) })] }));
+        }
+        return (_jsxs("div", { className: "flex rounded-md border border-border bg-background", children: [_jsx("div", { className: "w-52 shrink-0 border-r border-border p-1", children: items.map((node) => {
+                        const hasChildren = !!node.children?.length;
+                        const active = activeMegaNode?.id === node.id;
+                        const iconNode = resolveIcon(node);
+                        return (_jsxs("button", { type: "button", disabled: node.disabled, onMouseEnter: () => hasChildren && setMegaActiveId(node.id), onClick: () => {
+                                if (node.disabled)
+                                    return;
+                                if (hasChildren) {
+                                    setMegaActiveId(node.id);
+                                    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 ?? []) })] }));
+    };
+    const showDockDragHandle = dockMode && draggable && (!isCollapsed || isHorizontalDockZone);
+    const collapseIconSide = isHorizontalDockZone ? effectiveDockZone : resolvedPosition;
+    const collapseButton = showCollapseButton && variant !== "drawer" ? (_jsx("button", { type: "button", onClick: () => {
+            if (variant === "hybrid") {
+                if (pinnedState) {
+                    setPinnedState(false);
+                    setDrawerOpen(false);
+                    return;
+                }
+                setDrawerOpen(!drawerOpen);
+                return;
+            }
+            setCollapsedState(!collapsedState);
+        }, "aria-label": variant === "hybrid"
+            ? pinnedState
+                ? "Unpin and collapse menu"
+                : drawerOpen
+                    ? "Close menu"
+                    : "Open menu"
+            : 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: variant === "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.
+    // In vertical zones: keep the original resolvedPosition logic.
+    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 flex-1 rounded-md", "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: "h-7 w-auto max-w-[120px]" })) : null, _jsx("span", { className: "truncate text-sm font-semibold", children: brand.title ?? "Menu" })] })) : 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 next = !pinnedState;
+                    setPinnedState(next);
+                    if (variant === "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) => {
+                        const nodeId = item.data?.nodeId;
+                        if (!nodeId)
+                            return;
+                        const node = maps.nodeById.get(nodeId);
+                        if (!node || node.disabled)
+                            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);
+                            return;
+                        }
+                        activateNode(node);
+                    }, renderItem: (item) => {
+                        const data = item.data;
+                        const path = data?.path;
+                        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", variant: "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
+        ? { alignSelf: "flex-end" }
+        : dockMode && effectiveDockZone === "left"
+            ? { alignSelf: "flex-start" }
+            : undefined;
+    const sidebarWidthCss = dockMode && isHorizontalDockZone && variant !== "sidebar"
+        ? "100%"
+        : variant === "inline" && isMegaMenuStyle
+            ? "100%"
+            : variant === "hybrid"
+                ? pinnedState
+                    ? expandedWidthCss
+                    : collapsedWidthCss
+                : isCollapsed
+                    ? collapsedWidthCss
+                    : expandedWidthCss;
+    const sidebarWidthStyle = sidebarWidthCss;
+    const sidebarShell = (_jsx("aside", { ref: (node) => {
+            sidebarShellRef.current = node;
+        }, className: cn("flex h-full min-h-0 flex-col bg-background text-foreground", effectiveMenuStyle === "tiered" ? "overflow-visible" : "overflow-hidden", border ? "border border-border" : "", elevationClass(elevation), resolvedPosition === "right" ? "ml-auto" : "", className), style: { width: sidebarWidthStyle, ...dockAlignStyle, ...style }, children: shellBody }));
+    const shellForRender = dockMode && effectiveDockZone === "right" && isCollapsed ? (_jsx("div", { style: { width: "100%", height: "100%", display: "flex", justifyContent: "flex-end" }, children: sidebarShell })) : dockMode && isHorizontalDockZone ? (_jsxs("aside", { ref: (node) => {
+            menuRootRef.current = node;
+            sidebarShellRef.current = node;
+        }, className: cn("relative flex flex-col bg-background text-foreground", !dockDragActive && horizontalDockAlign === null ? "w-full" : "", !dockDragActive ? "self-stretch" : "", !dockDragActive && horizontalDockAlign === "right" ? "ml-auto" : "", border ? "border border-border" : "", elevationClass(elevation), className), style: {
+            width: dockDragActive || horizontalDockAlign !== null
+                ? expandedWidthCss
+                : undefined,
+            ...style
+        }, children: [shellHeaderRow, !isCollapsed ? (_jsx("div", { className: cn("absolute z-50 flex flex-col bg-background text-foreground", effectiveMenuStyle === "tiered" ? "overflow-visible" : "overflow-auto", effectiveDockZone === "bottom" ? "bottom-full" : "top-full", horizontalDockAlign === "right" ? "right-0" : "left-0", "min-w-[240px]", effectiveMenuStyle !== "tiered" ? "max-h-[60vh]" : "", "border border-border", elevationClass(elevation === "none" ? "sm" : elevation)), children: shellContentArea })) : null] })) : (sidebarShell);
+    if (dockMode && portalTarget) {
+        return createPortal(shellForRender, portalTarget);
+    }
+    if (variant === "drawer") {
+        return (_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 }));
+    }
+    if (variant === "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, variant: "inline", menuStyle: menuStyle, 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);
+                        }, closeOnNavigate: closeOnNavigateResolved, onNavigate: (node) => {
+                            setLocalActiveId(node.id);
+                            if (onNavigate)
+                                onNavigate(node);
+                            else if (typeof window !== "undefined" && node.url)
+                                window.location.assign(node.url);
+                            if (closeOnNavigateResolved && !pinnedState)
+                                setDrawerOpen(false);
+                        }, onAction: onAction, onItemClick: (node) => {
+                            setLocalActiveId(node.id);
+                            onItemClick?.(node);
+                        }, ariaLabel: ariaLabel, keyboardNavigation: keyboardNavigation, openSubmenuOnHover: openSubmenuOnHover, search: search, elevation: "none", border: false, footer: footer }) })) : null] }));
+    }
+    return shellForRender;
+}
+SgMenu.displayName = "SgMenu";
+function CollapseIcon(props) {
+    const { collapsed, side } = props;
+    const rotation = side === "top" ? (collapsed ? 90 : -90) :
+        side === "bottom" ? (collapsed ? -90 : 90) :
+            side === "left" ? (collapsed ? 0 : 180) :
+                (collapsed ? 180 : 0);
+    return (_jsx("svg", { viewBox: "0 0 24 24", className: "size-4", style: { transform: `rotate(${rotation}deg)` }, "aria-hidden": "true", children: _jsx("path", { d: "M9 6l6 6-6 6", fill: "currentColor" }) }));
+}
+function PinIcon(props) {
+    if (props.pinned) {
+        return (_jsx("svg", { viewBox: "0 0 24 24", className: "size-4", "aria-hidden": "true", children: _jsx("path", { d: "M9 3h6v3l2 3v2H7V9l2-3V3zm3 8v10", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    }
+    return (_jsx("svg", { viewBox: "0 0 24 24", className: "size-4", "aria-hidden": "true", children: _jsx("path", { d: "M9 3h6v3l2 3v2H7V9l2-3V3m-3 14l12-12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}