dsh-skin-galactic-opera 0.1.8 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this package will be documented in this file.
 
+## 0.2.0 - 2026-09-04
+
+### Changed
+
+- Pauses skin animation work while the page is hidden to reduce background CPU/GPU usage.
+- Suspends telemetry scans while the page is hidden, then forces an immediate refresh plus a short follow-up when the page becomes visible again.
+
+## 0.1.9 - 2026-09-03
+
+### Changed
+
+- Replaces the README with separate English and Simplified Chinese sections linked from a language switcher at the top.
+- Refreshes the bottom-right telemetry HUD promptly when switching conversations or navigating between sessions.
+
+### Fixed
+
+- Keeps navigation-triggered telemetry refreshes active even when the instruction input still has focus.
+
 ## 0.1.8 - 2026-09-03
 
 ### Added

package/README.md

@@ -1,37 +1,51 @@
 # dsh-skin-galactic-opera
 
-Unofficial cinematic space-opera dark skin bundle for the DSH Web GUI.
+<p align="center">DSH Web GUI 非官方 太空歌剧风 暗色 动态 皮肤插件</p>
+
+<p align="center">
+  <a href="#english">English</a> · <a href="#简体中文">简体中文</a>
+</p>
 
-非官方 DSH Web GUI 太空歌剧暗色皮肤插件。它使用通用科幻视觉语言，包括深空背景、霓虹 HUD、黑洞吸积盘、行星与卫星轨道、流星、V 形战机剪影和提交消息时的超空间跃迁效果。
+---
 
-This package does not include or recreate any official franchise logos, characters, ship designs, quotes, or proprietary names.
+## English
+
+Unofficial cinematic space-opera dark skin bundle for the DSH Web GUI.
 
-本插件不包含也不复刻任何特定影视作品的官方 logo、角色、飞船设计、台词或专有名称。
+It uses generic sci-fi visual language: deep-space backgrounds, neon HUD chrome, a central black-hole accretion disk, a planet with orbital elements, scanner UI, comet trails, energy beams, subtle starfighter silhouettes, telemetry chrome, and a hyperspace-style send effect.
 
-## Features
+> This package is not affiliated with, endorsed by, or derived from any specific franchise. It does **not** include or recreate official logos, characters, ship designs, quotes, proprietary names, or protected visual designs.
+
+### Features
 
 - Registers and enables the `galactic-opera` dark theme.
 - Overrides DSH Web GUI theme tokens for backgrounds, borders, text, brand colors, state colors, scrollbars, and sidebar surfaces.
-- Adds global visual styling for star fields, diagonal hyperspace lanes, hover glow, selection highlight, and code block glow.
-- Adds decorative space-opera elements:
-  - Central black-hole accretion disk.
-  - Top-right planet, one moon, and an elliptical satellite orbit.
-  - Bottom-left rotating scanner HUD and holographic route map.
-  - Red, cyan, and gold energy beams.
-  - Sparse twinkling stars, comets, and generic V-shaped starfighter silhouettes.
-  - Gold mission-briefing crawl panel.
+- Adds global space-opera styling:
+  - deep-space background layers;
+  - diagonal hyperspace lanes;
+  - hover glow for buttons, inputs, messages, and code blocks;
+  - sci-fi text selection and code block glow.
+- Adds decorative visual elements:
+  - central black-hole accretion disk with subtle infall particles;
+  - top-right planet, moon, and elliptical satellite orbit;
+  - bottom-left rotating scanner HUD and holographic route map;
+  - red, cyan, and gold energy beams;
+  - sparse twinkling stars, comets, and generic V-shaped starfighter silhouettes;
+  - gold mission-briefing crawl panel.
 - Adds interactions:
-  - Subtle mouse parallax.
-  - Click energy pulse.
-  - Hover energy outlines on buttons, inputs, messages, and code blocks.
-  - Bottom telemetry/status information is mirrored into a fixed bottom-right sci-fi panel.
-  - Scanner target dot projected from the pointer direction relative to the viewport center; the target lights only when the scanner sweep passes it.
-  - Automatic hyperspace burst after submitting a new instruction or message.
+  - subtle pointer parallax;
+  - click energy pulse;
+  - scanner target ping projected from the clicked position;
+  - automatic hyperspace burst after submitting a new instruction or message;
+  - fixed bottom-right telemetry/status HUD panel.
+- Uses Shadow DOM for the decorative layer to reduce interference from host application styles.
 - Respects `prefers-reduced-motion: reduce` by disabling major animations.
 
