@openspecui/web 3.2.1 → 3.2.3

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$7 = typeof window !== "undefined" ? import_react.useLayoutEffect : import_react.useEffect;
+var useLayoutEffect$8 = 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$7(() => {
+	useLayoutEffect$8(() => {
 		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$7(() => {
+	useLayoutEffect$8(() => {
 		if (previousIsLoading && !isLoading) router.emit({
 			type: "onLoad",
 			...getLocationChangeInfo(router.state)
@@ -8378,7 +8378,7 @@ function Transitioner() {
 		router,
 		isLoading
 	]);
-	useLayoutEffect$7(() => {
+	useLayoutEffect$8(() => {
 		if (previousIsPagePending && !isPagePending) router.emit({
 			type: "onBeforeRouteMount",
 			...getLocationChangeInfo(router.state)
@@ -8388,7 +8388,7 @@ function Transitioner() {
 		previousIsPagePending,
 		router
 	]);
-	useLayoutEffect$7(() => {
+	useLayoutEffect$8(() => {
 		if (previousIsAnyPending && !isAnyPending) {
 			const changeInfo = getLocationChangeInfo(router.state);
 			router.emit({
@@ -84161,15 +84161,6 @@ var tabsStyleText = (id) => {
       transform: scaleX(0.5);
     }
 
-    #${id}[data-tabs-strip-decoration='on'] .tabs-strip {
-      background-image: linear-gradient(
-        to bottom,
-        transparent,
-        transparent calc(100% - 1px),
-        var(--border) calc(100% - 1px),
-        var(--border)
-      );
-    }
   `;
 };
 function buildReorderedTabIds(currentTabIds, draggedTabId, targetTabId, position) {
@@ -84192,7 +84183,7 @@ function buildStableContentTabIds(previousTabIds, currentTabIds) {
 * Hidden tabs are pre-rendered at lower priority and preserve their state.
 * Supports both controlled and uncontrolled active tab.
 */
-function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTabOrderChange, actions, onTabBarDoubleClick, className = "", classNames, showHeaderShell = true, showSelectionIndicator = true, decorateStrip = true }, ref) {
+function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTabOrderChange, actions, onTabBarDoubleClick, className = "", classNames, showHeaderShell = true, showSelectionIndicator = true, decorateStrip = true, selectionIndicatorLayout = "underline" }, ref) {
 	const [uncontrolled, setUncontrolled] = (0, import_react.useState)(tabs[0]?.id ?? "");
 	const [dropIndicator, setDropIndicator] = (0, import_react.useState)(null);
 	const dropIndicatorRef = (0, import_react.useRef)(null);
@@ -84201,6 +84192,8 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 	const headerRef = (0, import_react.useRef)(null);
 	const headerShellRef = (0, import_react.useRef)(null);
 	const headerForegroundRef = (0, import_react.useRef)(null);
+	const headerFrameRef = (0, import_react.useRef)(null);
+	const stripRef = (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());
@@ -84229,7 +84222,7 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 			return panelRefs.current.get(tabId) ?? null;
 		},
 		getHeaderShell() {
-			return headerShellRef.current;
+			return headerShellRef.current ?? stripRef.current;
 		},
 		getHeaderForeground() {
 			return headerForegroundRef.current;
@@ -84243,23 +84236,39 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 	}), [activeTab]);
 	const syncSelectionIndicator = (0, import_react.useCallback)(() => {
 		const indicator = selectionIndicatorRef.current;
-		const header = headerRef.current;
+		const strip = stripRef.current ?? headerFrameRef.current;
 		const activeTrigger = activeTab ? triggerRefs.current.get(activeTab) : null;
 		if (!indicator) return;
-		if (!showSelectionIndicator || !header || !activeTrigger) {
+		if (!showSelectionIndicator || !strip || !activeTrigger) {
 			indicator.style.opacity = "0";
 			indicator.style.width = "0px";
-			indicator.style.height = "0px";
-			indicator.style.transform = "translate(0px, 0px)";
+			indicator.style.height = selectionIndicatorLayout === "overlay" ? "0px" : "";
+			indicator.style.transform = selectionIndicatorLayout === "overlay" ? "translate(0px, 0px)" : "translateX(0px)";
 			return;
 		}
-		const headerRect = header.getBoundingClientRect();
+		const stripRect = strip.getBoundingClientRect();
 		const triggerRect = activeTrigger.getBoundingClientRect();
+		if (selectionIndicatorLayout === "underline") {
+			const indicatorStyle = getComputedStyle(indicator);
+			const inlineInset = parseFloat(indicatorStyle.getPropertyValue("--tabs-selection-inline-inset")) || 10;
+			const minWidth = parseFloat(indicatorStyle.getPropertyValue("--tabs-selection-min-width")) || 40;
+			const width = Math.max(minWidth, triggerRect.width - inlineInset * 2);
+			const translateX = triggerRect.left - stripRect.left + (triggerRect.width - width) / 2;
+			indicator.style.opacity = "1";
+			indicator.style.width = `${width}px`;
+			indicator.style.height = "";
+			indicator.style.transform = `translateX(${translateX}px)`;
+			return;
+		}
 		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, showSelectionIndicator]);
+		indicator.style.height = `${triggerRect.height + 1}px`;
+		indicator.style.transform = `translate(${triggerRect.left - stripRect.left}px, ${triggerRect.top - stripRect.top}px)`;
+	}, [
+		activeTab,
+		selectionIndicatorLayout,
+		showSelectionIndicator
+	]);
 	(0, import_react.useLayoutEffect)(() => {
 		syncSelectionIndicator();
 	}, [syncSelectionIndicator, tabLayoutSignature]);
@@ -84279,6 +84288,8 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 		});
 		observer.observe(tabsButton);
 		if (headerRef.current) observer.observe(headerRef.current);
+		if (stripRef.current) observer.observe(stripRef.current);
+		if (headerFrameRef.current) observer.observe(headerFrameRef.current);
 		const activeTrigger = activeTab ? triggerRefs.current.get(activeTab) : null;
 		if (activeTrigger) observer.observe(activeTrigger);
 		return () => {
@@ -84371,18 +84382,22 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 	}, [reorderable]);
 	if (tabs.length === 0) return null;
 	const headerClassName = cn$1("tabs-header relative sticky top-0 z-20 flex min-w-0 items-stretch", classNames?.header);
-	const headerShellClassName = cn$1("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", classNames?.headerShell);
-	const headerForegroundClassName = cn$1("tabs-header-foreground relative z-20 flex min-w-0 items-stretch", classNames?.headerForeground);
-	const stripClassName = cn$1("tabs-strip flex min-w-0 flex-1 items-stretch rounded-l-md px-4", classNames?.strip);
+	const headerShellClassName = cn$1(selectionIndicatorLayout === "underline" ? "tabs-header-shell bg-card/95 pointer-events-none absolute inset-0 z-0 rounded-t-md rounded-b-none border border-b-0 border-zinc-500/15 backdrop-blur-sm" : "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", classNames?.headerShell);
+	const headerForegroundClassName = cn$1("tabs-header-foreground relative z-20 flex min-w-0 flex-1", classNames?.headerForeground);
+	const headerFrameClassName = cn$1("tabs-header-frame relative flex min-w-0 flex-1 items-stretch", classNames?.headerFrame);
+	const stripClassName = cn$1("tabs-strip relative flex min-w-0 flex-1 items-stretch px-4", classNames?.strip);
 	const listClassName = cn$1("tabs-button scrollbar-none flex min-w-0 flex-1 gap-1 overflow-x-auto", classNames?.list);
 	const buttonBaseClassName = cn$1("group relative z-10 m-0 flex h-full shrink-0 px-2 py-2 text-sm font-medium transition-colors", classNames?.buttonBase);
 	const buttonInnerClassName = cn$1("inline-flex h-full items-center gap-2", classNames?.buttonInner);
 	const activeButtonClassName = cn$1("tab-selected text-foreground", classNames?.activeButton);
-	const inactiveButtonClassName = cn$1("text-muted-foreground hover:bg-background/35 hover:text-foreground", classNames?.inactiveButton);
+	const inactiveButtonClassName = cn$1("text-muted-foreground hover:text-foreground", classNames?.inactiveButton);
 	const activeButtonInnerClassName = cn$1(classNames?.activeButtonInner);
 	const inactiveButtonInnerClassName = cn$1(classNames?.inactiveButtonInner);
-	const actionsClassName = cn$1("tabs-actions border-zinc-500/15 flex shrink-0 items-center rounded-r-md border-l px-1 h-full", classNames?.actions);
-	const selectionIndicatorClassName = cn$1("tabs-selection-indicator border-primary bg-background/70 duration-280 absolute left-0 top-0 border-b-4 opacity-0 transition-[transform,width,height,opacity] ease-[cubic-bezier(0.22,1,0.36,1)]", classNames?.selectionIndicator);
+	const actionsClassName = cn$1("tabs-actions relative flex shrink-0 items-center px-1", classNames?.actions);
+	const actionsDividerClassName = cn$1("tabs-actions-divider bg-border/60 absolute inset-y-0 left-0 w-px", classNames?.actionsDivider);
+	const selectionTrackClassName = cn$1("tabs-selection-track bg-border/85 pointer-events-none absolute inset-x-0 bottom-0 h-px", classNames?.selectionTrack);
+	const selectionIndicatorViewportClassName = cn$1(selectionIndicatorLayout === "underline" ? "pointer-events-none absolute inset-x-0 top-0 bottom-[-1px] z-10 overflow-hidden" : "pointer-events-none absolute inset-0 z-10 overflow-hidden", classNames?.selectionIndicatorViewport);
+	const selectionIndicatorClassName = cn$1(selectionIndicatorLayout === "underline" ? "tabs-selection-indicator absolute bottom-0 left-0 h-[3px] rounded-full bg-primary opacity-0 transition-[transform,width,opacity] duration-280 ease-[cubic-bezier(0.22,1,0.36,1)] [--tabs-selection-inline-inset:10px] [--tabs-selection-min-width:40px]" : "tabs-selection-indicator border-primary bg-background/70 duration-280 absolute left-0 top-0 border-b opacity-0 transition-[transform,width,height,opacity] ease-[cubic-bezier(0.22,1,0.36,1)]", classNames?.selectionIndicator);
 	const handleTabBarDoubleClick = (event) => {
 		if (!onTabBarDoubleClick) return;
 		if (event.target.closest("[data-tab-item=\"true\"]")) return;
@@ -84439,42 +84454,53 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			ref: headerRef,
 			className: headerClassName,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-				showHeaderShell && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					ref: headerShellRef,
-					"data-tabs-header-shell": "true",
-					className: headerShellClassName
-				}),
-				showSelectionIndicator && /* @__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: selectionIndicatorClassName
-					})
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					ref: headerForegroundRef,
-					"data-tabs-header-foreground": "true",
-					className: headerForegroundClassName,
-					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
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [showHeaderShell && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				ref: headerShellRef,
+				"data-tabs-header-shell": "true",
+				className: headerShellClassName
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				ref: headerForegroundRef,
+				"data-tabs-header-foreground": "true",
+				className: headerForegroundClassName,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					ref: headerFrameRef,
+					className: headerFrameClassName,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							ref: stripRef,
+							className: stripClassName,
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								ref: tabsButtonRef,
+								className: listClassName,
+								onDoubleClick: handleTabBarDoubleClick,
+								onDragOver: handleListDragOver,
+								onDrop: handleListDrop,
+								children: tabButtons
+							}), showSelectionIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: selectionIndicatorViewportClassName,
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+									ref: selectionIndicatorRef,
+									"data-tabs-selection-indicator": "true",
+									"aria-hidden": "true",
+									className: selectionIndicatorClassName
+								})
+							})]
+						}),
+						actions && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							"data-tabs-actions": "true",
+							className: actionsClassName,
+							children: [decorateStrip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								"aria-hidden": "true",
+								className: actionsDividerClassName
+							}), actions]
+						}),
+						decorateStrip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							"aria-hidden": "true",
+							className: selectionTrackClassName
 						})
-					}), 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", {
@@ -84500,6 +84526,14 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 }
 var Tabs = (0, import_react.forwardRef)(TabsImpl);
 //#endregion
+//#region src/lib/view-transitions/tab-direction.ts
+function resolveTabCarouselDirection(tabs, currentTabId, nextTabId) {
+	const currentIndex = tabs.findIndex((tab) => tab.id === currentTabId);
+	const nextIndex = tabs.findIndex((tab) => tab.id === nextTabId);
+	if (currentIndex < 0 || nextIndex < 0 || currentIndex === nextIndex) return null;
+	return nextIndex > currentIndex ? "forward" : "backward";
+}
+//#endregion
 //#region src/lib/view-transitions/tab-scroll-freeze.ts
 var DATA_VISIBLE_HEIGHT = "tabVisibleHeight";
 var DATA_TOP_INSET = "tabTopInset";
@@ -84554,7 +84588,7 @@ function restoreViewportScroll(viewport, panel, targetScrollTop) {
 	};
 	requestAnimationFrame(retry);
 }
-function hasVerticalScrollBehavior(overflowY) {
+function hasVerticalScrollBehavior$1(overflowY) {
 	return overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
 }
 function findScrollableDescendant(panel) {
@@ -84563,7 +84597,7 @@ function findScrollableDescendant(panel) {
 	while (walker.nextNode()) {
 		const node = walker.currentNode;
 		if (!(node instanceof HTMLElement)) continue;
-		if (!hasVerticalScrollBehavior(window.getComputedStyle(node).overflowY) || node.scrollHeight <= node.clientHeight) continue;
+		if (!hasVerticalScrollBehavior$1(window.getComputedStyle(node).overflowY) || node.scrollHeight <= node.clientHeight) continue;
 		if (node.scrollTop > 0) return node;
 		candidate ??= node;
 	}
@@ -84646,12 +84680,12 @@ function resolveViewportBoundary(panel, viewportSelector) {
 function resolveScrollViewport(panel, boundary) {
 	let current = panel.parentElement;
 	while (current) {
-		if (hasVerticalScrollBehavior(window.getComputedStyle(current).overflowY) && current.scrollHeight > current.clientHeight) return current;
+		if (hasVerticalScrollBehavior$1(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;
+	if (hasVerticalScrollBehavior$1(window.getComputedStyle(boundary).overflowY)) return boundary;
 	return null;
 }
 function resolveTabScrollElements(handle, tabId, viewportSelector) {
@@ -85011,11 +85045,16 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 				commitSelection();
 				return;
 			}
+			const direction = resolveTabCarouselDirection(latestTabs, currentTab, nextTabId);
+			if (!direction) {
+				commitSelection();
+				return;
+			}
 			runViewTransition({
 				intent: {
 					area: resolveTabArea(latestLocation.pathname, latestArea),
 					kind: "tab-carousel",
-					direction: "forward"
+					direction
 				},
 				collectBeforeEntries: () => collectTabEntries(tabsRef.current, currentTab),
 				collectAfterEntries: () => collectTabEntries(tabsRef.current, nextTabId),
@@ -85023,7 +85062,8 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 			});
 			return;
 		}
-		const runSelectionWithScrollTransfer = (animated) => {
+		const direction = resolveTabCarouselDirection(latestTabs, currentTab, nextTabId);
+		const runSelectionWithScrollTransfer = (animated, direction) => {
 			const outgoingSnapshot = captureTabSnapshot(currentTab, latestViewportSelector);
 			const incomingSeedSnapshot = scrollMemoryByTabRef.current.get(nextTabId) ?? outgoingSnapshot ?? captureTabSnapshot(nextTabId, latestViewportSelector);
 			const outgoingToken = captureOutgoingTab(currentTab, latestViewportSelector, outgoingSnapshot);
@@ -85059,14 +85099,11 @@ function useRoutedCarouselTabs({ queryKey, tabs, initialTab, area, history = "re
 			runSelectionWithScrollTransfer(false);
 			return;
 		}
-		const currentIndex = latestTabs.findIndex((tab) => tab.id === currentTab);
-		const nextIndex = latestTabs.findIndex((tab) => tab.id === nextTabId);
-		if (currentIndex < 0 || nextIndex < 0) {
+		if (!direction) {
 			runSelectionWithScrollTransfer(false);
 			return;
 		}
-		const direction = nextIndex >= currentIndex ? "forward" : "backward";
-		runSelectionWithScrollTransfer(true);
+		runSelectionWithScrollTransfer(true, direction);
 	}, [
 		captureOutgoingTab,
 		captureTabSnapshot,
@@ -102317,7 +102354,7 @@ function CodeEditor({ value, onChange, readOnly = false, language, filename, lin
 			bracketMatching: !readOnly
 		},
 		extensions,
-		className: `scrollbar-thin scrollbar-track-transparent overflow-auto ${className}`,
+		className: `min-h-0 overflow-hidden ${className}`,
 		style: {
 			fontSize,
 			["--code-editor-min-height"]: editorMinHeight,
@@ -102625,6 +102662,7 @@ var layoutStyles = String.raw`
     display: flex;
     flex-direction: column;
     flex: 1;
+    min-height: 0;
   }
 
   /* 宽屏：grid 布局，文件列表在右侧 */
@@ -102633,6 +102671,7 @@ var layoutStyles = String.raw`
       display: grid;
       grid-template-columns: minmax(0, 1fr) minmax(240px, clamp(240px, 30%, 420px));
       gap: 1rem;
+      min-height: 0;
     }
     .fev-sidebar-tabs {
       display: none;
@@ -102937,21 +102976,110 @@ function FileExplorer({ entries, selectedPath, onSelect, breadcrumbRoot, headerL
 		})]
 	});
 }
-function FileExplorerCodeEditor({ file, value, readOnly = true, onChange, lineWrapping }) {
+function FileExplorerCodeEditor({ file, value, readOnly = true, onChange, lineWrapping, editorMinHeight }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeEditor, {
 		value,
 		filename: file.path,
 		readOnly,
 		lineWrapping,
 		className: "min-h-0 flex-1",
+		editorMinHeight,
 		onChange
 	}, file.path);
 }
 //#endregion
+//#region src/components/scroll-spy.ts
+function hasVerticalScrollBehavior(overflowY) {
+	return overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
+}
+function findVerticalScrollContainer(node, options = {}) {
+	const { allowNonScrollable = false } = options;
+	let current = node?.parentElement ?? null;
+	while (current) {
+		if (hasVerticalScrollBehavior(window.getComputedStyle(current).overflowY)) {
+			if (allowNonScrollable || current.scrollHeight > current.clientHeight) return current;
+		}
+		current = current.parentElement;
+	}
+	return null;
+}
+function scrollViewportBounds(root) {
+	if (root) {
+		const rect = root.getBoundingClientRect();
+		return {
+			top: rect.top,
+			bottom: rect.bottom
+		};
+	}
+	return {
+		top: 0,
+		bottom: window.innerHeight
+	};
+}
+function measureAvailableViewportHeight(node, root = findVerticalScrollContainer(node, { allowNonScrollable: true })) {
+	if (typeof window === "undefined" || !node) return null;
+	const nodeRect = node.getBoundingClientRect();
+	const viewport = scrollViewportBounds(root);
+	return Math.max(Math.floor(viewport.bottom - Math.max(nodeRect.top, viewport.top)), 0);
+}
+function useViewportConstrainedHeight({ target, enabled = true }) {
+	const [height, setHeight] = (0, import_react.useState)(null);
+	(0, import_react.useLayoutEffect)(() => {
+		if (!enabled || typeof window === "undefined") {
+			setHeight(null);
+			return;
+		}
+		if (!target) {
+			setHeight(null);
+			return;
+		}
+		let resizeObserver = null;
+		let scrollRoot = null;
+		let scrollTarget = window;
+		const setConstrainedHeight = (nextHeight) => {
+			setHeight((currentHeight) => currentHeight === nextHeight ? currentHeight : nextHeight);
+		};
+		const bindScrollRoot = (nextRoot) => {
+			if (scrollRoot === nextRoot) return;
+			scrollTarget.removeEventListener("scroll", handleUpdate);
+			if (resizeObserver && scrollRoot) resizeObserver.unobserve(scrollRoot);
+			scrollRoot = nextRoot;
+			scrollTarget = nextRoot ?? window;
+			scrollTarget.addEventListener("scroll", handleUpdate, { passive: true });
+			if (resizeObserver && scrollRoot) resizeObserver.observe(scrollRoot);
+		};
+		const handleUpdate = () => {
+			const nextRoot = findVerticalScrollContainer(target, { allowNonScrollable: true });
+			bindScrollRoot(nextRoot);
+			setConstrainedHeight(measureAvailableViewportHeight(target, nextRoot));
+		};
+		if (typeof ResizeObserver !== "undefined") {
+			resizeObserver = new ResizeObserver(() => {
+				handleUpdate();
+			});
+			resizeObserver.observe(target);
+			if (target.parentElement) resizeObserver.observe(target.parentElement);
+		}
+		handleUpdate();
+		window.addEventListener("resize", handleUpdate);
+		return () => {
+			window.removeEventListener("resize", handleUpdate);
+			scrollTarget.removeEventListener("scroll", handleUpdate);
+			resizeObserver?.disconnect();
+		};
+	}, [enabled, target]);
+	return height;
+}
+//#endregion
 //#region src/components/folder-editor-viewer.tsx
 function FolderEditorViewer({ changeId, archived = false }) {
 	const { data: files, isLoading, error } = archived ? useArchiveFilesSubscription(changeId) : useChangeFilesSubscription(changeId);
 	const [selectedPath, setSelectedPath] = (0, import_react.useState)(null);
+	const [viewportNode, setViewportNode] = (0, import_react.useState)(null);
+	const viewportHeight = useViewportConstrainedHeight({
+		target: viewportNode,
+		enabled: viewportNode !== null
+	});
 	const sortedEntries = (0, import_react.useMemo)(() => {
 		if (!files) return [];
 		return [...files];
@@ -102971,18 +103099,31 @@ function FolderEditorViewer({ changeId, archived = false }) {
 		className: "border-destructive/50 bg-destructive/10 text-destructive rounded-md border p-4 text-sm",
 		children: ["Failed to load files: ", error.message]
 	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileExplorer, {
-		entries: sortedEntries,
-		selectedPath,
-		onSelect: setSelectedPath,
-		emptyState: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "No files found for this change." }),
-		renderEditor: (activeFile) => activeFile ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileExplorerCodeEditor, {
-			file: activeFile,
-			value: activeFile.content ?? "",
-			readOnly: true
-		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			className: "text-muted-foreground flex h-full items-center justify-center",
-			children: "Select a file to view"
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
+		"data-tab-scroll-root": "true",
+		className: "scrollbar-thin scrollbar-track-transparent min-h-0 flex-1 overflow-auto",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "pr-1",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				ref: setViewportNode,
+				className: "flex min-h-0 flex-col",
+				style: viewportHeight != null ? { height: `${viewportHeight}px` } : void 0,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileExplorer, {
+					entries: sortedEntries,
+					selectedPath,
+					onSelect: setSelectedPath,
+					emptyState: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "No files found for this change." }),
+					renderEditor: (activeFile) => activeFile ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileExplorerCodeEditor, {
+						file: activeFile,
+						value: activeFile.content ?? "",
+						readOnly: true,
+						editorMinHeight: "0px"
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "text-muted-foreground flex h-full items-center justify-center",
+						children: "Select a file to view"
+					})
+				})
+			})
 		})
 	});
 }
@@ -103850,7 +103991,7 @@ function ChangeView() {
 */
 function ButtonGroup({ value, options, onChange, className = "", tone = "default" }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-		className: `inline-flex w-fit max-w-full self-start overflow-hidden rounded-md border ${tone === "terminal" ? "border-terminal-foreground/25 bg-terminal/70 text-terminal-foreground" : "border-border bg-card"} ${className}`,
+		className: `inline-flex w-fit max-w-full shrink-0 self-start overflow-hidden rounded-md border ${tone === "terminal" ? "border-terminal-foreground/25 bg-terminal/70 text-terminal-foreground" : "border-border bg-card"} ${className}`,
 		children: options.map((option, index) => {
 			const active = option.value === value;
 			const stateClassName = active ? "bg-primary text-primary-foreground" : tone === "terminal" ? "text-terminal-foreground/72 hover:bg-terminal-foreground/10 hover:text-terminal-foreground" : "text-muted-foreground hover:bg-muted/60 hover:text-foreground";
@@ -146295,6 +146436,16 @@ function isCoreWorkflowSelection(workflows) {
 function createRunnerLineId() {
 	return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
 }
+function useTabPanelViewportHeight() {
+	const [target, setTarget] = (0, import_react.useState)(null);
+	return {
+		viewportHeight: useViewportConstrainedHeight({
+			target,
+			enabled: target !== null
+		}),
+		setViewportNode: setTarget
+	};
+}
 function JsonStructuredValue({ value }) {
 	if (value === null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 		className: "text-muted-foreground font-mono text-xs",
@@ -146352,6 +146503,8 @@ function JsonStructuredValue({ value }) {
 }
 function Config() {
 	const isStatic = isStaticMode();
+	const { viewportHeight: schemaViewportHeight, setViewportNode: setSchemaViewportNode } = useTabPanelViewportHeight();
+	const { viewportHeight: projectConfigViewportHeight, setViewportNode: setProjectConfigViewportNode } = useTabPanelViewportHeight();
 	const [schemaMode, setSchemaMode] = (0, import_react.useState)("read");
 	const [schemaActionError, setSchemaActionError] = (0, import_react.useState)(null);
 	const [schemaEntryError, setSchemaEntryError] = (0, import_react.useState)(null);
@@ -147187,416 +147340,426 @@ function Config() {
 		if (isPendingCommandRunning) return;
 		setPendingCommandKind(null);
 	}, [isPendingCommandRunning]);
-	const schemaTabContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
-		className: "flex min-h-0 flex-1 flex-col gap-4",
-		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex flex-wrap items-center justify-between gap-3",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonGroup, {
-					value: schemaMode,
-					onChange: handleSchemaModeChange,
-					options: [
-						{
-							value: "read",
-							label: "Read"
-						},
-						{
-							value: "preview",
-							label: "Preview"
-						},
-						{
-							value: "edit",
-							label: "Edit",
-							disabled: !schemaCanEdit
-						}
-					]
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-						type: "button",
-						onClick: handleAddSchema,
-						disabled: isStatic || createSchemaMutation.isPending,
-						className: "border-border hover:bg-muted inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { className: "h-3.5 w-3.5" }), "Add"]
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-						type: "button",
-						onClick: handleDeleteSchema,
-						disabled: !schemaCanEdit || deleteSchemaMutation.isPending,
-						className: "border-border hover:bg-muted inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { className: "h-3.5 w-3.5" }), "Delete"]
+	const schemaTabContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
+		"data-tab-scroll-root": "true",
+		className: "scrollbar-thin scrollbar-track-transparent min-h-0 flex-1 overflow-auto",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "space-y-4 pr-1",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap items-center justify-between gap-3",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonGroup, {
+						value: schemaMode,
+						onChange: handleSchemaModeChange,
+						options: [
+							{
+								value: "read",
+								label: "Read"
+							},
+							{
+								value: "preview",
+								label: "Preview"
+							},
+							{
+								value: "edit",
+								label: "Edit",
+								disabled: !schemaCanEdit
+							}
+						]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+							type: "button",
+							onClick: handleAddSchema,
+							disabled: isStatic || createSchemaMutation.isPending,
+							className: "border-border hover:bg-muted inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { className: "h-3.5 w-3.5" }), "Add"]
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+							type: "button",
+							onClick: handleDeleteSchema,
+							disabled: !schemaCanEdit || deleteSchemaMutation.isPending,
+							className: "border-border hover:bg-muted inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { className: "h-3.5 w-3.5" }), "Delete"]
+						})]
 					})]
-				})]
-			}),
-			schemaActionError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "text-destructive text-xs",
-				children: schemaActionError
-			}),
-			schemaEntryError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "text-destructive text-xs",
-				children: schemaEntryError
-			}),
-			schemasError && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "text-destructive text-sm",
-				children: ["Failed to load schemas: ", schemasError.message]
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex min-h-0 flex-1 flex-col",
-				children: [
-					schemasLoading && (!schemas || schemas.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-						className: "text-muted-foreground mb-3 text-sm",
-						children: "Loading schemas…"
-					}),
-					schemas && schemas.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-						className: "text-muted-foreground mb-3 text-sm",
-						children: "No schemas available."
-					}),
-					selectedSchemaInfo ? schemaMode === "preview" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownViewer, {
-						className: "min-h-0 flex-1",
-						markdown: ({ H1, H2, H3, Section }) => {
-							const anchorBase = `schema-${selectedSchemaInfo.name}`;
-							const schemaAnchor = (suffix) => `${anchorBase}-${suffix}`;
-							return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-								className: "space-y-6",
-								children: [
-									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
-										id: anchorBase,
-										children: selectedSchemaInfo.name
-									}), selectedSchemaInfo.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-										className: "text-muted-foreground",
-										children: selectedSchemaInfo.description
-									})] }),
-									schemaResolution && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, {
-										id: schemaAnchor("resolution"),
-										children: "Resolution"
-									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-										className: "text-muted-foreground mt-2 space-y-1 pl-4 text-sm",
-										children: [
-											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: ["Source: ", schemaResolution.source] }),
-											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-												className: "truncate",
-												children: ["Path: ", schemaResolution.displayPath ?? schemaResolution.path]
+				}),
+				schemaActionError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "text-destructive text-xs",
+					children: schemaActionError
+				}),
+				schemaEntryError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "text-destructive text-xs",
+					children: schemaEntryError
+				}),
+				schemasError && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "text-destructive text-sm",
+					children: ["Failed to load schemas: ", schemasError.message]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					ref: setSchemaViewportNode,
+					className: "flex min-h-0 flex-col",
+					style: schemaViewportHeight != null ? { height: `${schemaViewportHeight}px` } : void 0,
+					children: [
+						schemasLoading && (!schemas || schemas.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "text-muted-foreground mb-3 text-sm",
+							children: "Loading schemas…"
+						}),
+						schemas && schemas.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "text-muted-foreground mb-3 text-sm",
+							children: "No schemas available."
+						}),
+						selectedSchemaInfo ? schemaMode === "preview" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownViewer, {
+							className: "min-h-0 flex-1",
+							markdown: ({ H1, H2, H3, Section }) => {
+								const anchorBase = `schema-${selectedSchemaInfo.name}`;
+								const schemaAnchor = (suffix) => `${anchorBase}-${suffix}`;
+								return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "space-y-6",
+									children: [
+										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
+											id: anchorBase,
+											children: selectedSchemaInfo.name
+										}), selectedSchemaInfo.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+											className: "text-muted-foreground",
+											children: selectedSchemaInfo.description
+										})] }),
+										schemaResolution && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, {
+											id: schemaAnchor("resolution"),
+											children: "Resolution"
+										}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+											className: "text-muted-foreground mt-2 space-y-1 pl-4 text-sm",
+											children: [
+												/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: ["Source: ", schemaResolution.source] }),
+												/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+													className: "truncate",
+													children: ["Path: ", schemaResolution.displayPath ?? schemaResolution.path]
+												}),
+												schemaResolution.shadows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+													"Shadows:",
+													" ",
+													schemaResolution.shadows.map((s) => `${s.source}(${s.displayPath ?? s.path})`).join(", ")
+												] })
+											]
+										})] }),
+										schemaPreview.error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, {
+											id: schemaAnchor("schema-errors"),
+											children: "Schema errors"
+										}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+											className: "border-destructive/40 bg-destructive/10 text-destructive mt-2 rounded-md border px-3 py-2 text-sm",
+											children: ["schema.yaml parse error: ", schemaPreview.error]
+										})] }),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, { children: [
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, {
+												id: schemaAnchor("artifacts"),
+												children: "Artifacts"
 											}),
-											schemaResolution.shadows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-												"Shadows:",
-												" ",
-												schemaResolution.shadows.map((s) => `${s.source}(${s.displayPath ?? s.path})`).join(", ")
-											] })
-										]
-									})] }),
-									schemaPreview.error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, {
-										id: schemaAnchor("schema-errors"),
-										children: "Schema errors"
-									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-										className: "border-destructive/40 bg-destructive/10 text-destructive mt-2 rounded-md border px-3 py-2 text-sm",
-										children: ["schema.yaml parse error: ", schemaPreview.error]
-									})] }),
-									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, { children: [
-										/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, {
-											id: schemaAnchor("artifacts"),
-											children: "Artifacts"
-										}),
-										previewArtifacts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-											className: "mt-3 space-y-6",
-											children: previewArtifacts.map((artifact) => {
-												const rawArtifact = rawArtifactMap.get(artifact.id);
-												const templateInfo = templateContents?.[artifact.id] ?? (templates?.[artifact.id] ? {
-													...templates[artifact.id],
-													content: null
-												} : null);
-												const templatePath = templateInfo?.path ?? (typeof rawArtifact?.template === "string" ? rawArtifact.template : void 0);
-												const templateDisplayPath = templateInfo?.displayPath ?? templatePath ?? null;
-												const draftTemplateContent = templatePath !== void 0 ? draftByPath.get(templatePath) : void 0;
-												const templateBody = draftTemplateContent !== void 0 ? draftTemplateContent : templateInfo ? templateInfo.content : null;
-												const knownFields = [
-													["id", rawArtifact?.id ?? artifact.id],
-													["generates", rawArtifact?.generates ?? artifact.outputPath],
-													["description", rawArtifact?.description ?? artifact.description],
-													["instruction", rawArtifact?.instruction],
-													["requires", rawArtifact?.requires ?? artifact.requires]
-												].filter((entry) => entry[1] !== void 0);
-												const unknownEntries = rawArtifact ? Object.entries(rawArtifact).filter(([key]) => !KNOWN_ARTIFACT_KEYS.has(key)) : [];
-												return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, {
-													className: "space-y-3",
-													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H3, {
-														id: schemaAnchor(`artifact-${artifact.id}`),
-														children: artifact.id
-													}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-														className: "border-border space-y-4 rounded-lg border px-4 py-4 text-sm",
-														children: [
-															/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-																className: "space-y-3",
-																children: knownFields.map(([key, value]) => {
-																	const isRequires = key === "requires";
-																	const requires = isRequires ? Array.isArray(value) ? value.filter((item) => typeof item === "string") : [] : [];
-																	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+											previewArtifacts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+												className: "mt-3 space-y-6",
+												children: previewArtifacts.map((artifact) => {
+													const rawArtifact = rawArtifactMap.get(artifact.id);
+													const templateInfo = templateContents?.[artifact.id] ?? (templates?.[artifact.id] ? {
+														...templates[artifact.id],
+														content: null
+													} : null);
+													const templatePath = templateInfo?.path ?? (typeof rawArtifact?.template === "string" ? rawArtifact.template : void 0);
+													const templateDisplayPath = templateInfo?.displayPath ?? templatePath ?? null;
+													const draftTemplateContent = templatePath !== void 0 ? draftByPath.get(templatePath) : void 0;
+													const templateBody = draftTemplateContent !== void 0 ? draftTemplateContent : templateInfo ? templateInfo.content : null;
+													const knownFields = [
+														["id", rawArtifact?.id ?? artifact.id],
+														["generates", rawArtifact?.generates ?? artifact.outputPath],
+														["description", rawArtifact?.description ?? artifact.description],
+														["instruction", rawArtifact?.instruction],
+														["requires", rawArtifact?.requires ?? artifact.requires]
+													].filter((entry) => entry[1] !== void 0);
+													const unknownEntries = rawArtifact ? Object.entries(rawArtifact).filter(([key]) => !KNOWN_ARTIFACT_KEYS.has(key)) : [];
+													return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, {
+														className: "space-y-3",
+														children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H3, {
+															id: schemaAnchor(`artifact-${artifact.id}`),
+															children: artifact.id
+														}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+															className: "border-border space-y-4 rounded-lg border px-4 py-4 text-sm",
+															children: [
+																/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+																	className: "space-y-3",
+																	children: knownFields.map(([key, value]) => {
+																		const isRequires = key === "requires";
+																		const requires = isRequires ? Array.isArray(value) ? value.filter((item) => typeof item === "string") : [] : [];
+																		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+																			className: "space-y-2",
+																			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+																				className: "text-muted-foreground text-xs font-semibold uppercase tracking-wide",
+																				children: key
+																			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+																				className: "pl-4 text-sm leading-6",
+																				children: isRequires ? requires.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+																					className: "flex flex-wrap gap-1.5",
+																					children: requires.map((requiredArtifactId) => {
+																						if (!previewArtifacts.some((candidate) => candidate.id === requiredArtifactId)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+																							className: "bg-muted text-muted-foreground rounded-md px-2 py-0.5 text-xs",
+																							children: requiredArtifactId
+																						}, requiredArtifactId);
+																						return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+																							href: `#${schemaAnchor(`artifact-${requiredArtifactId}`)}`,
+																							className: "bg-primary hover:bg-primary/80 text-primary-foreground rounded-md px-2 py-0.5 text-xs transition-colors",
+																							children: requiredArtifactId
+																						}, requiredArtifactId);
+																					})
+																				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+																					className: "text-muted-foreground",
+																					children: "—"
+																				}) : renderFieldValue(key, value)
+																			})]
+																		}, key);
+																	})
+																}),
+																templatePath && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+																	className: "space-y-2",
+																	children: [
+																		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+																			className: "text-muted-foreground text-xs font-semibold uppercase tracking-wide",
+																			children: "Template"
+																		}),
+																		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+																			className: "text-muted-foreground pl-4 text-xs",
+																			children: [
+																				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+																					className: "mr-1",
+																					children: "Template:"
+																				}),
+																				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+																					className: "bg-muted rounded px-1",
+																					children: templateDisplayPath
+																				}),
+																				templateInfo?.source ? ` (${templateInfo.source})` : null
+																			]
+																		}),
+																		templateBody !== null && templateBody !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+																			className: "pl-4",
+																			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+																				className: "bg-muted/30 rounded-lg p-4 [zoom:0.86]",
+																				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownViewer, {
+																					markdown: templateBody,
+																					collectToc: false
+																				})
+																			})
+																		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+																			className: "text-muted-foreground pl-4 text-sm",
+																			children: "Template content unavailable."
+																		})
+																	]
+																}),
+																unknownEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+																	className: "space-y-3",
+																	children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+																		className: "text-muted-foreground text-xs font-semibold uppercase tracking-wide",
+																		children: "Extra fields"
+																	}), unknownEntries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 																		className: "space-y-2",
 																		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-																			className: "text-muted-foreground text-xs font-semibold uppercase tracking-wide",
