@openspecui/web 3.10.0 → 3.11.0

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

@@ -43947,6 +43947,23 @@ var Copy = createLucideIcon("Copy", [["rect", {
 	d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
 	key: "zix9uf"
 }]]);
+var Download = createLucideIcon("Download", [
+	["path", {
+		d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
+		key: "ih7n3h"
+	}],
+	["polyline", {
+		points: "7 10 12 15 17 10",
+		key: "2ggqvy"
+	}],
+	["line", {
+		x1: "12",
+		x2: "12",
+		y1: "15",
+		y2: "3",
+		key: "1vk2je"
+	}]
+]);
 var EllipsisVertical = createLucideIcon("EllipsisVertical", [
 	["circle", {
 		cx: "12",
@@ -43967,6 +43984,24 @@ var EllipsisVertical = createLucideIcon("EllipsisVertical", [
 		key: "lyex9k"
 	}]
 ]);
+var Expand = createLucideIcon("Expand", [
+	["path", {
+		d: "m21 21-6-6m6 6v-4.8m0 4.8h-4.8",
+		key: "1c15vz"
+	}],
+	["path", {
+		d: "M3 16.2V21m0 0h4.8M3 21l6-6",
+		key: "1fsnz2"
+	}],
+	["path", {
+		d: "M21 7.8V3m0 0h-4.8M21 3l-6 6",
+		key: "hawz9i"
+	}],
+	["path", {
+		d: "M3 7.8V3m0 0h4.8M3 3l6 6",
+		key: "u9ee12"
+	}]
+]);
 var FileCode2 = createLucideIcon("FileCode2", [
 	["path", {
 		d: "M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4",
@@ -44333,6 +44368,24 @@ var Menu = createLucideIcon("Menu", [
 		key: "yk5zj1"
 	}]
 ]);
+var Minimize = createLucideIcon("Minimize", [
+	["path", {
+		d: "M8 3v3a2 2 0 0 1-2 2H3",
+		key: "hohbtr"
+	}],
+	["path", {
+		d: "M21 8h-3a2 2 0 0 1-2-2V3",
+		key: "5jw1f3"
+	}],
+	["path", {
+		d: "M3 16h3a2 2 0 0 1 2 2v3",
+		key: "198tvr"
+	}],
+	["path", {
+		d: "M16 21v-3a2 2 0 0 1 2-2h3",
+		key: "ph8mxp"
+	}]
+]);
 var Minus = createLucideIcon("Minus", [["path", {
 	d: "M5 12h14",
 	key: "1ays0h"
@@ -44484,6 +44537,40 @@ var Settings = createLucideIcon("Settings", [["path", {
 	r: "3",
 	key: "1v7zrd"
 }]]);
+var Share2 = createLucideIcon("Share2", [
+	["circle", {
+		cx: "18",
+		cy: "5",
+		r: "3",
+		key: "gq8acd"
+	}],
+	["circle", {
+		cx: "6",
+		cy: "12",
+		r: "3",
+		key: "w7nqdw"
+	}],
+	["circle", {
+		cx: "18",
+		cy: "19",
+		r: "3",
+		key: "1xt0gg"
+	}],
+	["line", {
+		x1: "8.59",
+		x2: "15.42",
+		y1: "13.51",
+		y2: "17.49",
+		key: "47mynk"
+	}],
+	["line", {
+		x1: "15.41",
+		x2: "8.59",
+		y1: "6.51",
+		y2: "10.49",
+		key: "1n3mei"
+	}]
+]);
 var ShieldCheck = createLucideIcon("ShieldCheck", [["path", {
 	d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z",
 	key: "oel41y"
@@ -44689,6 +44776,13 @@ var TriangleAlert = createLucideIcon("TriangleAlert", [
 		key: "p32p05"
 	}]
 ]);
+var Undo2 = createLucideIcon("Undo2", [["path", {
+	d: "M9 14 4 9l5-5",
+	key: "102s5s"
+}], ["path", {
+	d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11",
+	key: "f3b9sd"
+}]]);
 var Unlink2 = createLucideIcon("Unlink2", [["path", {
 	d: "M15 7h2a5 5 0 0 1 0 10h-2m-6 0H7A5 5 0 0 1 7 7h2",
 	key: "1re2ne"
@@ -96471,6 +96565,68 @@ function OpsxDetailStatePanel({ message, tone = "default" }) {
 	});
 }
 //#endregion
+//#region src/components/button.tsx
+var variantClassNames = {
+	primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+	secondary: "border-border bg-background text-foreground border hover:bg-muted",
+	ghost: "text-foreground hover:bg-muted",
+	destructive: "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500 dark:bg-red-600 dark:hover:bg-red-700"
+};
+var activityVariantClassNames = {
+	primary: "bg-primary/10 text-primary hover:bg-primary/10",
+	secondary: "border-primary/40 bg-primary/10 text-primary border hover:bg-primary/10",
+	ghost: "bg-primary/10 text-primary hover:bg-primary/10",
+	destructive: "bg-red-600/10 text-red-600 hover:bg-red-600/10 dark:text-red-400"
+};
+var sizeClassNames = {
+	sm: "gap-1.5 rounded-md px-3 py-1.5 text-xs",
+	md: "gap-2 rounded-md px-4 py-2 text-sm",
+	"icon-sm": "h-7 w-7 rounded-md p-0",
+	"icon-md": "h-9 w-9 rounded-md p-0"
+};
+var Button = (0, import_react.forwardRef)(function Button({ variant = "primary", size = "md", activity = false, disabled = false, type = "button", className, onClick, "aria-disabled": ariaDisabled, ...props }, ref) {
+	const handleClick = (event) => {
+		if (activity) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+		ref,
+		type,
+		disabled,
+		"aria-disabled": ariaDisabled ?? (activity ? true : void 0),
+		"data-activity": activity ? "true" : void 0,
+		onClick: handleClick,
+		className: cn$1("inline-flex shrink-0 items-center justify-center font-medium outline-none transition-colors", "focus-visible:ring-primary focus-visible:ring-1", disabled ? "cursor-not-allowed opacity-50" : activity ? "cursor-default" : "cursor-pointer", activity ? activityVariantClassNames[variant] : variantClassNames[variant], sizeClassNames[size], className),
+		...props
+	});
+});
+//#endregion
+//#region src/components/button-group.tsx
+/**
+* Compact segmented buttons with single-select behavior.
+*/
+function ButtonGroup({ value, options, onChange, className = "", tone = "default" }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		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";
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				disabled: option.disabled,
+				onClick: () => onChange(option.value),
+				"aria-pressed": active,
+				className: `inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${index > 0 ? tone === "terminal" ? "border-terminal-foreground/20 border-l" : "border-border border-l" : ""} ${stateClassName}`,
+				children: option.label
+			}, option.value);
+		})
+	});
+}
+//#endregion
 //#region src/lib/codemirror-markdown-preview.ts
 /**
 * CodeMirror 6 Markdown Live Preview Extension
@@ -113479,11 +113635,16 @@ ReactCodeMirror.displayName = "CodeMirror";
 * - Markdown 文件支持实时预览（隐藏语法标记）
 * - 移动端友好
 */
-/** 根据文件名推断语言类型 */
-function detectLanguage(filename) {
+function isMarkdownFilename(filename) {
+	if (!filename) return false;
+	const lower = filename.toLowerCase();
+	return lower.endsWith(".md") || lower.endsWith(".markdown") || lower.endsWith(".mdown") || lower.endsWith(".mkd");
+}
+/** 根据文件名推断常见语言类型 */
+function detectBuiltinLanguage(filename) {
 	if (!filename) return "plain";
 	const lower = filename.toLowerCase();
-	if (lower.endsWith(".md")) return "markdown";
+	if (isMarkdownFilename(lower)) return "markdown";
 	if (lower.endsWith(".ts") || lower.endsWith(".tsx")) return "typescript";
 	if (lower.endsWith(".js") || lower.endsWith(".jsx")) return "javascript";
 	if (lower.endsWith(".json")) return "json";
@@ -113491,7 +113652,7 @@ function detectLanguage(filename) {
 	return "plain";
 }
 /** 根据语言类型返回 CodeMirror 扩展 */
-function getLanguageExtensions(language, filename) {
+function getBuiltinLanguageExtensions(language, filename) {
 	switch (language) {
 		case "markdown": return [markdown({
 			base: markdownLanguage,
@@ -113507,6 +113668,10 @@ function getLanguageExtensions(language, filename) {
 		default: return [];
 	}
 }
+function matchFilenameLanguage(filename) {
+	if (!filename) return null;
+	return LanguageDescription.matchFilename(languages, filename);
+}
 function resolveBundleTheme(theme, isDarkMode) {
 	switch (theme) {
 		case "github": return isDarkMode ? githubDark : githubLight;
@@ -113530,13 +113695,53 @@ function resolveBundleTheme(theme, isDarkMode) {
 * // 可编辑的代码编辑器
 * <CodeEditor value={code} onChange={setCode} language="typescript" />
 */
-function CodeEditor({ value, onChange, readOnly = false, language, filename, lineNumbers = true, lineWrapping = true, fontSize = 13, className = "", style, placeholder, editorMinHeight = "240px" }) {
-	const resolvedLanguage = language ?? detectLanguage(filename);
+function CodeEditor({ value, onChange, onSaveShortcut, readOnly = false, language, filename, lineNumbers = true, lineWrapping = true, fontSize = 13, className = "", style, placeholder, editorMinHeight = "240px" }) {
 	const isDarkMode = useDarkMode();
 	const { data: config } = useConfigSubscription();
 	const codeEditorTheme = config?.codeEditor?.theme ?? "github";
+	const [filenameLanguageExtensions, setFilenameLanguageExtensions] = (0, import_react.useState)([]);
+	(0, import_react.useEffect)(() => {
+		let cancelled = false;
+		if (language) {
+			setFilenameLanguageExtensions([]);
+			return;
+		}
+		const builtinLanguage = detectBuiltinLanguage(filename);
+		if (builtinLanguage !== "plain") {
+			setFilenameLanguageExtensions(getBuiltinLanguageExtensions(builtinLanguage, filename));
+			return;
+		}
+		const matchedLanguage = matchFilenameLanguage(filename);
+		if (!matchedLanguage) {
+			setFilenameLanguageExtensions([]);
+			return;
+		}
+		if (matchedLanguage.support) {
+			setFilenameLanguageExtensions([matchedLanguage.support.extension]);
+			return;
+		}
+		setFilenameLanguageExtensions([]);
+		matchedLanguage.load().then((support) => {
+			if (cancelled) return;
+			setFilenameLanguageExtensions([support.extension]);
+		}).catch(() => {
+			if (cancelled) return;
+			setFilenameLanguageExtensions([]);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [language, filename]);
+	const languageExtensions = (0, import_react.useMemo)(() => {
+		if (!language) return filenameLanguageExtensions;
+		return getBuiltinLanguageExtensions(language, filename);
+	}, [
+		language,
+		filename,
+		filenameLanguageExtensions
+	]);
 	const extensions = (0, import_react.useMemo)(() => {
-		const exts = [EditorState.readOnly.of(readOnly), ...getLanguageExtensions(resolvedLanguage, filename)];
+		const exts = [EditorState.readOnly.of(readOnly), ...languageExtensions];
 		exts.push(resolveBundleTheme(codeEditorTheme, isDarkMode));
 		exts.push(EditorView.theme({
 			".cm-line": { lineHeight: "21px" },
@@ -113561,16 +113766,24 @@ function CodeEditor({ value, onChange, readOnly = false, language, filename, lin
 		exts.push(keymap.of([{
 			key: "Mod-a",
 			run: selectAll
+		}, {
+			key: "Mod-s",
+			preventDefault: true,
+			run: () => {
+				if (readOnly || !onSaveShortcut) return false;
+				onSaveShortcut();
+				return true;
+			}
 		}]));
 		if (lineWrapping) exts.push(EditorView.lineWrapping);
 		return exts;
 	}, [
-		resolvedLanguage,
-		filename,
+		languageExtensions,
 		readOnly,
 		lineWrapping,
 		codeEditorTheme,
-		isDarkMode
+		isDarkMode,
+		onSaveShortcut
 	]);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReactCodeMirror, {
 		value,
@@ -114154,7 +114367,7 @@ function FileExplorer({ entries, selectedPath, onSelect, breadcrumbRoot, headerL
 		})]
 	});
 }
-function FileExplorerCodeEditor({ file, value, readOnly = true, onChange, lineWrapping, editorMinHeight }) {
+function FileExplorerCodeEditor({ file, value, readOnly = true, onChange, onSaveShortcut, lineWrapping, editorMinHeight }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeEditor, {
 		value,
 		filename: file.path,
@@ -114162,209 +114375,11 @@ function FileExplorerCodeEditor({ file, value, readOnly = true, onChange, lineWr
 		lineWrapping,
 		className: "min-h-0 flex-1",
 		editorMinHeight,
-		onChange
+		onChange,
+		onSaveShortcut
 	}, 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, files: providedFiles }) {
-	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 (providedFiles) return [...providedFiles];
-		if (!files) return [];
-		return [...files];
-	}, [files, providedFiles]);
-	(0, import_react.useEffect)(() => {
-		if (!sortedEntries.length) {
-			setSelectedPath(null);
-			return;
-		}
-		if (!sortedEntries.find((entry) => entry.path === selectedPath && entry.type === "file")) setSelectedPath(sortedEntries.find((entry) => entry.type === "file")?.path ?? null);
-	}, [sortedEntries, selectedPath]);
-	if (!providedFiles && isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-		className: "border-border bg-muted/20 flex h-[400px] items-center justify-center rounded-md border",
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "text-muted-foreground h-6 w-6 animate-spin" })
-	});
-	if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		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)("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"
-					})
-				})
-			})
-		})
-	});
-}
-//#endregion
-//#region src/components/opsx/artifact-document-shell.tsx
-var statusConfig = {
-	done: {
-		label: "Done",
-		className: "text-emerald-500",
-		icon: CircleCheck
-	},
-	ready: {
-		label: "Ready",
-		className: "text-sky-500",
-		icon: Circle$1
-	},
-	blocked: {
-		label: "Blocked",
-		className: "text-amber-500",
-		icon: TriangleAlert
-	}
-};
-function OpsxArtifactStatusBadge({ status }) {
-	const config = statusConfig[status];
-	const StatusIcon = config.icon;
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-		className: `inline-flex shrink-0 items-center gap-1.5 text-xs font-medium ${config.className}`,
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusIcon, { className: "h-4 w-4" }), config.label]
-	});
-}
-function OpsxArtifactTabStatusIcon({ status }) {
-	const StatusIcon = statusConfig[status].icon;
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusIcon, { className: `h-3.5 w-3.5 ${statusConfig[status].className}` });
-}
-function OpsxArtifactDocumentShell({ id, path, status, missingDeps, meta, children }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
-		className: "border-border bg-muted/25 mb-5 rounded-md border px-4 py-3",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-			className: "flex flex-wrap items-start justify-between gap-3",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "min-w-0 space-y-1",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: "font-medium",
-					children: id
-				}), path ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: "text-muted-foreground break-all text-xs",
-					children: path
-				}) : null]
-			}), status ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OpsxArtifactStatusBadge, { status }) : meta]
-		}), status === "blocked" && missingDeps?.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-			className: "mt-3 flex items-start gap-2 rounded-md border border-amber-500/50 bg-amber-500/10 px-3 py-2 text-xs text-amber-700",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, { className: "h-4 w-4 shrink-0" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "font-medium",
-				children: "Blocked by missing dependencies"
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "mt-1",
-				children: missingDeps.join(", ")
-			})] })]
-		}) : null]
-	}), children] });
-}
-//#endregion
 //#region src/components/anchor-scroll.ts
 /**
 * Utilities for hash-anchor navigation inside nested scroll containers.
@@ -114425,46 +114440,6 @@ function navigateHashAnchor(anchorElement, hash) {
 	return true;
 }
 //#endregion
-//#region src/components/button.tsx
-var variantClassNames = {
-	primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-	secondary: "border-border bg-background text-foreground border hover:bg-muted",
-	ghost: "text-foreground hover:bg-muted",
-	destructive: "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500 dark:bg-red-600 dark:hover:bg-red-700"
-};
-var activityVariantClassNames = {
-	primary: "bg-primary/10 text-primary hover:bg-primary/10",
-	secondary: "border-primary/40 bg-primary/10 text-primary border hover:bg-primary/10",
-	ghost: "bg-primary/10 text-primary hover:bg-primary/10",
-	destructive: "bg-red-600/10 text-red-600 hover:bg-red-600/10 dark:text-red-400"
-};
-var sizeClassNames = {
-	sm: "gap-1.5 rounded-md px-3 py-1.5 text-xs",
-	md: "gap-2 rounded-md px-4 py-2 text-sm",
-	"icon-sm": "h-7 w-7 rounded-md p-0",
-	"icon-md": "h-9 w-9 rounded-md p-0"
-};
-var Button = (0, import_react.forwardRef)(function Button({ variant = "primary", size = "md", activity = false, disabled = false, type = "button", className, onClick, "aria-disabled": ariaDisabled, ...props }, ref) {
-	const handleClick = (event) => {
-		if (activity) {
-			event.preventDefault();
-			event.stopPropagation();
-			return;
-		}
-		onClick?.(event);
-	};
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-		ref,
-		type,
-		disabled,
-		"aria-disabled": ariaDisabled ?? (activity ? true : void 0),
-		"data-activity": activity ? "true" : void 0,
-		onClick: handleClick,
-		className: cn$1("inline-flex shrink-0 items-center justify-center font-medium outline-none transition-colors", "focus-visible:ring-primary focus-visible:ring-1", disabled ? "cursor-not-allowed opacity-50" : activity ? "cursor-default" : "cursor-pointer", activity ? activityVariantClassNames[variant] : variantClassNames[variant], sizeClassNames[size], className),
-		...props
-	});
-});
-//#endregion
 //#region src/lib/document-translation-session-state.ts
 var DOCUMENT_TRANSLATION_SESSION_STORAGE_KEY = "openspecui:document-translation:mode";
 var DEFAULT_ACTIVATION = "source";
@@ -150423,6 +150398,619 @@ var viewerStyles = String.raw`
   /* MarkdownViewer keeps layout hooks local; shared ToC geometry lives in index.css. */
 `;
 //#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/lib/file-preview.ts
+async function prepareEntityFilePreview(input) {
+	if (isStaticMode()) return null;
+	const preview = await (input.archived ? trpcClient.archive.prepareFilePreview.query({
+		id: input.changeId,
+		path: input.path
+	}) : trpcClient.change.prepareFilePreview.query({
+		id: input.changeId,
+		path: input.path
+	}));
+	const apiBaseUrl = getApiBaseUrl();
+	if (!apiBaseUrl) return preview;
+	const prefix = (path) => `${apiBaseUrl}${path}`;
+	return {
+		...preview,
+		resourcePathname: preview.resourcePathname ? prefix(preview.resourcePathname) : null,
+		entryPathname: prefix(preview.entryPathname),
+		urlPath: prefix(preview.urlPath)
+	};
+}
+async function writeEntityFile(input) {
+	if (input.archived) {
+		await trpcClient.archive.writeFile.mutate({
+			id: input.changeId,
+			path: input.path,
+			content: input.content
+		});
+		return;
+	}
+	await trpcClient.change.writeFile.mutate({
+		id: input.changeId,
+		path: input.path,
+		content: input.content
+	});
+}
+//#endregion
+//#region src/components/folder-editor-viewer.tsx
+function isFileEntry(file) {
+	return file?.type === "file";
+}
+function isTextLikeFile(file) {
+	return isFileEntry(file) && file.content !== void 0 && file.content !== null;
+}
+function normalizeExplorerFile(file) {
+	return {
+		...file,
+		content: file.content ?? void 0
+	};
+}
+function canPreviewInline(file) {
+	return isFileEntry(file) && file.previewKind === "markdown";
+}
+function canPreviewRemote(file) {
+	return isFileEntry(file) && [
+		"html",
+		"image",
+		"audio",
+		"video",
+		"pdf"
+	].includes(file.previewKind ?? "");
+}
+function canPreviewFile(file) {
+	return canPreviewInline(file) || canPreviewRemote(file);
+}
+function isPreviewOnlyFile(file) {
+	return isFileEntry(file) && [
+		"image",
+		"audio",
+		"video",
+		"pdf"
+	].includes(file.previewKind ?? "");
+}
+function resolveDefaultMode(file, inStaticMode) {
+	if (!file) return "read";
+	if (!inStaticMode && isPreviewOnlyFile(file)) return "preview";
+	return "read";
+}
+function clampPreviewHeight(viewportHeight) {
+	if (viewportHeight == null) return 480;
+	return Math.max(320, Math.min(viewportHeight - 112, 920));
+}
+function resolveRemotePreviewFrameStyle(frameHeight) {
+	if (frameHeight == null) return void 0;
+	return {
+		minHeight: "min(320px, 100%)",
+		height: "100%",
+		maxHeight: `${frameHeight}px`
+	};
+}
+function canSaveDraft(file, hasDirtyDraft, savingPath) {
+	return !!file && hasDirtyDraft && savingPath !== file.path;
+}
+function appendPreviewTheme(url, isDarkMode) {
+	const nextUrl = new URL(url, window.location.href);
+	nextUrl.searchParams.set("theme", isDarkMode ? "dark" : "light");
+	return nextUrl.toString();
+}
+function resolvePreviewFrameUrl(preview, isDarkMode) {
+	return preview.previewKind === "html" ? preview.urlPath : appendPreviewTheme(preview.urlPath, isDarkMode);
+}
+function triggerDownload(url, fileName) {
+	const anchor = document.createElement("a");
+	anchor.href = url;
+	anchor.download = fileName;
+	anchor.rel = "noreferrer noopener";
+	anchor.click();
+}
+async function sharePreview(input) {
+	if (navigator.share) {
+		await navigator.share({
+			title: input.title,
+			url: input.url
+		});
+		return true;
+	}
+	await navigator.clipboard.writeText(input.url);
+	return false;
+}
+function PreviewPane({ file, preview, loading, error, className = "", frameHeight, isDarkMode }) {
+	if (file.previewKind === "markdown") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: `min-h-0 h-full flex-1 overflow-hidden ${className}`,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownViewer, {
+			markdown: file.content ?? "",
+			path: file.path,
+			className: "h-full"
+		})
+	});
+	if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "text-muted-foreground flex h-full items-center justify-center gap-2 text-sm",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" }), "Preparing preview..."]
+	});
+	if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "text-destructive flex h-full items-center justify-center px-4 text-sm",
+		children: error
+	});
+	if (!preview) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "text-muted-foreground flex h-full items-center justify-center px-4 text-sm",
+		children: "Preview unavailable."
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: `bg-background min-h-0 h-full overflow-hidden ${className}`,
+		style: resolveRemotePreviewFrameStyle(frameHeight),
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("iframe", {
+			src: resolvePreviewFrameUrl(preview, isDarkMode),
+			title: `Preview ${file.path}`,
+			className: "block h-full w-full border-0"
+		}, `${resolvePreviewFrameUrl(preview, isDarkMode)}:${isDarkMode ? "dark" : "light"}`)
+	});
+}
+function FolderEditorViewer({ changeId, archived = false, files: providedFiles }) {
+	const inStaticMode = isStaticMode();
+	const isDarkMode = useDarkMode();
+	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 [mode, setMode] = (0, import_react.useState)("read");
+	const [draftContent, setDraftContent] = (0, import_react.useState)({});
+	const [savingPath, setSavingPath] = (0, import_react.useState)(null);
+	const [previewByPath, setPreviewByPath] = (0, import_react.useState)({});
+	const [previewLoadingPath, setPreviewLoadingPath] = (0, import_react.useState)(null);
+	const [previewErrorByPath, setPreviewErrorByPath] = (0, import_react.useState)({});
+	const [previewMaximized, setPreviewMaximized] = (0, import_react.useState)(false);
+	const [shareFeedback, setShareFeedback] = (0, import_react.useState)(null);
+	const viewportHeight = useViewportConstrainedHeight({
+		target: viewportNode,
+		enabled: viewportNode !== null
+	});
+	const sortedEntries = (0, import_react.useMemo)(() => {
+		if (providedFiles) return [...providedFiles];
+		if (!files) return [];
+		return [...files];
+	}, [files, providedFiles]);
+	const activeFile = (0, import_react.useMemo)(() => {
+		if (!selectedPath) return null;
+		const entry = sortedEntries.find((item) => item.path === selectedPath);
+		return isFileEntry(entry) ? entry : null;
+	}, [selectedPath, sortedEntries]);
+	const activeDraft = activeFile ? draftContent[activeFile.path] ?? activeFile.content ?? "" : "";
+	const editEnabled = !inStaticMode && isTextLikeFile(activeFile) && !isPreviewOnlyFile(activeFile);
+	const readEnabled = !isPreviewOnlyFile(activeFile);
+	const previewEnabled = !inStaticMode && canPreviewFile(activeFile);
+	const hasDirtyDraft = !!activeFile && isTextLikeFile(activeFile) && activeDraft !== (activeFile.content ?? "");
+	const remotePreviewHeight = clampPreviewHeight(viewportHeight);
+	(0, import_react.useEffect)(() => {
+		if (!sortedEntries.length) {
+			setSelectedPath(null);
+			return;
+		}
+		if (!sortedEntries.find((entry) => entry.path === selectedPath && entry.type === "file")) setSelectedPath(sortedEntries.find((entry) => entry.type === "file")?.path ?? null);
+	}, [sortedEntries, selectedPath]);
+	(0, import_react.useEffect)(() => {
+		const nextDefaultMode = resolveDefaultMode(activeFile, inStaticMode);
+		if (mode === "edit" && !editEnabled) {
+			setMode(nextDefaultMode);
+			return;
+		}
+		if (mode === "preview" && !previewEnabled) {
+			setMode(nextDefaultMode);
+			return;
+		}
+		if (mode === "read" && !readEnabled) setMode(nextDefaultMode);
+	}, [
+		activeFile,
+		editEnabled,
+		inStaticMode,
+		mode,
+		previewEnabled,
+		readEnabled
+	]);
+	(0, import_react.useEffect)(() => {
+		const nextDefaultMode = resolveDefaultMode(activeFile, inStaticMode);
+		setMode((currentMode) => {
+			if (currentMode === nextDefaultMode) return currentMode;
+			if (currentMode === "edit" && editEnabled) return currentMode;
+			if (currentMode === "preview" && previewEnabled) return currentMode;
+			if (currentMode === "read" && readEnabled) return currentMode;
+			return nextDefaultMode;
+		});
+	}, [
+		activeFile?.path,
+		editEnabled,
+		inStaticMode,
+		previewEnabled,
+		readEnabled
+	]);
+	(0, import_react.useEffect)(() => {
+		if (!canPreviewRemote(activeFile) || mode !== "preview") setPreviewMaximized(false);
+	}, [activeFile, mode]);
+	(0, import_react.useEffect)(() => {
+		if (shareFeedback === null) return;
+		const timer = window.setTimeout(() => {
+			setShareFeedback(null);
+		}, 1800);
+		return () => {
+			window.clearTimeout(timer);
+		};
+	}, [shareFeedback]);
+	(0, import_react.useEffect)(() => {
+		if (!activeFile || mode !== "preview" || !canPreviewRemote(activeFile)) return;
+		if (previewByPath[activeFile.path] !== void 0) return;
+		let cancelled = false;
+		setPreviewLoadingPath(activeFile.path);
+		setPreviewErrorByPath((current) => ({
+			...current,
+			[activeFile.path]: null
+		}));
+		prepareEntityFilePreview({
+			changeId,
+			archived,
+			path: activeFile.path
+		}).then((preview) => {
+			if (cancelled) return;
+			setPreviewByPath((current) => ({
+				...current,
+				[activeFile.path]: preview
+			}));
+		}).catch((cause) => {
+			if (cancelled) return;
+			setPreviewErrorByPath((current) => ({
+				...current,
+				[activeFile.path]: cause instanceof Error ? cause.message : String(cause)
+			}));
+			setPreviewByPath((current) => ({
+				...current,
+				[activeFile.path]: null
+			}));
+		}).finally(() => {
+			if (cancelled) return;
+			setPreviewLoadingPath((current) => current === activeFile.path ? null : current);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		activeFile,
+		archived,
+		changeId,
+		mode,
+		previewByPath
+	]);
+	if (!providedFiles && isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "bg-muted/20 flex h-[400px] items-center justify-center",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "text-muted-foreground h-6 w-6 animate-spin" })
+	});
+	if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "bg-destructive/10 text-destructive p-4 text-sm",
+		children: ["Failed to load files: ", error.message]
+	});
+	const preview = activeFile ? previewByPath[activeFile.path] ?? null : null;
+	const previewError = activeFile ? previewErrorByPath[activeFile.path] ?? null : null;
+	const previewDownloadUrl = activeFile && preview ? activeFile.previewKind === "html" ? preview.entryPathname : preview.resourcePathname : null;
+	const previewShareUrl = activeFile && preview && canPreviewRemote(activeFile) ? resolvePreviewFrameUrl(preview, isDarkMode) : null;
+	const saveActiveDraft = () => {
+		if (!isTextLikeFile(activeFile)) return;
+		if (!canSaveDraft(activeFile, hasDirtyDraft, savingPath)) return;
+		setSavingPath(activeFile.path);
+		writeEntityFile({
+			changeId,
+			archived,
+			path: activeFile.path,
+			content: activeDraft
+		}).finally(() => {
+			setSavingPath((current) => current === activeFile.path ? null : current);
+		});
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("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: (currentFile) => {
+						if (!isFileEntry(currentFile)) return /* @__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.jsxs)("div", {
+							className: "flex min-h-0 flex-1 flex-col",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "border-border/60 bg-muted/20 flex flex-wrap items-center justify-between gap-3 border-b px-3 py-2",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonGroup, {
+									value: mode,
+									onChange: setMode,
+									options: [
+										{
+											value: "read",
+											label: "Read",
+											disabled: !readEnabled
+										},
+										{
+											value: "edit",
+											label: "Edit",
+											disabled: !editEnabled
+										},
+										{
+											value: "preview",
+											label: "Preview",
+											disabled: !previewEnabled
+										}
+									]
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+									className: "flex items-center gap-2",
+									children: mode === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+										variant: "secondary",
+										size: "sm",
+										disabled: !hasDirtyDraft,
+										onClick: () => {
+											if (!isTextLikeFile(activeFile)) return;
+											setDraftContent((current) => ({
+												...current,
+												[activeFile.path]: activeFile.content ?? ""
+											}));
+										},
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Undo2, { className: "h-3.5 w-3.5" }), "Revert"]
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+										variant: "primary",
+										size: "sm",
+										disabled: !hasDirtyDraft || savingPath === currentFile.path,
+										onClick: saveActiveDraft,
+										children: [savingPath === currentFile.path ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Save, { className: "h-3.5 w-3.5" }), "Save"]
+									})] }) : mode === "preview" && canPreviewRemote(activeFile) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+											variant: "secondary",
+											size: "sm",
+											onClick: () => {
+												setPreviewByPath((current) => {
+													const next = { ...current };
+													delete next[currentFile.path];
+													return next;
+												});
+											},
+											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RefreshCw, { className: "h-3.5 w-3.5" }), "Refresh"]
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+											variant: "secondary",
+											size: "sm",
+											onClick: () => {
+												setPreviewMaximized((current) => !current);
+											},
+											children: [previewMaximized ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Minimize, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Expand, { className: "h-3.5 w-3.5" }), previewMaximized ? "Exit Maximize" : "Maximize"]
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+											variant: "secondary",
+											size: "sm",
+											disabled: !previewDownloadUrl,
+											onClick: () => {
+												if (!previewDownloadUrl) return;
+												triggerDownload(previewDownloadUrl, currentFile.path.split("/").pop() ?? "preview");
+											},
+											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Download, { className: "h-3.5 w-3.5" }), "Download"]
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+											variant: "secondary",
+											size: "sm",
+											disabled: !previewShareUrl,
+											onClick: () => {
+												if (!previewShareUrl) return;
+												sharePreview({
+													url: previewShareUrl,
+													title: currentFile.path
+												}).then((shared) => {
+													setShareFeedback(shared ? "shared" : "copied");
+												});
+											},
+											children: [shareFeedback === "shared" || shareFeedback === "copied" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Share2, { className: "h-3.5 w-3.5" }), shareFeedback === "shared" ? "Shared" : shareFeedback === "copied" ? "Copied" : "Share"]
+										})
+									] }) : null
+								})]
+							}), !readEnabled && !editEnabled && !previewEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: "text-muted-foreground flex min-h-0 flex-1 items-center justify-center px-4 text-sm",
+								children: "Preview for this file type is only available in live mode."
+							}) : mode === "preview" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: "min-h-0 flex-1 overflow-hidden",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewPane, {
+									file: currentFile,
+									preview,
+									loading: previewLoadingPath === currentFile.path,
+									error: previewError,
+									frameHeight: canPreviewRemote(currentFile) ? remotePreviewHeight : void 0,
+									isDarkMode
+								})
+							}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileExplorerCodeEditor, {
+								file: normalizeExplorerFile(currentFile),
+								value: mode === "edit" ? activeDraft : currentFile.content ?? "",
+								readOnly: mode !== "edit",
+								editorMinHeight: "0px",
+								onSaveShortcut: mode === "edit" ? saveActiveDraft : void 0,
+								onChange: mode === "edit" ? (value) => {
+									setDraftContent((current) => ({
+										...current,
+										[currentFile.path]: value
+									}));
+								} : void 0
+							})]
+						});
+					}
+				})
+			})
+		}), activeFile && canPreviewRemote(activeFile) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog, {
+			open: previewMaximized,
+			title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-sm font-medium",
+				children: activeFile.path
+			}),
+			onClose: () => setPreviewMaximized(false),
+			className: "max-w-6xl rounded-none border-0 shadow-none [--openspec-dialog-radius:0px]",
+			bodyClassName: "p-0",
+			contentClassName: "px-3 py-3",
+			maxHeight: "96vh",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "flex h-[80vh] min-h-[420px] max-h-[88vh] min-w-0 flex-col overflow-hidden",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewPane, {
+					file: activeFile,
+					preview,
+					loading: previewLoadingPath === activeFile.path,
+					error: previewError,
+					className: "rounded-none",
+					isDarkMode
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/opsx/artifact-document-shell.tsx
+var statusConfig = {
+	done: {
+		label: "Done",
+		className: "text-emerald-500",
+		icon: CircleCheck
+	},
+	ready: {
+		label: "Ready",
+		className: "text-sky-500",
+		icon: Circle$1
+	},
+	blocked: {
+		label: "Blocked",
+		className: "text-amber-500",
+		icon: TriangleAlert
+	}
+};
+function OpsxArtifactStatusBadge({ status }) {
+	const config = statusConfig[status];
+	const StatusIcon = config.icon;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+		className: `inline-flex shrink-0 items-center gap-1.5 text-xs font-medium ${config.className}`,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusIcon, { className: "h-4 w-4" }), config.label]
+	});
+}
+function OpsxArtifactTabStatusIcon({ status }) {
+	const StatusIcon = statusConfig[status].icon;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusIcon, { className: `h-3.5 w-3.5 ${statusConfig[status].className}` });
+}
+function OpsxArtifactDocumentShell({ id, path, status, missingDeps, meta, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+		className: "border-border bg-muted/25 mb-5 rounded-md border px-4 py-3",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex flex-wrap items-start justify-between gap-3",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 space-y-1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "font-medium",
+					children: id
+				}), path ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "text-muted-foreground break-all text-xs",
+					children: path
+				}) : null]
+			}), status ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OpsxArtifactStatusBadge, { status }) : meta]
+		}), status === "blocked" && missingDeps?.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "mt-3 flex items-start gap-2 rounded-md border border-amber-500/50 bg-amber-500/10 px-3 py-2 text-xs text-amber-700",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, { className: "h-4 w-4 shrink-0" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "font-medium",
+				children: "Blocked by missing dependencies"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "mt-1",
+				children: missingDeps.join(", ")
+			})] })]
+		}) : null]
+	}), children] });
+}
+//#endregion
 //#region src/components/opsx/opsx-markdown-files-viewer.tsx
 function getMarkdownFiles(files) {
 	return files.filter((file) => file.type === "file" && file.content !== void 0 && file.path.endsWith(".md"));
@@ -151134,28 +151722,6 @@ function ChangeView() {
 	});
 }
 //#endregion
-//#region src/components/button-group.tsx
-/**
-* Compact segmented buttons with single-select behavior.
-*/
-function ButtonGroup({ value, options, onChange, className = "", tone = "default" }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-		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";
-			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-				type: "button",
-				disabled: option.disabled,
-				onClick: () => onChange(option.value),
-				"aria-pressed": active,
-				className: `inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${index > 0 ? tone === "terminal" ? "border-terminal-foreground/20 border-l" : "border-border border-l" : ""} ${stateClassName}`,
-				children: option.label
-			}, option.value);
-		})
-	});
-}
-//#endregion
 //#region src/components/cli-terminal.tsx
 /**
 * Pure terminal renderer. Accepts ANSI-aware ASCII lines or raw ReactNode lines.