@openspecui/web 2.3.2 → 2.3.4

package/dist-ssg/client/assets/{init-BRd1iFqg.js → init-C5vrHUuy.js}

@@ -1 +1 @@
-import{it as e}from"./Geometry-CNDxiJq_.js";import{a as t,i as n}from"./index.ssg-DkyqyrXf.js";e.add(n),e.add(t);
+import{it as e}from"./Geometry-CNDxiJq_.js";import{a as t,i as n}from"./index.ssg-BU1Brmat.js";e.add(n),e.add(t);

package/dist-ssg/client/assets/trpc-3tg7hkky.js

@@ -0,0 +1 @@
+import{F as e}from"./index.ssg-BU1Brmat.js";export{e as trpcClient};

package/dist-ssg/client/assets/webworkerAll-eiudlEPb.js

@@ -0,0 +1 @@
+import"./Geometry-CNDxiJq_.js";import"./index.ssg-BU1Brmat.js";import"./init-C5vrHUuy.js";

package/dist-ssg/client/index.ssg.html

@@ -35,7 +35,7 @@
         document.head.append(preconnectApi, preconnectStatic, stylesheet)
       })()
     </script>
-    <script type="module" crossorigin src="/assets/index.ssg-DkyqyrXf.js"></script>
+    <script type="module" crossorigin src="/assets/index.ssg-BU1Brmat.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/chunk-DECur_0Z.js">
     <link rel="modulepreload" crossorigin href="/assets/dist-QUHuPJsA.js">
     <link rel="modulepreload" crossorigin href="/assets/dist-BGaHY1kO.js">

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

