dsh-skin-galactic-opera 0.1.5 → 0.1.7

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to this package will be documented in this file.
 
+## 0.1.7 - 2026-09-03
+
+### Changed
+
+- Moves the decorative visual layer into Shadow DOM to isolate scanner, planet, pulse, and black-hole geometry from DSH host style regressions.
+- Keeps the input-mode black hole visually stable while still reducing high-motion distraction elsewhere.
+- Aligns the hyperspace burst effect to the black-hole center after Shadow DOM isolation.
+
+### Fixed
+
+- Prevents Shadow DOM container nesting from shifting the scanner disk, planet, satellite orbit, and other decorative elements toward the viewport edges.
+
+## 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

package/lib/client.js

@@ -10,6 +10,7 @@ window.__ModuleLoader__.load({
 		const THEME_LABEL = "Galactic Opera";
 		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 CSS_TAG_ID = `${PLUGIN_ID}/global.css`;
 
 		const TOKENS = Object.freeze({
@@ -160,17 +161,13 @@ body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active #root::before
   will-change: auto;
 }
 
-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-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 :is(.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-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;
+body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active :is(.dsh-skin-energy, .dsh-skin-comet, .dsh-skin-starfighter, .dsh-skin-mission-crawl) {
+  opacity: 0.16 !important;
 }
 
 body.dsh-skin-galactic-opera #root > *,
@@ -197,6 +194,7 @@ body.dsh-skin-galactic-opera [class*="Sidebar"] {
     0 0 40px rgba(125, 227, 255, 0.12) !important;
 }
 
+body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor-host,
 body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor {
   position: fixed;
   inset: -2vmax;
@@ -206,16 +204,28 @@ body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor {
   mix-blend-mode: screen;
 }
 
+body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor-host {
+  display: block;
+  width: auto;
+  height: auto;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+}
+
 body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor::before {
   content: "";
   position: absolute;
-  inset: -12vmax;
+  left: 48%;
+  top: 50%;
+  width: 140vmax;
+  height: 140vmax;
   opacity: 0;
   pointer-events: none;
   background:
     repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 5deg, rgba(125,227,255,0.72) 5.4deg 6deg, transparent 6.4deg 12deg),
     radial-gradient(circle at 50% 50%, rgba(255,255,255,0.82), transparent 8vmin, rgba(255,207,92,0.26) 12vmin, transparent 36vmin);
-  transform: scale(0.5);
+  transform: translate(-50%, -50%) scale(0.5);
   filter: blur(0.2px);
 }
 
@@ -223,6 +233,23 @@ body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-hyperspace .dsh-skin-galact
   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,
+body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor *,
+body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor *::before,
+body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor *::after {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  line-height: 1;
+  text-decoration: none;
+  background-clip: border-box;
+}
+
 body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor span {
   position: absolute;
   display: block;
@@ -584,6 +611,32 @@ body.dsh-skin-galactic-opera .dsh-skin-mission-crawl::before {
   text-shadow: 0 0 14px rgba(255,207,92,0.46);
 }
 
+body.dsh-skin-galactic-opera :is(.dsh-skin-twinkle, .dsh-skin-nebula-core, .dsh-skin-orb, .dsh-skin-scanner, .dsh-skin-scanner-target, .dsh-skin-pulse),
+body.dsh-skin-galactic-opera .dsh-skin-satellite::before,
+body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit::before,
+body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit-front::before,
+body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor :is(.dsh-skin-twinkle, .dsh-skin-nebula-core, .dsh-skin-orb, .dsh-skin-scanner, .dsh-skin-scanner-target, .dsh-skin-pulse),
+body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-satellite::before,
+body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-satellite-orbit::before,
+body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-satellite-orbit-front::before {
+  border-radius: 50% !important;
+  border-top-left-radius: 50% !important;
+  border-top-right-radius: 50% !important;
+  border-bottom-right-radius: 50% !important;
+  border-bottom-left-radius: 50% !important;
+}
+
+body.dsh-skin-galactic-opera :is(.dsh-skin-energy, .dsh-skin-comet),
+body.dsh-skin-galactic-opera .dsh-skin-scanner::after,
+body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor :is(.dsh-skin-energy, .dsh-skin-comet),
+body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-scanner::after {
+  border-radius: 999px !important;
+  border-top-left-radius: 999px !important;
+  border-top-right-radius: 999px !important;
+  border-bottom-right-radius: 999px !important;
+  border-bottom-left-radius: 999px !important;
+}
+
 body.dsh-skin-galactic-opera .dsh-skin-pulse {
   position: fixed;
   left: var(--dsh-skin-pulse-x);
@@ -700,6 +753,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;
@@ -920,9 +978,9 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 }
 
 @keyframes dsh-skin-galactic-opera-hyperspace-burst {
-  0% { opacity: 0; transform: scale(0.32) rotate(0deg); }
+  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.32) rotate(0deg); }
   15% { opacity: 0.9; }
-  100% { opacity: 0; transform: scale(1.45) rotate(10deg); }
+  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45) rotate(10deg); }
 }
 
 @keyframes dsh-skin-route-pulse {
@@ -1004,42 +1062,133 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			return tag;
 		}
 
+		const DECOR_MARKUP = [
+			"<span class=\"dsh-skin-nebula-core\"></span>",
+			"<span class=\"dsh-skin-twinkle dsh-skin-twinkle-a\"></span>",
+			"<span class=\"dsh-skin-twinkle dsh-skin-twinkle-b\"></span>",
+			"<span class=\"dsh-skin-twinkle dsh-skin-twinkle-c\"></span>",
+			"<span class=\"dsh-skin-orb dsh-skin-orb-primary\"></span>",
+			"<span class=\"dsh-skin-orb dsh-skin-orb-moon-a\"></span>",
+			"<span class=\"dsh-skin-satellite-orbit\"></span>",
+			"<span class=\"dsh-skin-satellite-orbit-front\"></span>",
+			"<span class=\"dsh-skin-satellite\"></span>",
+			"<span class=\"dsh-skin-scanner\"></span>",
+			"<span class=\"dsh-skin-scanner-target\"></span>",
+			"<span class=\"dsh-skin-route-map\"></span>",
+			"<span class=\"dsh-skin-energy dsh-skin-energy-cyan\"></span>",
+			"<span class=\"dsh-skin-energy dsh-skin-energy-red\"></span>",
+			"<span class=\"dsh-skin-energy dsh-skin-energy-gold\"></span>",
+			"<span class=\"dsh-skin-starfighter dsh-skin-starfighter-1\"></span>",
+			"<span class=\"dsh-skin-starfighter dsh-skin-starfighter-2\"></span>",
+			"<span class=\"dsh-skin-starfighter dsh-skin-starfighter-3\"></span>",
+			"<span class=\"dsh-skin-mission-crawl\"></span>",
+			"<span class=\"dsh-skin-comet dsh-skin-comet-1\"></span>",
+			"<span class=\"dsh-skin-comet dsh-skin-comet-2\"></span>",
+			"<span class=\"dsh-skin-comet dsh-skin-comet-3\"></span>",
+			"<span class=\"dsh-skin-comet dsh-skin-comet-4\"></span>",
+			"<span class=\"dsh-skin-comet dsh-skin-comet-5\"></span>",
+			"<span class=\"dsh-skin-comet dsh-skin-comet-6\"></span>"
+		].join("");
+
+		function getDecorShadowCss() {
+			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\s+/g, "")}
+
+.dsh-skin-galactic-opera-decor {
+  position: absolute !important;
+  inset: 0 !important;
+  width: auto !important;
+  height: auto !important;
+  z-index: auto !important;
+}
+`;
+		}
+
+		function setImportantStyle(element, name, value) {
+			if (element instanceof HTMLElement) element.style.setProperty(name, value, "important");
+		}
+
+		function hardenDecorHost(decor) {
+			setImportantStyle(decor, "position", "fixed");
+			setImportantStyle(decor, "inset", "-2vmax");
+			setImportantStyle(decor, "z-index", "2147483645");
+			setImportantStyle(decor, "pointer-events", "none");
+			setImportantStyle(decor, "overflow", "hidden");
+			setImportantStyle(decor, "mix-blend-mode", "screen");
+			setImportantStyle(decor, "display", "block");
+			setImportantStyle(decor, "width", "auto");
+			setImportantStyle(decor, "height", "auto");
+			setImportantStyle(decor, "border", "0");
+			setImportantStyle(decor, "border-radius", "0");
+			setImportantStyle(decor, "border-top-left-radius", "0");
+			setImportantStyle(decor, "border-top-right-radius", "0");
+			setImportantStyle(decor, "border-bottom-right-radius", "0");
+			setImportantStyle(decor, "border-bottom-left-radius", "0");
+			setImportantStyle(decor, "background", "transparent");
+		}
+
+		function getDecorRoot(decor) {
+			return decor?.shadowRoot ?? decor;
+		}
+
+		function getDecorLayer(decor) {
+			const root = getDecorRoot(decor);
+			return root?.querySelector?.(".dsh-skin-galactic-opera-decor") ?? root;
+		}
+
+		function hardenDecorGeometry(decor) {
+			const root = getDecorRoot(decor);
+			if (root === undefined || root === null) return;
+			const roundSelector = ".dsh-skin-twinkle, .dsh-skin-nebula-core, .dsh-skin-orb, .dsh-skin-scanner, .dsh-skin-scanner-target";
+			for (const element of root.querySelectorAll(roundSelector)) {
+				setImportantStyle(element, "border-radius", "50%");
+				setImportantStyle(element, "overflow", "visible");
+				setImportantStyle(element, "box-sizing", "border-box");
+			}
+			for (const element of root.querySelectorAll(".dsh-skin-energy, .dsh-skin-comet")) {
+				setImportantStyle(element, "border-radius", "999px");
+				setImportantStyle(element, "overflow", "visible");
+				setImportantStyle(element, "box-sizing", "border-box");
+			}
+		}
+
+		function populateDecor(decor) {
+			if (typeof decor.attachShadow === "function") {
+				const shadow = decor.shadowRoot ?? decor.attachShadow({ mode: "open" });
+				shadow.replaceChildren();
+				decor.replaceChildren();
+				const style = document.createElement("style");
+				style.textContent = getDecorShadowCss();
+				const layer = document.createElement("div");
+				layer.className = "dsh-skin-galactic-opera-decor";
+				layer.innerHTML = DECOR_MARKUP;
+				shadow.append(style, layer);
+			} else {
+				decor.innerHTML = DECOR_MARKUP;
+			}
+			hardenDecorGeometry(decor);
+		}
+
 		function ensureDecor() {
 			if (typeof document === "undefined") return undefined;
 			let decor = document.getElementById(DECOR_ID);
-			if (decor instanceof HTMLDivElement) return decor;
+			if (decor instanceof HTMLDivElement) {
+				decor.className = DECOR_HOST_CLASS;
+				decor.setAttribute("aria-hidden", "true");
+				decor.dataset.plugin = PLUGIN_ID;
+				hardenDecorHost(decor);
+				populateDecor(decor);
+				return decor;
+			}
 			decor = document.createElement("div");
 			decor.id = DECOR_ID;
-			decor.className = "dsh-skin-galactic-opera-decor";
+			decor.className = DECOR_HOST_CLASS;
 			decor.setAttribute("aria-hidden", "true");
 			decor.dataset.plugin = PLUGIN_ID;
-			decor.innerHTML = [
-				"<span class=\"dsh-skin-nebula-core\"></span>",
-				"<span class=\"dsh-skin-twinkle dsh-skin-twinkle-a\"></span>",
-				"<span class=\"dsh-skin-twinkle dsh-skin-twinkle-b\"></span>",
-				"<span class=\"dsh-skin-twinkle dsh-skin-twinkle-c\"></span>",
-				"<span class=\"dsh-skin-orb dsh-skin-orb-primary\"></span>",
-				"<span class=\"dsh-skin-orb dsh-skin-orb-moon-a\"></span>",
-				"<span class=\"dsh-skin-satellite-orbit\"></span>",
-				"<span class=\"dsh-skin-satellite-orbit-front\"></span>",
-				"<span class=\"dsh-skin-satellite\"></span>",
-				"<span class=\"dsh-skin-scanner\"></span>",
-				"<span class=\"dsh-skin-scanner-target\"></span>",
-				"<span class=\"dsh-skin-route-map\"></span>",
-				"<span class=\"dsh-skin-energy dsh-skin-energy-cyan\"></span>",
-				"<span class=\"dsh-skin-energy dsh-skin-energy-red\"></span>",
-				"<span class=\"dsh-skin-energy dsh-skin-energy-gold\"></span>",
-				"<span class=\"dsh-skin-starfighter dsh-skin-starfighter-1\"></span>",
-				"<span class=\"dsh-skin-starfighter dsh-skin-starfighter-2\"></span>",
-				"<span class=\"dsh-skin-starfighter dsh-skin-starfighter-3\"></span>",
-				"<span class=\"dsh-skin-mission-crawl\"></span>",
-				"<span class=\"dsh-skin-comet dsh-skin-comet-1\"></span>",
-				"<span class=\"dsh-skin-comet dsh-skin-comet-2\"></span>",
-				"<span class=\"dsh-skin-comet dsh-skin-comet-3\"></span>",
-				"<span class=\"dsh-skin-comet dsh-skin-comet-4\"></span>",
-				"<span class=\"dsh-skin-comet dsh-skin-comet-5\"></span>",
-				"<span class=\"dsh-skin-comet dsh-skin-comet-6\"></span>"
-			].join("");
+			hardenDecorHost(decor);
+			populateDecor(decor);
 			document.body.appendChild(decor);
 			return decor;
 		}
@@ -1098,20 +1247,32 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			let frame = 0;
 			let latestX = window.innerWidth / 2;
 			let latestY = window.innerHeight / 2;
+			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 decorRoot = getDecorRoot(decor);
+			const decorLayer = getDecorLayer(decor);
+			const scanner = decorRoot?.querySelector?.(".dsh-skin-scanner");
+			const scannerTarget = decorRoot?.querySelector?.(".dsh-skin-scanner-target");
 			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 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;
@@ -1153,6 +1314,9 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			};
 			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);
@@ -1172,11 +1336,14 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				if (isReducedMotion() || isEditableTarget(event.target)) return;
 				const pulse = document.createElement("span");
 				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`);
 				pulse.style.setProperty("--dsh-skin-pulse-color", pulseColors[pulseIndex % pulseColors.length]);
 				pulseIndex += 1;
