@lemoncat7/dsh-theme-xiaohei 0.3.0-alpha.23 → 0.3.2

package/lib/scene/pointer-bridge.d.ts

@@ -0,0 +1,21 @@
+export declare const XIAOHEI_SYLVA_POINTER_CHANNEL = "dsh-theme-xiaohei/sylva-pointer-v1";
+export declare const XIAOHEI_SYLVA_POINTER_ACK_CHANNEL = "dsh-theme-xiaohei/sylva-pointer-ack-v1";
+export declare const XIAOHEI_SYLVA_POINTER_MARKER = "data-xiaohei-pointer-bridge";
+export type XiaoheiSylvaPointerMessage = {
+    channel: typeof XIAOHEI_SYLVA_POINTER_CHANNEL;
+    event: 'move' | 'leave';
+    x?: number;
+    y?: number;
+    pointerType?: string;
+};
+type FrameBounds = Pick<DOMRectReadOnly, 'left' | 'top' | 'width' | 'height'>;
+/** Translate a host-page pointer into the isolated scene viewport. */
+export declare function resolveXiaoheiSylvaPointer(clientX: number, clientY: number, bounds: FrameBounds): Pick<XiaoheiSylvaPointerMessage, 'event' | 'x' | 'y'>;
+/** Add the receiver to a derived srcDoc without changing the registered ThreeUI source. */
+export declare function injectXiaoheiSylvaPointerBridge(source: string): string;
+/** Prepare a frame before it is connected, so WebGL boots exactly once. */
+export declare function prepareXiaoheiSylvaPointerFrame(frame: HTMLIFrameElement): boolean;
+/** Install a movement-only bridge. It never forwards clicks or presses. */
+export declare function installXiaoheiSylvaPointerBridge(host: HTMLElement, prepareSceneFrame?: (frame: HTMLIFrameElement) => void): () => void;
+export {};
+//# sourceMappingURL=pointer-bridge.d.ts.map

package/lib/scene/pointer-bridge.js

