dsh-deepseek-style-theme 2.0.84 → 2.0.85

package/lib/client.js

@@ -2378,6 +2378,19 @@ html[data-dshome-blur="off"] body{
 		//     recipe. Both recipes tilt now, and because the liquid sheet used to be
 		//     the only place carrying `transition: transform`, the motion carries
 		//     its own transition (TILT_TRANSITION) so a recipe cannot lose it.
+		//   * 2.0.85 makes ENGAGEMENT GEOMETRIC and the gates honest. Engagement used
+		//     to need a `pointerover` whose target was inside the card; that is a
+		//     chain of assumptions about product markup (a wrapper with role=button,
+		//     a swapped card node, a portal, an overlay) which a theme cannot verify,
+		//     and failing it looks exactly like a broken effect -- reported as
+		//     "把我的对话框随着鼠标位置而变化的效果补回来". `spotAt()` decides from the
+		//     card's own rectangle on every pointermove, so a missed event costs one
+		//     frame instead of the whole effect; `controlAt()` remains the single hit
+		//     test, and only to answer "is a control under the pointer". The two
+		//     SILENT gates are reported now: `__dshomeTilt()` includes `reducedMotion`
+		//     (an OS setting that disables the effect and looks like a bug) and
+		//     `spots` (0 means the composer no longer matches TILT_SELECTOR), and the
+		//     reduced-motion case logs one info line instead of vanishing.
 		const TILT_SELECTOR = '[data-composer-card],.uV2eYG_card';
 		const TILT_MAX = 0.0175;
 		const TILT_PERSPECTIVE = 800;
@@ -2407,13 +2420,28 @@ html[data-dshome-blur="off"] body{
 			const tilted = new WeakSet();
 			const settle = new Map();
 			const reduced = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-			if (reduced) return () => {};
-			// Readable from the page: the effect is guarded twice, so "it is missing"
-			// is otherwise a guess about which guard ate it. `__dshomeTilt()` answers
-			// that in one call (and reports the recipe it is running under).
+			// Readable from the page: the effect is guarded several times over, so "it
+			// is missing" is otherwise a guess about which guard ate it.
+			// `__dshomeTilt()` answers that in one call -- including the two SILENT
+			// gates, which is why `reduced` and `spots` are in here at all: an OS-level
+			// "reduce motion" or a composer whose markup no longer matches
+			// TILT_SELECTOR both look exactly like a broken effect.
 			try {
-				window.__dshomeTilt = () => ({ recipe: dsttGetGlass(), leaning: current !== null, frozen, engagements, sinceRelease: releasedAt === -Infinity ? null : Math.round(performance.now() - releasedAt) });
+				window.__dshomeTilt = () => ({
+					recipe: dsttGetGlass(),
+					reducedMotion: reduced,
+					spots: document.querySelectorAll(TILT_SELECTOR).length,
+					leaning: current !== null,
+					frozen,
+					engagements,
+					sinceRelease: releasedAt === -Infinity ? null : Math.round(performance.now() - releasedAt)
+				});
 			} catch (error) {}
+			if (reduced) {
+				// Never silent: this is the one gate a user cannot see in any setting.
+				console.info('[dsh-deepseek-style-theme] composer tilt disabled: the system asks for reduced motion (prefers-reduced-motion: reduce)');
+				return () => {};
+			}
 			const release = (spot) => {
 				const pending = settle.get(spot);
 				if (pending !== undefined) {
@@ -2452,21 +2480,48 @@ html[data-dshome-blur="off"] body{
 					tilted.add(spot);
 				});
 			};
+			/**
+			* Which tilt spot contains a point, by RECTANGLE -- deliberately not by
+			* walking `event.target` up to a selector. Engagement used to depend on a
+			* `pointerover` whose target was inside the card, and that is a chain of
+			* assumptions about the product's markup (a wrapper with role=button, a
+			* swapped-in card node, a portal, an overlay) that a theme cannot verify.
+			* The reported symptom of getting it wrong is indistinguishable from a
+			* broken effect: the box just never leans. Geometry is the one thing the
+			* theme can measure for itself.
+			*/
+			const spotAt = (clientX, clientY) => {
+				for (const spot of document.querySelectorAll(TILT_SELECTOR)) {
+					const rect = spot.getBoundingClientRect();
+					if (rect.width <= 0 || rect.height <= 0) continue;
+					if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) continue;
+					return { spot, rect };
+				}
+				return null;
+			};
+			/** The topmost element at a point, used only to decide "is this a control". */
+			const controlAt = (clientX, clientY) => {
+				let node = null;
+				try { node = document.elementFromPoint(clientX, clientY); } catch (error) { node = null; }
+				if (node === null || typeof node.closest !== 'function') return false;
+				return node.closest(TILT_CONTROLS) !== null;
+			};
 			const onOver = (event) => {
+				// Kept for the one thing it does better than a move: it fires the
+				// moment the pointer arrives, before any movement. Everything it
+				// decides is re-derived from geometry, so a missed event costs one
+				// frame, not the effect.
 				const target = event.target;
 				if (target === null || typeof target.closest !== 'function') return;
 				const spot = target.closest(TILT_SELECTOR);
 				if (spot === null) return;
-				// A control is under the pointer: hold the lean exactly where it is.
-				// Releasing here is what used to feed the ~8 Hz hover loop.
-				if (target.closest(TILT_CONTROLS) !== null) {
+				const rect = spot.getBoundingClientRect();
+				if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) return;
+				if (controlAt(event.clientX, event.clientY)) {
 					if (current === spot) frozen = true;
 					return;
 				}
-				// The cooldown gates a fresh engagement only, never an ongoing lean.
 				if (!tilted.has(spot) && performance.now() - releasedAt < TILT_COOLDOWN_MS) return;
-				const rect = spot.getBoundingClientRect();
-				if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) return;
 				const pending = settle.get(spot);
 				if (pending !== undefined) {
 					clearTimeout(pending);
@@ -2477,22 +2532,38 @@ html[data-dshome-blur="off"] body{
 				paint(spot, rect, event.clientX, event.clientY);
 			};
 			const onMove = (event) => {
-				if (current === null) return;
-				const target = event.target;
-				if (target !== null && typeof target.closest === 'function' && target.closest(TILT_CONTROLS) !== null) {
-					frozen = true;
+				const hit = spotAt(event.clientX, event.clientY);
+				if (hit === null) {
+					// Off the card entirely: release only the spot that was leaning.
+					if (current !== null) {
+						release(current);
+						current = null;
+					}
+					return;
+				}
+				const { spot, rect } = hit;
+				if (controlAt(event.clientX, event.clientY)) {
+					// A control is under the pointer: hold the lean exactly where it is
+					// (releasing here is what used to feed the ~8 Hz hover loop).
+					if (current === spot) frozen = true;
 					return;
 				}
+				// The cooldown gates a fresh engagement only, never an ongoing lean.
+				if (!tilted.has(spot) && current !== spot && performance.now() - releasedAt < TILT_COOLDOWN_MS) return;
+				if (current !== spot) {
+					if (current !== null) release(current);
+					const pending = settle.get(spot);
+					if (pending !== undefined) {
+						clearTimeout(pending);
+						settle.delete(spot);
+					}
+					current = spot;
+				}
 				frozen = false;
-				paint(current, current.getBoundingClientRect(), event.clientX, event.clientY);
+				paint(spot, rect, event.clientX, event.clientY);
 			};
 			const onOut = (event) => {
 				if (current === null) return;
-				const target = event.target;
-				if (target !== null && typeof target.closest === 'function') {
-					const spot = target.closest(TILT_SELECTOR);
-					if (spot !== null && spot !== current) return;
-				}
 				const rect = current.getBoundingClientRect();
 				if (event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom) return;
 				release(current);
@@ -2531,7 +2602,7 @@ html[data-dshome-blur="off"] body{
 			if (!supportsWebgl2()) return startParticles();
 			// Which build is running, readable from the page (see README). One line in
 			// the console answers "is the bundle I just installed actually live?".
-			try { window.__dshomeBuild = '2.0.84 bug-report-fixes'; } catch (error) {}
+			try { window.__dshomeBuild = '2.0.85 glass-extras'; } catch (error) {}
 			const canvas = document.createElement('canvas');
 			canvas.setAttribute('data-dsh-deepseek-canvas', '');
 			const style = canvas.style;
@@ -2573,17 +2644,6 @@ html[data-dshome-blur="off"] body{
 			// `attachFluidInteractions` is therefore NOT wired — it is kept in the
 			// file, unmodified, because re-enabling button ripples is one call, but
 			// nothing in this theme uses it today.
-			const stopSpotter = startSpecularSpotter();
-			const stopParallax = startSpecularParallax();
-			const dispersion = startGlassDispersion({ hue: FLUID_HUES[dshomeColor()] });
-			// Both recipes share one filter pair, so the recipe selects the scale:
-			// 104 for liquid (visible edge refraction) and the untouched 60 for
-			// frosted, which is what the pane has always used.
-			const applyGlass = () => {
-				dispersion.setRefraction(dsttGetGlass() === 'liquid' ? LIQUID_REF_SCALE : DEFAULT_REF_SCALE);
-			};
-			applyGlass();
-			const unsubscribeGlass = dsttSubscribe(applyGlass);
 			// ── palette reconciliation ────────────────────────────────────────────
 			// One reader for BOTH inputs the palette depends on: the colour token on
 			// <body> and the dark marker. Reported symptom: "切主题模式背景不变 /
@@ -2608,7 +2668,6 @@ html[data-dshome-blur="off"] body{
 			};
 			const unsubscribeColor = subscribeColor((color) => {
 				syncFluid();
-				try { dispersion.setTint(FLUID_HUES[color] ?? FLUID_HUES.green); } catch (error) {}
 			});
 			const unsubscribeDark = darkSync === null ? null : darkSync.subscribe(syncFluid);
 			// The colour driver writes the token as an attribute; watching it as well
@@ -2624,19 +2683,65 @@ html[data-dshome-blur="off"] body{
 			return () => {
 				unsubscribeColor();
 				if (unsubscribeDark !== null) unsubscribeDark();
+				if (tokenMirror !== null) tokenMirror.disconnect();
+				clearInterval(fluidSync);
+				fluid.dispose();
+				canvas.remove();
+			};
+		}
+
+		/**
+		* The cursor-following half of the glass: the specular spotter (which marks
+		* the surfaces the highlight may land on), the parallax that writes
+		* `--dshome-spec-x/y` for the hovered surface, and the SVG edge refraction.
+		*
+		* These used to be mounted INSIDE {@link startAmbient}, which tied them to
+		* the fluid layer: turning 「动态背景」 off -- which is exactly what the user
+		* did to stop the iGPU squares -- or choosing ③ 自选背景, or landing on an
+		* engine without WebGL2 (the particle fallback returns before them), silently
+		* took the dialog's cursor-following highlight and its edge refraction with
+		* it. Reported as "把我的对话框随着鼠标位置而变化的效果补回来". They belong to
+		* the glass, not to the flow field, so they mount on their own and survive
+		* every background recipe.
+		*/
+		function startGlassExtras() {
+			const stopSpotter = startSpecularSpotter();
+			const stopParallax = startSpecularParallax();
+			const dispersion = startGlassDispersion({ hue: FLUID_HUES[dshomeColor()] });
+			// Both recipes share one filter pair, so the recipe selects the scale:
+			// 104 for liquid (visible edge refraction) and the untouched 60 for
+			// frosted, which is what the pane has always used.
+			const applyGlass = () => {
+				dispersion.setRefraction(dsttGetGlass() === 'liquid' ? LIQUID_REF_SCALE : DEFAULT_REF_SCALE);
+			};
+			applyGlass();
+			const unsubscribeGlass = dsttSubscribe(applyGlass);
+			// The tint follows the DSTT colour token. Same belt-and-braces as the
+			// fluid palette: subscribe AND watch the attribute the driver writes,
+			// because the colour driver writes it before this mount exists.
+			const syncTint = () => {
+				try { dispersion.setTint(FLUID_HUES[dshomeColor()] ?? FLUID_HUES.green); } catch (error) {}
+			};
+			const unsubscribeColor = subscribeColor(syncTint);
+			let tokenMirror = null;
+			try {
+				tokenMirror = new MutationObserver(syncTint);
+				tokenMirror.observe(document.body, { attributes: true, attributeFilter: ['data-dshome-color'] });
+			} catch (error) {
+				tokenMirror = null;
+			}
+			return () => {
+				unsubscribeColor();
 				unsubscribeGlass();
 				if (tokenMirror !== null) tokenMirror.disconnect();
 				dispersion.dispose();
 				stopParallax();
 				stopSpotter();
-				clearInterval(fluidSync);
-				fluid.dispose();
-				canvas.remove();
 			};
 		}
 
 		function startParticles() {
-			try { window.__dshomeBuild = '2.0.84 bug-report-fixes'; } catch (error) {}
+			try { window.__dshomeBuild = '2.0.85 glass-extras'; } catch (error) {}
 			const canvas = document.createElement('canvas');
 			canvas.setAttribute('data-dsh-deepseek-canvas', '');
 			const style = canvas.style;
@@ -4943,6 +5048,18 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 					if (stop !== null) { try { stop(); } catch (error) {} }
 				};
 			}, 'deepseek-style-theme: fluid background');
+			// The cursor-following half of the glass mounts ON ITS OWN, with no
+			// dependence on the fluid layer: see startGlassExtras for why (turning
+			// 「动态背景」 off, or ③ 自选背景, or a machine without WebGL2 used to take
+			// the dialog's cursor-following highlight and the edge refraction with it).
+			ctx.effect(() => {
+				try {
+					return startGlassExtras();
+				} catch (error) {
+					console.error('[dsh-deepseek-style-theme] glass extras failed to mount:', error);
+					return () => {};
+				}
+			}, 'deepseek-style-theme: glass extras (specular + dispersion)');
 			// The composer's hover tilt is independent of the background: it must
 			// survive a machine without WebGL2, where startAmbient() falls back to
 			// the 2D particle field.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-deepseek-style-theme",
   "description": "DeepSeek official-home style theme: WebGL fluid-flow background, liquid glass with SVG edge refraction, glass sidebar and composer, frosted header, running-subagent progress panel, and DeepSeek brand link for the dsh web GUI",
-  "version": "2.0.84",
+  "version": "2.0.85",
   "type": "module",
   "keywords": [
     "deepseek",