@openspecui/web 2.3.2 → 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", {
@@ -73931,6 +74025,249 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 }
 var Tabs = (0, import_react.forwardRef)(TabsImpl);
 //#endregion
+//#region src/lib/view-transitions/tab-scroll-freeze.ts
+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);
+}
+function maxViewportScroll(viewport) {
+	return Math.max(viewport.scrollHeight - viewport.clientHeight, 0);
+}
+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();
+	return viewport.scrollTop + panelRect.top - viewportRect.top;
+}
+function setFrozenMetrics(panel, snapshot) {
+	panel.dataset[DATA_VISIBLE_HEIGHT] = String(snapshot.visibleHeight);
+	panel.dataset[DATA_TOP_INSET] = String(snapshot.topInset);
+	panel.dataset[DATA_SCROLL_OFFSET] = String(snapshot.innerScrollTop);
+}
+function clearFrozenMetrics(panel) {
+	delete panel.dataset[DATA_VISIBLE_HEIGHT];
+	delete panel.dataset[DATA_TOP_INSET];
+	delete panel.dataset[DATA_SCROLL_OFFSET];
+}
+function applyFrozenStyles(panel, snapshot) {
+	const previousStyles = {
+		height: panel.style.height,
+		maxHeight: panel.style.maxHeight,
+		minHeight: panel.style.minHeight,
+		overflowY: panel.style.overflowY
+	};
+	const height = `${snapshot.visibleHeight}px`;
+	panel.style.height = height;
+	panel.style.minHeight = height;
+	panel.style.maxHeight = height;
+	panel.style.overflowY = "hidden";
+	setFrozenMetrics(panel, snapshot);
+	return previousStyles;
+}
+function restorePanel(panel, previousStyles) {
+	panel.style.height = previousStyles.height;
+	panel.style.maxHeight = previousStyles.maxHeight;
+	panel.style.minHeight = previousStyles.minHeight;
+	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;
+	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, 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 {
+		contentScrollTop: contentScrollRoot && contentScrollRoot !== panel ? contentScrollRoot.scrollTop : 0,
+		innerScrollTop,
+		topInset,
+		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
+	};
+}
+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,
+		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) {
+	restorePanel(state.panel, state.previousStyles);
+	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);
+	state.panel.scrollTop = 0;
+}
+//#endregion
 //#region src/lib/view-transitions/tabs.ts
 var SERVER_LOCATION = {
 	pathname: "/",
@@ -73955,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 {
@@ -74009,13 +74351,24 @@ 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;
 }
-function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "replace", allowUnknownSelection = false }) {
+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,
@@ -74039,7 +74392,8 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 		router,
 		selectedFromLocation,
 		selectedTab,
-		tabs
+		tabs,
+		viewportSelector: viewportSelectorValue
 	});
 	latestRef.current = {
 		allowUnknownSelection,
@@ -74050,15 +74404,107 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 		router,
 		selectedFromLocation,
 		selectedTab,
-		tabs
+		tabs,
+		viewportSelector: viewportSelectorValue
 	};
+	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 frozenEntry of frozenTabsRef.current.values()) cleanupFrozenTab(frozenEntry.state);
+		frozenTabsRef.current.clear();
+	}, []);
+	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 = snapshotOverride ?? captureTabScrollMemory(elements);
+		if (!snapshot) return;
+		scrollMemoryByTabRef.current.set(tabId, snapshot);
+		cleanupFrozenTabById(tabId);
+		const token = ++frozenTabTokenRef.current;
+		frozenTabsRef.current.set(tabId, {
+			token,
+			state: freezeOutgoingTab(elements, snapshot)
+		});
+		return token;
+	}, [cleanupFrozenTabById]);
+	const prepareIncomingTab = (0, import_react.useCallback)((tabId, nextViewportSelector, fallbackSnapshot) => {
+		const elements = resolveTabScrollElements(tabsRef.current, tabId, nextViewportSelector);
+		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);
+		const token = ++frozenTabTokenRef.current;
+		frozenTabsRef.current.set(tabId, {
+			token,
+			state: freezeIncomingTab(elements, snapshot)
+		});
+		return token;
+	}, [cleanupFrozenTabById]);
+	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);
+		for (const tabId of Array.from(frozenTabsRef.current.keys())) if (!validIds.has(tabId)) cleanupFrozenTabById(tabId);
+	}, [cleanupFrozenTabById, tabs]);
+	(0, import_react.useEffect)(() => {
+		scrollMemoryByTabRef.current.clear();
+		cleanupAllFrozenTabs();
+	}, [cleanupAllFrozenTabs, location.pathname]);
+	(0, import_react.useEffect)(() => () => {
+		cleanupAllFrozenTabs();
+	}, [cleanupAllFrozenTabs]);
 	const setSelectedTab = (0, import_react.useCallback)((nextTabId, options) => {
-		const { allowUnknownSelection: allowUnknown, area: latestArea, history: defaultHistory, location: latestLocation, queryKey: latestQueryKey, router: latestRouter, selectedFromLocation: latestSelectedFromLocation, selectedTab: currentTab, tabs: latestTabs } = latestRef.current;
+		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);
@@ -74082,28 +74528,77 @@ 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) => {
+			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();
+				});
+				const incomingToken = prepareIncomingTab(nextTabId, latestViewportSelector, incomingSeedSnapshot);
+				if (incomingToken != null) finalizeIncomingTab(nextTabId, incomingToken);
+				if (outgoingToken != null) cleanupFrozenTabById(currentTab, outgoingToken);
+				return;
+			}
+			let incomingToken = null;
+			runViewTransition({
+				intent: {
+					area: resolveTabArea(latestLocation.pathname, latestArea),
+					kind: "tab-carousel",
+					direction
+				},
+				collectBeforeEntries: () => collectTabEntries(tabsRef.current, currentTab),
+				collectAfterEntries: () => {
+					if (incomingToken == null) incomingToken = prepareIncomingTab(nextTabId, latestViewportSelector, incomingSeedSnapshot);
+					return collectTabEntries(tabsRef.current, nextTabId);
+				},
+				update: commitSelection
+			}).finally(() => {
+				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) {
-			commitSelection();
+			runSelectionWithScrollTransfer(false);
 			return;
 		}
 		const currentIndex = latestTabs.findIndex((tab) => tab.id === currentTab);
 		const nextIndex = latestTabs.findIndex((tab) => tab.id === nextTabId);
 		if (currentIndex < 0 || nextIndex < 0) {
-			commitSelection();
+			runSelectionWithScrollTransfer(false);
 			return;
 		}
 		const direction = nextIndex >= currentIndex ? "forward" : "backward";
-		runViewTransition({
-			intent: {
-				area: resolveTabArea(latestLocation.pathname, latestArea),
-				kind: "tab-carousel",
-				direction
-			},
-			collectBeforeEntries: () => collectTabEntries(tabsRef.current, currentTab),
-			collectAfterEntries: () => collectTabEntries(tabsRef.current, nextTabId),
-			update: commitSelection
-		});
-	}, []);
+		runSelectionWithScrollTransfer(true);
+	}, [
+		captureOutgoingTab,
+		captureTabSnapshot,
+		cleanupFrozenTabById,
+		finalizeIncomingTab,
+		prepareIncomingTab
+	]);
 	return {
 		tabsRef,
 		selectedTab,