@openspecui/web 2.3.4 → 2.3.5

package/dist-ssg/server/entry-server.js

@@ -7433,7 +7433,7 @@ function useSearch(opts) {
 }
 //#endregion
 //#region ../../node_modules/.pnpm/@tanstack+react-router@1.139.3_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@tanstack/react-router/dist/esm/utils.js
-var useLayoutEffect$5 = typeof window !== "undefined" ? import_react.useLayoutEffect : import_react.useEffect;
+var useLayoutEffect$7 = typeof window !== "undefined" ? import_react.useLayoutEffect : import_react.useEffect;
 function usePrevious(value) {
 	const ref = import_react.useRef({
 		value,
@@ -8353,7 +8353,7 @@ function Transitioner() {
 			unsub();
 		};
 	}, [router, router.history]);
-	useLayoutEffect$5(() => {
+	useLayoutEffect$7(() => {
 		if (typeof window !== "undefined" && router.ssr || mountLoadForRouter.current.router === router && mountLoadForRouter.current.mounted) return;
 		mountLoadForRouter.current = {
 			router,
@@ -8368,7 +8368,7 @@ function Transitioner() {
 		};
 		tryLoad();
 	}, [router]);
-	useLayoutEffect$5(() => {
+	useLayoutEffect$7(() => {
 		if (previousIsLoading && !isLoading) router.emit({
 			type: "onLoad",
 			...getLocationChangeInfo(router.state)
@@ -8378,7 +8378,7 @@ function Transitioner() {
 		router,
 		isLoading
 	]);
-	useLayoutEffect$5(() => {
+	useLayoutEffect$7(() => {
 		if (previousIsPagePending && !isPagePending) router.emit({
 			type: "onBeforeRouteMount",
 			...getLocationChangeInfo(router.state)
@@ -8388,7 +8388,7 @@ function Transitioner() {
 		previousIsPagePending,
 		router
 	]);
-	useLayoutEffect$5(() => {
+	useLayoutEffect$7(() => {
 		if (previousIsAnyPending && !isAnyPending) {
 			const changeInfo = getLocationChangeInfo(router.state);
 			router.emit({
@@ -39494,8 +39494,9 @@ function waitForDomCommit() {
 		setTimeout(finish, 0);
 	});
 }
-function filterDistinctEntries(entries, beforeEntries) {
+function filterAfterEntries(entries, beforeEntries, intent) {
 	if (beforeEntries.length === 0) return entries;
+	if (intent.kind === "tab-carousel") return entries;
 	const beforeElements = new Set(beforeEntries.map(([element]) => element));
 	return entries.filter(([element]) => !beforeElements.has(element));
 }
@@ -39503,15 +39504,15 @@ async function collectSettledAfterEntries(beforeEntries, collectAfterEntries, in
 	if (!collectAfterEntries) return [];
 	if (intent.kind === "route-detail" && beforeEntries.length > 0) return waitForNamedEntriesReady({
 		expectedNames: beforeEntries.map(([, name]) => name),
-		collectEntries: () => filterDistinctEntries(collectAfterEntries(), beforeEntries)
+		collectEntries: () => filterAfterEntries(collectAfterEntries(), beforeEntries, intent)
 	});
 	for (let attempt = 0; attempt < 4; attempt += 1) {
-		const entries = filterDistinctEntries(collectAfterEntries(), beforeEntries);
+		const entries = filterAfterEntries(collectAfterEntries(), beforeEntries, intent);
 		if (entries.length > 0 || beforeEntries.length === 0) return entries;
 		await Promise.resolve();
 		await waitForDomCommit();
 	}
-	return filterDistinctEntries(collectAfterEntries(), beforeEntries);
+	return filterAfterEntries(collectAfterEntries(), beforeEntries, intent);
 }
 function setIntentDataset(intent) {
 	const root = document.documentElement;
@@ -73681,16 +73682,6 @@ var tabsStyleText = (id) => {
       transform: scaleX(0.5);
     }
 
-    #${id}[data-tabs-variant='default'] .tabs-button > button.tab-selected {
-      background-image: linear-gradient(
-        to bottom,
-        transparent,
-        transparent calc(100% - 2px),
-        var(--primary) calc(100% - 2px),
-        var(--primary)
-      );
-    }
-
     #${id} .tabs-strip {
       background-image: linear-gradient(
         to bottom,
@@ -73728,11 +73719,17 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 	const dropIndicatorRef = (0, import_react.useRef)(null);
 	const contentOrderRef = (0, import_react.useRef)(tabs.map((tab) => tab.id));
 	const rootRef = (0, import_react.useRef)(null);
+	const headerRef = (0, import_react.useRef)(null);
+	const headerShellRef = (0, import_react.useRef)(null);
+	const headerForegroundRef = (0, import_react.useRef)(null);
+	const selectionIndicatorRef = (0, import_react.useRef)(null);
+	const tabsButtonRef = (0, import_react.useRef)(null);
 	const triggerRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
 	const panelRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
 	const activeTab = controlled ?? uncontrolled;
 	const reorderable = typeof onTabOrderChange === "function" && tabs.length > 1;
 	const tabIds = tabs.map((tab) => tab.id);
+	const tabLayoutSignature = tabIds.join("|");
 	const tabsById = (0, import_react.useMemo)(() => new Map(tabs.map((tab) => [tab.id, tab])), [tabs]);
 	const contentTabs = (0, import_react.useMemo)(() => {
 		const nextOrder = buildStableContentTabIds(contentOrderRef.current, tabIds);
@@ -73752,10 +73749,69 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 		getPanel(tabId) {
 			return panelRefs.current.get(tabId) ?? null;
 		},
+		getHeaderShell() {
+			return headerShellRef.current;
+		},
+		getHeaderForeground() {
+			return headerForegroundRef.current;
+		},
+		getSelectionIndicator() {
+			return selectionIndicatorRef.current;
+		},
 		getActiveTabId() {
 			return activeTab || null;
 		}
 	}), [activeTab]);
+	const syncSelectionIndicator = (0, import_react.useCallback)(() => {
+		const indicator = selectionIndicatorRef.current;
+		const header = headerRef.current;
+		const activeTrigger = activeTab ? triggerRefs.current.get(activeTab) : null;
+		if (!indicator) return;
+		if (variant !== "default" || !header || !activeTrigger) {
+			indicator.style.opacity = "0";
+			indicator.style.width = "0px";
+			indicator.style.height = "0px";
+			indicator.style.transform = "translate(0px, 0px)";
+			return;
+		}
+		const headerRect = header.getBoundingClientRect();
+		const triggerRect = activeTrigger.getBoundingClientRect();
+		indicator.style.opacity = "1";
+		indicator.style.width = `${triggerRect.width}px`;
+		indicator.style.height = `${triggerRect.height}px`;
+		indicator.style.transform = `translate(${triggerRect.left - headerRect.left}px, ${triggerRect.top - headerRect.top}px)`;
+	}, [activeTab, variant]);
+	(0, import_react.useLayoutEffect)(() => {
+		syncSelectionIndicator();
+	}, [syncSelectionIndicator, tabLayoutSignature]);
+	(0, import_react.useLayoutEffect)(() => {
+		if (variant !== "default") return;
+		const tabsButton = tabsButtonRef.current;
+		if (!tabsButton) return;
+		const handleScroll = () => {
+			syncSelectionIndicator();
+		};
+		tabsButton.addEventListener("scroll", handleScroll, { passive: true });
+		if (typeof ResizeObserver === "undefined") return () => {
+			tabsButton.removeEventListener("scroll", handleScroll);
+		};
+		const observer = new ResizeObserver(() => {
+			syncSelectionIndicator();
+		});
+		observer.observe(tabsButton);
+		if (headerRef.current) observer.observe(headerRef.current);
+		const activeTrigger = activeTab ? triggerRefs.current.get(activeTab) : null;
+		if (activeTrigger) observer.observe(activeTrigger);
+		return () => {
+			tabsButton.removeEventListener("scroll", handleScroll);
+			observer.disconnect();
+		};
+	}, [
+		activeTab,
+		syncSelectionIndicator,
+		tabLayoutSignature,
+		variant
+	]);
 	const handleChange = (id) => {
 		if (!controlled) setUncontrolled(id);
 		onTabChange?.(id);
@@ -73835,77 +73891,115 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 		event.dataTransfer.dropEffect = "move";
 	}, [reorderable]);
 	if (tabs.length === 0) return null;
-	const headerClassName = variant === "terminal" ? "tabs-header bg-terminal text-terminal-foreground sticky top-0 z-20 flex min-w-0 items-stretch" : "tabs-header bg-card/95 sticky top-0 z-20 flex min-w-0 items-stretch rounded-md border border-zinc-500/15 shadow-[inset_0_-1px_0_color-mix(in_srgb,var(--border)_85%,transparent)] backdrop-blur-sm";
-	const stripClassName = variant === "terminal" ? "tabs-strip min-w-0 flex-1 bg-terminal px-4" : "tabs-strip bg-card/95 min-w-0 flex-1 rounded-l-md px-4";
+	const headerClassName = variant === "terminal" ? "tabs-header bg-terminal text-terminal-foreground sticky top-0 z-20 flex min-w-0 items-stretch" : "tabs-header relative sticky top-0 z-20 min-w-0";
+	const stripClassName = variant === "terminal" ? "tabs-strip min-w-0 flex-1 bg-terminal px-4" : "tabs-strip min-w-0 flex-1 rounded-l-md px-4";
 	const listClassName = variant === "terminal" ? "tabs-button scrollbar-none flex min-w-0 gap-1 overflow-x-auto pt-2" : "tabs-button scrollbar-none flex min-w-0 gap-1 overflow-x-auto";
-	const buttonBaseClassName = `group relative m-0 flex h-full shrink-0 items-center gap-2 px-2 text-sm font-medium transition-colors ${variant === "terminal" ? "rounded-t-[8px] py-1" : "py-2"}`;
-	const activeButtonClassName = variant === "terminal" ? "tab-selected bg-background text-foreground" : "tab-selected bg-background/70 text-foreground";
+	const buttonBaseClassName = `group relative z-10 m-0 flex h-full shrink-0 items-center gap-2 px-2 text-sm font-medium transition-colors ${variant === "terminal" ? "rounded-t-[8px] py-1" : "py-2"}`;
+	const activeButtonClassName = variant === "terminal" ? "tab-selected bg-background text-foreground" : "tab-selected text-foreground";
 	const inactiveButtonClassName = variant === "terminal" ? "bg-terminal text-terminal-foreground/80 hover:bg-terminal hover:text-terminal-foreground" : "text-muted-foreground hover:bg-background/35 hover:text-foreground";
-	const actionsClassName = variant === "terminal" ? "tabs-actions border-border bg-terminal text-terminal-foreground flex shrink-0 items-center border-b px-1" : "tabs-actions bg-card/95 border-zinc-500/15 flex shrink-0 items-center rounded-r-md border-l px-1";
+	const actionsClassName = variant === "terminal" ? "tabs-actions border-border bg-terminal text-terminal-foreground flex shrink-0 items-center border-b px-1" : "tabs-actions border-zinc-500/15 flex shrink-0 items-center rounded-r-md border-l px-1";
 	const handleTabBarDoubleClick = (event) => {
 		if (!onTabBarDoubleClick) return;
 		if (event.target.closest("[data-tab-item=\"true\"]")) return;
 		onTabBarDoubleClick();
 	};
+	const tabButtons = tabs.map((tab) => {
+		const dragIndicatorStyle = dropIndicator?.tabId === tab.id ? { boxShadow: dropIndicator.position === "before" ? "inset 2px 0 0 var(--border)" : "inset -2px 0 0 var(--border)" } : void 0;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+			ref: (element) => {
+				triggerRefs.current.set(tab.id, element);
+			},
+			"data-tab-item": "true",
+			"data-tab-id": tab.id,
+			draggable: reorderable,
+			onClick: () => handleChange(tab.id),
+			onDragStart: (event) => handleDragStart(event, tab.id),
+			onDragEnd: handleDragEnd,
+			onDragOver: (event) => handleItemDragOver(event, tab.id),
+			onDrop: (event) => handleItemDrop(event, tab.id),
+			className: `${buttonBaseClassName} ${activeTab === tab.id ? activeButtonClassName : inactiveButtonClassName} ${reorderable ? "cursor-grab active:cursor-grabbing" : ""}`,
+			style: dragIndicatorStyle,
+			children: [
+				tab.icon,
+				tab.label,
+				tab.closable && onTabClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					role: "button",
+					tabIndex: 0,
+					onClick: (event) => {
+						event.stopPropagation();
+						onTabClose(tab.id);
+					},
+					onKeyDown: (event) => {
+						if (event.key === "Enter" || event.key === " ") {
+							event.stopPropagation();
+							onTabClose(tab.id);
+						}
+					},
+					draggable: false,
+					className: `hover:text-foreground -mr-1 rounded p-0.5 transition ${tab.closeButtonVisibility === "always" ? "opacity-100" : "opacity-0 group-hover:opacity-100 [button:hover>&]:opacity-100"} ${activeTab === tab.id ? "text-current/80" : "text-muted-foreground"}`,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X$2, { className: "h-3 w-3" })
+				})
+			]
+		}, tab.id);
+	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		id,
 		ref: rootRef,
 		"data-tabs-variant": variant,
 		className: `relative isolate flex min-h-0 min-w-0 flex-1 flex-col ${className}`,
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			ref: headerRef,
 			className: headerClassName,
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			children: variant === "default" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					ref: headerShellRef,
+					"data-tabs-header-shell": "true",
+					className: "tabs-header-shell bg-card/95 pointer-events-none absolute inset-0 z-0 rounded-md border border-zinc-500/15 shadow-[inset_0_-1px_0_color-mix(in_srgb,var(--border)_85%,transparent)] backdrop-blur-sm"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "pointer-events-none absolute inset-0 z-10",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						ref: selectionIndicatorRef,
+						"data-tabs-selection-indicator": "true",
+						"aria-hidden": "true",
+						className: "tabs-selection-indicator border-primary bg-background/70 duration-280 absolute left-0 top-0 rounded-md border-b-2 opacity-0 shadow-[inset_0_-1px_0_color-mix(in_srgb,var(--border)_85%,transparent)] transition-[transform,width,height,opacity] ease-[cubic-bezier(0.22,1,0.36,1)]"
+					})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					ref: headerForegroundRef,
+					"data-tabs-header-foreground": "true",
+					className: "tabs-header-foreground relative z-20 flex min-w-0 items-stretch",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: stripClassName,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							ref: tabsButtonRef,
+							className: listClassName,
+							onDoubleClick: handleTabBarDoubleClick,
+							onDragOver: handleListDragOver,
+							onDrop: handleListDrop,
+							children: tabButtons
+						})
+					}), actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						"data-tabs-actions": "true",
+						className: actionsClassName,
+						children: actions
+					})]
+				})
+			] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 				className: stripClassName,
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					ref: tabsButtonRef,
 					className: listClassName,
 					onDoubleClick: handleTabBarDoubleClick,
 					onDragOver: handleListDragOver,
 					onDrop: handleListDrop,
-					children: tabs.map((tab) => {
-						const dragIndicatorStyle = dropIndicator?.tabId === tab.id ? { boxShadow: dropIndicator.position === "before" ? "inset 2px 0 0 var(--border)" : "inset -2px 0 0 var(--border)" } : void 0;
-						return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-							ref: (element) => {
-								triggerRefs.current.set(tab.id, element);
-							},
-							"data-tab-item": "true",
-							"data-tab-id": tab.id,
-							draggable: reorderable,
-							onClick: () => handleChange(tab.id),
-							onDragStart: (event) => handleDragStart(event, tab.id),
-							onDragEnd: handleDragEnd,
-							onDragOver: (event) => handleItemDragOver(event, tab.id),
-							onDrop: (event) => handleItemDrop(event, tab.id),
-							className: `${buttonBaseClassName} ${activeTab === tab.id ? activeButtonClassName : inactiveButtonClassName} ${reorderable ? "cursor-grab active:cursor-grabbing" : ""}`,
-							style: dragIndicatorStyle,
-							children: [
-								tab.icon,
-								tab.label,
-								tab.closable && onTabClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-									role: "button",
-									tabIndex: 0,
-									onClick: (event) => {
-										event.stopPropagation();
-										onTabClose(tab.id);
-									},
-									onKeyDown: (event) => {
-										if (event.key === "Enter" || event.key === " ") {
-											event.stopPropagation();
-											onTabClose(tab.id);
-										}
-									},
-									draggable: false,
-									className: `hover:text-foreground -mr-1 rounded p-0.5 transition ${tab.closeButtonVisibility === "always" ? "opacity-100" : "opacity-0 group-hover:opacity-100 [button:hover>&]:opacity-100"} ${activeTab === tab.id ? "text-current/80" : "text-muted-foreground"}`,
-									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X$2, { className: "h-3 w-3" })
-								})
-							]
-						}, tab.id);
-					})
+					children: tabButtons
 				})
 			}), actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 				"data-tabs-actions": "true",
 				className: actionsClassName,
 				children: actions
