@tangle-network/sandbox-ui 0.134.6 → 0.134.8

package/README.md

@@ -18,7 +18,12 @@ React component library for [Tangle Sandbox](https://sandbox.tangle.tools) — a
 npm install @tangle-network/sandbox-ui
 ```
 
-**Required peers:** `react` and `react-dom` 18 or 19, `@tangle-network/agent-interface ^1.0.0 || ^2.0.0`, `@tangle-network/brand ^1.6.0`, and `@tangle-network/ui ^11.10.0`.
+**Required peers:** `react` and `react-dom` 18 or 19, `@tangle-network/agent-interface ^1.0.0 || ^2.0.0 || ^3.0.0 || ^5.2.0`, `@tangle-network/brand ^1.23.0`, and `@tangle-network/ui ^11.33.0`.
+
+The Interface compatibility check exercises the exact supported floors 1.0.0,
+2.0.0, 3.0.0, and 5.2.0, including source checks and a packed consumer's public
+declarations. Interface 4.x, 5.0.x, and 5.1.x are not admitted. New majors require
+qualification before the peer range is extended.
 Optional peers are required only by the subpaths that use them; see [package.json](./package.json). `/editor` needs its tiptap, `yjs` and `@hocuspocus/provider` peers only when it renders an editor, and the `@tangle-network/ui` README holds the table of which surface needs which. `/files` needs `pdfjs-dist` only for `PdfViewer`, which `FilePreview` uses for PDFs; without it the viewer says so and falls back to the browser's own PDF viewer. The `ui` README covers its worker and asset setup through `configurePdfViewer`.
 
 ## Usage

package/dist/{dashboard-Ba7DlJHW.js → dashboard-CUFAz94r.js}

@@ -1,15 +1,14 @@
-import { b as Button$1, sr as Logo } from "./primitives-DSpl1Thf.js";
+import { b as Button$1, lr as Logo } from "./primitives-CAGwYo7I.js";
 import { t as cn$1 } from "./utils-DzWbktWG.js";
 import { r as ShellHeader } from "./shell-header-CTh3oV_e.js";
-import { n as MOTION_SURFACE, r as MOTION_TRAVEL, t as MOTION_CONTROL } from "./motion-DkyBRJb9.js";
+import { n as MOTION_SURFACE, t as MOTION_CONTROL } from "./motion-D4njYpys.js";
 import { a as moonshot_default } from "./model-brand-BSr9on8C.js";
 import "./page-layout-2IRtfx51.js";
-import { Avatar, AvatarFallback, AvatarImage, Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Skeleton, StatCard, StatusPill } from "@tangle-network/ui/primitives";
+import { Avatar, AvatarFallback, AvatarImage, Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Sheet, SheetClose, SheetContent, SheetTitle, SheetTrigger, Skeleton, StatCard, StatusPill } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import * as Dialog$1 from "@radix-ui/react-dialog";
 import { Activity, ArrowRight, BarChart2, Bell, Bot, Box, Camera, Check, ChevronDown, ChevronLeft, ChevronRight, Clock, Code2, Copy, Cpu, DollarSign, ExternalLink, File, FileEdit, FilePlus, GitBranch, GitCommit, Globe, HardDrive, Key, Layers, MemoryStick, MessageSquare, Monitor, MoreHorizontal, MoreVertical, Network, PanelLeft, Play, Plug, Plus, Power, PowerOff, RotateCcw, Skull, Terminal, Trash2, User, Users } from "lucide-react";
 import { focusField, focusRing, focusRingInset, timeAgo } from "@tangle-network/ui/utils";
 import * as Select$1 from "@radix-ui/react-select";
@@ -415,7 +414,7 @@ function Sidebar({ children, className, style }) {
 	const { panelOpen, hidden, hasPanels, railWidth } = useSidebar();
 	return /* @__PURE__ */ jsx("div", {
 		"data-sidebar": "true",
-		className: cn$1("fixed inset-y-0 left-0 z-40 flex bg-surface-container-low border-r border-[var(--md3-outline-variant)] transition-[transform,width]", MOTION_TRAVEL, hidden && "-translate-x-full", className),
+		className: cn$1("fixed inset-y-0 left-0 z-40 flex bg-surface-container-low transition-none border-r border-[var(--md3-outline-variant)]", hidden && "-translate-x-full", className),
 		style: {
 			width: panelOpen && hasPanels ? railWidth + 268 : railWidth,
 			...style
@@ -557,7 +556,7 @@ function RailFlyout({ icon: Icon, label, description, isActive, showLabel, title
 						className: "text-sm font-medium",
 						children: label
 					}),
-					showLabel && /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn$1("ml-auto h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform", "duration-[var(--duration-fast)] ease-[var(--ease-standard)]", open && "rotate-180") })
+					showLabel && /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn$1("ml-auto h-4 w-4 shrink-0 text-muted-foreground/60 transition-transform", "[transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none", open && "rotate-180") })
 				]
 			})
 		}), open && /* @__PURE__ */ jsxs("div", {
@@ -684,10 +683,14 @@ function RailExpandable({ icon: Icon, label, description, href, isActive, showLa
 					className: cn$1("min-w-0 flex-1 truncate", item.isLoading && "agent-shimmer", item.unread && !active && "font-medium text-foreground"),
 					...item.isLoading ? {
 						role: "status",
-						"aria-label": "Agent responding",
-						"data-motion": "essential"
+						"aria-label": "Agent responding"
 					} : {},
 					children: item.label
+				}),
+				item.isLoading && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "sr-only shrink-0 text-xs text-muted-foreground motion-reduce:not-sr-only",
+					children: "Responding"
 				})
 			]
 		}, item.id);
@@ -873,12 +876,16 @@ function RailExpandable({ icon: Icon, label, description, href, isActive, showLa
 		}), /* @__PURE__ */ jsx("div", {
 			ref: discloseRef,
 			id: discloseId,
-			className: "agent-disclose",
+			className: "grid transition-none",
+			style: { gridTemplateRows: open ? "1fr" : "0fr" },
 			"data-open": open ? "true" : "false",
-			children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", {
-				className: "flex flex-col gap-0.5 pl-3 pt-0.5",
-				children: everOpened ? list : null
-			}) })
+			children: /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 overflow-hidden",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-0.5 pl-3 pt-0.5",
+					children: everOpened ? list : null
+				})
+			})
 		})]
 	});
 }
@@ -925,7 +932,7 @@ function SidebarPanelContent({ children, className }) {
 function SidebarContent({ children, className }) {
 	const { contentMargin } = useSidebar();
 	return /* @__PURE__ */ jsx("main", {
-		className: cn$1("min-h-screen transition-[margin-left] lg:ml-[var(--sb-content-margin,0px)]", MOTION_TRAVEL, className),
+		className: cn$1("min-h-screen transition-none lg:ml-[var(--sb-content-margin,0px)]", className),
 		style: { "--sb-content-margin": `${contentMargin}px` },
 		children
 	});
@@ -2595,25 +2602,19 @@ function DashboardLayoutInner({ children, variant = "sandbox", navItems, modeIte
 					const isMode = modeSet.has(item.id);
 					const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
 					const showSep = i > 0 && isMode && !prevIsMode;
-					const arrival = {
-						className: "agent-arrive",
-						style: { "--stagger-index": i }
-					};
 					return /* @__PURE__ */ jsxs(React$1.Fragment, { children: [showSep && /* @__PURE__ */ jsx(RailSeparator, { className: showLabels ? "w-full" : void 0 }), isMode ? /* @__PURE__ */ jsx(RailModeButton, {
 						mode: item.id,
 						icon: item.icon,
 						label: item.label,
 						badge: item.badge,
 						badgeLabel: item.badgeLabel,
-						showLabel: showLabels,
-						...arrival
+						showLabel: showLabels
 					}) : /* @__PURE__ */ jsx(RailButton, {
 						icon: item.icon,
 						label: item.label,
 						isActive: activeNavId === item.id,
 						showLabel: showLabels,
 						asChild: true,
-						...arrival,
 						children: /* @__PURE__ */ jsx(Link, {
 							href: item.href,
 							to: item.href
@@ -2888,6 +2889,10 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 	const hasProfile = user !== void 0 || onLogout !== void 0 || onSettingsClick !== void 0;
 	const showLabels = railLabels && !railCollapsed;
 	const [mobileNavOpen, setMobileNavOpen] = React$1.useState(false);
+	const [mobileNavPresent, setMobileNavPresent] = React$1.useState(false);
+	const handleMobileNavRef = React$1.useCallback((node) => {
+		setMobileNavPresent(node !== null);
+	}, []);
 	const closeMobileNav = React$1.useCallback(() => setMobileNavOpen(false), []);
 	React$1.useEffect(() => {
 		if (!mobileNavOpen) return;
@@ -2905,24 +2910,16 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 		return () => desktop.removeEventListener("change", closeOnDesktop);
 	}, [hideBelow, mobileNavOpen]);
 	const railVisible = useRailVisible(hideBelow);
-	const headerSlot = mobileNavOpen ? "drawer" : railVisible ? "rail" : "bar";
+	const headerSlot = mobileNavOpen || mobileNavPresent ? "drawer" : railVisible ? "rail" : "bar";
 	/**
 	* One nav list, rendered twice — once in the desktop rail, once in the mobile
 	* drawer. Sharing the renderer is the point: a product adds a destination to
 	* `navItems` and it appears on both, so a phone can never silently lose a
 	* door the desktop has.
 	*
-	* Every item arrives on the shared entrance, staggered by its position: the
-	* rail reads as a list unfolding top-down rather than a block of icons
-	* appearing at once. `--stagger-index` is capped inside `.agent-arrive`, so a
-	* long nav does not open with a cascade.
 	*/
 	function renderNavItems({ showLabels, onNavigate }) {
-		return navItems.map((item, index) => {
-			const arrival = {
-				className: "agent-arrive",
-				style: { "--stagger-index": index }
-			};
+		return navItems.map((item) => {
 			if (item.expandable) return /* @__PURE__ */ jsx(RailExpandable, {
 				icon: item.icon,
 				label: item.label,
@@ -2936,8 +2933,7 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 				emptyLabel: item.emptyLabel,
 				defaultOpen: item.defaultOpen,
 				onNavigate,
-				LinkComponent,
-				...arrival
+				LinkComponent
 			}, item.id);
 			if (item.flyoutItems && item.flyoutItems.length > 0) {
 				const activeSet = new Set(item.flyoutActiveIds ?? []);
@@ -2948,7 +2944,6 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 					title: item.label,
 					showLabel: showLabels,
 					isActive: activeId === item.id || item.flyoutItems.some((f) => activeSet.has(f.id)),
-					...arrival,
 					children: item.flyoutItems.map((f) => {
 						const FIcon = f.icon;
 						const active = activeSet.has(f.id);
@@ -2978,8 +2973,7 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 					togglePanel();
 					onNavigate?.();
 				},
-				showLabel: showLabels,
-				...arrival
+				showLabel: showLabels
 			}, item.id) : /* @__PURE__ */ jsx(RailButton, {
 				icon: item.icon,
 				label: item.label,
@@ -2990,7 +2984,6 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 				showLabel: showLabels,
 				variant: item.variant,
 				asChild: true,
-				...arrival,
 				children: /* @__PURE__ */ jsx(Link, {
 					href: item.href,
 					to: item.href,
@@ -3000,7 +2993,7 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 			}, item.id);
 		});
 	}
-	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+	return /* @__PURE__ */ jsx(Sheet, {
 		open: mobileNavOpen,
 		onOpenChange: setMobileNavOpen,
 		children: /* @__PURE__ */ jsxs("div", {
@@ -3052,7 +3045,7 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 						divider: false,
 						className: cn$1("gap-1 border-b border-[var(--md3-outline-variant)] bg-surface px-2", SHOW_BELOW_CLASS[hideBelow]),
 						children: [
-							/* @__PURE__ */ jsx(Dialog$1.Trigger, {
+							/* @__PURE__ */ jsx(SheetTrigger, {
 								asChild: true,
 								children: /* @__PURE__ */ jsx("button", {
 									type: "button",
@@ -3060,7 +3053,7 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 									"aria-expanded": mobileNavOpen,
 									"aria-controls": "sidebar-mobile-nav",
 									"aria-haspopup": "dialog",
-									className: cn$1("flex size-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground", "duration-[var(--duration-fast)] ease-[var(--ease-standard)]"),
+									className: cn$1("flex size-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground", "[transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none"),
 									children: /* @__PURE__ */ jsx(MenuIcon, { className: "size-5" })
 								})
 							}),
@@ -3086,9 +3079,10 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 						]
 					}), children]
 				}),
-				hideBelow && mobileNavOpen && /* @__PURE__ */ jsx(MobileNavDrawer, {
+				hideBelow && /* @__PURE__ */ jsx(MobileNavDrawer, {
+					contentRef: handleMobileNavRef,
 					breakpoint: hideBelow,
-					header: railHeaderContent ?? logo,
+					header: headerSlot === "drawer" ? railHeaderContent ?? logo : void 0,
 					footer: railFooter !== void 0 || hasProfile ? /* @__PURE__ */ jsxs(Fragment, { children: [railFooter, hasProfile && /* @__PURE__ */ jsx(ProfileAvatar, {
 						user: user ?? void 0,
 						isLoading,
@@ -3121,14 +3115,17 @@ function SidebarLayoutInner({ children, navItems, activeId, panel, logo, logoHre
 * Use the same modal layer as the account menu and other shared disclosures:
 * only the top layer handles Escape, and the trigger owns return focus.
 */
-function MobileNavDrawer({ breakpoint, header, footer, panel, children }) {
-	return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Overlay, { className: cn$1("fixed inset-0 z-50 bg-black/50", SHOW_BELOW_CLASS[breakpoint]) }), /* @__PURE__ */ jsxs(Dialog$1.Content, {
+function MobileNavDrawer({ contentRef, breakpoint, header, footer, panel, children }) {
+	return /* @__PURE__ */ jsxs(SheetContent, {
+		ref: contentRef,
+		side: "left",
+		hideCloseButton: true,
 		id: "sidebar-mobile-nav",
 		"aria-describedby": void 0,
 		style: { width: 256 },
-		className: cn$1("agent-arrive fixed inset-y-0 left-0 z-50 flex max-w-[85vw] flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-low shadow-xl", SHOW_BELOW_CLASS[breakpoint]),
+		className: cn$1("max-w-[85vw] gap-0 border-[var(--md3-outline-variant)] bg-surface-container-low", SHOW_BELOW_CLASS[breakpoint]),
 		children: [
-			/* @__PURE__ */ jsx(Dialog$1.Title, {
+			/* @__PURE__ */ jsx(SheetTitle, {
 				className: "sr-only",
 				children: "Navigation"
 			}),
@@ -3138,7 +3135,7 @@ function MobileNavDrawer({ breakpoint, header, footer, panel, children }) {
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "flex min-w-0 flex-1 items-center",
 					children: header
-				}), /* @__PURE__ */ jsx(Dialog$1.Close, {
+				}), /* @__PURE__ */ jsx(SheetClose, {
 					asChild: true,
 					children: /* @__PURE__ */ jsx("button", {
 						type: "button",
@@ -3161,7 +3158,7 @@ function MobileNavDrawer({ breakpoint, header, footer, panel, children }) {
 				children: footer
 			})
 		]
-	})] });
+	});
 }
 /**
 * App shell built on the sidebar rail + slide-out panel, without a top nav bar.

package/dist/dashboard.js

@@ -1,4 +1,4 @@
-import { $ as useSidebar, A as parseInsufficientBalance, B as SidebarPanel, C as SandboxStatusPill, D as ResourceMeter, E as ResourceSnapshot, F as RailHeader, G as SidebarRailNav, H as SidebarPanelHeader, I as RailModeButton, J as SIDEBAR_PANEL_WIDTH, K as RailTooltip, L as RailSeparator, M as RailButton, N as RailExpandable, O as INSUFFICIENT_BALANCE_CODE, P as RailFlyout, Q as SidebarProvider, R as Sidebar, S as SANDBOX_STATUS, T as ActivityFeed, U as SidebarRail, V as SidebarPanelContent, W as SidebarRailFooter, X as SIDEBAR_RAIL_WIDTH, Y as SIDEBAR_RAIL_LABELED_WIDTH, Z as SIDEBAR_TOTAL_WIDTH, _ as BackendSelector, a as PortsList, b as SandboxCard, c as SystemLogsViewer, d as DashboardLayout, f as HARNESS_OPTIONS, g as HarnessLogo, h as HARNESS_BRAND, i as TemplateCard, j as ProfileAvatar, k as OutOfCreditsModal, l as MetricAreaChart, m as chatCapableHarnesses, n as SnapshotList, o as GitPanel, p as HarnessPicker, q as SIDEBAR_MOBILE_WIDTH, r as ProcessList, s as UsageSummary, t as PromoBanner, u as SidebarLayout, v as SandboxTable, w as sandboxStatus, x as canAdminSandbox, y as NewSandboxCard, z as SidebarContent } from "./dashboard-Ba7DlJHW.js";
+import { $ as useSidebar, A as parseInsufficientBalance, B as SidebarPanel, C as SandboxStatusPill, D as ResourceMeter, E as ResourceSnapshot, F as RailHeader, G as SidebarRailNav, H as SidebarPanelHeader, I as RailModeButton, J as SIDEBAR_PANEL_WIDTH, K as RailTooltip, L as RailSeparator, M as RailButton, N as RailExpandable, O as INSUFFICIENT_BALANCE_CODE, P as RailFlyout, Q as SidebarProvider, R as Sidebar, S as SANDBOX_STATUS, T as ActivityFeed, U as SidebarRail, V as SidebarPanelContent, W as SidebarRailFooter, X as SIDEBAR_RAIL_WIDTH, Y as SIDEBAR_RAIL_LABELED_WIDTH, Z as SIDEBAR_TOTAL_WIDTH, _ as BackendSelector, a as PortsList, b as SandboxCard, c as SystemLogsViewer, d as DashboardLayout, f as HARNESS_OPTIONS, g as HarnessLogo, h as HARNESS_BRAND, i as TemplateCard, j as ProfileAvatar, k as OutOfCreditsModal, l as MetricAreaChart, m as chatCapableHarnesses, n as SnapshotList, o as GitPanel, p as HarnessPicker, q as SIDEBAR_MOBILE_WIDTH, r as ProcessList, s as UsageSummary, t as PromoBanner, u as SidebarLayout, v as SandboxTable, w as sandboxStatus, x as canAdminSandbox, y as NewSandboxCard, z as SidebarContent } from "./dashboard-CUFAz94r.js";
 import { i as modelBrandFor, n as ProviderMark, r as canonicalModelId, t as ModelBrandStack } from "./model-brand-BSr9on8C.js";
 import { a as formatPrice, i as PricingPage, n as SandboxPageShell, o as BillingDashboard, r as UsageChart, t as DashboardPageHeader } from "./page-layout-2IRtfx51.js";
 export { ActivityFeed, BackendSelector, BillingDashboard, DashboardLayout, DashboardPageHeader, GitPanel, HARNESS_BRAND, HARNESS_OPTIONS, HarnessLogo, HarnessPicker, INSUFFICIENT_BALANCE_CODE, MetricAreaChart, ModelBrandStack, NewSandboxCard, OutOfCreditsModal, PortsList, PricingPage, ProcessList, ProfileAvatar, PromoBanner, ProviderMark, RailButton, RailExpandable, RailFlyout, RailHeader, RailModeButton, RailSeparator, RailTooltip, ResourceMeter, ResourceSnapshot, SANDBOX_STATUS, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxPageShell, SandboxStatusPill, SandboxTable, Sidebar, SidebarContent, SidebarLayout, SidebarPanel, SidebarPanelContent, SidebarPanelHeader, SidebarProvider, SidebarRail, SidebarRailFooter, SidebarRailNav, SnapshotList, SystemLogsViewer, TemplateCard, UsageChart, UsageSummary, canAdminSandbox, canonicalModelId, chatCapableHarnesses, formatPrice, modelBrandFor, parseInsufficientBalance, sandboxStatus, useSidebar };