@@ -0,0 +1,155 @@
+export const XIAOHEI_SYLVA_POINTER_CHANNEL = 'dsh-theme-xiaohei/sylva-pointer-v1';
+export const XIAOHEI_SYLVA_POINTER_ACK_CHANNEL = 'dsh-theme-xiaohei/sylva-pointer-ack-v1';
+export const XIAOHEI_SYLVA_POINTER_MARKER = 'data-xiaohei-pointer-bridge';
+/** Translate a host-page pointer into the isolated scene viewport. */
+export function resolveXiaoheiSylvaPointer(clientX, clientY, bounds) {
+    const x = clientX - bounds.left;
+    const y = clientY - bounds.top;
+    if (bounds.width <= 0 || bounds.height <= 0 || x < 0 || y < 0 || x > bounds.width || y > bounds.height) {
+        return { event: 'leave' };
+    }
+    return { event: 'move', x, y };
+}
+const RECEIVER = `
+  /* ${XIAOHEI_SYLVA_POINTER_MARKER}="true" — host pointer coordinates enter
+     the authored scene here, while actions remain owned by DSH. */
+  var XIAOHEI_POINTER_CHANNEL = ${JSON.stringify(XIAOHEI_SYLVA_POINTER_CHANNEL)};
+  var XIAOHEI_POINTER_ACK_CHANNEL = ${JSON.stringify(XIAOHEI_SYLVA_POINTER_ACK_CHANNEL)};
+  function xiaoheiAcknowledgePointer(eventName) {
+    parent.postMessage({
+      channel: XIAOHEI_POINTER_ACK_CHANNEL,
+      event: eventName,
+      pointerX: pointer.x,
+      pointerY: pointer.y,
+      ndcX: ndc.x,
+      ndcY: ndc.y,
+      reducedMotion: REDUCED
+    }, '*');
+  }
+  window.addEventListener('message', function (message) {
+    if (message.source !== parent) return;
+    var data = message.data;
+    if (!data || data.channel !== XIAOHEI_POINTER_CHANNEL) return;
+    if (data.event === 'leave') {
+      pointer.x = pointer.y = 0;
+      ndc.x = 10;
+      xiaoheiAcknowledgePointer('leave');
+      return;
+    }
+    if (data.event !== 'move' || !Number.isFinite(data.x) || !Number.isFinite(data.y)) return;
+    pointer.x = (data.x / window.innerWidth) * 2 - 1;
+    pointer.y = (data.y / window.innerHeight) * 2 - 1;
+    var xiaoheiHeroRect = hero.getBoundingClientRect();
+    ndc.x = ((data.x - xiaoheiHeroRect.left) / xiaoheiHeroRect.width) * 2 - 1;
+    ndc.y = -((data.y - xiaoheiHeroRect.top) / xiaoheiHeroRect.height) * 2 + 1;
+    /* Reduced motion keeps ambient animation still, but direct manipulation
+       must remain responsive. Render only the pointer-driven moss response. */
+    if (REDUCED && renderer && camera && typeof updateMouse === 'function') {
+      var xiaoheiReduced = REDUCED;
+      REDUCED = false;
+      updateMouse(0.016);
+      renderer.render(scene, camera);
+      REDUCED = xiaoheiReduced;
+    }
+    xiaoheiAcknowledgePointer('move');
+  });
+`;
+/** Add the receiver to a derived srcDoc without changing the registered ThreeUI source. */
+export function injectXiaoheiSylvaPointerBridge(source) {
+    if (source.includes(`${XIAOHEI_SYLVA_POINTER_MARKER}="true"`))
+        return source;
+    const runtimeEnd = source.lastIndexOf('\n})();\n</script>');
+    if (runtimeEnd < 0)
+        return source;
+    return `${source.slice(0, runtimeEnd)}${RECEIVER}${source.slice(runtimeEnd)}`;
+}
+/** Prepare a frame before it is connected, so WebGL boots exactly once. */
+export function prepareXiaoheiSylvaPointerFrame(frame) {
+    const source = frame.getAttribute('srcdoc');
+    if (source === null)
+        return false;
+    const bridgedSource = injectXiaoheiSylvaPointerBridge(source);
+    if (bridgedSource === source && !source.includes(`${XIAOHEI_SYLVA_POINTER_MARKER}="true"`))
+        return false;
+    frame.dataset.xiaoheiPointerBridge = 'true';
+    if (bridgedSource !== source)
+        frame.setAttribute('srcdoc', bridgedSource);
+    return true;
+}
+/** Install a movement-only bridge. It never forwards clicks or presses. */
+export function installXiaoheiSylvaPointerBridge(host, prepareSceneFrame = () => { }) {
+    const win = host.ownerDocument.defaultView;
+    if (win === null)
+        return () => { };
+    let frame = null;
+    let lastFrameWindow = null;
+    const prepareFrame = () => {
+        const nextFrame = host.querySelector('iframe');
+        if (!(nextFrame instanceof win.HTMLIFrameElement))
+            return;
+        frame = nextFrame;
+        lastFrameWindow = nextFrame.contentWindow;
+        prepareSceneFrame(frame);
+        prepareXiaoheiSylvaPointerFrame(frame);
+    };
+    const post = (message) => {
+        frame?.contentWindow?.postMessage({ channel: XIAOHEI_SYLVA_POINTER_CHANNEL, ...message }, '*');
+    };
+    const onPointerMove = (event) => {
+        if (event.pointerType === 'touch' || frame === null)
+            return;
+        const point = resolveXiaoheiSylvaPointer(event.clientX, event.clientY, frame.getBoundingClientRect());
+        post({ ...point, pointerType: event.pointerType || 'mouse' });
+    };
+    const onPointerDown = (event) => {
+        if (event.pointerType !== 'touch' || frame === null)
+            return;
+        const point = resolveXiaoheiSylvaPointer(event.clientX, event.clientY, frame.getBoundingClientRect());
+        post({ ...point, pointerType: 'touch' });
+    };
+    const onPointerEnd = (event) => {
+        if (event.pointerType === 'touch')
+            post({ event: 'leave', pointerType: 'touch' });
+    };
+    const onPointerLeave = (event) => {
+        post({ event: 'leave', pointerType: event.pointerType || 'mouse' });
+    };
+    const onBlur = () => post({ event: 'leave', pointerType: 'mouse' });
+    const onMessage = (event) => {
+        if (event.source !== lastFrameWindow)
+            return;
+        const data = event.data;
+        if (data === null || data.channel !== XIAOHEI_SYLVA_POINTER_ACK_CHANNEL || frame === null)
+            return;
+        frame.dataset.xiaoheiPointerState = data.event === 'move' ? 'active' : 'idle';
+        frame.dataset.xiaoheiPointerX = String(data.pointerX ?? '');
+        frame.dataset.xiaoheiPointerY = String(data.pointerY ?? '');
+        frame.dataset.xiaoheiPointerReducedMotion = String(data.reducedMotion === true);
+    };
+    const observer = new win.MutationObserver(prepareFrame);
+    observer.observe(host, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['srcdoc'],
+    });
+    prepareFrame();
+    win.addEventListener('pointermove', onPointerMove, { passive: true, capture: true });
+    win.addEventListener('pointerdown', onPointerDown, { passive: true, capture: true });
+    win.addEventListener('pointerup', onPointerEnd, { passive: true, capture: true });
+    win.addEventListener('pointercancel', onPointerEnd, { passive: true, capture: true });
+    win.addEventListener('pointerleave', onPointerLeave, { capture: true });
+    win.addEventListener('blur', onBlur);
+    win.addEventListener('message', onMessage);
+    return () => {
+        observer.disconnect();
+        win.removeEventListener('pointermove', onPointerMove, { capture: true });
+        win.removeEventListener('pointerdown', onPointerDown, { capture: true });
+        win.removeEventListener('pointerup', onPointerEnd, { capture: true });
+        win.removeEventListener('pointercancel', onPointerEnd, { capture: true });
+        win.removeEventListener('pointerleave', onPointerLeave, { capture: true });
+        win.removeEventListener('blur', onBlur);
+        win.removeEventListener('message', onMessage);
+    };
+}
+//# sourceMappingURL=pointer-bridge.js.map

