dsh-skin-galactic-opera 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 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

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

@@ -1170,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;
+}
 `;
 		}
 
@@ -1339,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;
@@ -1371,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;
@@ -1419,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);

package/package.json

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