dsh-skin-galactic-opera 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 All notable changes to this package will be documented in this file.
 
+## 0.1.6 - 2026-08-28
+
+### Changed
+
+- Further reduces telemetry overhead by using cached candidate geometry, adding a bounded full-rescan TTL, increasing update debounce, and avoiding observer array allocations.
+- Refines telemetry text extraction so hot-path probing uses lightweight text reads while rendered output preserves native visual spacing.
+- Uses pointer movement distance thresholds for parallax updates instead of fixed time throttling.
+- Reuses fixed telemetry row nodes and disables the telemetry backdrop blur while typing.
+
+### Fixed
+
+- Prevents occasional telemetry panel disappearance during full rescans by temporarily making hidden native telemetry sources discoverable to `elementsFromPoint`.
+
+## 0.1.5 - 2026-08-28
+
+### Added
+
+- Scanner target now double-flashes at the clicked page position projected into the bottom-left scanner disk.
+- Package metadata for repository, homepage, and issue reporting.
+
+### Changed
+
+- Optimizes telemetry rescan scheduling by ignoring skin-owned DOM mutations and reusing valid cached telemetry sources.
+- Replaces the scanner target's continuous sweep polling with click-triggered pings.
+- Caches the reduced-motion media query and tightens plugin-specific global state class names.
+- Expands JavaScript syntax checks to include both client and host entries and runs them before publishing.
+
+### Fixed
+
+- Improves contenteditable detection, including empty and plaintext-only contenteditable controls.
+- Prevents hidden telemetry source elements from intercepting pointer events.
+- Narrows scrollbar styling to avoid a global universal selector.
+
 ## 0.1.4 - 2026-08-28
 
 ### Fixed

package/lib/client.js

@@ -79,6 +79,7 @@ body.dsh-skin-galactic-opera {
     radial-gradient(circle at 62% 83%, rgba(255, 71, 120, 0.20), transparent 34rem),
     radial-gradient(circle at 32% 74%, rgba(102, 255, 199, 0.10), transparent 28rem),
     linear-gradient(180deg, #02030a 0%, #03040b 44%, #080b1c 100%) !important;
+  scrollbar-color: rgba(125, 227, 255, 0.42) rgba(5, 7, 17, 0.40);
 }
 
 body.dsh-skin-galactic-opera::before,
@@ -139,35 +140,36 @@ body.dsh-skin-galactic-opera #root::before {
   will-change: transform;
 }
 
-body.dsh-skin-galactic-opera.dsh-skin-input-active::before,
-body.dsh-skin-galactic-opera.dsh-skin-input-active::after,
-body.dsh-skin-galactic-opera.dsh-skin-input-active #root::before {
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active::before,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active::after,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active #root::before {
   animation-play-state: paused !important;
 }
 
