dsh-vscode-workbench 0.1.5 → 0.1.6

package/lib/client.js

@@ -115,6 +115,13 @@ window.__ModuleLoader__.load({
 		};
 		//#endregion
 		//#region src/client/api.ts
+		var ApiError = class extends Error {
+			code;
+			constructor(code, message) {
+				super(message);
+				this.code = code;
+			}
+		};
 		async function api(method, body, signal) {
 			const response = await fetch(`/dsh-vscode/api/${method}`, {
 				method: "POST",
@@ -123,7 +130,7 @@ window.__ModuleLoader__.load({
 				signal
 			});
 			const answer = await response.json();
-			if (!response.ok || !answer.ok) throw new Error(answer.error?.message ?? `request failed (${response.status})`);
+			if (!response.ok || !answer.ok) throw new ApiError(answer.error?.code ?? "request-failed", answer.error?.message ?? `request failed (${response.status})`);
 			return answer.value;
 		}
 		//#endregion
@@ -4468,6 +4475,32 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 		};
 		//#endregion
 		//#region src/client/Workbench.tsx
+		function unloadedTab(path) {
+			return {
+				path,
+				content: "",
+				draft: "",
+				revision: "",
+				size: 0,
+				binary: false,
+				tooLarge: false,
+				dirty: false,
+				loaded: false,
+				preview: /\.md$/i.test(path)
+			};
+		}
+		/** Restore tab headers without reading their file contents. */
+		function restoreTabPaths(paths) {
+			return [...new Set(paths)].map(unloadedTab);
+		}
+		/** Return whether file changes require reloading one visible directory. */
+		function directoryAffected(directory, changedPaths) {
+			return changedPaths.some((changed) => {
+				const normalized = changed.replace(/\\/g, "/");
+				const parent = normalized.includes("/") ? normalized.slice(0, normalized.lastIndexOf("/")) : "";
+				return normalized === directory || parent === directory;
+			});
+		}
 		/** Return the basename shown in a tab while preserving its full internal path. */
 		function tabLabel(tab) {
 			const path = tab.title ?? tab.diffSourcePath ?? tab.path.replace(/^diff:/, "");
@@ -4497,7 +4530,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 			}, []);
 			return dark;
 		}
-		function Tree({ sessionId, path, depth, expanded, selected, selectedDirectory, statuses, onToggle, onSelectDirectory, onOpen, onChange, onUpload }) {
+		function Tree({ sessionId, path, depth, expanded, selected, selectedDirectory, statuses, onToggle, onSelectDirectory, onOpen, onChange, onUpload, creating, onCreatingChange, onCreatingCancel, onCreatingSubmit }) {
 			const [rows, setRows] = (0, react.useState)([]);
 			const [error, setError] = (0, react.useState)();
 			const [dropTarget, setDropTarget] = (0, react.useState)(false);
@@ -4512,7 +4545,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 			}, [sessionId, path]);
 			(0, react.useEffect)(load, [load]);
 			(0, react.useEffect)(() => {
-				const handler = () => load();
+				const handler = (event) => {
+					const paths = event.detail;
+					if (paths === void 0 || directoryAffected(path, paths)) load();
+				};
 				window.addEventListener("dvw-files-changed", handler);
 				return () => window.removeEventListener("dvw-files-changed", handler);
 			}, [load]);
@@ -4579,6 +4615,41 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 					className: "dvw-error",
 					children: error
 				}),
