@ianwusb/dsh-ui-fix 0.0.0-stage → 0.1.1

package/README.md

@@ -1,3 +1,50 @@
-# Temporary Holding Version
+# @ianwusb/dsh-ui-fix
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+DSH 客户端插件：修复**深色主题下第三方插件设置页的对比度问题**，不修改任何第三方代码，只注入一层覆盖样式。
+
+## 修的是什么
+
+`dsh-interim-narration`（过程叙述）的设置页把主题相关颜色写死成了浅色值：
+
+- 容器与信息块用 `rgba(0, 0, 0, 0.015)` / `rgba(0, 0, 0, 0.08)` 这类「深色叠在白色上」的写法
+- 文字颜色没有显式声明，走 `inherit`
+
+结果在深色主题下就是「浅色底 + 浅色字」，正文几乎不可见；同一页上的空按钮因为没有背景声明，渲染成白色空白块（右上角、保存按钮上方）。
+
+本插件注入的样式：
+
+| 目标 | 处理 |
+|---|---|
+| 设置页滚动容器 | 背景透明、文字 `#e6e6e6` |
+| 硬编码浅色底块 | 改为 `rgba(255,255,255,0.06)` + 边框 |
+| 输入框 / 下拉 / 文本域 | 深色底 + 浅色字 + `color-scheme: dark` |
+| 空按钮 | 补可见底色与边框（`button:empty`） |
+
+全部规则包在 `@media (prefers-color-scheme: dark)` 里——浅色主题下本插件是惰性的。
+
+## 安装
+
+```bash
+dsh plugin --profile desktop add @ianwusb/dsh-ui-fix@latest
+# 重启 DSH
+```
+
+## 选择器说明（为什么这么写）
+
+设置页的样式是 React 内联 style，没有稳定类名，因此用属性选择器命中内联样式：
+
+```css
+[style*="max-width: 1040px"][style*="overflow-y: auto"]
+```
+
+这依赖插件当前的 `maxWidth: '1040px'`。`dsh-interim-narration` 升级并改了这个值后，选择器会失配——此时本插件不生效但也不会有副作用，更新本包的常量即可。
+
+## 已知边界
+
+- 只修深色主题；浅色主题本来就没问题。
+- 不能修复「插件渲染逻辑本身的缺失」，只修正配色与可见性。
+- 若 DSH 手动切换主题而不跟随系统，`prefers-color-scheme` 可能与实际主题不一致（此时可按需去掉 media 包裹）。
+
+## 许可
+
+MIT

package/cordis.patch.yml

@@ -0,0 +1,5 @@
+# Bundle patch layer: id MUST equal the package name so the web app can pair the
+# host row with its ./client bundle (same convention as dsh-genggu).
+- insert:
+    - id: '@ianwusb/dsh-ui-fix'
+      name: '@ianwusb/dsh-ui-fix'

package/lib/client.js