-body.dsh-skin-galactic-opera.dsh-skin-input-active::before {
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active::before {
   opacity: 0.28;
 }
 
-body.dsh-skin-galactic-opera.dsh-skin-input-active::after {
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active::after {
   opacity: 0.12;
 }
 
-body.dsh-skin-galactic-opera.dsh-skin-input-active #root::before {
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active #root::before {
   opacity: 0.10;
   transform: none;
   will-change: auto;
 }
 
-body.dsh-skin-galactic-opera.dsh-skin-input-active .dsh-skin-galactic-opera-decor {
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active .dsh-skin-galactic-opera-decor {
   opacity: 0.28;
 }
 
-body.dsh-skin-galactic-opera.dsh-skin-input-active :is(.dsh-skin-nebula-core, .dsh-skin-energy, .dsh-skin-comet, .dsh-skin-starfighter, .dsh-skin-mission-crawl, .dsh-skin-scanner, .dsh-skin-scanner::after, .dsh-skin-route-map) {
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active :is(.dsh-skin-nebula-core, .dsh-skin-energy, .dsh-skin-comet, .dsh-skin-starfighter, .dsh-skin-mission-crawl, .dsh-skin-scanner, .dsh-skin-route-map),
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active .dsh-skin-scanner::after {
   animation-play-state: paused !important;
 }
 
-body.dsh-skin-galactic-opera.dsh-skin-input-active :is(.dsh-skin-nebula-core, .dsh-skin-energy, .dsh-skin-comet, .dsh-skin-starfighter, .dsh-skin-mission-crawl) {
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active :is(.dsh-skin-nebula-core, .dsh-skin-energy, .dsh-skin-comet, .dsh-skin-starfighter, .dsh-skin-mission-crawl) {
   opacity: 0.08 !important;
 }
 
@@ -217,8 +219,8 @@ body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor::before {
   filter: blur(0.2px);
 }
 
-body.dsh-skin-galactic-opera.dsh-skin-hyperspace .dsh-skin-galactic-opera-decor::before {
-  animation: dsh-skin-hyperspace-burst 880ms cubic-bezier(.16,.8,.25,1) both;
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-hyperspace .dsh-skin-galactic-opera-decor::before {
+  animation: dsh-skin-galactic-opera-hyperspace-burst 880ms cubic-bezier(.16,.8,.25,1) both;
 }
 
 body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor span {
@@ -446,7 +448,7 @@ body.dsh-skin-galactic-opera .dsh-skin-scanner-target {
   transition: opacity 120ms ease-out, transform 120ms ease-out, box-shadow 120ms ease-out;
 }
 
-body.dsh-skin-galactic-opera .dsh-skin-scanner-target[data-lit="true"] {
+body.dsh-skin-galactic-opera .dsh-skin-scanner-target[data-ping="true"] {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1.18);
   box-shadow:
@@ -454,7 +456,7 @@ body.dsh-skin-galactic-opera .dsh-skin-scanner-target[data-lit="true"] {
     0 0 14px rgba(255,207,92,0.96),
     0 0 30px rgba(125,227,255,0.68),
     0 0 54px rgba(255,71,120,0.28);
-  animation: dsh-skin-scanner-target-ping 260ms ease-out both;
+  animation: dsh-skin-scanner-target-double-ping 640ms ease-out both;
 }
 
 body.dsh-skin-galactic-opera .dsh-skin-route-map {
@@ -646,9 +648,9 @@ body.dsh-skin-galactic-opera :is(pre, code, textarea, input, select, [class*="me
     inset 0 0 20px rgba(255, 207, 92, 0.035) !important;
 }
 
-body.dsh-skin-galactic-opera.dsh-skin-input-active :is(textarea, input, [contenteditable="true"]):hover,
-body.dsh-skin-galactic-opera.dsh-skin-input-active :is(textarea, input, [contenteditable="true"]):focus,
-body.dsh-skin-galactic-opera.dsh-skin-input-active :is(textarea, input, [contenteditable="true"]):focus-within {
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active :is(textarea, input, [contenteditable]:not([contenteditable="false"])):hover,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active :is(textarea, input, [contenteditable]:not([contenteditable="false"])):focus,
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active :is(textarea, input, [contenteditable]:not([contenteditable="false"])):focus-within {
   outline: none !important;
   box-shadow: none !important;
 }
@@ -658,12 +660,9 @@ body.dsh-skin-galactic-opera ::selection {
   background: rgba(255, 207, 92, 0.86);
 }
 
-body.dsh-skin-galactic-opera * {
-  scrollbar-color: rgba(125, 227, 255, 0.42) rgba(5, 7, 17, 0.40);
-}
-
 body.dsh-skin-galactic-opera .dsh-skin-telemetry-source-hidden {
   opacity: 0 !important;
+  pointer-events: none !important;
 }
 
 body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel[hidden] {
@@ -701,6 +700,11 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel {
   pointer-events: none;
 }
 
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active .dsh-skin-telemetry-panel {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
 body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel[data-collapsed="true"] {
   width: 24px;
   min-height: 24px;
@@ -907,9 +911,11 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
   50% { opacity: 1; transform: rotate(7deg) scaleX(1); }
 }
 
-@keyframes dsh-skin-scanner-target-ping {
-  0%, 100% { transform: translate(-50%, -50%) scale(0.86); opacity: 0.68; }
-  50% { transform: translate(-50%, -50%) scale(1.22); opacity: 1; }
+@keyframes dsh-skin-scanner-target-double-ping {
+  0%, 100% { transform: translate(-50%, -50%) scale(0.72); opacity: 0.04; }
+  12%, 42% { transform: translate(-50%, -50%) scale(1.24); opacity: 1; }
+  27%, 57% { transform: translate(-50%, -50%) scale(0.86); opacity: 0.34; }
+  72% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.82; }
 }
 
 @keyframes dsh-skin-click-pulse {
@@ -918,7 +924,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
   100% { opacity: 0; width: 132px; height: 132px; filter: brightness(0.8); }
 }
 
-@keyframes dsh-skin-hyperspace-burst {
+@keyframes dsh-skin-galactic-opera-hyperspace-burst {
   0% { opacity: 0; transform: scale(0.32) rotate(0deg); }
   15% { opacity: 0.9; }
   100% { opacity: 0; transform: scale(1.45) rotate(10deg); }
@@ -1043,20 +1049,43 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			return decor;
 		}
 
+		const EDITABLE_CONTENT_SELECTOR = `[contenteditable]:not([contenteditable="false"])`;
+		let reducedMotionQuery;
+		let reducedMotionMatches = false;
+		let reducedMotionListener;
+
 		function isReducedMotion() {
-			return typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+			if (typeof matchMedia === "undefined") return false;
+			if (reducedMotionQuery === undefined) {
+				reducedMotionQuery = matchMedia("(prefers-reduced-motion: reduce)");
+				reducedMotionMatches = reducedMotionQuery.matches;
+				reducedMotionListener = (event) => { reducedMotionMatches = event.matches; };
+				if (typeof reducedMotionQuery.addEventListener === "function") reducedMotionQuery.addEventListener("change", reducedMotionListener);
+				else if (typeof reducedMotionQuery.addListener === "function") reducedMotionQuery.addListener(reducedMotionListener);
+			}
+			return reducedMotionMatches;
+		}
+
+		function disposeReducedMotionCache() {
+			if (reducedMotionQuery !== undefined && reducedMotionListener !== undefined) {
+				if (typeof reducedMotionQuery.removeEventListener === "function") reducedMotionQuery.removeEventListener("change", reducedMotionListener);
+				else if (typeof reducedMotionQuery.removeListener === "function") reducedMotionQuery.removeListener(reducedMotionListener);
+			}
+			reducedMotionQuery = undefined;
+			reducedMotionMatches = false;
+			reducedMotionListener = undefined;
 		}
 
 		function isEditableTarget(target) {
 			if (!(target instanceof Element)) return false;
 			const tag = target.tagName.toLowerCase();
-			return tag === "input" || tag === "textarea" || tag === "select" || target.closest("[contenteditable=true]") !== null;
+			return tag === "input" || tag === "textarea" || tag === "select" || target.closest(EDITABLE_CONTENT_SELECTOR) !== null;
 		}
 
 		function isInstructionInputTarget(target) {
 			if (!(target instanceof Element)) return false;
 			const tag = target.tagName.toLowerCase();
-			return tag === "textarea" || target.closest("[contenteditable=true]") !== null;
+			return tag === "textarea" || target.closest(EDITABLE_CONTENT_SELECTOR) !== null;
 		}
 
 		function isLikelySendButton(target) {
@@ -1064,7 +1093,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			const button = target.closest("button");
 			if (!(button instanceof HTMLButtonElement)) return false;
 			const form = button.closest("form");
-			if (form !== null && form.querySelector("textarea, [contenteditable=true]") !== null && button.type === "submit") return true;
+			if (form !== null && form.querySelector(`textarea, ${EDITABLE_CONTENT_SELECTOR}`) !== null && button.type === "submit") return true;
 			const label = `${button.getAttribute("aria-label") ?? ""} ${button.getAttribute("title") ?? ""} ${button.textContent ?? ""}`.toLowerCase();
 			return /send|submit|发送|提交|送出|传送/.test(label);
 		}
@@ -1072,53 +1101,76 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 		function installInteractions(decor) {
 			if (typeof document === "undefined" || typeof window === "undefined" || decor === undefined) return () => {};
 			let frame = 0;
-			let sweepFrame = 0;
-			let sweepTimer = 0;
 			let latestX = window.innerWidth / 2;
 			let latestY = window.innerHeight / 2;
-			let targetAngle = 0;
+			let lastParallaxX = "";
+			let lastParallaxY = "";
 			let pulseIndex = 0;
 			let hyperspaceTimer;
 			let inputFocusTimer;
+			let scannerPingTimer;
 			let lastHyperspaceAt = 0;
+			const scanner = decor.querySelector(".dsh-skin-scanner");
 			const scannerTarget = decor.querySelector(".dsh-skin-scanner-target");
-			const scannerStartedAt = performance.now();
 			const pulseColors = ["rgba(125,227,255,0.94)", "rgba(255,207,92,0.92)", "rgba(255,71,120,0.88)"];
 			const updatePointer = () => {
 				frame = 0;
 				const nx = (latestX / Math.max(1, window.innerWidth) - 0.5) * 2;
 				const ny = (latestY / Math.max(1, window.innerHeight) - 0.5) * 2;
-				document.body.style.setProperty("--dsh-skin-parallax-x", `${Math.round(nx * -10)}px`);
-				document.body.style.setProperty("--dsh-skin-parallax-y", `${Math.round(ny * -8)}px`);
-				const scanner = decor.querySelector(".dsh-skin-scanner");
-				if (scanner instanceof HTMLElement) {
-					const rect = scanner.getBoundingClientRect();
-					const scannerCenterX = rect.left + rect.width / 2;
-					const scannerCenterY = rect.top + rect.height / 2;
-					// Navigation mode: direction is measured from the viewport center,
-					// then projected onto the scanner disk so it behaves like a HUD compass.
-					const viewportCenterX = window.innerWidth / 2;
-					const viewportCenterY = window.innerHeight / 2;
-					const angle = Math.atan2(latestY - viewportCenterY, latestX - viewportCenterX);
-					targetAngle = (angle * 180 / Math.PI + 360) % 360;
-					const radius = Math.max(10, Math.min(rect.width, rect.height) * 0.38);
-					document.body.style.setProperty("--dsh-skin-scanner-dot-x", `${Math.round(scannerCenterX + Math.cos(angle) * radius)}px`);
-					document.body.style.setProperty("--dsh-skin-scanner-dot-y", `${Math.round(scannerCenterY + Math.sin(angle) * radius)}px`);
+				const nextParallaxX = `${Math.round(nx * -10)}px`;
+				const nextParallaxY = `${Math.round(ny * -8)}px`;
+				if (nextParallaxX !== lastParallaxX) {
+					lastParallaxX = nextParallaxX;
+					document.body.style.setProperty("--dsh-skin-parallax-x", nextParallaxX);
+				}
+				if (nextParallaxY !== lastParallaxY) {
+					lastParallaxY = nextParallaxY;
+					document.body.style.setProperty("--dsh-skin-parallax-y", nextParallaxY);
 				}
 			};
+			const pingScannerAt = (clientX, clientY) => {
+				if (!(scanner instanceof HTMLElement) || !(scannerTarget instanceof HTMLElement)) return;
+				const rect = scanner.getBoundingClientRect();
+				const scannerCenterX = rect.left + rect.width / 2;
+				const scannerCenterY = rect.top + rect.height / 2;
+				const viewportCenterX = window.innerWidth / 2;
+				const viewportCenterY = window.innerHeight / 2;
+				const dx = clientX - viewportCenterX;
+				const dy = clientY - viewportCenterY;
+				const distance = Math.hypot(dx, dy);
+				const farthestX = dx >= 0 ? window.innerWidth - viewportCenterX : viewportCenterX;
+				const farthestY = dy >= 0 ? window.innerHeight - viewportCenterY : viewportCenterY;
+				const maxDistance = Math.max(1, Math.hypot(farthestX, farthestY));
+				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`);
+				scannerTarget.removeAttribute("data-ping");
+				// Force the double-flash animation to restart on repeated clicks at the same point.
+				void scannerTarget.offsetWidth;
+				scannerTarget.dataset.ping = "true";
+				window.clearTimeout(scannerPingTimer);
+				scannerPingTimer = window.setTimeout(() => {
+					scannerTarget.removeAttribute("data-ping");
+				}, 700);
+			};
 			const isTypingActive = () => document.activeElement instanceof Element && isEditableTarget(document.activeElement);
 			const setInputActive = (active) => {
 				window.clearTimeout(inputFocusTimer);
 				if (active) {
-					document.body.classList.add("dsh-skin-input-active");
+					document.body.classList.add("dsh-skin-galactic-opera-input-active");
 				} else {
 					inputFocusTimer = window.setTimeout(() => {
-						document.body.classList.remove("dsh-skin-input-active");
+						document.body.classList.remove("dsh-skin-galactic-opera-input-active");
 					}, 160);
 				}
 			};
 			const onPointerMove = (event) => {
 				if (isReducedMotion() || isTypingActive()) return;
+				const dx = event.clientX - latestX;
+				const dy = event.clientY - latestY;
+				if (frame === 0 && dx * dx + dy * dy < 9) return;
 				latestX = event.clientX;
 				latestY = event.clientY;
 				if (frame === 0) frame = requestAnimationFrame(updatePointer);
@@ -1128,10 +1180,10 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				const now = performance.now();
 				if (now - lastHyperspaceAt < 1200) return;
 				lastHyperspaceAt = now;
-				document.body.classList.add("dsh-skin-hyperspace");
+				document.body.classList.add("dsh-skin-galactic-opera-hyperspace");
 				window.clearTimeout(hyperspaceTimer);
 				hyperspaceTimer = window.setTimeout(() => {
-					document.body.classList.remove("dsh-skin-hyperspace");
+					document.body.classList.remove("dsh-skin-galactic-opera-hyperspace");
 				}, 900);
 			};
 			const onPointerDown = (event) => {
@@ -1146,6 +1198,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				const remove = () => { pulse.remove(); };
 				pulse.addEventListener("animationend", remove, { once: true });
 				window.setTimeout(remove, 900);
+				pingScannerAt(event.clientX, event.clientY);
 				if (isLikelySendButton(event.target)) window.setTimeout(triggerHyperspace, 40);
 			};
 			const onKeyDown = (event) => {
@@ -1160,26 +1213,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			const onFocusOut = (event) => {
 				if (isEditableTarget(event.target)) setInputActive(false);
 			};
-			const sweepLoop = () => {
-				sweepFrame = 0;
-				sweepTimer = 0;
-				const typing = isTypingActive();
-				if (scannerTarget instanceof HTMLElement) {
-					if (isReducedMotion() || typing) {
-						scannerTarget.removeAttribute("data-lit");
-					} else {
-						// The scanner disk rotates once every 7s. Offset roughly matches the bright conic wedge.
-						const sweepAngle = (((performance.now() - scannerStartedAt) % 7000) / 7000 * 360 + 18) % 360;
-						const delta = Math.abs(((sweepAngle - targetAngle + 540) % 360) - 180);
-						if (delta < 10) scannerTarget.dataset.lit = "true";
-						else scannerTarget.removeAttribute("data-lit");
-					}
-				}
-				if (typing) sweepTimer = window.setTimeout(sweepLoop, 300);
-				else sweepFrame = requestAnimationFrame(sweepLoop);
-			};
 			updatePointer();
-			sweepFrame = requestAnimationFrame(sweepLoop);
 			document.addEventListener("pointermove", onPointerMove, { passive: true });
 			document.addEventListener("pointerdown", onPointerDown, { passive: true });
 			document.addEventListener("keydown", onKeyDown);
@@ -1193,13 +1227,12 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				document.removeEventListener("focusin", onFocusIn);
 				document.removeEventListener("focusout", onFocusOut);
 				window.clearTimeout(inputFocusTimer);
-				document.body.classList.remove("dsh-skin-input-active");
+				document.body.classList.remove("dsh-skin-galactic-opera-input-active");
 				if (frame !== 0) cancelAnimationFrame(frame);
-				if (sweepFrame !== 0) cancelAnimationFrame(sweepFrame);
-				if (sweepTimer !== 0) window.clearTimeout(sweepTimer);
-				if (scannerTarget instanceof HTMLElement) scannerTarget.removeAttribute("data-lit");
+				if (scannerTarget instanceof HTMLElement) scannerTarget.removeAttribute("data-ping");
+				window.clearTimeout(scannerPingTimer);
 				window.clearTimeout(hyperspaceTimer);
-				document.body.classList.remove("dsh-skin-hyperspace");
+				document.body.classList.remove("dsh-skin-galactic-opera-hyperspace");
 				document.body.style.removeProperty("--dsh-skin-parallax-x");
 				document.body.style.removeProperty("--dsh-skin-parallax-y");
 				document.body.style.removeProperty("--dsh-skin-scanner-dot-x");
@@ -1210,11 +1243,15 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 		function installTelemetryPanel() {
 			if (typeof document === "undefined" || typeof window === "undefined") return () => {};
 			const telemetryPattern = /(?:\d[\d.,KkMm%/]*\s*轮\s*[·•]?\s*\d[\d.,KkMm%/]*\s*步)|(?:\d[\d.,KkMm%/]*\s*(?:rounds?|turns?)\s*[·•]?\s*\d[\d.,KkMm%/]*\s*steps?)|LLM\b|工具调用|(?:首\s*)?(?:token|tokens|tok|toks)\s*平均|(?:token|tokens|tok|toks)\/s|缓存命中|缓存|cache\b|cached\b|输入|输出|prompt\b|completion\b/i;
-			const skipSelector = `#${DECOR_ID}, style, script, textarea, input, select, button, [role=button], [aria-haspopup], [contenteditable=true], [role=dialog], [role=menu], [role=listbox], [role=tooltip], [popover], .dsh-skin-pulse, .dsh-skin-telemetry-panel`;
-			const editableDescendantSelector = "textarea, input, select, [contenteditable=true]";
+			const skipSelector = `#${DECOR_ID}, style, script, textarea, input, select, button, [role=button], [aria-haspopup], ${EDITABLE_CONTENT_SELECTOR}, [role=dialog], [role=menu], [role=listbox], [role=tooltip], [popover], .dsh-skin-pulse, .dsh-skin-telemetry-panel`;
+			const editableDescendantSelector = `textarea, input, select, ${EDITABLE_CONTENT_SELECTOR}`;
 			let currentSources = new Set();
 			let lastText = "";
 			let frame = 0;
+			let forceTelemetryRescan = true;
+			let telemetryRefreshesSinceFullScan = 0;
+			const TELEMETRY_UPDATE_DELAY = 300;
+			const TELEMETRY_FULL_RESCAN_UPDATES = 7;
 			let collapsed = false;
 			try {
 				collapsed = window.localStorage?.getItem("dsh-skin-galactic-opera:telemetry-collapsed") === "true";
@@ -1227,24 +1264,52 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			panel.hidden = true;
 			const content = document.createElement("div");
 			content.className = "dsh-skin-telemetry-content";
+			const rowMetrics = Array.from({ length: 5 }, () => {
+				const row = document.createElement("div");
+				row.className = "dsh-skin-telemetry-row";
+				row.hidden = true;
+				const metric = document.createElement("span");
+				metric.className = "dsh-skin-telemetry-value dsh-skin-telemetry-value-full";
+				row.append(metric);
+				content.append(row);
+				return { row, metric };
+			});
 			panel.append(content);
 			const toggle = document.createElement("button");
 			toggle.type = "button";
 			toggle.className = "dsh-skin-telemetry-toggle";
 			toggle.hidden = true;
 			document.body.append(panel, toggle);
+			const skinMutationSelector = `#${DECOR_ID}, .dsh-skin-pulse, .dsh-skin-telemetry-panel, .dsh-skin-telemetry-toggle`;
 			const isSkippable = (element) => element.closest(skipSelector) !== null;
 			const hasEditableDescendant = (element) => element.querySelector(editableDescendantSelector) !== null;
-			const getTelemetryText = (element) => (element.innerText || element.textContent || "").replace(/\s+/g, " ").trim();
-			const scoreCandidate = (element) => {
-				if (!(element instanceof HTMLElement) || isSkippable(element) || hasEditableDescendant(element)) return 0;
+			const normalizeTelemetryText = (text) => text.replace(/\s+/g, " ").trim();
+			const getTelemetryProbeText = (element) => normalizeTelemetryText(element.textContent || "");
+			const getTelemetryText = (element) => normalizeTelemetryText(element.innerText || element.textContent || "");
+			const getMutationElement = (node) => node instanceof Element ? node : node.parentElement;
+			const isSkinOwnedNode = (node) => getMutationElement(node)?.closest(skinMutationSelector) !== null;
+			const isSkinOwnedMutation = (mutation) => {
+				if (isSkinOwnedNode(mutation.target)) return true;
+				let touched = false;
+				for (const node of mutation.addedNodes) {
+					touched = true;
+					if (!isSkinOwnedNode(node)) return false;
+				}
+				for (const node of mutation.removedNodes) {
+					touched = true;
+					if (!isSkinOwnedNode(node)) return false;
+				}
+				return touched;
+			};
+			const getCandidateInfo = (element) => {
+				if (!(element instanceof HTMLElement) || isSkippable(element) || hasEditableDescendant(element)) return undefined;
 				const rect = element.getBoundingClientRect();
 				const compactBottomBar = rect.height <= 46 && rect.width <= window.innerWidth && rect.bottom > window.innerHeight - 150;
-				if (rect.width < 12 || rect.height < 8 || (!compactBottomBar && rect.width > Math.min(620, window.innerWidth * 0.72)) || rect.height > 86) return 0;
-				if (rect.bottom < window.innerHeight - 170) return 0;
-				const text = getTelemetryText(element);
-				if (text.length < 2 || text.length > 360 || !telemetryPattern.test(text) || !/\d/.test(text)) return 0;
-				if (/设置\s+设置\s+通用设置|Cmd\/Ctrl\+Enter|使用另一行|排队发送|Agent\s+预设/i.test(text)) return 0;
+				if (rect.width < 12 || rect.height < 8 || (!compactBottomBar && rect.width > Math.min(620, window.innerWidth * 0.72)) || rect.height > 86) return undefined;
+				if (rect.bottom < window.innerHeight - 170) return undefined;
+				const text = getTelemetryProbeText(element);
+				if (text.length < 2 || text.length > 360 || !telemetryPattern.test(text) || !/\d/.test(text)) return undefined;
+				if (/设置\s+设置\s+通用设置|Cmd\/Ctrl\+Enter|使用另一行|排队发送|Agent\s+预设/i.test(text)) return undefined;
 				let score = compactBottomBar ? 4 : 1;
 				if (rect.bottom > window.innerHeight - 72) score += 3;
 				if (rect.right > window.innerWidth * 0.45) score += 1;
@@ -1252,40 +1317,41 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				if (/调用|消耗|上下文|usage|context|缓存|命中|输入|输出/i.test(text)) score += 2;
 				if (/轮次|轮|步骤|步数|步|steps?|rounds?|turns?/i.test(text)) score += 2;
 				if (/[·•|；;]/.test(text)) score += 2;
-				if (/button|input|textarea|select/i.test(element.tagName)) score -= 4;
-				return score;
+				return { element, rect, score, text };
 			};
 			const chooseTelemetryElements = () => {
 				const xs = [0.10, 0.22, 0.34, 0.46, 0.58, 0.70, 0.82, 0.94];
 				const ys = [18, 38, 62, 90, 122, 150];
 				const candidates = new Map();
-				for (const xRatio of xs) for (const yOffset of ys) {
-					const x = window.innerWidth * xRatio;
-					const y = window.innerHeight - yOffset;
-					if (y < 0) continue;
-					for (const base of document.elementsFromPoint(x, y)) {
-						let element = base;
-						for (let depth = 0; element instanceof HTMLElement && depth < 8; depth += 1, element = element.parentElement) {
-							const score = scoreCandidate(element);
-							if (score > 0) candidates.set(element, Math.max(candidates.get(element) ?? 0, score));
+				const temporarilyRestoredSources = [...currentSources].filter((source) => source.classList.contains("dsh-skin-telemetry-source-hidden"));
+				// elementsFromPoint ignores pointer-events:none. Temporarily restore the previous source
+				// during the same JS task so full rescans do not miss the hidden native bottom bar.
+				for (const source of temporarilyRestoredSources) source.classList.remove("dsh-skin-telemetry-source-hidden");
+				try {
+					for (const xRatio of xs) for (const yOffset of ys) {
+						const x = window.innerWidth * xRatio;
+						const y = window.innerHeight - yOffset;
+						if (y < 0) continue;
+						for (const base of document.elementsFromPoint(x, y)) {
+							let element = base;
+							for (let depth = 0; element instanceof HTMLElement && depth < 8; depth += 1, element = element.parentElement) {
+								const candidate = getCandidateInfo(element);
+								if (candidate !== undefined) {
+									const previous = candidates.get(element);
+									if (previous === undefined || candidate.score > previous.score) candidates.set(element, candidate);
+								}
+							}
 						}
 					}
+				} finally {
+					for (const source of temporarilyRestoredSources) if (source.isConnected) source.classList.add("dsh-skin-telemetry-source-hidden");
 				}
-				return [...candidates]
-					.sort(([a, aScore], [b, bScore]) => {
-						if (bScore !== aScore) return bScore - aScore;
-						const ar = a.getBoundingClientRect();
-						const br = b.getBoundingClientRect();
-						return ar.top - br.top || ar.left - br.left;
-					})
-					.filter(([element], index, entries) => !entries.slice(0, index).some(([selected]) => selected.contains(element) || element.contains(selected)))
+				return [...candidates.values()]
+					.sort((a, b) => b.score - a.score || a.rect.top - b.rect.top || a.rect.left - b.rect.left)
+					.filter((candidate, index, entries) => !entries.slice(0, index).some(({ element: selected }) => selected.contains(candidate.element) || candidate.element.contains(selected)))
 					.slice(0, 10)
-					.map(([element]) => element)
-					.sort((a, b) => {
-						const ar = a.getBoundingClientRect();
-						const br = b.getBoundingClientRect();
-						return ar.top - br.top || ar.left - br.left;
-					});
+					.sort((a, b) => a.rect.top - b.rect.top || a.rect.left - b.rect.left)
+					.map(({ element }) => element);
 			};
 			const splitTelemetryRows = (text) => {
 				const normalized = text
@@ -1380,36 +1446,48 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				event.stopPropagation();
 				setCollapsed(!collapsed);
 			});
-			const renderPanel = (text) => {
-				const rows = splitTelemetryRows(text);
+			const renderPanel = (telemetryText) => {
+				const rows = splitTelemetryRows(telemetryText);
 				panel.hidden = rows.length === 0;
 				toggle.hidden = rows.length === 0;
-				content.replaceChildren(...rows.map((text) => {
-					const row = document.createElement("div");
-					row.className = "dsh-skin-telemetry-row";
-					const metric = document.createElement("span");
-					metric.className = "dsh-skin-telemetry-value dsh-skin-telemetry-value-full";
-					metric.textContent = text;
-					row.append(metric);
-					return row;
-				}));
+				rowMetrics.forEach(({ row, metric }, index) => {
+					const rowText = rows[index] ?? "";
+					row.hidden = rowText === "";
+					if (metric.textContent !== rowText) metric.textContent = rowText;
+				});
 			};
 			const isTelemetryPaused = () => document.activeElement instanceof Element && isInstructionInputTarget(document.activeElement);
+			const getSourcesText = (sources) => [...sources].map(getTelemetryText).filter(Boolean).join(" | ");
+			const areCachedSourcesUsable = () => {
+				if (currentSources.size === 0) return false;
+				const sources = [...currentSources];
+				if (!sources.every((source) => source.isConnected && getCandidateInfo(source) !== undefined)) return false;
+				return splitTelemetryRows(getSourcesText(currentSources)).length > 0;
+			};
 			const update = () => {
 				frame = 0;
 				if (isTelemetryPaused()) return;
-				const nextSources = new Set(chooseTelemetryElements());
-				const text = [...nextSources].map(getTelemetryText).filter(Boolean).join(" | ");
-				for (const source of currentSources) if (!nextSources.has(source)) source.classList.remove("dsh-skin-telemetry-source-hidden");
-				for (const source of nextSources) if (!currentSources.has(source)) source.classList.add("dsh-skin-telemetry-source-hidden");
-				currentSources = nextSources;
+				let nextSources = currentSources;
+				let text = getSourcesText(nextSources);
+				const needsFullScan = forceTelemetryRescan || telemetryRefreshesSinceFullScan >= TELEMETRY_FULL_RESCAN_UPDATES || !areCachedSourcesUsable();
+				if (needsFullScan) {
+					nextSources = new Set(chooseTelemetryElements());
+					text = getSourcesText(nextSources);
+					for (const source of currentSources) if (!nextSources.has(source)) source.classList.remove("dsh-skin-telemetry-source-hidden");
+					for (const source of nextSources) if (!currentSources.has(source)) source.classList.add("dsh-skin-telemetry-source-hidden");
+					currentSources = nextSources;
+					forceTelemetryRescan = false;
+					telemetryRefreshesSinceFullScan = 0;
+				} else {
+					telemetryRefreshesSinceFullScan += 1;
+				}
 				if (text === lastText) return;
 				lastText = text;
 				renderPanel(text);
 			};
 			const schedule = () => {
 				if (isTelemetryPaused()) return;
-				if (frame === 0) frame = window.setTimeout(update, 180);
+				if (frame === 0) frame = window.setTimeout(update, TELEMETRY_UPDATE_DELAY);
 			};
 			const onTelemetryFocusIn = (event) => {
 				if (!isInstructionInputTarget(event.target)) return;
@@ -1421,15 +1499,22 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			const onTelemetryFocusOut = (event) => {
 				if (isInstructionInputTarget(event.target)) window.setTimeout(schedule, 240);
 			};
-			const observer = typeof MutationObserver === "undefined" ? undefined : new MutationObserver(schedule);
+			const onTelemetryResize = () => {
+				forceTelemetryRescan = true;
+				schedule();
+			};
+			const observer = typeof MutationObserver === "undefined" ? undefined : new MutationObserver((mutations) => {
+				if (mutations.every(isSkinOwnedMutation)) return;
+				schedule();
+			});
 			schedule();
 			observer?.observe(document.body, { childList: true, subtree: true, characterData: true });
-			window.addEventListener("resize", schedule, { passive: true });
+			window.addEventListener("resize", onTelemetryResize, { passive: true });
 			document.addEventListener("focusin", onTelemetryFocusIn);
 			document.addEventListener("focusout", onTelemetryFocusOut);
 			return () => {
 				observer?.disconnect();
-				window.removeEventListener("resize", schedule);
+				window.removeEventListener("resize", onTelemetryResize);
 				document.removeEventListener("focusin", onTelemetryFocusIn);
 				document.removeEventListener("focusout", onTelemetryFocusOut);
 				if (frame !== 0) window.clearTimeout(frame);
@@ -1451,6 +1536,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				return () => {
 					disposeTelemetryPanel();
 					disposeInteractions();
+					disposeReducedMotionCache();
 					if (typeof document !== "undefined") document.body.classList.remove("dsh-skin-galactic-opera");
 					decor?.remove();
 					style?.remove();

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "dsh-skin-galactic-opera",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Unofficial cinematic space-opera dark skin bundle for the DSH Web GUI.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xmnathan/dsh-skin-galactic-opera.git"
+  },
+  "homepage": "https://github.com/xmnathan/dsh-skin-galactic-opera#readme",
+  "bugs": {
+    "url": "https://github.com/xmnathan/dsh-skin-galactic-opera/issues"
+  },
   "type": "module",
   "main": "lib/index.js",
   "exports": {
@@ -19,8 +27,9 @@
     "CHANGELOG.md"
   ],
   "scripts": {
-    "check": "node --check lib/client.js",
-    "pack:dry": "npm pack --dry-run"
+    "check": "node --check lib/client.js && node --check lib/index.js",
+    "pack:dry": "npm pack --dry-run",
+    "prepublishOnly": "npm run check"
   },
   "keywords": [
     "dsh",