-				decor.appendChild(pulse);
+				if (decorLayer instanceof Element) decorLayer.appendChild(pulse);
+				else decor.appendChild(pulse);
 				const remove = () => { pulse.remove(); };
 				pulse.addEventListener("animationend", remove, { once: true });
 				window.setTimeout(remove, 900);
@@ -1230,6 +1397,10 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			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";
@@ -1242,6 +1413,16 @@ 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";
@@ -1251,23 +1432,33 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			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 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;
-				const touched = [...mutation.addedNodes, ...mutation.removedNodes];
-				return touched.length > 0 && touched.every(isSkinOwnedNode);
+				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 scoreCandidate = (element) => {
-				if (!(element instanceof HTMLElement) || isSkippable(element) || hasEditableDescendant(element)) return 0;
+			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;
@@ -1275,39 +1466,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;
-				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
@@ -1406,22 +1599,18 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				const rows = splitTelemetryRows(telemetryText);
 				panel.hidden = rows.length === 0;
 				toggle.hidden = rows.length === 0;
-				content.replaceChildren(...rows.map((rowText) => {
-					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 = rowText;
-					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 && scoreCandidate(source) > 0)) return false;
+				if (!sources.every((source) => source.isConnected && getCandidateInfo(source) !== undefined)) return false;
 				return splitTelemetryRows(getSourcesText(currentSources)).length > 0;
 			};
 			const update = () => {
@@ -1429,12 +1618,17 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				if (isTelemetryPaused()) return;
 				let nextSources = currentSources;
 				let text = getSourcesText(nextSources);
-				if (!areCachedSourcesUsable()) {
+				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;
@@ -1442,7 +1636,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			};
 			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;
@@ -1454,18 +1648,22 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			const onTelemetryFocusOut = (event) => {
 				if (isInstructionInputTarget(event.target)) window.setTimeout(schedule, 240);
 			};
+			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);

package/package.json

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