@@ -0,0 +1,145 @@
+/**
+ * dsh-ui-fix v0.1.3 — browser half
+ *
+ * 只在 DSH 处于深色主题时注入覆盖样式（浅色主题下完全惰性）。
+ * 判定不依赖 prefers-color-scheme：用户的系统是浅色、DSH 用的是应用内深色。
+ *
+ * 修复对象：dsh-interim-narration（过程叙述）设置页
+ *  - 颜色写死成浅色值（rgba(0,0,0,0.015) 之类），文字用 inherit → 浅底浅字
+ *  - 浅色底来自父容器，需要主动刷深色底
+ *  - 空按钮没有背景声明 → 渲染成白色空白块
+ */
+window.__ModuleLoader__.load({
+  id: '@ianwusb/dsh-ui-fix',
+  factory: () => {
+    const CSS = `
+/* ---- 过程叙述设置页：容器 ---- */
+[style*="max-width: 1040px"] {
+  background: #191a1c !important;
+  color: #e6e6e6 !important;
+  border-radius: 12px;
+}
+/* ---- 硬编码的浅色底块 ---- */
+[style*="max-width: 1040px"] [style*="rgba(0, 0, 0, 0.015)"],
+[style*="max-width: 1040px"] [style*="rgba(0,0,0,0.015)"],
+[style*="max-width: 1040px"] [style*="rgba(0, 0, 0, 0.08)"],
+[style*="max-width: 1040px"] [style*="rgba(0,0,0,0.08)"],
+[style*="max-width: 1040px"] [style*="rgba(127, 127, 127, 0.08)"],
+[style*="max-width: 1040px"] [style*="rgba(127,127,127,0.08)"] {
+  background: rgba(255, 255, 255, 0.06) !important;
+  border-color: rgba(255, 255, 255, 0.12) !important;
+}
+/* ---- 输入控件 ---- */
+[style*="max-width: 1040px"] input,
+[style*="max-width: 1040px"] textarea,
+[style*="max-width: 1040px"] select {
+  color: #e6e6e6 !important;
+  background: rgba(255, 255, 255, 0.07) !important;
+  border-color: rgba(255, 255, 255, 0.2) !important;
+  color-scheme: dark;
+}
+[style*="max-width: 1040px"] input::placeholder,
+[style*="max-width: 1040px"] textarea::placeholder {
+  color: rgba(230, 230, 230, 0.5) !important;
+}
+/* ---- 按钮 ---- */
+[style*="max-width: 1040px"] button {
+  color: #e6e6e6 !important;
+  background: rgba(255, 255, 255, 0.12) !important;
+  border: 1px solid rgba(255, 255, 255, 0.22) !important;
+  border-radius: 8px;
+  min-width: 2.2em;
+}
+[style*="max-width: 1040px"] [role="tablist"] {
+  background: rgba(255, 255, 255, 0.05) !important;
+}
+/* ---- 兜底：设置页 tab 面板文字 ---- */
+[role="tabpanel"] { color: #e6e6e6 !important; }
+`;
+
+    function rgbaLuminance(rgb) {
+      const m = /rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/.exec(rgb || '');
+      if (!m) return null;
+      const [r, g, b] = [+m[1], +m[2], +m[3]].map((v) => {
+        const c = v / 255;
+        return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+      });
+      return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    }
+
+    const TRANSPARENT = /rgba?\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/;
+
+    function isDarkTheme() {
+      try {
+        // 1) 依次看 body / html：先看实色背景，背景透明则看文字色
+        for (const el of [document.body, document.documentElement]) {
+          if (!el) continue;
+          const s = getComputedStyle(el);
+          const bg = s.backgroundColor;
+          if (bg && bg !== 'transparent' && !TRANSPARENT.test(bg)) {
+            const l = rgbaLuminance(bg);
+            if (l !== null) return l < 0.4;
+          }
+          const fgL = rgbaLuminance(s.color);
+          if (fgL !== null) return fgL > 0.6; // 深色主题文字必为浅色
+        }
+        // 2) 属性/类名兜底
+        const de = document.documentElement;
+        if (/(^|\s)dark(\s|$)/i.test(de.className || '')) return true;
+        if ((de.getAttribute('data-theme') || '').toLowerCase() === 'dark') return true;
+        return (getComputedStyle(de).colorScheme || '').includes('dark');
+      } catch {
+        return false;
+      }
+    }
+
+    let styleEl = null;
+    let applied = null;
+
+    function refresh() {
+      if (typeof document === 'undefined') return;
+      const dark = isDarkTheme();
+      if (applied === dark && styleEl && styleEl.isConnected) return;
+      applied = dark;
+      if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = 'dsh-ui-fix-css';
+        (document.head || document.documentElement).appendChild(styleEl);
+      }
+      styleEl.textContent = dark ? CSS : '';
+    }
+
+    function report(note) {
+      try {
+        const data = {
+          note,
+          dark: isDarkTheme(),
+          bodyColor: getComputedStyle(document.body).color,
+          bodyBg: getComputedStyle(document.body).backgroundColor,
+          htmlBg: getComputedStyle(document.documentElement).backgroundColor,
+          count1040: document.querySelectorAll('[style*="1040px"]').length,
+          tabpanels: document.querySelectorAll('[role="tabpanel"]').length,
+          styleLen: (styleEl && styleEl.textContent ? styleEl.textContent.length : 0),
+          url: location.href,
+          t: new Date().toISOString(),
+        };
+        fetch('http://127.0.0.1:18999/uifix-report', {
+          method: 'POST',
+          mode: 'no-cors',
+          body: JSON.stringify(data),
+        }).catch(() => {});
+      } catch { /* diagnostics must never break the host */ }
+    }
+
+    function apply() {
+      // 页面可能还没渲染完：多时点重试，直到拿到真实主题
+      refresh();
+      [0, 120, 400, 1000, 2500].forEach((ms) => setTimeout(refresh, ms));
+      setInterval(refresh, 2500);
+      setTimeout(() => report('boot'), 3000);
+      setInterval(() => report('tick'), 30000);
+    }
+
+    return { name: '@ianwusb/dsh-ui-fix', inject: [], apply };
+  },
+});

package/lib/index.js

@@ -0,0 +1,7 @@
+// dsh-ui-fix host half: no server-side behavior; all work happens in the browser half.
+export const name = '@ianwusb/dsh-ui-fix'
+export const inject = []
+
+export function apply() {
+  // client-only plugin
+}

package/package.json

@@ -1,6 +1,44 @@
-{
-  "name": "@ianwusb/dsh-ui-fix",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+{
+  "name": "@ianwusb/dsh-ui-fix",
+  "version": "0.1.1",
+  "description": "DSH client-side contrast fixes: repair light-theme inline styles leaking into dark mode (e.g. dsh-interim-narration settings page) and blank buttons.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Swcmb",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Swcmb/dsh-toolkit.git",
+    "directory": "packages/ui-fix"
+  },
+  "homepage": "https://github.com/Swcmb/dsh-toolkit#readme",
+  "bugs": {
+    "url": "https://github.com/Swcmb/dsh-toolkit/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=22.19.0"
+  },
+  "main": "lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "cordis.patch.yml",
+    "README.md"
+  ],
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [],
+      "platform": "web"
+    }
+  }
 }