dsh-skin-galactic-opera 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this package will be documented in this file.
 
+## 0.1.4 - 2026-08-28
+
+### Fixed
+
+- Restores the top-right satellite's original 0.1.2 elliptical orbit behavior by excluding satellite and orbit animations from typing low-distraction pause rules.
+
+## 0.1.3 - 2026-08-27
+
+### Added
+
+- Triangle collapse/expand control that complements the bottom-right telemetry panel corner cut and remembers its state.
+
+### Changed
+
+- Reduces visual and JavaScript activity while typing by pausing high-motion skin effects, scanner updates, pointer parallax, click pulses on editable controls, and telemetry rescans during active input.
+
 ## 0.1.2 - 2026-08-27
 
 ### Fixed

package/lib/client.js

@@ -139,6 +139,38 @@ 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 {
+  animation-play-state: paused !important;
+}
+
+body.dsh-skin-galactic-opera.dsh-skin-input-active::before {
+  opacity: 0.28;
+}
+
+body.dsh-skin-galactic-opera.dsh-skin-input-active::after {
+  opacity: 0.12;
+}
+
+body.dsh-skin-galactic-opera.dsh-skin-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 {
+  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) {
+  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) {
+  opacity: 0.08 !important;
+}
+
 body.dsh-skin-galactic-opera #root > *,
 body.dsh-skin-galactic-opera main,
 body.dsh-skin-galactic-opera aside,
