npm - @openspecui/web - Versions diffs - 3.1.2 → 3.2.1 - Mend

@openspecui/web 3.1.2 → 3.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/dist-ssg/client/assets/{init-DVEXKLT1.js → init-DnDCMdRA.js} RENAMED Viewed

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

package/dist-ssg/client/assets/trpc-JLvkwF5N.js ADDED Viewed

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

package/dist-ssg/client/assets/webworkerAll-VgzZQ1wt.js ADDED Viewed

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

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

@@ -35,7 +35,7 @@
         document.head.append(preconnectApi, preconnectStatic, stylesheet)
       })()
     </script>
-    <script type="module" crossorigin src="/assets/index.ssg-aBliwGpC.js"></script>
+    <script type="module" crossorigin src="/assets/index.ssg-wxGG39Ri.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/chunk-DECur_0Z.js">
     <link rel="modulepreload" crossorigin href="/assets/dist-QUHuPJsA.js">
     <link rel="modulepreload" crossorigin href="/assets/dist-BGaHY1kO.js">
@@ -45,7 +45,7 @@
     <link rel="modulepreload" crossorigin href="/assets/getTextureBatchBindGroup-CqvclRGr.js">
     <link rel="modulepreload" crossorigin href="/assets/BufferResource-DKNednNt.js">
     <link rel="modulepreload" crossorigin href="/assets/ImageSource-DsthkIsU.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-CVQW5ffN.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-nIC438iN.css">
   </head>
   <body>
     <div id="root"><!--app-html--></div>

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

@@ -46424,6 +46424,9 @@ async function getConfig$1() {
 			cursorBlink: true,
 			cursorStyle: "block",
 			scrollback: 1e3,
+			useTheme: "app",
+			lightTheme: "default-light",
+			darkTheme: "default-dark",
 			rendererEngine: "xterm"
 		}
 	};
@@ -84158,7 +84161,7 @@ var tabsStyleText = (id) => {
       transform: scaleX(0.5);
     }
-    #${id} .tabs-strip {
+    #${id}[data-tabs-strip-decoration='on'] .tabs-strip {
       background-image: linear-gradient(
         to bottom,
         transparent,
@@ -84189,7 +84192,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 = "", variant = "default" }, ref) {
+function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTabOrderChange, actions, onTabBarDoubleClick, className = "", classNames, showHeaderShell = true, showSelectionIndicator = true, decorateStrip = true }, 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);
@@ -84243,7 +84246,7 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 		const header = headerRef.current;
 		const activeTrigger = activeTab ? triggerRefs.current.get(activeTab) : null;
 		if (!indicator) return;
-		if (variant !== "default" || !header || !activeTrigger) {
+		if (!showSelectionIndicator || !header || !activeTrigger) {
 			indicator.style.opacity = "0";
 			indicator.style.width = "0px";
 			indicator.style.height = "0px";
@@ -84256,12 +84259,12 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 		indicator.style.width = `${triggerRect.width}px`;
 		indicator.style.height = `${triggerRect.height}px`;
 		indicator.style.transform = `translate(${triggerRect.left - headerRect.left}px, ${triggerRect.top - headerRect.top}px)`;
-	}, [activeTab, variant]);
+	}, [activeTab, showSelectionIndicator]);
 	(0, import_react.useLayoutEffect)(() => {
 		syncSelectionIndicator();
 	}, [syncSelectionIndicator, tabLayoutSignature]);
 	(0, import_react.useLayoutEffect)(() => {
-		if (variant !== "default") return;
+		if (!showSelectionIndicator) return;
 		const tabsButton = tabsButtonRef.current;
 		if (!tabsButton) return;
 		const handleScroll = () => {
@@ -84284,9 +84287,9 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 		};
 	}, [
 		activeTab,
+		showSelectionIndicator,
 		syncSelectionIndicator,
-		tabLayoutSignature,
-		variant
+		tabLayoutSignature
 	]);
 	const handleChange = (id) => {
 		if (!controlled) setUncontrolled(id);
@@ -84367,13 +84370,19 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 		event.dataTransfer.dropEffect = "move";
 	}, [reorderable]);
 	if (tabs.length === 0) return null;