-## Telemetry panel
+### Telemetry panel
+
+When DSH Web exposes bottom status/usage data, the skin keeps the original UI layout in place and mirrors the detected global telemetry into a non-interactive bottom-right HUD panel.
 
-When DSH Web exposes bottom status/usage data, the skin keeps the original UI layout in place and mirrors the detected global telemetry into a non-interactive bottom-right HUD panel. The panel is intended to show a consistent five-line status block:
+The panel is intended to show a consistent five-line status block:
 
 ```text
 312 轮 · 8732 步
@@ -43,9 +57,9 @@ LLM 2253m42s · 工具调用 972m8s
 
 The skin treats each original pipe-separated bottom-bar segment as a complete information block, so combined items such as `首 token 平均 ... · ... tok/s` and `输入 ... · 输出 ...` remain intact. It also filters nearby message-level timing text and settings/menu text so the panel stays focused on global session telemetry.
 
-## Installation
+### Installation
 
-### From npm
+#### From npm
 
 Recommended for most users:
 
@@ -59,13 +73,13 @@ npm package page:
 https://www.npmjs.com/package/dsh-skin-galactic-opera
 ```
 
-### From GitHub
+#### From GitHub
 
 ```powershell
 dsh plugin --profile web add https://github.com/xmnathan/dsh-skin-galactic-opera.git
 ```
 
-### From a local checkout
+#### From a local checkout
 
 From the parent directory of this package:
 
@@ -91,7 +105,7 @@ If the browser keeps an older client bundle, use a hard refresh:
 Ctrl + F5
 ```
 
-## Uninstall
+### Uninstall
 
 ```powershell
 dsh plugin --profile web remove dsh-skin-galactic-opera
@@ -99,7 +113,7 @@ dsh plugin --profile web remove dsh-skin-galactic-opera
 
 Refresh the Web GUI after uninstalling.
 
-## Development
+### Development
 
 Check browser-side JavaScript syntax:
 
@@ -119,7 +133,7 @@ Publish to npm:
 npm publish
 ```
 
-## Package structure
+### Package structure
 
 ```text
 dsh-skin-galactic-opera/
@@ -138,6 +152,160 @@ dsh-skin-galactic-opera/
 - `lib/index.js`: host-side no-op entry.
 - `lib/client.js`: browser-side theme, decoration, and interaction implementation.
 