+																			className: "text-muted-foreground text-xs",
 																			children: key
 																		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 																			className: "pl-4 text-sm leading-6",
-																			children: isRequires ? requires.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-																				className: "flex flex-wrap gap-1.5",
-																				children: requires.map((requiredArtifactId) => {
-																					if (!previewArtifacts.some((candidate) => candidate.id === requiredArtifactId)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-																						className: "bg-muted text-muted-foreground rounded-md px-2 py-0.5 text-xs",
-																						children: requiredArtifactId
-																					}, requiredArtifactId);
-																					return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
-																						href: `#${schemaAnchor(`artifact-${requiredArtifactId}`)}`,
-																						className: "bg-primary hover:bg-primary/80 text-primary-foreground rounded-md px-2 py-0.5 text-xs transition-colors",
-																						children: requiredArtifactId
-																					}, requiredArtifactId);
-																				})
-																			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-																				className: "text-muted-foreground",
-																				children: "—"
-																			}) : renderFieldValue(key, value)
+																			children: renderFieldValue(key, value)
 																		})]
-																	}, key);
+																	}, key))]
 																})
-															}),
-															templatePath && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-																className: "space-y-2",
-																children: [
-																	/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-																		className: "text-muted-foreground text-xs font-semibold uppercase tracking-wide",
-																		children: "Template"
-																	}),
-																	/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-																		className: "text-muted-foreground pl-4 text-xs",
-																		children: [
-																			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-																				className: "mr-1",
-																				children: "Template:"
-																			}),
-																			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
-																				className: "bg-muted rounded px-1",
-																				children: templateDisplayPath
-																			}),
-																			templateInfo?.source ? ` (${templateInfo.source})` : null
-																		]
-																	}),
-																	templateBody !== null && templateBody !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-																		className: "pl-4",
-																		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-																			className: "bg-muted/30 rounded-lg p-4 [zoom:0.86]",
-																			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownViewer, {
-																				markdown: templateBody,
-																				collectToc: false
-																			})
-																		})
-																	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-																		className: "text-muted-foreground pl-4 text-sm",
-																		children: "Template content unavailable."
-																	})
-																]
-															}),
-															unknownEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-																className: "space-y-3",
-																children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-																	className: "text-muted-foreground text-xs font-semibold uppercase tracking-wide",
-																	children: "Extra fields"
-																}), unknownEntries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-																	className: "space-y-2",
-																	children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-																		className: "text-muted-foreground text-xs",
-																		children: key
-																	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-																		className: "pl-4 text-sm leading-6",
-																		children: renderFieldValue(key, value)
-																	})]
-																}, key))]
-															})
-														]
-													})]
-												}, artifact.id);
-											})
-										}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-											className: "text-muted-foreground text-sm",
-											children: "Select a schema to view details."
-										}),
-										schemaDetail?.applyRequires?.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-											className: "text-muted-foreground mt-3 text-xs",
-											children: ["Apply requires: ", schemaDetail.applyRequires.join(", ")]
-										}) : null
-									] }),
-									hasDirtyDrafts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-										className: "text-muted-foreground text-xs",
-										children: "Preview is rendering draft content. Save to persist changes."
-									})
-								]
-							});
-						}
-					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ContextMenuWrapper, {
-						ref: schemaMenuWrapperRef,
-						className: "h-full space-y-4",
-						children: [
-							schemaFilesError && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-								className: "text-destructive text-xs",
-								children: ["Failed to load schema files: ", schemaFilesError.message]
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileExplorer, {
-								entries: schemaEntries,
-								selectedPath: selectedSchemaPath,
-								onSelect: setSelectedSchemaPath,
-								breadcrumbRoot: schemaRootLabel,
-								headerLabel: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-									className: "flex min-w-0 items-center gap-2",
-									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-										className: "uppercase tracking-wide",
-										children: "Files"
-									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-										className: "text-muted-foreground/80 truncate text-[10px] normal-case",
-										title: schemaRootLabel,
-										children: schemaRootLabel
-									})]
+															]
+														})]
+													}, artifact.id);
+												})
+											}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+												className: "text-muted-foreground text-sm",
+												children: "Select a schema to view details."
+											}),
+											schemaDetail?.applyRequires?.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+												className: "text-muted-foreground mt-3 text-xs",
+												children: ["Apply requires: ", schemaDetail.applyRequires.join(", ")]
+											}) : null
+										] }),
+										hasDirtyDrafts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+											className: "text-muted-foreground text-xs",
+											children: "Preview is rendering draft content. Save to persist changes."
+										})
+									]
+								});
+							}
+						}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ContextMenuWrapper, {
+							ref: schemaMenuWrapperRef,
+							className: "flex min-h-0 flex-1 flex-col gap-4",
+							children: [
+								schemaFilesError && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "text-destructive text-xs",
+									children: ["Failed to load schema files: ", schemaFilesError.message]
 								}),
