@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/navigation/core-app-sidebar.mjs

@@ -0,0 +1,1288 @@
+import { Badge } from "../badge.mjs";
+import { HoverTooltip, TooltipProvider } from "../tooltip.mjs";
+import { Button } from "../button.mjs";
+import { ScrollArea } from "../scroll-area.mjs";
+import { Sheet, SheetContent } from "../sheet.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../dropdown-menu.mjs";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar.mjs";
+import { FLOAT_SHADOW } from "../float-shadow.mjs";
+import { Separator } from "../separator.mjs";
+import { useDocumentDir } from "../use-document-dir.mjs";
+import { Switcher } from "./switcher.mjs";
+import { AlertTriangle, BarChart3, Bell, Building2, Camera, Check, ChevronDown, ChevronLeft, ChevronRight, ClipboardCheck, Clock, Cloud, Eye, Globe, Home, LayoutGrid, LifeBuoy, LogOut, Moon, MoreHorizontal, Package, PanelLeftOpen, PanelRightOpen, Plus, Search, Settings, Sparkles, Sun, TrendingUp, Users, Video } from "lucide-react";
+import { Fragment, forwardRef, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/navigation/core-app-sidebar.tsx
+const DEFAULT_SIDEBAR_LABELS = {
+	find: "Find...",
+	clearSearch: "Clear search",
+	noResults: "No results",
+	noResultsHint: (query) => `No nav items match "${query}"`,
+	collapseAll: "Collapse all",
+	expandAll: "Expand all",
+	collapseAllGroups: "Collapse all groups",
+	expandAllGroups: "Expand all groups",
+	notificationsEmpty: "You're all caught up",
+	viewAllNotifications: "View all notifications",
+	unreadCount: (count) => `${count} unread`,
+	collapseGroup: (group) => `Collapse ${group}`,
+	expandGroup: (group) => `Expand ${group}`,
+	expandSidebar: "Expand sidebar",
+	collapseSidebar: "Collapse sidebar",
+	pinSidebar: "Pin sidebar",
+	theme: "Theme",
+	themeToggle: (mode) => `Use ${mode} theme`,
+	logOut: "Log Out",
+	source: "Source",
+	openNotifications: "Open notifications",
+	notifications: "Notifications",
+	notificationsAll: "All",
+	notificationsProjects: "Projects",
+	notificationsSystem: "System",
+	profileMenu: (name) => `Open ${name} profile menu`,
+	orgSearchPlaceholder: "Find organization…",
+	orgEmpty: "No organizations",
+	orgViewAll: "View all organizations"
+};
+const THEME_KEY = "wc3.theme";
+const COLLAPSE_KEY = "wc3.sidebar.collapsed";
+const DEFAULT_PROJECT_GROUPS = [
+	{ items: [{
+		id: "proj-dashboard",
+		label: "Dashboard",
+		icon: LayoutGrid
+	}] },
+	{
+		label: "Workforce",
+		items: [
+			{
+				id: "proj-verify-time",
+				label: "Verify Time",
+				icon: Clock
+			},
+			{
+				id: "proj-site-workforce",
+				label: "Site Workforce",
+				icon: Users
+			},
+			{
+				id: "proj-reports",
+				label: "Reports",
+				icon: ClipboardCheck
+			}
+		]
+	},
+	{
+		label: "Site Operations",
+		items: [
+			{
+				id: "proj-network-admin",
+				label: "Network Administrator",
+				icon: Globe
+			},
+			{
+				id: "proj-map",
+				label: "Map",
+				icon: Globe
+			},
+			{
+				id: "proj-vision-ai",
+				label: "Vision AI",
+				icon: Eye
+			},
+			{
+				id: "proj-observation-mgr",
+				label: "Observation Manager",
+				icon: AlertTriangle
+			}
+		]
+	},
+	{
+		label: "Tools",
+		items: [
+			{
+				id: "proj-verify-response",
+				label: "Verify Response",
+				icon: Check
+			},
+			{
+				id: "proj-weather",
+				label: "Weather Station",
+				icon: Cloud
+			},
+			{
+				id: "proj-equipment",
+				label: "Equipments",
+				icon: Settings
+			},
+			{
+				id: "proj-wecare",
+				label: "Wecare",
+				icon: LifeBuoy
+			},
+			{
+				id: "proj-capture",
+				label: "Capture",
+				icon: Camera
+			}
+		]
+	}
+];
+const DEFAULT_ORG_GROUPS = [
+	{ items: [{
+		id: "org-overview",
+		label: "Overview",
+		icon: LayoutGrid
+	}, {
+		id: "org-projects",
+		label: "Projects",
+		icon: Package
+	}] },
+	{
+		label: "Monitoring",
+		items: [
+			{
+				id: "org-compliance",
+				label: "Compliance Forms",
+				icon: ClipboardCheck
+			},
+			{
+				id: "org-observations",
+				label: "Observations",
+				icon: Eye
+			},
+			{
+				id: "org-cctv",
+				label: "CCTV",
+				icon: Video
+			},
+			{
+				id: "org-progress",
+				label: "Progress",
+				icon: TrendingUp
+			}
+		]
+	},
+	{
+		label: "Intelligence",
+		items: [
+			{
+				id: "org-reality-capture",
+				label: "Reality Capture",
+				icon: Camera
+			},
+			{
+				id: "org-ai-reports",
+				label: "AI Reports",
+				icon: Sparkles
+			},
+			{
+				id: "org-workforce",
+				label: "Workforce Intelligence",
+				icon: Users
+			},
+			{
+				id: "org-performance",
+				label: "Performance",
+				icon: BarChart3
+			}
+		]
+	},
+	{ items: [{
+		id: "org-settings",
+		label: "Settings",
+		icon: Settings,
+		expandable: true,
+		subMenu: {
+			title: "Settings",
+			groups: [{ items: [
+				{
+					id: "os-general",
+					label: "General",
+					icon: Settings
+				},
+				{
+					id: "os-members",
+					label: "Members",
+					icon: Users
+				},
+				{
+					id: "os-billing",
+					label: "Billing",
+					icon: Clock
+				},
+				{
+					id: "os-integrations",
+					label: "Integrations",
+					icon: Building2
+				}
+			] }]
+		}
+	}] }
+];
+/** Demo data for prototypes. Real callers pass `notifications`. */
+const SAMPLE_NOTIFICATIONS = [
+	{
+		id: "n1",
+		title: "Deployment succeeded",
+		body: "owner-dashboard deployed to production",
+		time: "2m ago",
+		unread: true
+	},
+	{
+		id: "n2",
+		title: "Build failed",
+		body: "modon-prototype build #42 failed",
+		time: "1h ago",
+		unread: true
+	},
+	{
+		id: "n3",
+		title: "New team member",
+		body: "ali@core.com joined Organization Name",
+		time: "3h ago",
+		unread: false
+	},
+	{
+		id: "n4",
+		title: "Usage alert",
+		body: "You've reached 80% of your monthly limit",
+		time: "1d ago",
+		unread: false
+	},
+	{
+		id: "n5",
+		title: "Pipeline finished",
+		body: "BIM intake processed 1,204 records",
+		time: "1d ago",
+		unread: false
+	},
+	{
+		id: "n6",
+		title: "Permit approved",
+		body: "Hot work permit HW-2291 was approved",
+		time: "2d ago",
+		unread: false
+	},
+	{
+		id: "n7",
+		title: "Report ready",
+		body: "Weekly workforce summary is ready to read",
+		time: "2d ago",
+		unread: false
+	},
+	{
+		id: "n8",
+		title: "Device offline",
+		body: "Gateway GW-17 stopped reporting",
+		time: "3d ago",
+		unread: false
+	},
+	{
+		id: "n9",
+		title: "Process published",
+		body: "Inspection routing v4 is live",
+		time: "4d ago",
+		unread: false
+	}
+];
+function CoreWLogo({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 278.78 176.15",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		fill: "currentColor",
+		className,
+		children: /* @__PURE__ */ jsx("path", { d: "M65.58,4.66l21.91,30.92,20.8-31.16,62.09-.03,21.5,31.2s21.05-31.2,21.21-31.2h62.08v62.09s-52.28,105.07-52.28,105.07l-62.09-.05-21.48-30.97-21.05,31.02h-62.09S3.49,66.77,3.49,66.77V4.67h62.09Z" })
+	});
+}
+const INERT = { inert: "" };
+const SIDEBAR_DENSITY = {
+	comfortable: {
+		container: "wwc:pl-2 wwc:pr-3 wwc:py-2",
+		row: "wwc:gap-3 wwc:px-3 wwc:py-[7px] wwc:text-[13px]",
+		iconSize: "wwc:h-[15px] wwc:w-[15px]",
+		pinnedRow: "wwc:gap-3 wwc:px-3 wwc:py-[7px] wwc:text-[13px]",
+		pinnedIconSize: "wwc:h-[15px] wwc:w-[15px]",
+		spacing: "wwc:space-y-0.5",
+		pinnedSpacing: "wwc:space-y-0.5",
+		brandMark: "wwc:h-[18px] wwc:w-auto",
+		toneChip: "wwc:h-[22px] wwc:w-[22px]",
+		toneIconSize: "wwc:h-[13px] wwc:w-[13px]",
+		groupGap: "wwc:mt-1",
+		separator: "wwc:my-2",
+		groupLabel: "wwc:px-3 wwc:pt-2 wwc:pb-1 wwc:text-[10px]",
+		groupGuide: "wwc:left-[19px] wwc:top-[26px] wwc:bottom-[16px]",
+		groupGuideIndent: "wwc:pl-[28px]",
+		groupElbow: "wwc:left-[-8px] wwc:w-[8px]",
+		subGroupLabel: "wwc:px-3 wwc:py-1.5 wwc:text-[10px]",
+		backButton: "wwc:px-3 wwc:py-2 wwc:mb-1 wwc:text-[13px]",
+		header: "wwc:h-11 wwc:px-3",
+		footer: "wwc:px-3 wwc:py-2 wwc:gap-2"
+	},
+	compact: {
+		container: "wwc:pl-1.5 wwc:pr-2.5 wwc:py-1.5",
+		row: "wwc:gap-2 wwc:px-2 wwc:py-1 wwc:text-[12px]",
+		iconSize: "wwc:h-[14px] wwc:w-[14px]",
+		pinnedRow: "wwc:gap-2.5 wwc:px-2 wwc:py-[6px] wwc:text-[12.5px]",
+		pinnedIconSize: "wwc:h-[15px] wwc:w-[15px]",
+		spacing: "wwc:space-y-0.5",
+		pinnedSpacing: "wwc:space-y-1",
+		brandMark: "wwc:h-[14px] wwc:w-auto",
+		toneChip: "wwc:h-5 wwc:w-5",
+		toneIconSize: "wwc:h-3 wwc:w-3",
+		groupGap: "wwc:mt-1",
+		separator: "wwc:my-1",
+		groupLabel: "wwc:px-2 wwc:pt-1.5 wwc:pb-0.5 wwc:text-[9px]",
+		groupGuide: "wwc:left-[15px] wwc:top-[21px] wwc:bottom-[12px]",
+		groupGuideIndent: "wwc:pl-[22px]",
+		groupElbow: "wwc:left-[-6px] wwc:w-[6px]",
+		subGroupLabel: "wwc:px-2 wwc:py-1 wwc:text-[9px]",
+		backButton: "wwc:px-2 wwc:py-1 wwc:mb-0.5 wwc:text-[12px]",
+		header: "wwc:h-9 wwc:px-2",
+		footer: "wwc:px-2 wwc:py-1 wwc:gap-1.5"
+	}
+};
+/** App sidebar with org switcher, search, grouped navigation, profile, and notifications. */
+/** The sidebar body. `CoreAppSidebar` renders this inline on desktop and inside a left sheet on mobile. */
+function SidebarShell({ onNavigate, onNavigateItem, labels, seamless = false, onPin, viewLevel = "project", orgGroups, projectGroups, density = "comfortable", collapsed = false, onCollapsedChange, activeItemId, platformStatus, showSearch = true, showNotifications = true, showFooter = true, theme: themeProp, onThemeChange, footerContent, logo, logoCollapsed, orgs, activeOrg, activeOrgLogo, onOrgChange, onOrgViewAll, user, onLogout, showHome = true, homeLabel = "Home", searchLabel = "Search", onSearch, searchActive = false, searchShortcut, notificationsLabel = "Notifications", onNotifications, notificationsActive = false, unreadNotifications = 0, onViewAllNotifications, notifications, onNotificationSelect, showHomeDivider = true, variant = "list", showGroupDividers: showGroupDividersProp, groupsCollapsedByDefault: groupsCollapsedByDefaultProp, onHome, homeActive = false, showMarketplace = true, marketplaceLabel = "Marketplace", onMarketplace, marketplaceActive = false, pinnedTop, brandName = "WC3", onGroupSelect, activeGroupId, hideCollapse = false } = {}) {
+	const treeVariant = variant === "tree";
+	const showGroupDividers = showGroupDividersProp ?? !treeVariant;
+	const groupsCollapsedByDefault = groupsCollapsedByDefaultProp ?? treeVariant;
+	const isApple = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+	const searchHint = searchShortcut ? `${isApple ? "⌘" : "Ctrl+"}${searchShortcut.toUpperCase()}` : void 0;
+	const onSearchRef = useRef(onSearch);
+	onSearchRef.current = onSearch;
+	useEffect(() => {
+		if (!searchShortcut) return;
+		const key = searchShortcut.toLowerCase();
+		const handle = (event) => {
+			if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+			if (event.key.toLowerCase() !== key) return;
+			if (!onSearchRef.current) return;
+			event.preventDefault();
+			onSearchRef.current();
+		};
+		document.addEventListener("keydown", handle);
+		return () => document.removeEventListener("keydown", handle);
+	}, [searchShortcut]);
+	const panelNotifications = notifications ?? SAMPLE_NOTIFICATIONS;
+	const unreadBadge = unreadNotifications > 0 ? unreadNotifications > 99 ? "99+" : String(unreadNotifications) : null;
+	const pinnedEntries = [
+		...showSearch ? [{
+			key: "search",
+			label: searchLabel,
+			icon: Search,
+			onSelect: onSearch,
+			active: searchActive,
+			hint: searchHint
+		}] : [],
+		...pinnedTop ? [{
+			key: "pinned",
+			label: pinnedTop.label,
+			icon: pinnedTop.icon,
+			onSelect: pinnedTop.onSelect,
+			active: pinnedTop.active
+		}] : [],
+		...showHome ? [{
+			key: "home",
+			label: homeLabel,
+			icon: Home,
+			onSelect: onHome,
+			active: homeActive
+		}] : [],
+		...showNotifications ? [{
+			key: "notifications",
+			label: notificationsLabel,
+			icon: Bell,
+			onSelect: onNotifications,
+			active: notificationsActive,
+			badge: unreadBadge,
+			builtInNotifications: !onNotifications
+		}] : []
+	];
+	const pinnedBlock = pinnedEntries.length > 0;
+	const pinnedBlockDivider = pinnedEntries.some((e) => e.key !== "home") || showHomeDivider;
+	const d = SIDEBAR_DENSITY[density];
+	const L = {
+		...DEFAULT_SIDEBAR_LABELS,
+		...labels
+	};
+	const navDir = useDocumentDir();
+	const profileName = user?.name ?? "Abdullah Alzahrani";
+	const profileEmail = user ? user.email : "abdullah@core.com";
+	const profileAvatar = user?.avatarUrl;
+	const profileInitials = user ? profileName.split(/\s+/).map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase() : "";
+	const selectedOrgName = activeOrg ?? orgs?.[0] ?? "";
+	const statusCommit = platformStatus?.commit;
+	const statusBranch = platformStatus?.branch;
+	const ddItemClass = density === "compact" ? "wwc:flex wwc:items-center wwc:justify-between wwc:py-1.5" : "wwc:flex wwc:items-center wwc:justify-between wwc:py-2.5";
+	const ddRowClass = density === "compact" ? "wwc:flex wwc:items-center wwc:justify-between wwc:px-2 wwc:py-1.5" : "wwc:flex wwc:items-center wwc:justify-between wwc:px-2 wwc:py-2.5";
+	const ddTextClass = density === "compact" ? "wwc:text-[12px]" : "wwc:text-[13px]";
+	const ddIconClass = density === "compact" ? "wwc:h-3.5 wwc:w-3.5" : "wwc:h-4 wwc:w-4";
+	const [view, setView] = useState("main");
+	const [activeSubMenuId, setActiveSubMenuId] = useState(null);
+	const [activeItem, setActiveItem] = useState("projects");
+	const [notifOpen, setNotifOpen] = useState(false);
+	const [themeState, setThemeState] = useState(() => {
+		try {
+			const saved = typeof window !== "undefined" ? window.localStorage.getItem(THEME_KEY) : null;
+			if (saved === "dark" || saved === "light") return saved;
+		} catch {}
+		return typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light";
+	});
+	useEffect(() => {
+		if (themeProp === void 0 && typeof document !== "undefined") document.documentElement.classList.toggle("dark", themeState === "dark");
+	}, []);
+	const theme = themeProp ?? themeState;
+	const applyTheme = (m) => {
+		if (themeProp === void 0) {
+			setThemeState(m);
+			if (typeof document !== "undefined") document.documentElement.classList.toggle("dark", m === "dark");
+			try {
+				window.localStorage.setItem(THEME_KEY, m);
+			} catch {}
+		}
+		onThemeChange?.(m);
+	};
+	const renderProfileMenu = (side = "top", align = "start") => /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		side,
+		align,
+		className: "wwc:w-[280px] wwc:rounded-xl",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "wwc:font-normal",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "wwc:min-w-0",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: `wwc:font-semibold wwc:text-foreground wwc:truncate ${density === "compact" ? "wwc:text-[12px]" : "wwc:text-[13px]"}`,
+						children: profileName
+					}), profileEmail && /* @__PURE__ */ jsx("div", {
+						className: `wwc:text-muted-foreground wwc:truncate ${density === "compact" ? "wwc:text-[11px]" : "wwc:text-[12px]"}`,
+						children: profileEmail
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsxs("div", {
+				className: ddRowClass,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: `${ddTextClass} wwc:text-foreground/80`,
+					children: L.theme
+				}), /* @__PURE__ */ jsx("div", {
+					className: "wwc:flex wwc:items-center wwc:gap-0.5 wwc:border wwc:rounded-lg wwc:p-0.5",
+					children: ["light", "dark"].map((m) => {
+						const Icon = m === "light" ? Sun : Moon;
+						return /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							icon: true,
+							"aria-label": L.themeToggle(m),
+							onClick: (e) => {
+								e.preventDefault();
+								applyTheme(m);
+							},
+							className: `${density === "compact" ? "wwc:h-6 wwc:w-6" : "wwc:h-7 wwc:w-7"} ${theme === m ? "wwc:bg-muted wwc:text-foreground" : "wwc:text-muted-foreground/70 wwc:hover:text-foreground"}`,
+							children: /* @__PURE__ */ jsx(Icon, { className: density === "compact" ? "wwc:h-3 wwc:w-3" : "wwc:h-3.5 wwc:w-3.5" })
+						}, m);
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: ddItemClass,
+				onClick: onLogout,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: ddTextClass,
+					children: L.logOut
+				}), /* @__PURE__ */ jsx(LogOut, { className: `${ddIconClass} wwc:text-muted-foreground` })]
+			}),
+			(statusBranch || statusCommit) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs("div", {
+				className: "wwc:px-2 wwc:py-3",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "wwc:text-[11px] wwc:text-muted-foreground/70 wwc:uppercase wwc:tracking-wide wwc:mb-0.5",
+					children: L.source
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-center wwc:gap-1.5 wwc:text-[12px] wwc:text-muted-foreground wwc:font-mono",
+					children: [
+						statusBranch && /* @__PURE__ */ jsx("span", {
+							className: "wwc:truncate",
+							children: statusBranch
+						}),
+						statusBranch && statusCommit && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							children: "·"
+						}),
+						statusCommit && /* @__PURE__ */ jsx("span", { children: statusCommit })
+					]
+				})]
+			})] })
+		]
+	});
+	const [railFlyoutId, setRailFlyoutId] = useState(null);
+	const [collapsedGroups, setCollapsedGroups] = useState({});
+	const [isCollapsed, setIsCollapsed] = useState(() => {
+		try {
+			const saved = typeof window !== "undefined" ? window.localStorage.getItem(COLLAPSE_KEY) : null;
+			if (saved === "1") return true;
+			if (saved === "0") return false;
+		} catch {}
+		return collapsed;
+	});
+	const firstCollapseSync = useRef(true);
+	useEffect(() => {
+		if (firstCollapseSync.current) {
+			firstCollapseSync.current = false;
+			return;
+		}
+		setIsCollapsed(collapsed);
+	}, [collapsed]);
+	const setCollapsed = (next) => {
+		setIsCollapsed(next);
+		try {
+			window.localStorage.setItem(COLLAPSE_KEY, next ? "1" : "0");
+		} catch {}
+		onCollapsedChange?.(next);
+	};
+	/** The built-in notifications panel. Opened from the Notifications row in the pinned block, and
+	*  from the rail's notifications icon when collapsed — it used to hang off a bell in the footer. */
+	function renderNotificationsPanel(side, align) {
+		return /* @__PURE__ */ jsxs(PopoverContent, {
+			side,
+			align,
+			className: `wwc:w-[300px] wwc:p-0 wwc:rounded-xl wwc:flex wwc:flex-col wwc:h-[340px] ${FLOAT_SHADOW}`,
+			children: [/* @__PURE__ */ jsxs(ScrollArea, {
+				className: "wwc:flex-1 wwc:min-h-0",
+				scrollbarClassName: "wwc:w-1.5",
+				thumbClassName: "wwc:bg-border/60",
+				children: [panelNotifications.length === 0 && /* @__PURE__ */ jsx("div", {
+					className: "wwc:px-4 wwc:py-8 wwc:text-center wwc:text-[12px] wwc:text-muted-foreground",
+					children: L.notificationsEmpty
+				}), panelNotifications.map((n) => {
+					const rowClass = `wwc:w-full wwc:text-start wwc:px-4 wwc:py-3 wwc:border-b wwc:last:border-b-0 wwc:transition-colors ${onNotificationSelect ? "wwc:cursor-pointer wwc:hover:bg-muted" : ""} ${n.unread ? "wwc:bg-accent/40" : ""}`;
+					return /* @__PURE__ */ jsx(onNotificationSelect ? "button" : "div", {
+						...onNotificationSelect ? {
+							type: "button",
+							onClick: () => onNotificationSelect(n)
+						} : {},
+						className: rowClass,
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:items-start wwc:justify-between wwc:gap-2",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "wwc:min-w-0",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "wwc:flex wwc:items-center wwc:gap-1.5",
+									children: [n.unread && /* @__PURE__ */ jsx("div", { className: "wwc:h-1.5 wwc:w-1.5 wwc:rounded-full wwc:bg-blue-500 wwc:flex-shrink-0 wwc:mt-0.5" }), /* @__PURE__ */ jsx("span", {
+										className: "wwc:text-[12px] wwc:font-medium wwc:text-foreground",
+										children: n.title
+									})]
+								}), n.body && /* @__PURE__ */ jsx("div", {
+									className: "wwc:text-[11px] wwc:text-muted-foreground wwc:mt-0.5",
+									children: n.body
+								})]
+							}), /* @__PURE__ */ jsx("span", {
+								className: "wwc:text-[11px] wwc:text-muted-foreground/70 wwc:flex-shrink-0",
+								children: n.time
+							})]
+						})
+					}, n.id);
+				})]
+			}), onViewAllNotifications && /* @__PURE__ */ jsx("div", {
+				className: "wwc:flex-shrink-0 wwc:border-t wwc:border-border wwc:p-1",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => {
+						setNotifOpen(false);
+						onViewAllNotifications();
+					},
+					className: "wwc:w-full wwc:rounded-md wwc:px-3 wwc:py-2 wwc:text-[12px] wwc:font-medium wwc:text-foreground/80 wwc:transition-colors wwc:hover:bg-muted/50 wwc:hover:text-foreground",
+					children: L.viewAllNotifications
+				})
+			})]
+		});
+	}
+	const resolvedOrgGroups = orgGroups ?? DEFAULT_ORG_GROUPS;
+	const resolvedProjectGroups = projectGroups ?? DEFAULT_PROJECT_GROUPS;
+	const baseGroups = viewLevel === "org" ? resolvedOrgGroups : resolvedProjectGroups;
+	const groups = baseGroups;
+	const allNavItems = baseGroups.flatMap((g) => g.items);
+	const activeSubMenu = allNavItems.find((n) => n.id === activeSubMenuId)?.subMenu ?? null;
+	const onNavigateRef = useRef(onNavigate);
+	onNavigateRef.current = onNavigate;
+	const onNavigateItemRef = useRef(onNavigateItem);
+	onNavigateItemRef.current = onNavigateItem;
+	const prevViewLevel = useRef(viewLevel);
+	useEffect(() => {
+		setView("main");
+		setActiveSubMenuId(null);
+		const firstItem = viewLevel === "org" ? resolvedOrgGroups[0]?.items[0] : resolvedProjectGroups[0]?.items[0];
+		if (firstItem) {
+			setActiveItem(firstItem.id);
+			if (prevViewLevel.current !== viewLevel) {
+				onNavigateRef.current?.(firstItem.label);
+				onNavigateItemRef.current?.(firstItem);
+			}
+			prevViewLevel.current = viewLevel;
+		}
+	}, [
+		viewLevel,
+		resolvedOrgGroups,
+		resolvedProjectGroups
+	]);
+	useEffect(() => {
+		if (!activeItemId) return;
+		if (baseGroups.some((g) => g.items.some((i) => i.id === activeItemId))) {
+			setView("main");
+			setActiveSubMenuId(null);
+			setActiveItem(activeItemId);
+			return;
+		}
+		for (const g of baseGroups) for (const item of g.items) if (item.subMenu?.groups.some((sg) => sg.items.some((s) => s.id === activeItemId))) {
+			setView("sub");
+			setActiveSubMenuId(item.id);
+			setActiveItem(activeItemId);
+			return;
+		}
+	}, [activeItemId, baseGroups]);
+	/** Choosing a group — from the expanded header's name or the collapsed rail's flyout title. Opens
+	*  the group's page, and expands it, so the nav never contradicts the surface it just opened. */
+	function selectGroup(group) {
+		if (!group.id) return;
+		if (group.collapsible && group.label) {
+			const label = group.label;
+			setCollapsedGroups((prev) => ({
+				...prev,
+				[label]: false
+			}));
+		}
+		onGroupSelect?.(group.id);
+	}
+	function openSub(item) {
+		if (item.expandable && item.subMenu) {
+			setActiveSubMenuId(item.id);
+			setView("sub");
+			const firstSubItem = item.subMenu.groups[0]?.items[0];
+			if (firstSubItem) {
+				setActiveItem(firstSubItem.id);
+				onNavigate?.(firstSubItem.label, true, item.label);
+				onNavigateItem?.(firstSubItem, item);
+			} else {
+				onNavigate?.(item.label, true);
+				onNavigateItem?.(item);
+			}
+		} else {
+			setActiveItem(item.id);
+			onNavigate?.(item.label);
+			onNavigateItem?.(item);
+		}
+	}
+	function closeSub() {
+		setView("main");
+		setActiveSubMenuId(null);
+	}
+	/** An item inside a group. In a tree it carries the elbow that ties it to the group's spine. */
+	function renderGroupItem(item, tree) {
+		if (!tree) return /* @__PURE__ */ jsx(NavRow, { item }, item.id);
+		return /* @__PURE__ */ jsxs("div", {
+			className: "wwc:relative",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: `wwc:pointer-events-none wwc:absolute wwc:top-1/2 wwc:h-px wwc:bg-border ${SIDEBAR_DENSITY[density].groupElbow}`
+			}), /* @__PURE__ */ jsx(NavRow, { item })]
+		}, item.id);
+	}
+	function NavRow({ item }) {
+		const isActive = !marketplaceActive && !homeActive && !pinnedTop?.active && activeGroupId === void 0 && (activeItem === item.id || (item.subMenu?.groups.some((g) => g.items.some((i) => i.id === activeItem)) ?? false));
+		const className = `wwc:w-full wwc:flex wwc:items-center ${d.row} wwc:rounded-lg wwc:transition-colors wwc:group ${isActive ? "wwc:bg-muted wwc:font-medium wwc:text-foreground" : "wwc:text-foreground/80 wwc:hover:bg-muted/50 wwc:hover:text-foreground"}`;
+		const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "wwc:relative wwc:flex wwc:flex-shrink-0 wwc:items-center",
+				children: [item.tone ? /* @__PURE__ */ jsx("span", {
+					className: `wwc:flex wwc:items-center wwc:justify-center wwc:rounded-md ${d.toneChip} ${item.tone}`,
+					children: /* @__PURE__ */ jsx(item.icon, { className: d.toneIconSize })
+				}) : /* @__PURE__ */ jsx(item.icon, { className: `${d.iconSize} wwc:text-muted-foreground wwc:group-hover:text-foreground` }), item.dot && /* @__PURE__ */ jsx("span", { className: `wwc:absolute wwc:-right-0.5 wwc:-top-0.5 wwc:h-2 wwc:w-2 wwc:rounded-full wwc:ring-2 wwc:ring-card ${item.dot}` })]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "wwc:flex-1 wwc:text-start wwc:truncate wwc:min-w-0",
+				children: item.label
+			}),
+			item.badge && /* @__PURE__ */ jsx(Badge, {
+				variant: "secondary",
+				className: "wwc:ml-1 wwc:text-[10px] wwc:px-1.5 wwc:py-0.5 wwc:rounded-full wwc:leading-none wwc:h-auto wwc:font-medium",
+				children: item.badge
+			}),
+			item.expandable && /* @__PURE__ */ jsx(ChevronRight, { className: "wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground wwc:flex-shrink-0" })
+		] });
+		if (item.href) return /* @__PURE__ */ jsx("a", {
+			href: item.href,
+			"data-core-route-link": true,
+			onClick: (event) => {
+				event.preventDefault();
+				openSub(item);
+			},
+			className,
+			children: content
+		});
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => openSub(item),
+			className,
+			children: content
+		});
+	}
+	if (isCollapsed) {
+		const railWidth = density === "compact" ? "wwc:w-[52px]" : "wwc:w-16";
+		const railHeader = density === "compact" ? "wwc:h-9" : "wwc:h-11";
+		const iconBtn = density === "compact" ? "wwc:h-8 wwc:w-8" : "wwc:h-9 wwc:w-9";
+		const railGroups = baseGroups.filter((g) => g.items.length > 0);
+		const RailIconButton = forwardRef(({ label, isActive, hasBadge, href, onClick, children, ...rest }, ref) => {
+			const className = `wwc:relative wwc:flex wwc:items-center wwc:justify-center wwc:rounded-lg wwc:transition-colors ${iconBtn} ${isActive ? "wwc:bg-muted wwc:text-foreground" : "wwc:text-muted-foreground wwc:hover:bg-muted/50 wwc:hover:text-foreground"}`;
+			const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hasBadge && /* @__PURE__ */ jsx("span", { className: "wwc:absolute wwc:top-1 wwc:right-1 wwc:h-1.5 wwc:w-1.5 wwc:rounded-full wwc:bg-blue-500" })] });
+			return /* @__PURE__ */ jsx(HoverTooltip, {
+				content: label,
+				side: "right",
+				children: href ? /* @__PURE__ */ jsx("a", {
+					href,
+					"data-core-route-link": true,
+					onClick: (event) => {
+						event.preventDefault();
+						onClick?.(event);
+					},
+					"aria-label": label,
+					className,
+					children: content
+				}) : /* @__PURE__ */ jsx("button", {
+					type: "button",
+					ref,
+					"aria-label": label,
+					className,
+					onClick,
+					...rest,
+					children: content
+				})
+			});
+		});
+		RailIconButton.displayName = "RailIconButton";
+		const RailFlyout = ({ flyoutId, label, title, icon: Icon, isActive, hasBadge, rows, onSelect, onTitleSelect, titleActive }) => {
+			const flyoutOpen = railFlyoutId === flyoutId;
+			return /* @__PURE__ */ jsxs(Popover, {
+				open: railFlyoutId === flyoutId,
+				onOpenChange: (open) => setRailFlyoutId((current) => open ? flyoutId : current === flyoutId ? null : current),
+				children: [(() => {
+					const trigger = /* @__PURE__ */ jsx(PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-label": label,
+							"data-rail-flyout": flyoutId,
+							onPointerDown: () => setRailFlyoutId(flyoutOpen ? null : flyoutId),
+							onKeyDown: (event) => {
+								if (event.key !== "Enter" && event.key !== " ") return;
+								event.preventDefault();
+								setRailFlyoutId(flyoutOpen ? null : flyoutId);
+							},
+							onClick: (event) => event.preventDefault(),
+							className: `wwc:relative wwc:flex wwc:items-center wwc:justify-center wwc:rounded-lg wwc:transition-colors ${iconBtn} ${isActive ? "wwc:bg-muted wwc:text-foreground" : flyoutOpen ? "wwc:text-foreground" : "wwc:text-muted-foreground wwc:hover:bg-muted/50 wwc:hover:text-foreground"}`,
+							children: [/* @__PURE__ */ jsx(Icon, { className: d.iconSize }), hasBadge && /* @__PURE__ */ jsx("span", { className: "wwc:absolute wwc:top-1 wwc:right-1 wwc:h-1.5 wwc:w-1.5 wwc:rounded-full wwc:bg-blue-500" })]
+						})
+					});
+					return flyoutOpen ? trigger : /* @__PURE__ */ jsx(HoverTooltip, {
+						content: label,
+						side: "right",
+						children: trigger
+					});
+				})(), /* @__PURE__ */ jsxs(PopoverContent, {
+					side: "right",
+					align: "start",
+					className: `wwc:w-[220px] wwc:p-1 wwc:rounded-xl ${FLOAT_SHADOW}`,
+					onPointerDownOutside: (event) => {
+						if (event.target?.closest("[data-rail-flyout]")) event.preventDefault();
+					},
+					children: [onTitleSelect ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => {
+							onTitleSelect();
+							setRailFlyoutId(null);
+						},
+						className: `wwc:w-full wwc:rounded-md wwc:px-2 wwc:py-1.5 wwc:text-left wwc:text-[11px] wwc:font-semibold wwc:uppercase wwc:tracking-wide wwc:transition-colors wwc:hover:underline wwc:hover:text-foreground ${titleActive ? "wwc:text-foreground wwc:underline" : "wwc:text-muted-foreground/70"}`,
+						children: title
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "wwc:px-2 wwc:py-1.5 wwc:text-[11px] wwc:font-semibold wwc:uppercase wwc:tracking-wide wwc:text-muted-foreground/70",
+						children: title
+					}), rows.map((row) => {
+						const RowIcon = row.icon;
+						const rowActive = activeItem === row.id;
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => {
+								onSelect(row.id);
+								setRailFlyoutId(null);
+							},
+							className: `wwc:w-full wwc:flex wwc:items-center wwc:gap-2.5 wwc:rounded-lg wwc:px-2 wwc:py-1.5 wwc:text-[13px] wwc:transition-colors ${rowActive ? "wwc:bg-muted wwc:font-medium wwc:text-foreground" : "wwc:text-foreground/80 wwc:hover:bg-muted/50 wwc:hover:text-foreground"}`,
+							children: [
+								row.tone ? /* @__PURE__ */ jsx("span", {
+									className: `wwc:flex wwc:flex-shrink-0 wwc:items-center wwc:justify-center wwc:rounded-md wwc:h-[22px] wwc:w-[22px] ${row.tone}`,
+									children: /* @__PURE__ */ jsx(RowIcon, { className: "wwc:h-[13px] wwc:w-[13px]" })
+								}) : /* @__PURE__ */ jsx(RowIcon, { className: "wwc:h-4 wwc:w-4 wwc:flex-shrink-0 wwc:text-muted-foreground" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "wwc:flex-1 wwc:text-left wwc:truncate",
+									children: row.label
+								}),
+								row.badge && /* @__PURE__ */ jsx(Badge, {
+									variant: "secondary",
+									className: "wwc:text-[10px] wwc:px-1.5 wwc:py-0.5 wwc:rounded-full wwc:leading-none wwc:h-auto",
+									children: row.badge
+								})
+							]
+						}, row.id);
+					})]
+				})]
+			});
+		};
+		const renderRailItem = (item) => {
+			const isActive = !marketplaceActive && !homeActive && !pinnedTop?.active && activeGroupId === void 0 && (activeItem === item.id || (item.subMenu?.groups.some((g) => g.items.some((i) => i.id === activeItem)) ?? false));
+			if (item.expandable && item.subMenu) {
+				const subItems = item.subMenu.groups.flatMap((g) => g.items);
+				return /* @__PURE__ */ jsx(RailFlyout, {
+					flyoutId: item.id,
+					label: item.label,
+					title: item.subMenu.title,
+					icon: item.icon,
+					isActive,
+					hasBadge: Boolean(item.badge),
+					rows: subItems,
+					onSelect: (rowId) => {
+						const sub = subItems.find((s) => s.id === rowId);
+						if (!sub) return;
+						setActiveItem(sub.id);
+						onNavigate?.(sub.label, false, item.label);
+						onNavigateItem?.(sub, item);
+					}
+				}, item.id);
+			}
+			return /* @__PURE__ */ jsx(RailIconButton, {
+				label: item.label,
+				isActive,
+				hasBadge: Boolean(item.badge),
+				href: item.href,
+				onClick: () => openSub(item),
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "wwc:relative wwc:flex wwc:items-center wwc:justify-center",
+					children: [/* @__PURE__ */ jsx(item.icon, { className: d.iconSize }), item.dot && /* @__PURE__ */ jsx("span", { className: `wwc:absolute wwc:-right-1 wwc:-top-1 wwc:h-2 wwc:w-2 wwc:rounded-full wwc:ring-2 wwc:ring-card ${item.dot}` })]
+				})
+			}, item.id);
+		};
+		const renderRailGroup = (group) => {
+			if (!group.icon || !group.label) return group.items.map(renderRailItem);
+			const label = group.label;
+			return /* @__PURE__ */ jsx(RailFlyout, {
+				flyoutId: `group-${label}`,
+				label,
+				title: label,
+				icon: group.icon,
+				isActive: !marketplaceActive && !homeActive && !pinnedTop?.active && (activeGroupId !== void 0 ? activeGroupId === group.id : group.items.some((i) => i.id === activeItem)),
+				titleActive: group.id !== void 0 && activeGroupId === group.id,
+				hasBadge: group.items.some((i) => Boolean(i.dot)),
+				rows: group.items,
+				onSelect: (rowId) => {
+					const item = group.items.find((i) => i.id === rowId);
+					if (item) openSub(item);
+				},
+				onTitleSelect: group.id ? () => selectGroup(group) : void 0
+			}, `group-${label}`);
+		};
+		return /* @__PURE__ */ jsx("div", {
+			className: `wwc:relative wwc:h-full wwc:select-none wwc:flex-shrink-0 wwc:overflow-hidden wwc:bg-card wwc:text-card-foreground wwc:transition-[width] wwc:duration-200 wwc:ease-linear ${seamless ? "" : "wwc:border-r wwc:shadow-sm"} ${railWidth}`,
+			children: /* @__PURE__ */ jsx(TooltipProvider, {
+				delayDuration: 0,
+				disableHoverableContent: true,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: `wwc:absolute wwc:inset-y-0 wwc:left-0 ${railWidth} wwc:flex wwc:flex-col wwc:items-center`,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: `wwc:flex wwc:items-center wwc:justify-center wwc:border-b wwc:w-full wwc:flex-shrink-0 ${railHeader}`,
+							children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => setCollapsed(false),
+								"aria-label": L.expandSidebar,
+								className: `wwc:group wwc:relative wwc:flex wwc:items-center wwc:justify-center wwc:rounded-lg wwc:transition-colors wwc:hover:bg-muted/50 ${iconBtn}`,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "wwc:flex wwc:items-center wwc:transition-opacity wwc:group-hover:opacity-0",
+									children: logoCollapsed ?? /* @__PURE__ */ jsx(CoreWLogo, { className: `${d.brandMark} wwc:text-primary` })
+								}), /* @__PURE__ */ jsx(PanelLeftOpen, { className: `${d.iconSize} wwc:absolute wwc:text-foreground wwc:opacity-0 wwc:transition-opacity wwc:group-hover:opacity-100` })]
+							})
+						}),
+						/* @__PURE__ */ jsx(ScrollArea, {
+							dir: navDir,
+							className: "wwc:flex-1 wwc:w-full",
+							scrollbarClassName: "wwc:w-1.5",
+							thumbClassName: "wwc:bg-border/60",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: `wwc:flex wwc:flex-col wwc:items-center wwc:py-1 ${d.spacing}`,
+								children: [
+									pinnedEntries.map((entry) => {
+										const railRow = /* @__PURE__ */ jsxs(RailIconButton, {
+											label: entry.label,
+											isActive: entry.active,
+											onClick: entry.onSelect,
+											children: [/* @__PURE__ */ jsx(entry.icon, { className: d.pinnedIconSize }), entry.badge && /* @__PURE__ */ jsx("span", {
+												"aria-label": L.unreadCount(unreadNotifications),
+												className: "wwc:absolute wwc:right-0.5 wwc:top-0.5 wwc:flex wwc:h-[13px] wwc:min-w-[13px] wwc:items-center wwc:justify-center wwc:rounded-full wwc:bg-muted wwc:px-1 wwc:text-[8px] wwc:font-medium wwc:leading-none wwc:text-foreground wwc:ring-2 wwc:ring-card wwc:tabular-nums",
+												children: entry.badge
+											})]
+										});
+										return entry.builtInNotifications ? /* @__PURE__ */ jsxs(Popover, {
+											open: notifOpen,
+											onOpenChange: setNotifOpen,
+											children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+												asChild: true,
+												children: railRow
+											}), renderNotificationsPanel("right", "start")]
+										}, entry.key) : /* @__PURE__ */ jsx(Fragment, { children: railRow }, entry.key);
+									}),
+									pinnedBlock && pinnedBlockDivider && railGroups.length > 0 && /* @__PURE__ */ jsx(Separator, { className: "wwc:my-1 wwc:w-6" }),
+									railGroups.map((group, gi) => /* @__PURE__ */ jsxs(Fragment, { children: [gi > 0 && (group.dividerBefore || showGroupDividers && !(group.icon && railGroups[gi - 1].icon)) && /* @__PURE__ */ jsx(Separator, { className: "wwc:my-1 wwc:w-6" }), renderRailGroup(group)] }, group.label ?? `rail-group-${gi}`)),
+									showMarketplace && /* @__PURE__ */ jsxs(Fragment$1, { children: [allNavItems.length > 0 && /* @__PURE__ */ jsx(Separator, { className: "wwc:my-1 wwc:w-6" }), /* @__PURE__ */ jsx(RailIconButton, {
+										label: marketplaceLabel,
+										isActive: marketplaceActive,
+										onClick: onMarketplace,
+										children: /* @__PURE__ */ jsx(Plus, { className: d.iconSize })
+									})] })
+								]
+							})
+						}),
+						showFooter && /* @__PURE__ */ jsx("div", {
+							className: "wwc:border-t wwc:w-full wwc:flex wwc:flex-col wwc:items-center wwc:gap-1 wwc:py-2 wwc:flex-shrink-0",
+							children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(HoverTooltip, {
+								content: profileName,
+								side: "right",
+								children: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": L.profileMenu(profileName),
+										className: `wwc:flex wwc:items-center wwc:justify-center wwc:rounded-full wwc:transition-colors wwc:hover:bg-muted ${iconBtn}`,
+										children: /* @__PURE__ */ jsxs(Avatar, {
+											className: "wwc:h-6 wwc:w-6",
+											children: [profileAvatar && /* @__PURE__ */ jsx(AvatarImage, {
+												src: profileAvatar,
+												alt: profileName
+											}), /* @__PURE__ */ jsx(AvatarFallback, {
+												className: "wwc:text-white wwc:text-[9px] wwc:font-bold",
+												style: { background: "radial-gradient(circle at 35% 35%, #a855f7, #6366f1, #1e40af)" },
+												children: profileInitials
+											})]
+										})
+									})
+								})
+							}), renderProfileMenu("right", "end")] })
+						})
+					]
+				})
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: `wwc:relative wwc:h-full wwc:select-none wwc:flex-shrink-0 wwc:overflow-hidden wwc:bg-card wwc:text-card-foreground wwc:transition-[width] wwc:duration-200 wwc:ease-linear ${seamless ? "" : "wwc:border-r wwc:shadow-sm"} wwc:w-[260px]`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "wwc:absolute wwc:inset-y-0 wwc:left-0 wwc:w-[260px] wwc:flex wwc:flex-col",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: `wwc:flex wwc:items-center wwc:border-b wwc:flex-shrink-0 ${d.header}`,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-2 wwc:px-2 wwc:w-full wwc:min-w-0",
+						children: [
+							density === "compact" && onPin && /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								icon: true,
+								onClick: onPin,
+								"aria-label": L.pinSidebar,
+								className: "wwc:h-6 wwc:w-6 wwc:text-muted-foreground wwc:hover:text-foreground wwc:flex-shrink-0",
+								children: /* @__PURE__ */ jsx(PanelRightOpen, { className: "wwc:h-3.5 wwc:w-3.5" })
+							}),
+							density !== "compact" && onPin && /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								icon: true,
+								onClick: onPin,
+								"aria-label": L.pinSidebar,
+								className: "wwc:h-7 wwc:w-7 wwc:text-muted-foreground wwc:hover:text-foreground wwc:flex-shrink-0",
+								children: /* @__PURE__ */ jsx(PanelRightOpen, { className: "wwc:h-4 wwc:w-4" })
+							}),
+							logo ? /* @__PURE__ */ jsx("div", {
+								className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:overflow-hidden",
+								children: logo
+							}) : orgs && orgs.length > 0 ? /* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-1",
+								children: [
+									/* @__PURE__ */ jsx(CoreWLogo, { className: `${d.brandMark} wwc:shrink-0 wwc:text-foreground` }),
+									/* @__PURE__ */ jsx("span", {
+										className: "wwc:shrink-0 wwc:text-muted-foreground/50",
+										children: "/"
+									}),
+									/* @__PURE__ */ jsxs(Switcher, {
+										density,
+										items: orgs,
+										selected: selectedOrgName,
+										onSelect: (o) => onOrgChange?.(o),
+										placeholder: L.orgSearchPlaceholder,
+										emptyLabel: L.orgEmpty,
+										onViewAll: onOrgViewAll,
+										viewAllLabel: L.orgViewAll,
+										triggerClassName: `wwc:h-8 wwc:min-w-0 wwc:gap-2 wwc:px-1.5 wwc:font-semibold wwc:text-foreground ${density === "compact" ? "wwc:text-[13px]" : "wwc:text-[14px]"}`,
+										children: [activeOrgLogo && /* @__PURE__ */ jsx("span", {
+											className: "wwc:flex wwc:shrink-0 wwc:items-center",
+											children: activeOrgLogo
+										}), /* @__PURE__ */ jsx("span", {
+											className: "wwc:truncate",
+											children: selectedOrgName
+										})]
+									})
+								]
+							}) : /* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:items-center wwc:gap-2 wwc:text-foreground wwc:min-w-0",
+								children: [/* @__PURE__ */ jsx(CoreWLogo, { className: d.brandMark }), /* @__PURE__ */ jsx("span", {
+									className: `wwc:font-semibold wwc:truncate ${density === "compact" ? "wwc:text-[13px]" : "wwc:text-[14px]"}`,
+									children: brandName
+								})]
+							}),
+							/* @__PURE__ */ jsx("div", { className: "wwc:flex-1" }),
+							!hideCollapse && /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								icon: true,
+								onClick: () => setCollapsed(true),
+								"aria-label": L.collapseSidebar,
+								className: `wwc:text-muted-foreground wwc:hover:text-foreground wwc:flex-shrink-0 ${density === "compact" ? "wwc:h-6 wwc:w-6" : "wwc:h-7 wwc:w-7"}`,
+								children: /* @__PURE__ */ jsx(PanelRightOpen, { className: density === "compact" ? "wwc:h-3.5 wwc:w-3.5" : "wwc:h-4 wwc:w-4" })
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx(ScrollArea, {
+					dir: navDir,
+					className: "wwc:flex-1",
+					scrollbarClassName: "wwc:w-1.5",
+					thumbClassName: "wwc:bg-border/60",
+					children: view === "main" ? /* @__PURE__ */ jsxs("div", {
+						className: d.container,
+						children: [
+							pinnedBlock && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+								className: d.pinnedSpacing,
+								children: pinnedEntries.map((entry) => {
+									const row = /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										onClick: entry.onSelect,
+										className: `wwc:w-full wwc:flex wwc:items-center ${d.pinnedRow} wwc:rounded-lg wwc:transition-colors wwc:group ${entry.active ? "wwc:bg-muted wwc:font-medium wwc:text-foreground" : "wwc:text-foreground/80 wwc:hover:bg-muted/50 wwc:hover:text-foreground"}`,
+										children: [
+											/* @__PURE__ */ jsx(entry.icon, { className: `${d.pinnedIconSize} wwc:flex-shrink-0 wwc:text-muted-foreground wwc:group-hover:text-foreground` }),
+											/* @__PURE__ */ jsx("span", {
+												className: "wwc:flex-1 wwc:text-start wwc:truncate wwc:min-w-0",
+												children: entry.label
+											}),
+											entry.hint && /* @__PURE__ */ jsx("kbd", {
+												className: "wwc:ml-1 wwc:flex-shrink-0 wwc:rounded wwc:border wwc:border-border wwc:bg-muted/60 wwc:px-1 wwc:py-px wwc:font-sans wwc:text-[10px] wwc:leading-none wwc:text-muted-foreground",
+												children: entry.hint
+											}),
+											entry.badge && /* @__PURE__ */ jsx("span", {
+												"aria-label": L.unreadCount(unreadNotifications),
+												className: "wwc:ml-1 wwc:flex-shrink-0 wwc:text-[11px] wwc:font-medium wwc:leading-none wwc:text-muted-foreground wwc:tabular-nums",
+												children: entry.badge
+											})
+										]
+									});
+									return entry.builtInNotifications ? /* @__PURE__ */ jsxs(Popover, {
+										open: notifOpen,
+										onOpenChange: setNotifOpen,
+										children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+											asChild: true,
+											children: row
+										}), renderNotificationsPanel("right", "start")]
+									}, entry.key) : /* @__PURE__ */ jsx(Fragment, { children: row }, entry.key);
+								})
+							}), pinnedBlockDivider && groups.length > 0 && /* @__PURE__ */ jsx(Separator, { className: d.separator })] }),
+							groups.map((group, gi) => {
+								const folded = Boolean(group.collapsible && group.label && (collapsedGroups[group.label] ?? groupsCollapsedByDefault));
+								const tree = Boolean(group.icon);
+								const ruled = (showGroupDividers || Boolean(group.dividerBefore)) && gi > 0;
+								const headerClass = tree ? `${d.row} wwc:flex wwc:items-center wwc:font-medium wwc:text-foreground/80` : `${d.groupLabel} wwc:flex wwc:items-center wwc:gap-1.5 wwc:font-semibold wwc:uppercase wwc:tracking-widest wwc:text-muted-foreground`;
+								const nameClass = tree ? "wwc:min-w-0 wwc:truncate wwc:text-start wwc:transition-colors" : "wwc:min-w-0 wwc:truncate wwc:text-start wwc:uppercase wwc:tracking-widest wwc:transition-colors";
+								const headerFoldClass = `${headerClass} wwc:w-full wwc:rounded-lg wwc:transition-colors wwc:hover:bg-muted/50 wwc:hover:text-foreground`;
+								return /* @__PURE__ */ jsxs(Fragment, { children: [ruled && /* @__PURE__ */ jsx(Separator, { className: d.separator }), /* @__PURE__ */ jsxs("div", {
+									className: `wwc:relative ${gi > 0 && !ruled ? d.groupGap : ""}`,
+									children: [
+										group.label && (group.collapsible ? /* @__PURE__ */ jsxs("button", {
+											type: "button",
+											onClick: () => setCollapsedGroups((prev) => ({
+												...prev,
+												[group.label]: !(prev[group.label] ?? groupsCollapsedByDefault)
+											})),
+											"aria-expanded": !folded,
+											"aria-label": folded ? L.expandGroup(group.label) : L.collapseGroup(group.label),
+											className: `${headerFoldClass} ${activeGroupId === group.id ? "wwc:text-foreground" : ""}`,
+											children: [
+												group.icon && /* @__PURE__ */ jsx(group.icon, { className: `${tree ? d.iconSize : "wwc:h-3 wwc:w-3"} wwc:flex-shrink-0 wwc:text-muted-foreground` }),
+												/* @__PURE__ */ jsxs("span", {
+													className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-0.5",
+													children: [/* @__PURE__ */ jsx("span", {
+														className: nameClass,
+														children: group.label
+													}), /* @__PURE__ */ jsx("span", {
+														"aria-hidden": true,
+														className: "wwc:flex wwc:h-4 wwc:w-4 wwc:flex-shrink-0 wwc:items-center wwc:justify-center wwc:text-muted-foreground",
+														children: folded ? /* @__PURE__ */ jsx(ChevronRight, { className: "wwc:h-3.5 wwc:w-3.5" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "wwc:h-3.5 wwc:w-3.5" })
+													})]
+												}),
+												/* @__PURE__ */ jsx("span", {
+													"aria-hidden": true,
+													className: "wwc:flex-1"
+												})
+											]
+										}) : /* @__PURE__ */ jsxs("div", {
+											className: `${headerClass} ${activeGroupId === group.id ? "wwc:text-foreground" : ""}`,
+											children: [group.icon && /* @__PURE__ */ jsx(group.icon, { className: `${tree ? d.iconSize : "wwc:h-3 wwc:w-3"} wwc:flex-shrink-0 wwc:text-muted-foreground` }), /* @__PURE__ */ jsx("span", {
+												className: nameClass,
+												children: group.label
+											})]
+										})),
+										tree && /* @__PURE__ */ jsx("span", {
+											"aria-hidden": true,
+											className: `wwc:pointer-events-none wwc:absolute wwc:w-px wwc:bg-border ${d.groupGuide}`
+										}),
+										group.collapsible ? /* @__PURE__ */ jsx("div", {
+											className: `wwc:grid wwc:transition-[grid-template-rows] wwc:duration-200 wwc:ease-out ${folded ? "wwc:grid-rows-[0fr]" : "wwc:grid-rows-[1fr]"}`,
+											children: /* @__PURE__ */ jsx("div", {
+												className: "wwc:overflow-hidden",
+												...folded ? INERT : void 0,
+												children: /* @__PURE__ */ jsx("div", {
+													className: `${d.spacing} ${tree ? d.groupGuideIndent : ""}`,
+													children: group.items.map((item) => renderGroupItem(item, tree))
+												})
+											})
+										}) : /* @__PURE__ */ jsx("div", {
+											className: `${d.spacing} ${tree ? d.groupGuideIndent : ""}`,
+											children: group.items.map((item) => renderGroupItem(item, tree))
+										})
+									]
+								})] }, group.label ?? gi);
+							}),
+							showMarketplace && /* @__PURE__ */ jsxs(Fragment$1, { children: [groups.length > 0 && /* @__PURE__ */ jsx(Separator, { className: d.separator }), /* @__PURE__ */ jsx("div", {
+								className: d.spacing,
+								children: /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: onMarketplace,
+									className: `wwc:w-full wwc:flex wwc:items-center ${d.row} wwc:rounded-lg wwc:transition-colors wwc:group ${marketplaceActive ? "wwc:bg-muted wwc:font-medium wwc:text-foreground" : "wwc:text-foreground/80 wwc:hover:bg-muted/50 wwc:hover:text-foreground"}`,
+									children: [/* @__PURE__ */ jsx(Plus, { className: `${d.iconSize} wwc:flex-shrink-0 wwc:text-muted-foreground wwc:group-hover:text-foreground` }), /* @__PURE__ */ jsx("span", {
+										className: "wwc:flex-1 wwc:text-start wwc:truncate wwc:min-w-0",
+										children: marketplaceLabel
+									})]
+								})
+							})] })
+						]
+					}) : /* @__PURE__ */ jsxs("div", {
+						className: d.container,
+						children: [/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: closeSub,
+							className: `wwc:w-full wwc:flex wwc:items-center wwc:gap-2 ${d.backButton} wwc:hover:bg-muted/50 wwc:rounded-lg wwc:transition-colors`,
+							children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "wwc:h-4 wwc:w-4 wwc:text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+								className: "wwc:font-semibold wwc:text-foreground",
+								children: activeSubMenu?.title
+							})]
+						}), activeSubMenu?.groups.map((group, gi) => /* @__PURE__ */ jsxs("div", {
+							className: "wwc:mb-1",
+							children: [group.label && /* @__PURE__ */ jsx("div", {
+								className: `${d.subGroupLabel} wwc:font-semibold wwc:text-muted-foreground/70 wwc:uppercase wwc:tracking-widest`,
+								children: group.label
+							}), group.items.map((item) => {
+								const isActive = activeItem === item.id;
+								return /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: () => {
+										setActiveItem(item.id);
+										const parentItem = allNavItems.find((n) => n.id === activeSubMenuId);
+										onNavigate?.(item.label, false, parentItem?.label);
+										onNavigateItem?.(item, parentItem);
+									},
+									className: `wwc:w-full wwc:flex wwc:items-center ${d.row} wwc:rounded-lg wwc:transition-colors ${isActive ? "wwc:bg-muted wwc:font-medium wwc:text-foreground" : "wwc:text-foreground/80 wwc:hover:bg-muted/50 wwc:hover:text-foreground"}`,
+									children: [
+										/* @__PURE__ */ jsx(item.icon, { className: `${d.iconSize} wwc:flex-shrink-0 wwc:text-muted-foreground` }),
+										/* @__PURE__ */ jsx("span", {
+											className: "wwc:flex-1 wwc:text-start wwc:truncate wwc:min-w-0",
+											children: item.label
+										}),
+										item.badge && /* @__PURE__ */ jsx(Badge, {
+											variant: "secondary",
+											className: "wwc:ml-1 wwc:text-[10px] wwc:px-1.5 wwc:py-0.5 wwc:rounded-full wwc:leading-none wwc:h-auto wwc:font-medium",
+											children: item.badge
+										})
+									]
+								}, item.id);
+							})]
+						}, gi))]
+					})
+				}),
+				footerContent && /* @__PURE__ */ jsx("div", {
+					className: `wwc:border-t ${d.footer}`,
+					children: footerContent
+				}),
+				showFooter && /* @__PURE__ */ jsxs("div", {
+					className: `wwc:border-t wwc:flex wwc:items-center ${d.footer}`,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-2 wwc:flex-1 wwc:min-w-0 wwc:px-2 wwc:py-1.5",
+						children: [/* @__PURE__ */ jsxs(Avatar, {
+							className: "wwc:h-6 wwc:w-6",
+							children: [profileAvatar && /* @__PURE__ */ jsx(AvatarImage, {
+								src: profileAvatar,
+								alt: profileName
+							}), /* @__PURE__ */ jsx(AvatarFallback, {
+								className: "wwc:text-white wwc:text-[9px] wwc:font-bold",
+								style: { background: "radial-gradient(circle at 35% 35%, #a855f7, #6366f1, #1e40af)" },
+								children: profileInitials
+							})]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "wwc:text-[12px] wwc:font-medium wwc:text-foreground/80 wwc:truncate wwc:min-w-0",
+							children: profileName
+						})]
+					}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							icon: true,
+							"aria-label": L.profileMenu(profileName),
+							className: "wwc:h-7 wwc:w-7 wwc:text-muted-foreground",
+							children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "wwc:h-4 wwc:w-4" })
+						})
+					}), renderProfileMenu()] })]
+				})
+			]
+		})
+	});
+}
+/**
+* App shell sidebar. On desktop it renders inline (a rail or expanded column). On mobile (below `md`) the
+* inline column is hidden and the same sidebar opens as a left sheet, driven by `mobileOpen` /
+* `onMobileOpenChange` — wire those to `CoreAppTopBar`'s `onMenuClick` hamburger.
+*/
+function CoreAppSidebar(props = {}) {
+	const { mobileOpen = false, onMobileOpenChange, ...shellProps } = props;
+	if (!onMobileOpenChange) return /* @__PURE__ */ jsx(SidebarShell, { ...shellProps });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "wwc:hidden wwc:md:contents",
+		children: /* @__PURE__ */ jsx(SidebarShell, { ...shellProps })
+	}), /* @__PURE__ */ jsx(Sheet, {
+		open: mobileOpen,
+		onOpenChange: onMobileOpenChange,
+		children: /* @__PURE__ */ jsx(SheetContent, {
+			side: "left",
+			className: "wwc:w-auto wwc:max-w-[85vw] wwc:border-0 wwc:p-0 wwc:md:hidden [&>button]:wwc:z-10",
+			children: /* @__PURE__ */ jsx(SidebarShell, {
+				...shellProps,
+				seamless: true,
+				hideCollapse: true
+			})
+		})
+	})] });
+}
+//#endregion
+export { CoreAppSidebar, DEFAULT_ORG_GROUPS, DEFAULT_PROJECT_GROUPS };
+
+//# sourceMappingURL=core-app-sidebar.mjs.map