-## License
+### License
+
+MIT
+
+<p align="right"><a href="#dsh-skin-galactic-opera">Back to top ↑</a></p>
+
+---
+
+## 简体中文
+
+DSH Web GUI 的非官方电影感太空歌剧暗色皮肤插件。
+
+它使用通用科幻视觉语言：深空背景、霓虹 HUD、中央黑洞吸积盘、行星与轨道元素、扫描器界面、彗星轨迹、能量束、克制的战机剪影、遥测信息面板，以及发送消息时的超空间风格特效。
+
+> 本插件不隶属于、不受认可于、也不派生自任何特定影视或游戏系列。它**不包含也不复刻**任何官方 logo、角色、飞船设计、台词、专有名称或受保护视觉设计。
+
+### 功能特性
+
+- 注册并启用 `galactic-opera` 暗色主题。
+- 覆盖 DSH Web GUI 的主题 token，包括背景、边框、文本、品牌色、状态色、滚动条和侧边栏表面。
+- 添加全局太空歌剧风格：
+  - 深空背景层；
+  - 斜向超空间航道；
+  - 按钮、输入框、消息和代码块的悬停辉光；
+  - 科幻风格文本选中与代码块辉光。
+- 添加装饰性视觉元素：
+  - 带轻微吸入粒子的中央黑洞吸积盘；
+  - 右上角行星、卫星和椭圆卫星轨道；
+  - 左下角旋转扫描盘 HUD 和全息路线图；
+  - 红、青、金三色能量束；
+  - 稀疏闪烁星点、彗星和通用 V 形战机剪影；
+  - 金色任务简报滚动面板。
+- 添加交互效果：
+  - 轻微鼠标视差；
+  - 点击能量脉冲；
+  - 根据点击位置投影到扫描盘的目标 ping；
+  - 提交新指令或消息后的自动超空间爆发；
+  - 固定在右下角的 telemetry / 状态 HUD 面板。
+- 装饰层使用 Shadow DOM，减少宿主应用样式对行星、扫描盘、点击脉冲等几何形态的污染。
+- 遵循 `prefers-reduced-motion: reduce`，会关闭主要动画。
+
+### Telemetry 面板
+
+当 DSH Web 暴露底部状态/用量信息时，皮肤会保留原始 UI 布局，并将检测到的全局 telemetry 镜像到右下角的非交互 HUD 面板中。
+
+面板目标是稳定显示五行状态信息：
+
+```text
+312 轮 · 8732 步
+LLM 2253m42s · 工具调用 972m8s
+首 token 平均 10.5s · 58 tok/s
+缓存命中 97%
+输入 1369M tok · 输出 2.5M tok
+```
+
+皮肤会把原始底栏中用竖线分隔的每一段都视为完整信息块，因此 `首 token 平均 ... · ... tok/s`、`输入 ... · 输出 ...` 这类组合信息不会被拆散。同时也会过滤附近的单条消息耗时、设置菜单文本等内容，让面板聚焦于全局会话 telemetry。
+
+### 安装
+
+#### 通过 npm 安装
+
+推荐大多数用户使用：
+
+```powershell
+dsh plugin --profile web add dsh-skin-galactic-opera
+```
+
+npm 包页面：
+
+```text
+https://www.npmjs.com/package/dsh-skin-galactic-opera
+```
+
+#### 通过 GitHub 安装
+
+```powershell
+dsh plugin --profile web add https://github.com/xmnathan/dsh-skin-galactic-opera.git
+```
+
+#### 通过本地源码安装
+
+在本包的上级目录执行：
+
+```powershell
+dsh plugin --profile web add ./dsh-skin-galactic-opera
+```
+
+也可以使用绝对路径：
+
+```powershell
+dsh plugin --profile web add D:\path\to\dsh-skin-galactic-opera
+```
+
+然后刷新 DSH Web GUI，通常地址为：
+
+```text
+http://127.0.0.1:3080
+```
+
+如果浏览器仍然缓存旧的客户端 bundle，请使用硬刷新：
+
+```text
+Ctrl + F5
+```
+
+### 卸载
+
+```powershell
+dsh plugin --profile web remove dsh-skin-galactic-opera
+```
+
+卸载后刷新 Web GUI。
+
+### 开发
+
+检查浏览器端 JavaScript 语法：
+
+```powershell
+npm run check
+```
+
+发布前预览 npm 包内容：
+
+```powershell
+npm run pack:dry
+```
+
+发布到 npm：
+
+```powershell
+npm publish
+```
+
+### 包结构
+
+```text
+dsh-skin-galactic-opera/
+├─ package.json
+├─ cordis.patch.yml
+├─ README.md
+├─ LICENSE
+├─ CHANGELOG.md
+└─ lib/
+   ├─ index.js
+   └─ client.js
+```
+
+- `package.json`：包元数据、npm 发布设置、DSH bundle 声明和 Web client 插件声明。
+- `cordis.patch.yml`：将 `dsh-skin-galactic-opera` client 插件插入 Web profile。
+- `lib/index.js`：宿主侧空实现入口。
+- `lib/client.js`：浏览器侧主题、装饰层和交互实现。
+
+### 许可证
 
 MIT
+
+<p align="right"><a href="#dsh-skin-galactic-opera">返回顶部 ↑</a></p>

package/lib/client.js

