@iasiv5/dsh-skins 1.5.19 → 1.5.21

package/lib/client.js

@@ -413,6 +413,9 @@
     const [r, g, b, a] = channels;
     return { r, g, b, a: Math.min(1, Math.max(0, a)) };
   }
+  function sidebarPaintOrderCss(bodyAttribute) {
+    return `body[${datasetAttribute(bodyAttribute)}] [class*="_sidebarCol"]{position:relative;z-index:1}`;
+  }
   function buildShellAlignmentCss(bodyAttribute, opaqueFills, backdrop) {
     const body = `body[${datasetAttribute(bodyAttribute)}]`;
     const scoped = `html[data-windows-titlebar] ${body}`;
@@ -450,14 +453,26 @@
     if (opaqueFills === null) return "";
     const body = `body[${datasetAttribute(bodyAttribute)}]`;
     const column = ' [data-rightbar-fullscreen] [class*="_rightbarCol"]';
-    const dockPanel = ' [data-sidebar-right-panel="fullscreen"]';
-    const dockPane = ' [data-sidebar-right-panel="fullscreen"] [data-dockkit-pane]';
+    const emptyPaneGuard = ':not(:has([class*="_paneBody"] > [class*="_empty"]))';
+    const openGate = '[data-sidebar-right-open="true"]';
+    const dockPanel = ` [data-sidebar-right-panel="fullscreen"]${openGate}${emptyPaneGuard}`;
+    const dockPane = ` [data-sidebar-right-panel="fullscreen"]${openGate} [data-dockkit-pane]${emptyPaneGuard}`;
     return [
-      "/* dsh-skins fullscreen base (ADR-0020): solid skin-tone base while data-rightbar-fullscreen is set — the fullscreen dockkit PANE paints a translucent bg token where the official theme paints opaque white (DOM-dump evidence), so the pane is the bleed surface; solid matches the official look. Docked column untouched */",
+      "/* dsh-skins fullscreen base (ADR-0020): solid skin-tone base while data-rightbar-fullscreen is set — the fullscreen dockkit PANE paints a translucent bg token where the official theme paints opaque white (DOM-dump evidence), so the pane is the bleed surface; solid matches the official look. Docked column untouched. Sheet rules gated on data-sidebar-right-open (stale-fullscreen collapse, ADR-0021 amendment 四) */",
       `${body}${column},${body}${dockPanel},${body}${dockPane}{background-color:${opaqueFills.light}!important}`,
       `${body}[data-ds-dark-theme]${column},${body}[data-ds-dark-theme]${dockPanel},${body}[data-ds-dark-theme]${dockPane}{background-color:${opaqueFills.dark}!important}`
     ].join("\n");
   }
