@lemoncat7/dsh-theme-xiaohei 0.3.2 → 0.3.3

package/lib/bloub-heixiu/runtime.js

@@ -42,6 +42,8 @@ export function installComposerBloub(doc = typeof document === 'undefined' ? und
     let hero = null, heroRow = null;
     let bounds;
     let layoutFrame, animationFrame, wake;
+    let frameTimer;
+    let lastPointerStamp = -Infinity;
     let time = 0, lastStamp, activeUntil = 2.5, actionUntil = 0, reactionIndex = 0;
     let pointerSide = 1;
     let special = false, specialIndex = 0;
@@ -67,9 +69,12 @@ export function installComposerBloub(doc = typeof document === 'undefined' ? und
         flight.cancel();
         if (animationFrame !== undefined)
             win.cancelAnimationFrame(animationFrame);
+        if (frameTimer !== undefined)
+            win.clearTimeout(frameTimer);
         if (wake !== undefined)
             win.clearTimeout(wake);
         animationFrame = undefined;
+        frameTimer = undefined;
         wake = undefined;
         lastStamp = undefined;
     }
@@ -105,7 +110,7 @@ export function installComposerBloub(doc = typeof document === 'undefined' ? und
     }
     function animateFor(seconds) {
         activeUntil = Math.max(activeUntil, time + seconds);
-        if (!allowed() || animationFrame !== undefined)
+        if (!allowed() || animationFrame !== undefined || frameTimer !== undefined)
             return;
         if (wake !== undefined)
             win.clearTimeout(wake);
@@ -136,11 +141,17 @@ export function installComposerBloub(doc = typeof document === 'undefined' ? und
         // Stop only with open eyes. The next short life window resumes the same
         // clock, so neither gaze nor a partly completed blink can jump on waking.
         if (time < activeUntil || actionUntil || liveliness(time).lid < .99) {
-            animationFrame = win.requestAnimationFrame(tick);
+            // SVG path deformation needs painting. Cap it instead of following a
+            // 120/144 Hz desktop display; preserve elapsed time and action continuity.
+            frameTimer = win.setTimeout(() => {
+                frameTimer = undefined;
+                if (allowed())
+                    animationFrame = win.requestAnimationFrame(tick);
+            }, 1000 / 30);
         }
         else {
             lastStamp = undefined;
-            wake = win.setTimeout(() => { wake = undefined; animateFor(2); }, 3200);
+            wake = win.setTimeout(() => { wake = undefined; animateFor(1); }, 8000);
         }
     }
     function syncPlayback() {
@@ -251,6 +262,9 @@ export function installComposerBloub(doc = typeof document === 'undefined' ? und
             leave();
             return;
         }
+        if (event.timeStamp - lastPointerStamp < 1000 / 30)
+            return;
+        lastPointerStamp = event.timeStamp;
         const dx = event.clientX - (bounds.left + bounds.width / 2);
         const dy = event.clientY - (bounds.top + bounds.height / 2);
         follow(dx, dy);

package/lib/chrome/conversation-messages.js

@@ -78,8 +78,8 @@ export const XIAOHEI_CONVERSATION_MESSAGES_CSS = `
     inset 0 1px 0 var(--xiaohei-conversation-highlight),
     inset 1px 0 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 42%, transparent),
     0 7px 22px var(--xiaohei-conversation-shadow) !important;
-  -webkit-backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
-  backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   overflow-wrap: anywhere;
 }
 
@@ -113,8 +113,8 @@ export const XIAOHEI_CONVERSATION_MESSAGES_CSS = `
     inset 0 1px 0 var(--xiaohei-conversation-highlight),
     inset -1px 0 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 42%, transparent),
     0 7px 22px var(--xiaohei-conversation-shadow) !important;
-  -webkit-backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
-  backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   overflow-wrap: anywhere;
 }
 
@@ -146,8 +146,8 @@ export const XIAOHEI_CONVERSATION_MESSAGES_CSS = `
   box-shadow:
     inset 0 1px 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 52%, transparent),
     0 4px 14px color-mix(in srgb, var(--xiaohei-conversation-shadow) 58%, transparent);
-  -webkit-backdrop-filter: blur(12px) saturate(118%);
-  backdrop-filter: blur(12px) saturate(118%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   overflow: hidden;
 }
 
@@ -158,8 +158,8 @@ export const XIAOHEI_CONVERSATION_MESSAGES_CSS = `
   border-radius: 9px;
   background: var(--xiaohei-conversation-meta-surface) !important;
   box-shadow: inset 0 1px 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 48%, transparent);