package/lib/scene/runtime.d.ts

@@ -0,0 +1,12 @@
+type XiaoheiWorldRenderer = (host: HTMLElement) => () => void;
+/** Register the browser-only world renderer without coupling shared scene code to raw assets. */
+export declare function configureXiaoheiWorldRenderer(renderer: XiaoheiWorldRenderer): () => void;
+/** Number of top-level decorative parts installed into the ambient layer. */
+export declare const XIAOHEI_SCENE_PART_COUNT: 1;
+/**
+ * Install the static wallpaper after plugin boot becomes idle. Appearance is
+ * CSS-driven; no image load handlers or per-frame character animation.
+ */
+export declare function installXiaoheiScene(doc?: Document | undefined): () => void;
+export {};
+//# sourceMappingURL=runtime.d.ts.map

package/lib/scene/runtime.js

@@ -0,0 +1,87 @@
+import { XIAOHEI_SCENE_CSS, XIAOHEI_SCENE_LAYER_ID, XIAOHEI_SCENE_STYLE_ID, XIAOHEI_SCENE_WORLD_CLASS, } from './styles.js';
+let worldRenderer;
+/** Register the browser-only world renderer without coupling shared scene code to raw assets. */
+export function configureXiaoheiWorldRenderer(renderer) {
+    worldRenderer = renderer;
+    return () => {
+        if (worldRenderer === renderer)
+            worldRenderer = undefined;
+    };
+}
+const PARTS = [
+    XIAOHEI_SCENE_WORLD_CLASS,
+];
+/** Number of top-level decorative parts installed into the ambient layer. */
+export const XIAOHEI_SCENE_PART_COUNT = PARTS.length;
+/**
+ * Install the static wallpaper after plugin boot becomes idle. Appearance is
+ * CSS-driven; no image load handlers or per-frame character animation.
+ */
+export function installXiaoheiScene(doc = typeof document === 'undefined' ? undefined : document) {
+    if (doc === undefined)
+        return () => { };
+    let disposed = false;
+    let removeMountedScene = () => { };
+    let removeWorld = () => { };
+    const mount = () => {
+        if (disposed)
+            return;
+        removeWorld();
+        removeWorld = () => { };
+        doc.getElementById(XIAOHEI_SCENE_STYLE_ID)?.remove();
+        doc.getElementById(XIAOHEI_SCENE_LAYER_ID)?.remove();
+        const style = doc.createElement('style');
+        style.id = XIAOHEI_SCENE_STYLE_ID;
+        style.textContent = XIAOHEI_SCENE_CSS;
+        doc.head.append(style);
+        const layer = doc.createElement('div');
+        layer.id = XIAOHEI_SCENE_LAYER_ID;
+        layer.setAttribute('aria-hidden', 'true');
+        layer.setAttribute('data-xiaohei-scene', '');
+        let worldHost;
+        for (const className of PARTS) {
+            if (className === XIAOHEI_SCENE_WORLD_CLASS) {
+                worldHost = createWorldBackground(doc);
+                layer.append(worldHost);
+                continue;
+            }
+            const part = doc.createElement('span');
+            part.className = className;
+            layer.append(part);
+        }
+        doc.body.prepend(layer);
+        if (worldHost !== undefined && worldRenderer !== undefined) {
+            removeWorld = worldRenderer(worldHost);
+        }
+        removeMountedScene = () => {
+            removeWorld();
+            removeWorld = () => { };
+            layer.remove();
+            style.remove();
+        };
+    };
+    const win = doc.defaultView;
+    let cancelSchedule = () => { };
+    if (win !== null && typeof win.requestIdleCallback === 'function') {
+        const idleId = win.requestIdleCallback(mount, { timeout: 800 });
+        cancelSchedule = () => win.cancelIdleCallback(idleId);
+    }
+    else if (win !== null) {
+        const timeoutId = win.setTimeout(mount, 0);
+        cancelSchedule = () => win.clearTimeout(timeoutId);
+    }
+    else {
+        mount();
+    }
+    return () => {
+        disposed = true;
+        cancelSchedule();
+        removeMountedScene();
+    };
+}
+function createWorldBackground(doc) {
+    const world = doc.createElement('div');
+    world.className = XIAOHEI_SCENE_WORLD_CLASS;
+    return world;
+}
+//# sourceMappingURL=runtime.js.map