-								headerActions: headerMenuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenuTargeter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-									type: "button",
-									onClick: (event) => {
-										setFileMenuAnchor(null);
-										setViewMenuAnchor(null);
-										setHeaderMenuAnchor({
-											type: "target",
-											element: event.currentTarget,
-											placement: "bottom-end"
-										});
-									},
-									className: "hover:bg-muted rounded-md p-1",
-									"aria-label": "Schema menu",
-									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EllipsisVertical, { className: "h-4 w-4" })
-								}) }) : void 0,
-								entryActions: (entry) => {
-									const propertiesAction = {
-										id: "properties",
-										label: "Properties",
-										icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Info$1, { className: "h-3.5 w-3.5" }),
-										onSelect: () => handleOpenEntryInfo(entry)
-									};
-									if (schemaMode !== "edit" || !canManageEntries) return [propertiesAction];
-									const parent = entry.type === "directory" ? entry.path : getParentPath(entry.path);
-									const isDirectory = entry.type === "directory";
-									return [
-										{
-											id: "new-file",
-											label: isDirectory ? "New file inside" : "New sibling file",
-											icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilePlus, { className: "h-3.5 w-3.5" }),
-											onSelect: () => handleOpenCreateEntry("file", parent)
-										},
-										{
-											id: "new-folder",
-											label: isDirectory ? "New folder inside" : "New sibling folder",
-											icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderPlus, { className: "h-3.5 w-3.5" }),
-											onSelect: () => handleOpenCreateEntry("directory", parent)
-										},
-										propertiesAction,
-										{
-											id: "delete",
-											label: "Delete",
-											icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { className: "h-3.5 w-3.5" }),
-											tone: "destructive",
-											onSelect: () => handleOpenDeleteEntry(entry)
-										}
-									];
-								},
-								emptyState: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "No files found for this schema." }),
-								renderEditor: (activeFile) => activeFile ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-									className: "flex min-h-0 flex-1 flex-col",
-									children: [
-										schemaMode === "edit" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-											className: "border-border/50 flex items-center justify-between border-b px-3 py-2 text-xs",
-											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-												className: "flex items-center gap-2",
-												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenuTargeter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-													type: "button",
-													onClick: (event) => {
-														setHeaderMenuAnchor(null);
-														setViewMenuAnchor(null);
-														setFileMenuAnchor({
-															type: "target",
-															element: event.currentTarget,
-															placement: "bottom-start"
-														});
-													},
-													className: "hover:bg-muted rounded-md px-2 py-1 text-xs font-semibold",
-													children: "File"
-												}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenuTargeter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-													type: "button",
-													onClick: (event) => {
-														setHeaderMenuAnchor(null);
-														setFileMenuAnchor(null);
-														setViewMenuAnchor({
-															type: "target",
-															element: event.currentTarget,
-															placement: "bottom-start"
-														});
-													},
-													className: "hover:bg-muted rounded-md px-2 py-1 text-xs font-semibold",
-													children: "View"
-												}) })]
-											}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-												className: "flex items-center gap-2",
-												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-													type: "button",
-													onClick: handleFileCancel,
-													className: "border-border hover:bg-muted inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium",
-													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(X$2, { className: "h-3.5 w-3.5" }), "Cancel"]
-												}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-													type: "button",
-													onClick: handleFileSave,
-													disabled: !activeSchemaDirty || saveSchemaFileMutation.isPending || !schemaCanEdit,
-													className: "bg-primary text-primary-foreground inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50",
-													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Save, { className: "h-3.5 w-3.5" }), saveSchemaFileMutation.isPending ? "Saving…" : "Save"]
-												})]
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+									className: "min-h-0 flex-1",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileExplorer, {
+										entries: schemaEntries,
+										selectedPath: selectedSchemaPath,
+										onSelect: setSelectedSchemaPath,
+										breadcrumbRoot: schemaRootLabel,
+										headerLabel: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+											className: "flex min-w-0 items-center gap-2",
+											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+												className: "uppercase tracking-wide",
+												children: "Files"
+											}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+												className: "text-muted-foreground/80 truncate text-[10px] normal-case",
+												title: schemaRootLabel,
+												children: schemaRootLabel
 											})]
 										}),