+				creating?.directory === path && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dvw-tree-row dvw-tree-create-row",
+					style: { paddingLeft: 6 + depth * 13 },
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dvw-chevron" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							name: creating.kind === "directory" ? "folder" : "new-file",
+							className: `dvw-file-icon ${creating.kind === "directory" ? "folder" : ""}`
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							className: "dvw-tree-create-input",
+							value: creating.value,
+							autoFocus: true,
+							"aria-label": creating.kind === "directory" ? "新建文件夹名称" : "新建文件名称",
+							"aria-invalid": creating.error !== void 0,
+							placeholder: creating.kind === "directory" ? "文件夹名称" : "文件名称",
+							onChange: (event) => onCreatingChange(event.target.value),
+							onKeyDown: (event) => {
+								if (event.key === "Enter") {
+									event.preventDefault();
+									onCreatingSubmit();
+								}
+								if (event.key === "Escape") {
+									event.preventDefault();
+									onCreatingCancel();
+								}
+							},
+							onBlur: onCreatingCancel
+						})
+					]
+				}), creating.error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "dvw-tree-create-error",
+					style: { paddingLeft: 42 + depth * 13 },
+					children: creating.error
+				})] }),
 				rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "dvw-tree-row",
 					"data-dvw-upload-directory": row.kind === "directory" ? row.path : void 0,
@@ -4656,7 +4727,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 					onSelectDirectory,
 					onOpen,
 					onChange,
-					onUpload
+					onUpload,
+					creating,
+					onCreatingChange,
+					onCreatingCancel,
+					onCreatingSubmit
 				})] }, row.path)),
 				context && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "dvw-context-menu",
@@ -4732,6 +4807,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 			const [statuses, setStatuses] = (0, react.useState)(/* @__PURE__ */ new Map());
 			const [dropTarget, setDropTarget] = (0, react.useState)(false);
 			const [selectedDirectory, setSelectedDirectory] = (0, react.useState)("");
+			const [creating, setCreating] = (0, react.useState)();
 			const picker = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
 				if (props.cwd) try {
@@ -4753,19 +4829,42 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 				window.addEventListener("dvw-files-changed", handler);
 				return () => window.removeEventListener("dvw-files-changed", handler);
 			}, [refreshStatus, refreshStatusDebounced]);
-			const create = async (kind) => {
-				const path = prompt(kind === "file" ? "新文件路径" : "新目录路径");
-				if (!path) return;
+			const startCreating = (kind) => {
+				const directory = selectedDirectory;
+				if (directory) setExpanded((current) => new Set(current).add(directory));
+				setCreating({
+					kind,
+					directory,
+					value: ""
+				});
+			};
+			const submitCreating = async () => {
+				if (creating === void 0) return;
+				const value = creating.value.trim();
+				if (value === "") {
+					setCreating((current) => current && {
+						...current,
+						error: "请输入名称"
+					});
+					return;
+				}
+				const path = createdEntryPath(creating.directory, value);
 				try {
 					await api("fs.create", {
 						sessionId: props.sessionId,
 						path,
-						kind
+						kind: creating.kind
 					});
+					const created = path;
+					setCreating(void 0);
+					setSelectedDirectory(creating.kind === "directory" ? created : creating.directory);
 					setRevision((x) => x + 1);
 					window.dispatchEvent(new Event("dvw-files-changed"));
 				} catch (error) {
-					alert(String(error));
+					setCreating((current) => current && {
+						...current,
+						error: error instanceof Error ? error.message : String(error)
+					});
 				}
 			};
 			const upload = (0, react.useCallback)(async (directory, files) => {
@@ -4876,13 +4975,13 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							className: "dvw-icon",
 							title: "新建文件",
-							onClick: () => void create("file"),
+							onClick: () => startCreating("file"),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "new-file" })
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							className: "dvw-icon",
-							title: "新建目录",
-							onClick: () => void create("directory"),
+							title: "新建文件夹",
+							onClick: () => startCreating("directory"),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "new-folder" })
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -4920,7 +5019,15 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 					onSelectDirectory: setSelectedDirectory,
 					onOpen: props.onOpen,
 					onChange: () => setRevision((x) => x + 1),
-					onUpload: (directory, files) => void upload(directory, files)
+					onUpload: (directory, files) => void upload(directory, files),
+					creating,
+					onCreatingChange: (value) => setCreating((current) => current && {
+						...current,
+						value,
+						error: void 0
+					}),
+					onCreatingCancel: () => setCreating(void 0),
+					onCreatingSubmit: () => void submitCreating()
 				})
 			}, revision)] });
 		}