-	const headerClassName = variant === "terminal" ? "tabs-header bg-terminal text-terminal-foreground sticky top-0 z-20 flex min-w-0 items-stretch" : "tabs-header relative sticky top-0 z-20 min-w-0";
-	const stripClassName = variant === "terminal" ? "tabs-strip min-w-0 flex-1 bg-terminal px-4" : "tabs-strip min-w-0 flex-1 rounded-l-md px-4";
-	const listClassName = variant === "terminal" ? "tabs-button scrollbar-none flex min-w-0 gap-1 overflow-x-auto pt-2" : "tabs-button scrollbar-none flex min-w-0 gap-1 overflow-x-auto";
-	const buttonBaseClassName = `group relative z-10 m-0 flex h-full shrink-0 items-center gap-2 px-2 text-sm font-medium transition-colors ${variant === "terminal" ? "rounded-t-[8px] py-1" : "py-2"}`;
-	const activeButtonClassName = variant === "terminal" ? "tab-selected bg-background text-foreground" : "tab-selected text-foreground";
-	const inactiveButtonClassName = variant === "terminal" ? "bg-terminal text-terminal-foreground/80 hover:bg-terminal hover:text-terminal-foreground" : "text-muted-foreground hover:bg-background/35 hover:text-foreground";
-	const actionsClassName = variant === "terminal" ? "tabs-actions border-border bg-terminal text-terminal-foreground flex shrink-0 items-center border-b px-1" : "tabs-actions border-zinc-500/15 flex shrink-0 items-center rounded-r-md border-l px-1";
+	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 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 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 handleTabBarDoubleClick = (event) => {
 		if (!onTabBarDoubleClick) return;
 		if (event.target.closest("[data-tab-item=\"true\"]")) return;
@@ -84381,7 +84390,7 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 	};
 	const tabButtons = tabs.map((tab) => {
 		const dragIndicatorStyle = dropIndicator?.tabId === tab.id ? { boxShadow: dropIndicator.position === "before" ? "inset 2px 0 0 var(--border)" : "inset -2px 0 0 var(--border)" } : void 0;
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
 			ref: (element) => {
 				triggerRefs.current.set(tab.id, element);
 			},
@@ -84395,56 +84404,60 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 			onDrop: (event) => handleItemDrop(event, tab.id),
 			className: `${buttonBaseClassName} ${activeTab === tab.id ? activeButtonClassName : inactiveButtonClassName} ${reorderable ? "cursor-grab active:cursor-grabbing" : ""}`,
 			style: dragIndicatorStyle,
-			children: [
-				tab.icon,
-				tab.label,
-				tab.closable && onTabClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-					role: "button",
-					tabIndex: 0,
-					onClick: (event) => {
-						event.stopPropagation();
-						onTabClose(tab.id);
-					},
-					onKeyDown: (event) => {
-						if (event.key === "Enter" || event.key === " ") {
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				"data-tabs-button-inner": "true",
+				className: `${buttonInnerClassName} ${activeTab === tab.id ? activeButtonInnerClassName : inactiveButtonInnerClassName}`,
+				children: [
+					tab.icon,
+					tab.label,
+					tab.closable && onTabClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						role: "button",
+						tabIndex: 0,
+						onClick: (event) => {
 							event.stopPropagation();
 							onTabClose(tab.id);
-						}
-					},
-					draggable: false,
-					className: `hover:text-foreground -mr-1 rounded p-0.5 transition ${tab.closeButtonVisibility === "always" ? "opacity-100" : "opacity-0 group-hover:opacity-100 [button:hover>&]:opacity-100"} ${activeTab === tab.id ? "text-current/80" : "text-muted-foreground"}`,
-					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X$2, { className: "h-3 w-3" })
-				})
-			]
+						},
+						onKeyDown: (event) => {
+							if (event.key === "Enter" || event.key === " ") {
+								event.stopPropagation();
+								onTabClose(tab.id);
+							}
+						},
+						draggable: false,
+						className: `-mr-1 rounded p-0.5 transition ${tab.closeButtonVisibility === "always" ? "opacity-100" : "opacity-0 group-hover:opacity-100 [button:hover>&]:opacity-100"} ${activeTab === tab.id ? cn$1("text-current/80 hover:text-foreground", classNames?.closeButtonActive) : cn$1("text-muted-foreground hover:text-foreground", classNames?.closeButtonInactive)}`,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X$2, { className: "h-3 w-3" })
+					})
+				]
+			})
 		}, tab.id);
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		id,
 		ref: rootRef,
-		"data-tabs-variant": variant,
+		"data-tabs-strip-decoration": decorateStrip ? "on" : "off",
 		className: `relative isolate flex min-h-0 min-w-0 flex-1 flex-col ${className}`,
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			ref: headerRef,
 			className: headerClassName,