-										/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileExplorerCodeEditor, {
-											file: activeFile,
-											value: schemaMode === "edit" ? activeSchemaDraft ?? activeFile.content ?? "" : activeFile.content ?? "",
-											readOnly: schemaMode !== "edit" || !schemaCanEdit,
-											onChange: schemaMode === "edit" ? handleFileChange : void 0,
-											lineWrapping: schemaEditorWrap
-										}),
-										schemaResolution?.source === "package" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-											className: "text-muted-foreground border-border/50 border-t px-3 py-2 text-xs",
-											children: "Package-provided schemas are read-only."
+										headerActions: headerMenuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenuTargeter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+											type: "button",
+											onClick: (event) => {
+												setFileMenuAnchor(null);
+												setViewMenuAnchor(null);
+												setHeaderMenuAnchor({
+													type: "target",
+													element: event.currentTarget,
+													placement: "bottom-end"
+												});
+											},
+											className: "hover:bg-muted rounded-md p-1",
+											"aria-label": "Schema menu",
+											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EllipsisVertical, { className: "h-4 w-4" })
+										}) }) : void 0,
+										entryActions: (entry) => {
+											const propertiesAction = {
+												id: "properties",
+												label: "Properties",
+												icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Info$1, { className: "h-3.5 w-3.5" }),
+												onSelect: () => handleOpenEntryInfo(entry)
+											};
+											if (schemaMode !== "edit" || !canManageEntries) return [propertiesAction];
+											const parent = entry.type === "directory" ? entry.path : getParentPath(entry.path);
+											const isDirectory = entry.type === "directory";
+											return [
+												{
+													id: "new-file",
+													label: isDirectory ? "New file inside" : "New sibling file",
+													icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilePlus, { className: "h-3.5 w-3.5" }),
+													onSelect: () => handleOpenCreateEntry("file", parent)
+												},
+												{
+													id: "new-folder",
+													label: isDirectory ? "New folder inside" : "New sibling folder",
+													icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderPlus, { className: "h-3.5 w-3.5" }),
+													onSelect: () => handleOpenCreateEntry("directory", parent)
+												},
+												propertiesAction,
+												{
+													id: "delete",
+													label: "Delete",
+													icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { className: "h-3.5 w-3.5" }),
+													tone: "destructive",
+													onSelect: () => handleOpenDeleteEntry(entry)
+												}
+											];
+										},
+										emptyState: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "No files found for this schema." }),
+										renderEditor: (activeFile) => activeFile ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+											className: "flex min-h-0 flex-1 flex-col",
+											children: [
+												schemaMode === "edit" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+													className: "border-border/50 flex items-center justify-between border-b px-3 py-2 text-xs",
+													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+														className: "flex items-center gap-2",
+														children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenuTargeter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+															type: "button",
+															onClick: (event) => {
+																setHeaderMenuAnchor(null);
+																setViewMenuAnchor(null);
+																setFileMenuAnchor({
+																	type: "target",
+																	element: event.currentTarget,
+																	placement: "bottom-start"
+																});
+															},
+															className: "hover:bg-muted rounded-md px-2 py-1 text-xs font-semibold",
+															children: "File"
+														}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenuTargeter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+															type: "button",
+															onClick: (event) => {
+																setHeaderMenuAnchor(null);
+																setFileMenuAnchor(null);
+																setViewMenuAnchor({
+																	type: "target",
+																	element: event.currentTarget,
+																	placement: "bottom-start"
+																});
+															},
+															className: "hover:bg-muted rounded-md px-2 py-1 text-xs font-semibold",
+															children: "View"
+														}) })]
+													}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+														className: "flex items-center gap-2",
+														children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+															type: "button",
+															onClick: handleFileCancel,
+															className: "border-border hover:bg-muted inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium",
+															children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(X$2, { className: "h-3.5 w-3.5" }), "Cancel"]
+														}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+															type: "button",
+															onClick: handleFileSave,
+															disabled: !activeSchemaDirty || saveSchemaFileMutation.isPending || !schemaCanEdit,
+															className: "bg-primary text-primary-foreground inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50",
+															children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Save, { className: "h-3.5 w-3.5" }), saveSchemaFileMutation.isPending ? "Saving…" : "Save"]
+														})]
+													})]
+												}),
+												/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileExplorerCodeEditor, {
+													file: activeFile,
+													value: schemaMode === "edit" ? activeSchemaDraft ?? activeFile.content ?? "" : activeFile.content ?? "",
+													readOnly: schemaMode !== "edit" || !schemaCanEdit,
+													onChange: schemaMode === "edit" ? handleFileChange : void 0,
+													lineWrapping: schemaEditorWrap,
+													editorMinHeight: "0px"
+												}),
+												schemaResolution?.source === "package" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+													className: "text-muted-foreground border-border/50 border-t px-3 py-2 text-xs",
+													children: "Package-provided schemas are read-only."
+												})
+											]
+										}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+											className: "text-muted-foreground flex h-full items-center justify-center",
+											children: "Select a file to view"
 										})