@@ -4928,6 +5035,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 		function uploadDestination(selectedDirectory) {
 			return selectedDirectory ?? "";
 		}
+		/** Join an inline-created entry name to the currently selected Explorer directory. */
+		function createdEntryPath(directory, name) {
+			return directory ? `${directory}/${name}` : name;
+		}
 		/** Replace the final path component while preserving its workspace-relative directory. */
 		function renamedPath(path, name) {
 			return [...path.split("/").slice(0, -1), name].filter(Boolean).join("/");
@@ -5329,7 +5440,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 					setStatus(nextStatus);
 					setCommits(nextCommits);
 					setError(void 0);
-				}).catch((error) => setError(String(error)));
+				}).catch((error) => {
+					setStatus(void 0);
+					setCommits([]);
+					setError(error instanceof ApiError && error.code === "not-repository" ? void 0 : String(error));
+				});
 			}, [props.sessionId]);
 			const refreshDebounced = useDebouncedCallback(refresh, 500);
 			(0, react.useEffect)(refresh, [refresh]);
@@ -5598,6 +5713,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 			const tabsRef = (0, react.useRef)(tabs);
 			tabsRef.current = tabs;
 			const workspaceRequests = (0, react.useRef)(new WorkspaceRequestScope());
+			const loadingTabs = (0, react.useRef)(/* @__PURE__ */ new Set());
 			const dshDark = useDshDarkTheme();
 			const [theme, setTheme] = (0, react.useState)(() => {
 				const saved = localStorage.getItem("dvw:theme");
@@ -5620,61 +5736,24 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 				window.addEventListener("keydown", onKey, true);
 				return () => window.removeEventListener("keydown", onKey, true);
 			}, [snapshot.visible]);
-			const openForWorkspace = async (targetSessionId, epoch, path, line, column) => {
-				if (!workspaceRequests.current.isCurrent(epoch)) return;
-				if (tabsRef.current.find((tab) => tab.path === path)) {
-					setActive(path);
-					setTabs((rows) => rows.map((tab) => tab.path === path ? {
-						...tab,
-						line,
-						column
-					} : tab));
-					return;
-				}
-				if (/\.(?:avif|bmp|gif|ico|jpe?g|png|svg|webp)$/i.test(path)) {
-					const imageUrl = `/dsh-vscode/file?sessionId=${encodeURIComponent(targetSessionId)}&path=${encodeURIComponent(path)}`;
-					if (!workspaceRequests.current.isCurrent(epoch)) return;
-					setTabs((rows) => workspaceRequests.current.isCurrent(epoch) ? [...rows.filter((tab) => tab.path !== path), {
-						path,
-						content: "",
-						draft: "",
-						revision: "",
-						size: 0,
-						binary: false,
-						tooLarge: false,
-						dirty: false,
-						imageUrl
-					}] : rows);
-					setActive(path);
-					return;
-				}
-				try {
-					const doc = await api("fs.read", {
-						sessionId: targetSessionId,
-						path
-					});
-					if (!workspaceRequests.current.isCurrent(epoch)) return;
-					if (doc.binary || doc.tooLarge) {
-						setError(doc.binary ? "二进制文件不能在文本编辑器中打开" : `文件超过 5 MiB：${path}`);
-						return;
-					}
-					setTabs((rows) => workspaceRequests.current.isCurrent(epoch) ? [...rows.filter((tab) => tab.path !== path), {
-						...doc,
-						draft: doc.content,
-						dirty: false,
-						line,
-						column,
-						preview: /\.md$/i.test(path)
-					}] : rows);
-					setActive(path);
-				} catch (error) {
-					if (workspaceRequests.current.isCurrent(epoch)) setError(String(error));
-				}
+			const openForWorkspace = (path, line, column) => {
+				if (tabsRef.current.find((tab) => tab.path === path)) setTabs((rows) => rows.map((tab) => tab.path === path ? {
+					...tab,
+					line,
+					column
+				} : tab));
+				else setTabs((rows) => [...rows, {
+					...unloadedTab(path),
+					line,
+					column
+				}]);
+				setActive(path);
 			};
 			(0, react.useEffect)(() => {
 				if (!snapshot.visible || sessionId === void 0) return;
 				const epoch = workspaceRequests.current.begin();
 				const cleared = resetWorkspaceDocuments();
+				loadingTabs.current.clear();
 				setWorkspace(void 0);
 				setTabs(cleared.tabs);
 				tabsRef.current = cleared.tabs;
@@ -5690,13 +5769,16 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 						if (parsed.view) service.show(parsed.view);
 						if (typeof parsed.panelHeight === "number") setPanelHeight(parsed.panelHeight);
 						if (typeof parsed.sideWidth === "number") setSideWidth(Math.max(210, Math.min(640, Math.round(parsed.sideWidth))));
-						for (const path of parsed.paths ?? []) openForWorkspace(sessionId, epoch, path);
+						const restored = restoreTabPaths(parsed.paths ?? []);
+						setTabs(restored);
+						setActive(restored.some((tab) => tab.path === parsed.active) ? parsed.active : restored.at(-1)?.path);
 					} catch {}
 				}).catch((error) => {
 					if (!controller.signal.aborted && workspaceRequests.current.isCurrent(epoch)) setError(String(error));
 				});
 				return () => {
 					controller.abort();
+					loadingTabs.current.clear();
 					workspaceRequests.current.invalidate(epoch);
 				};
 			}, [snapshot.visible, sessionId]);
