@lemoncat7/dsh-theme-xiaohei 0.3.1 → 0.3.2

package/lib/metallic-brand-mark.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 VERTEX_SHADER = `#version 300 es
 precision highp float;
 in vec2 a_position;
@@ -167,7 +170,10 @@ 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);
     useEffect(() => {
+        if (snapshot !== undefined)
+            return;
         const canvas = canvasRef.current;
         if (canvas === null)
             return;
@@ -273,6 +279,11 @@ 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;
+            }
             setReady(true);
             if (!reduceMotion.matches)
                 animationFrame = window.requestAnimationFrame(render);
@@ -295,12 +306,15 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
                 gl.deleteTexture(texture);
             gl.deleteBuffer(buffer);
             gl.deleteProgram(program);
+            gl.getExtension('WEBGL_lose_context')?.loseContext();
         };
-    }, [visualSize]);
+    }, [visualSize, context, snapshot]);
     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 ? 'true' : 'false', style: geometry, "aria-hidden": "true", children: [_jsx("img", { className: "xiaohei-brand-mark__fallback", src: XIAOHEI_BRAND_AVATAR, alt: "" }), _jsx("canvas", { className: "xiaohei-brand-mark__metal", ref: canvasRef })] }));
+    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
+                ? _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() {

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

@@ -0,0 +1,18 @@
+interface Clock {
+    setTimeout(callback: () => void, delay: number): number;
+    clearTimeout(handle: number): void;
+    performance: {
+        now(): number;
+    };
+}
+export interface CharacterMotionClip {
+    duration: number;
+}
+/** One deadline; elapsed-time continuous sampling, capped at 30 fps. */
+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;
+    dispose(): void;
+};
+export {};
+//# sourceMappingURL=character-motion-clock.d.ts.map

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

@@ -0,0 +1,57 @@
+/** One deadline; elapsed-time continuous sampling, capped at 30 fps. */
+export function createCharacterMotionClock(clock, changed, random = Math.random) {
+    let timer, disposed = false, turn = 0, active = '';
+    let clips;
+    const clear = () => { if (timer !== undefined)
+        clock.clearTimeout(timer); timer = undefined; };
+    function rest() {
+        active = '';
+        changed(undefined, 0);
+        if (clips && !disposed)
+            timer = clock.setTimeout(start, 2800 + random() * 2800);
+    }
+    function play(action) {
+        const clip = clips?.[action];
+        if (!clip || disposed)
+            return;
+        clear();
+        active = action;
+        const started = clock.performance.now();
+        const step = () => {
+            timer = undefined;
+            if (!clips || disposed)
+                return;
+            const t = Math.min(1, (clock.performance.now() - started) / clip.duration);
+            changed(active, t);
+            if (t >= 1) {
+                rest();
+                return;
+            }
+            timer = clock.setTimeout(step, 1000 / 30);
+        };
+        step();
+    }
+    function start() {
+        timer = undefined;
+        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)]);
+    }
+    return {
+        setClips(next) {
+            if (disposed || next === clips)
+                return;
+            clear();
+            clips = next;
+            active = '';
+            changed(undefined, 0);
+            if (clips)
+                timer = clock.setTimeout(start, 1200 + random() * 800);
+        },
+        attention() { if (!active)
+            play('attention'); },
+        dispose() { disposed = true; clear(); clips = undefined; changed(undefined, 0); },
+    };
+}
+//# sourceMappingURL=character-motion-clock.js.map

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

@@ -0,0 +1,12 @@
+export type Point = readonly [number, number];
+export interface CharacterLayer {
+    readonly src: string;
+    readonly box: readonly [number, number, number, number];
+}
+export interface CharacterRig {
+    readonly layers: Readonly<Record<string, CharacterLayer>>;
+    readonly ears: readonly Point[];
+    readonly size: Point;
+}
+export type CharacterMotionCatalog = Readonly<Record<string, Readonly<Record<'light' | 'dark', CharacterRig>>>>;
+//# sourceMappingURL=character-motion-types.d.ts.map

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=character-motion-types.js.map

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

@@ -0,0 +1,6 @@
+/** Owns loading and lifecycle only. Rig math and painting stay independent. */
+export declare function createCharacterMotion(doc: Document): {
+    setPose(nextPart: HTMLElement | undefined, nextPose: string): void;
+    dispose(): void;
+};
+//# sourceMappingURL=character-motion.d.ts.map

package/lib/scene/character-motion.js

@@ -0,0 +1,126 @@
+import { CHARACTER_MOTION } from '../generated-character-motion.js';
+import { createCharacterMotionClock } from './character-motion-clock.js';
+import { createRigRenderer } from './character-rig-renderer.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)');
+    const images = new Map(), loading = new Map();
+    let disposed = false, part, rig;
+    let canvas, render;
+    let pose = '', appearance = '', revision = 0, nearby = false, lastPointer = 0;
+    function decode(src) {
+        if (loading.has(src))
+            return loading.get(src);
+        if (images.has(src))
+            return Promise.resolve();
+        const image = new win.Image();
+        image.src = src;
+        const pending = image.decode().then(() => { if (!disposed)
+            images.set(src, image); }, () => { })
+            .finally(() => loading.delete(src));
+        loading.set(src, pending);
+        return pending;
+    }
+    const clock = createCharacterMotionClock(win, (action, progress) => {
+        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';
+    });
+    function update() {
+        if (disposed)
+            return;
+        const mode = doc.documentElement.dataset.xiaoheiAppearance === 'light' ? 'light' : 'dark';
+        const moving = doc.documentElement.hasAttribute('data-xiaohei-sidebar-resizing');
+        const next = !doc.hidden && !reduced.matches && !moving && part ? CHARACTER_MOTION[pose]?.[mode] : undefined;
+        if (next === rig && appearance === mode)
+            return;
+        clock.setClips(undefined);
+        render = undefined;
+        const current = ++revision;
+        canvas?.remove();
+        canvas = undefined;
+        if (part)
+            part.dataset.motion = 'rest';
+        rig = next;
+        appearance = mode;
+        nearby = false;
+        if (!next || !part)
+            return;
+        const currentPart = part;
+        void Promise.all(Object.values(next.layers).map(layer => decode(layer.src))).then(() => {
+            if (disposed || current !== revision || Object.values(next.layers).some(layer => !images.get(layer.src)))
+                return;
+            canvas = doc.createElement('canvas');
+            canvas.className = 'xiaohei-character-motion';
+            canvas.width = next.size[0];
+            canvas.height = next.size[1];
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                canvas = undefined;
+                return;
+            }
+            currentPart.append(canvas);
+            render = createRigRenderer(ctx, next, images);
+            clock.setClips({
+                blink: { duration: 330 },
+                ...Object.fromEntries(next.ears.map((_, i) => ['ear' + i, { duration: 1050 }])),
+                ...(next.layers.tail ? { tail: { duration: 2400 } } : {}),
+                attention: { duration: 2400 },
+            });
+        });
+    }
+    const pointer = (event) => {
+        if (!part || !render || event.pointerType !== 'mouse')
+            return;
+        const now = win.performance.now();
+        if (now - lastPointer < 100)
+            return;
+        lastPointer = now;
+        const rect = part.getBoundingClientRect();
+        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();
+        nearby = near;
+    };
+    reduced.addEventListener('change', update);
+    doc.addEventListener('visibilitychange', update);
+    doc.addEventListener('pointermove', pointer, { passive: true });
+    const observer = new win.MutationObserver(update);
+    observer.observe(doc.documentElement, { attributes: true, attributeFilter: ['data-xiaohei-appearance', 'data-xiaohei-sidebar-resizing'] });
+    return {
+        setPose(nextPart, nextPose) {
+            if (nextPart !== part || pose !== nextPose) {
+                revision++;
+                clock.setClips(undefined);
+                render = undefined;
+                canvas?.remove();
+                canvas = undefined;
+                rig = undefined;
+                if (part)
+                    part.dataset.motion = 'rest';
+            }
+            part = nextPart;
+            pose = nextPose;
+            update();
+        },
+        dispose() {
+            disposed = true;
+            revision++;
+            clock.dispose();
+            canvas?.remove();
+            render = undefined;
+            images.clear();
+            loading.clear();
+            if (part)
+                part.dataset.motion = 'rest';
+            reduced.removeEventListener('change', update);
+            observer.disconnect();
+            doc.removeEventListener('visibilitychange', update);
+            doc.removeEventListener('pointermove', pointer);
+        },
+    };
+}
+//# sourceMappingURL=character-motion.js.map

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

@@ -0,0 +1,4 @@
+import type { CharacterRig } from './character-motion-types.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;
+//# sourceMappingURL=character-rig-renderer.d.ts.map

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

@@ -0,0 +1,85 @@
+import { bindVertex, 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) {
+    const tail = rig.layers.tail;
+    const vertices = [], triangles = [];
+    if (tail) {
+        const [x, y, r, b] = tail.box, cols = Math.ceil((r - x) / 10), rows = Math.ceil((b - y) / 10);
+        for (let row = 0; row <= rows; row++)
+            for (let col = 0; col <= cols; col++)
+                vertices.push(bindVertex(x + (r - x) * col / cols, y + (b - y) * row / rows));
+        for (let row = 0; row < rows; row++)
+            for (let col = 0; col < cols; col++) {
+                const i = row * (cols + 1) + col;
+                triangles.push([i, i + 1, i + cols + 1], [i + 1, i + cols + 2, i + cols + 1]);
+            }
+    }
+    function layer(name) {
+        const layer = rig.layers[name], image = layer && images.get(layer.src);
+        if (layer && image) {
+            const [x, y, r, b] = layer.box;
+            ctx.drawImage(image, x, y, r - x, b - y);
+        }
+    }
+    function drawTail(progress) {
+        if (!tail)
+            return;
+        const image = images.get(tail.src);
+        if (!image)
+            return;
+        if (progress <= 0 || progress >= 1) {
+            layer('tail');
+            return;
+        }
+        const joints = solveBones(TAIL_JOINTS, rigAngles(progress, TAIL_JOINTS.length, true));
+        const posed = vertices.map(v => skinVertex(v, joints));
+        const [left, top] = tail.box;
+        for (const indices of triangles) {
+            const [ia, ib, ic] = indices;
+            const a = vertices[ia], b = vertices[ib], c = vertices[ic];
+            const p = posed[ia], q = posed[ib], r = posed[ic];
+            const ux = b.x - a.x, uy = b.y - a.y, vx = c.x - a.x, vy = c.y - a.y, det = ux * vy - uy * vx;
+            const aa = ((q[0] - p[0]) * vy - (r[0] - p[0]) * uy) / det;
+            const bb = ((q[1] - p[1]) * vy - (r[1] - p[1]) * uy) / det;
+            const cc = ((r[0] - p[0]) * ux - (q[0] - p[0]) * vx) / det;
+            const dd = ((r[1] - p[1]) * ux - (q[1] - p[1]) * vx) / det;
+            ctx.save();
+            ctx.beginPath();
+            // Slightly overlap the interior triangles to avoid antialias hairlines.
+            const cx = (p[0] + q[0] + r[0]) / 3, cy = (p[1] + q[1] + r[1]) / 3;
+            [p, q, r].forEach((v, i) => {
+                const dx = v[0] - cx, dy = v[1] - cy, scale = 1 + 1.2 / Math.max(1, Math.hypot(dx, dy));
+                if (i)
+                    ctx.lineTo(cx + dx * scale, cy + dy * scale);
+                else
+                    ctx.moveTo(cx + dx * scale, cy + dy * scale);
+            });
+            ctx.closePath();
+            ctx.clip();
+            ctx.transform(aa, bb, cc, dd, p[0] - aa * (a.x - left) - cc * (a.y - top), p[1] - bb * (a.x - left) - dd * (a.y - top));
+            ctx.drawImage(image, 0, 0);
+            ctx.restore();
+        }
+    }
+    return (action, progress) => {
+        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();
+        });
+        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();
+        }
+    };
+}
+//# sourceMappingURL=character-rig-renderer.js.map

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

@@ -0,0 +1,20 @@
+import type { Point } from './character-motion-types.js';
+/** Bind-space joint positions. Each child inherits its parent's rotation. */
+export declare const TAIL_JOINTS: readonly Point[];
+export interface Joint {
+    x: number;
+    y: number;
+    angle: number;
+}
+export interface Vertex {
+    x: number;
+    y: number;
+    bone: number;
+    weight: 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. */
+export declare function skinVertex(v: Vertex, joints: readonly Joint[], rest?: readonly Point[]): Point;
+export declare function rigAngles(progress: number, count: number, tail: boolean): number[];
+//# sourceMappingURL=character-rig.d.ts.map

package/lib/scene/character-rig.js

@@ -0,0 +1,53 @@
+/** Bind-space joint positions. Each child inherits its parent's rotation. */
+export const TAIL_JOINTS = [
+    [284, 328], [310, 347], [324, 373], [319, 398],
+    [307, 423], [307, 448], [319, 464],
+];
+export function solveBones(rest, angles) {
+    return rest.reduce((out, p, i) => {
+        const parent = out[i - 1];
+        const angle = (parent?.angle ?? 0) + (angles[i] ?? 0);
+        if (!parent)
+            out.push({ x: p[0], y: p[1], angle });
+        else {
+            const prev = rest[i - 1], dx = p[0] - prev[0], dy = p[1] - prev[1];
+            const c = Math.cos(parent.angle), s = Math.sin(parent.angle);
+            out.push({ x: parent.x + dx * c - dy * s, y: parent.y + dx * s + dy * c, angle });
+        }
+        return out;
+    }, []);
+}
+export function bindVertex(x, y, rest = TAIL_JOINTS) {
+    let distance = Infinity, bone = 0, weight = 0;
+    for (let i = 0; i < rest.length - 1; i++) {
+        const a = rest[i], b = rest[i + 1], dx = b[0] - a[0], dy = b[1] - a[1];
+        const t = Math.max(0, Math.min(1, ((x - a[0]) * dx + (y - a[1]) * dy) / (dx * dx + dy * dy)));
+        const d = (x - a[0] - dx * t) ** 2 + (y - a[1] - dy * t) ** 2;
+        if (d < distance) {
+            distance = d;
+            bone = i;
+            weight = t;
+        }
+    }
+    return { x, y, bone, weight };
+}
+/** Linear blend skinning, inverse bind translation followed by posed rotation. */
+export function skinVertex(v, joints, rest = TAIL_JOINTS) {
+    let x = 0, y = 0;
+    for (let k = 0; k < 2; k++) {
+        const i = v.bone + k, p = rest[i], j = joints[i], w = k ? v.weight : 1 - v.weight;
+        const dx = v.x - p[0], dy = v.y - p[1], c = Math.cos(j.angle), s = Math.sin(j.angle);
+        x += w * (j.x + dx * c - dy * s);
+        y += w * (j.y + dx * s + dy * c);
+    }
+    return [x, y];
+}
+export function rigAngles(progress, count, tail) {
+    const t = Math.max(0, Math.min(1, progress));
+    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)
+        * Math.sin(t * Math.PI * (tail ? 3 : 4) - i * (tail ? .65 : 1.1)));
+}
+//# sourceMappingURL=character-rig.js.map

package/lib/scene/wallpaper-character-styles.js

@@ -8,6 +8,9 @@ export const XIAOHEI_WALLPAPER_CHARACTER_CSS = `
   pointer-events: none;
   user-select: none;
 }