+  function buildReadingBaseCss(bodyAttribute, opaqueFills) {
+    if (opaqueFills === null) return "";
+    const body = `body[${datasetAttribute(bodyAttribute)}]`;
+    const panel = ' [data-plugin-panel="true"]';
+    return [
+      "/* dsh-skins reading base (ADR-0022): solid skin-tone base under the plugin panel route container — the live page paints the whole route transparent over the wallpaper while the official theme paints an opaque bg token (DOM-dump evidence 2026-10-30), so text sits on a translucent token x wallpaper composite; solid matches the official look. Element-bound: the route leaves the DOM with the page, no state gate needed. Layer pin per ADR-0021 amendment doctrine (large-area cover rules always carry the pin). */",
+      `${body}${panel}{position:relative;z-index:0;background-color:${opaqueFills.light}!important}`,
+      `${body}[data-ds-dark-theme]${panel}{position:relative;z-index:0;background-color:${opaqueFills.dark}!important}`
+    ].join("\n");
+  }
   var PRODUCTION_FIELDS = /* @__PURE__ */ new Set([
     "id",
     "label",
@@ -638,6 +653,54 @@ ${darkSelector}{${dark.join(";")}}`;
       return () => {
       };
     }
+    function refreshSkinStyleTags() {
+      if (typeof requestAnimationFrame !== "function" || typeof document === "undefined" || document.head?.querySelectorAll === void 0) return;
+      const tags = [...document.head.querySelectorAll('style[data-plugin-css^="dsh-skins/"]')];
+      if (tags.length === 0) return;
+      const saved = tags.map((tag) => ({ id: tag.dataset.pluginCss, content: tag.textContent }));
+      for (const tag of tags) tag.remove();
+      requestAnimationFrame(() => requestAnimationFrame(() => {
+        for (const { id, content } of saved) {
+          if (document.querySelector(`style[data-plugin-css="${id}"]`) !== null) continue;
+          const fresh = document.createElement("style");
+          fresh.dataset.plugin = "dsh-skins";
+          fresh.dataset.pluginCss = id;
+          fresh.textContent = content;
+          document.head.append(fresh);
+        }
+      }));
+    }
+    let rightPanelRepaintHookInstalled = false;
+    function installRightPanelRepaintHook() {
+      if (rightPanelRepaintHookInstalled || typeof MutationObserver !== "function") return;
+      if (typeof document === "undefined" || document.body === void 0 || document.body === null) return;
+      rightPanelRepaintHookInstalled = true;
+      const observer = new MutationObserver((records) => {
+        for (const record of records ?? []) {
+          const before = record.oldValue;
+          const after = record.target.getAttribute?.("data-sidebar-right-panel");
+          if (before !== "fullscreen" || after === "fullscreen") continue;
+          const tag = document.querySelector('style[data-plugin-css$=".fullscreen.css"]');
+          if (tag === null) continue;
+          const id = tag.dataset.pluginCss;
+          const content = tag.textContent;
+          tag.remove();
+          requestAnimationFrame(() => requestAnimationFrame(() => {
+            const fresh = document.createElement("style");
+            fresh.dataset.plugin = "dsh-skins";
+            fresh.dataset.pluginCss = id;
+            fresh.textContent = content;
+            document.head.append(fresh);
+          }));
+        }
+      });
+      observer.observe(document.body, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["data-sidebar-right-panel"],
+        attributeOldValue: true
+      });
+    }
     function buildEffects(skin, effects) {
       if (!ctx) throw new Error("[dsh-skins] mount before apply");
       const body = document.body;
@@ -688,6 +751,13 @@ ${darkSelector}{${dark.join(";")}}`;
           const tag = styleTag(`dsh-skins/${skin.id}.css`, effects.staticCss);
           stops.push(() => tag.remove());
         }
+        {
+          const tag = styleTag(
+            `dsh-skins/${skin.id}.paintorder.css`,
+            sidebarPaintOrderCss(effects.bodyAttribute)
+          );
+          stops.push(() => tag.remove());
+        }
         {
           const fills = effects.tokenOverrides?.["--dsw-specific-sidebar-fill"] ?? null;
           const lightFill = fills === null ? null : parseRgbaChannels(fills.light);
@@ -710,6 +780,11 @@ ${darkSelector}{${dark.join(";")}}`;
             const fullscreenTag = styleTag(`dsh-skins/${skin.id}.fullscreen.css`, fullscreenCss);
             stops.push(() => fullscreenTag.remove());
           }
+          const readingCss = buildReadingBaseCss(effects.bodyAttribute, opaqueFills);
+          if (readingCss !== "") {
+            const readingTag = styleTag(`dsh-skins/${skin.id}.reading.css`, readingCss);
+            stops.push(() => readingTag.remove());
+          }
         }
         const backdrop = backdropCss(effects);
         if (backdrop !== null) {
@@ -801,6 +876,8 @@ ${darkSelector}{${dark.join(";")}}`;
       mounted = { skin, effects, overrides, stop };
       selectedId = skin.id;
       announce(skin.id);
+      installRightPanelRepaintHook();
+      if (previous !== null) refreshSkinStyleTags();
       return true;
     }
     function restorePrevious(previous, cause) {
@@ -2024,6 +2101,8 @@ ${references.join("\n")}`,
           type: "button",
           role: "menuitemradio",
           "aria-checked": activeId === skin.id,
+          "data-skin-id": skin.id,
+          // ADR-0021/R21: stable hook for tests and headless verification — never match on localized labels
           className: `dsh-skins-pop-card${activeId === skin.id ? " dsh-skins-pop-card-on" : ""}`,
           onClick: () => {
             if (personalizeId !== null && personalizeId !== skin.id) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iasiv5/dsh-skins",
   "description": "DSH Web 皮肤插件：多套品牌皮肤侧栏热切换。",
   "icon": "./icon.svg",
-  "version": "1.5.19",
+  "version": "1.5.21",
   "homepage": "https://github.com/iasiv5/dsh-skins#readme",
   "repository": {
     "type": "git",
@@ -82,7 +82,7 @@
     "build": "node scripts/build-client.mjs",
     "watch": "node scripts/build-client.mjs --watch",
     "check:lockfile": "pnpm install --frozen-lockfile",
-    "test": "pnpm run build && node smoke-test.cjs && node --test tests/*.test.mjs",
+    "test": "pnpm run build && node smoke-test.cjs && node scripts/repro-stale-grid-paint.mjs --gate && node scripts/repro-fullscreen-collapse.mjs --gate && node scripts/repro-plugin-panel-readability.mjs --gate && node --test tests/*.test.mjs",
     "verify:readme": "node scripts/verify-readme-pairing.mjs",
     "verify:bundle": "node scripts/verify-bundle-guard.mjs",
     "verify:hooks": "node scripts/verify-upstream-hooks.mjs",