@@ -11,6 +11,7 @@ window.__ModuleLoader__.load({
 		const STYLE_ID = "dsh-skin-galactic-opera-style";
 		const DECOR_ID = "dsh-skin-galactic-opera-decor";
 		const DECOR_HOST_CLASS = "dsh-skin-galactic-opera-decor-host";
+		const PAGE_HIDDEN_CLASS = "dsh-skin-galactic-opera-page-hidden";
 		const CSS_TAG_ID = `${PLUGIN_ID}/global.css`;
 
 		const TOKENS = Object.freeze({
@@ -170,6 +171,16 @@ body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active :is(.dsh-skin-
   opacity: 0.16 !important;
 }
 
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden::before,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden::after,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden #root::before,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden .dsh-skin-galactic-opera-decor::before,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden .dsh-skin-galactic-opera-decor *,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden .dsh-skin-galactic-opera-decor *::before,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden .dsh-skin-galactic-opera-decor *::after {
+  animation-play-state: paused !important;
+}
+
 body.dsh-skin-galactic-opera #root > *,
 body.dsh-skin-galactic-opera main,
 body.dsh-skin-galactic-opera aside,
@@ -1149,6 +1160,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			return `${CSS
 				.replace(/body\.dsh-skin-galactic-opera\.dsh-skin-galactic-opera-input-active\s+/g, ":host-context(body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active) ")
 				.replace(/body\.dsh-skin-galactic-opera\.dsh-skin-galactic-opera-hyperspace\s+/g, ":host-context(body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-hyperspace) ")
+				.replace(/body\.dsh-skin-galactic-opera\.dsh-skin-galactic-opera-page-hidden\s+/g, ":host-context(body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-page-hidden) ")
 				.replace(/body\.dsh-skin-galactic-opera\s+/g, "")}
 
 .dsh-skin-galactic-opera-decor {
@@ -1249,6 +1261,20 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 		}
 
 		const EDITABLE_CONTENT_SELECTOR = `[contenteditable]:not([contenteditable="false"])`;
+
+		function installVisibilityState() {
+			if (typeof document === "undefined" || typeof window === "undefined") return () => {};
+			const syncVisibilityClass = () => {
+				document.body.classList.toggle(PAGE_HIDDEN_CLASS, document.hidden);
+			};
+			syncVisibilityClass();
+			document.addEventListener("visibilitychange", syncVisibilityClass);
+			return () => {
+				document.removeEventListener("visibilitychange", syncVisibilityClass);
+				document.body.classList.remove(PAGE_HIDDEN_CLASS);
+			};
+		}
+
 		let reducedMotionQuery;
 		let reducedMotionMatches = false;
 		let reducedMotionListener;
@@ -1452,9 +1478,14 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			let currentSources = new Set();
 			let lastText = "";
 			let frame = 0;
+			let frameIgnoresTelemetryPause = false;
 			let forceTelemetryRescan = true;
 			let telemetryRefreshesSinceFullScan = 0;
+			let lastTelemetryLocationKey = typeof window.location === "undefined" ? "" : `${window.location.pathname}${window.location.search}${window.location.hash}`;
+			const telemetryNavigationTimers = new Set();
 			const TELEMETRY_UPDATE_DELAY = 300;
+			const TELEMETRY_NAV_UPDATE_DELAY = 48;
+			const TELEMETRY_NAV_FOLLOWUP_DELAY = 220;
 			const TELEMETRY_FULL_RESCAN_UPDATES = 7;
 			let collapsed = false;
 			try {
@@ -1668,9 +1699,10 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				if (!sources.every((source) => source.isConnected && getCandidateInfo(source) !== undefined)) return false;
 				return splitTelemetryRows(getSourcesText(currentSources)).length > 0;
 			};
-			const update = () => {
+			const update = ({ ignorePause = false } = {}) => {
 				frame = 0;
-				if (isTelemetryPaused()) return;
+				frameIgnoresTelemetryPause = false;
+				if (document.hidden || (!ignorePause && isTelemetryPaused())) return;
 				let nextSources = currentSources;
 				let text = getSourcesText(nextSources);
 				const needsFullScan = forceTelemetryRescan || telemetryRefreshesSinceFullScan >= TELEMETRY_FULL_RESCAN_UPDATES || !areCachedSourcesUsable();
@@ -1689,13 +1721,78 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				lastText = text;
 				renderPanel(text);
 			};
-			const schedule = () => {
-				if (isTelemetryPaused()) return;
-				if (frame === 0) frame = window.setTimeout(update, TELEMETRY_UPDATE_DELAY);
+			const schedule = ({ delay = TELEMETRY_UPDATE_DELAY, force = false, ignorePause = false } = {}) => {
+				if (document.hidden || (!ignorePause && isTelemetryPaused())) return;
+				if (force) forceTelemetryRescan = true;
+				if (frame !== 0) {
+					if (!force && delay >= TELEMETRY_UPDATE_DELAY) return;
+					window.clearTimeout(frame);
+					frameIgnoresTelemetryPause = false;
+				}
+				frameIgnoresTelemetryPause = ignorePause;
+				frame = window.setTimeout(() => update({ ignorePause }), delay);
+			};
+			const getTelemetryLocationKey = () => `${window.location.pathname}${window.location.search}${window.location.hash}`;
+			const setTelemetryNavigationTimer = (callback, delay) => {
+				const timer = window.setTimeout(() => {
+					telemetryNavigationTimers.delete(timer);
+					callback();
+				}, delay);
+				telemetryNavigationTimers.add(timer);
+				return timer;
 			};
+			const refreshTelemetryForNavigation = () => {
+				lastTelemetryLocationKey = getTelemetryLocationKey();
+				schedule({ delay: TELEMETRY_NAV_UPDATE_DELAY, force: true, ignorePause: true });
+				setTelemetryNavigationTimer(() => schedule({ delay: 0, force: true, ignorePause: true }), TELEMETRY_NAV_FOLLOWUP_DELAY);
+			};
+			const checkTelemetryLocation = () => {
+				const nextKey = getTelemetryLocationKey();
+				if (nextKey !== lastTelemetryLocationKey) refreshTelemetryForNavigation();
+			};
+			const onTelemetryNavigationClick = (event) => {
+				if (isSkinOwnedNode(event.target) || isEditableTarget(event.target)) return;
+				const target = event.target instanceof Element ? event.target.closest("a[href], button, [role=button], [aria-current], [data-active]") : null;
+				if (target === null) return;
+				schedule({ delay: TELEMETRY_NAV_UPDATE_DELAY, force: true, ignorePause: true });
+				setTelemetryNavigationTimer(checkTelemetryLocation, 0);
+				setTelemetryNavigationTimer(() => schedule({ delay: 0, force: true, ignorePause: true }), TELEMETRY_NAV_FOLLOWUP_DELAY);
+			};
+			const isPotentialTelemetryNavigationMutation = (mutation) => {
+				if (mutation.type !== "childList") return false;
+				const nodes = [...mutation.addedNodes, ...mutation.removedNodes];
+				return nodes.some((node) => {
+					const element = getMutationElement(node);
+					if (!(element instanceof Element) || isSkinOwnedNode(element) || isEditableTarget(element)) return false;
+					const text = normalizeTelemetryText(element.textContent || "");
+					return element.matches?.("main, section, article, aside, nav, [role=main], [role=navigation], [data-active], [aria-current]")
+						|| element.querySelector?.("main, section, article, aside, nav, [role=main], [role=navigation], [data-active], [aria-current]") !== null
+						|| telemetryPattern.test(text);
+				});
+			};
+			const originalPushState = window.history?.pushState;
+			const originalReplaceState = window.history?.replaceState;
+			let telemetryPushState;
+			let telemetryReplaceState;
+			if (typeof originalPushState === "function") {
+				telemetryPushState = function dshSkinTelemetryPushState(...args) {
+					const result = originalPushState.apply(this, args);
+					setTelemetryNavigationTimer(checkTelemetryLocation, 0);
+					return result;
+				};
+				window.history.pushState = telemetryPushState;
+			}
+			if (typeof originalReplaceState === "function") {
+				telemetryReplaceState = function dshSkinTelemetryReplaceState(...args) {
+					const result = originalReplaceState.apply(this, args);
+					setTelemetryNavigationTimer(checkTelemetryLocation, 0);
+					return result;
+				};
+				window.history.replaceState = telemetryReplaceState;
+			}
 			const onTelemetryFocusIn = (event) => {
 				if (!isInstructionInputTarget(event.target)) return;
-				if (frame !== 0) {
+				if (frame !== 0 && !frameIgnoresTelemetryPause) {
 					window.clearTimeout(frame);
 					frame = 0;
 				}
@@ -1707,21 +1804,53 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				forceTelemetryRescan = true;
 				schedule();
 			};
+			const onTelemetryVisibilityChange = () => {
+				if (document.hidden) {
+					if (frame !== 0) {
+						window.clearTimeout(frame);
+						frame = 0;
+					}
+					frameIgnoresTelemetryPause = false;
+					for (const timer of telemetryNavigationTimers) window.clearTimeout(timer);
+					telemetryNavigationTimers.clear();
+					return;
+				}
+				schedule({ delay: 0, force: true, ignorePause: true });
+				setTelemetryNavigationTimer(() => schedule({ delay: 0, force: true, ignorePause: true }), TELEMETRY_NAV_FOLLOWUP_DELAY);
+			};
 			const observer = typeof MutationObserver === "undefined" ? undefined : new MutationObserver((mutations) => {
 				if (mutations.every(isSkinOwnedMutation)) return;
+				if (isTelemetryPaused() && mutations.some(isPotentialTelemetryNavigationMutation)) {
+					schedule({ delay: TELEMETRY_NAV_UPDATE_DELAY, force: true, ignorePause: true });
+					setTelemetryNavigationTimer(() => schedule({ delay: 0, force: true, ignorePause: true }), TELEMETRY_NAV_FOLLOWUP_DELAY);
+					return;
+				}
 				schedule();
 			});
 			schedule();
 			observer?.observe(document.body, { childList: true, subtree: true, characterData: true });
 			window.addEventListener("resize", onTelemetryResize, { passive: true });
+			document.addEventListener("visibilitychange", onTelemetryVisibilityChange);
+			window.addEventListener("popstate", checkTelemetryLocation, { passive: true });
+			window.addEventListener("hashchange", checkTelemetryLocation, { passive: true });
+			document.addEventListener("click", onTelemetryNavigationClick, true);
 			document.addEventListener("focusin", onTelemetryFocusIn);
 			document.addEventListener("focusout", onTelemetryFocusOut);
 			return () => {
 				observer?.disconnect();
+				if (telemetryPushState !== undefined && window.history.pushState === telemetryPushState) window.history.pushState = originalPushState;
+				if (telemetryReplaceState !== undefined && window.history.replaceState === telemetryReplaceState) window.history.replaceState = originalReplaceState;
 				window.removeEventListener("resize", onTelemetryResize);
+				document.removeEventListener("visibilitychange", onTelemetryVisibilityChange);
+				window.removeEventListener("popstate", checkTelemetryLocation);
+				window.removeEventListener("hashchange", checkTelemetryLocation);
+				document.removeEventListener("click", onTelemetryNavigationClick, true);
 				document.removeEventListener("focusin", onTelemetryFocusIn);
 				document.removeEventListener("focusout", onTelemetryFocusOut);
 				if (frame !== 0) window.clearTimeout(frame);
+				frameIgnoresTelemetryPause = false;
+				for (const timer of telemetryNavigationTimers) window.clearTimeout(timer);
+				telemetryNavigationTimers.clear();
 				for (const source of currentSources) source.classList.remove("dsh-skin-telemetry-source-hidden");
 				toggle.remove();
 				panel.remove();
@@ -1734,12 +1863,14 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			ctx.effect(() => {
 				const style = ensureStyle();
 				if (typeof document !== "undefined") document.body.classList.add("dsh-skin-galactic-opera");
+				const disposeVisibilityState = installVisibilityState();
 				const decor = ensureDecor();
 				const disposeInteractions = installInteractions(decor);
 				const disposeTelemetryPanel = installTelemetryPanel();
 				return () => {
 					disposeTelemetryPanel();
 					disposeInteractions();
+					disposeVisibilityState();
 					disposeReducedMotionCache();
 					if (typeof document !== "undefined") document.body.classList.remove("dsh-skin-galactic-opera");
 					decor?.remove();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-skin-galactic-opera",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "Unofficial cinematic space-opera dark skin bundle for the DSH Web GUI.",
   "repository": {
     "type": "git",