+html[data-xiaohei-sidebar-resizing] .xiaohei-wallpaper-character {
+  visibility: hidden;
+}
 html[data-xiaohei-appearance='light'] .xiaohei-wallpaper-character {
   ${CHARACTER_POSE_NAMES.map(pose => `--xiaohei-${pose}-art: url("${CHARACTER_POSES[pose].light}");`).join('\n  ')}
 }
@@ -21,6 +24,13 @@ html[data-xiaohei-appearance='light'] .xiaohei-wallpaper-character {
   opacity: 0;
   transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
 }
+.xiaohei-wallpaper-character .xiaohei-character-motion {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+  object-fit: contain; object-position: left center; pointer-events: none;
+}
+.xiaohei-wallpaper-character > span[data-motion]:not([data-motion='rest']) {
+  background-image: none;
+}
 ${CHARACTER_POSE_NAMES.map(pose => `
 .xiaohei-wallpaper-character__${pose}[data-ready] {
   background-image: var(--xiaohei-${pose}-art);

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

@@ -1,4 +1,4 @@
 export declare const XIAOHEI_WALLPAPER_CHARACTER_ID = "dsh-theme-xiaohei/wallpaper-character";
-/** Complete raster poses, no skeleton deformation or perpetual animation loop. */
+/** Places the layered character only when the host geometry is settled. */
 export declare function installXiaoheiWallpaperCharacter(doc?: Document | undefined): () => void;
 //# sourceMappingURL=wallpaper-character.d.ts.map

package/lib/scene/wallpaper-character.js

@@ -4,8 +4,9 @@ import { XIAOHEI_SCENE_LAYER_ID } from './styles.js';
 import { resolveCharacterPlacement } from './character-layout.js';
 import { createCharacterIdleController } from './character-idle.js';
 import { CHARACTER_POSES, CHARACTER_POSE_NAMES } from './character-poses.js';
+import { createCharacterMotion } from './character-motion.js';
 export const XIAOHEI_WALLPAPER_CHARACTER_ID = 'dsh-theme-xiaohei/wallpaper-character';
-/** Complete raster poses, no skeleton deformation or perpetual animation loop. */
+/** Places the layered character only when the host geometry is settled. */
 export function installXiaoheiWallpaperCharacter(doc = typeof document === 'undefined' ? undefined : document) {
     const win = doc?.defaultView;
     if (!doc || !win)
@@ -20,6 +21,7 @@ export function installXiaoheiWallpaperCharacter(doc = typeof document === 'unde
     const ready = new Set();
     const loading = new Set();
     const failed = new Set();
+    const motion = typeof win.matchMedia === 'function' ? createCharacterMotion(doc) : undefined;
     const idle = createCharacterIdleController({ now: () => win.performance.now(),
         setTimeout: (fn, delay) => win.setTimeout(fn, delay), clearTimeout: handle => win.clearTimeout(handle),
     }, () => schedule());
@@ -43,6 +45,17 @@ export function installXiaoheiWallpaperCharacter(doc = typeof document === 'unde
     function reconcile() {
         if (disposed || !doc)
             return;
+        // The glass owner already tracks the native column's animated geometry.
+        // Do not measure controls or rebuild a different rig at intermediate widths.
+        if (doc.documentElement?.hasAttribute('data-xiaohei-sidebar-resizing')) {
+            dirty = true;
+            if (host && host.dataset.pose !== 'hidden')
+                host.dataset.pose = 'hidden';
+            idle.setPaused(true);
+            motion?.setPose(undefined, 'hidden');
+            scheduleSettled();
+            return;
+        }
         const layer = doc.getElementById(XIAOHEI_SCENE_LAYER_ID);
         const next = [
             doc.querySelector(XIAOHEI_HOST_SELECTORS.sidebarShell),
@@ -62,6 +75,7 @@ export function installXiaoheiWallpaperCharacter(doc = typeof document === 'unde
             host?.remove();
             host = undefined;
             idle.setPaused(true);
+            motion?.setPose(undefined, 'hidden');
             return;
         }
         if (!host || host.parentElement !== layer) {
@@ -115,9 +129,11 @@ export function installXiaoheiWallpaperCharacter(doc = typeof document === 'unde
         if (pose === 'hidden') {
             if (host.dataset.pose !== 'hidden')
                 host.dataset.pose = 'hidden';
+            motion?.setPose(undefined, 'hidden');
             return;
         }
         if (!ready.has(pose)) {
+            motion?.setPose(undefined, 'hidden');
             // Do not retain the old location across a layout change: it could now
             // overlap a message. Idle changes keep the already decoded seated pose.
             if (placement.pose !== 'seated' || !['seated', 'chin', 'doze'].includes(host.dataset.pose ?? ''))
@@ -152,6 +168,7 @@ export function installXiaoheiWallpaperCharacter(doc = typeof document === 'unde
             part.dataset.ready = 'true';
         if (host.dataset.pose !== pose)
             host.dataset.pose = pose;
+        motion?.setPose(part, pose);
     }
     function schedule() {
         if (disposed || frame !== undefined)
@@ -185,6 +202,7 @@ export function installXiaoheiWallpaperCharacter(doc = typeof document === 'unde
         unsubscribe();
         observer?.disconnect();
         idle.dispose();
+        motion?.dispose();
         for (const event of events)
             doc.removeEventListener(event, activity, true);
         doc.removeEventListener('visibilitychange', visibility);

package/lib/sidebar-glass.js

@@ -1,6 +1,7 @@
 import { XIAOHEI_SCENE_LAYER_ID, XIAOHEI_SCENE_WORLD_CLASS } from './scene.js';
 import { subscribeXiaoheiHostDom } from './host-dom.js';
 import { XIAOHEI_HOST_SELECTORS } from './host-contract.js';
+import { createSidebarReveal } from './sidebar-reveal.js';
 /** Stable id for the paint-only glass surface behind DSH's native sidebar. */
 export const XIAOHEI_SIDEBAR_GLASS_ID = 'dsh-theme-xiaohei/sidebar-glass';
 const HORIZONTAL_INSET_START = 7;
@@ -35,6 +36,7 @@ export function installXiaoheiSidebarGlass(doc = typeof document === 'undefined'
     let resizing = false;
     let appliedBounds;
     let geometryDirty = true;
+    const reveal = createSidebarReveal(doc);
     const clearResizeState = () => {
         if (resizeSettleTimer !== undefined)
             win.clearTimeout(resizeSettleTimer);
@@ -63,15 +65,19 @@ export function installXiaoheiSidebarGlass(doc = typeof document === 'undefined'
                 return;
             // RO runs after host layout and before paint. Update the independent
             // paint layer now, not in next frame's RAF (which visibly trails).
-            applyBounds();
+            const changed = applyBounds();
             geometryDirty = false;
-            markResizeActivity();
+            if (changed)
+                markResizeActivity();
         })
         : undefined;
     const applyBounds = () => {
         if (glass === undefined || sidebarColumn === undefined)
-            return;
+            return false;
         const bounds = resolveXiaoheiSidebarGlassBounds(sidebarColumn.getBoundingClientRect());
+        reveal.resize(bounds.width + HORIZONTAL_INSET_START + HORIZONTAL_INSET_END);
+        const changed = appliedBounds !== undefined && (bounds.left !== appliedBounds.left || bounds.top !== appliedBounds.top ||
+            bounds.width !== appliedBounds.width || bounds.height !== appliedBounds.height);
         if (bounds.left !== appliedBounds?.left) {
             glass.style.setProperty('--xiaohei-sidebar-glass-left', `${bounds.left}px`);
         }
@@ -85,6 +91,7 @@ export function installXiaoheiSidebarGlass(doc = typeof document === 'undefined'
             glass.style.setProperty('--xiaohei-sidebar-glass-height', `${bounds.height}px`);
         }
         appliedBounds = bounds;
+        return changed;
     };
     const reconcile = () => {
         if (disposed)
@@ -99,6 +106,7 @@ export function installXiaoheiSidebarGlass(doc = typeof document === 'undefined'
                 resizeObserver?.observe(sidebarColumn);
         }
         if (sceneLayer === null || sidebarColumn === undefined) {
+            reveal.setColumn(undefined);
             clearResizeState();
             glass?.remove();
             glass = undefined;
@@ -106,6 +114,7 @@ export function installXiaoheiSidebarGlass(doc = typeof document === 'undefined'
             geometryDirty = true;
             return;
         }
+        reveal.setColumn(sidebarColumn);
         if (glass === undefined || glass.parentElement !== sceneLayer) {
             doc.getElementById(XIAOHEI_SIDEBAR_GLASS_ID)?.remove();
             glass = doc.createElement('div');
@@ -147,6 +156,7 @@ export function installXiaoheiSidebarGlass(doc = typeof document === 'undefined'
         animationFrame = undefined;
         unsubscribeHostDom();
         resizeObserver?.disconnect();
+        reveal.dispose();
         win.removeEventListener('resize', onViewportResize);
         clearResizeState();
         glass?.remove();

package/lib/sidebar-reveal.d.ts

@@ -0,0 +1,8 @@
+/** Synchronize native wide content with the visible column, without changing
+ * Host layout/state or adding a competing animation timer. */
+export declare function createSidebarReveal(doc: Document): {
+    setColumn(column: HTMLElement | undefined): void;
+    resize(nextWidth: number): void;
+    dispose(): void;
+};
+//# sourceMappingURL=sidebar-reveal.d.ts.map