-  -webkit-backdrop-filter: blur(10px) saturate(116%);
-  backdrop-filter: blur(10px) saturate(116%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 
 #root [data-chat-flow-kind='context'],

package/lib/client.js

@@ -928,8 +928,8 @@ var XIAOHEI_CONVERSATION_MESSAGES_CSS = `
     inset 0 1px 0 var(--xiaohei-conversation-highlight),
     inset 1px 0 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 42%, transparent),
     0 7px 22px var(--xiaohei-conversation-shadow) !important;
-  -webkit-backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
-  backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   overflow-wrap: anywhere;
 }
 
@@ -963,8 +963,8 @@ var XIAOHEI_CONVERSATION_MESSAGES_CSS = `
     inset 0 1px 0 var(--xiaohei-conversation-highlight),
     inset -1px 0 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 42%, transparent),
     0 7px 22px var(--xiaohei-conversation-shadow) !important;
-  -webkit-backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
-  backdrop-filter: blur(var(--xiaohei-conversation-blur)) saturate(124%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   overflow-wrap: anywhere;
 }
 
@@ -996,8 +996,8 @@ var XIAOHEI_CONVERSATION_MESSAGES_CSS = `
   box-shadow:
     inset 0 1px 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 52%, transparent),
     0 4px 14px color-mix(in srgb, var(--xiaohei-conversation-shadow) 58%, transparent);
-  -webkit-backdrop-filter: blur(12px) saturate(118%);
-  backdrop-filter: blur(12px) saturate(118%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   overflow: hidden;
 }
 
@@ -1008,8 +1008,8 @@ var XIAOHEI_CONVERSATION_MESSAGES_CSS = `
   border-radius: 9px;
   background: var(--xiaohei-conversation-meta-surface) !important;
   box-shadow: inset 0 1px 0 color-mix(in srgb, var(--xiaohei-conversation-highlight) 48%, transparent);
