@iloveagents/foundry-web-ui 0.3.1 → 0.4.0

package/dist/components/sidebar.js

@@ -0,0 +1,904 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { NavLink, useLocation, useNavigate } from "react-router";
+import { Ellipsis, PanelLeft, PanelLeftOpen, SquarePen, ChevronDown, ChevronRight, GripVertical, Plus, Upload } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { useSidebarStore, RAIL_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_MAX_WIDTH, } from "../lib/sidebar-store.js";
+import { useToolPanelStore } from "../lib/tool-panel-store.js";
+import { useNewConversation } from "../lib/use-new-conversation.js";
+import { useNavStore } from "../lib/nav-store.js";
+import { useAppStore } from "../lib/app-store.js";
+import { getContainerDropZoneLabel, hasAnyDropTarget, hasExternalFilesData } from "../lib/nav-dnd.js";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { AppBrand } from "./app-brand.js";
+const ACTIVE_NAV_ROW_CLASS = "border border-transparent bg-sidebar-selected shadow-none";
+const ACTIVE_NAV_TEXT_CLASS = "font-semibold text-sidebar-foreground";
+const ACTIVE_NAV_ICON_CLASS = "text-primary";
+const ACTIVE_NAV_BADGE_CLASS = "border border-sidebar-border bg-background/60 text-sidebar-foreground";
+const NESTED_NAV_INDENTS = ["pl-5", "pl-7", "pl-9", "pl-11", "pl-13"];
+// Shared icon-column geometry. Top-level item rows render their
+// leading icon at ``size-4`` (16px) followed by ``gap-2`` (8px)
+// before the label. The group-header chevron uses the SAME column
+// width + gap so the group label and item labels share an exact
+// x-coordinate — without this invariant headers visually drift right
+// (previously the chevron defaulted to ``size-6`` = 24px) and the
+// sidebar looks ragged. Verified empirically against the live DOM:
+// item icon x-min ≈ header chevron x-min, item label x ≈ header
+// label x (within 1px allowing for the item's ``border-transparent``
+// inset).
+const SIDEBAR_ITEM_ICON_CLASS = "size-4 shrink-0";
+const SIDEBAR_ITEM_GAP_CLASS = "gap-2";
+// Outer padding for the group-header wrapper. Horizontal matches
+// ``px-3`` on item buttons so the chevron column lines up with the
+// item icon column. Vertical is asymmetric: ``pt-3`` (12px) above
+// gives breathing room between sections, ``pb-1`` (4px) below bonds
+// the header to its first child — the ChatGPT / Linear / Notion
+// "header sits on its children" pattern. Symmetric ``py-2`` made
+// the header float midway between sections instead of belonging
+// to the group below it.
+const SIDEBAR_GROUP_HEADER_PADDING = "px-3 pt-4 pb-0";
+// Typography for the group-header LABEL text (CHATS / WORKSPACES /
+// ADMIN / …). Stays at ``text-xs`` (12px) — same size as before —
+// but bumps weight from ``font-medium`` to ``font-semibold``. The
+// extra weight gives section headers the structural presence they
+// need to feel like section dividers without spending vertical
+// space; combined with ``uppercase tracking-wider`` it's the
+// ChatGPT / Linear / Notion small-caps section-label rhythm.
+// Bumping size AND weight together stacked too much visual mass
+// against the already-wide uppercase tracking — felt shouty.
+const SIDEBAR_GROUP_HEADER_LABEL_CLASS = "text-xs font-semibold uppercase tracking-wider";
+function getNestedNavIndent(depth) {
+    return NESTED_NAV_INDENTS[depth] ?? NESTED_NAV_INDENTS[NESTED_NAV_INDENTS.length - 1];
+}
+function scrollNavRowIntoView(nav, row) {
+    const navRect = nav.getBoundingClientRect();
+    const rowRect = row.getBoundingClientRect();
+    if (rowRect.top < navRect.top || rowRect.bottom > navRect.bottom) {
+        const rowCenter = rowRect.top - navRect.top + rowRect.height / 2;
+        nav.scrollTop += rowCenter - nav.clientHeight / 2;
+    }
+}
+export const _scrollNavRowIntoViewForTest = scrollNavRowIntoView;
+function useActiveNavRowScroll(isActive) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!isActive)
+            return;
+        const scroll = () => {
+            const element = ref.current;
+            if (!element)
+                return;
+            const rect = element.getBoundingClientRect();
+            const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+            const isOnScreen = rect.width > 0 &&
+                rect.height > 0 &&
+                rect.right > 0 &&
+                rect.left < viewportWidth;
+            if (!isOnScreen)
+                return;
+            const nav = element.closest("nav");
+            if (!nav)
+                return;
+            scrollNavRowIntoView(nav, element);
+        };
+        const frame = window.requestAnimationFrame(scroll);
+        const retry = window.setTimeout(scroll, 120);
+        const finalRetry = window.setTimeout(scroll, 400);
+        return () => {
+            window.cancelAnimationFrame(frame);
+            window.clearTimeout(retry);
+            window.clearTimeout(finalRetry);
+        };
+    }, [isActive]);
+    return ref;
+}
+function useScrollActiveNavRow(currentPage, navConfig, collapsed) {
+    useEffect(() => {
+        if (collapsed)
+            return;
+        const scroll = () => {
+            const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+            const navs = Array.from(document.querySelectorAll("nav")).filter((nav) => {
+                const rect = nav.getBoundingClientRect();
+                return rect.width > 0 && rect.right > 0 && rect.left < viewportWidth;
+            });
+            for (const nav of navs) {
+                const row = nav.querySelector('[data-active-nav-row="true"]');
+                if (!row)
+                    continue;
+                scrollNavRowIntoView(nav, row);
+                break;
+            }
+        };
+        const frame = window.requestAnimationFrame(scroll);
+        const retry = window.setTimeout(scroll, 120);
+        const finalRetry = window.setTimeout(scroll, 400);
+        return () => {
+            window.cancelAnimationFrame(frame);
+            window.clearTimeout(retry);
+            window.clearTimeout(finalRetry);
+        };
+    }, [collapsed, currentPage, navConfig]);
+}
+function statusDotColor(tone) {
+    switch (tone) {
+        case "low-impact":
+            return "var(--impact-low, currentColor)";
+        case "medium-impact":
+            return "var(--impact-medium, currentColor)";
+        case "high-impact":
+            return "var(--impact-high, currentColor)";
+        case "pending":
+            return "var(--impact-unknown, currentColor)";
+        case "info":
+            return "var(--primary, currentColor)";
+        case "neutral":
+        default:
+            return "currentColor";
+    }
+}
+function NavStatusDot({ statusDot }) {
+    if (!statusDot)
+        return null;
+    // Both "pending" (impact in progress) and "info" (live / active —
+    // e.g. the currently-resumed chat conversation) pulse so the eye is
+    // drawn to "something is happening / you are here right now".
+    // Other tones render static.
+    const pulse = statusDot.tone === "pending" || statusDot.tone === "info";
+    return (_jsx("span", { "data-nav-status-dot": true, "data-nav-status-tone": statusDot.tone, "aria-label": statusDot.label, title: statusDot.label, className: cn("size-1.5 shrink-0 rounded-full opacity-90", pulse && "animate-pulse"), style: { backgroundColor: statusDotColor(statusDot.tone) } }));
+}
+function statusIconClass(tone) {
+    switch (tone) {
+        case "warning":
+            return "text-warning";
+        case "danger":
+            return "text-destructive";
+        case "info":
+            return "text-primary";
+        case "neutral":
+        default:
+            return "text-sidebar-foreground/60";
+    }
+}
+function NavStatusIcon({ statusIcon }) {
+    if (!statusIcon)
+        return null;
+    const Icon = statusIcon.icon;
+    // Wrap in a ``<span>`` so the browser tooltip (``title``) and the
+    // screen-reader announcement (``aria-label``) attach to a real DOM
+    // node — lucide-react's icon types don't accept ``title`` as a
+    // prop. Kept small (size-3) so the icon doesn't compete with the
+    // entity icon on the left of the row.
+    return (_jsx("span", { role: "img", "aria-label": statusIcon.label, title: statusIcon.label, className: "inline-flex shrink-0", children: _jsx(Icon, { "aria-hidden": "true", className: cn("size-3 shrink-0", statusIconClass(statusIcon.tone)) }) }));
+}
+// --- Generic drag-and-drop via NavItem.dnd ---
+/** Shared drag-and-drop props derived from NavItem.dnd (feature-provided). */
+function useNavItemDnd(dnd) {
+    const [isDragOver, setIsDragOver] = useState(false);
+    // Tracked separately from ``isDragOver`` so consumers can render a
+    // distinct file-drop affordance (dashed primary ring + Upload icon)
+    // instead of the subtle entity-move ring. Without the split, a user
+    // dragging files from the desktop sees the same hover state as a
+    // user dragging another tree node — they can't tell the container
+    // accepts the drop.
+    const [isFileDragOver, setIsFileDragOver] = useState(false);
+    const dragCounter = useRef(0);
+    const isDraggable = dnd?.canDrag() ?? false;
+    const isDropTarget = dnd?.canDrop() ?? false;
+    const isFileDropTarget = dnd?.canDropFiles?.() ?? false;
+    const dndType = dnd?.type;
+    const hasExternalFiles = useCallback((e) => hasExternalFilesData(e.dataTransfer), []);
+    const hasMatchingDragData = useCallback((e) => Boolean((isDropTarget && dndType && e.dataTransfer.types.includes(dndType)) ||
+        (isFileDropTarget && hasExternalFiles(e))), [isDropTarget, dndType, isFileDropTarget, hasExternalFiles]);
+    const onDragStart = useCallback((e) => {
+        if (!dnd)
+            return;
+        const data = dnd.getData();
+        if (!data)
+            return;
+        e.dataTransfer.setData(dnd.type, data);
+        e.dataTransfer.effectAllowed = "move";
+    }, [dnd]);
+    const onDragEnter = useCallback((e) => {
+        if (!hasMatchingDragData(e))
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounter.current++;
+        setIsDragOver(true);
+        if (isFileDropTarget && hasExternalFiles(e)) {
+            setIsFileDragOver(true);
+        }
+    }, [hasMatchingDragData, isFileDropTarget, hasExternalFiles]);
+    // ``dragenter`` / ``dragleave`` fire on every parent-to-child crossing
+    // inside the drop target (entering the inner button, then a span, etc.).
+    // The counter pattern only flips ``isDragOver`` back to false when the
+    // cursor truly leaves the OUTER element. There's a transient between
+    // crossings where leave fires before the matching enter — React 18
+    // auto-batches setState calls within a single task so the user doesn't
+    // see a flicker. If you ever observe one, switch to a relatedTarget
+    // ``contains()`` check instead of the counter.
+    const onDragLeave = useCallback((e) => {
+        if (!hasAnyDropTarget(isDropTarget, isFileDropTarget))
+            return;
+        e.preventDefault();
+        dragCounter.current--;
+        if (dragCounter.current <= 0) {
+            dragCounter.current = 0;
+            setIsDragOver(false);
+            setIsFileDragOver(false);
+        }
+    }, [isDropTarget, isFileDropTarget]);
+    const onDragOver = useCallback((e) => {
+        if (!hasMatchingDragData(e))
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = hasExternalFiles(e) ? "copy" : "move";
+    }, [hasMatchingDragData, hasExternalFiles]);
+    // Capture-phase handlers run BEFORE the bubble-phase ``onDragEnter`` /
+    // ``onDragOver`` on the same node. They MUST NOT call
+    // ``e.stopPropagation()``: in React's synthetic event system, stopping
+    // propagation in the capture phase short-circuits the dispatch — neither
+    // the bubble-phase handler on the same node (which actually mutates
+    // ``isDragOver`` / ``isFileDragOver``) nor any ancestor handler runs.
+    //
+    // We keep ``preventDefault()`` here because some browsers (Chrome) need
+    // it on ``dragenter``/``dragover`` to mark the element as droppable —
+    // doing it in the capture phase makes the visual cue stable while the
+    // user is still hovering inside descendant elements (button, span,
+    // action controls).
+    const onDragEnterCapture = useCallback((e) => {
+        if (!hasMatchingDragData(e))
+            return;
+        e.preventDefault();
+    }, [hasMatchingDragData]);
+    const onDragOverCapture = useCallback((e) => {
+        if (!hasMatchingDragData(e))
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = hasExternalFiles(e) ? "copy" : "move";
+    }, [hasMatchingDragData, hasExternalFiles]);
+    const onDrop = useCallback(async (e) => {
+        if (!dnd)
+            return;
+        const files = Array.from(e.dataTransfer.files ?? []);
+        const hasFiles = isFileDropTarget && files.length > 0 && dnd.onFileDrop;
+        const draggedData = isDropTarget && dndType ? e.dataTransfer.getData(dndType) : "";
+        const hasEntityDrop = Boolean(isDropTarget && draggedData);
+        if (!hasFiles && !hasEntityDrop)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounter.current = 0;
+        setIsDragOver(false);
+        setIsFileDragOver(false);
+        if (hasFiles) {
+            await dnd.onFileDrop(files);
+            return;
+        }
+        await dnd.onDrop(draggedData);
+    }, [isDropTarget, isFileDropTarget, dnd, dndType]);
+    return {
+        isDragOver,
+        isFileDragOver,
+        draggableProps: isDraggable ? { draggable: true, onDragStart } : {},
+        dropTargetProps: isDropTarget || isFileDropTarget
+            ? {
+                onDragEnterCapture,
+                onDragOverCapture,
+                onDragEnter,
+                onDragLeave,
+                onDragOver,
+                onDrop,
+            }
+            : {},
+    };
+}
+/** Drop zone rendered inside expanded containers so users can move items back to the container root. */
+function ContainerDropZone({ dnd }) {
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [isFileDragOver, setIsFileDragOver] = useState(false);
+    const dragCounter = useRef(0);
+    const acceptsFiles = dnd.canDropFiles?.() ?? false;
+    const acceptsEntities = dnd.canDrop();
+    const hasExternalFiles = (e) => hasExternalFilesData(e.dataTransfer);
+    const hasMatchingDragData = (e) => Boolean((acceptsEntities && e.dataTransfer.types.includes(dnd.type)) ||
+        (acceptsFiles && hasExternalFiles(e)));
+    return (_jsx("div", { onDragEnter: (e) => {
+            if (!hasMatchingDragData(e))
+                return;
+            e.preventDefault();
+            dragCounter.current++;
+            setIsFileDragOver(hasExternalFiles(e));
+            setIsDragOver(true);
+        }, onDragLeave: () => {
+            dragCounter.current--;
+            if (dragCounter.current <= 0) {
+                dragCounter.current = 0;
+                setIsFileDragOver(false);
+                setIsDragOver(false);
+            }
+        }, onDragOver: (e) => {
+            if (!hasMatchingDragData(e))
+                return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = hasExternalFiles(e) ? "copy" : "move";
+        }, onDrop: async (e) => {
+            const files = Array.from(e.dataTransfer.files ?? []);
+            const draggedData = acceptsEntities ? e.dataTransfer.getData(dnd.type) : "";
+            const hasFiles = acceptsFiles && files.length > 0 && dnd.onFileDrop;
+            const hasEntityDrop = Boolean(acceptsEntities && draggedData);
+            if (!hasFiles && !hasEntityDrop)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            dragCounter.current = 0;
+            setIsFileDragOver(false);
+            setIsDragOver(false);
+            if (hasFiles) {
+                await dnd.onFileDrop(files);
+                return;
+            }
+            await dnd.onDrop(draggedData);
+        }, className: cn("mx-2 rounded-md transition-all overflow-hidden", isDragOver
+            ? cn("h-7 flex items-center justify-center gap-1", isFileDragOver
+                ? "bg-primary/10 border border-dashed border-primary"
+                : "bg-primary/10 border border-dashed border-primary/30")
+            : "h-1"), children: isDragOver && (_jsxs(_Fragment, { children: [isFileDragOver && _jsx(Upload, { className: "size-3 text-primary" }), _jsx("span", { className: "text-[10px] text-primary/70", children: getContainerDropZoneLabel(isFileDragOver) })] })) }));
+}
+function NavItemActions({ actions }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 rounded-md text-muted-foreground hover:bg-muted/80 hover:text-foreground", onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }, "aria-label": "More actions", children: _jsx(Ellipsis, { className: "size-3.5" }) }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-56", children: actions.map((action) => (_jsxs("span", { children: [action.separator && _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: (e) => {
+                                e.preventDefault();
+                                void action.handler();
+                            }, className: cn("gap-2", action.destructive && "text-destructive focus:text-destructive"), children: [_jsx(action.icon, { className: cn("size-3.5", action.destructive ? "text-destructive" : "text-muted-foreground") }), _jsx("span", { children: action.label })] })] }, action.label))) })] }));
+}
+function NavRowControls({ item, hasChildren, isExpanded, onToggleExpand, }) {
+    const isDisabled = item.disabled === true;
+    const hasActions = !isDisabled && item.actions && item.actions.length > 0;
+    return (_jsxs("div", { className: "absolute inset-y-0 right-1 flex items-center gap-1 px-1 opacity-0 translate-x-1 pointer-events-none transition-all group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:translate-x-0 group-focus-within:pointer-events-auto", children: [hasActions && _jsx(NavItemActions, { actions: item.actions }), hasChildren && (_jsx("button", { type: "button", onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onToggleExpand?.();
+                }, className: "flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground", "aria-label": isExpanded ? "Collapse" : "Expand", children: _jsx(ChevronRight, { className: cn("size-3.5 transition-transform", isExpanded && "rotate-90") }) }))] }));
+}
+/** Leaf nav item with optional drag-and-drop support via NavItem.dnd. */
+function NavLeafItem({ item, isActive, onClick, depthPl = getNestedNavIndent(0), }) {
+    const isDisabled = item.disabled === true;
+    const hasActions = Boolean(!isDisabled && item.actions && item.actions.length > 0);
+    const { draggableProps, dropTargetProps, isDragOver, isFileDragOver } = useNavItemDnd(item.dnd);
+    const activeRowRef = useActiveNavRowScroll(isActive && hasActions);
+    const activeButtonRef = useActiveNavRowScroll(isActive && !hasActions);
+    // Items with actions use the group layout (button + action controls)
+    if (hasActions) {
+        return (_jsxs("div", { ref: activeRowRef, "data-active-nav-row": isActive ? "true" : undefined, ...(isDisabled ? {} : dropTargetProps), ...(isDisabled ? {} : draggableProps), className: cn("group relative flex items-center w-full rounded-xl border border-transparent transition-colors", isDisabled
+                ? "opacity-40"
+                : isActive
+                    ? ACTIVE_NAV_ROW_CLASS
+                    : "hover:bg-sidebar-accent/70", isDragOver &&
+                !isFileDragOver &&
+                !isDisabled &&
+                "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
+                !isDisabled &&
+                "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsxs("button", { type: "button", disabled: isDisabled, onClick: isDisabled ? undefined : onClick, className: cn("flex items-center gap-2 flex-1 min-w-0 py-1.5 text-sm text-left", depthPl, "pr-3 transition-[padding] duration-150 group-hover:pr-10 group-focus-within:pr-10", isDisabled
+                        ? "text-sidebar-foreground/45 cursor-default"
+                        : isActive
+                            ? ACTIVE_NAV_TEXT_CLASS
+                            : "text-sidebar-foreground/80"), children: [_jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item, hasChildren: false, isExpanded: false })] }));
+    }
+    return (_jsxs("button", { ref: activeButtonRef, "data-active-nav-row": isActive ? "true" : undefined, type: "button", disabled: isDisabled, onClick: isDisabled ? undefined : onClick, ...(isDisabled ? {} : draggableProps), ...(isDisabled ? {} : dropTargetProps), className: cn("flex items-center gap-2 w-full", "rounded-lg border border-transparent pr-3 py-1.5 text-sm text-left", depthPl, isDisabled
+            ? "opacity-40 cursor-default"
+            : "text-sidebar-foreground/80 transition-colors hover:bg-sidebar-accent/70", !isDisabled && isActive && ACTIVE_NAV_ROW_CLASS, isDragOver &&
+            !isFileDragOver &&
+            !isDisabled &&
+            "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
+            !isDisabled &&
+            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: cn("truncate", isActive && !isDisabled && ACTIVE_NAV_TEXT_CLASS), children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] }));
+}
+function SubNavItems({ items, parentPath, depth = 1, }) {
+    const navigate = useNavigate();
+    const currentPath = useLocation().pathname;
+    const setNavContext = useAppStore((s) => s.setNavContext);
+    const navContext = useAppStore((s) => s.navContext);
+    const isOnParent = currentPath === parentPath;
+    const [activeLabel, setActiveLabel] = useState(items[0]?.label ?? "");
+    const childDepthPl = getNestedNavIndent(depth);
+    // Children with unique paths (e.g., SPACES documents) use URL matching;
+    // children sharing the parent path (e.g., Documents sub-filters) use label matching.
+    const allShareParent = items.every((c) => c.to === parentPath);
+    return (_jsx("div", { children: items.map((child) => {
+            const hasNestedChildren = child.children && child.children.length > 0;
+            // Folders with children render as collapsible nested items
+            if (hasNestedChildren) {
+                return _jsx(NestedFolderItem, { item: child, depth: depth }, child.to + child.label);
+            }
+            // Items sharing parent path use label matching (e.g., Documents sub-filters).
+            // Items with unique paths use URL matching. Items whose path equals the
+            // parent path (e.g., folders) are never highlighted on the parent page.
+            const isActive = allShareParent
+                ? isOnParent && activeLabel === child.label
+                : child.to !== parentPath && currentPath === child.to;
+            return (_jsx(NavLeafItem, { item: child, isActive: isActive, depthPl: childDepthPl, onClick: () => {
+                    setActiveLabel(child.label);
+                    setNavContext({
+                        ...navContext,
+                        label: child.label,
+                        description: child.description ?? navContext.description,
+                        meta: child.meta ?? {},
+                        contextInstructions: [navContext.contextInstructions, child.contextInstructions]
+                            .filter(Boolean)
+                            .join("\n") || null,
+                    });
+                    navigate(child.to);
+                } }, child.to + child.label));
+        }) }));
+}
+/** Check if current page is inside a nav item's subtree. */
+function isInSubtree(currentPage, item) {
+    if (currentPage === item.to)
+        return true;
+    return item.children?.some((c) => isInSubtree(currentPage, c)) ?? false;
+}
+/** Nested folder with collapsible children (used inside SubNavItems). */
+function NestedFolderItem({ item, depth }) {
+    const navigate = useNavigate();
+    const currentPath = useLocation().pathname;
+    const setNavContext = useAppStore((s) => s.setNavContext);
+    const navContext = useAppStore((s) => s.navContext);
+    const isInsideSubtree = isInSubtree(currentPath, item);
+    const isActive = currentPath === item.to;
+    const isAncestorActive = isInsideSubtree && !isActive;
+    const [manualOverride, setManualOverride] = useState(null);
+    const isExpanded = manualOverride ?? isInsideSubtree;
+    const { draggableProps, dropTargetProps, isDragOver, isFileDragOver } = useNavItemDnd(item.dnd);
+    const depthPl = getNestedNavIndent(depth);
+    const isDisabled = item.disabled === true;
+    const activeRowRef = useActiveNavRowScroll(isActive);
+    return (_jsxs("div", { ...(isDisabled ? {} : dropTargetProps), children: [_jsxs("div", { ref: activeRowRef, "data-active-nav-row": isActive ? "true" : undefined, ...(isDisabled ? {} : draggableProps), className: cn("group relative flex items-center w-full", "rounded-xl border border-transparent transition-colors", isDisabled
+                    ? "opacity-40"
+                    : isActive
+                        ? ACTIVE_NAV_ROW_CLASS
+                        : "hover:bg-sidebar-accent/70", isDragOver &&
+                    !isFileDragOver &&
+                    !isDisabled &&
+                    "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
+                    !isDisabled &&
+                    "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsxs("button", { type: "button", disabled: isDisabled, onClick: () => {
+                            if (isDisabled)
+                                return;
+                            setManualOverride(true);
+                            setNavContext({
+                                ...navContext,
+                                label: item.label,
+                                description: item.description ?? navContext.description,
+                                meta: item.meta ?? {},
+                                contextInstructions: [navContext.contextInstructions, item.contextInstructions]
+                                    .filter(Boolean)
+                                    .join("\n") || null,
+                            });
+                            navigate(item.to);
+                        }, className: cn("flex items-center gap-2 flex-1 min-w-0", depthPl, "pr-3 py-1.5 text-sm text-left transition-[padding] duration-150 group-hover:pr-16 group-focus-within:pr-16", isDisabled
+                            ? "text-sidebar-foreground/45 cursor-default"
+                            : isActive
+                                ? ACTIVE_NAV_TEXT_CLASS
+                                : isAncestorActive
+                                    ? "text-sidebar-foreground font-medium"
+                                    : "text-sidebar-foreground/80"), children: [_jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled
+                                    ? ACTIVE_NAV_ICON_CLASS
+                                    : isAncestorActive
+                                        ? "text-sidebar-foreground/80"
+                                        : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item, hasChildren: true, isExpanded: isExpanded, onToggleExpand: () => setManualOverride(!isExpanded) })] }), isExpanded && item.children && (_jsxs("div", { children: [item.children.map((child) => {
+                        const hasNestedChildren = child.children && child.children.length > 0;
+                        if (hasNestedChildren) {
+                            return (_jsx(NestedFolderItem, { item: child, depth: depth + 1 }, child.to + child.label));
+                        }
+                        const isChildActive = currentPath === child.to;
+                        return (_jsx(NavLeafItem, { item: child, isActive: isChildActive, depthPl: getNestedNavIndent(depth + 1), onClick: () => {
+                                setNavContext({
+                                    ...navContext,
+                                    label: child.label,
+                                    description: child.description ?? navContext.description,
+                                    meta: child.meta ?? {},
+                                    contextInstructions: [navContext.contextInstructions, child.contextInstructions]
+                                        .filter(Boolean)
+                                        .join("\n") || null,
+                                });
+                                navigate(child.to);
+                            } }, child.to + child.label));
+                    }), item.dnd?.canDrop() && _jsx(ContainerDropZone, { dnd: item.dnd })] }))] }));
+}
+function CollapsibleNavItem({ item }) {
+    const navigate = useNavigate();
+    const currentPath = useLocation().pathname;
+    const setNavContext = useAppStore((s) => s.setNavContext);
+    const navContext = useAppStore((s) => s.navContext);
+    const isInsideSubtree = isInSubtree(currentPath, item);
+    const isActive = currentPath === item.to;
+    const isAncestorActive = isInsideSubtree && !isActive;
+    const [manualOverride, setManualOverride] = useState(null);
+    const isExpanded = manualOverride ?? isInsideSubtree;
+    const hasChildren = Boolean(item.children && item.children.length > 0);
+    const isDisabled = item.disabled === true;
+    const hasActions = Boolean(!isDisabled && item.actions && item.actions.length > 0);
+    const { draggableProps, dropTargetProps, isDragOver, isFileDragOver } = useNavItemDnd(item.dnd);
+    const rendersRow = Boolean(hasChildren || hasActions);
+    const activeRowRef = useActiveNavRowScroll(isActive && rendersRow);
+    const activeLinkRef = useActiveNavRowScroll(isActive && !rendersRow);
+    if (rendersRow) {
+        const inner = (selected, ancestor) => (_jsxs("div", { ref: activeRowRef, "data-active-nav-row": selected ? "true" : undefined, className: cn("group relative flex items-center w-full rounded-xl border border-transparent transition-colors", isDisabled
+                ? "opacity-40"
+                : selected
+                    ? ACTIVE_NAV_ROW_CLASS
+                    : "hover:bg-sidebar-accent/70", isDragOver &&
+                !isFileDragOver &&
+                !isDisabled &&
+                "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
+                !isDisabled &&
+                "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsxs("button", { type: "button", onClick: () => {
+                        if (isDisabled)
+                            return;
+                        setNavContext({
+                            ...navContext,
+                            label: item.label,
+                            description: item.description ?? navContext.description,
+                            meta: item.meta ?? {},
+                            contextInstructions: [navContext.contextInstructions, item.contextInstructions]
+                                .filter(Boolean)
+                                .join("\n") || null,
+                        });
+                        if (hasChildren)
+                            setManualOverride(true);
+                        navigate(item.to);
+                    }, className: cn("flex items-center gap-2 flex-1 min-w-0 px-3 py-2 text-sm text-left", "pr-3 transition-[padding] duration-150 group-hover:pr-16 group-focus-within:pr-16", isDisabled
+                        ? "text-sidebar-foreground/45 cursor-default"
+                        : selected
+                            ? ACTIVE_NAV_TEXT_CLASS
+                            : ancestor
+                                ? "text-sidebar-foreground font-medium"
+                                : "text-sidebar-foreground/85"), disabled: isDisabled, children: [_jsx(item.icon, { className: cn("size-4 shrink-0", selected && !isDisabled
+                                ? ACTIVE_NAV_ICON_CLASS
+                                : ancestor
+                                    ? "text-sidebar-foreground/80"
+                                    : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", selected ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item, hasChildren: Boolean(hasChildren), isExpanded: Boolean(isExpanded), onToggleExpand: hasChildren ? () => setManualOverride(!isExpanded) : undefined })] }));
+        return (_jsxs("div", { ...(isDisabled ? {} : dropTargetProps), ...(isDisabled ? {} : draggableProps), children: [inner(isActive, isAncestorActive), hasChildren && isExpanded && (_jsxs(_Fragment, { children: [_jsx(SubNavItems, { items: item.children, parentPath: item.to }), item.dnd?.canDrop() && _jsx(ContainerDropZone, { dnd: item.dnd })] }))] }));
+    }
+    if (isDisabled) {
+        return (_jsxs("div", { className: cn("flex items-center gap-2 w-full opacity-40", "rounded-lg px-3 py-2 text-left text-sm text-sidebar-foreground/45"), children: [_jsx(item.icon, { className: "size-4 shrink-0 text-sidebar-foreground/45" }), _jsx("span", { className: "truncate", children: item.label })] }));
+    }
+    return (_jsx(NavLink, { ref: activeLinkRef, "data-active-nav-row": currentPath === item.to ? "true" : undefined, to: item.to, ...draggableProps, ...dropTargetProps, className: ({ isActive }) => cn("flex items-center gap-2 w-full", "rounded-xl px-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70", isActive && cn(ACTIVE_NAV_ROW_CLASS, ACTIVE_NAV_TEXT_CLASS), isDragOver &&
+            !isFileDragOver &&
+            "bg-sidebar-selected ring-2 ring-inset ring-sidebar-ring/50", isFileDragOver && "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && "opacity-50"), children: ({ isActive }) => (_jsxs(_Fragment, { children: [_jsx(item.icon, { className: cn("size-4 shrink-0", isActive ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
+                        ? ACTIVE_NAV_BADGE_CLASS
+                        : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] })) }));
+}
+function SidebarResizeHandle() {
+    const setWidth = useSidebarStore((s) => s.setWidth);
+    const width = useSidebarStore((s) => s.width);
+    const dragState = useRef(null);
+    useEffect(() => {
+        const onPointerMove = (event) => {
+            if (!dragState.current)
+                return;
+            const nextWidth = dragState.current.startWidth + (event.clientX - dragState.current.startX);
+            setWidth(nextWidth);
+        };
+        const onPointerUp = (event) => {
+            if (dragState.current && event.pointerId !== dragState.current.pointerId)
+                return;
+            dragState.current = null;
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+        };
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", onPointerUp);
+        window.addEventListener("pointercancel", onPointerUp);
+        return () => {
+            window.removeEventListener("pointermove", onPointerMove);
+            window.removeEventListener("pointerup", onPointerUp);
+            window.removeEventListener("pointercancel", onPointerUp);
+        };
+    }, [setWidth]);
+    return (_jsx("div", { className: "absolute inset-y-0 right-0 z-20 hidden w-3 cursor-col-resize md:block", onPointerDown: (event) => {
+            event.preventDefault();
+            dragState.current = {
+                startX: event.clientX,
+                startWidth: width,
+                pointerId: event.pointerId,
+            };
+            document.body.style.cursor = "col-resize";
+            document.body.style.userSelect = "none";
+        }, onKeyDown: (event) => {
+            if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                setWidth(width - 16);
+            }
+            if (event.key === "ArrowRight") {
+                event.preventDefault();
+                setWidth(width + 16);
+            }
+            if (event.key === "Home") {
+                event.preventDefault();
+                setWidth(SIDEBAR_MIN_WIDTH);
+            }
+            if (event.key === "End") {
+                event.preventDefault();
+                setWidth(SIDEBAR_MAX_WIDTH);
+            }
+        }, role: "separator", "aria-orientation": "vertical", "aria-label": "Resize navigation sidebar", "aria-valuemin": SIDEBAR_MIN_WIDTH, "aria-valuemax": SIDEBAR_MAX_WIDTH, "aria-valuenow": Math.round(width), tabIndex: 0, children: _jsx("div", { className: "absolute inset-y-6 right-0 flex w-3 items-center justify-center opacity-0 transition-opacity group-hover/sidebar:opacity-100", children: _jsx("div", { className: "flex h-14 w-1.5 items-center justify-center rounded-full bg-border/90 text-muted-foreground shadow-sm", children: _jsx(GripVertical, { className: "size-3" }) }) }) }));
+}
+// ThreadIndicator (the "Active thread •" badge under New Thread) was
+// removed — the active conversation's selected row in the Recents
+// group is now the source of truth for "you're in a chat right now".
+// Kept as a comment so future spelunkers know it was intentional.
+function CollapsedNavShortcut({ to, label, icon: Icon, isActive, }) {
+    return (_jsx(NavLink, { to: to, children: _jsx(TooltipIconButton, { tooltip: label, side: "right", className: cn(isActive && "border border-transparent bg-sidebar-selected text-sidebar-foreground"), children: _jsx(Icon, { className: cn("size-4", isActive && "text-primary") }) }) }, to));
+}
+// ---------------------------------------------------------------------------
+// Collapsible nav-group state — persisted per-label in localStorage so the
+// user's "minimised Admin section" choice survives reloads. A single JSON
+// blob keyed on label means we only touch one storage key per render and
+// we can subscribe via useSyncExternalStore for cheap cross-component
+// updates (toggle one group, all SidebarContent instances re-render).
+// ---------------------------------------------------------------------------
+// Generic package-scoped key — ``foundry-web-ui`` is consumed beyond
+// the Spaces app, so we avoid consumer-specific names like
+// ``spaces.nav.collapsed``. Matches the keying style used by the
+// adjacent sidebar-store helpers (``sidebar``, ``sidebar-width``,
+// ``theme``).
+const COLLAPSE_STORAGE_KEY = "sidebar-nav-collapsed";
+let _collapseCache = null;
+const _collapseListeners = new Set();
+function readCollapseMap() {
+    if (_collapseCache)
+        return _collapseCache;
+    if (typeof window === "undefined") {
+        _collapseCache = {};
+        return _collapseCache;
+    }
+    try {
+        const raw = window.localStorage.getItem(COLLAPSE_STORAGE_KEY);
+        _collapseCache = raw ? JSON.parse(raw) : {};
+    }
+    catch {
+        _collapseCache = {};
+    }
+    return _collapseCache;
+}
+function writeCollapseMap(next) {
+    _collapseCache = next;
+    if (typeof window !== "undefined") {
+        try {
+            window.localStorage.setItem(COLLAPSE_STORAGE_KEY, JSON.stringify(next));
+        }
+        catch {
+            // localStorage full / disabled — toggle still works in-memory for
+            // this page session.
+        }
+    }
+    for (const fn of _collapseListeners)
+        fn();
+}
+function subscribeCollapse(fn) {
+    _collapseListeners.add(fn);
+    return () => {
+        _collapseListeners.delete(fn);
+    };
+}
+/**
+ * Read the persisted collapse state for a single group. ``defaultCollapsed``
+ * is the fallback when the user has never toggled this group.
+ */
+function useGroupCollapsed(label, defaultCollapsed) {
+    const map = useSyncExternalStore(subscribeCollapse, readCollapseMap, readCollapseMap);
+    // Use ``hasOwnProperty`` instead of the ``in`` operator so a label
+    // that happens to collide with a prototype key (e.g. ``toString``,
+    // ``__proto__``, ``constructor``) is not treated as a persisted
+    // entry. ``map`` is parsed JSON so its prototype is ``Object``'s.
+    return Object.prototype.hasOwnProperty.call(map, label)
+        ? map[label]
+        : Boolean(defaultCollapsed);
+}
+function toggleGroupCollapsed(label, current) {
+    writeCollapseMap({ ...readCollapseMap(), [label]: !current });
+}
+/**
+ * Walk a group's items (and their children) to find the first statusDot.
+ * Used to "bubble up" the active-chat indicator onto a collapsed group
+ * header — so the user never loses sight of "your active conversation is
+ * inside this minimised section".
+ */
+function findFirstStatusDot(items) {
+    for (const item of items) {
+        if (item.statusDot)
+            return item.statusDot;
+        if (item.children && item.children.length > 0) {
+            const nested = findFirstStatusDot(item.children);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+}
+/**
+ * Render a single nav group: label header (with optional collapse
+ * chevron + bubbled-up status dot) + child items. Pulled out into its
+ * own component so each group's collapse state is its own hook scope
+ * — toggling one doesn't re-render siblings.
+ */
+function NavGroupSection({ group }) {
+    // hideLabel + collapsible are mutually exclusive — a hidden label
+    // can't host a chevron. The collapsible flag is the opt-in; legacy
+    // groups stay uncollapsable so behaviour is unchanged.
+    const isCollapsible = !group.hideLabel && Boolean(group.collapsible);
+    const persistedCollapsed = useGroupCollapsed(group.label, group.defaultCollapsed);
+    const collapsed = isCollapsible && persistedCollapsed;
+    // Bubble: show the first child statusDot on the collapsed header so
+    // the user never loses sight of "the active chat is inside this
+    // minimised group". Only render when actually collapsed.
+    const bubbledStatusDot = collapsed ? findFirstStatusDot(group.items) : undefined;
+    return (_jsxs("div", { "data-nav-group-label": group.label, children: [!group.hideLabel && (
+            // Outer padding matches the depth-0 item button's ``px-3`` so
+            // the chevron / leading spacer sits in the SAME icon column as
+            // item icons, and the group label ends up at the exact x-coordinate
+            // as item labels. See ``SIDEBAR_GROUP_HEADER_PADDING`` definition
+            // for the alignment invariant.
+            _jsx("div", { className: SIDEBAR_GROUP_HEADER_PADDING, children: isCollapsible ? (
+                // Collapsible header is a flex of three siblings: chevron
+                // toggle (own button), label (NavLink when ``group.to``
+                // is set so the user can still navigate to the group
+                // landing page — Workspaces does this), createActions
+                // menu. Three SIBLINGS, not nested, so HTML stays valid
+                // (no <button> inside <button> / inside Radix's button).
+                //
+                // Geometry: the chevron occupies the SAME width as item
+                // icons (``SIDEBAR_ITEM_ICON_CLASS``) followed by
+                // ``SIDEBAR_ITEM_GAP_CLASS``, so the group label and the
+                // item labels share an exact x-coordinate. The chevron's
+                // click target is larger than its visual size — extended
+                // via padding on the wrapper button — so users don't have
+                // to hit a tiny target. The clickable invisible padding
+                // OVERLAPS the gap rather than pushing the label right
+                // (negative-margin + extra padding cancel out).
+                _jsxs("div", { className: cn("group/header flex items-center justify-between rounded-lg transition-colors hover:bg-sidebar-accent/70", SIDEBAR_ITEM_GAP_CLASS), children: [_jsx("button", { type: "button", "data-nav-group-toggle": true, onClick: () => toggleGroupCollapsed(group.label, persistedCollapsed), "aria-expanded": !collapsed, "aria-label": collapsed ? `Expand ${group.label}` : `Collapse ${group.label}`, 
+                            // Visual cell width = ``SIDEBAR_ITEM_ICON_CLASS`` (14px)
+                            // so the chevron sits in the same column as item icons
+                            // and the group label aligns with item labels. The
+                            // chevron SVG (``size-3`` = 12px) is smaller than the
+                            // cell so it reads as a hint, not a primary control.
+                            // Hit area is the cell width; the row's ``group/header``
+                            // hover state covers the rest of the strip so users get
+                            // visual feedback even on near-misses.
+                            className: cn("inline-flex items-center justify-center rounded text-sidebar-foreground/50 hover:text-sidebar-foreground", SIDEBAR_ITEM_ICON_CLASS), children: collapsed ? (_jsx(ChevronRight, { className: "size-3.5 transition-transform" })) : (_jsx(ChevronDown, { className: "size-3.5 transition-transform" })) }), group.to ? (_jsx(NavLink, { to: group.to, end: true, className: "flex min-w-0 flex-1 items-center gap-1.5 py-1.5", children: ({ isActive }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("truncate", SIDEBAR_GROUP_HEADER_LABEL_CLASS, isActive
+                                            ? "text-sidebar-selected-foreground"
+                                            : "text-sidebar-foreground/65 group-hover/header:text-sidebar-foreground"), children: group.label }), _jsx(NavStatusDot, { statusDot: bubbledStatusDot })] })) })) : (_jsxs("button", { type: "button", onClick: () => toggleGroupCollapsed(group.label, persistedCollapsed), className: "flex min-w-0 flex-1 items-center gap-1.5 py-1.5 text-left", children: [_jsx("span", { className: cn("truncate text-sidebar-foreground/65 group-hover/header:text-sidebar-foreground", SIDEBAR_GROUP_HEADER_LABEL_CLASS), children: group.label }), _jsx(NavStatusDot, { statusDot: bubbledStatusDot })] })), group.createActions && group.createActions.length > 0 && (_jsx(CreateActionsMenu, { group: group }))] })) : group.to ? (
+                // Non-collapsible header: no chevron, but we still emit an
+                // invisible spacer of ``SIDEBAR_ITEM_ICON_CLASS`` width + the
+                // shared gap so the group label lands in the same column as
+                // collapsible headers and item labels.
+                _jsxs("div", { className: cn("flex items-center justify-between rounded-lg py-1.5 transition-colors hover:bg-sidebar-accent/70", SIDEBAR_ITEM_GAP_CLASS), children: [_jsx("span", { "aria-hidden": "true", className: SIDEBAR_ITEM_ICON_CLASS }), _jsx(NavLink, { to: group.to, end: true, className: "min-w-0 flex-1", children: ({ isActive }) => (_jsx("span", { className: cn("block", SIDEBAR_GROUP_HEADER_LABEL_CLASS, isActive
+                                    ? "text-sidebar-selected-foreground"
+                                    : "text-sidebar-foreground/65 hover:text-sidebar-foreground"), children: group.label })) }), group.createActions && group.createActions.length > 0 && (_jsx(CreateActionsMenu, { group: group }))] })) : (_jsxs("div", { className: cn("flex items-center", SIDEBAR_ITEM_GAP_CLASS), children: [_jsx("span", { "aria-hidden": "true", className: SIDEBAR_ITEM_ICON_CLASS }), _jsx("span", { className: cn("text-sidebar-foreground/65", SIDEBAR_GROUP_HEADER_LABEL_CLASS), children: group.label })] })) })), !collapsed &&
+                group.items.map((item) => (_jsx(CollapsibleNavItem, { item: item }, item.to + item.label)))] }));
+}
+/**
+ * The "+" dropdown shown next to a group label when the group declares
+ * ``createActions``. Pulled out so both the collapsible-button branch
+ * and the legacy plain-label branch can render it identically.
+ *
+ * The trigger button stops click propagation so opening the menu
+ * doesn't also toggle the surrounding collapsible-header button.
+ */
+function CreateActionsMenu({ group }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: (e) => e.stopPropagation(), className: "inline-flex size-6 items-center justify-center text-sidebar-foreground/65 transition-colors hover:text-sidebar-foreground", "aria-label": `Create in ${group.label}`, children: _jsx(Plus, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-48", children: (group.createActions ?? []).map((action) => (_jsx(DropdownMenuItem, { onSelect: (e) => {
+                        e.preventDefault();
+                        action.handler();
+                    }, children: action.label }, action.id))) })] }));
+}
+function SidebarContent({ collapsed }) {
+    const toggle = useSidebarStore((s) => s.toggle);
+    const handleNewConversation = useNewConversation();
+    const rawNavConfig = useNavStore((s) => s.config);
+    const navLoading = useNavStore((s) => s.navLoading);
+    // Sort by `priority` descending so feature hooks can declare slot
+    // intent (e.g. "Recents above Tasks") instead of relying on the
+    // order in which addGroup() happened to be called. Stable sort: ties
+    // preserve insertion order, so groups that don't set a priority keep
+    // the legacy append-where-you-arrive behaviour.
+    const navConfig = useMemo(() => [...rawNavConfig]
+        .map((g, i) => ({ g, i, p: g.priority ?? 0 }))
+        .sort((a, b) => b.p - a.p || a.i - b.i)
+        .map(({ g }) => g), [rawNavConfig]);
+    // Show skeleton rows during the cold nav fetch — but only until the
+    // integrator's primary dynamic group ("Workspaces") has been published.
+    // Once it exists, real rows render even if a later phase (status dots) is
+    // still resolving, so the skeleton never flashes over a populated tree.
+    const hasWorkspacesGroup = navConfig.some((group) => group.label === "Workspaces");
+    const showNavSkeleton = navLoading && !hasWorkspacesGroup;
+    const currentPage = useLocation().pathname;
+    const navContext = useAppStore((s) => s.navContext);
+    useScrollActiveNavRow(currentPage, navConfig, collapsed);
+    const preventNativeFileDrop = useCallback((e) => {
+        if (!e.dataTransfer.types.includes("Files"))
+            return;
+        e.preventDefault();
+    }, []);
+    if (collapsed) {
+        return (_jsxs("div", { className: "flex flex-col items-center gap-1 py-3 flex-1", children: [_jsx(TooltipIconButton, { tooltip: "Expand sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeftOpen, { className: "size-5" }) }), _jsx(TooltipIconButton, { tooltip: "New Thread", side: "right", onClick: handleNewConversation, children: _jsx(SquarePen, { className: "size-4" }) }), _jsx("div", { className: "mt-4 flex w-full flex-col items-stretch gap-1", children: navConfig
+                        .map((group, groupIndex) => {
+                        // Modules with a non-flat collapsed rail (e.g. Spaces'
+                        // "header + active workspace") supply `collapsedRail`; the
+                        // shell stays module-agnostic.
+                        const items = group.collapsedRail
+                            ? group
+                                .collapsedRail({
+                                currentPage,
+                                navContextMeta: navContext.meta ?? {},
+                            })
+                                .map((it) => ({
+                                to: it.to,
+                                label: it.label,
+                                icon: it.icon,
+                                isActive: it.isActive,
+                            }))
+                            : group.items.map((it) => ({
+                                to: it.to,
+                                label: it.label,
+                                icon: it.icon,
+                                isActive: currentPage === it.to,
+                            }));
+                        return { group, groupIndex, items };
+                    })
+                        .filter(({ items }) => items.length > 0)
+                        .map(({ group, groupIndex, items }, visibleIndex) => (
+                    // Each non-first VISIBLE group gets a thin top border —
+                    // visually separates groups (e.g. user Workspaces vs
+                    // Admin) in the collapsed rail without changing the
+                    // CollapsedRailItem shape. The wrapper itself is a centred
+                    // column so icons stay aligned with the rail.
+                    _jsx("div", { className: cn("flex flex-col items-center gap-1", visibleIndex > 0 && "mt-2 pt-2 border-t border-sidebar-border/40"), children: items.map(({ to, label, icon, isActive }) => (_jsx(CollapsedNavShortcut, { to: to, label: label, icon: icon, isActive: isActive }, to))) }, `${group.label || ""}-${groupIndex}`))) })] }));
+    }
+    return (_jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsx(NavLink, { to: "/", className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: _jsx(AppBrand, { iconClassName: "text-primary", labelClassName: "truncate text-sm font-semibold text-sidebar-foreground" }) }), _jsx(TooltipIconButton, { tooltip: "Collapse sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeft, { className: "size-5" }) })] }), _jsx("div", { className: "px-1 mb-0.5", children: _jsxs("button", { type: "button", onClick: handleNewConversation, className: cn("flex items-center gap-2 w-full", "rounded-xl px-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70"), children: [_jsx(SquarePen, { className: "size-4 shrink-0 text-sidebar-foreground/60" }), "New Thread"] }) }), _jsxs("nav", { className: "flex-1 overflow-y-auto px-1 pb-16", onDragOverCapture: preventNativeFileDrop, onDropCapture: preventNativeFileDrop, children: [navConfig.map((group) => (_jsx(NavGroupSection, { group: group }, group.label))), showNavSkeleton && (_jsx("div", { className: "space-y-1 px-1 pt-2", "aria-hidden": "true", children: Array.from({ length: 6 }).map((_, index) => (_jsx("div", { className: "h-7 mx-1 rounded-lg animate-pulse bg-sidebar-accent/40" }, index))) }))] }), _jsx(SidebarFooterActions, {})] }));
+}
+function SidebarFooterActions() {
+    const footerActions = useNavStore((s) => s.footerActions);
+    if (footerActions.length === 0)
+        return null;
+    return (_jsx("div", { className: "shrink-0 space-y-0.5 px-3 py-2", children: footerActions.map((action) => (_jsxs("button", { type: "button", onClick: action.onToggle, className: cn("w-full flex items-center gap-2 px-2 py-1.5 rounded-md", "text-xs text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"), children: [_jsx("span", { className: cn("size-2 rounded-full border", action.active
+                        ? "border-sidebar-primary bg-sidebar-primary"
+                        : "border-sidebar-foreground/30") }), action.active ? (action.activeLabel ?? action.label) : action.label] }, action.id))) }));
+}
+/** Mobile drawer overlay */
+function MobileDrawer() {
+    const isMobileOpen = useSidebarStore((s) => s.isMobileOpen);
+    const closeMobile = useSidebarStore((s) => s.closeMobile);
+    const isToolPanelOpen = useToolPanelStore((s) => s.isOpen);
+    const width = useSidebarStore((s) => s.width);
+    const drawerWidth = Math.min(width, typeof window !== "undefined" ? window.innerWidth - 24 : width);
+    // Close on Escape — but only if ToolPanel is not open (it has its own Escape handler)
+    useEffect(() => {
+        if (!isMobileOpen)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === "Escape" && !isToolPanelOpen) {
+                closeMobile();
+            }
+        };
+        window.addEventListener("keydown", handleEscape);
+        return () => window.removeEventListener("keydown", handleEscape);
+    }, [isMobileOpen, isToolPanelOpen, closeMobile]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("fixed inset-0 z-50 bg-black/50 transition-opacity duration-200", isMobileOpen ? "opacity-100" : "opacity-0 pointer-events-none"), onClick: closeMobile, "aria-hidden": "true" }), _jsx("aside", { className: cn("fixed top-0 left-0 z-50 h-dvh", "flex flex-col", "border-r border-sidebar-border/60 bg-sidebar text-sidebar-foreground shadow-xl", "transition-transform duration-200 ease-in-out", isMobileOpen ? "translate-x-0" : "-translate-x-full"), style: { width: drawerWidth }, role: "complementary", "aria-label": "Navigation sidebar", children: _jsx(SidebarContent, { collapsed: false }) })] }));
+}
+/** Desktop inline sidebar (expanded or collapsed rail) */
+function DesktopSidebar() {
+    const isOpen = useSidebarStore((s) => s.isOpen);
+    const width = useSidebarStore((s) => s.width);
+    return (_jsxs("aside", { className: cn("group/sidebar relative hidden md:flex flex-col shrink-0", "h-full", "border-r border-sidebar-border/60 bg-sidebar text-sidebar-foreground", "transition-[width] duration-200 ease-in-out", "overflow-hidden"), style: { width: isOpen ? width : RAIL_WIDTH }, role: "complementary", "aria-label": "Navigation sidebar", children: [_jsx(SidebarContent, { collapsed: !isOpen }), isOpen && _jsx(SidebarResizeHandle, {})] }));
+}
+export function Sidebar() {
+    return (_jsxs(_Fragment, { children: [_jsx(MobileDrawer, {}), _jsx(DesktopSidebar, {})] }));
+}