package/lib/scene/styles.d.ts

@@ -0,0 +1,7 @@
+/** Stable scene and material ids, shared with lifecycle and browser checks. */
+export declare const XIAOHEI_SCENE_STYLE_ID = "dsh-theme-xiaohei/scene-style";
+export declare const XIAOHEI_SCENE_LAYER_ID = "dsh-theme-xiaohei/scene-layer";
+export declare const XIAOHEI_SCENE_WORLD_CLASS = "xiaohei-scene__world";
+/** Static paired wallpapers; no per-frame effects or session-state dependency. */
+export declare const XIAOHEI_SCENE_CSS: string;
+//# sourceMappingURL=styles.d.ts.map

package/lib/scene/styles.js

@@ -0,0 +1,75 @@
+import { XIAOHEI_WALLPAPER_LIGHT, XIAOHEI_WALLPAPER_DARK, } from '../generated-backgrounds.js';
+import { XIAOHEI_WALLPAPER_CHARACTER_CSS } from './wallpaper-character-styles.js';
+/** Stable scene and material ids, shared with lifecycle and browser checks. */
+export const XIAOHEI_SCENE_STYLE_ID = 'dsh-theme-xiaohei/scene-style';
+export const XIAOHEI_SCENE_LAYER_ID = 'dsh-theme-xiaohei/scene-layer';
+export const XIAOHEI_SCENE_WORLD_CLASS = 'xiaohei-scene__world';
+/** Static paired wallpapers; no per-frame effects or session-state dependency. */
+export const XIAOHEI_SCENE_CSS = `
+body {
+  background: #151C26;
+}
+
+html[data-xiaohei-appearance='light'] body {
+  background: #D4D5D5;
+}
+
+#root {
+  position: relative;
+  z-index: 1;
+}
+
+[id='${XIAOHEI_SCENE_LAYER_ID}'] {
+  position: fixed;
+  inset: 0;
+  /* The decorative canvas uses the large viewport, not the keyboard-reduced
+   * visual viewport. The host UI is still free to resize above it. */
+  height: 100vh;
+  height: 100lvh;
+  container: xiaohei-wallpaper / size;
+  z-index: 0;
+  overflow: hidden;
+  contain: strict;
+  isolation: isolate;
+  pointer-events: none;
+  user-select: none;
+  background: #151C26;
+}
+
+html[data-xiaohei-appearance='light'] [id='${XIAOHEI_SCENE_LAYER_ID}'] {
+  background: #D4D5D5;
+}
+
+.${XIAOHEI_SCENE_WORLD_CLASS} {
+  --xiaohei-wallpaper-wide: url("${XIAOHEI_WALLPAPER_DARK}");
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  pointer-events: none;
+  background-image: var(--xiaohei-wallpaper-wide);
+  background-size: cover;
+  background-position: right center;
+  background-repeat: no-repeat;
+}
+
+html[data-xiaohei-appearance='light'] .${XIAOHEI_SCENE_WORLD_CLASS} {
+  --xiaohei-wallpaper-wide: url("${XIAOHEI_WALLPAPER_LIGHT}");
+}
+
+/* The atmosphere contains no character; responsive poses are placed separately
+ * against measured free space, never by cropping a portrait into messages. */
+${XIAOHEI_WALLPAPER_CHARACTER_CSS}
+
+.${XIAOHEI_SCENE_WORLD_CLASS} > * {
+  width: 100%;
+  height: 100%;
+}
+
+@media (forced-colors: active), print {
+  [id='${XIAOHEI_SCENE_LAYER_ID}'] {
+    display: none;
+  }
+}
+`;
+//# sourceMappingURL=styles.js.map