-  -webkit-backdrop-filter: blur(10px) saturate(116%);
-  backdrop-filter: blur(10px) saturate(116%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 
 #root [data-chat-flow-kind='context'],
@@ -6380,6 +6380,8 @@ function installComposerBloub(doc = typeof document === "undefined" ? void 0 : d
   let hero = null, heroRow = null;
   let bounds;
   let layoutFrame, animationFrame, wake;
+  let frameTimer;
+  let lastPointerStamp = -Infinity;
   let time = 0, lastStamp, activeUntil = 2.5, actionUntil = 0, reactionIndex = 0;
   let pointerSide = 1;
   let special = false, specialIndex = 0;
@@ -6406,8 +6408,10 @@ function installComposerBloub(doc = typeof document === "undefined" ? void 0 : d
     ambientTimer = void 0;
     flight.cancel();
     if (animationFrame !== void 0) win.cancelAnimationFrame(animationFrame);
+    if (frameTimer !== void 0) win.clearTimeout(frameTimer);
     if (wake !== void 0) win.clearTimeout(wake);
     animationFrame = void 0;
+    frameTimer = void 0;
     wake = void 0;
     lastStamp = void 0;
   }
@@ -6442,7 +6446,7 @@ function installComposerBloub(doc = typeof document === "undefined" ? void 0 : d
   }
   function animateFor(seconds) {
     activeUntil = Math.max(activeUntil, time + seconds);
-    if (!allowed() || animationFrame !== void 0) return;
+    if (!allowed() || animationFrame !== void 0 || frameTimer !== void 0) return;
     if (wake !== void 0) win.clearTimeout(wake);
     wake = void 0;
     lastStamp = void 0;
@@ -6467,13 +6471,16 @@ function installComposerBloub(doc = typeof document === "undefined" ? void 0 : d
     }
     renderer.render(engine.sample(time), reactions.sample(time));
     if (time < activeUntil || actionUntil || liveliness(time).lid < 0.99) {
-      animationFrame = win.requestAnimationFrame(tick);
+      frameTimer = win.setTimeout(() => {
+        frameTimer = void 0;
+        if (allowed()) animationFrame = win.requestAnimationFrame(tick);
+      }, 1e3 / 30);
     } else {
       lastStamp = void 0;
       wake = win.setTimeout(() => {
         wake = void 0;
-        animateFor(2);
-      }, 3200);
+        animateFor(1);
+      }, 8e3);
     }
   }
   function syncPlayback() {
@@ -6567,6 +6574,8 @@ function installComposerBloub(doc = typeof document === "undefined" ? void 0 : d
       leave();
       return;
     }
+    if (event.timeStamp - lastPointerStamp < 1e3 / 30) return;
+    lastPointerStamp = event.timeStamp;
     const dx = event.clientX - (bounds.left + bounds.width / 2);
     const dy = event.clientY - (bounds.top + bounds.height / 2);
     follow(dx, dy);
@@ -6946,7 +6955,7 @@ var XIAOHEI_THEME_TOKEN_OVERRIDES = Object.fromEntries(
 // src/metallic-brand-mark.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var sidebarMetallicSnapshot;
+var metallicSnapshots = /* @__PURE__ */ new Map();
 var VERTEX_SHADER = `#version 300 es
 precision highp float;
 in vec2 a_position;
@@ -7125,14 +7134,14 @@ function XiaoheiMetallicBrandMark({ size, className }) {
   const [ready, setReady] = (0, import_react.useState)(false);
   const visualSize = Math.max(24, size + 4);
   const context = size >= 32 ? "hero" : "sidebar";
-  const [snapshot, setSnapshot] = (0, import_react.useState)(context === "sidebar" ? sidebarMetallicSnapshot : void 0);
+  const [snapshot, setSnapshot] = (0, import_react.useState)(metallicSnapshots.get(visualSize));
   (0, import_react.useEffect)(() => {
     if (snapshot !== void 0) return;
     const canvas = canvasRef.current;
     if (canvas === null) return;
     const gl = canvas.getContext("webgl2", {
       alpha: true,
-      antialias: true,
+      antialias: false,
       powerPreference: "low-power",
       premultipliedAlpha: true
     });
@@ -7165,7 +7174,7 @@ function XiaoheiMetallicBrandMark({ size, className }) {
       UNIFORM_NAMES.map((name) => [name, gl.getUniformLocation(program, name)])
     );
     const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
-    const renderSize = Math.max(96, Math.ceil(visualSize * pixelRatio * 2));
+    const renderSize = Math.max(64, Math.ceil(visualSize * pixelRatio));
     canvas.width = renderSize;
     canvas.height = renderSize;
     gl.viewport(0, 0, renderSize, renderSize);
@@ -7196,27 +7205,13 @@ function XiaoheiMetallicBrandMark({ size, className }) {
     setRgb(gl, uniforms.u_darkColor, [0.025, 0.04, 0.045]);
     setRgb(gl, uniforms.u_tint, [0.84, 0.92, 0.89]);
     let disposed = false;
-    let visible = true;
-    let animationFrame;
-    let lastFrame = 0;
-    let metallicTime = 1450;
-    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const metallicTime = 1450;
     const texture = gl.createTexture();
     const image = new Image();
     const draw = () => {
       gl.uniform1f(uniforms.u_time, metallicTime);
       gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
     };
-    const render = (now) => {
-      if (disposed) return;
-      if (visible && document.visibilityState !== "hidden" && now - lastFrame >= 40) {
-        const delta = lastFrame === 0 ? 0 : Math.min(80, now - lastFrame);
-        lastFrame = now;
-        metallicTime += delta * 0.11;
-        draw();
-      }
-      animationFrame = window.requestAnimationFrame(render);
-    };
     image.onload = () => {
       if (disposed || texture === null) return;
       gl.activeTexture(gl.TEXTURE0);
@@ -7229,24 +7224,15 @@ function XiaoheiMetallicBrandMark({ size, className }) {
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
       gl.uniform1i(uniforms.u_tex, 0);
       draw();
-      if (context === "sidebar") {
-        sidebarMetallicSnapshot = canvas.toDataURL();
-        setSnapshot(sidebarMetallicSnapshot);
-        return;
-      }
+      const result = canvas.toDataURL();
+      metallicSnapshots.set(visualSize, result);
+      setSnapshot(result);
       setReady(true);
-      if (!reduceMotion.matches) animationFrame = window.requestAnimationFrame(render);
     };
     image.src = XIAOHEI_BRAND_AVATAR;
-    const visibilityObserver = typeof IntersectionObserver === "function" ? new IntersectionObserver((entries) => {
-      visible = entries.some((entry) => entry.isIntersecting);
-      if (visible) lastFrame = 0;
-    }) : void 0;
-    visibilityObserver?.observe(canvas);
     return () => {
       disposed = true;
-      if (animationFrame !== void 0) window.cancelAnimationFrame(animationFrame);
-      visibilityObserver?.disconnect();
+      image.onload = null;
       if (texture !== null) gl.deleteTexture(texture);
       gl.deleteBuffer(buffer);
       gl.deleteProgram(program);

package/lib/gaze.js

@@ -43,14 +43,14 @@ export function installXiaoheiGaze(doc = typeof document === 'undefined' ? undef
         gaze.style.setProperty('--xiaohei-gaze-y', `${currentY.toFixed(3)}px`);
     };
     const wake = () => {
-        if (disposed || frameId !== 0 || gaze === undefined)
+        if (disposed || doc.hidden || frameId !== 0 || gaze === undefined)
             return;
         setMoving(true);
         frameId = win.requestAnimationFrame(tick);
     };
     const tick = (time) => {
         frameId = 0;
-        if (disposed || gaze === undefined || mascot === undefined)
+        if (disposed || doc.hidden || gaze === undefined || mascot === undefined)
             return;
         const target = resolveGazeTarget(doc, mascot, pointer, portalActive, behaviorDisabled());
         const elapsed = lastFrameTime === 0 ? 16 : Math.min(48, Math.max(1, time - lastFrameTime));
@@ -107,6 +107,17 @@ export function installXiaoheiGaze(doc = typeof document === 'undefined' ? undef
     };
     const onPreferenceChange = () => wake();
     const onStateChange = () => wake();
+    const onVisibilityChange = () => {
+        if (doc.hidden) {
+            if (frameId !== 0)
+                win.cancelAnimationFrame(frameId);
+            frameId = 0;
+            lastFrameTime = 0;
+            setMoving(false);
+        }
+        else
+            wake();
+    };
     const unsubscribeHostDom = subscribeXiaoheiHostDom(doc, attach);
     const stateObserver = new win.MutationObserver(onStateChange);
     stateObserver.observe(doc.documentElement, {
@@ -114,6 +125,7 @@ export function installXiaoheiGaze(doc = typeof document === 'undefined' ? undef
         attributeFilter: ['data-xiaohei-state'],
     });
     doc.addEventListener('pointermove', onPointerMove, { passive: true });
+    doc.addEventListener('visibilitychange', onVisibilityChange);
     doc.addEventListener('pointerleave', clearPointer);
     doc.addEventListener(XIAOHEI_PORTAL_ACTIVITY_EVENT, onPortalActivity);
     win.addEventListener('blur', clearPointer);
@@ -127,6 +139,7 @@ export function installXiaoheiGaze(doc = typeof document === 'undefined' ? undef
         unsubscribeHostDom();
         stateObserver.disconnect();
         doc.removeEventListener('pointermove', onPointerMove);
+        doc.removeEventListener('visibilitychange', onVisibilityChange);
         doc.removeEventListener('pointerleave', clearPointer);
         doc.removeEventListener(XIAOHEI_PORTAL_ACTIVITY_EVENT, onPortalActivity);
         win.removeEventListener('blur', clearPointer);

package/lib/metallic-brand-mark.js

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import { XIAOHEI_BRAND_AVATAR } from './generated-identity.js';
 // Native wide/rail switches remount this slot. A tiny navigation mark does not
 // need a fresh GPU context and shader compilation on every toggle.
-let sidebarMetallicSnapshot;
+const metallicSnapshots = new Map();
 const VERTEX_SHADER = `#version 300 es
 precision highp float;
 in vec2 a_position;
@@ -170,7 +170,7 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
     const [ready, setReady] = useState(false);
     const visualSize = Math.max(24, size + 4);
     const context = size >= 32 ? 'hero' : 'sidebar';
-    const [snapshot, setSnapshot] = useState(context === 'sidebar' ? sidebarMetallicSnapshot : undefined);
+    const [snapshot, setSnapshot] = useState(metallicSnapshots.get(visualSize));
     useEffect(() => {
         if (snapshot !== undefined)
             return;
@@ -179,7 +179,7 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
             return;
         const gl = canvas.getContext('webgl2', {
             alpha: true,
-            antialias: true,
+            antialias: false,
             powerPreference: 'low-power',
             premultipliedAlpha: true,
         });
@@ -213,7 +213,7 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
         }
         const uniforms = Object.fromEntries(UNIFORM_NAMES.map(name => [name, gl.getUniformLocation(program, name)]));
         const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
-        const renderSize = Math.max(96, Math.ceil(visualSize * pixelRatio * 2));
+        const renderSize = Math.max(64, Math.ceil(visualSize * pixelRatio));
         canvas.width = renderSize;
         canvas.height = renderSize;
         gl.viewport(0, 0, renderSize, renderSize);
@@ -244,28 +244,13 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
         setRgb(gl, uniforms.u_darkColor, [0.025, 0.04, 0.045]);
         setRgb(gl, uniforms.u_tint, [0.84, 0.92, 0.89]);
         let disposed = false;
-        let visible = true;
-        let animationFrame;
-        let lastFrame = 0;
-        let metallicTime = 1450;
-        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const metallicTime = 1450;
         const texture = gl.createTexture();
         const image = new Image();
         const draw = () => {
             gl.uniform1f(uniforms.u_time, metallicTime);
             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
         };
-        const render = (now) => {
-            if (disposed)
-                return;
-            if (visible && document.visibilityState !== 'hidden' && now - lastFrame >= 40) {
-                const delta = lastFrame === 0 ? 0 : Math.min(80, now - lastFrame);
-                lastFrame = now;
-                metallicTime += delta * 0.11;
-                draw();
-            }
-            animationFrame = window.requestAnimationFrame(render);
-        };
         image.onload = () => {
             if (disposed || texture === null)
                 return;
@@ -279,29 +264,17 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
             gl.uniform1i(uniforms.u_tex, 0);
             draw();
-            if (context === 'sidebar') {
-                sidebarMetallicSnapshot = canvas.toDataURL();
-                setSnapshot(sidebarMetallicSnapshot);
-                return;
-            }
+            // Preserve the metallic appearance without a permanent GPU animation.
+            // Updating snapshot unmounts the canvas and runs the resource cleanup.
+            const result = canvas.toDataURL();
+            metallicSnapshots.set(visualSize, result);
+            setSnapshot(result);
             setReady(true);
-            if (!reduceMotion.matches)
-                animationFrame = window.requestAnimationFrame(render);
         };
         image.src = XIAOHEI_BRAND_AVATAR;
-        const visibilityObserver = typeof IntersectionObserver === 'function'
-            ? new IntersectionObserver(entries => {
-                visible = entries.some(entry => entry.isIntersecting);
-                if (visible)
-                    lastFrame = 0;
-            })
-            : undefined;
-        visibilityObserver?.observe(canvas);
         return () => {
             disposed = true;
-            if (animationFrame !== undefined)
-                window.cancelAnimationFrame(animationFrame);
-            visibilityObserver?.disconnect();
+            image.onload = null;
             if (texture !== null)
                 gl.deleteTexture(texture);
             gl.deleteBuffer(buffer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemoncat7/dsh-theme-xiaohei",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "A Luo Xiaohei-inspired animated dark theme for DeepSeek Harness",
   "keywords": [
     "deepseek-harness",