@@ -5704,6 +5786,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 				if (workspace) localStorage.setItem(`dvw:${workspace.cwd}`, JSON.stringify({
 					view: snapshot.view,
 					paths: tabs.filter((t) => !t.path.startsWith("diff:")).map((t) => t.path),
+					active,
 					panelHeight,
 					sideWidth
 				}));
@@ -5711,6 +5794,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 				workspace,
 				snapshot.view,
 				tabs,
+				active,
 				panelHeight,
 				sideWidth
 			]);
@@ -5718,8 +5802,12 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 				if (!snapshot.visible || sessionId === void 0) return;
 				const protocol = location.protocol === "https:" ? "wss" : "ws";
 				const ws = new WebSocket(`${protocol}://${location.host}/dsh-vscode/ws/files?sessionId=${encodeURIComponent(sessionId)}`);
-				ws.onmessage = () => {
-					window.dispatchEvent(new Event("dvw-files-changed"));
+				ws.onmessage = (event) => {
+					let paths = [];
+					try {
+						paths = JSON.parse(String(event.data)).paths ?? [];
+					} catch {}
+					window.dispatchEvent(new CustomEvent("dvw-files-changed", { detail: paths }));
 					setTabs((current) => current.map((tab) => tab.dirty ? {
 						...tab,
 						external: true
@@ -5727,9 +5815,49 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 				};
 				return () => ws.close();
 			}, [snapshot.visible, sessionId]);
-			const open = async (path, line, column) => {
-				if (sessionId === void 0) return;
-				await openForWorkspace(sessionId, workspaceRequests.current.current(), path, line, column);
+			(0, react.useEffect)(() => {
+				if (sessionId === void 0 || active === void 0) return;
+				const tab = tabsRef.current.find((row) => row.path === active);
+				if (tab === void 0 || tab.loaded !== false || loadingTabs.current.has(active)) return;
+				const epoch = workspaceRequests.current.current();
+				loadingTabs.current.add(active);
+				if (/\.(?:avif|bmp|gif|ico|jpe?g|png|svg|webp)$/i.test(active)) {
+					const imageUrl = `/dsh-vscode/file?sessionId=${encodeURIComponent(sessionId)}&path=${encodeURIComponent(active)}`;
+					setTabs((rows) => rows.map((row) => row.path === active ? {
+						...row,
+						loaded: true,
+						imageUrl
+					} : row));
+					loadingTabs.current.delete(active);
+					return;
+				}
+				api("fs.read", {
+					sessionId,
+					path: active
+				}).then((doc) => {
+					if (!workspaceRequests.current.isCurrent(epoch)) return;
+					if (doc.binary || doc.tooLarge) {
+						setTabs((rows) => rows.filter((row) => row.path !== active));
+						setActive((current) => current === active ? void 0 : current);
+						setError(doc.binary ? "二进制文件不能在文本编辑器中打开" : `文件超过 5 MiB：${active}`);
+						return;
+					}
+					setTabs((rows) => rows.map((row) => row.path === active ? {
+						...row,
+						...doc,
+						draft: doc.content,
+						loaded: true
+					} : row));
+				}).catch((error) => {
+					if (workspaceRequests.current.isCurrent(epoch)) setError(String(error));
+				}).finally(() => loadingTabs.current.delete(active));
+			}, [
+				active,
+				sessionId,
+				tabs
+			]);
+			const open = (path, line, column) => {
+				if (sessionId !== void 0) openForWorkspace(path, line, column);
 			};
 			(0, react.useEffect)(() => {
 				const listener = (event) => void open(event.detail);
@@ -6313,7 +6441,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 body[data-ds-dark-theme] .dvw-overlay,.dvw-overlay[data-dvw-theme=dark]{color-scheme:dark}
 .dvw-overlay[data-dvw-theme=dark]{--dvw-base:#151517;--dvw-surface-1:#232324;--dvw-surface-2:#2c2c2e;--dvw-surface-3:#353638;--dvw-text:#f9fafb;--dvw-text-2:#cfd3d6;--dvw-text-3:#adb2b8;--dvw-border:#ffffff1f;--dvw-border-soft:#ffffff29;--dvw-hover:#ffffff14;--dvw-active:#ffffff24;--dvw-accent:#679efe;--dvw-error:#f25a5a;--dvw-success:#22c55e;--dvw-warn:#f59e0b}
 .dvw-overlay[data-dvw-theme=light]{--dvw-base:#fff;--dvw-surface-1:#fff;--dvw-surface-2:#fff;--dvw-surface-3:#fff;--dvw-text:#0f1115;--dvw-text-2:#61666b;--dvw-text-3:#81858c;--dvw-border:#0000001a;--dvw-border-soft:#0000001f;--dvw-hover:#2631480f;--dvw-active:#2631481a;--dvw-accent:#4176e6;--dvw-error:#ec1313;--dvw-success:#22c55e;--dvw-warn:#f59e0b;color-scheme:light}
-.dvw-overlay *{box-sizing:border-box}.dvw-activity{grid-row:1/3;background:var(--dvw-base);border-right:1px solid var(--dvw-border-soft);display:flex;flex-direction:column;align-items:center}.dvw-act{width:48px;height:48px;border:0;border-left:2px solid transparent;background:transparent;color:var(--dvw-text-3);font-size:22px;cursor:pointer}.dvw-act:hover,.dvw-act[data-active=true]{color:var(--dvw-text)}.dvw-act[data-active=true]{border-left-color:var(--dvw-accent)}.dvw-act.dsh{margin-top:auto}.dvw-side{grid-column:2;grid-row:1/3;min-width:0;width:100%;background:var(--dvw-surface-1);border-right:1px solid var(--dvw-border);display:flex;flex-direction:column}.dvw-side-resizer{grid-column:2;grid-row:1/3;justify-self:end;width:7px;height:100%;z-index:4;cursor:ew-resize;transform:translateX(3px);touch-action:none}.dvw-side-resizer:hover,.dvw-side-resizer:active{background:var(--dvw-accent)}.dvw-side-head{height:36px;display:flex;align-items:center;padding:0 12px;text-transform:uppercase;font-size:11px;letter-spacing:.4px}.dvw-toolbar{margin-left:auto;display:flex;gap:2px}.dvw-icon{border:0;background:transparent;color:var(--dvw-text-2);border-radius:4px;min-width:24px;height:24px;display:inline-grid;place-items:center;cursor:pointer}.dvw-icon:hover{background:var(--dvw-hover);color:var(--dvw-text)}.dvw-icon:disabled{opacity:.45;cursor:default}.dvw-file-picker{display:none}.dvw-tree,.dvw-results,.dvw-git{overflow:auto;flex:1}.dvw-tree[data-drop-target=true]{outline:1px dashed var(--dvw-accent);outline-offset:-3px}.dvw-tree-row{display:flex;align-items:center;height:24px;padding-right:6px;cursor:pointer;white-space:nowrap}.dvw-tree-row:hover{background:var(--dvw-hover)}.dvw-tree-row[data-selected=true],.dvw-tree-row[data-drop-target=true]{background:var(--dvw-active)}.dvw-chevron{width:16px;text-align:center;color:var(--dvw-text-3)}.dvw-file-icon{width:18px;color:var(--dvw-text-2)}.dvw-file-icon.folder{color:var(--dvw-accent)}.dvw-tree-name{overflow:hidden;text-overflow:ellipsis}.dvw-tree-rename{min-width:0;flex:1;height:20px;border:1px solid var(--dvw-accent);background:var(--dvw-surface-1);color:var(--dvw-text);font:inherit;outline:0}.dvw-tree-status{margin-left:auto;padding-left:6px;font-size:11px;font-weight:600;color:var(--dvw-warn)}.dvw-tree-status[data-status=M]{color:var(--dvw-warn)}.dvw-tree-status[data-status=A]{color:var(--dvw-success)}.dvw-tree-status[data-status=D]{color:var(--dvw-error)}.dvw-context-menu{position:fixed;z-index:40;min-width:148px;padding:4px;border:1px solid var(--dvw-border);border-radius:5px;background:var(--dvw-surface-3);box-shadow:0 6px 20px rgba(0,0,0,.3)}.dvw-context-menu button{width:100%;height:28px;border:0;border-radius:3px;background:transparent;color:var(--dvw-text);display:flex;align-items:center;gap:8px;padding:0 8px;text-align:left;font:inherit;cursor:pointer}.dvw-context-menu button:hover{background:var(--dvw-hover)}.dvw-context-menu .dvw-context-delete{color:var(--dvw-error)}
+.dvw-overlay *{box-sizing:border-box}.dvw-activity{grid-row:1/3;background:var(--dvw-base);border-right:1px solid var(--dvw-border-soft);display:flex;flex-direction:column;align-items:center}.dvw-act{width:48px;height:48px;border:0;border-left:2px solid transparent;background:transparent;color:var(--dvw-text-3);font-size:22px;cursor:pointer}.dvw-act:hover,.dvw-act[data-active=true]{color:var(--dvw-text)}.dvw-act[data-active=true]{border-left-color:var(--dvw-accent)}.dvw-act.dsh{margin-top:auto}.dvw-side{grid-column:2;grid-row:1/3;min-width:0;width:100%;background:var(--dvw-surface-1);border-right:1px solid var(--dvw-border);display:flex;flex-direction:column}.dvw-side-resizer{grid-column:2;grid-row:1/3;justify-self:end;width:7px;height:100%;z-index:4;cursor:ew-resize;transform:translateX(3px);touch-action:none}.dvw-side-resizer:hover,.dvw-side-resizer:active{background:var(--dvw-accent)}.dvw-side-head{height:36px;display:flex;align-items:center;padding:0 12px;text-transform:uppercase;font-size:11px;letter-spacing:.4px}.dvw-toolbar{margin-left:auto;display:flex;gap:2px}.dvw-icon{border:0;background:transparent;color:var(--dvw-text-2);border-radius:4px;min-width:24px;height:24px;display:inline-grid;place-items:center;cursor:pointer}.dvw-icon:hover{background:var(--dvw-hover);color:var(--dvw-text)}.dvw-icon:disabled{opacity:.45;cursor:default}.dvw-file-picker{display:none}.dvw-tree,.dvw-results,.dvw-git{overflow:auto;flex:1}.dvw-tree[data-drop-target=true]{outline:1px dashed var(--dvw-accent);outline-offset:-3px}.dvw-tree-row{display:flex;align-items:center;height:24px;padding-right:6px;cursor:pointer;white-space:nowrap}.dvw-tree-row:hover{background:var(--dvw-hover)}.dvw-tree-row[data-selected=true],.dvw-tree-row[data-drop-target=true]{background:var(--dvw-active)}.dvw-chevron{width:16px;flex:none;text-align:center;color:var(--dvw-text-3)}.dvw-file-icon{width:18px;flex:none;color:var(--dvw-text-2)}.dvw-file-icon.folder{color:var(--dvw-accent)}.dvw-tree-name{overflow:hidden;text-overflow:ellipsis}.dvw-tree-rename,.dvw-tree-create-input{min-width:0;flex:1;height:20px;border:1px solid var(--dvw-accent);border-radius:0;background:var(--dvw-surface-1);color:var(--dvw-text);padding:0 3px;font:inherit;letter-spacing:0;outline:0}.dvw-tree-create-row{cursor:text}.dvw-tree-create-row:hover{background:transparent}.dvw-tree-create-input::placeholder{color:var(--dvw-text-3)}.dvw-tree-create-input[aria-invalid=true]{border-color:var(--dvw-error)}.dvw-tree-create-error{min-height:20px;padding-top:2px;padding-right:6px;padding-bottom:3px;color:var(--dvw-error);font-size:11px;line-height:15px;white-space:normal;overflow-wrap:anywhere}.dvw-tree-status{margin-left:auto;padding-left:6px;font-size:11px;font-weight:600;color:var(--dvw-warn)}.dvw-tree-status[data-status=M]{color:var(--dvw-warn)}.dvw-tree-status[data-status=A]{color:var(--dvw-success)}.dvw-tree-status[data-status=D]{color:var(--dvw-error)}.dvw-context-menu{position:fixed;z-index:40;min-width:148px;padding:4px;border:1px solid var(--dvw-border);border-radius:5px;background:var(--dvw-surface-3);box-shadow:0 6px 20px rgba(0,0,0,.3)}.dvw-context-menu button{width:100%;height:28px;border:0;border-radius:3px;background:transparent;color:var(--dvw-text);display:flex;align-items:center;gap:8px;padding:0 8px;text-align:left;font:inherit;cursor:pointer}.dvw-context-menu button:hover{background:var(--dvw-hover)}.dvw-context-menu .dvw-context-delete{color:var(--dvw-error)}
 .dvw-main{grid-column:3;grid-row:1;display:flex;min-width:0;min-height:0;flex-direction:column;background:var(--dvw-surface-1)}.dvw-tabs{height:36px;background:var(--dvw-base);display:flex;overflow-x:auto}.dvw-tab{height:36px;min-width:110px;max-width:260px;border:0;border-right:1px solid var(--dvw-border-soft);background:var(--dvw-base);color:var(--dvw-text-2);padding:0 8px 0 12px;display:flex;align-items:center;gap:8px;cursor:pointer}.dvw-tab[data-active=true]{background:var(--dvw-surface-1);color:var(--dvw-text);border-top:1px solid var(--dvw-accent)}.dvw-tab-name{overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left}.dvw-editor{position:relative;flex:1;min-height:0}.dvw-editor-toolbar{position:absolute;z-index:3;top:0;right:0;left:0;height:36px;display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:0 10px;border-bottom:1px solid var(--dvw-border-soft);background:var(--dvw-surface-1)}.dvw-editor-body{position:absolute;inset:0;min-height:0}.dvw-editor-body[data-toolbar=true]{top:36px}.dvw-mode-button{height:27px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--dvw-text-2);cursor:pointer}.dvw-mode-button:hover{background:var(--dvw-hover)}.dvw-mode-button[data-active=true]{border-color:var(--dvw-border);background:var(--dvw-active);color:var(--dvw-text)}.dvw-empty{height:100%;display:grid;place-items:center;color:var(--dvw-text-3);text-align:center}.dvw-empty strong{font-size:24px;color:var(--dvw-text-2)}.dvw-message{padding:12px;color:var(--dvw-warn)}
 .dvw-bottom{grid-column:3;grid-row:2;height:260px;min-height:120px;border-top:1px solid var(--dvw-border);background:var(--dvw-base);display:flex;flex-direction:column}.dvw-bottom-head{height:35px;display:flex;align-items:center;gap:14px;padding:0 12px}.dvw-bottom-title{border:0;border-bottom:1px solid var(--dvw-text);background:transparent;color:var(--dvw-text);height:35px}.dvw-bottom-body{flex:1;min-height:0}.dvw-status{grid-column:1/4;grid-row:3;background:var(--dvw-accent);color:#fff;display:flex;align-items:center;padding:0 8px;gap:18px;font-size:12px}.dvw-theme-control{position:relative;margin-left:auto}.dvw-theme-trigger{height:22px;min-width:112px;display:flex;align-items:center;gap:7px;padding:0 8px;border:0;border-radius:5px;background:color-mix(in srgb,#000 17%,transparent);color:#fff;cursor:pointer}.dvw-theme-trigger:hover{background:color-mix(in srgb,#000 27%,transparent)}.dvw-theme-orb{width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:linear-gradient(90deg,#17181c 50%,#fff 50%)}.dvw-theme-orb.dark{background:#17181c}.dvw-theme-orb.light{background:#fff}.dvw-theme-menu{position:absolute;right:0;bottom:29px;width:224px;padding:6px;border:1px solid var(--dvw-border);border-radius:10px;background:var(--dvw-surface-3);box-shadow:0 10px 35px rgba(0,0,0,.28);color:var(--dvw-text)}.dvw-theme-menu button{width:100%;min-height:48px;border:0;border-radius:7px;background:transparent;color:inherit;display:grid;grid-template-columns:30px 1fr 20px;align-items:center;text-align:left;padding:6px;cursor:pointer}.dvw-theme-menu button:hover,.dvw-theme-menu button[aria-checked=true]{background:var(--dvw-hover)}.dvw-theme-menu strong,.dvw-theme-menu small{display:block}.dvw-theme-menu small{color:var(--dvw-text-3);margin-top:2px}.dvw-theme-swatch{width:22px;height:22px;border-radius:6px;border:1px solid var(--dvw-border);background:linear-gradient(135deg,#17181c 0 50%,#fff 50%)}.dvw-theme-swatch.dark{background:#17181c}.dvw-theme-swatch.light{background:#fff}
 .dvw-search-form{padding:8px;display:grid;gap:6px}.dvw-input,.dvw-textarea,.dvw-select{width:100%;border:1px solid var(--dvw-border);background:var(--dvw-surface-2);color:var(--dvw-text);padding:5px 7px;outline:none}.dvw-input:focus,.dvw-textarea:focus,.dvw-select:focus{border-color:var(--dvw-accent)}.dvw-options{display:flex;align-items:center;gap:8px;font-size:11px}.dvw-result-file{padding:5px 8px;font-weight:600}.dvw-result{padding:4px 8px 4px 20px;cursor:pointer;display:flex;gap:8px}.dvw-result:hover{background:var(--dvw-hover)}.dvw-line{color:var(--dvw-text-3);min-width:30px;text-align:right}.dvw-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}