@@ -73931,6 +73931,123 @@ 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";
+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 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 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;
+	}
+	if (!(viewport instanceof HTMLElement)) return null;
+	return {
+		panel,
+		viewport
+	};
+}
+function captureTabScrollMemory(elements) {
+	const { panel, 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);
+	return {
+		innerScrollTop: clamp$2(Math.max(viewportRect.top - panelRect.top, 0), 0, maxPanelScroll(panel, visibleHeight)),
+		topInset,
+		visibleHeight
+	};
+}
+function freezeOutgoingTab(elements, snapshot) {
+	const previousStyles = applyFrozenStyles(elements.panel, snapshot);
+	elements.panel.scrollTop = snapshot.innerScrollTop;
+	if (snapshot.innerScrollTop > 0) elements.viewport.scrollTop = clamp$2(elements.viewport.scrollTop - snapshot.innerScrollTop, 0, maxViewportScroll(elements.viewport));
+	return {
+		panel: elements.panel,
+		previousStyles,
+		viewport: elements.viewport
+	};
+}
+function freezeIncomingTab(elements, snapshot) {
+	const normalizedSnapshot = {
+		topInset: clamp$2(snapshot.topInset, 0, elements.viewport.clientHeight),
+		visibleHeight: clamp$2(snapshot.visibleHeight, 1, elements.viewport.clientHeight),
+		innerScrollTop: 0
+	};
+	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;
+	elements.panel.scrollTop = normalizedSnapshot.innerScrollTop;
+	return {
+		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));
+	state.panel.scrollTop = 0;
+}
+function cleanupFrozenTab(state) {
+	restorePanel(state.panel, state.previousStyles);
+	state.panel.scrollTop = 0;
+}
+//#endregion
 //#region src/lib/view-transitions/tabs.ts
 var SERVER_LOCATION = {
 	pathname: "/",
@@ -74013,9 +74130,11 @@ function collectTabEntries(handle, 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 scrollMemoryByTabRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+	const frozenTabsRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
 	const selectedFromLocation = (0, import_react.useMemo)(() => resolveSelectedTab({
 		tabs,
 		queryKey,
@@ -74039,7 +74158,8 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 		router,
 		selectedFromLocation,
 		selectedTab,
-		tabs
+		tabs,
+		viewportSelector
 	});
 	latestRef.current = {
 		allowUnknownSelection,
@@ -74050,13 +74170,60 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 		router,
 		selectedFromLocation,
 		selectedTab,
-		tabs
+		tabs,
+		viewportSelector
 	};
+	const cleanupFrozenTabById = (0, import_react.useCallback)((tabId) => {
+		const frozenState = frozenTabsRef.current.get(tabId);
+		if (!frozenState) return;
+		cleanupFrozenTab(frozenState);
+		frozenTabsRef.current.delete(tabId);
+	}, []);
+	const cleanupAllFrozenTabs = (0, import_react.useCallback)(() => {
+		for (const frozenState of frozenTabsRef.current.values()) cleanupFrozenTab(frozenState);
+		frozenTabsRef.current.clear();
+	}, []);
+	const captureOutgoingTab = (0, import_react.useCallback)((tabId, nextViewportSelector) => {
+		const elements = resolveTabScrollElements(tabsRef.current, tabId, nextViewportSelector);
+		if (!elements) return;
+		const snapshot = captureTabScrollMemory(elements);
+		if (!snapshot) return;
+		scrollMemoryByTabRef.current.set(tabId, snapshot);
+		cleanupFrozenTabById(tabId);
+		frozenTabsRef.current.set(tabId, freezeOutgoingTab(elements, snapshot));
+	}, [cleanupFrozenTabById]);
+	const prepareIncomingTab = (0, import_react.useCallback)((tabId, nextViewportSelector) => {
+		const elements = resolveTabScrollElements(tabsRef.current, tabId, nextViewportSelector);
+		if (!elements) return false;
+		const snapshot = scrollMemoryByTabRef.current.get(tabId) ?? captureTabScrollMemory(elements);
+		if (!snapshot) return false;
+		cleanupFrozenTabById(tabId);
+		frozenTabsRef.current.set(tabId, freezeIncomingTab(elements, snapshot));
+		return true;
+	}, [cleanupFrozenTabById]);
+	const finalizeIncomingTab = (0, import_react.useCallback)((tabId) => {
+		const frozenState = frozenTabsRef.current.get(tabId);
+		if (!frozenState) return;
+		finalizeFrozenIncomingTab(frozenState);
+		frozenTabsRef.current.delete(tabId);
+	}, []);
 	(0, import_react.useEffect)(() => {
 		setSelectedTabState((current) => current === selectedFromLocation ? current : selectedFromLocation);
 	}, [selectedFromLocation]);
+	(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;
 		if (currentTab === nextTabId && latestSelectedFromLocation === nextTabId) return;
@@ -74082,28 +74249,54 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 			}
 			navController.push(nextArea, href, latestLocation.state);
 		};
+		const runSelectionWithScrollTransfer = (animated) => {
+			captureOutgoingTab(currentTab, latestViewportSelector);
+			if (!animated) {
+				(0, import_react_dom.flushSync)(() => {
+					commitSelection();
+				});
+				prepareIncomingTab(nextTabId, latestViewportSelector);
+				finalizeIncomingTab(nextTabId);
+				cleanupFrozenTabById(currentTab);
+				return;
+			}
+			let hasPreparedIncoming = false;
+			runViewTransition({
+				intent: {
+					area: resolveTabArea(latestLocation.pathname, latestArea),
+					kind: "tab-carousel",
+					direction
+				},
+				collectBeforeEntries: () => collectTabEntries(tabsRef.current, currentTab),
+				collectAfterEntries: () => {
+					if (!hasPreparedIncoming) hasPreparedIncoming = prepareIncomingTab(nextTabId, latestViewportSelector);
+					return collectTabEntries(tabsRef.current, nextTabId);
+				},
+				update: commitSelection
+			}).finally(() => {
+				if (!hasPreparedIncoming) prepareIncomingTab(nextTabId, latestViewportSelector);
+				finalizeIncomingTab(nextTabId);
+				cleanupFrozenTabById(currentTab);
+			});
+		};
 		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,
+		cleanupFrozenTabById,
+		finalizeIncomingTab,
+		prepareIncomingTab
+	]);
 	return {
 		tabsRef,
 		selectedTab,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openspecui/web",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "type": "module",
   "bin": {
     "openspecui-ssg": "./dist-ssg/ssg-cli.mjs"

package/dist/assets/CanvasRenderer-XYe2KglB.js

@@ -1 +0,0 @@
-import"./Geometry-CNDxiJq_.js";import{r as e}from"./index-Djyctzdp.js";export{e as CanvasRenderer};

package/dist/assets/WebGLRenderer-DCMbi58z.js

@@ -1 +0,0 @@
-import"./Geometry-CNDxiJq_.js";import{n as e}from"./index-Djyctzdp.js";export{e as WebGLRenderer};

package/dist/assets/WebGPURenderer-D8qkuqdr.js

@@ -1 +0,0 @@
-import"./Geometry-CNDxiJq_.js";import{t as e}from"./index-Djyctzdp.js";export{e as WebGPURenderer};

package/dist/assets/browserAll-haNDWq66.js

@@ -1 +0,0 @@
-import{it as e,x as t}from"./Geometry-CNDxiJq_.js";import{c as n,l as r,o as i,s as a}from"./index-Djyctzdp.js";import"./init-BWnHltxK.js";e.add(r),e.mixin(t,n),e.add(a),e.mixin(t,i);

package/dist/assets/dist-BXHMHEwl.js

@@ -1 +0,0 @@
-import"./dist-QUHuPJsA.js";import{T as e}from"./index-Djyctzdp.js";export{e as css};

package/dist/assets/dist-D0pwQ8q9.js

@@ -1 +0,0 @@
-import"./dist-QUHuPJsA.js";import{u as e}from"./index-Djyctzdp.js";export{e as yaml};

package/dist/assets/dist-D_Ftxw8J.js

@@ -1 +0,0 @@
-import"./dist-QUHuPJsA.js";import{k as e}from"./index-Djyctzdp.js";export{e as json};

package/dist/assets/trpc-C7hf8_bp.js

@@ -1 +0,0 @@
-import{F as e}from"./index-Djyctzdp.js";export{e as trpcClient};

package/dist/assets/webworkerAll-BXCHpnO9.js

@@ -1 +0,0 @@
-import"./Geometry-CNDxiJq_.js";import"./index-Djyctzdp.js";import"./init-BWnHltxK.js";

package/dist-ssg/client/assets/CanvasRenderer-BVt34cwv.js

@@ -1 +0,0 @@
-import"./Geometry-CNDxiJq_.js";import{r as e}from"./index.ssg-DkyqyrXf.js";export{e as CanvasRenderer};

package/dist-ssg/client/assets/WebGLRenderer-DTGXjggz.js

@@ -1 +0,0 @@
-import"./Geometry-CNDxiJq_.js";import{n as e}from"./index.ssg-DkyqyrXf.js";export{e as WebGLRenderer};

package/dist-ssg/client/assets/WebGPURenderer-9B_42fBK.js

@@ -1 +0,0 @@
-import"./Geometry-CNDxiJq_.js";import{t as e}from"./index.ssg-DkyqyrXf.js";export{e as WebGPURenderer};

package/dist-ssg/client/assets/browserAll-DNt0Yfet.js

@@ -1 +0,0 @@
-import{it as e,x as t}from"./Geometry-CNDxiJq_.js";import{c as n,l as r,o as i,s as a}from"./index.ssg-DkyqyrXf.js";import"./init-BRd1iFqg.js";e.add(r),e.mixin(t,n),e.add(a),e.mixin(t,i);

package/dist-ssg/client/assets/dist-CkOzcD72.js

@@ -1 +0,0 @@
-import"./dist-QUHuPJsA.js";import{u as e}from"./index.ssg-DkyqyrXf.js";export{e as yaml};

package/dist-ssg/client/assets/dist-DuL-Iyhd.js

@@ -1 +0,0 @@
-import"./dist-QUHuPJsA.js";import{k as e}from"./index.ssg-DkyqyrXf.js";export{e as json};

package/dist-ssg/client/assets/dist-_NPWTu8A.js

@@ -1 +0,0 @@
-import"./dist-QUHuPJsA.js";import{T as e}from"./index.ssg-DkyqyrXf.js";export{e as css};

package/dist-ssg/client/assets/trpc-BX7m8KYM.js

@@ -1 +0,0 @@
-import{F as e}from"./index.ssg-DkyqyrXf.js";export{e as trpcClient};

package/dist-ssg/client/assets/webworkerAll-C_Psgpip.js

@@ -1 +0,0 @@
-import"./Geometry-CNDxiJq_.js";import"./index.ssg-DkyqyrXf.js";import"./init-BRd1iFqg.js";