@lemoncat7/dsh-theme-xiaohei 0.3.3 → 0.3.5

package/lib/metallic-brand-mark.js

@@ -285,12 +285,12 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
     const geometry = {
         '--xiaohei-brand-mark-size': `${visualSize}px`,
     };
-    return (_jsxs("span", { className: className === undefined ? 'xiaohei-brand-mark' : `${className} xiaohei-brand-mark`, "data-brand-context": context, "data-metallic-ready": ready || snapshot !== undefined ? 'true' : 'false', style: geometry, "aria-hidden": "true", children: [_jsx("img", { className: "xiaohei-brand-mark__fallback", src: XIAOHEI_BRAND_AVATAR, alt: "" }), snapshot !== undefined
+    return (_jsxs("span", { className: className === undefined ? 'xiaohei-brand-mark' : `${className} xiaohei-brand-mark`, "data-brand-context": context, "data-xiaohei-sidebar-brand": context === 'sidebar' ? '' : undefined, "data-metallic-ready": ready || snapshot !== undefined ? 'true' : 'false', style: geometry, "aria-hidden": "true", children: [_jsx("img", { className: "xiaohei-brand-mark__fallback", src: XIAOHEI_BRAND_AVATAR, alt: "" }), snapshot !== undefined
                 ? _jsx("img", { className: "xiaohei-brand-mark__metal", src: snapshot, alt: "" })
                 : _jsx("canvas", { className: "xiaohei-brand-mark__metal", ref: canvasRef })] }));
 }
 /** Official sidebar brand-name occupant paired with the Xiaohei mark. */
 export function XiaoheiBrandName() {
-    return _jsx("span", { className: "xiaohei-brand-name", children: "\u7F57\u5C0F\u9ED1 \u00B7 \u5996\u7075\u4F1A\u9986" });
+    return _jsx("span", { className: "xiaohei-brand-name", "data-xiaohei-sidebar-brand": "", children: "\u7F57\u5C0F\u9ED1 \u00B7 \u5996\u7075\u4F1A\u9986" });
 }
 //# sourceMappingURL=metallic-brand-mark.js.map

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

@@ -0,0 +1,4 @@
+/** Fast closure, short hold, relaxed opening; zero velocity at each join. */
+export declare function blinkClosure(progress: number): number;
+export declare function attentionBlink(progress: number): number;
+//# sourceMappingURL=character-expression.d.ts.map

package/lib/scene/character-expression.js

@@ -0,0 +1,15 @@
+const smooth = (t) => { const x = Math.max(0, Math.min(1, t)); return x * x * (3 - 2 * x); };
+/** Fast closure, short hold, relaxed opening; zero velocity at each join. */
+export function blinkClosure(progress) {
+    if (progress <= 0 || progress >= 1)
+        return 0;
+    if (progress < .3)
+        return smooth(progress / .3);
+    if (progress < .4)
+        return 1;
+    return 1 - smooth((progress - .4) / .6);
+}
+export function attentionBlink(progress) {
+    return blinkClosure((progress - .12) / .16);
+}
+//# sourceMappingURL=character-expression.js.map

package/lib/scene/character-eye-material.d.ts

@@ -0,0 +1,13 @@
+import type { EyeRig } from './character-eye-rig.js';
+/** Quadratic lid ordinate at a horizontal art-space coordinate. */
+export declare function lidY(eye: EyeRig, control: readonly [number, number], x: number): number;
+/** Cache original ink and a locally textured skin plate, never read pixels per frame. */
+export declare function prepareEyeMaterial(doc: Document, source: CanvasRenderingContext2D, eye: EyeRig): {
+    ink: HTMLCanvasElement;
+    skin: HTMLCanvasElement;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=character-eye-material.d.ts.map

package/lib/scene/character-eye-material.js

@@ -0,0 +1,88 @@
+/** Quadratic lid ordinate at a horizontal art-space coordinate. */
+export function lidY(eye, control, x) {
+    let low = 0, high = 1;
+    for (let i = 0; i < 14; i++) {
+        const t = (low + high) / 2, s = 1 - t;
+        if (s * s * eye.left[0] + 2 * s * t * control[0] + t * t * eye.right[0] < x)
+            low = t;
+        else
+            high = t;
+    }
+    const t = (low + high) / 2, s = 1 - t;
+    return s * s * eye.left[1] + 2 * s * t * control[1] + t * t * eye.right[1];
+}
+/** Cache original ink and a locally textured skin plate, never read pixels per frame. */
+export function prepareEyeMaterial(doc, source, eye) {
+    const left = Math.floor(eye.left[0] - 9), right = Math.ceil(eye.right[0] + 9);
+    const top = Math.floor(Math.min(eye.upper[1], eye.left[1], eye.right[1]) - 5);
+    const bottom = Math.ceil(Math.max(eye.lower[1], eye.left[1], eye.right[1]) + 5);
+    const width = right - left, height = bottom - top;
+    const canvas = () => { const c = doc.createElement('canvas'); c.width = width; c.height = height; return c; };
+    const ink = canvas(), skin = canvas(), mask = canvas();
+    const ic = ink.getContext('2d'), sc = skin.getContext('2d'), mc = mask.getContext('2d');
+    const pixels = source.getImageData(0, 0, source.canvas.width, source.canvas.height);
+    const pixel = (x, y) => {
+        const offset = (Math.max(0, Math.min(pixels.height - 1, Math.round(y / 2))) * pixels.width + Math.max(0, Math.min(pixels.width - 1, Math.round(x / 2)))) * 4;
+        return [pixels.data[offset], pixels.data[offset + 1], pixels.data[offset + 2]];
+    };
+    const ref = pixel(...eye.skin), output = ic.createImageData(width, height), plate = sc.createImageData(width, height);
+    const isSkin = (c) => c.every((v, i) => Math.abs(v - ref[i]) < 25);
+    const skinAt = (x, y, c) => {
+        if (isSkin(c))
+            return c;
+        const sum = [ref[0] * .05, ref[1] * .05, ref[2] * .05];
+        let weight = .05;
+        // Inpaint from nearby matching face pixels, preserving local lighting.
+        // Source hair, green iris and dark ink cannot bleed into the skin plate.
+        for (const radius of [6, 12, 20, 30])
+            for (let i = 0; i < 8; i++) {
+                const p = pixel(x + Math.cos(i * Math.PI / 4) * radius, y + Math.sin(i * Math.PI / 4) * radius);
+                if (!isSkin(p))
+                    continue;
+                const w = 1 / radius;
+                weight += w;
+                for (let k = 0; k < 3; k++)
+                    sum[k] += p[k] * w;
+            }
+        return sum.map(v => Math.round(v / weight));
+    };
+    for (let x = 0; x < width; x++) {
+        const ax = left + x, upper = lidY(eye, eye.upper, ax);
+        // Restrict extraction to the upper lash: exclude eyebrow, pupil and hair.
+        for (let y = 0; y < height; y++) {
+            const ay = top + y, c = pixel(ax, ay), index = (y * width + x) * 4;
+            const darkness = 1 - (c[0] + c[1] + c[2]) / Math.max(1, ref[0] + ref[1] + ref[2]);
+            const green = c[1] > c[0] * 1.15 && c[1] > c[2] * 1.12;
+            const inBand = ay >= upper - 12 && ay <= upper + 3;
+            const alpha = inBand && !green ? Math.max(0, Math.min(1, (darkness - .3) / .35)) : 0;
+            output.data.set([...c, Math.round(alpha * 255)], index);
+            plate.data.set([...skinAt(ax, ay, c), 255], index);
+        }
+    }
+    ic.putImageData(output, 0, 0);
+    sc.putImageData(plate, 0, 0);
+    // Opaque coverage of extracted ink, including its antialiased fringe. Using
+    // the ink's original alpha here leaves a second, stationary lash behind.
+    const inkMask = mc.createImageData(width, height);
+    for (let i = 0; i < output.data.length; i += 4)
+        inkMask.data[i + 3] = output.data[i + 3] > 4 ? 255 : 0;
+    mc.putImageData(inkMask, 0, 0);
+    const expanded = canvas(), ec = expanded.getContext('2d');
+    for (const [dx, dy] of [[0, 0], [-1, 0], [1, 0], [0, -1], [0, 1]])
+        ec.drawImage(mask, dx, dy);
+    mc.drawImage(expanded, 0, 0);
+    mc.translate(-left, -top);
+    mc.beginPath();
+    mc.moveTo(eye.left[0] - 7, eye.left[1]);
+    mc.quadraticCurveTo(eye.upper[0], eye.upper[1] - 4, eye.right[0] + 7, eye.right[1]);
+    mc.quadraticCurveTo(eye.lower[0], eye.lower[1] + 20, eye.left[0] - 7, eye.left[1]);
+    mc.closePath();
+    mc.fill();
+    // Feather only a subpixel edge, not the eye or the whole character.
+    sc.globalCompositeOperation = 'destination-in';
+    sc.filter = 'blur(0.65px)';
+    sc.drawImage(mask, 0, 0);
+    sc.filter = 'none';
+    return { ink, skin, left, top, width, height };
+}
+//# sourceMappingURL=character-eye-material.js.map

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

@@ -0,0 +1,5 @@
+import { type EyeRig } from './character-eye-rig.js';
+import type { Point } from './character-motion-types.js';
+/** Prepare tiny iris surfaces once. Never shift a rectangular face/eye patch. */
+export declare function createEyeRenderer(ctx: CanvasRenderingContext2D, body: HTMLImageElement, eyes: readonly EyeRig[]): (gaze: Point, closure: number) => void;
+//# sourceMappingURL=character-eye-renderer.d.ts.map

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

@@ -0,0 +1,80 @@
+import { clampGaze, eyelidControls } from './character-eye-rig.js';
+import { lidY, prepareEyeMaterial } from './character-eye-material.js';
+/** Prepare tiny iris surfaces once. Never shift a rectangular face/eye patch. */
+export function createEyeRenderer(ctx, body, eyes) {
+    const doc = ctx.canvas.ownerDocument;
+    const source = doc.createElement('canvas');
+    source.width = body.width;
+    source.height = body.height;
+    const sample = source.getContext('2d', { willReadFrequently: true });
+    sample.drawImage(body, 0, 0);
+    const color = (p) => {
+        const data = sample.getImageData(Math.round(p[0] / 2), Math.round(p[1] / 2), 1, 1).data;
+        return [data[0], data[1], data[2]];
+    };
+    const rgb = (c) => `rgb(${c.map(v => Math.round(v)).join(' ')})`;
+    const prepared = eyes.map(eye => {
+        const [cx, cy, rx, ry, angle] = eye.iris;
+        // Full-size local surface preserves source texels when moved fractionally.
+        const iris = doc.createElement('canvas');
+        iris.width = Math.ceil(rx * 2 + 4);
+        iris.height = Math.ceil(ry * 2 + 4);
+        const ic = iris.getContext('2d');
+        ic.translate(iris.width / 2, iris.height / 2);
+        ic.rotate(angle);
+        ic.beginPath();
+        ic.ellipse(0, 0, rx, ry, 0, 0, Math.PI * 2);
+        ic.clip();
+        ic.rotate(-angle);
+        ic.drawImage(body, 0, 0, body.width, body.height, -cx, -cy, body.width * 2, body.height * 2);
+        return { eye, iris, skin: color(eye.skin), material: prepareEyeMaterial(doc, sample, eye) };
+    });
+    function aperture(eye, closure) {
+        const { upper, lower, left, right } = eyelidControls(eye, closure);
+        ctx.beginPath();
+        ctx.moveTo(...left);
+        ctx.quadraticCurveTo(...upper, ...right);
+        ctx.quadraticCurveTo(...lower, ...left);
+        ctx.closePath();
+    }
+    return (gaze, closure) => {
+        const [gx, gy] = clampGaze(...gaze);
+        ctx.save();
+        ctx.scale(.5, .5);
+        for (const { eye, iris, skin, material } of prepared) {
+            const [cx, cy, rx, ry] = eye.iris;
+            ctx.save();
+            ctx.drawImage(material.skin, material.left, material.top);
+            ctx.save();
+            aperture(eye, 0);
+            ctx.clip();
+            if (closure < .999) {
+                ctx.save();
+                aperture(eye, closure);
+                ctx.clip();
+                const shade = ctx.createLinearGradient(0, cy - ry, 0, cy + ry);
+                const brightness = (skin[0] + skin[1] + skin[2]) / 765;
+                const white = brightness > .65 ? [255, 253, 241] : [166, 185, 193];
+                shade.addColorStop(0, rgb(white.map(c => c * .83)));
+                shade.addColorStop(.5, rgb(white));
+                ctx.fillStyle = shade;
+                ctx.fillRect(cx - 70, cy - 70, 140, 140);
+                const dx = gx * rx * .26, dy = gy * ry * .13;
+                ctx.drawImage(iris, cx - iris.width / 2 + dx, cy - iris.height / 2 + dy);
+                ctx.restore();
+            }
+            ctx.restore();
+            const lids = eyelidControls(eye, closure);
+            // Move narrow strips of the original brushwork, preserving lash thickness.
+            // Neither a replacement stroke nor an opacity swap is used for blinking.
+            for (let x = 0; x < material.width; x++) {
+                const ax = material.left + x;
+                const dy = lidY({ ...eye, left: lids.left, right: lids.right }, lids.upper, ax) - lidY(eye, eye.upper, ax);
+                ctx.drawImage(material.ink, x, 0, 1, material.height, ax, material.top + dy, 1, material.height);
+            }
+            ctx.restore();
+        }
+        ctx.restore();
+    };
+}
+//# sourceMappingURL=character-eye-renderer.js.map

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

@@ -0,0 +1,20 @@
+import type { Point } from './character-motion-types.js';
+/** Landmarks in the approved full-resolution artwork, not screen coordinates. */
+export interface EyeRig {
+    left: Point;
+    right: Point;
+    upper: Point;
+    lower: Point;
+    iris: readonly [number, number, number, number, number];
+    skin: Point;
+}
+export declare const EYE_RIGS: Readonly<Record<string, readonly EyeRig[]>>;
+export declare function clampGaze(x: number, y: number): Point;
+/** Both lids meet on the same gently curved lash line, never a rectangular wipe. */
+export declare function eyelidControls(eye: EyeRig, closure: number): {
+    upper: Point;
+    lower: Point;
+    left: Point;
+    right: Point;
+};
+//# sourceMappingURL=character-eye-rig.d.ts.map

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

@@ -0,0 +1,35 @@
+export const EYE_RIGS = {
+    seated: [
+        { left: [285, 223], right: [326, 224], upper: [302, 188], lower: [310, 276], iris: [309, 230, 13, 20, 0], skin: [315, 258] },
+        { left: [373, 221], right: [421, 226], upper: [387, 186], lower: [393, 277], iris: [393, 228, 15, 22, 0], skin: [391, 261] },
+    ],
+    peek: [
+        { left: [80, 214], right: [119, 221], upper: [103, 186], lower: [91, 267], iris: [102, 225, 14, 20, .25], skin: [110, 253] },
+        { left: [171, 252], right: [210, 265], upper: [195, 221], lower: [175, 300], iris: [186, 260, 15, 20, .4], skin: [186, 288] },
+    ],
+    chin: [
+        { left: [252, 252], right: [290, 247], upper: [266, 223], lower: [287, 297], iris: [278, 258, 14, 19, -.3], skin: [291, 285] },
+        { left: [339, 234], right: [387, 227], upper: [358, 196], lower: [365, 280], iris: [361, 235, 15, 21, -.25], skin: [367, 269] },
+    ],
+    halfpeek: [
+        { left: [89, 390], right: [159, 395], upper: [116, 337], lower: [110, 471], iris: [116, 401, 23, 30, .22], skin: [117, 445] },
+    ],
+};
+export function clampGaze(x, y) {
+    if (!Number.isFinite(x) || !Number.isFinite(y))
+        return [0, 0];
+    const length = Math.max(1, Math.hypot(x, y));
+    return [x / length, y / length];
+}
+/** Both lids meet on the same gently curved lash line, never a rectangular wipe. */
+export function eyelidControls(eye, closure) {
+    const t = Math.max(0, Math.min(1, closure));
+    // Upper lid does most of the travel. Closing at the eye's centre looked like
+    // a squint; the resting lash sits near the lower rim instead.
+    const cornerY = (eye.left[1] + eye.right[1]) / 2;
+    const drop = (eye.lower[1] - cornerY) * .24;
+    const middle = [(eye.left[0] + eye.right[0]) / 2, cornerY + drop + (eye.right[0] - eye.left[0]) * .18];
+    const lerp = (p) => [p[0] + (middle[0] - p[0]) * t, p[1] + (middle[1] - p[1]) * t];
+    return { upper: lerp(eye.upper), lower: lerp(eye.lower), left: [eye.left[0], eye.left[1] + drop * t], right: [eye.right[0], eye.right[1] + drop * t] };
+}
+//# sourceMappingURL=character-eye-rig.js.map

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

@@ -0,0 +1,16 @@
+import type { Point } from './character-motion-types.js';
+interface GazeClock {
+    requestAnimationFrame(callback: (time: number) => void): number;
+    cancelAnimationFrame(handle: number): void;
+    performance: {
+        now(): number;
+    };
+}
+/** Event-driven damping. At rest there are no queued frames or polling. */
+export declare function createCharacterGaze(clock: GazeClock, changed: (point: Point) => void): {
+    target(x: number, y: number): void;
+    reset(): void;
+    dispose(): void;
+};
+export {};
+//# sourceMappingURL=character-gaze.d.ts.map

package/lib/scene/character-gaze.js

@@ -0,0 +1,36 @@
+import { clampGaze } from './character-eye-rig.js';
+/** Event-driven damping. At rest there are no queued frames or polling. */
+export function createCharacterGaze(clock, changed) {
+    let value = [0, 0], target = [0, 0], frame, last = 0, disposed = false;
+    function step(now) {
+        frame = undefined;
+        if (disposed)
+            return;
+        const dt = Math.min(64, Math.max(0, now - last));
+        last = now;
+        const amount = 1 - Math.exp(-dt / 95);
+        value = [value[0] + (target[0] - value[0]) * amount, value[1] + (target[1] - value[1]) * amount];
+        const settled = Math.hypot(value[0] - target[0], value[1] - target[1]) < .001;
+        if (settled)
+            value = target;
+        changed(value);
+        if (!settled)
+            frame = clock.requestAnimationFrame(step);
+    }
+    function stop() { if (frame !== undefined)
+        clock.cancelAnimationFrame(frame); frame = undefined; }
+    return {
+        target(x, y) {
+            if (disposed)
+                return;
+            target = clampGaze(x, y);
+            if (frame === undefined && Math.hypot(value[0] - target[0], value[1] - target[1]) >= .001) {
+                last = clock.performance.now();
+                frame = clock.requestAnimationFrame(step);
+            }
+        },
+        reset() { stop(); target = value = [0, 0]; changed(value); },
+        dispose() { disposed = true; stop(); },
+    };
+}
+//# sourceMappingURL=character-gaze.js.map

package/lib/scene/character-motion-clock.d.ts

@@ -8,7 +8,7 @@ interface Clock {
 export interface CharacterMotionClip {
     duration: number;
 }
-/** One deadline; elapsed-time continuous sampling, capped at 30 fps. */
+/** One deadline; 60 fps only during a short gesture, no idle frame loop. */
 export declare function createCharacterMotionClock(clock: Clock, changed: (action: string | undefined, progress: number) => void, random?: () => number): {
     setClips(next: Readonly<Record<string, CharacterMotionClip>> | undefined): void;
     attention(): void;

package/lib/scene/character-motion-clock.js

@@ -1,7 +1,8 @@
-/** One deadline; elapsed-time continuous sampling, capped at 30 fps. */
+/** One deadline; 60 fps only during a short gesture, no idle frame loop. */
 export function createCharacterMotionClock(clock, changed, random = Math.random) {
-    let timer, disposed = false, turn = 0, active = '';
+    let timer, disposed = false, active = '';
     let clips;
+    let blinksSinceEar = 0, nextEar = 0;
     const clear = () => { if (timer !== undefined)
         clock.clearTimeout(timer); timer = undefined; };
     function rest() {
@@ -27,7 +28,7 @@ export function createCharacterMotionClock(clock, changed, random = Math.random)
                 rest();
                 return;
             }
-            timer = clock.setTimeout(step, 1000 / 30);
+            timer = clock.setTimeout(step, 1000 / 60);
         };
         step();
     }
@@ -36,7 +37,17 @@ export function createCharacterMotionClock(clock, changed, random = Math.random)
         if (!clips || disposed)
             return;
         const gestures = Object.keys(clips).filter(name => name !== 'blink' && name !== 'attention');
-        play((turn++ % 2 === 0 && clips.blink) || !gestures.length ? 'blink' : gestures[Math.floor(random() * gestures.length)]);
+        const ears = gestures.filter(name => name.startsWith('ear'));
+        // Random selection alone can starve ear motion indefinitely. Keep a quiet,
+        // bounded cadence, alternating ears instead of twitching both in lockstep.
+        const action = ears.length && blinksSinceEar >= 2 ? ears[nextEar++ % ears.length]
+            : (random() < .72 && clips.blink) || !gestures.length ? 'blink'
+                : gestures[Math.floor(random() * gestures.length)];
+        if (action.startsWith('ear'))
+            blinksSinceEar = 0;
+        else
+            blinksSinceEar++;
+        play(action);
     }
     return {
         setClips(next) {
@@ -45,6 +56,8 @@ export function createCharacterMotionClock(clock, changed, random = Math.random)
             clear();
             clips = next;
             active = '';
+            blinksSinceEar = 0;
+            nextEar = 0;
             changed(undefined, 0);
             if (clips)
                 timer = clock.setTimeout(start, 1200 + random() * 800);

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. */