-									]
-								}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-									className: "text-muted-foreground flex h-full items-center justify-center",
-									children: "Select a file to view"
+									})
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenu, {
+									open: !!headerMenuAnchor,
+									items: headerMenuItems,
+									anchor: headerMenuAnchor,
+									boundaryElement: schemaMenuWrapperRef.current,
+									onClose: () => setHeaderMenuAnchor(null)
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenu, {
+									open: !!fileMenuAnchor,
+									items: fileMenuItems,
+									anchor: fileMenuAnchor,
+									boundaryElement: schemaMenuWrapperRef.current,
+									onClose: () => setFileMenuAnchor(null)
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenu, {
+									open: !!viewMenuAnchor,
+									items: viewMenuItems,
+									anchor: viewMenuAnchor,
+									boundaryElement: schemaMenuWrapperRef.current,
+									onClose: () => setViewMenuAnchor(null)
 								})
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenu, {
-								open: !!headerMenuAnchor,
-								items: headerMenuItems,
-								anchor: headerMenuAnchor,
-								boundaryElement: schemaMenuWrapperRef.current,
-								onClose: () => setHeaderMenuAnchor(null)
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenu, {
-								open: !!fileMenuAnchor,
-								items: fileMenuItems,
-								anchor: fileMenuAnchor,
-								boundaryElement: schemaMenuWrapperRef.current,
-								onClose: () => setFileMenuAnchor(null)
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenu, {
-								open: !!viewMenuAnchor,
-								items: viewMenuItems,
-								anchor: viewMenuAnchor,
-								boundaryElement: schemaMenuWrapperRef.current,
-								onClose: () => setViewMenuAnchor(null)
-							})
-						]
-					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-						className: "text-muted-foreground text-sm",
-						children: "Select a schema to view details."
-					})
-				]
-			})
-		]
+							]
+						}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "text-muted-foreground text-sm",
+							children: "Select a schema to view details."
+						})
+					]
+				})
+			]
+		})
 	});
 	const schemaTabs = (schemas ?? []).map((schema) => ({
 		id: `schema:${schema.name}`,
@@ -147605,79 +147768,101 @@ function Config() {
 		content: schemaTabContent
 	}));
 	const projectConfigTabContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
-		className: "space-y-4",
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
-			className: "border-border bg-card space-y-4 rounded-lg border p-4",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex flex-wrap items-center justify-between gap-2",
-				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
-						className: "text-sm font-semibold",
-						children: "OpenSpec Project Config"
-					}),
-					!isStatic && configYaml && !isConfigEditing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-						type: "button",
-						onClick: handleConfigEdit,
-						className: "border-border hover:bg-muted inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pen, { className: "h-3.5 w-3.5" }), "Edit"]
-					}),
-					isConfigEditing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-							type: "button",
-							onClick: handleConfigCancel,
-							className: "border-border hover:bg-muted inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium",
-							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(X$2, { className: "h-3.5 w-3.5" }), "Cancel"]
-						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+		"data-tab-scroll-root": "true",
+		className: "scrollbar-thin scrollbar-track-transparent min-h-0 flex-1 overflow-auto",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "space-y-4 pr-1",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				ref: setProjectConfigViewportNode,
+				className: "flex min-h-0 flex-col",
+				style: projectConfigViewportHeight != null ? { height: `${projectConfigViewportHeight}px` } : void 0,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+					className: "border-border bg-card flex min-h-0 flex-1 flex-col gap-4 overflow-hidden rounded-lg border p-4",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap items-center justify-between gap-2",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+								className: "text-sm font-semibold",
+								children: "OpenSpec Project Config"
+							}),
+							!isStatic && configYaml && !isConfigEditing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+								type: "button",
+								onClick: handleConfigEdit,
+								className: "border-border hover:bg-muted inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pen, { className: "h-3.5 w-3.5" }), "Edit"]
+							}),
+							isConfigEditing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+									type: "button",
+									onClick: handleConfigCancel,
+									className: "border-border hover:bg-muted inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(X$2, { className: "h-3.5 w-3.5" }), "Cancel"]
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+									type: "button",
+									onClick: () => saveConfigMutation.mutate(),
+									disabled: !configDirty || saveConfigMutation.isPending,
+									className: "bg-primary text-primary-foreground inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Save, { className: "h-3.5 w-3.5" }), saveConfigMutation.isPending ? "Saving…" : "Save"]
+								})]
+							})
+						]
+					}), configYaml || isConfigEditing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeEditor, {
+						value: configDraft,
+						onChange: (value) => {
+							setConfigDraft(value);
+							setConfigDirty(true);
+						},
+						readOnly: !isConfigEditing,
+						filename: "config.yaml",
+						className: "min-h-0 flex-1",
+						editorMinHeight: "0px"
+					}) : configLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "route-loading animate-pulse",
+						children: "Loading config…"
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "text-muted-foreground rounded-md border border-dashed p-4 text-sm",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+							className: "mb-3",
+							children: "openspec/config.yaml not found."
+						}), !isStatic && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
 							type: "button",
