@lemoncat7/dsh-theme-xiaohei 0.3.2 → 0.3.4

package/lib/scene/character-motion.js

@@ -1,6 +1,8 @@
 import { CHARACTER_MOTION } from '../generated-character-motion.js';
 import { createCharacterMotionClock } from './character-motion-clock.js';
 import { createRigRenderer } from './character-rig-renderer.js';
+import { EYE_RIGS } from './character-eye-rig.js';
+import { createCharacterGaze } from './character-gaze.js';
 /** Owns loading and lifecycle only. Rig math and painting stay independent. */
 export function createCharacterMotion(doc) {
     const win = doc.defaultView, reduced = win.matchMedia('(prefers-reduced-motion: reduce)');
@@ -8,6 +10,16 @@ export function createCharacterMotion(doc) {
     let disposed = false, part, rig;
     let canvas, render;
     let pose = '', appearance = '', revision = 0, nearby = false, lastPointer = 0;
+    let attentionTimer, lastAttention = -Infinity;
+    let gazePoint = [0, 0], activeAction, activeProgress = 0;
+    let bounds;
+    const paint = () => { if (render && part) {
+        render(activeAction, activeProgress, gazePoint);
+        part.dataset.motion = activeAction ?? 'rig-rest';
+    } };
+    const gaze = createCharacterGaze(win, point => { gazePoint = point; paint(); });
+    const cancelAttention = () => { if (attentionTimer !== undefined)
+        win.clearTimeout(attentionTimer); attentionTimer = undefined; };
     function decode(src) {
         if (loading.has(src))
             return loading.get(src);
@@ -25,8 +37,9 @@ export function createCharacterMotion(doc) {
         if (!canvas || !part || !render)
             return;
         // Keep the same layered rest drawing after an action: no plate swap/pop.
-        render(action, progress);
-        part.dataset.motion = action ?? 'rig-rest';
+        activeAction = action;
+        activeProgress = progress;
+        paint();
     });
     function update() {
         if (disposed)
@@ -36,8 +49,13 @@ export function createCharacterMotion(doc) {
         const next = !doc.hidden && !reduced.matches && !moving && part ? CHARACTER_MOTION[pose]?.[mode] : undefined;
         if (next === rig && appearance === mode)
             return;
-        clock.setClips(undefined);
+        cancelAttention();
         render = undefined;
+        clock.setClips(undefined);
+        gaze.reset();
+        bounds = undefined;
+        activeAction = undefined;
+        activeProgress = 0;
         const current = ++revision;
         canvas?.remove();
         canvas = undefined;
@@ -62,9 +80,9 @@ export function createCharacterMotion(doc) {
                 return;
             }
             currentPart.append(canvas);
-            render = createRigRenderer(ctx, next, images);
+            render = createRigRenderer(ctx, next, images, EYE_RIGS[pose]);
             clock.setClips({
-                blink: { duration: 330 },
+                blink: { duration: 280 },
                 ...Object.fromEntries(next.ears.map((_, i) => ['ear' + i, { duration: 1050 }])),
                 ...(next.layers.tail ? { tail: { duration: 2400 } } : {}),
                 attention: { duration: 2400 },
@@ -75,17 +93,45 @@ export function createCharacterMotion(doc) {
         if (!part || !render || event.pointerType !== 'mouse')
             return;
         const now = win.performance.now();
-        if (now - lastPointer < 100)
-            return;
-        lastPointer = now;
-        const rect = part.getBoundingClientRect();
+        if (!bounds || now - lastPointer >= 100) {
+            bounds = part.getBoundingClientRect();
+            lastPointer = now;
+        }
+        const rect = bounds, eyes = EYE_RIGS[pose];
+        if (rig && eyes?.length) {
+            const scale = Math.min(rect.width / rig.size[0], rect.height / rig.size[1]);
+            const eyeX = eyes.reduce((sum, eye) => sum + eye.iris[0], 0) / eyes.length / 2;
+            const eyeY = eyes.reduce((sum, eye) => sum + eye.iris[1], 0) / eyes.length / 2;
+            const cx = rect.left + eyeX * scale;
+            const cy = rect.top + (rect.height - rig.size[1] * scale) / 2 + eyeY * scale;
+            gaze.target((event.clientX - cx) / Math.max(220, win.innerWidth * .32), (event.clientY - cy) / Math.max(180, win.innerHeight * .32));
+        }
         const near = event.clientX >= rect.left - 70 && event.clientX <= rect.right + 70
             && event.clientY >= rect.top - 50 && event.clientY <= rect.bottom + 50;
-        if (near && !nearby)
-            clock.attention();
+        if (!near)
+            cancelAttention();
+        if (near && !nearby && now - lastAttention > 6000) {
+            const current = revision;
+            // A passing pointer should not trigger a performance. Brief dwell gives
+            // an intentional approach one quiet, coordinated response.
+            attentionTimer = win.setTimeout(() => {
+                attentionTimer = undefined;
+                if (!disposed && nearby && current === revision) {
+                    lastAttention = win.performance.now();
+                    clock.attention();
+                }
+            }, 180);
+        }
         nearby = near;
     };
     reduced.addEventListener('change', update);
+    const neutral = () => { gaze.target(0, 0); nearby = false; cancelAttention(); };
+    const leave = (event) => { if (!event.relatedTarget)
+        neutral(); };
+    const resize = () => { bounds = undefined; };
+    doc.addEventListener('pointerout', leave);
+    win.addEventListener('blur', neutral);
+    win.addEventListener('resize', resize);
     doc.addEventListener('visibilitychange', update);
     doc.addEventListener('pointermove', pointer, { passive: true });
     const observer = new win.MutationObserver(update);
@@ -93,9 +139,12 @@ export function createCharacterMotion(doc) {
     return {
         setPose(nextPart, nextPose) {
             if (nextPart !== part || pose !== nextPose) {
+                cancelAttention();
                 revision++;
-                clock.setClips(undefined);
                 render = undefined;
+                clock.setClips(undefined);
+                gaze.reset();
+                bounds = undefined;
                 canvas?.remove();
                 canvas = undefined;
                 rig = undefined;
@@ -108,8 +157,10 @@ export function createCharacterMotion(doc) {
         },
         dispose() {
             disposed = true;
+            cancelAttention();
             revision++;
             clock.dispose();
+            gaze.dispose();
             canvas?.remove();
             render = undefined;
             images.clear();
@@ -120,6 +171,9 @@ export function createCharacterMotion(doc) {
             observer.disconnect();
             doc.removeEventListener('visibilitychange', update);
             doc.removeEventListener('pointermove', pointer);
+            doc.removeEventListener('pointerout', leave);
+            win.removeEventListener('blur', neutral);
+            win.removeEventListener('resize', resize);
         },
     };
 }

package/lib/scene/character-rig-renderer.d.ts

@@ -1,4 +1,5 @@
-import type { CharacterRig } from './character-motion-types.js';
+import type { CharacterRig, Point } from './character-motion-types.js';
+import type { EyeRig } from './character-eye-rig.js';
 /** Small CPU-skinned tail only; body and ears use normal image draws. */
-export declare function createRigRenderer(ctx: CanvasRenderingContext2D, rig: CharacterRig, images: ReadonlyMap<string, HTMLImageElement | null>): (action: string | undefined, progress: number) => void;
+export declare function createRigRenderer(ctx: CanvasRenderingContext2D, rig: CharacterRig, images: ReadonlyMap<string, HTMLImageElement | null>, eyes?: readonly EyeRig[]): (action: string | undefined, progress: number, gaze?: Point) => void;
 //# sourceMappingURL=character-rig-renderer.d.ts.map

package/lib/scene/character-rig-renderer.js

@@ -1,6 +1,10 @@
-import { bindVertex, rigAngles, skinVertex, solveBones, TAIL_JOINTS } from './character-rig.js';
+import { attentionBlink, blinkClosure } from './character-expression.js';
+import { createEyeRenderer } from './character-eye-renderer.js';
+import { bindVertex, earOffset, rigAngles, skinVertex, solveBones, TAIL_JOINTS } from './character-rig.js';
 /** Small CPU-skinned tail only; body and ears use normal image draws. */
-export function createRigRenderer(ctx, rig, images) {
+export function createRigRenderer(ctx, rig, images, eyes = []) {
+    const body = images.get(rig.layers.body.src);
+    const drawEyes = body ? createEyeRenderer(ctx, body, eyes) : undefined;
     const tail = rig.layers.tail;
     const vertices = [], triangles = [];
     if (tail) {
@@ -61,25 +65,31 @@ export function createRigRenderer(ctx, rig, images) {
             ctx.restore();
         }
     }
-    return (action, progress) => {
+    return (action, progress, gaze = [0, 0]) => {
         ctx.clearRect(0, 0, rig.size[0], rig.size[1]);
-        const ears = rigAngles(progress, rig.ears.length, false);
-        rig.ears.forEach(([x, y], i) => {
-            ctx.save();
-            ctx.translate(x, y);
-            ctx.rotate(action === 'attention' || action === 'ear' + i ? ears[i] : 0);
-            ctx.translate(-x, -y);
-            layer('ear' + i);
-            ctx.restore();
+        const earProgress = action === 'attention' ? Math.max(0, Math.min(1, (progress - .03) / .65)) : progress;
+        const ears = rigAngles(earProgress, rig.ears.length, false);
+        rig.ears.forEach(([, root], i) => {
+            const part = rig.layers['ear' + i], image = part && images.get(part.src);
+            if (!part || !image)
+                return;
+            const angle = action === 'attention' || action === 'ear' + i ? ears[i] : 0;
+            if (Math.abs(angle) < 1e-8) {
+                layer('ear' + i);
+                return;
+            }
+            const [x, top, right, bottom] = part.box;
+            // Non-overlapping source rows preserve alpha and never rotate a rectangle
+            // of hair out from behind the head. The lower attachment stays identical.
+            for (let row = 0; row < image.height; row++) {
+                const y = top + row * (bottom - top) / image.height;
+                ctx.drawImage(image, 0, row, image.width, 1, x + earOffset(y, top, root, angle), y, right - x, (bottom - top) / image.height);
+            }
         });
         layer('body');
-        drawTail(action === 'tail' || action === 'attention' ? progress : 0);
-        if (action === 'blink') {
-            ctx.save();
-            ctx.globalAlpha = Math.min(1, Math.sin(Math.PI * progress) * 2);
-            layer('blink');
-            ctx.restore();
-        }
+        drawTail(action === 'attention' ? Math.max(0, Math.min(1, (progress - .22) / .78)) : action === 'tail' ? progress : 0);
+        const closure = action === 'blink' ? blinkClosure(progress) : action === 'attention' ? attentionBlink(progress) : 0;
+        drawEyes?.(gaze, closure);
     };
 }
 //# sourceMappingURL=character-rig-renderer.js.map

package/lib/scene/character-rig.d.ts

@@ -12,6 +12,8 @@ export interface Vertex {
     bone: number;
     weight: number;
 }
+/** Keep the ear root (and any hair below it) fixed; only flex the upper tip. */
+export declare function earOffset(y: number, top: number, root: number, angle: number): number;
 export declare function solveBones(rest: readonly Point[], angles: readonly number[]): Joint[];
 export declare function bindVertex(x: number, y: number, rest?: readonly Point[]): Vertex;
 /** Linear blend skinning, inverse bind translation followed by posed rotation. */

package/lib/scene/character-rig.js

@@ -3,6 +3,14 @@ export const TAIL_JOINTS = [
     [284, 328], [310, 347], [324, 373], [319, 398],
     [307, 423], [307, 448], [319, 464],
 ];
+/** Keep the ear root (and any hair below it) fixed; only flex the upper tip. */
+export function earOffset(y, top, root, angle) {
+    const span = Math.max(1, root - top);
+    const weight = Math.max(0, Math.min(1, (root - y) / span));
+    if (weight === 0)
+        return 0;
+    return Math.sin(angle) * Math.min(20, span * .55) * weight * weight;
+}
 export function solveBones(rest, angles) {
     return rest.reduce((out, p, i) => {
         const parent = out[i - 1];
@@ -47,7 +55,7 @@ export function rigAngles(progress, count, tail) {
     const envelope = Math.sin(Math.PI * t) ** 2;
     // Delayed distal joints create follow-through, with zero displacement/velocity
     // at both ends; no discrete frame lookup and no idle simulation.
-    return Array.from({ length: count }, (_, i) => envelope * (tail ? (i ? .12 : 0) : .22)
+    return Array.from({ length: count }, (_, i) => envelope * (tail ? (i ? .12 : 0) : .32)
         * Math.sin(t * Math.PI * (tail ? 3 : 4) - i * (tail ? .65 : 1.1)));
 }
 //# sourceMappingURL=character-rig.js.map

package/lib/sidebar-reveal.js

@@ -5,8 +5,16 @@ export function createSidebarReveal(doc) {
     let observer;
     let phase = '', width = 0, waiting = false;
     const attribute = 'data-xiaohei-sidebar-reveal';
-    const readPhase = () => shell?.className.includes('_collapsed') ? 'rail'
-        : shell?.className.includes('_fading') ? 'closing' : 'wide';
+    const readPhase = () => {
+        const state = shell?.closest('[data-sidebar-collapsed]')?.getAttribute('data-sidebar-collapsed');
+        if (state === 'true')
+            return 'rail';
+        if (state === 'false')
+            return 'wide';
+        if (shell?.querySelector("button[aria-label='Collapse sidebar'], button[aria-label='收起侧边栏']"))
+            return 'wide';
+        return 'rail';
+    };
     const apply = () => {
         if (!shell)
             return;
@@ -41,7 +49,7 @@ export function createSidebarReveal(doc) {
             if (!shell)
                 return;
             observer = new doc.defaultView.MutationObserver(changed);
-            observer.observe(shell, { attributes: true, attributeFilter: ['class', 'style'] });
+            observer.observe(column, { subtree: true, childList: true, attributes: true, attributeFilter: ['data-sidebar-collapsed', 'aria-label', 'style'] });
             apply();
         },
         resize(nextWidth) { width = nextWidth; apply(); },

package/package.json

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