@tangle-network/sandbox-ui 0.122.2 → 0.123.0

package/dist/{dashboard-BpEeXRo1.js → dashboard-C2VXLIQC.js}

@@ -1,9 +1,9 @@
-import { Wt as Logo, o as Button$1 } from "./primitives-C4qn9fZ8.js";
+import { Wt as Logo, o as Button$1 } from "./primitives-Db_ASpuT.js";
 import { t as cn$1 } from "./utils-DzWbktWG.js";
 import { n as MOTION_SURFACE, r as MOTION_TRAVEL, t as MOTION_CONTROL } from "./motion-DkyBRJb9.js";
 import { i as moonshot_default } from "./model-brand-hMyDTUqB.js";
-import "./page-layout-Cf90DTWr.js";
-import { Avatar, AvatarFallback, AvatarImage, Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Skeleton, StatCard, useTheme } from "@tangle-network/ui/primitives";
+import "./page-layout-DJV7cbxx.js";
+import { Avatar, AvatarFallback, AvatarImage, Badge, Button, Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Skeleton, StatCard, useTheme } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { useEffect, useRef, useState } from "react";
@@ -2721,30 +2721,121 @@ function DefaultLink$1({ href, to, className, children, ...rest }) {
 		children
 	});
 }
-function DashboardLayoutInner({ children, variant = "sandbox", navItems, modeItems = [], panels = [], activeNavId, user, isLoading = false, onLogout, onSettingsClick, settingsHref = "/dashboard/settings", onNewSandbox, className, sidebarClassName, contentClassName, topNavLinks, activeTopNavHref, topBarLeading, LinkComponent = DefaultLink$1, logoHref = "/", labeledRail = false, footer, railFooter, profileMenuItems, appearance, notifications: notifData, notificationsEnabled = true, collapseEmptyTopBar = false }) {
+/** Notifications use the shared menu's collision handling, keyboard movement and focus return. */
+function SidebarNotifications({ data, showLabels, mobile }) {
+	const unread = data?.unreadCount ?? 0;
+	const NotificationIcon = ({ className }) => /* @__PURE__ */ jsxs("span", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(Bell, {
+			className,
+			"aria-hidden": "true"
+		}), unread > 0 && /* @__PURE__ */ jsx("span", {
+			className: "absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-destructive ring-2 ring-surface-container-low",
+			"aria-hidden": "true"
+		})]
+	});
+	const content = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("p", {
+			className: cn$1("text-sm", item.read ? "text-muted-foreground" : "font-semibold text-foreground"),
+			children: item.title
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: "mt-1 text-sm text-muted-foreground",
+			children: item.message
+		}),
+		/* @__PURE__ */ jsx("time", {
+			className: "mt-1 block text-xs text-muted-foreground",
+			dateTime: item.createdAt,
+			children: formatNotifDate(item.createdAt)
+		})
+	] });
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		modal: false,
+		children: [/* @__PURE__ */ jsx(RailButton, {
+			icon: NotificationIcon,
+			label: "Notifications",
+			showLabel: showLabels,
+			asChild: true,
+			children: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				"aria-label": "Notifications",
+				"aria-description": unread > 0 ? `${unread} unread` : void 0
+			})
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			"aria-label": "Notifications",
+			side: mobile ? "top" : "right",
+			align: mobile ? "start" : "end",
+			sideOffset: 12,
+			collisionPadding: 12,
+			className: "w-80 max-w-[calc(100vw-24px)] max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto p-1.5",
+			children: [
+				/* @__PURE__ */ jsx(DropdownMenuLabel, {
+					className: "px-2.5 py-2 text-sm",
+					children: "Notifications"
+				}),
+				unread > 0 && data?.onMarkAllRead && /* @__PURE__ */ jsx(DropdownMenuItem, {
+					onSelect: (event) => {
+						event.preventDefault();
+						data.onMarkAllRead?.();
+					},
+					children: "Mark all read"
+				}),
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				!data?.items.length ? /* @__PURE__ */ jsx("p", {
+					className: "px-2.5 py-5 text-sm text-muted-foreground",
+					children: "No notifications yet"
+				}) : data.items.map((item) => !item.read && data.onMarkRead ? /* @__PURE__ */ jsx(DropdownMenuItem, {
+					className: "block whitespace-normal px-2.5 py-3",
+					onSelect: (event) => {
+						event.preventDefault();
+						data.onMarkRead?.(item.id);
+					},
+					children: content(item)
+				}, item.id) : /* @__PURE__ */ jsx("div", {
+					className: "px-2.5 py-3",
+					children: content(item)
+				}, item.id))
+			]
+		})]
+	});
+}
+function SidebarLeading({ content, legacy, collapsed }) {
+	if (typeof content === "function") return content({ collapsed });
+	const node = content ?? legacy;
+	if (!node) return null;
+	if (!collapsed) return node;
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		modal: false,
+		children: [/* @__PURE__ */ jsx(RailButton, {
+			icon: Users,
+			label: "Workspace",
+			asChild: true,
+			children: /* @__PURE__ */ jsx(DropdownMenuTrigger, {})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			"aria-label": "Workspace",
+			side: "right",
+			align: "start",
+			sideOffset: 12,
+			collisionPadding: 12,
+			className: "w-64 max-w-[calc(100vw-24px)] p-3",
+			children: node
+		})]
+	});
+}
+function DashboardLayoutInner({ children, variant = "sandbox", navItems, modeItems = [], panels = [], activeNavId, user, isLoading = false, onLogout, onSettingsClick, settingsHref = "/dashboard/settings", onNewSandbox, className, sidebarClassName, contentClassName, topNavLinks, activeTopNavHref, topBarLeading, sidebarLeading, LinkComponent = DefaultLink$1, logoHref = "/", labeledRail = false, footer, railFooter, profileMenuItems, appearance, notifications: notifData, notificationsEnabled = true }) {
 	useBrandThemeSync();
 	const Link = LinkComponent;
 	const [mobileMenuOpen, setMobileMenuOpen] = React$1.useState(false);
-	const [notificationsOpen, setNotificationsOpen] = React$1.useState(false);
-	const notifRef = React$1.useRef(null);
 	React$1.useEffect(() => {
-		if (!notificationsOpen) return;
-		const handler = (e) => {
-			if (notifRef.current && !notifRef.current.contains(e.target)) setNotificationsOpen(false);
-		};
-		const keyHandler = (e) => {
-			if (e.key === "Escape") setNotificationsOpen(false);
+		if (typeof window.matchMedia !== "function") return;
+		const desktop = window.matchMedia("(min-width: 1024px)");
+		const closeOnDesktop = () => {
+			if (desktop.matches) setMobileMenuOpen(false);
 		};
-		document.addEventListener("mousedown", handler);
-		document.addEventListener("keydown", keyHandler);
-		return () => {
-			document.removeEventListener("mousedown", handler);
-			document.removeEventListener("keydown", keyHandler);
-		};
-	}, [notificationsOpen]);
-	const { contentMargin, hidden, mode, hasPanels, panelOpen, toggleRail, railCollapsed } = useSidebar();
+		desktop.addEventListener("change", closeOnDesktop);
+		return () => desktop.removeEventListener("change", closeOnDesktop);
+	}, []);
+	const { mode, hasPanels, panelOpen, toggleRail, railCollapsed } = useSidebar();
 	const modeSet = React$1.useMemo(() => new Set(modeItems), [modeItems]);