-							onClick: () => saveConfigMutation.mutate(),
-							disabled: !configDirty || saveConfigMutation.isPending,
-							className: "bg-primary text-primary-foreground inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50",
-							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Save, { className: "h-3.5 w-3.5" }), saveConfigMutation.isPending ? "Saving…" : "Save"]
+							onClick: handleConfigEdit,
+							className: "bg-primary text-primary-foreground inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium",
+							children: "Create config.yaml"
 						})]
-					})
-				]
-			}), configYaml || isConfigEditing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeEditor, {
-				value: configDraft,
-				onChange: (value) => {
-					setConfigDraft(value);
-					setConfigDirty(true);
-				},
-				readOnly: !isConfigEditing,
-				filename: "config.yaml"
-			}) : configLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "route-loading animate-pulse",
-				children: "Loading config…"
-			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "text-muted-foreground rounded-md border border-dashed p-4 text-sm",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-					className: "mb-3",
-					children: "openspec/config.yaml not found."
-				}), !isStatic && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: handleConfigEdit,
-					className: "bg-primary text-primary-foreground inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium",
-					children: "Create config.yaml"
-				})]
-			})]
+					})]
+				})
+			})
 		})
 	});
-	const globalConfigTabContent = isStatic ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
-		className: "space-y-3",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
-			className: "text-sm font-semibold",
-			children: "OpenSpec Global Config"
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			className: "text-muted-foreground rounded-md border border-dashed p-4 text-sm",
-			children: "Global config commands are unavailable in static export mode."
-		})]
+	const globalConfigTabContent = isStatic ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
+		"data-tab-scroll-root": "true",
+		className: "scrollbar-thin scrollbar-track-transparent flex min-h-0 flex-1 flex-col overflow-hidden",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+			className: "border-border bg-card flex min-h-0 flex-1 flex-col gap-4 overflow-hidden rounded-lg border p-4",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "flex flex-none items-center justify-between gap-2",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+					className: "text-sm font-semibold",
+					children: "OpenSpec Global Config"
+				})
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "text-muted-foreground min-h-0 flex-1 overflow-auto pr-1",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "rounded-md border border-dashed p-4 text-sm",
+					children: "Global config commands are unavailable in static export mode."
+				})
+			})]
+		})
 	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
