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

package/lib/sidebar-glass.js

@@ -1,11 +1,13 @@
-import { XIAOHEI_SCENE_LAYER_ID } from './scene.js';
-import { XIAOHEI_SIDEBAR_ATMOSPHERE } from './generated-sidebar-assets.js';
+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 SIDEBAR_SHELL_SELECTOR = "#root [data-slot='sidebar'] > div";
 const HORIZONTAL_INSET_START = 7;
 const HORIZONTAL_INSET_END = 7;
 const VERTICAL_INSET = 8;
+const RESIZE_SETTLE_MS = 120;
 /** Keep the visual surface inside the native sidebar without changing layout. */
 export function resolveXiaoheiSidebarGlassBounds(rect) {
     return {
@@ -28,52 +30,109 @@ export function installXiaoheiSidebarGlass(doc = typeof document === 'undefined'
     const win = browserWindow;
     let disposed = false;
     let glass;
-    let sidebarShell;
+    let sidebarColumn;
     let animationFrame;
+    let resizeSettleTimer;
+    let resizing = false;
+    let appliedBounds;
+    let geometryDirty = true;
+    const reveal = createSidebarReveal(doc);
+    const clearResizeState = () => {
+        if (resizeSettleTimer !== undefined)
+            win.clearTimeout(resizeSettleTimer);
+        resizeSettleTimer = undefined;
+        resizing = false;
+        doc.documentElement.removeAttribute('data-xiaohei-sidebar-resizing');
+    };
+    const markResizeActivity = () => {
+        if (glass === undefined)
+            return;
+        if (!resizing) {
+            resizing = true;
+            doc.documentElement.setAttribute('data-xiaohei-sidebar-resizing', '');
+        }
+        if (resizeSettleTimer !== undefined)
+            win.clearTimeout(resizeSettleTimer);
+        resizeSettleTimer = win.setTimeout(() => {
+            resizeSettleTimer = undefined;
+            resizing = false;
+            doc.documentElement.removeAttribute('data-xiaohei-sidebar-resizing');
+        }, RESIZE_SETTLE_MS);
+    };
     const resizeObserver = typeof win.ResizeObserver === 'function'
-        ? new win.ResizeObserver(() => scheduleReconcile())
+        ? new win.ResizeObserver(() => {
+            if (disposed)
+                return;
+            // RO runs after host layout and before paint. Update the independent
+            // paint layer now, not in next frame's RAF (which visibly trails).
+            const changed = applyBounds();
+            geometryDirty = false;
+            if (changed)
+                markResizeActivity();
+        })
         : undefined;
     const applyBounds = () => {
-        if (glass === undefined || sidebarShell === undefined)
-            return;
-        const bounds = resolveXiaoheiSidebarGlassBounds(sidebarShell.getBoundingClientRect());
-        glass.style.setProperty('--xiaohei-sidebar-glass-left', `${bounds.left}px`);
-        glass.style.setProperty('--xiaohei-sidebar-glass-top', `${bounds.top}px`);
-        glass.style.setProperty('--xiaohei-sidebar-glass-width', `${bounds.width}px`);
-        glass.style.setProperty('--xiaohei-sidebar-glass-height', `${bounds.height}px`);
+        if (glass === undefined || sidebarColumn === undefined)
+            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`);
+        }
+        if (bounds.top !== appliedBounds?.top) {
+            glass.style.setProperty('--xiaohei-sidebar-glass-top', `${bounds.top}px`);
+        }
+        if (bounds.width !== appliedBounds?.width) {
+            glass.style.setProperty('--xiaohei-sidebar-glass-width', `${bounds.width}px`);
+        }
+        if (bounds.height !== appliedBounds?.height) {
+            glass.style.setProperty('--xiaohei-sidebar-glass-height', `${bounds.height}px`);
+        }
+        appliedBounds = bounds;
+        return changed;
     };
     const reconcile = () => {
         if (disposed)
             return;
         const sceneLayer = doc.getElementById(XIAOHEI_SCENE_LAYER_ID);
-        const nextSidebarShell = doc.querySelector(SIDEBAR_SHELL_SELECTOR) ?? undefined;
-        if (nextSidebarShell !== sidebarShell) {
+        const nextSidebarColumn = doc.querySelector(XIAOHEI_HOST_SELECTORS.sidebarColumn) ?? undefined;
+        if (nextSidebarColumn !== sidebarColumn) {
             resizeObserver?.disconnect();
-            sidebarShell = nextSidebarShell;
-            if (sidebarShell !== undefined)
-                resizeObserver?.observe(sidebarShell);
+            sidebarColumn = nextSidebarColumn;
+            geometryDirty = true;
+            if (sidebarColumn !== undefined)
+                resizeObserver?.observe(sidebarColumn);
         }
-        if (sceneLayer === null || sidebarShell === undefined) {
+        if (sceneLayer === null || sidebarColumn === undefined) {
+            reveal.setColumn(undefined);
+            clearResizeState();
             glass?.remove();
             glass = undefined;
+            appliedBounds = undefined;
+            geometryDirty = true;
             return;
         }
+        reveal.setColumn(sidebarColumn);
         if (glass === undefined || glass.parentElement !== sceneLayer) {
             doc.getElementById(XIAOHEI_SIDEBAR_GLASS_ID)?.remove();
             glass = doc.createElement('div');
             glass.id = XIAOHEI_SIDEBAR_GLASS_ID;
             glass.setAttribute('aria-hidden', 'true');
-            const atmosphere = doc.createElement('img');
-            atmosphere.className = 'xiaohei-sidebar-atmosphere';
-            atmosphere.alt = '';
-            atmosphere.decoding = 'async';
-            atmosphere.fetchPriority = 'low';
-            atmosphere.src = XIAOHEI_SIDEBAR_ATMOSPHERE;
-            glass.append(atmosphere);
-            const veil = sceneLayer.querySelector('.xiaohei-scene__veil');
-            sceneLayer.insertBefore(glass, veil?.nextSibling ?? sceneLayer.firstChild);
+            appliedBounds = undefined;
+            geometryDirty = true;
+            const world = sceneLayer.querySelector(`.${XIAOHEI_SCENE_WORLD_CLASS}`);
+            // null is meaningful here: insertBefore(node, null) appends after a
+            // last-child wallpaper. Falling back to firstChild hides glass UNDER it.
+            sceneLayer.insertBefore(glass, world !== null ? world.nextSibling : sceneLayer.firstChild);
+        }
+        // Streamed text mutates the host tree frequently. Recheck slot identity,
+        // but do not force layout unless sidebar geometry actually changed.
+        if (geometryDirty) {
+            applyBounds();
+            geometryDirty = false;
         }
-        applyBounds();
     };
     function scheduleReconcile() {
         if (disposed || animationFrame !== undefined)
@@ -83,23 +142,27 @@ export function installXiaoheiSidebarGlass(doc = typeof document === 'undefined'
             reconcile();
         });
     }
-    const mutationObserver = typeof win.MutationObserver === 'function'
-        ? new win.MutationObserver(scheduleReconcile)
-        : undefined;
-    mutationObserver?.observe(doc.body, { childList: true, subtree: true });
-    win.addEventListener('resize', scheduleReconcile, { passive: true });
+    const unsubscribeHostDom = subscribeXiaoheiHostDom(doc, scheduleReconcile);
+    const onViewportResize = () => {
+        geometryDirty = true;
+        scheduleReconcile();
+    };
+    win.addEventListener('resize', onViewportResize, { passive: true });
     scheduleReconcile();
     return () => {
         disposed = true;
         if (animationFrame !== undefined)
             win.cancelAnimationFrame(animationFrame);
         animationFrame = undefined;
-        mutationObserver?.disconnect();
+        unsubscribeHostDom();
         resizeObserver?.disconnect();
-        win.removeEventListener('resize', scheduleReconcile);
+        reveal.dispose();
+        win.removeEventListener('resize', onViewportResize);
+        clearResizeState();
         glass?.remove();
         glass = undefined;
-        sidebarShell = undefined;
+        sidebarColumn = undefined;
+        appliedBounds = undefined;
     };
 }
 //# sourceMappingURL=sidebar-glass.js.map

package/lib/sidebar-heixiu-roaming.js

@@ -1,7 +1,8 @@
 import { createXiaoheiSidebarEscapeController, XIAOHEI_SIDEBAR_ESCAPE_CSS, } from './sidebar-heixiu-escape.js';
+import { subscribeXiaoheiHostDom } from './host-dom.js';
+import { XIAOHEI_HOST_SELECTORS } from './host-contract.js';
 export const XIAOHEI_SIDEBAR_ROAMING_STYLE_ID = 'dsh-theme-xiaohei/sidebar-heixiu-roaming-style';
 const SIDEBAR_HEIXIU_SELECTOR = '.xiaohei-scene__heixiu--sidebar';
-const SIDEBAR_SELECTOR = "[data-slot='sidebar']";
 const INTERACTIVE_SELECTOR = [
     'button',
     'a[href]',
@@ -200,7 +201,7 @@ export function installXiaoheiSidebarHeixiuRoaming(doc = typeof document === 'un
         if (disposed)
             return;
         const nextCreature = doc.querySelector(SIDEBAR_HEIXIU_SELECTOR) ?? undefined;
-        const nextHost = doc.querySelector(SIDEBAR_SELECTOR)?.firstElementChild;
+        const nextHost = doc.querySelector(XIAOHEI_HOST_SELECTORS.sidebar)?.firstElementChild;
         const nextHostElement = nextHost instanceof win.HTMLElement ? nextHost : undefined;
         if (nextCreature === creature && nextHostElement === host)
             return;
@@ -266,8 +267,7 @@ export function installXiaoheiSidebarHeixiuRoaming(doc = typeof document === 'un
         hostResizeObserver?.observe(host);
     };
     bind();
-    const observer = new win.MutationObserver(queueBind);
-    observer.observe(doc.body, { childList: true, subtree: true });
+    const unsubscribeHostDom = subscribeXiaoheiHostDom(doc, queueBind);
     doc.addEventListener('visibilitychange', resumeOrPause);
     win.addEventListener('resize', resumeOrPause, { passive: true });
     reducedMotion.addEventListener('change', resumeOrPause);
@@ -276,7 +276,7 @@ export function installXiaoheiSidebarHeixiuRoaming(doc = typeof document === 'un
         disposed = true;
         escapeController.dispose();
         clearTimer();
-        observer.disconnect();
+        unsubscribeHostDom();
         hostStateObserver.disconnect();
         hostResizeObserver?.disconnect();
         doc.removeEventListener('visibilitychange', resumeOrPause);

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

package/lib/sidebar-reveal.js

@@ -0,0 +1,51 @@
+/** Synchronize native wide content with the visible column, without changing
+ * Host layout/state or adding a competing animation timer. */
+export function createSidebarReveal(doc) {
+    let shell;
+    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 apply = () => {
+        if (!shell)
+            return;
+        // The Host freezes its shell at the requested width during grid motion.
+        // Reading the inline target does not force a layout.
+        const target = Number.parseFloat(shell.style.width);
+        if (waiting && phase === 'wide' && (!Number.isFinite(target) || width >= target - 2))
+            waiting = false;
+        const value = waiting ? 'waiting' : 'ready';
+        if (shell.getAttribute(attribute) !== value)
+            shell.setAttribute(attribute, value);
+    };
+    const changed = () => {
+        const next = readPhase();
+        if (next === 'wide' && phase !== 'wide')
+            waiting = true;
+        if (next === 'rail')
+            waiting = false;
+        phase = next;
+        apply();
+    };
+    return {
+        setColumn(column) {
+            const next = column?.querySelector?.("[data-slot='sidebar'] > div") ?? undefined;
+            if (next === shell)
+                return;
+            observer?.disconnect();
+            shell?.removeAttribute(attribute);
+            shell = next;
+            waiting = false;
+            phase = readPhase();
+            if (!shell)
+                return;
+            observer = new doc.defaultView.MutationObserver(changed);
+            observer.observe(shell, { attributes: true, attributeFilter: ['class', 'style'] });
+            apply();
+        },
+        resize(nextWidth) { width = nextWidth; apply(); },
+        dispose() { observer?.disconnect(); shell?.removeAttribute(attribute); shell = undefined; },
+    };
+}
+//# sourceMappingURL=sidebar-reveal.js.map

package/lib/state.d.ts

@@ -1,9 +1,21 @@
-import type { ConversationSnapshot, ISessions, SessionSummary } from '@deepseek-ai/dsh-client-runtime/client';
+import type { ISessions, SessionSnapshot, SessionSummary } from '@deepseek-ai/dsh-api-session-controller/client';
 export declare const XIAOHEI_STATE_ATTRIBUTE = "data-xiaohei-state";
 export declare const XIAOHEI_COMPLETE_DURATION_MS = 1600;
 export type XiaoheiState = 'idle' | 'thinking' | 'streaming' | 'tool' | 'waiting' | 'complete' | 'error';
 /** Resolve one official DSH snapshot using the theme's visible-state priority. */
-export declare function resolveXiaoheiState(snapshot: ConversationSnapshot | undefined, summary: SessionSummary | undefined): Exclude<XiaoheiState, 'complete'>;
+export declare function resolveXiaoheiState(snapshot: SessionSnapshot | LegacySessionActivity | undefined, summary: SessionSummary | undefined): Exclude<XiaoheiState, 'complete'>;
+interface LegacySessionActivity {
+    removed: boolean;
+    openState: 'cold' | 'loading' | 'open' | 'error';
+    openError: unknown | null;
+    promptError: unknown | null;
+    lastAgentError: unknown | null;
+    pending: readonly unknown[];
+    runningCalls: readonly unknown[];
+    partial: unknown | null;
+    running: boolean;
+}
 /** Mirror the selected Session's official detailed state onto the theme root. */
 export declare function bindXiaoheiSessionState(sessions: Pick<ISessions, 'list' | 'binding'>, doc?: Document | undefined, completeDurationMs?: number): () => void;
+export {};
 //# sourceMappingURL=state.d.ts.map

package/lib/state.js

@@ -9,20 +9,28 @@ export function resolveXiaoheiState(snapshot, summary) {
             || snapshot.promptError !== null
             || snapshot.lastAgentError !== null)
             return 'error';
-        if (snapshot.pending.length > 0 || summary?.pendingInteraction !== undefined)
+        const pending = 'pending' in snapshot
+            ? snapshot.pending
+            : [...snapshot.queue, ...snapshot.pendingSubmissions];
+        const runningCalls = 'runningCalls' in snapshot ? snapshot.runningCalls : [];
+        const partial = 'partial' in snapshot ? snapshot.partial : null;
+        if (pending.length > 0 || legacyPendingInteraction(summary) !== undefined)
             return 'waiting';
-        if (snapshot.runningCalls.length > 0)
+        if (runningCalls.length > 0)
             return 'tool';
-        if (snapshot.running && snapshot.partial !== null)
+        if (snapshot.running && partial !== null)
             return 'streaming';
         if (snapshot.running)
             return 'thinking';
         return 'idle';
     }
-    if (summary?.pendingInteraction !== undefined)
+    if (legacyPendingInteraction(summary) !== undefined)
         return 'waiting';
     return summary?.running === true ? 'thinking' : 'idle';
 }
+function legacyPendingInteraction(summary) {
+    return summary?.pendingInteraction;
+}
 /** Mirror the selected Session's official detailed state onto the theme root. */
 export function bindXiaoheiSessionState(sessions, doc = typeof document === 'undefined' ? undefined : document, completeDurationMs = XIAOHEI_COMPLETE_DURATION_MS) {
     if (doc === undefined)

package/lib/theme.js

@@ -2,7 +2,7 @@
 export const XIAOHEI_DAWN_THEME_ID = 'xiaohei-dawn';
 export const XIAOHEI_NIGHT_THEME_ID = 'xiaohei-night';
 const DAWN_TOKENS = {
-    '--dsw-alias-bg-base': 'rgb(218 225 232 / 24%)',
+    '--dsw-alias-bg-base': 'transparent',
     '--dsw-alias-bg-layer-1': 'rgb(232 237 243 / 82%)',
     '--dsw-alias-bg-layer-2': 'rgb(238 242 247 / 90%)',
     '--dsw-alias-bg-layer-3': 'rgb(244 247 250 / 96%)',
@@ -84,7 +84,7 @@ const DAWN_TOKENS = {
     '--dsw-specific-tip': '#E3EBEA',
 };
 const NIGHT_TOKENS = {
-    '--dsw-alias-bg-base': 'rgb(12 17 19 / 18%)',
+    '--dsw-alias-bg-base': 'transparent',
     '--dsw-alias-bg-layer-1': 'rgb(20 27 29 / 74%)',
     '--dsw-alias-bg-layer-2': 'rgb(25 33 35 / 86%)',
     '--dsw-alias-bg-layer-3': 'rgb(31 40 42 / 94%)',

package/lib/vendor/bloub/decor.d.ts

@@ -0,0 +1,114 @@
+export interface DotRender {
+    x: number;
+    y: number;
+    r: number;
+    opacity: number;
+    /** couleur explicite ; par defaut le rendu prend celle du corps */
+    color?: string;
+    /**
+     * Brume de profondeur : 0 = fondu dans le fond, 1 = couleur du corps pleine.
+     * Le melange se fait au rendu, qui seul connait la couleur choisie.
+     */
+    depth?: number;
+    /**
+     * Forme non circulaire, en unites de rayon de boule et centree sur l'origine
+     * (le point du "!" penche est une goutte, pas un disque). Quand elle est
+     * fournie, `r` n'est plus utilise pour le trace.
+     */
+    d?: string;
+    /** rotation appliquee a `d`, en degres */
+    rot?: number;
+}
+/**
+ * Ce qu'un etat declare : la geometrie de l'arc reste en unites de rayon de
+ * boule, c'est le moteur (seul a connaitre l'echelle du viewBox) qui la
+ * rasterise. Sans ca les etats devraient connaitre le viewBox.
+ */
+export interface ArcSpec {
+    id: string;
+    seed: ArcSeed;
+    t: number;
+    opacity: number;
+}
+export interface ArcRender {
+    id: string;
+    /** portion devant le corps */
+    front: string;
+    /** portion derriere le corps (dessinee avant, donc masquee par la silhouette) */
+    back: string;
+    width: number;
+    opacity: number;
+    /** degrade de teinte le long du trace */
+    grad: {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+        stops: string[];
+    };
+}
+export interface ArcSeed {
+    /** demi-grand axe, en unites de rayon de boule */
+    a: number;
+    /** aplatissement b/a : mesure <= 0.45, les plans d'orbite sont vus par la tranche */
+    k: number;
+    /** inclinaison du grand axe a l'ecran, radians */
+    tilt: number;
+    /** tours par seconde */
+    speed: number;
+    phase: number;
+    /** fraction du tour reellement tracee */
+    sweep: number;
+    hue: number;
+    hueSpan: number;
+    width: number;
+    cx: number;
+    cy: number;
+}
+/**
+ * Projette un cercle 3D incline en orthographique.
+ *
+ * Le cercle vit dans le plan engendre par u (dans l'ecran) et v (qui plonge
+ * dans la profondeur). La composante z sert a couper l'arc en deux : la moitie
+ * arriere est dessinee avant le corps, donc occultee par lui. C'est ce vrai tri
+ * en profondeur qui fait lire les anneaux comme des orbites et pas comme un
+ * dessin plat.
+ */
+export declare function arcRender(seed: ArcSeed, t: number, scale: number, id: string, opacity?: number): ArcRender;
+/**
+ * 6 anneaux, demi-grand axe 1.30-1.40 (donc nettement plus grands que la
+ * boule), aplatissement toujours <= 0.45, epaisseur 0.055, ~3.3 tours/s.
+ */
+export declare const RINGS: ArcSeed[];
+/**
+ * Bouquet d'arcs emboites qui balaie le triangle juste avant les orbites.
+ * Vus quasiment par la tranche (d'ou la forme en epingle a cheveux), rmax 1.37.
+ */
+export declare const SWOOSH: ArcSeed[];
+/** x mesures : -0.557 / -0.013 / +0.532, y = 0. */
+export declare const DOT_X: readonly [-0.557, -0.013, 0.532];
+export declare const DOT_R = 0.165;
+export declare const DOT_PEAK = 1.25;
+/**
+ * Les particules ne partent pas en ligne droite : elles spiralent vers le
+ * centre (rayon x0.75 par frame, angle +100 deg/s) en grossissant, et passent
+ * derriere le noyau ou elles sont avalees.
+ */
+export declare function particles(t: number, scale: number): DotRender[];
+export declare const COMET_RIBBONS: ArcSeed[];
+/** Rayon du point de la comete, mesure a 0.129. */
+export declare const COMET_DOT = 0.129;
+/** Bleu releve au pixel. */
+export declare const NOTIF_BLUE = "#2496e8";
+/** La pastille est posee exactement sur la circonference, a -42deg. */
+export declare const NOTIF_ANGLE = -42;
+export declare const NOTIF_DIST = 1.003;
+/** Rayon au repos ; le pop culmine 14 % au-dessus. */
+export declare const NOTIF_R = 0.15;
+export declare const NOTIF_POP = 1.14;
+/**
+ * L'encoche est un disque concentrique a la pastille, soustrait du corps.
+ * La marge est constante (0.054 R) et suit l'echelle du corps.
+ */
+export declare const NOTIF_MARGIN = 0.054;
+//# sourceMappingURL=decor.d.ts.map