-			})]
+			})] })
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			className: "relative flex min-h-0 flex-1 overflow-hidden",
 			children: contentTabs.map((tab) => tab.unmountOnHide ? activeTab === tab.id && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
@@ -73935,6 +74029,10 @@ var Tabs = (0, import_react.forwardRef)(TabsImpl);
 var DATA_VISIBLE_HEIGHT = "tabVisibleHeight";
 var DATA_TOP_INSET = "tabTopInset";
 var DATA_SCROLL_OFFSET = "tabScrollOffset";
+var DATA_LAYOUT_BRIDGE = "tabLayoutBridge";
+var DATA_LAYOUT_BRIDGE_BASE_PADDING = "tabLayoutBridgeBasePadding";
+var DATA_LAYOUT_BRIDGE_INLINE_PADDING = "tabLayoutBridgeInlinePadding";
+var TAB_SCROLL_ROOT_SELECTOR = "[data-tab-scroll-root=\"true\"]";
 function clamp$2(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
@@ -73944,6 +74042,63 @@ function maxViewportScroll(viewport) {
 function maxPanelScroll(panel, visibleHeight) {
 	return Math.max(panel.scrollHeight - visibleHeight, 0);
 }
+function readPanelLayoutBridge(panel) {
+	return Number(panel.dataset[DATA_LAYOUT_BRIDGE] ?? "0") || 0;
+}
+function ensurePanelLayoutBridgeState(panel) {
+	panel.dataset[DATA_LAYOUT_BRIDGE_BASE_PADDING] ||= window.getComputedStyle(panel).paddingBottom;
+	panel.dataset[DATA_LAYOUT_BRIDGE_INLINE_PADDING] ||= panel.style.paddingBottom;
+}
+function setPanelLayoutBridge(panel, extraHeight) {
+	ensurePanelLayoutBridgeState(panel);
+	const normalizedHeight = Math.max(Math.ceil(extraHeight), 0);
+	panel.dataset[DATA_LAYOUT_BRIDGE] = String(normalizedHeight);
+	if (normalizedHeight <= 0) {
+		panel.style.paddingBottom = panel.dataset[DATA_LAYOUT_BRIDGE_INLINE_PADDING] ?? "";
+		return;
+	}
+	const basePadding = panel.dataset[DATA_LAYOUT_BRIDGE_BASE_PADDING] ?? "0px";
+	panel.style.paddingBottom = `calc(${basePadding} + ${normalizedHeight}px)`;
+}
+function restoreViewportScroll(viewport, panel, targetScrollTop) {
+	const applyScrollTop = () => {
+		if (!viewport.isConnected || !panel.isConnected) return true;
+		const existingBridge = readPanelLayoutBridge(panel);
+		const baseMaxViewportScroll = Math.max(maxViewportScroll(viewport) - existingBridge, 0);
+		setPanelLayoutBridge(panel, Math.max(targetScrollTop - baseMaxViewportScroll, 0));
+		const nextScrollTop = clamp$2(targetScrollTop, 0, maxViewportScroll(viewport));
+		viewport.scrollTop = nextScrollTop;
+		return viewport.scrollTop === nextScrollTop;
+	};
+	if (applyScrollTop() || typeof requestAnimationFrame !== "function") return;
+	let retriesRemaining = 10;
+	const retry = () => {
+		if (applyScrollTop() || retriesRemaining <= 0) return;
+		retriesRemaining -= 1;
+		requestAnimationFrame(retry);
+	};
+	requestAnimationFrame(retry);
+}
+function hasVerticalScrollBehavior(overflowY) {
+	return overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
+}
+function findScrollableDescendant(panel) {
+	const walker = document.createTreeWalker(panel, NodeFilter.SHOW_ELEMENT);
+	let candidate = null;
+	while (walker.nextNode()) {
+		const node = walker.currentNode;
+		if (!(node instanceof HTMLElement)) continue;
+		if (!hasVerticalScrollBehavior(window.getComputedStyle(node).overflowY) || node.scrollHeight <= node.clientHeight) continue;
+		if (node.scrollTop > 0) return node;
+		candidate ??= node;
+	}
+	return candidate;
+}
+function resolveContentScrollRoot(panel) {
+	const markedRoot = panel.matches(TAB_SCROLL_ROOT_SELECTOR) ? panel : panel.querySelector(TAB_SCROLL_ROOT_SELECTOR);
+	if (markedRoot) return markedRoot;
+	return findScrollableDescendant(panel);
+}
 function panelDocumentTop(panel, viewport) {
 	const panelRect = panel.getBoundingClientRect();
 	const viewportRect = viewport.getBoundingClientRect();
@@ -73981,40 +74136,99 @@ function restorePanel(panel, previousStyles) {
 	panel.style.overflowY = previousStyles.overflowY;
 	clearFrozenMetrics(panel);
 }
+function restoreContentScrollRoot(element, targetScrollTop) {
+	if (!element) return;
+	const applyScrollTop = () => {
+		if (!element.isConnected) return true;
+		element.scrollTop = targetScrollTop;
+		return element.scrollTop === targetScrollTop;
+	};
+	if (applyScrollTop() || typeof requestAnimationFrame !== "function") return;
+	let retriesRemaining = 10;
+	const retry = () => {
+		if (applyScrollTop() || retriesRemaining <= 0) return;
+		retriesRemaining -= 1;
+		requestAnimationFrame(retry);
+	};
+	requestAnimationFrame(retry);
+}
+function normalizeViewportSelectors(viewportSelector) {
+	return typeof viewportSelector === "string" ? viewportSelector.split(",").map((selector) => selector.trim()) : [...viewportSelector];
+}
+function resolveViewportBoundary(panel, viewportSelector) {
+	const selectors = normalizeViewportSelectors(viewportSelector);
+	for (const selector of selectors) {
+		if (!selector) continue;
+		try {
+			const match = panel.closest(selector);
+			if (match instanceof HTMLElement) return match;
+		} catch {
+			return null;
+		}
+	}
+	return null;
+}
+function resolveScrollViewport(panel, boundary) {
+	let current = panel.parentElement;
+	while (current) {
+		if (hasVerticalScrollBehavior(window.getComputedStyle(current).overflowY) && current.scrollHeight > current.clientHeight) return current;
+		if (boundary && current === boundary) break;
+		current = current.parentElement;
+	}
+	if (!boundary) return null;
+	if (hasVerticalScrollBehavior(window.getComputedStyle(boundary).overflowY)) return boundary;
+	return null;
+}
 function resolveTabScrollElements(handle, tabId, viewportSelector) {
 	if (!viewportSelector) return null;
 	const panel = handle?.getPanel(tabId);
 	if (!(panel instanceof HTMLElement)) return null;
-	let viewport = null;
-	try {
-		viewport = panel.closest(viewportSelector);
-	} catch {
-		return null;
-	}
+	const viewport = resolveScrollViewport(panel, resolveViewportBoundary(panel, viewportSelector));
 	if (!(viewport instanceof HTMLElement)) return null;
 	return {
 		panel,
+		contentScrollRoot: resolveContentScrollRoot(panel),
 		viewport
 	};
 }
+function restorePanelContentScroll(panel, snapshot) {
+	if (!(panel instanceof HTMLElement) || !snapshot) return;
+	const contentScrollRoot = resolveContentScrollRoot(panel);
+	if (contentScrollRoot && contentScrollRoot !== panel) restoreContentScrollRoot(contentScrollRoot, snapshot.contentScrollTop);
+}
+function restorePanelViewportScroll(panel, viewport, snapshot) {
+	if (!(panel instanceof HTMLElement) || !(viewport instanceof HTMLElement)) return;
+	if (!snapshot) {
+		setPanelLayoutBridge(panel, 0);
+		return;
+	}
+	restoreViewportScroll(viewport, panel, snapshot.viewportScrollTop);
+}
 function captureTabScrollMemory(elements) {
-	const { panel, viewport } = elements;
+	const { panel, contentScrollRoot, viewport } = elements;
 	const panelRect = panel.getBoundingClientRect();
 	const viewportRect = viewport.getBoundingClientRect();
 	const visibleHeight = clamp$2(Math.min(panelRect.bottom, viewportRect.bottom) - Math.max(panelRect.top, viewportRect.top), 0, viewport.clientHeight);
 	if (visibleHeight <= 0) return null;
 	const topInset = Math.max(panelRect.top - viewportRect.top, 0);
+	const innerScrollTop = clamp$2(Math.max(viewportRect.top - panelRect.top, 0), 0, maxPanelScroll(panel, visibleHeight));
 	return {
-		innerScrollTop: clamp$2(Math.max(viewportRect.top - panelRect.top, 0), 0, maxPanelScroll(panel, visibleHeight)),
+		contentScrollTop: contentScrollRoot && contentScrollRoot !== panel ? contentScrollRoot.scrollTop : 0,
+		innerScrollTop,
 		topInset,
-		visibleHeight
+		visibleHeight,
+		viewportScrollTop: viewport.scrollTop
 	};
 }
 function freezeOutgoingTab(elements, snapshot) {
 	const previousStyles = applyFrozenStyles(elements.panel, snapshot);
+	if (elements.contentScrollRoot && elements.contentScrollRoot !== elements.panel) restoreContentScrollRoot(elements.contentScrollRoot, snapshot.contentScrollTop);
 	elements.panel.scrollTop = snapshot.innerScrollTop;
 	if (snapshot.innerScrollTop > 0) elements.viewport.scrollTop = clamp$2(elements.viewport.scrollTop - snapshot.innerScrollTop, 0, maxViewportScroll(elements.viewport));
 	return {
+		contentScrollRoot: elements.contentScrollRoot && elements.contentScrollRoot !== elements.panel ? elements.contentScrollRoot : null,
+		contentScrollTop: snapshot.contentScrollTop,
+		finalViewportScrollTop: snapshot.viewportScrollTop,
 		panel: elements.panel,
 		previousStyles,
 		viewport: elements.viewport
@@ -74022,26 +74236,32 @@ function freezeOutgoingTab(elements, snapshot) {
 }
 function freezeIncomingTab(elements, snapshot) {
 	const normalizedSnapshot = {
+		contentScrollTop: elements.contentScrollRoot && elements.contentScrollRoot !== elements.panel ? snapshot.contentScrollTop : 0,
 		topInset: clamp$2(snapshot.topInset, 0, elements.viewport.clientHeight),
 		visibleHeight: clamp$2(snapshot.visibleHeight, 1, elements.viewport.clientHeight),
-		innerScrollTop: 0
+		innerScrollTop: 0,
+		viewportScrollTop: snapshot.viewportScrollTop
 	};
 	normalizedSnapshot.innerScrollTop = clamp$2(snapshot.innerScrollTop, 0, maxPanelScroll(elements.panel, normalizedSnapshot.visibleHeight));
 	const nextViewportScrollTop = clamp$2(panelDocumentTop(elements.panel, elements.viewport) - normalizedSnapshot.topInset, 0, maxViewportScroll(elements.viewport));
 	const previousStyles = applyFrozenStyles(elements.panel, normalizedSnapshot);
 	elements.viewport.scrollTop = nextViewportScrollTop;
+	if (elements.contentScrollRoot && elements.contentScrollRoot !== elements.panel) restoreContentScrollRoot(elements.contentScrollRoot, normalizedSnapshot.contentScrollTop);
 	elements.panel.scrollTop = normalizedSnapshot.innerScrollTop;
 	return {
+		contentScrollRoot: elements.contentScrollRoot && elements.contentScrollRoot !== elements.panel ? elements.contentScrollRoot : null,
+		contentScrollTop: normalizedSnapshot.contentScrollTop,
+		finalViewportScrollTop: snapshot.viewportScrollTop,
 		panel: elements.panel,
 		previousStyles,
 		viewport: elements.viewport
 	};
 }
 function finalizeFrozenIncomingTab(state) {
-	const transferScrollTop = state.panel.scrollTop;
 	restorePanel(state.panel, state.previousStyles);
-	state.viewport.scrollTop = clamp$2(state.viewport.scrollTop + transferScrollTop, 0, maxViewportScroll(state.viewport));
+	restoreViewportScroll(state.viewport, state.panel, state.finalViewportScrollTop);
 	state.panel.scrollTop = 0;
+	if (state.contentScrollRoot) restoreContentScrollRoot(state.contentScrollRoot, state.contentScrollTop);
 }
 function cleanupFrozenTab(state) {
 	restorePanel(state.panel, state.previousStyles);
@@ -74072,6 +74292,11 @@ function resolveTabArea(pathname, area) {
 	if (area) return area;
 	return isStaticMode() ? "main" : navController.getAreaForPath(pathname);
 }
+function normalizeViewportSelectorOption(viewportSelector) {
+	if (!viewportSelector) return;
+	const normalized = (typeof viewportSelector === "string" ? viewportSelector.split(",") : [...viewportSelector]).map((selector) => selector.trim()).filter((selector) => selector.length > 0);
+	return normalized.length > 0 ? normalized : void 0;
+}
 function readWindowLocation() {
 	if (typeof window === "undefined") return SERVER_LOCATION;
 	return {
@@ -74126,6 +74351,12 @@ function useRoutedTabsLocation() {
 function collectTabEntries(handle, tabId) {
 	if (!handle) return [];
 	const entries = [];
+	const headerShell = handle.getHeaderShell();
+	if (headerShell) entries.push([headerShell, "vt-tab-header-shell"]);
+	const selectionIndicator = handle.getSelectionIndicator();
+	if (selectionIndicator) entries.push([selectionIndicator, "vt-tab-edge"]);
+	const headerForeground = handle.getHeaderForeground();
+	if (headerForeground) entries.push([headerForeground, "vt-tab-header-foreground"]);
 	const panel = handle.getPanel(tabId);
 	if (panel) entries.push([panel, "vt-tab-panel"]);
 	return entries;
@@ -74133,8 +74364,11 @@ function collectTabEntries(handle, tabId) {
 function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "replace", allowUnknownSelection = false, viewportSelector }) {
 	const { location, router } = useRoutedTabsLocation();
 	const tabsRef = (0, import_react.useRef)(null);
+	const viewportSelectorValue = (0, import_react.useMemo)(() => normalizeViewportSelectorOption(viewportSelector), [typeof viewportSelector === "string" ? viewportSelector : (viewportSelector ?? []).join("\0")]);
 	const scrollMemoryByTabRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
 	const frozenTabsRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+	const frozenTabTokenRef = (0, import_react.useRef)(0);
+	const skipNextRestoreTabRef = (0, import_react.useRef)(null);
 	const selectedFromLocation = (0, import_react.useMemo)(() => resolveSelectedTab({
 		tabs,
 		queryKey,
@@ -74159,7 +74393,7 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 		selectedFromLocation,
 		selectedTab,
 		tabs,
-		viewportSelector
+		viewportSelector: viewportSelectorValue
 	});
 	latestRef.current = {
 		allowUnknownSelection,
@@ -74171,45 +74405,89 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 		selectedFromLocation,
 		selectedTab,
 		tabs,
-		viewportSelector
+		viewportSelector: viewportSelectorValue
 	};
-	const cleanupFrozenTabById = (0, import_react.useCallback)((tabId) => {
-		const frozenState = frozenTabsRef.current.get(tabId);
-		if (!frozenState) return;
-		cleanupFrozenTab(frozenState);
+	const cleanupFrozenTabById = (0, import_react.useCallback)((tabId, token) => {
+		const frozenEntry = frozenTabsRef.current.get(tabId);
+		if (!frozenEntry || token != null && frozenEntry.token !== token) return;
+		cleanupFrozenTab(frozenEntry.state);
 		frozenTabsRef.current.delete(tabId);
 	}, []);
 	const cleanupAllFrozenTabs = (0, import_react.useCallback)(() => {
-		for (const frozenState of frozenTabsRef.current.values()) cleanupFrozenTab(frozenState);
+		for (const frozenEntry of frozenTabsRef.current.values()) cleanupFrozenTab(frozenEntry.state);
 		frozenTabsRef.current.clear();
 	}, []);
-	const captureOutgoingTab = (0, import_react.useCallback)((tabId, nextViewportSelector) => {
+	const captureTabSnapshot = (0, import_react.useCallback)((tabId, nextViewportSelector) => {
+		const elements = resolveTabScrollElements(tabsRef.current, tabId, nextViewportSelector);
+		if (!elements) return null;
+		return captureTabScrollMemory(elements);
+	}, []);
+	const captureOutgoingTab = (0, import_react.useCallback)((tabId, nextViewportSelector, snapshotOverride) => {
 		const elements = resolveTabScrollElements(tabsRef.current, tabId, nextViewportSelector);
 		if (!elements) return;
-		const snapshot = captureTabScrollMemory(elements);
+		const snapshot = snapshotOverride ?? captureTabScrollMemory(elements);
 		if (!snapshot) return;
 		scrollMemoryByTabRef.current.set(tabId, snapshot);
 		cleanupFrozenTabById(tabId);
-		frozenTabsRef.current.set(tabId, freezeOutgoingTab(elements, snapshot));
+		const token = ++frozenTabTokenRef.current;
+		frozenTabsRef.current.set(tabId, {
+			token,
+			state: freezeOutgoingTab(elements, snapshot)
+		});
+		return token;
 	}, [cleanupFrozenTabById]);
-	const prepareIncomingTab = (0, import_react.useCallback)((tabId, nextViewportSelector) => {
+	const prepareIncomingTab = (0, import_react.useCallback)((tabId, nextViewportSelector, fallbackSnapshot) => {
 		const elements = resolveTabScrollElements(tabsRef.current, tabId, nextViewportSelector);
-		if (!elements) return false;
-		const snapshot = scrollMemoryByTabRef.current.get(tabId) ?? captureTabScrollMemory(elements);
-		if (!snapshot) return false;
+		if (!elements) return null;
+		const snapshot = scrollMemoryByTabRef.current.get(tabId) ?? fallbackSnapshot ?? captureTabScrollMemory(elements);
+		if (!snapshot) return null;
+		if (!scrollMemoryByTabRef.current.has(tabId)) scrollMemoryByTabRef.current.set(tabId, snapshot);
 		cleanupFrozenTabById(tabId);
-		frozenTabsRef.current.set(tabId, freezeIncomingTab(elements, snapshot));
-		return true;
+		const token = ++frozenTabTokenRef.current;
+		frozenTabsRef.current.set(tabId, {
+			token,
+			state: freezeIncomingTab(elements, snapshot)
+		});
+		return token;
 	}, [cleanupFrozenTabById]);
-	const finalizeIncomingTab = (0, import_react.useCallback)((tabId) => {
-		const frozenState = frozenTabsRef.current.get(tabId);
-		if (!frozenState) return;
-		finalizeFrozenIncomingTab(frozenState);
+	const finalizeIncomingTab = (0, import_react.useCallback)((tabId, token) => {
+		const frozenEntry = frozenTabsRef.current.get(tabId);
+		if (!frozenEntry || token != null && frozenEntry.token !== token) return;
+		finalizeFrozenIncomingTab(frozenEntry.state);
 		frozenTabsRef.current.delete(tabId);
 	}, []);
 	(0, import_react.useEffect)(() => {
 		setSelectedTabState((current) => current === selectedFromLocation ? current : selectedFromLocation);
 	}, [selectedFromLocation]);
+	(0, import_react.useLayoutEffect)(() => {
+		if (skipNextRestoreTabRef.current === selectedTab) {
+			skipNextRestoreTabRef.current = null;
+			return;
+		}
+		const snapshot = scrollMemoryByTabRef.current.get(selectedTab);
+		const elements = resolveTabScrollElements(tabsRef.current, selectedTab, viewportSelectorValue);
+		const panel = elements?.panel ?? tabsRef.current?.getPanel(selectedTab) ?? null;
+		restorePanelContentScroll(panel, snapshot);
+		restorePanelViewportScroll(panel, elements?.viewport ?? null, snapshot);
+	}, [selectedTab, viewportSelectorValue]);
+	(0, import_react.useEffect)(() => {
+		const elements = resolveTabScrollElements(tabsRef.current, selectedTab, viewportSelectorValue);
+		const contentScrollRoot = elements?.contentScrollRoot;
+		if (!elements || !contentScrollRoot || contentScrollRoot === elements.panel) return;
+		const rememberContentScroll = () => {
+			const existingSnapshot = scrollMemoryByTabRef.current.get(selectedTab);
+			if (!existingSnapshot) return;
+			scrollMemoryByTabRef.current.set(selectedTab, {
+				...existingSnapshot,
+				contentScrollTop: contentScrollRoot.scrollTop
+			});
+		};
+		rememberContentScroll();
+		contentScrollRoot.addEventListener("scroll", rememberContentScroll, { passive: true });
+		return () => {
+			contentScrollRoot.removeEventListener("scroll", rememberContentScroll);
+		};
+	}, [selectedTab, viewportSelectorValue]);
 	(0, import_react.useEffect)(() => {
 		const validIds = new Set(tabs.map((tab) => tab.id));
 		for (const tabId of scrollMemoryByTabRef.current.keys()) if (!validIds.has(tabId)) scrollMemoryByTabRef.current.delete(tabId);
@@ -74226,6 +74504,7 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 		const { allowUnknownSelection: allowUnknown, area: latestArea, history: defaultHistory, location: latestLocation, queryKey: latestQueryKey, router: latestRouter, selectedFromLocation: latestSelectedFromLocation, selectedTab: currentTab, tabs: latestTabs, viewportSelector: latestViewportSelector } = latestRef.current;
 		if (!new Set(latestTabs.map((tab) => tab.id)).has(nextTabId) && !allowUnknown) return;
 		const nextHistory = options?.history ?? defaultHistory;
+		const transferScroll = options?.transferScroll ?? true;
 		if (currentTab === nextTabId && latestSelectedFromLocation === nextTabId) return;
 		const commitSelection = () => {
 			setSelectedTabState(nextTabId);
@@ -74249,18 +74528,40 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 			}
 			navController.push(nextArea, href, latestLocation.state);
 		};
+		if (!transferScroll) {
+			const outgoingSnapshot = captureTabSnapshot(currentTab, latestViewportSelector);
+			if (outgoingSnapshot) scrollMemoryByTabRef.current.set(currentTab, outgoingSnapshot);
+			skipNextRestoreTabRef.current = nextTabId;
+			if (!options?.animate || currentTab === nextTabId) {
+				commitSelection();
+				return;
+			}
+			runViewTransition({
+				intent: {
+					area: resolveTabArea(latestLocation.pathname, latestArea),
+					kind: "tab-carousel",
+					direction: "forward"
+				},
+				collectBeforeEntries: () => collectTabEntries(tabsRef.current, currentTab),
+				collectAfterEntries: () => collectTabEntries(tabsRef.current, nextTabId),
+				update: commitSelection
+			});
+			return;
+		}
 		const runSelectionWithScrollTransfer = (animated) => {
-			captureOutgoingTab(currentTab, latestViewportSelector);
+			const outgoingSnapshot = captureTabSnapshot(currentTab, latestViewportSelector);
+			const incomingSeedSnapshot = scrollMemoryByTabRef.current.get(nextTabId) ?? outgoingSnapshot ?? captureTabSnapshot(nextTabId, latestViewportSelector);
+			const outgoingToken = captureOutgoingTab(currentTab, latestViewportSelector, outgoingSnapshot);
 			if (!animated) {
 				(0, import_react_dom.flushSync)(() => {
 					commitSelection();
 				});
-				prepareIncomingTab(nextTabId, latestViewportSelector);
-				finalizeIncomingTab(nextTabId);
-				cleanupFrozenTabById(currentTab);
+				const incomingToken = prepareIncomingTab(nextTabId, latestViewportSelector, incomingSeedSnapshot);
+				if (incomingToken != null) finalizeIncomingTab(nextTabId, incomingToken);
+				if (outgoingToken != null) cleanupFrozenTabById(currentTab, outgoingToken);
 				return;
 			}
-			let hasPreparedIncoming = false;
+			let incomingToken = null;
 			runViewTransition({
 				intent: {
 					area: resolveTabArea(latestLocation.pathname, latestArea),
@@ -74269,14 +74570,14 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 				},
 				collectBeforeEntries: () => collectTabEntries(tabsRef.current, currentTab),
 				collectAfterEntries: () => {
-					if (!hasPreparedIncoming) hasPreparedIncoming = prepareIncomingTab(nextTabId, latestViewportSelector);
+					if (incomingToken == null) incomingToken = prepareIncomingTab(nextTabId, latestViewportSelector, incomingSeedSnapshot);
 					return collectTabEntries(tabsRef.current, nextTabId);
 				},
 				update: commitSelection
 			}).finally(() => {
-				if (!hasPreparedIncoming) prepareIncomingTab(nextTabId, latestViewportSelector);
-				finalizeIncomingTab(nextTabId);
-				cleanupFrozenTabById(currentTab);
+				if (incomingToken == null) incomingToken = prepareIncomingTab(nextTabId, latestViewportSelector, incomingSeedSnapshot);
+				if (incomingToken != null) finalizeIncomingTab(nextTabId, incomingToken);
+				if (outgoingToken != null) cleanupFrozenTabById(currentTab, outgoingToken);
 			});
 		};
 		if (!options?.animate || currentTab === nextTabId) {
@@ -74293,6 +74594,7 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 		runSelectionWithScrollTransfer(true);
 	}, [
 		captureOutgoingTab,
+		captureTabSnapshot,
 		cleanupFrozenTabById,
 		finalizeIncomingTab,
 		prepareIncomingTab