@@ -614,6 +646,13 @@ 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 {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 body.dsh-skin-galactic-opera ::selection {
   color: #03040b;
   background: rgba(255, 207, 92, 0.86);
@@ -662,6 +701,23 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel {
   pointer-events: none;
 }
 
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel[data-collapsed="true"] {
+  width: 24px;
+  min-height: 24px;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel[data-collapsed="true"]::before,
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel[data-collapsed="true"]::after,
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel[data-collapsed="true"] .dsh-skin-telemetry-content {
+  display: none !important;
+}
+
 body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel::before {
   content: "TELEMETRY";
   position: absolute;
@@ -685,6 +741,71 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel::after {
   pointer-events: none;
 }
 
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-toggle[hidden] {
+  display: none !important;
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-toggle {
+  position: fixed;
+  right: max(18px, 2.4vmin);
+  bottom: max(18px, 2.4vmin);
+  z-index: 2147483645;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid rgba(255,207,92,0.78);
+  border-left-color: rgba(125,227,255,0.54);
+  border-top-color: rgba(125,227,255,0.32);
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  cursor: pointer;
+  pointer-events: auto;
+  color: transparent;
+  background:
+    linear-gradient(135deg, transparent 0 43%, rgba(7,12,32,0.88) 44% 100%),
+    radial-gradient(circle at 72% 74%, rgba(255,207,92,0.98), rgba(125,227,255,0.72) 38%, rgba(255,71,120,0.34) 68%, transparent 72%);
+  box-shadow:
+    0 0 0 1px rgba(3,4,11,0.48),
+    0 0 18px rgba(125,227,255,0.42),
+    inset -5px -5px 13px rgba(255,207,92,0.18) !important;
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-toggle::before {
+  content: "";
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  width: 7px;
+  height: 7px;
+  border-right: 2px solid rgba(248,251,255,0.95);
+  border-bottom: 2px solid rgba(248,251,255,0.95);
+  filter: drop-shadow(0 0 5px rgba(255,207,92,0.82));
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-toggle[data-collapsed="true"]::before {
+  right: 7px;
+  bottom: 7px;
+  border-right: 0;
+  border-bottom: 0;
+  border-left: 2px solid rgba(248,251,255,0.95);
+  border-top: 2px solid rgba(248,251,255,0.95);
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-toggle:hover {
+  box-shadow:
+    0 0 0 1px rgba(255,207,92,0.62),
+    0 0 24px rgba(255,207,92,0.52),
+    0 0 38px rgba(125,227,255,0.30),
+    inset -5px -5px 15px rgba(255,207,92,0.26) !important;
+}
+
 body.dsh-skin-galactic-opera .dsh-skin-telemetry-row {
   position: relative;
   z-index: 1;
@@ -952,11 +1073,13 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			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 pulseIndex = 0;
 			let hyperspaceTimer;
+			let inputFocusTimer;
 			let lastHyperspaceAt = 0;
 			const scannerTarget = decor.querySelector(".dsh-skin-scanner-target");
 			const scannerStartedAt = performance.now();
@@ -983,8 +1106,19 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 					document.body.style.setProperty("--dsh-skin-scanner-dot-y", `${Math.round(scannerCenterY + Math.sin(angle) * radius)}px`);
 				}
 			};
+			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");
+				} else {
+					inputFocusTimer = window.setTimeout(() => {
+						document.body.classList.remove("dsh-skin-input-active");
+					}, 160);
+				}
+			};
 			const onPointerMove = (event) => {
-				if (isReducedMotion()) return;
+				if (isReducedMotion() || isTypingActive()) return;
 				latestX = event.clientX;
 				latestY = event.clientY;
 				if (frame === 0) frame = requestAnimationFrame(updatePointer);
@@ -1001,7 +1135,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				}, 900);
 			};
 			const onPointerDown = (event) => {
-				if (isReducedMotion()) return;
+				if (isReducedMotion() || isEditableTarget(event.target)) return;
 				const pulse = document.createElement("span");
 				pulse.className = "dsh-skin-pulse";
 				pulse.style.setProperty("--dsh-skin-pulse-x", `${event.clientX}px`);
@@ -1020,9 +1154,18 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				if (event.code !== "Enter" || event.shiftKey || event.altKey) return;
 				window.setTimeout(triggerHyperspace, 40);
 			};
+			const onFocusIn = (event) => {
+				if (isEditableTarget(event.target)) setInputActive(true);
+			};
+			const onFocusOut = (event) => {
+				if (isEditableTarget(event.target)) setInputActive(false);
+			};
 			const sweepLoop = () => {
+				sweepFrame = 0;
+				sweepTimer = 0;
+				const typing = isTypingActive();
 				if (scannerTarget instanceof HTMLElement) {
-					if (isReducedMotion()) {
+					if (isReducedMotion() || typing) {
 						scannerTarget.removeAttribute("data-lit");
 					} else {
 						// The scanner disk rotates once every 7s. Offset roughly matches the bright conic wedge.
@@ -1032,19 +1175,28 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 						else scannerTarget.removeAttribute("data-lit");
 					}
 				}
-				sweepFrame = requestAnimationFrame(sweepLoop);
+				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);
+			document.addEventListener("focusin", onFocusIn);
+			document.addEventListener("focusout", onFocusOut);
+			if (isTypingActive()) setInputActive(true);
 			return () => {
 				document.removeEventListener("pointermove", onPointerMove);
 				document.removeEventListener("pointerdown", onPointerDown);
 				document.removeEventListener("keydown", onKeyDown);
+				document.removeEventListener("focusin", onFocusIn);
+				document.removeEventListener("focusout", onFocusOut);
+				window.clearTimeout(inputFocusTimer);
+				document.body.classList.remove("dsh-skin-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");
 				window.clearTimeout(hyperspaceTimer);
 				document.body.classList.remove("dsh-skin-hyperspace");
@@ -1063,11 +1215,24 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			let currentSources = new Set();
 			let lastText = "";
 			let frame = 0;
+			let collapsed = false;
+			try {
+				collapsed = window.localStorage?.getItem("dsh-skin-galactic-opera:telemetry-collapsed") === "true";
+			} catch {
+				collapsed = false;
+			}
 			const panel = document.createElement("div");
 			panel.className = "dsh-skin-telemetry-panel";
 			panel.setAttribute("aria-hidden", "true");
 			panel.hidden = true;
-			document.body.appendChild(panel);
+			const content = document.createElement("div");
+			content.className = "dsh-skin-telemetry-content";
+			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 isSkippable = (element) => element.closest(skipSelector) !== null;
 			const hasEditableDescendant = (element) => element.querySelector(editableDescendantSelector) !== null;
 			const getTelemetryText = (element) => (element.innerText || element.textContent || "").replace(/\s+/g, " ").trim();
@@ -1196,10 +1361,30 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				const fixedRows = [roundRow, durationRow, firstTokenRow, cacheRow, inputOutputRow].filter(Boolean);
 				return fixedRows.slice(0, 5);
 			};
+			const setCollapsed = (nextCollapsed) => {
+				collapsed = nextCollapsed;
+				panel.dataset.collapsed = String(collapsed);
+				toggle.dataset.collapsed = String(collapsed);
+				toggle.setAttribute("aria-expanded", String(!collapsed));
+				toggle.setAttribute("aria-label", collapsed ? "展开 telemetry 面板" : "收缩 telemetry 面板");
+				toggle.title = collapsed ? "展开 telemetry 面板" : "收缩 telemetry 面板";
+				try {
+					window.localStorage?.setItem("dsh-skin-galactic-opera:telemetry-collapsed", String(collapsed));
+				} catch {
+					// Storage may be unavailable in private or restricted contexts.
+				}
+			};
+			setCollapsed(collapsed);
+			toggle.addEventListener("click", (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				setCollapsed(!collapsed);
+			});
 			const renderPanel = (text) => {
 				const rows = splitTelemetryRows(text);
 				panel.hidden = rows.length === 0;
-				panel.replaceChildren(...rows.map((text) => {
+				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");
@@ -1209,8 +1394,10 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 					return row;
 				}));
 			};
+			const isTelemetryPaused = () => document.activeElement instanceof Element && isInstructionInputTarget(document.activeElement);
 			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");
@@ -1221,17 +1408,33 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 				renderPanel(text);
 			};
 			const schedule = () => {
-				if (frame === 0) frame = requestAnimationFrame(update);
+				if (isTelemetryPaused()) return;
+				if (frame === 0) frame = window.setTimeout(update, 180);
+			};
+			const onTelemetryFocusIn = (event) => {
+				if (!isInstructionInputTarget(event.target)) return;
+				if (frame !== 0) {
+					window.clearTimeout(frame);
+					frame = 0;
+				}
+			};
+			const onTelemetryFocusOut = (event) => {
+				if (isInstructionInputTarget(event.target)) window.setTimeout(schedule, 240);
 			};
 			const observer = typeof MutationObserver === "undefined" ? undefined : new MutationObserver(schedule);
 			schedule();
 			observer?.observe(document.body, { childList: true, subtree: true, characterData: true });
 			window.addEventListener("resize", schedule, { passive: true });
+			document.addEventListener("focusin", onTelemetryFocusIn);
+			document.addEventListener("focusout", onTelemetryFocusOut);
 			return () => {
 				observer?.disconnect();
 				window.removeEventListener("resize", schedule);
-				if (frame !== 0) cancelAnimationFrame(frame);
+				document.removeEventListener("focusin", onTelemetryFocusIn);
+				document.removeEventListener("focusout", onTelemetryFocusOut);
+				if (frame !== 0) window.clearTimeout(frame);
 				for (const source of currentSources) source.classList.remove("dsh-skin-telemetry-source-hidden");
+				toggle.remove();
 				panel.remove();
 			};
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-skin-galactic-opera",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Unofficial cinematic space-opera dark skin bundle for the DSH Web GUI.",
   "type": "module",
   "main": "lib/index.js",