package/lib/scene/sylva-performance.d.ts

@@ -0,0 +1,11 @@
+export declare const XIAOHEI_SYLVA_PERFORMANCE_MARKER = "data-xiaohei-performance-profile";
+/**
+ * Apply a conservative runtime profile to the registered ThreeUI source.
+ *
+ * The registered source remains byte-for-byte untouched on disk. The profile
+ * only changes the iframe source snapshot before its first navigation, keeping
+ * upstream source verification useful while avoiding the scene's most costly
+ * defaults on long-running DSH sessions.
+ */
+export declare function injectXiaoheiSylvaPerformanceProfile(source: string): string;
+//# sourceMappingURL=sylva-performance.d.ts.map

package/lib/scene/sylva-performance.js

@@ -0,0 +1,58 @@
+export const XIAOHEI_SYLVA_PERFORMANCE_MARKER = 'data-xiaohei-performance-profile';
+/**
+ * Apply a conservative runtime profile to the registered ThreeUI source.
+ *
+ * The registered source remains byte-for-byte untouched on disk. The profile
+ * only changes the iframe source snapshot before its first navigation, keeping
+ * upstream source verification useful while avoiding the scene's most costly
+ * defaults on long-running DSH sessions.
+ */
+export function injectXiaoheiSylvaPerformanceProfile(source) {
+    if (source.includes(`${XIAOHEI_SYLVA_PERFORMANCE_MARKER}="balanced-v1"`))
+        return source;
+    const replacements = [
+        [
+            'var BLADES_NEAR = small ? 70000 : 190000;',
+            'var BLADES_NEAR = small ? 48000 : 105000;',
+        ],
+        [
+            'var BLADES_FAR  = small ? 20000 :  60000;',
+            'var BLADES_FAR  = small ? 12000 :  28000;',
+        ],
+        [
+            'renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, small ? 1.6 : 2));',
+            'renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, small ? 1.25 : 1.4));',
+        ],
+        [
+            'if (!small) bf = buildButterfly(nearGroup, nearLimbs, nearGroup.userData.uni);',
+            'bf = null; /* butterfly disabled by the Xiaohei long-session profile */',
+        ],
+        [
+            'if (renderer && clock) renderFrame();',
+            `if (renderer && clock) {
+      var xiaoheiWorldElapsed = now - xiaoheiWorldLastFrame;
+      if (xiaoheiWorldElapsed >= xiaoheiWorldFrameInterval) {
+        xiaoheiWorldLastFrame = now - (xiaoheiWorldElapsed % xiaoheiWorldFrameInterval);
+        renderFrame();
+      }
+    }`,
+        ],
+    ];
+    let profiled = source;
+    for (const [authored, optimized] of replacements) {
+        if (!profiled.includes(authored))
+            return source;
+        profiled = profiled.replace(authored, optimized);
+    }
+    const runtimeEnd = profiled.lastIndexOf('\n})();\n</script>');
+    if (runtimeEnd < 0)
+        return source;
+    const marker = `
+  /* ${XIAOHEI_SYLVA_PERFORMANCE_MARKER}="balanced-v1" */
+  var xiaoheiWorldLastFrame = 0;
+  var xiaoheiWorldFrameInterval = 1000 / (
+    NARROW.matches || (window.innerWidth * window.innerHeight) < 620000 ? 30 : 45
+  );`;
+    return `${profiled.slice(0, runtimeEnd)}${marker}${profiled.slice(runtimeEnd)}`;
+}
+//# sourceMappingURL=sylva-performance.js.map

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