-		className: "space-y-4",
+		"data-tab-scroll-root": "true",
+		className: "scrollbar-thin scrollbar-track-transparent flex min-h-0 flex-1 flex-col overflow-hidden",
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
-			className: "border-border bg-card space-y-4 rounded-lg border p-4",
+			className: "border-border bg-card flex min-h-0 flex-1 flex-col gap-4 overflow-hidden rounded-lg border p-4",
 			children: [
 				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "flex flex-wrap items-center justify-between gap-2",
+					className: "flex flex-none flex-wrap items-center justify-between gap-2",
 					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
 						className: "text-sm font-semibold",
 						children: "OpenSpec Global Config"
@@ -147707,7 +147892,7 @@ function Config() {
 					})]
 				}),
 				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "text-muted-foreground text-xs",
+					className: "text-muted-foreground flex-none text-xs",
 					children: [
 						"Reads from ",
 						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: "openspec config list --json" }),
@@ -147740,7 +147925,7 @@ function Config() {
 					className: "text-muted-foreground text-sm",
 					children: "Loading global config…"
 				}) : isRecordObject(globalConfigData) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "space-y-3",
+					className: "min-h-0 flex-1 space-y-3 overflow-auto pr-1",
 					children: [
 						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 							className: "grid gap-2 sm:grid-cols-2",
@@ -147806,7 +147991,7 @@ function Config() {
 					className: "text-muted-foreground text-sm",
 					children: "Global config unavailable."
 				}) : globalConfigTab === "editor" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "space-y-2",