-	const collapseDesktopTopBar = collapseEmptyTopBar && React$1.Children.toArray(topBarLeading).length === 0 && (topNavLinks?.length ?? 0) === 0 && !onNewSandbox && !notificationsEnabled;
 	const sidebarUser = React$1.useMemo(() => user ? {
 		email: user.email,
 		name: user.name,
@@ -2757,7 +2848,7 @@ function DashboardLayoutInner({ children, variant = "sandbox", navItems, modeIte
 		user?.avatarUrl
 	]);
 	const activePanel = panels.find((p) => p.mode === mode);
-	const buildSidebarContent = React$1.useCallback((showLabels, allowCollapse) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(SidebarRail, {
+	const buildSidebarContent = React$1.useCallback((showLabels, allowCollapse, mobile = false) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(SidebarRail, {
 		wide: showLabels,
 		children: [
 			/* @__PURE__ */ jsx(RailHeader, {
@@ -2772,12 +2863,30 @@ function DashboardLayoutInner({ children, variant = "sandbox", navItems, modeIte
 				collapsible: allowCollapse,
 				LinkComponent: Link
 			}),
-			/* @__PURE__ */ jsx(SidebarRailNav, {
+			(sidebarLeading != null || topBarLeading != null || onNewSandbox) && /* @__PURE__ */ jsxs("div", {
+				className: cn$1("flex shrink-0 flex-col gap-2 pt-3", showLabels ? "px-2" : "items-center px-1"),
+				children: [(sidebarLeading != null || topBarLeading != null) && /* @__PURE__ */ jsx(SidebarLeading, {
+					content: sidebarLeading,
+					legacy: topBarLeading,
+					collapsed: !showLabels
+				}), onNewSandbox && /* @__PURE__ */ jsx(RailButton, {
+					icon: Plus,
+					label: "New Sandbox",
+					variant: "primary",
+					showLabel: showLabels,
+					className: "min-h-11",
+					onClick: () => {
+						if (mobile) setMobileMenuOpen(false);
+						onNewSandbox();
+					}
+				})]
+			}),
+			/* @__PURE__ */ jsxs(SidebarRailNav, {
 				className: cn$1(showLabels ? "px-2" : void 0, !showLabels && allowCollapse && "cursor-pointer"),
 				onClick: !showLabels && allowCollapse ? (e) => {
 					if (e.target === e.currentTarget) toggleRail();
 				} : void 0,
-				children: navItems.map((item, i) => {
+				children: [navItems.map((item, i) => {
 					const isMode = modeSet.has(item.id);
 					const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
 					const showSep = i > 0 && isMode && !prevIsMode;
@@ -2804,19 +2913,39 @@ function DashboardLayoutInner({ children, variant = "sandbox", navItems, modeIte
 							to: item.href
 						})
 					})] }, item.id);
-				})
+				}), topNavLinks?.map((link) => /* @__PURE__ */ jsx(RailButton, {
+					icon: ExternalLink,
+					label: link.label,
+					isActive: activeTopNavHref === link.href,
+					showLabel: showLabels,
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link, {
+						href: link.href,
+						to: link.href
+					})
+				}, link.href))]
 			}),
-			/* @__PURE__ */ jsx(SidebarRailFooter, {
+			/* @__PURE__ */ jsxs(SidebarRailFooter, {
 				className: cn$1("border-t border-[var(--md3-outline-variant)] pt-2", showLabels && "items-stretch px-2"),
-				children: railFooter !== void 0 ? showLabels ? /* @__PURE__ */ jsxs("div", {
+				children: [notificationsEnabled && /* @__PURE__ */ jsx(SidebarNotifications, {
+					data: notifData,
+					showLabels,
+					mobile
+				}), railFooter !== void 0 ? showLabels ? /* @__PURE__ */ jsxs("div", {
 					className: "flex w-full items-center gap-1",
 					children: [/* @__PURE__ */ jsx("div", {
 						className: "min-w-0 flex-1",
 						children: /* @__PURE__ */ jsx(ProfileAvatar, {
 							user: sidebarUser,
 							isLoading,
-							onLogout,
-							onSettingsClick,
+							onLogout: onLogout ? () => {
+								if (mobile) setMobileMenuOpen(false);
+								onLogout();
+							} : void 0,
+							onSettingsClick: onSettingsClick ? () => {
+								if (mobile) setMobileMenuOpen(false);
+								onSettingsClick();
+							} : void 0,
 							settingsHref,
 							showDetails: showLabels,
 							appearance,
@@ -2832,8 +2961,14 @@ function DashboardLayoutInner({ children, variant = "sandbox", navItems, modeIte
 					children: [railFooter, /* @__PURE__ */ jsx(ProfileAvatar, {
 						user: sidebarUser,
 						isLoading,
-						onLogout,
-						onSettingsClick,
+						onLogout: onLogout ? () => {
+							if (mobile) setMobileMenuOpen(false);
+							onLogout();
+						} : void 0,
+						onSettingsClick: onSettingsClick ? () => {
+							if (mobile) setMobileMenuOpen(false);
+							onSettingsClick();
+						} : void 0,
 						settingsHref,
 						showDetails: showLabels,
 						appearance,
@@ -2843,18 +2978,31 @@ function DashboardLayoutInner({ children, variant = "sandbox", navItems, modeIte
 				}) : /* @__PURE__ */ jsx(ProfileAvatar, {
 					user: sidebarUser,
 					isLoading,
-					onLogout,
-					onSettingsClick,
+					onLogout: onLogout ? () => {
+						if (mobile) setMobileMenuOpen(false);
+						onLogout();
+					} : void 0,
+					onSettingsClick: onSettingsClick ? () => {
+						if (mobile) setMobileMenuOpen(false);
+						onSettingsClick();
+					} : void 0,
 					settingsHref,
 					showDetails: showLabels,
 					appearance,
 					LinkComponent,
 					children: profileMenuItems
-				})
+				})]
 			})
 		]
 	}), panels.length > 0 && /* @__PURE__ */ jsxs(SidebarPanel, { children: [/* @__PURE__ */ jsx(SidebarPanelHeader, { title: activePanel?.title ?? mode }), /* @__PURE__ */ jsx(SidebarPanelContent, { children: activePanel?.content })] })] }), [
 		Link,
+		onNewSandbox,
+		sidebarLeading,
+		topBarLeading,
+		topNavLinks,
+		activeTopNavHref,
+		notificationsEnabled,
+		notifData,
 		variant,
 		logoHref,
 		labeledRail,
@@ -2881,137 +3029,63 @@ function DashboardLayoutInner({ children, variant = "sandbox", navItems, modeIte
 		labeledRail,
 		railCollapsed
 	]);
-	const mobileSidebarContent = React$1.useMemo(() => buildSidebarContent(true, false), [buildSidebarContent]);
+	const mobileSidebarContent = React$1.useMemo(() => buildSidebarContent(true, false, true), [buildSidebarContent]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn$1("min-h-screen bg-surface text-foreground", className),
 		children: [
-			/* @__PURE__ */ jsxs("nav", {
-				className: cn$1("fixed top-0 left-0 right-0 lg:left-[var(--sb-content-margin)] z-50 bg-surface-container-low border-b border-[var(--md3-outline-variant)] flex justify-between items-center px-8 h-14 font-sans text-[13px] tracking-tight transition-[left,width]", MOTION_TRAVEL, collapseDesktopTopBar && "lg:hidden"),
-				style: { "--sb-content-margin": `${hidden ? 0 : contentMargin}px` },
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-8",
-						children: [
-							/* @__PURE__ */ jsx(Link, {
-								href: logoHref,
-								to: logoHref,
-								className: cn$1("lg:hidden flex items-center p-1 rounded-md hover:bg-surface-container-high transition-colors", MOTION_CONTROL),
-								children: /* @__PURE__ */ jsx(Logo, {
-									variant,
-									size: "sm",
-									iconOnly: true
-								})
-							}),
-							topBarLeading,
-							topNavLinks && topNavLinks.length > 0 && /* @__PURE__ */ jsx("div", {
-								className: "hidden md:flex gap-6",
-								children: topNavLinks.map((link) => /* @__PURE__ */ jsx(Link, {
-									href: link.href,
-									to: link.href,
-									className: cn$1("transition-all px-2 py-1 rounded", "duration-[var(--duration-fast)] ease-[var(--ease-standard)]", activeTopNavHref === link.href ? "text-foreground border-b-2 border-primary pb-1" : "text-muted-foreground hover:text-foreground hover:bg-surface-container-high"),
-									children: link.label
-								}, link.href))
-							})
-						]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-4",
-						children: [onNewSandbox && /* @__PURE__ */ jsxs("button", {
+			/* @__PURE__ */ jsxs(Dialog, {
+				open: mobileMenuOpen,
+				onOpenChange: setMobileMenuOpen,
+				children: [/* @__PURE__ */ jsxs("nav", {
+					"aria-label": "Mobile navigation",
+					className: "fixed inset-x-0 top-0 z-40 flex h-12 items-center justify-between border-b border-[var(--md3-outline-variant)] bg-surface-container-low px-4 lg:hidden",
+					children: [/* @__PURE__ */ jsx(Link, {
+						href: logoHref,
+						to: logoHref,
+						"aria-label": "Home",
+						className: cn$1("rounded-md p-1", focusRing),
+						children: /* @__PURE__ */ jsx(Logo, {
+							variant,
+							size: "sm",
+							iconOnly: true
+						})
+					}), /* @__PURE__ */ jsx(DialogTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx("button", {
 							type: "button",
-							onClick: onNewSandbox,
-							className: cn$1("hidden md:flex items-center gap-2 bg-[var(--btn-primary-bg)] border border-[var(--border-accent)] text-[var(--btn-primary-text)] px-4 py-2 rounded-lg font-bold hover:bg-[var(--btn-primary-hover)] transition-all active:scale-95 text-xs", "duration-[var(--duration-fast)] ease-[var(--ease-standard)]"),
-							children: [/* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }), "New Sandbox"]
-						}), notificationsEnabled && /* @__PURE__ */ jsxs("div", {
-							className: "relative",
-							ref: notifRef,
-							children: [/* @__PURE__ */ jsxs("button", {
-								type: "button",
-								className: cn$1("relative text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-surface-container-high", "duration-[var(--duration-fast)] ease-[var(--ease-standard)]"),
-								onClick: () => setNotificationsOpen(!notificationsOpen),
-								"aria-label": "Notifications",
-								"aria-expanded": notificationsOpen,
-								children: [/* @__PURE__ */ jsx(Bell, { className: "h-4 w-4" }), (notifData?.unreadCount ?? 0) > 0 && /* @__PURE__ */ jsx("span", { className: "absolute top-1 right-1 h-2 w-2 rounded-full bg-destructive" })]
-							}), notificationsOpen && /* @__PURE__ */ jsxs("div", {
-								className: "absolute right-0 top-full mt-2 w-80 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14] z-50",
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] px-4 py-3",
-									children: [/* @__PURE__ */ jsx("p", {
-										className: "font-bold text-foreground text-sm",
-										children: "Notifications"
-									}), (notifData?.unreadCount ?? 0) > 0 && notifData?.onMarkAllRead && /* @__PURE__ */ jsx("button", {
-										type: "button",
-										onClick: () => {
-											notifData.onMarkAllRead?.();
-										},
-										className: "text-primary text-xs font-medium hover:underline",
-										children: "Mark all read"
-									})]
-								}), !notifData?.items || notifData.items.length === 0 ? /* @__PURE__ */ jsxs("div", {
-									className: "flex flex-col items-center justify-center px-4 py-8 text-center",
-									children: [
-										/* @__PURE__ */ jsx(Bell, { className: "h-8 w-8 text-muted-foreground/40 mb-2" }),
-										/* @__PURE__ */ jsx("p", {
-											className: "text-muted-foreground text-sm",
-											children: "No notifications yet"
-										}),
-										/* @__PURE__ */ jsx("p", {
-											className: "text-muted-foreground/60 text-xs mt-1",
-											children: "We'll notify you about important updates"
-										})
-									]
-								}) : /* @__PURE__ */ jsx("div", {
-									className: "max-h-80 overflow-y-auto",
-									children: notifData.items.map((n) => /* @__PURE__ */ jsxs("button", {
-										type: "button",
-										className: cn$1("w-full text-left px-4 py-3 border-b border-[var(--md3-outline-variant)] last:border-0 transition-colors", "duration-[var(--duration-fast)] ease-[var(--ease-standard)]", n.read ? "cursor-default" : "bg-primary/5 hover:bg-white/5"),
-										onClick: () => {
-											if (!n.read) notifData.onMarkRead?.(n.id);
-										},
-										children: [
-											/* @__PURE__ */ jsx("p", {
-												className: cn$1("text-sm", !n.read ? "font-semibold text-foreground" : "text-muted-foreground"),
-												children: n.title
-											}),
-											/* @__PURE__ */ jsx("p", {
-												className: "text-xs text-muted-foreground mt-0.5 line-clamp-2",
-												children: n.message
-											}),
-											/* @__PURE__ */ jsx("p", {
-												className: "text-[10px] text-muted-foreground/50 mt-1",
-												children: formatNotifDate(n.createdAt)
-											})
-										]
-									}, n.id))
-								})]
-							})]
-						})]
-					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => setMobileMenuOpen(!mobileMenuOpen),
-						className: "rounded-md p-2 hover:bg-surface-container-high lg:hidden",
-						"aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
-						"aria-expanded": mobileMenuOpen,
-						children: mobileMenuOpen ? /* @__PURE__ */ jsx(XIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx(MenuIcon$1, { className: "h-6 w-6" })
-					})
-				]
-			}),
-			mobileMenuOpen && /* @__PURE__ */ jsx("div", {
-				className: "fixed inset-0 z-30 bg-black/50 lg:hidden",
-				onClick: () => setMobileMenuOpen(false),
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ jsx("aside", {
-				className: cn$1("fixed top-14 bottom-0 left-0 z-30 flex bg-surface-container-low transition-transform lg:hidden", MOTION_TRAVEL, mobileMenuOpen ? "translate-x-0" : "-translate-x-full"),
-				style: { width: panelOpen && hasPanels ? 524 : 256 },
-				children: mobileSidebarContent
+							"aria-label": "Open menu",
+							className: cn$1("flex h-10 w-10 items-center justify-center rounded-md hover:bg-surface-container-high", focusRing),
+							children: /* @__PURE__ */ jsx(MenuIcon$1, { className: "h-5 w-5" })
+						})
+					})]
+				}), /* @__PURE__ */ jsxs(DialogContent, {
+					"aria-describedby": void 0,
+					hideCloseButton: true,
+					className: "inset-y-0 left-0 flex h-dvh max-w-[calc(100vw-24px)] translate-x-0 translate-y-0 gap-0 rounded-none border-y-0 border-l-0 bg-surface-container-low p-0 lg:hidden",
+					style: { width: panelOpen && hasPanels ? 524 : 256 },
+					onClick: (event) => {
+						if (event.target.closest("a[href]")) setMobileMenuOpen(false);
+					},
+					children: [
+						/* @__PURE__ */ jsx(DialogTitle, {
+							className: "sr-only",
+							children: "Navigation"
+						}),
+						/* @__PURE__ */ jsx(DialogClose, {
+							"aria-label": "Close menu",
+							className: cn$1("absolute right-2 top-2 z-10 flex h-10 w-10 items-center justify-center rounded-md hover:bg-surface-container-high", focusRing),
+							children: /* @__PURE__ */ jsx(XIcon, { className: "h-5 w-5" })
+						}),
+						mobileSidebarContent
+					]
+				})]
 			}),
 			/* @__PURE__ */ jsx(Sidebar, {
 				className: cn$1("hidden lg:flex", sidebarClassName),
 				children: sidebarContent
 			}),
 			/* @__PURE__ */ jsx(SidebarContent, {
-				className: cn$1("pt-16 px-6 pb-8 lg:px-8 bg-surface", collapseDesktopTopBar && "lg:pt-0", contentClassName),
+				className: cn$1("pt-12 px-6 pb-8 lg:px-8 lg:pt-0 bg-surface", contentClassName),
 				children
 			}),
 			footer

package/dist/dashboard.d.ts

@@ -1,4 +1,4 @@
-import { $ as DashboardLayoutProps, $t as SIDEBAR_RAIL_WIDTH, A as UsageSummaryData, An as SidebarPanelContentProps, At as TeamRole, B as MetricAreaChartProps, Bn as SidebarRailNav, Bt as ClusterStatusBar, C as PortsList, Cn as RailSeparatorProps, Ct as SandboxTableProps, D as GitPanelProps, Dn as SidebarContentProps, Dt as SandboxCardData, E as GitPanel, En as SidebarContent, Et as SandboxCard, F as VariantList, Fn as SidebarRail, Ft as ResourceSnapshot, G as ProfileComparisonProps, Gt as OutOfCreditsModal, H as MetricChartTone, Hn as SidebarRailProps, Ht as ClusterStatusItem, I as VariantListProps, In as SidebarRailFooter, It as ResourceSnapshotItem, J as SidebarLayout, Jt as CreditBalance, K as ProfileSelector, Kt as OutOfCreditsModalProps, L as VariantOutcome, Ln as SidebarRailFooterProps, Lt as ResourceSnapshotProps, M as SystemLogsViewer, Mn as SidebarPanelHeaderProps, Mt as ActivityFeed, N as SystemLogsViewerProps, Nn as SidebarPanelProps, Nt as ActivityFeedProps, O as GitStatusData, On as SidebarPanel, Ot as SandboxCardProps, P as Variant, Pn as SidebarProps, Pt as ActivityItem, Q as DashboardLayout, Qt as SIDEBAR_RAIL_LABELED_WIDTH, R as VariantStatus, Rn as SidebarRailHeader, Rt as ResourceMeter, S as ExposedPort, Sn as RailSeparator, St as SandboxTable, T as GitCommitData, Tn as Sidebar, Tt as NewSandboxCardProps, U as Profile, Un as SidebarUser, Ut as INSUFFICIENT_BALANCE_CODE, V as MetricChartPoint, Vn as SidebarRailNavProps, Vt as ClusterStatusBarProps, W as ProfileComparison, Wn as ThemeMode, Wt as InsufficientBalance, X as SidebarLayoutNavItem, Xt as SIDEBAR_MOBILE_WIDTH, Y as SidebarLayoutFlyoutItem, Yt as CreditBalanceProps, Z as SidebarLayoutProps, Zt as SIDEBAR_PANEL_WIDTH, _ as NetworkConfigData, _n as RailFlyoutProps, _t as PlanCardsProps, a as InfoPanel, an as RailTooltipProps, at as HarnessLogo, b as ProcessList, bn as RailModeButton, bt as InvoiceTable, c as PromoBannerProps, cn as ProfileAvatarProps, ct as HarnessPicker, d as SnapshotListProps, dn as RailCollapseToggle, dt as chatCapableHarnesses, en as SIDEBAR_TOTAL_WIDTH, et as DashboardUser, f as BackendConfig, fn as RailCollapseToggleProps, ft as Backend, g as NetworkConfig, gn as RailFlyout, gt as PlanCards, h as McpServer, hn as RailExpandableSubItem, ht as PlanCardData, i as SandboxPageShellProps, in as RailTooltip, it as HarnessBrand, j as UsageSummaryProps, jn as SidebarPanelHeader, jt as canAdminSandbox, k as UsageSummary, kn as SidebarPanelContent, kt as SandboxStatus, l as SnapshotInfo, ln as RailButton, lt as HarnessPickerProps, m as BackendStatusData, mn as RailExpandableProps, mt as BackendSelectorProps, n as DashboardPageHeaderProps, nn as SidebarProviderProps, nt as ProductVariant, o as InfoPanelProps, on as AppearanceController, ot as HarnessLogoProps, p as BackendConfigProps, pn as RailExpandable, pt as BackendSelector, q as ProfileSelectorProps, qt as parseInsufficientBalance, r as SandboxPageShell, rn as useSidebar, rt as HARNESS_BRAND, s as PromoBanner, sn as ProfileAvatar, st as HARNESS_OPTIONS, t as DashboardPageHeader, tn as SidebarProvider, tt as NavItem, u as SnapshotList, un as RailButtonProps, ut as HarnessType, v as NetworkConfigProps, vn as RailHeader, vt as PlanFeature, w as PortsListProps, wn as RailThemeToggle, wt as NewSandboxCard, x as ProcessListProps, xn as RailModeButtonProps, xt as InvoiceTableProps, y as ProcessInfo, yn as RailHeaderProps, yt as Invoice, z as MetricAreaChart, zn as SidebarRailHeaderProps, zt as ResourceMeterProps } from "./index-CZ2ErGhV.js";
+import { $ as DashboardLayoutProps, $t as SIDEBAR_RAIL_WIDTH, A as UsageSummaryData, An as SidebarPanelContentProps, At as TeamRole, B as MetricAreaChartProps, Bn as SidebarRailNav, Bt as ClusterStatusBar, C as PortsList, Cn as RailSeparatorProps, Ct as SandboxTableProps, D as GitPanelProps, Dn as SidebarContentProps, Dt as SandboxCardData, E as GitPanel, En as SidebarContent, Et as SandboxCard, F as VariantList, Fn as SidebarRail, Ft as ResourceSnapshot, G as ProfileComparisonProps, Gt as OutOfCreditsModal, H as MetricChartTone, Hn as SidebarRailProps, Ht as ClusterStatusItem, I as VariantListProps, In as SidebarRailFooter, It as ResourceSnapshotItem, J as SidebarLayout, Jt as CreditBalance, K as ProfileSelector, Kt as OutOfCreditsModalProps, L as VariantOutcome, Ln as SidebarRailFooterProps, Lt as ResourceSnapshotProps, M as SystemLogsViewer, Mn as SidebarPanelHeaderProps, Mt as ActivityFeed, N as SystemLogsViewerProps, Nn as SidebarPanelProps, Nt as ActivityFeedProps, O as GitStatusData, On as SidebarPanel, Ot as SandboxCardProps, P as Variant, Pn as SidebarProps, Pt as ActivityItem, Q as DashboardLayout, Qt as SIDEBAR_RAIL_LABELED_WIDTH, R as VariantStatus, Rn as SidebarRailHeader, Rt as ResourceMeter, S as ExposedPort, Sn as RailSeparator, St as SandboxTable, T as GitCommitData, Tn as Sidebar, Tt as NewSandboxCardProps, U as Profile, Un as SidebarUser, Ut as INSUFFICIENT_BALANCE_CODE, V as MetricChartPoint, Vn as SidebarRailNavProps, Vt as ClusterStatusBarProps, W as ProfileComparison, Wn as ThemeMode, Wt as InsufficientBalance, X as SidebarLayoutNavItem, Xt as SIDEBAR_MOBILE_WIDTH, Y as SidebarLayoutFlyoutItem, Yt as CreditBalanceProps, Z as SidebarLayoutProps, Zt as SIDEBAR_PANEL_WIDTH, _ as NetworkConfigData, _n as RailFlyoutProps, _t as PlanCardsProps, a as InfoPanel, an as RailTooltipProps, at as HarnessLogo, b as ProcessList, bn as RailModeButton, bt as InvoiceTable, c as PromoBannerProps, cn as ProfileAvatarProps, ct as HarnessPicker, d as SnapshotListProps, dn as RailCollapseToggle, dt as chatCapableHarnesses, en as SIDEBAR_TOTAL_WIDTH, et as DashboardUser, f as BackendConfig, fn as RailCollapseToggleProps, ft as Backend, g as NetworkConfig, gn as RailFlyout, gt as PlanCards, h as McpServer, hn as RailExpandableSubItem, ht as PlanCardData, i as SandboxPageShellProps, in as RailTooltip, it as HarnessBrand, j as UsageSummaryProps, jn as SidebarPanelHeader, jt as canAdminSandbox, k as UsageSummary, kn as SidebarPanelContent, kt as SandboxStatus, l as SnapshotInfo, ln as RailButton, lt as HarnessPickerProps, m as BackendStatusData, mn as RailExpandableProps, mt as BackendSelectorProps, n as DashboardPageHeaderProps, nn as SidebarProviderProps, nt as ProductVariant, o as InfoPanelProps, on as AppearanceController, ot as HarnessLogoProps, p as BackendConfigProps, pn as RailExpandable, pt as BackendSelector, q as ProfileSelectorProps, qt as parseInsufficientBalance, r as SandboxPageShell, rn as useSidebar, rt as HARNESS_BRAND, s as PromoBanner, sn as ProfileAvatar, st as HARNESS_OPTIONS, t as DashboardPageHeader, tn as SidebarProvider, tt as NavItem, u as SnapshotList, un as RailButtonProps, ut as HarnessType, v as NetworkConfigProps, vn as RailHeader, vt as PlanFeature, w as PortsListProps, wn as RailThemeToggle, wt as NewSandboxCard, x as ProcessListProps, xn as RailModeButtonProps, xt as InvoiceTableProps, y as ProcessInfo, yn as RailHeaderProps, yt as Invoice, z as MetricAreaChart, zn as SidebarRailHeaderProps, zt as ResourceMeterProps } from "./index-B_70pkX2.js";
 import { a as modelBrandFor, i as canonicalModelId, n as ModelBrandStack, r as ModelInfo, t as ModelBrandIdentity } from "./model-brand-B9A4H9pJ.js";
 import { a as UsageChartProps, c as PricingPageProps, d as BillingBalance, f as BillingDashboard, h as BillingUsage, i as UsageChart, l as PricingTier, m as BillingSubscription, n as TemplateCardData, o as UsageDataPoint, p as BillingDashboardProps, r as TemplateCardProps, s as PricingPage, t as TemplateCard, u as formatPrice } from "./template-card-L-4gmjx2.js";
 export { ActivityFeed, type ActivityFeedProps, type ActivityItem, type AppearanceController, type Backend, BackendConfig, type BackendConfigProps, BackendSelector, type BackendSelectorProps, type BackendStatusData, type BillingBalance, BillingDashboard, type BillingDashboardProps, type BillingSubscription, type BillingUsage, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DashboardLayout, type DashboardLayoutProps, DashboardPageHeader, type DashboardPageHeaderProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, type HarnessBrand, HarnessLogo, type HarnessLogoProps, HarnessPicker, type HarnessPickerProps, type HarnessType, INSUFFICIENT_BALANCE_CODE, InfoPanel, type InfoPanelProps, type InsufficientBalance, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, MetricAreaChart, type MetricAreaChartProps, type MetricChartPoint, type MetricChartTone, type ModelBrandIdentity, ModelBrandStack, type ModelInfo, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, OutOfCreditsModal, type OutOfCreditsModalProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, PortsList, type PortsListProps, PricingPage, type PricingPageProps, type PricingTier, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailCollapseToggle, type RailCollapseToggleProps, RailExpandable, type RailExpandableProps, type RailExpandableSubItem, RailFlyout, type RailFlyoutProps, RailHeader, type RailHeaderProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, RailThemeToggle, RailTooltip, type RailTooltipProps, ResourceMeter, type ResourceMeterProps, ResourceSnapshot, type ResourceSnapshotItem, type ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, SandboxPageShell, type SandboxPageShellProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarLayout, type SidebarLayoutFlyoutItem, type SidebarLayoutNavItem, type SidebarLayoutProps, SidebarPanel, SidebarPanelContent, type SidebarPanelContentProps, SidebarPanelHeader, type SidebarPanelHeaderProps, type SidebarPanelProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailFooter, type SidebarRailFooterProps, SidebarRailHeader, type SidebarRailHeaderProps, SidebarRailNav, type SidebarRailNavProps, type SidebarRailProps, type SidebarUser, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, type TeamRole, TemplateCard, type TemplateCardData, type TemplateCardProps, type ThemeMode, UsageChart, type UsageChartProps, type UsageDataPoint, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, canonicalModelId, chatCapableHarnesses, formatPrice, modelBrandFor, parseInsufficientBalance, useSidebar };

package/dist/dashboard.js

@@ -1,4 +1,4 @@
-import { $ as SidebarRailHeader, A as ResourceSnapshot, B as RailExpandable, C as PlanCards, D as SandboxCard, E as NewSandboxCard, F as parseInsufficientBalance, G as RailThemeToggle, H as RailHeader, I as CreditBalance, J as SidebarPanel, K as Sidebar, L as ProfileAvatar, M as ClusterStatusBar, N as INSUFFICIENT_BALANCE_CODE, O as canAdminSandbox, P as OutOfCreditsModal, Q as SidebarRailFooter, R as RailButton, S as BackendSelector, T as SandboxTable, U as RailModeButton, V as RailFlyout, W as RailSeparator, X as SidebarPanelHeader, Y as SidebarPanelContent, Z as SidebarRail, _ as HARNESS_OPTIONS, a as NetworkConfig, at as SIDEBAR_RAIL_WIDTH, b as HARNESS_BRAND, c as GitPanel, ct as useSidebar, d as VariantList, et as SidebarRailNav, f as MetricAreaChart, g as DashboardLayout, h as SidebarLayout, i as BackendConfig, it as SIDEBAR_RAIL_LABELED_WIDTH, j as ResourceMeter, k as ActivityFeed, l as UsageSummary, m as ProfileSelector, n as PromoBanner, nt as SIDEBAR_MOBILE_WIDTH, o as ProcessList, ot as SIDEBAR_TOTAL_WIDTH, p as ProfileComparison, q as SidebarContent, r as SnapshotList, rt as SIDEBAR_PANEL_WIDTH, s as PortsList, st as SidebarProvider, t as InfoPanel, tt as RailTooltip, u as SystemLogsViewer, v as HarnessPicker, w as InvoiceTable, x as HarnessLogo, y as chatCapableHarnesses, z as RailCollapseToggle } from "./dashboard-BpEeXRo1.js";
+import { $ as SidebarRailHeader, A as ResourceSnapshot, B as RailExpandable, C as PlanCards, D as SandboxCard, E as NewSandboxCard, F as parseInsufficientBalance, G as RailThemeToggle, H as RailHeader, I as CreditBalance, J as SidebarPanel, K as Sidebar, L as ProfileAvatar, M as ClusterStatusBar, N as INSUFFICIENT_BALANCE_CODE, O as canAdminSandbox, P as OutOfCreditsModal, Q as SidebarRailFooter, R as RailButton, S as BackendSelector, T as SandboxTable, U as RailModeButton, V as RailFlyout, W as RailSeparator, X as SidebarPanelHeader, Y as SidebarPanelContent, Z as SidebarRail, _ as HARNESS_OPTIONS, a as NetworkConfig, at as SIDEBAR_RAIL_WIDTH, b as HARNESS_BRAND, c as GitPanel, ct as useSidebar, d as VariantList, et as SidebarRailNav, f as MetricAreaChart, g as DashboardLayout, h as SidebarLayout, i as BackendConfig, it as SIDEBAR_RAIL_LABELED_WIDTH, j as ResourceMeter, k as ActivityFeed, l as UsageSummary, m as ProfileSelector, n as PromoBanner, nt as SIDEBAR_MOBILE_WIDTH, o as ProcessList, ot as SIDEBAR_TOTAL_WIDTH, p as ProfileComparison, q as SidebarContent, r as SnapshotList, rt as SIDEBAR_PANEL_WIDTH, s as PortsList, st as SidebarProvider, t as InfoPanel, tt as RailTooltip, u as SystemLogsViewer, v as HarnessPicker, w as InvoiceTable, x as HarnessLogo, y as chatCapableHarnesses, z as RailCollapseToggle } from "./dashboard-C2VXLIQC.js";
 import { n as canonicalModelId, r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
-import { a as PricingPage, i as UsageChart, n as SandboxPageShell, o as formatPrice, r as TemplateCard, s as BillingDashboard, t as DashboardPageHeader } from "./page-layout-Cf90DTWr.js";
+import { a as PricingPage, i as UsageChart, n as SandboxPageShell, o as formatPrice, r as TemplateCard, s as BillingDashboard, t as DashboardPageHeader } from "./page-layout-DJV7cbxx.js";
 export { ActivityFeed, BackendConfig, BackendSelector, BillingDashboard, ClusterStatusBar, CreditBalance, DashboardLayout, DashboardPageHeader, GitPanel, HARNESS_BRAND, HARNESS_OPTIONS, HarnessLogo, HarnessPicker, INSUFFICIENT_BALANCE_CODE, InfoPanel, InvoiceTable, MetricAreaChart, ModelBrandStack, NetworkConfig, NewSandboxCard, OutOfCreditsModal, PlanCards, PortsList, PricingPage, ProcessList, ProfileAvatar, ProfileComparison, ProfileSelector, PromoBanner, RailButton, RailCollapseToggle, RailExpandable, RailFlyout, RailHeader, RailModeButton, RailSeparator, RailThemeToggle, RailTooltip, ResourceMeter, ResourceSnapshot, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxPageShell, SandboxTable, Sidebar, SidebarContent, SidebarLayout, SidebarPanel, SidebarPanelContent, SidebarPanelHeader, SidebarProvider, SidebarRail, SidebarRailFooter, SidebarRailHeader, SidebarRailNav, SnapshotList, SystemLogsViewer, TemplateCard, UsageChart, UsageSummary, VariantList, canAdminSandbox, canonicalModelId, chatCapableHarnesses, formatPrice, modelBrandFor, parseInsufficientBalance, useSidebar };