-			children: variant === "default" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			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: "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"
+					className: headerShellClassName
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				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: "tabs-selection-indicator border-primary bg-background/70 duration-280 absolute left-0 top-0 rounded-md border-b-2 opacity-0 shadow-[inset_0_-1px_0_color-mix(in_srgb,var(--border)_85%,transparent)] transition-[transform,width,height,opacity] ease-[cubic-bezier(0.22,1,0.36,1)]"
+						className: selectionIndicatorClassName
 					})
 				}),
 				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					ref: headerForegroundRef,
 					"data-tabs-header-foreground": "true",
-					className: "tabs-header-foreground relative z-20 flex min-w-0 items-stretch",
+					className: headerForegroundClassName,
 					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 						className: stripClassName,
 						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
@@ -84461,21 +84474,7 @@ function TabsImpl({ tabs, selectedTab: controlled, onTabChange, onTabClose, onTa
 						children: actions
 					})]
 				})
-			] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: stripClassName,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					ref: tabsButtonRef,
-					className: listClassName,
-					onDoubleClick: handleTabBarDoubleClick,
-					onDragOver: handleListDragOver,
-					onDrop: handleListDrop,
-					children: tabButtons
-				})
-			}), actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				"data-tabs-actions": "true",
-				className: actionsClassName,
-				children: actions
-			})] })
+			] })
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			className: "relative flex min-h-0 flex-1 overflow-hidden",
 			children: contentTabs.map((tab) => tab.unmountOnHide ? activeTab === tab.id && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
@@ -144781,6 +144780,194 @@ var TerminalInputHistoryStore = class {
 	}
 };
 //#endregion
