dsh-skin-galactic-opera 0.1.6 → 0.1.7

package/CHANGELOG.md

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

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);
@@ -925,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 {
@@ -1009,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;
 		}
@@ -1110,8 +1254,10 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
 			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;
@@ -1190,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);

package/package.json

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