@lemoncat7/dsh-theme-xiaohei 0.3.1 → 0.3.3

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

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/package.json

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