dsh-skin-galactic-opera 0.1.9 → 0.2.1

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this package will be documented in this file.
 
+## 0.2.1 - 2026-09-04
+
+### Changed
+
+- Documents the recommended DSH compatibility range in both English and Simplified Chinese README sections.
+
+### Fixed
+
+- Aligns click pulse and scanner target effects with the clicked position after Shadow DOM decor isolation.
+
+## 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

package/README.md

@@ -41,6 +41,19 @@ It uses generic sci-fi visual language: deep-space backgrounds, neon HUD chrome,
 - Uses Shadow DOM for the decorative layer to reduce interference from host application styles.
 - Respects `prefers-reduced-motion: reduce` by disabling major animations.
 
+### Compatibility
+
+Recommended DSH version: **`0.1.0-rc.7` or newer**.
+
+Known incompatible versions:
+
+- `0.0.1-rc.1`
+- `0.0.1-rc.2`
+
+These early versions of `@deepseek-ai/dsh-client-ui-theme` do not expose `theme.overrideTokens()`, which this skin uses for its token override layer.
+
+Versions from `0.0.1-rc.3` onward include the required theme APIs in static inspection, but DSH releases before `0.1.0-rc.7` are not actively tested by this package. If you are using an older DSH release, upgrade DSH first before reporting skin issues.
+
 ### 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.
@@ -193,6 +206,19 @@ DSH Web GUI 的非官方电影感太空歌剧暗色皮肤插件。
 - 装饰层使用 Shadow DOM，减少宿主应用样式对行星、扫描盘、点击脉冲等几何形态的污染。
 - 遵循 `prefers-reduced-motion: reduce`，会关闭主要动画。
 
+### 兼容性
+
+推荐 DSH 版本：**`0.1.0-rc.7` 或更新版本**。
+
+已知不兼容版本：
+
+- `0.0.1-rc.1`
+- `0.0.1-rc.2`
+
+这些早期版本的 `@deepseek-ai/dsh-client-ui-theme` 不提供 `theme.overrideTokens()`，而本皮肤需要它来应用主题 token 覆盖层。
+
+从 `0.0.1-rc.3` 开始，静态检查显示已具备本插件需要的 theme API；但 `0.1.0-rc.7` 之前的 DSH 版本本包不会主动测试。如果你正在使用更早的 DSH 版本，建议先升级 DSH，再反馈皮肤兼容问题。
+
 ### Telemetry 面板
 
 当 DSH Web 暴露底部状态/用量信息时，皮肤会保留原始 UI 布局，并将检测到的全局 telemetry 镜像到右下角的非交互 HUD 面板中。

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 {
@@ -1158,6 +1170,11 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
   height: auto !important;
   z-index: auto !important;
 }
+
+.dsh-skin-pulse,
+.dsh-skin-scanner-target {
+  position: absolute !important;
+}
 `;
 		}
 
@@ -1249,6 +1266,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;
@@ -1313,6 +1344,12 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			const decorLayer = getDecorLayer(decor);
 			const scanner = decorRoot?.querySelector?.(".dsh-skin-scanner");
 			const scannerTarget = decorRoot?.querySelector?.(".dsh-skin-scanner-target");
+			const useDecorLocalCoordinates = decor.shadowRoot !== null && decorLayer instanceof HTMLElement;
+			const toDecorPoint = (clientX, clientY) => {
+				if (!useDecorLocalCoordinates) return { x: clientX, y: clientY };
+				const rect = decorLayer.getBoundingClientRect();
+				return { x: clientX - rect.left, y: clientY - rect.top };
+			};
 			const pulseColors = ["rgba(125,227,255,0.94)", "rgba(255,207,92,0.92)", "rgba(255,71,120,0.88)"];
 			const updatePointer = () => {
 				frame = 0;
@@ -1345,8 +1382,9 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				const scannerRadius = Math.max(10, Math.min(rect.width, rect.height) * 0.38);
 				const projectedRadius = Math.min(1, distance / maxDistance) * scannerRadius;
 				const angle = Math.atan2(dy, dx);
-				document.body.style.setProperty("--dsh-skin-scanner-dot-x", `${Math.round(scannerCenterX + Math.cos(angle) * projectedRadius)}px`);
-				document.body.style.setProperty("--dsh-skin-scanner-dot-y", `${Math.round(scannerCenterY + Math.sin(angle) * projectedRadius)}px`);
+				const scannerDot = toDecorPoint(scannerCenterX + Math.cos(angle) * projectedRadius, scannerCenterY + Math.sin(angle) * projectedRadius);
+				document.body.style.setProperty("--dsh-skin-scanner-dot-x", `${Math.round(scannerDot.x)}px`);
+				document.body.style.setProperty("--dsh-skin-scanner-dot-y", `${Math.round(scannerDot.y)}px`);
 				scannerTarget.removeAttribute("data-ping");
 				// Force the double-flash animation to restart on repeated clicks at the same point.
 				void scannerTarget.offsetWidth;
@@ -1393,8 +1431,9 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				pulse.className = "dsh-skin-pulse";
 				setImportantStyle(pulse, "border-radius", "50%");
 				setImportantStyle(pulse, "box-sizing", "border-box");
-				pulse.style.setProperty("--dsh-skin-pulse-x", `${event.clientX}px`);
-				pulse.style.setProperty("--dsh-skin-pulse-y", `${event.clientY}px`);
+				const pulsePoint = toDecorPoint(event.clientX, event.clientY);
+				pulse.style.setProperty("--dsh-skin-pulse-x", `${Math.round(pulsePoint.x)}px`);
+				pulse.style.setProperty("--dsh-skin-pulse-y", `${Math.round(pulsePoint.y)}px`);
 				pulse.style.setProperty("--dsh-skin-pulse-color", pulseColors[pulseIndex % pulseColors.length]);
 				pulseIndex += 1;
 				if (decorLayer instanceof Element) decorLayer.appendChild(pulse);
@@ -1676,7 +1715,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			const update = ({ ignorePause = false } = {}) => {
 				frame = 0;
 				frameIgnoresTelemetryPause = false;
-				if (!ignorePause && isTelemetryPaused()) return;
+				if (document.hidden || (!ignorePause && isTelemetryPaused())) return;
 				let nextSources = currentSources;
 				let text = getSourcesText(nextSources);
 				const needsFullScan = forceTelemetryRescan || telemetryRefreshesSinceFullScan >= TELEMETRY_FULL_RESCAN_UPDATES || !areCachedSourcesUsable();
@@ -1696,7 +1735,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				renderPanel(text);
 			};
 			const schedule = ({ delay = TELEMETRY_UPDATE_DELAY, force = false, ignorePause = false } = {}) => {
-				if (!ignorePause && isTelemetryPaused()) return;
+				if (document.hidden || (!ignorePause && isTelemetryPaused())) return;
 				if (force) forceTelemetryRescan = true;
 				if (frame !== 0) {
 					if (!force && delay >= TELEMETRY_UPDATE_DELAY) return;
@@ -1778,6 +1817,20 @@ 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)) {
@@ -1790,6 +1843,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			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);
@@ -1800,6 +1854,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				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);
@@ -1821,12 +1876,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.9",
+  "version": "0.2.1",
   "description": "Unofficial cinematic space-opera dark skin bundle for the DSH Web GUI.",
   "repository": {
     "type": "git",