@@ -0,0 +1,3 @@
+/** Complete raster poses remain crisp; only entry/exit opacity and transform move. */
+export declare const XIAOHEI_WALLPAPER_CHARACTER_CSS: string;
+//# sourceMappingURL=wallpaper-character-styles.d.ts.map

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

@@ -0,0 +1,53 @@
+import { CHARACTER_POSES, CHARACTER_POSE_NAMES } from './character-poses.js';
+/** Complete raster poses remain crisp; only entry/exit opacity and transform move. */
+export const XIAOHEI_WALLPAPER_CHARACTER_CSS = `
+.xiaohei-wallpaper-character {
+  ${CHARACTER_POSE_NAMES.map(pose => `--xiaohei-${pose}-art: url("${CHARACTER_POSES[pose].dark}");`).join('\n  ')}
+  position: absolute;
+  inset: 0;
+  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  ')}
+}
+.xiaohei-wallpaper-character > span {
+  position: absolute;
+  display: block;
+  background-size: contain;
+  background-position: left center;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  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);
+}`).join('\n')}
+.xiaohei-wallpaper-character__peek,
+.xiaohei-wallpaper-character__halfpeek {
+  transform: translateX(4px);
+}
+${CHARACTER_POSE_NAMES.map(pose => `.xiaohei-wallpaper-character[data-pose='${pose}'] > .xiaohei-wallpaper-character__${pose}`).join(',\n')} {
+  opacity: 1;
+  transform: none;
+}
+.xiaohei-wallpaper-character[data-pose='hidden'] > span {
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .xiaohei-wallpaper-character > span { transition: none; transform: none; }
+}
+`;
+//# sourceMappingURL=wallpaper-character-styles.js.map

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

@@ -0,0 +1,4 @@
+export declare const XIAOHEI_WALLPAPER_CHARACTER_ID = "dsh-theme-xiaohei/wallpaper-character";
+/** 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