+//#region src/lib/terminal-theme.ts
+var TERMINAL_THEME_REGISTRY = {
+	"default-light": {
+		id: "default-light",
+		label: "Default Light",
+		modeHint: "light",
+		palette: {
+			background: "#f6f5f2",
+			foreground: "#1b1b1b",
+			cursor: "#ea580c",
+			cursorAccent: "#f6f5f2",
+			selectionBackground: "rgba(234, 88, 12, 0.22)",
+			black: "#111111",
+			red: "#b91c1c",
+			green: "#15803d",
+			yellow: "#a16207",
+			blue: "#1d4ed8",
+			magenta: "#a21caf",
+			cyan: "#0f766e",
+			white: "#f6f5f2",
+			brightBlack: "#4b5563",
+			brightRed: "#dc2626",
+			brightGreen: "#16a34a",
+			brightYellow: "#ca8a04",
+			brightBlue: "#2563eb",
+			brightMagenta: "#c026d3",
+			brightCyan: "#0891b2",
+			brightWhite: "#ffffff"
+		}
+	},
+	"default-dark": {
+		id: "default-dark",
+		label: "Default Dark",
+		modeHint: "dark",
+		palette: {
+			background: "#141414",
+			foreground: "#e5dfd2",
+			cursor: "#f97316",
+			cursorAccent: "#141414",
+			selectionBackground: "rgba(249, 115, 22, 0.28)",
+			black: "#151515",
+			red: "#f87171",
+			green: "#4ade80",
+			yellow: "#facc15",
+			blue: "#60a5fa",
+			magenta: "#e879f9",
+			cyan: "#67e8f9",
+			white: "#f4f1ea",
+			brightBlack: "#6b7280",
+			brightRed: "#fca5a5",
+			brightGreen: "#86efac",
+			brightYellow: "#fde047",
+			brightBlue: "#93c5fd",
+			brightMagenta: "#f0abfc",
+			brightCyan: "#a5f3fc",
+			brightWhite: "#fffdf8"
+		}
+	},
+	monokai: {
+		id: "monokai",
+		label: "Monokai",
+		modeHint: "either",
+		palette: {
+			background: "#272822",
+			foreground: "#f8f8f2",
+			cursor: "#f8f8f0",
+			cursorAccent: "#272822",
+			selectionBackground: "rgba(73, 72, 62, 0.9)",
+			black: "#272822",
+			red: "#f92672",
+			green: "#a6e22e",
+			yellow: "#f4bf75",
+			blue: "#66d9ef",
+			magenta: "#ae81ff",
+			cyan: "#a1efe4",
+			white: "#f8f8f2",
+			brightBlack: "#75715e",
+			brightRed: "#f92672",
+			brightGreen: "#a6e22e",
+			brightYellow: "#f4bf75",
+			brightBlue: "#66d9ef",
+			brightMagenta: "#ae81ff",
+			brightCyan: "#a1efe4",
+			brightWhite: "#f9f8f5"
+		}
+	},
+	nord: {
+		id: "nord",
+		label: "Nord",
+		modeHint: "either",
+		palette: {
+			background: "#2e3440",
+			foreground: "#d8dee9",
+			cursor: "#88c0d0",
+			cursorAccent: "#2e3440",
+			selectionBackground: "rgba(94, 129, 172, 0.38)",
+			black: "#3b4252",
+			red: "#bf616a",
+			green: "#a3be8c",
+			yellow: "#ebcb8b",
+			blue: "#81a1c1",
+			magenta: "#b48ead",
+			cyan: "#88c0d0",
+			white: "#e5e9f0",
+			brightBlack: "#4c566a",
+			brightRed: "#d08770",
+			brightGreen: "#8fbcbb",
+			brightYellow: "#eceff4",
+			brightBlue: "#5e81ac",
+			brightMagenta: "#b48ead",
+			brightCyan: "#8fbcbb",
+			brightWhite: "#eceff4"
+		}
+	},
+	"solarized-light": {
+		id: "solarized-light",
+		label: "Solarized Light",
+		modeHint: "light",
+		palette: {
+			background: "#fdf6e3",
+			foreground: "#586e75",
+			cursor: "#cb4b16",
+			cursorAccent: "#fdf6e3",
+			selectionBackground: "rgba(147, 161, 161, 0.32)",
+			black: "#073642",
+			red: "#dc322f",
+			green: "#859900",
+			yellow: "#b58900",
+			blue: "#268bd2",
+			magenta: "#d33682",
+			cyan: "#2aa198",
+			white: "#eee8d5",
+			brightBlack: "#657b83",
+			brightRed: "#cb4b16",
+			brightGreen: "#93a1a1",
+			brightYellow: "#839496",
+			brightBlue: "#6c71c4",
+			brightMagenta: "#d33682",
+			brightCyan: "#2aa198",
+			brightWhite: "#fdf6e3"
+		}
+	},
+	"solarized-dark": {
+		id: "solarized-dark",
+		label: "Solarized Dark",
+		modeHint: "dark",
+		palette: {
+			background: "#002b36",
+			foreground: "#93a1a1",
+			cursor: "#cb4b16",
+			cursorAccent: "#002b36",
+			selectionBackground: "rgba(88, 110, 117, 0.5)",
+			black: "#073642",
+			red: "#dc322f",
+			green: "#859900",
+			yellow: "#b58900",
+			blue: "#268bd2",
+			magenta: "#d33682",
+			cyan: "#2aa198",
+			white: "#eee8d5",
+			brightBlack: "#657b83",
+			brightRed: "#cb4b16",
+			brightGreen: "#586e75",
+			brightYellow: "#657b83",
+			brightBlue: "#839496",
+			brightMagenta: "#6c71c4",
+			brightCyan: "#93a1a1",
+			brightWhite: "#fdf6e3"
+		}
+	}
+};
+function resolveTerminalThemeMode(input) {
+	const mode = input.useTheme ?? "app";
+	if (mode === "light") return "light";
+	if (mode === "dark") return "dark";
+	if (mode === "system") return input.systemDarkMode ? "dark" : "light";
+	return input.appDarkMode ? "dark" : "light";
+}
+function resolveTerminalTheme(input) {
+	const mode = resolveTerminalThemeMode(input);
+	const id = mode === "dark" ? input.darkTheme ?? "default-dark" : input.lightTheme ?? "default-light";
+	return {
+		id,
+		mode,
+		definition: TERMINAL_THEME_REGISTRY[id]
+	};
+}
+//#endregion
 //#region src/lib/terminal-controller.ts
 var DEFAULT_FONT_FAMILY = "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace";
 var DEFAULT_TERMINAL_CONFIG = {
@@ -144789,6 +144976,9 @@ var DEFAULT_TERMINAL_CONFIG = {
 	cursorBlink: true,
 	cursorStyle: "block",
 	scrollback: 1e3,
+	useTheme: "app",
+	lightTheme: "default-light",
+	darkTheme: "default-dark",
 	rendererEngine: "xterm"
 };
 var OUTPUT_IDLE_THRESHOLD = 1500;
@@ -144876,6 +145066,15 @@ var TerminalController = class {
 	inputHistoryStore = new TerminalInputHistoryStore();
 	ghosttyModule = null;
 	ghosttyInitPromise = null;
+	appDarkMode = false;
+	systemDarkMode = false;
+	resolvedTheme = resolveTerminalTheme({
+		useTheme: DEFAULT_TERMINAL_CONFIG.useTheme,
+		lightTheme: DEFAULT_TERMINAL_CONFIG.lightTheme,
+		darkTheme: DEFAULT_TERMINAL_CONFIG.darkTheme,
+		appDarkMode: false,
+		systemDarkMode: false
+	});
 	ws = null;
 	wsConnected = false;
 	reconnectTimer = null;
@@ -144963,13 +145162,20 @@ var TerminalController = class {
 		};
 	}
 	getTerminalOptions() {
+		const resolvedTheme = resolveTerminalTheme({
+			useTheme: this.config.useTheme,
+			lightTheme: this.config.lightTheme,
+			darkTheme: this.config.darkTheme,
+			appDarkMode: this.appDarkMode,
+			systemDarkMode: this.systemDarkMode
+		});
 		return {
 			cursorBlink: this.config.cursorBlink,
 			cursorStyle: this.config.cursorStyle,
 			fontSize: this.config.fontSize,
 			fontFamily: DEFAULT_FONT_FAMILY,
-			theme: { background: "transparent" },
-			allowTransparency: true,
+			theme: resolvedTheme.definition.palette,
+			allowTransparency: false,
 			convertEol: true,
 			macOptionIsMeta: true,
 			macOptionClickForcesSelection: true,
@@ -145024,8 +145230,8 @@ var TerminalController = class {
 	}
 	applyGhosttyBackground(instance, container) {
 		if (instance.rendererEngine !== "ghostty") return;
-		const background = this.resolveNearestOpaqueBackground(container);
 		const currentTheme = instance.terminal.options.theme ?? {};
+		const background = typeof currentTheme.background === "string" && currentTheme.background.trim().length > 0 ? currentTheme.background : this.resolveNearestOpaqueBackground(container);
 		instance.terminal.options.allowTransparency = false;
 		instance.terminal.options.theme = {
 			...currentTheme,
@@ -145285,6 +145491,15 @@ var TerminalController = class {
 	getConfig() {
 		return { ...this.config };
 	}
+	getResolvedTheme() {
+		return this.resolvedTheme;
+	}
+	setThemeContext(input) {
+		if (!(this.appDarkMode !== input.appDarkMode || this.systemDarkMode !== input.systemDarkMode)) return;
+		this.appDarkMode = input.appDarkMode;
+		this.systemDarkMode = input.systemDarkMode;
+		this.refreshResolvedTheme();
+	}
 	applyConfig(config) {
 		const { rendererEngine, ...restConfig } = config;
 		Object.assign(this.config, restConfig);
@@ -145295,12 +145510,28 @@ var TerminalController = class {
 			t.options.cursorStyle = this.config.cursorStyle;
 			t.options.scrollback = this.config.scrollback;
 		}
+		this.refreshResolvedTheme();
 		this._applyFonts();
 		if (rendererEngine && rendererEngine !== this.config.rendererEngine) this.setRendererEngine(rendererEngine).catch((error) => {
 			console.error("[terminal] failed to switch renderer engine:", error);
 		});
 		this.notify();
 	}
+	refreshResolvedTheme() {
+		const resolvedTheme = resolveTerminalTheme({
+			useTheme: this.config.useTheme,
+			lightTheme: this.config.lightTheme,
+			darkTheme: this.config.darkTheme,
+			appDarkMode: this.appDarkMode,
+			systemDarkMode: this.systemDarkMode
+		});
+		this.resolvedTheme = resolvedTheme;
+		for (const instance of this.instances.values()) {
+			instance.terminal.options.theme = resolvedTheme.definition.palette;
+			instance.terminal.options.allowTransparency = false;
+			if (instance.mountedContainer) this.applyGhosttyBackground(instance, instance.mountedContainer);
+		}
+	}
 	async _applyFonts() {
 		const raw = this.config.fontFamily;
 		if (!raw) {

package/package.json CHANGED Viewed

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

package/dist/assets/CanvasRenderer-GMVoqlzn.js DELETED Viewed

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

package/dist/assets/WebGLRenderer-k-Z8pjlp.js DELETED Viewed

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

package/dist/assets/WebGPURenderer-C_8mniec.js DELETED Viewed

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

package/dist/assets/browserAll-BWYXp-f3.js DELETED Viewed

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

package/dist/assets/dist-B3ZlOYLU.js DELETED Viewed

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

package/dist/assets/dist-BCywbLgf.js DELETED Viewed

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

package/dist/assets/dist-BhjA24BR.js DELETED Viewed

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