+					className: "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden",
 					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeEditor, {
 						value: globalConfigDraft,
 						onChange: (value) => {
@@ -147817,7 +148002,8 @@ function Config() {
 						readOnly: saveGlobalConfigMutation.isPending,
 						filename: "openspec.global.config.json",
 						language: "json",
-						editorMinHeight: "260px"
+						className: "min-h-0 flex-1",
+						editorMinHeight: "0px"
 					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 						className: "flex items-center justify-end gap-2",
 						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
@@ -147839,9 +148025,9 @@ function Config() {
 						})]
 					})]
 				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "grid gap-4 xl:grid-cols-[minmax(18rem,0.9fr)_minmax(0,1.1fr)]",
+					className: "grid min-h-0 flex-1 gap-4 overflow-hidden xl:grid-cols-[minmax(18rem,0.9fr)_minmax(0,1.1fr)]",
 					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
-						className: "space-y-4",
+						className: "min-h-0 space-y-4 overflow-auto pr-1",
 						children: [
 							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 								className: "grid gap-2 sm:grid-cols-3 xl:grid-cols-1",
@@ -147952,7 +148138,7 @@ function Config() {
 							})
 						]
 					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
-						className: "space-y-3",
+						className: "space-y-3 overflow-auto pr-1",
 						children: [profileEditMode === "both" || profileEditMode === "workflows" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
 							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 								className: "text-muted-foreground text-xs",