@nsnanocat/preference-panes 0.9.6 → 0.9.8

package/dist/module/app.mjs

@@ -130,24 +130,24 @@ function element(tag, className, text) {
 }
 
 /**
- * 用官方 b-style 组合行布局，不绑定某个 App 内置页面的编译作用域。
- * Compose rows with official b-style utilities without private app-page compilation scopes.
+ * 创建通用设置行；外部 CSS 可通过 pp 类名覆盖视觉样式。
+ * Create a generic settings row whose appearance can be overridden through pp classes.
  * @template {"div" | "label"} T
  * @param {T} tag 行元素 / Row element.
  * @returns {HTMLElementTagNameMap[T]} 设置行 / Settings row.
  */
 function settingRow(tag) {
-    return element(tag, "pp-row flex_between pd_md bb_1 bc_line_regular bg_bg1");
+    return element(tag, "pp-row");
 }
 
 /**
- * 搜索、选择和文本控件共用官方输入配色与间距，交互由标准 HTML 控件负责。
- * Share official colors and spacing while native HTML controls own input interaction.
+ * 为标准 HTML 输入控件添加通用面板类名。
+ * Add the generic panel class to a standard HTML input control.
  * @param {HTMLElement} control 已创建的原生控件 / Existing native control.
  * @returns {HTMLElement} 输入控件 / Input control.
  */
 function fieldControl(control) {
-    control.classList.add("pp-editor", "bg_bg3", "text1", "pd_sm", "bd_radius_md");
+    control.classList.add("pp-editor");
     return control;
 }
 
@@ -213,9 +213,7 @@ function requestConfirmation(host, message) {
     });
 }
 
-var styleURLs = ["https://s1.hdslb.com/bfs/seed/jinkela/short/b-style/theme.min.css","https://s1.hdslb.com/bfs/seed/jinkela/short/b-style/b-style.min.css"];
-
-var defaults = "/* 官方 b-style 负责行布局与配色；本文件只定义面板容器和控件约束。\n * Official b-style owns row layout and colors; this file defines panel containers and control constraints. */\n.pp-panel {\n    --pp-text: var(--text1);\n    --pp-background: var(--bg2);\n    --pp-surface: var(--bg1);\n    --pp-border: var(--line_regular);\n    --pp-muted: var(--text3);\n    --pp-accent: var(--brand_pink);\n    font:\n        15px / 1.5 -apple-system,\n        BlinkMacSystemFont,\n        \"Segoe UI\",\n        sans-serif;\n    color: var(--pp-text);\n    background: var(--pp-background);\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n}\n.pp-panel * {\n    box-sizing: border-box;\n    letter-spacing: 0;\n}\n.pp-header {\n    flex: none;\n    height: calc(52px + env(safe-area-inset-top));\n    padding: env(safe-area-inset-top) 12px 0;\n    display: flex;\n    align-items: center;\n    background: var(--pp-surface);\n    border-bottom: 1px solid var(--pp-border);\n    position: relative;\n    z-index: 2;\n}\n.pp-title {\n    flex: 1;\n    text-align: center;\n    font-size: 17px;\n    font-weight: 500;\n    margin: 0;\n    min-width: 0;\n    overflow-wrap: anywhere;\n}\n/* 模块图标在正文内；嵌入宿主可使用纯文字原生标题栏。\n * Keep module icons in content so embedded hosts can use text-only native titles. */\n.pp-module-logo {\n    display: none;\n    width: 64px;\n    height: 64px;\n    margin: 8px auto 20px;\n}\n.pp-module-logo:not(:empty) {\n    display: block;\n}\n.pp-module-logo img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n}\n.pp-nav-spacer {\n    width: 44px;\n    flex: none;\n}\n.pp-panel button {\n    font: inherit;\n    cursor: pointer;\n    border: 0;\n    background: none;\n    color: inherit;\n}\n.pp-panel .pp-back {\n    width: 44px;\n    height: 44px;\n    flex: none;\n    font-size: 34px;\n    line-height: 32px;\n    padding: 0;\n}\n.pp-panel button:disabled {\n    opacity: 0.5;\n    cursor: wait;\n}\n/* 固定工具区与滚动视口共用弹性布局，不按工具栏高度拼接页面偏移。\n * Fixed tools and the scrolling viewport share a flex layout without toolbar-height offsets. */\n.pp-toolbar {\n    flex: none;\n    padding: 12px max(16px, calc((100% - 688px) / 2));\n    background: var(--pp-surface);\n    border-bottom: 1px solid var(--pp-border);\n}\n.pp-viewport {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n:root[data-preference-panes-embedded] .pp-header {\n    display: none;\n}\n@supports (height: 100dvh) {\n    .pp-panel {\n        height: 100dvh;\n    }\n}\n.pp-fields,\n.pp-choice-page,\n.pp-cache-page {\n    position: absolute;\n    inset: 0;\n    overflow: auto;\n    padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom) + var(--pp-keyboard-height, 0px));\n    scroll-padding-bottom: var(--pp-keyboard-height, 0px);\n    background: var(--pp-background);\n}\n.pp-choice-link {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    max-width: 45%;\n    min-width: 44px;\n    min-height: 44px;\n    padding: 0;\n    text-align: right;\n    flex: 1;\n}\n.pp-summary {\n    color: var(--pp-muted);\n    font-size: 13px;\n    line-height: 18px;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    overflow-wrap: anywhere;\n}\n.pp-chevron {\n    color: var(--pp-muted);\n    font-size: 22px;\n    flex: none;\n}\n.pp-editor {\n    flex: none;\n    width: 45%;\n    min-width: 0;\n    min-height: 36px;\n    font: inherit;\n    border: 0;\n}\n.pp-search {\n    width: 100%;\n    margin: 0;\n}\n.pp-panel .pp-multiline {\n    display: block;\n}\n.pp-multiline .pp-editor {\n    width: 100%;\n    margin-top: 10px;\n}\n.pp-panel [hidden] {\n    display: none !important;\n}\n.pp-label {\n    flex: 1;\n    min-width: 0;\n}\n.pp-row {\n    min-height: 48px;\n}\n.pp-rows > :last-child {\n    border-bottom: 0 !important;\n}\n.pp-switch {\n    flex: none;\n    accent-color: var(--pp-accent);\n}\n.pp-choice {\n    justify-content: space-between;\n    cursor: pointer;\n}\n.pp-choice input {\n    width: 20px;\n    height: 20px;\n    flex: none;\n    accent-color: var(--pp-accent);\n    margin: 0;\n}\n.pp-description {\n    font-size: 12px;\n    line-height: 1.6;\n    color: var(--pp-muted);\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n}\n.pp-module-info {\n    display: flex;\n    gap: 12px;\n    margin: 12px 0;\n}\n.pp-module-details {\n    min-width: 0;\n    overflow-wrap: anywhere;\n}\n.pp-module-source {\n    color: inherit;\n    text-decoration: underline;\n}\n.pp-error button {\n    min-height: 44px;\n    padding: 8px 12px;\n    border-radius: 6px;\n    background: var(--pp-surface);\n}\n.pp-cache {\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n}\n.pp-toast {\n    pointer-events: none;\n    position: fixed;\n    bottom: calc(30px + env(safe-area-inset-bottom));\n    left: 50%;\n    transform: translateX(-50%);\n    max-width: 90vw;\n    padding: 10px 16px;\n    border-radius: 8px;\n    background: #333e;\n    color: white;\n    font-size: 13px;\n    z-index: 20;\n}\n.pp-toast[data-kind=\"error\"] {\n    background: #8d2424;\n}\n.pp-panel :focus-visible {\n    outline: 2px solid var(--pp-accent);\n    outline-offset: -2px;\n}\n";
+var defaults = "/* 通用默认样式只使用 pp 命名空间；项目可通过 CSS 输入覆盖变量和组件。\n * Generic defaults use only the pp namespace; projects may override variables and components through CSS input. */\n.pp-panel {\n    --pp-text: #18191c;\n    --pp-background: #f6f7f8;\n    --pp-surface: #fff;\n    --pp-field: #f1f2f3;\n    --pp-border: #e3e5e7;\n    --pp-muted: #797f87;\n    --pp-accent: #1677ff;\n    font:\n        15px / 1.5 -apple-system,\n        BlinkMacSystemFont,\n        \"Segoe UI\",\n        sans-serif;\n    color: var(--pp-text);\n    background: var(--pp-background);\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n}\n\n:root[data-theme=\"dark\"] .pp-panel {\n    --pp-text: #f1f2f3;\n    --pp-background: #0d0e0f;\n    --pp-surface: #18191c;\n    --pp-field: #2f3238;\n    --pp-border: #2f3238;\n    --pp-muted: #9499a0;\n}\n.pp-panel * {\n    box-sizing: border-box;\n    letter-spacing: 0;\n}\n.pp-header {\n    flex: none;\n    height: calc(52px + env(safe-area-inset-top));\n    padding: env(safe-area-inset-top) 12px 0;\n    display: flex;\n    align-items: center;\n    background: var(--pp-surface);\n    border-bottom: 1px solid var(--pp-border);\n    position: relative;\n    z-index: 2;\n}\n.pp-title {\n    flex: 1;\n    text-align: center;\n    font-size: 17px;\n    font-weight: 500;\n    margin: 0;\n    min-width: 0;\n    overflow-wrap: anywhere;\n}\n/* 模块图标在正文内；嵌入宿主可使用纯文字原生标题栏。\n * Keep module icons in content so embedded hosts can use text-only native titles. */\n.pp-module-logo {\n    display: none;\n    width: 64px;\n    height: 64px;\n    margin: 8px auto 20px;\n}\n.pp-module-logo:not(:empty) {\n    display: block;\n}\n.pp-module-logo img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n}\n.pp-nav-spacer {\n    width: 44px;\n    flex: none;\n}\n.pp-panel button {\n    font: inherit;\n    cursor: pointer;\n    border: 0;\n    background: none;\n    color: inherit;\n}\n.pp-panel .pp-back {\n    width: 44px;\n    height: 44px;\n    flex: none;\n    font-size: 34px;\n    line-height: 32px;\n    padding: 0;\n}\n.pp-panel button:disabled {\n    opacity: 0.5;\n    cursor: wait;\n}\n/* 固定工具区与滚动视口共用弹性布局，不按工具栏高度拼接页面偏移。\n * Fixed tools and the scrolling viewport share a flex layout without toolbar-height offsets. */\n.pp-toolbar {\n    flex: none;\n    padding: 12px max(16px, calc((100% - 688px) / 2));\n    background: var(--pp-surface);\n    border-bottom: 1px solid var(--pp-border);\n}\n.pp-viewport {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n:root[data-preference-panes-embedded] .pp-header {\n    display: none;\n}\n@supports (height: 100dvh) {\n    .pp-panel {\n        height: 100dvh;\n    }\n}\n.pp-fields,\n.pp-choice-page,\n.pp-cache-page {\n    position: absolute;\n    inset: 0;\n    overflow: auto;\n    padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom) + var(--pp-keyboard-height, 0px));\n    scroll-padding-bottom: var(--pp-keyboard-height, 0px);\n    background: var(--pp-background);\n}\n.pp-choice-link {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    max-width: 45%;\n    min-width: 44px;\n    min-height: 44px;\n    padding: 0;\n    text-align: right;\n    flex: 1;\n}\n.pp-summary {\n    color: var(--pp-muted);\n    font-size: 13px;\n    line-height: 18px;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    overflow-wrap: anywhere;\n}\n.pp-chevron {\n    color: var(--pp-muted);\n    font-size: 22px;\n    flex: none;\n}\n.pp-editor {\n    flex: none;\n    width: 45%;\n    min-width: 0;\n    min-height: 36px;\n    padding: 8px 10px;\n    font: inherit;\n    color: var(--pp-text);\n    background: var(--pp-field);\n    border: 0;\n    border-radius: 6px;\n}\n.pp-search {\n    width: 100%;\n    margin: 0;\n}\n.pp-panel .pp-multiline {\n    display: block;\n}\n.pp-multiline .pp-editor {\n    width: 100%;\n    margin-top: 10px;\n}\n.pp-panel [hidden] {\n    display: none !important;\n}\n.pp-label {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    margin-right: 16px;\n}\n.pp-field-name {\n    color: var(--pp-text);\n    font-size: 15px;\n}\n.pp-field-description {\n    margin-top: 2px;\n    color: var(--pp-muted);\n    font-size: 12px;\n}\n.pp-group {\n    margin-top: 16px;\n}\n.pp-group-title {\n    margin: 0 0 8px;\n    color: var(--pp-muted);\n    font-size: 15px;\n    font-weight: 400;\n}\n.pp-row {\n    min-height: 48px;\n    padding: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--pp-surface);\n    border-bottom: 1px solid var(--pp-border);\n}\n.pp-rows > :last-child {\n    border-bottom: 0 !important;\n}\n.pp-switch {\n    flex: none;\n    accent-color: var(--pp-accent);\n}\n.pp-choice {\n    justify-content: space-between;\n    cursor: pointer;\n}\n.pp-choice input {\n    width: 20px;\n    height: 20px;\n    flex: none;\n    accent-color: var(--pp-accent);\n    margin: 0;\n}\n.pp-description {\n    font-size: 12px;\n    line-height: 1.6;\n    color: var(--pp-muted);\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n}\n.pp-module-info {\n    display: flex;\n    gap: 12px;\n    margin: 12px 0;\n}\n.pp-module-details {\n    min-width: 0;\n    overflow-wrap: anywhere;\n}\n.pp-module-source {\n    color: inherit;\n    text-decoration: underline;\n}\n.pp-error button {\n    min-height: 44px;\n    padding: 8px 12px;\n    border-radius: 6px;\n    background: var(--pp-surface);\n}\n.pp-cache {\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n}\n.pp-toast {\n    pointer-events: none;\n    position: fixed;\n    bottom: calc(30px + env(safe-area-inset-bottom));\n    left: 50%;\n    transform: translateX(-50%);\n    max-width: 90vw;\n    padding: 10px 16px;\n    border-radius: 8px;\n    background: #333e;\n    color: white;\n    font-size: 13px;\n    z-index: 20;\n}\n.pp-toast[data-kind=\"error\"] {\n    background: #8d2424;\n}\n.pp-panel :focus-visible {\n    outline: 2px solid var(--pp-accent);\n    outline-offset: -2px;\n}\n";
 
 /**
  * 标题栏共用三点菜单；Shadow DOM 隔离项目样式，保留继承的主题色。
@@ -1046,17 +1044,17 @@ function mountPanel(root, catalog) {
             const match = /^\[([^\]]+)\]\s*(.*)$/.exec(field.name);
             const group = match?.[1] ?? "通用";
             if (!groups.has(group)) {
-                const section = element("section", "pp-group mt_md");
+                const section = element("section", "pp-group");
                 const rows = element("div", "pp-rows");
-                section.append(element("h2", "text3 fs_4 fw_400 mb_sm", group), rows);
+                section.append(element("h2", "pp-group-title", group), rows);
                 groups.set(group, rows);
                 view.append(section);
             }
             const row = settingRow("div");
             row.classList.add("pp-field");
-            const label = element("div", "pp-label flex_col items_start mr_md");
-            label.append(element("span", "text1 fs_4", match?.[2] ?? field.name));
-            if (field.description) label.append(element("span", "text3 fs_5 mt_2", field.description));
+            const label = element("div", "pp-label");
+            label.append(element("span", "pp-field-name", match?.[2] ?? field.name));
+            if (field.description) label.append(element("span", "pp-field-description", field.description));
             row.append(label);
             const value = values[field.key];
             /**
@@ -1304,8 +1302,8 @@ function mountPanel(root, catalog) {
 }
 
 /**
- * 挂载模块设置页；内置资源只引用官方地址，CSS 输入仅用于该页。
- * Mount the module page with official resource URLs and optional page-specific CSS.
+ * 挂载模块设置页；默认样式由包提供，可选 CSS 仅作用于当前模块。
+ * Mount a module page with package defaults and optional module-scoped CSS.
  * @param {import("../index.js").BoxJSInput} boxjs 单个模块的 BoxJS JSON / BoxJS JSON for one module.
  * @param {string} [css] 可选 CSS 正文 / Optional CSS text.
  * @returns {import("./index.js").MountedPreferences} 模块生命周期句柄 / Module lifecycle handle.
@@ -1323,22 +1321,13 @@ function mount(boxjs, css = "") {
         root.id = "preferences";
         document.body.append(root);
     }
-    // 远程视觉资源与基础布局分开加载，网络状态不控制分页定位。
-    // Load remote visual resources separately so network state cannot control page positioning.
-    const links = styleURLs.map(url => {
-        const link = element("link", "");
-        link.rel = "stylesheet";
-        link.href = url;
-        return link;
-    });
     const base = element("style", ""),
         custom = element("style", "");
     base.textContent = defaults;
     custom.textContent = css;
-    document.head.append(...links, base, custom);
+    document.head.append(base, custom);
     const previousTitle = document.title;
     const previousTheme = document.documentElement.dataset.theme;
-    const previousDark = document.documentElement.classList.contains("bili_dark");
     const systemTheme = window.matchMedia("(prefers-color-scheme: dark)");
     const previousKeyboard = document.documentElement.style.getPropertyValue("--pp-keyboard-height");
     const host = window.frameElement?.ownerDocument.documentElement;
@@ -1350,7 +1339,6 @@ function mount(boxjs, css = "") {
     const syncAppearance = () => {
         const theme = host?.dataset.theme ?? previousTheme ?? (systemTheme.matches ? "dark" : "light");
         document.documentElement.dataset.theme = theme;
-        document.documentElement.classList.toggle("bili_dark", theme === "dark");
         if (host) document.documentElement.style.setProperty("--pp-keyboard-height", host.style.getPropertyValue("--pp-keyboard-height"));
     };
     let observer;
@@ -1371,9 +1359,7 @@ function mount(boxjs, css = "") {
         destroy() {
             observer?.disconnect();
             systemTheme.removeEventListener("change", syncAppearance);
-            document.documentElement.classList.toggle("bili_dark", previousDark);
             panel?.destroy();
-            for (const link of links) link.remove();
             base.remove();
             custom.remove();
             if (existing) root.replaceChildren();

package/dist/module/index.html

@@ -9,6 +9,6 @@
     </head>
     <body>
         <main id="preferences"></main>
-        <script type="module" src="/settings/assets/app.mjs?v=0.9.6"></script>
+        <script type="module" src="/settings/assets/app.mjs?v=0.9.8"></script>
     </body>
 </html>

package/dist/preference-panes.mjs

@@ -1,6 +1,4 @@
-var styleURLs = ["https://s1.hdslb.com/bfs/seed/jinkela/short/b-style/theme.min.css","https://s1.hdslb.com/bfs/seed/jinkela/short/b-style/b-style.min.css"];
-
-var defaults = "/* 官方 b-style 负责行布局与配色；本文件只定义面板容器和控件约束。\n * Official b-style owns row layout and colors; this file defines panel containers and control constraints. */\n.pp-panel {\n    --pp-text: var(--text1);\n    --pp-background: var(--bg2);\n    --pp-surface: var(--bg1);\n    --pp-border: var(--line_regular);\n    --pp-muted: var(--text3);\n    --pp-accent: var(--brand_pink);\n    font:\n        15px / 1.5 -apple-system,\n        BlinkMacSystemFont,\n        \"Segoe UI\",\n        sans-serif;\n    color: var(--pp-text);\n    background: var(--pp-background);\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n}\n.pp-panel * {\n    box-sizing: border-box;\n    letter-spacing: 0;\n}\n.pp-header {\n    flex: none;\n    height: calc(52px + env(safe-area-inset-top));\n    padding: env(safe-area-inset-top) 12px 0;\n    display: flex;\n    align-items: center;\n    background: var(--pp-surface);\n    border-bottom: 1px solid var(--pp-border);\n    position: relative;\n    z-index: 2;\n}\n.pp-title {\n    flex: 1;\n    text-align: center;\n    font-size: 17px;\n    font-weight: 500;\n    margin: 0;\n    min-width: 0;\n    overflow-wrap: anywhere;\n}\n/* 模块图标在正文内；嵌入宿主可使用纯文字原生标题栏。\n * Keep module icons in content so embedded hosts can use text-only native titles. */\n.pp-module-logo {\n    display: none;\n    width: 64px;\n    height: 64px;\n    margin: 8px auto 20px;\n}\n.pp-module-logo:not(:empty) {\n    display: block;\n}\n.pp-module-logo img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n}\n.pp-nav-spacer {\n    width: 44px;\n    flex: none;\n}\n.pp-panel button {\n    font: inherit;\n    cursor: pointer;\n    border: 0;\n    background: none;\n    color: inherit;\n}\n.pp-panel .pp-back {\n    width: 44px;\n    height: 44px;\n    flex: none;\n    font-size: 34px;\n    line-height: 32px;\n    padding: 0;\n}\n.pp-panel button:disabled {\n    opacity: 0.5;\n    cursor: wait;\n}\n/* 固定工具区与滚动视口共用弹性布局，不按工具栏高度拼接页面偏移。\n * Fixed tools and the scrolling viewport share a flex layout without toolbar-height offsets. */\n.pp-toolbar {\n    flex: none;\n    padding: 12px max(16px, calc((100% - 688px) / 2));\n    background: var(--pp-surface);\n    border-bottom: 1px solid var(--pp-border);\n}\n.pp-viewport {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n:root[data-preference-panes-embedded] .pp-header {\n    display: none;\n}\n@supports (height: 100dvh) {\n    .pp-panel {\n        height: 100dvh;\n    }\n}\n.pp-fields,\n.pp-choice-page,\n.pp-cache-page {\n    position: absolute;\n    inset: 0;\n    overflow: auto;\n    padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom) + var(--pp-keyboard-height, 0px));\n    scroll-padding-bottom: var(--pp-keyboard-height, 0px);\n    background: var(--pp-background);\n}\n.pp-choice-link {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    max-width: 45%;\n    min-width: 44px;\n    min-height: 44px;\n    padding: 0;\n    text-align: right;\n    flex: 1;\n}\n.pp-summary {\n    color: var(--pp-muted);\n    font-size: 13px;\n    line-height: 18px;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    overflow-wrap: anywhere;\n}\n.pp-chevron {\n    color: var(--pp-muted);\n    font-size: 22px;\n    flex: none;\n}\n.pp-editor {\n    flex: none;\n    width: 45%;\n    min-width: 0;\n    min-height: 36px;\n    font: inherit;\n    border: 0;\n}\n.pp-search {\n    width: 100%;\n    margin: 0;\n}\n.pp-panel .pp-multiline {\n    display: block;\n}\n.pp-multiline .pp-editor {\n    width: 100%;\n    margin-top: 10px;\n}\n.pp-panel [hidden] {\n    display: none !important;\n}\n.pp-label {\n    flex: 1;\n    min-width: 0;\n}\n.pp-row {\n    min-height: 48px;\n}\n.pp-rows > :last-child {\n    border-bottom: 0 !important;\n}\n.pp-switch {\n    flex: none;\n    accent-color: var(--pp-accent);\n}\n.pp-choice {\n    justify-content: space-between;\n    cursor: pointer;\n}\n.pp-choice input {\n    width: 20px;\n    height: 20px;\n    flex: none;\n    accent-color: var(--pp-accent);\n    margin: 0;\n}\n.pp-description {\n    font-size: 12px;\n    line-height: 1.6;\n    color: var(--pp-muted);\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n}\n.pp-module-info {\n    display: flex;\n    gap: 12px;\n    margin: 12px 0;\n}\n.pp-module-details {\n    min-width: 0;\n    overflow-wrap: anywhere;\n}\n.pp-module-source {\n    color: inherit;\n    text-decoration: underline;\n}\n.pp-error button {\n    min-height: 44px;\n    padding: 8px 12px;\n    border-radius: 6px;\n    background: var(--pp-surface);\n}\n.pp-cache {\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n}\n.pp-toast {\n    pointer-events: none;\n    position: fixed;\n    bottom: calc(30px + env(safe-area-inset-bottom));\n    left: 50%;\n    transform: translateX(-50%);\n    max-width: 90vw;\n    padding: 10px 16px;\n    border-radius: 8px;\n    background: #333e;\n    color: white;\n    font-size: 13px;\n    z-index: 20;\n}\n.pp-toast[data-kind=\"error\"] {\n    background: #8d2424;\n}\n.pp-panel :focus-visible {\n    outline: 2px solid var(--pp-accent);\n    outline-offset: -2px;\n}\n";
+var defaults = "/* 通用默认样式只使用 pp 命名空间；项目可通过 CSS 输入覆盖变量和组件。\n * Generic defaults use only the pp namespace; projects may override variables and components through CSS input. */\n.pp-panel {\n    --pp-text: #18191c;\n    --pp-background: #f6f7f8;\n    --pp-surface: #fff;\n    --pp-field: #f1f2f3;\n    --pp-border: #e3e5e7;\n    --pp-muted: #797f87;\n    --pp-accent: #1677ff;\n    font:\n        15px / 1.5 -apple-system,\n        BlinkMacSystemFont,\n        \"Segoe UI\",\n        sans-serif;\n    color: var(--pp-text);\n    background: var(--pp-background);\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n}\n\n:root[data-theme=\"dark\"] .pp-panel {\n    --pp-text: #f1f2f3;\n    --pp-background: #0d0e0f;\n    --pp-surface: #18191c;\n    --pp-field: #2f3238;\n    --pp-border: #2f3238;\n    --pp-muted: #9499a0;\n}\n.pp-panel * {\n    box-sizing: border-box;\n    letter-spacing: 0;\n}\n.pp-header {\n    flex: none;\n    height: calc(52px + env(safe-area-inset-top));\n    padding: env(safe-area-inset-top) 12px 0;\n    display: flex;\n    align-items: center;\n    background: var(--pp-surface);\n    border-bottom: 1px solid var(--pp-border);\n    position: relative;\n    z-index: 2;\n}\n.pp-title {\n    flex: 1;\n    text-align: center;\n    font-size: 17px;\n    font-weight: 500;\n    margin: 0;\n    min-width: 0;\n    overflow-wrap: anywhere;\n}\n/* 模块图标在正文内；嵌入宿主可使用纯文字原生标题栏。\n * Keep module icons in content so embedded hosts can use text-only native titles. */\n.pp-module-logo {\n    display: none;\n    width: 64px;\n    height: 64px;\n    margin: 8px auto 20px;\n}\n.pp-module-logo:not(:empty) {\n    display: block;\n}\n.pp-module-logo img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n}\n.pp-nav-spacer {\n    width: 44px;\n    flex: none;\n}\n.pp-panel button {\n    font: inherit;\n    cursor: pointer;\n    border: 0;\n    background: none;\n    color: inherit;\n}\n.pp-panel .pp-back {\n    width: 44px;\n    height: 44px;\n    flex: none;\n    font-size: 34px;\n    line-height: 32px;\n    padding: 0;\n}\n.pp-panel button:disabled {\n    opacity: 0.5;\n    cursor: wait;\n}\n/* 固定工具区与滚动视口共用弹性布局，不按工具栏高度拼接页面偏移。\n * Fixed tools and the scrolling viewport share a flex layout without toolbar-height offsets. */\n.pp-toolbar {\n    flex: none;\n    padding: 12px max(16px, calc((100% - 688px) / 2));\n    background: var(--pp-surface);\n    border-bottom: 1px solid var(--pp-border);\n}\n.pp-viewport {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n:root[data-preference-panes-embedded] .pp-header {\n    display: none;\n}\n@supports (height: 100dvh) {\n    .pp-panel {\n        height: 100dvh;\n    }\n}\n.pp-fields,\n.pp-choice-page,\n.pp-cache-page {\n    position: absolute;\n    inset: 0;\n    overflow: auto;\n    padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom) + var(--pp-keyboard-height, 0px));\n    scroll-padding-bottom: var(--pp-keyboard-height, 0px);\n    background: var(--pp-background);\n}\n.pp-choice-link {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    max-width: 45%;\n    min-width: 44px;\n    min-height: 44px;\n    padding: 0;\n    text-align: right;\n    flex: 1;\n}\n.pp-summary {\n    color: var(--pp-muted);\n    font-size: 13px;\n    line-height: 18px;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    overflow-wrap: anywhere;\n}\n.pp-chevron {\n    color: var(--pp-muted);\n    font-size: 22px;\n    flex: none;\n}\n.pp-editor {\n    flex: none;\n    width: 45%;\n    min-width: 0;\n    min-height: 36px;\n    padding: 8px 10px;\n    font: inherit;\n    color: var(--pp-text);\n    background: var(--pp-field);\n    border: 0;\n    border-radius: 6px;\n}\n.pp-search {\n    width: 100%;\n    margin: 0;\n}\n.pp-panel .pp-multiline {\n    display: block;\n}\n.pp-multiline .pp-editor {\n    width: 100%;\n    margin-top: 10px;\n}\n.pp-panel [hidden] {\n    display: none !important;\n}\n.pp-label {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    margin-right: 16px;\n}\n.pp-field-name {\n    color: var(--pp-text);\n    font-size: 15px;\n}\n.pp-field-description {\n    margin-top: 2px;\n    color: var(--pp-muted);\n    font-size: 12px;\n}\n.pp-group {\n    margin-top: 16px;\n}\n.pp-group-title {\n    margin: 0 0 8px;\n    color: var(--pp-muted);\n    font-size: 15px;\n    font-weight: 400;\n}\n.pp-row {\n    min-height: 48px;\n    padding: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--pp-surface);\n    border-bottom: 1px solid var(--pp-border);\n}\n.pp-rows > :last-child {\n    border-bottom: 0 !important;\n}\n.pp-switch {\n    flex: none;\n    accent-color: var(--pp-accent);\n}\n.pp-choice {\n    justify-content: space-between;\n    cursor: pointer;\n}\n.pp-choice input {\n    width: 20px;\n    height: 20px;\n    flex: none;\n    accent-color: var(--pp-accent);\n    margin: 0;\n}\n.pp-description {\n    font-size: 12px;\n    line-height: 1.6;\n    color: var(--pp-muted);\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n}\n.pp-module-info {\n    display: flex;\n    gap: 12px;\n    margin: 12px 0;\n}\n.pp-module-details {\n    min-width: 0;\n    overflow-wrap: anywhere;\n}\n.pp-module-source {\n    color: inherit;\n    text-decoration: underline;\n}\n.pp-error button {\n    min-height: 44px;\n    padding: 8px 12px;\n    border-radius: 6px;\n    background: var(--pp-surface);\n}\n.pp-cache {\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n}\n.pp-toast {\n    pointer-events: none;\n    position: fixed;\n    bottom: calc(30px + env(safe-area-inset-bottom));\n    left: 50%;\n    transform: translateX(-50%);\n    max-width: 90vw;\n    padding: 10px 16px;\n    border-radius: 8px;\n    background: #333e;\n    color: white;\n    font-size: 13px;\n    z-index: 20;\n}\n.pp-toast[data-kind=\"error\"] {\n    background: #8d2424;\n}\n.pp-panel :focus-visible {\n    outline: 2px solid var(--pp-accent);\n    outline-offset: -2px;\n}\n";
 
 /**
  * 校验原始路径片段，不进行 URL 编码转换。
@@ -116,24 +114,24 @@ function element(tag, className, text) {
 }
 
 /**
- * 用官方 b-style 组合行布局，不绑定某个 App 内置页面的编译作用域。
- * Compose rows with official b-style utilities without private app-page compilation scopes.
+ * 创建通用设置行；外部 CSS 可通过 pp 类名覆盖视觉样式。
+ * Create a generic settings row whose appearance can be overridden through pp classes.
  * @template {"div" | "label"} T
  * @param {T} tag 行元素 / Row element.
  * @returns {HTMLElementTagNameMap[T]} 设置行 / Settings row.
  */
 function settingRow(tag) {
-    return element(tag, "pp-row flex_between pd_md bb_1 bc_line_regular bg_bg1");
+    return element(tag, "pp-row");
 }
 
 /**
- * 搜索、选择和文本控件共用官方输入配色与间距，交互由标准 HTML 控件负责。
- * Share official colors and spacing while native HTML controls own input interaction.
+ * 为标准 HTML 输入控件添加通用面板类名。
+ * Add the generic panel class to a standard HTML input control.
  * @param {HTMLElement} control 已创建的原生控件 / Existing native control.
  * @returns {HTMLElement} 输入控件 / Input control.
  */
 function fieldControl(control) {
-    control.classList.add("pp-editor", "bg_bg3", "text1", "pd_sm", "bd_radius_md");
+    control.classList.add("pp-editor");
     return control;
 }
 
@@ -1028,17 +1026,17 @@ function mountPanel(root, catalog) {
             const match = /^\[([^\]]+)\]\s*(.*)$/.exec(field.name);
             const group = match?.[1] ?? "通用";
             if (!groups.has(group)) {
-                const section = element("section", "pp-group mt_md");
+                const section = element("section", "pp-group");
                 const rows = element("div", "pp-rows");
-                section.append(element("h2", "text3 fs_4 fw_400 mb_sm", group), rows);
+                section.append(element("h2", "pp-group-title", group), rows);
                 groups.set(group, rows);
                 view.append(section);
             }
             const row = settingRow("div");
             row.classList.add("pp-field");
-            const label = element("div", "pp-label flex_col items_start mr_md");
-            label.append(element("span", "text1 fs_4", match?.[2] ?? field.name));
-            if (field.description) label.append(element("span", "text3 fs_5 mt_2", field.description));
+            const label = element("div", "pp-label");
+            label.append(element("span", "pp-field-name", match?.[2] ?? field.name));
+            if (field.description) label.append(element("span", "pp-field-description", field.description));
             row.append(label);
             const value = values[field.key];
             /**
@@ -1286,8 +1284,8 @@ function mountPanel(root, catalog) {
 }
 
 /**
- * 挂载模块设置页；内置资源只引用官方地址，CSS 输入仅用于该页。
- * Mount the module page with official resource URLs and optional page-specific CSS.
+ * 挂载模块设置页；默认样式由包提供，可选 CSS 仅作用于当前模块。
+ * Mount a module page with package defaults and optional module-scoped CSS.
  * @param {import("../index.js").BoxJSInput} boxjs 单个模块的 BoxJS JSON / BoxJS JSON for one module.
  * @param {string} [css] 可选 CSS 正文 / Optional CSS text.
  * @returns {import("./index.js").MountedPreferences} 模块生命周期句柄 / Module lifecycle handle.
@@ -1305,22 +1303,13 @@ function mount(boxjs, css = "") {
         root.id = "preferences";
         document.body.append(root);
     }
-    // 远程视觉资源与基础布局分开加载，网络状态不控制分页定位。
-    // Load remote visual resources separately so network state cannot control page positioning.
-    const links = styleURLs.map(url => {
-        const link = element("link", "");
-        link.rel = "stylesheet";
-        link.href = url;
-        return link;
-    });
     const base = element("style", ""),
         custom = element("style", "");
     base.textContent = defaults;
     custom.textContent = css;
-    document.head.append(...links, base, custom);
+    document.head.append(base, custom);
     const previousTitle = document.title;
     const previousTheme = document.documentElement.dataset.theme;
-    const previousDark = document.documentElement.classList.contains("bili_dark");
     const systemTheme = window.matchMedia("(prefers-color-scheme: dark)");
     const previousKeyboard = document.documentElement.style.getPropertyValue("--pp-keyboard-height");
     const host = window.frameElement?.ownerDocument.documentElement;
@@ -1332,7 +1321,6 @@ function mount(boxjs, css = "") {
     const syncAppearance = () => {
         const theme = host?.dataset.theme ?? previousTheme ?? (systemTheme.matches ? "dark" : "light");
         document.documentElement.dataset.theme = theme;
-        document.documentElement.classList.toggle("bili_dark", theme === "dark");
         if (host) document.documentElement.style.setProperty("--pp-keyboard-height", host.style.getPropertyValue("--pp-keyboard-height"));
     };
     let observer;
@@ -1353,9 +1341,7 @@ function mount(boxjs, css = "") {
         destroy() {
             observer?.disconnect();
             systemTheme.removeEventListener("change", syncAppearance);
-            document.documentElement.classList.toggle("bili_dark", previousDark);
             panel?.destroy();
-            for (const link of links) link.remove();
             base.remove();
             custom.remove();
             if (existing) root.replaceChildren();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nsnanocat/preference-panes",
-    "version": "0.9.6",
+    "version": "0.9.8",
     "description": "Shared settings API runtime for JavaScript proxy modules",
     "author": "VirgilClyne <Virgil@nanocat.me>",
     "homepage": "https://NSNanoCat.github.io/preference-panes",

package/src/browser/components.mjs

@@ -15,24 +15,24 @@ export function element(tag, className, text) {
 }
 
 /**
- * 用官方 b-style 组合行布局，不绑定某个 App 内置页面的编译作用域。
- * Compose rows with official b-style utilities without private app-page compilation scopes.
+ * 创建通用设置行；外部 CSS 可通过 pp 类名覆盖视觉样式。
+ * Create a generic settings row whose appearance can be overridden through pp classes.
  * @template {"div" | "label"} T
  * @param {T} tag 行元素 / Row element.
  * @returns {HTMLElementTagNameMap[T]} 设置行 / Settings row.
  */
 export function settingRow(tag) {
-    return element(tag, "pp-row flex_between pd_md bb_1 bc_line_regular bg_bg1");
+    return element(tag, "pp-row");
 }
 
 /**
- * 搜索、选择和文本控件共用官方输入配色与间距，交互由标准 HTML 控件负责。
- * Share official colors and spacing while native HTML controls own input interaction.
+ * 为标准 HTML 输入控件添加通用面板类名。
+ * Add the generic panel class to a standard HTML input control.
  * @param {HTMLElement} control 已创建的原生控件 / Existing native control.
  * @returns {HTMLElement} 输入控件 / Input control.
  */
 export function fieldControl(control) {
-    control.classList.add("pp-editor", "bg_bg3", "text1", "pd_sm", "bd_radius_md");
+    control.classList.add("pp-editor");
     return control;
 }
 

package/src/browser/index.mjs

@@ -1,12 +1,11 @@
-import styleURLs from "#style-urls";
 import defaults from "#styles";
 import { BoxJS } from "../BoxJS.mjs";
 import { element, resourceURL } from "./components.mjs";
 import { mountPanel } from "./panel.mjs";
 
 /**
- * 挂载模块设置页；内置资源只引用官方地址，CSS 输入仅用于该页。
- * Mount the module page with official resource URLs and optional page-specific CSS.
+ * 挂载模块设置页；默认样式由包提供，可选 CSS 仅作用于当前模块。
+ * Mount a module page with package defaults and optional module-scoped CSS.
  * @param {import("../index.js").BoxJSInput} boxjs 单个模块的 BoxJS JSON / BoxJS JSON for one module.
  * @param {string} [css] 可选 CSS 正文 / Optional CSS text.
  * @returns {import("./index.js").MountedPreferences} 模块生命周期句柄 / Module lifecycle handle.
@@ -24,22 +23,13 @@ export function mount(boxjs, css = "") {
         root.id = "preferences";
         document.body.append(root);
     }
-    // 远程视觉资源与基础布局分开加载，网络状态不控制分页定位。
-    // Load remote visual resources separately so network state cannot control page positioning.
-    const links = styleURLs.map(url => {
-        const link = element("link", "");
-        link.rel = "stylesheet";
-        link.href = url;
-        return link;
-    });
     const base = element("style", ""),
         custom = element("style", "");
     base.textContent = defaults;
     custom.textContent = css;
-    document.head.append(...links, base, custom);
+    document.head.append(base, custom);
     const previousTitle = document.title;
     const previousTheme = document.documentElement.dataset.theme;
-    const previousDark = document.documentElement.classList.contains("bili_dark");
     const systemTheme = window.matchMedia("(prefers-color-scheme: dark)");
     const previousKeyboard = document.documentElement.style.getPropertyValue("--pp-keyboard-height");
     const host = window.frameElement?.ownerDocument.documentElement;
@@ -51,7 +41,6 @@ export function mount(boxjs, css = "") {
     const syncAppearance = () => {
         const theme = host?.dataset.theme ?? previousTheme ?? (systemTheme.matches ? "dark" : "light");
         document.documentElement.dataset.theme = theme;
-        document.documentElement.classList.toggle("bili_dark", theme === "dark");
         if (host) document.documentElement.style.setProperty("--pp-keyboard-height", host.style.getPropertyValue("--pp-keyboard-height"));
     };
     let observer;
@@ -72,9 +61,7 @@ export function mount(boxjs, css = "") {
         destroy() {
             observer?.disconnect();
             systemTheme.removeEventListener("change", syncAppearance);
-            document.documentElement.classList.toggle("bili_dark", previousDark);
             panel?.destroy();
-            for (const link of links) link.remove();
             base.remove();
             custom.remove();
             if (existing) root.replaceChildren();

package/src/browser/panel.css

@@ -1,12 +1,13 @@
-/* 官方 b-style 负责行布局与配色；本文件只定义面板容器和控件约束。
- * Official b-style owns row layout and colors; this file defines panel containers and control constraints. */
+/* 通用默认样式只使用 pp 命名空间；项目可通过 CSS 输入覆盖变量和组件。
+ * Generic defaults use only the pp namespace; projects may override variables and components through CSS input. */
 .pp-panel {
-    --pp-text: var(--text1);
-    --pp-background: var(--bg2);
-    --pp-surface: var(--bg1);
-    --pp-border: var(--line_regular);
-    --pp-muted: var(--text3);
-    --pp-accent: var(--brand_pink);
+    --pp-text: #18191c;
+    --pp-background: #f6f7f8;
+    --pp-surface: #fff;
+    --pp-field: #f1f2f3;
+    --pp-border: #e3e5e7;
+    --pp-muted: #797f87;
+    --pp-accent: #1677ff;
     font:
         15px / 1.5 -apple-system,
         BlinkMacSystemFont,
@@ -19,6 +20,15 @@
     flex-direction: column;
     height: 100vh;
 }
+
+:root[data-theme="dark"] .pp-panel {
+    --pp-text: #f1f2f3;
+    --pp-background: #0d0e0f;
+    --pp-surface: #18191c;
+    --pp-field: #2f3238;
+    --pp-border: #2f3238;
+    --pp-muted: #9499a0;
+}
 .pp-panel * {
     box-sizing: border-box;
     letter-spacing: 0;
@@ -147,8 +157,12 @@
     width: 45%;
     min-width: 0;
     min-height: 36px;
+    padding: 8px 10px;
     font: inherit;
+    color: var(--pp-text);
+    background: var(--pp-field);
     border: 0;
+    border-radius: 6px;
 }
 .pp-search {
     width: 100%;
@@ -167,9 +181,37 @@
 .pp-label {
     flex: 1;
     min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-right: 16px;
+}
+.pp-field-name {
+    color: var(--pp-text);
+    font-size: 15px;
+}
+.pp-field-description {
+    margin-top: 2px;
+    color: var(--pp-muted);
+    font-size: 12px;
+}
+.pp-group {
+    margin-top: 16px;
+}
+.pp-group-title {
+    margin: 0 0 8px;
+    color: var(--pp-muted);
+    font-size: 15px;
+    font-weight: 400;
 }
 .pp-row {
     min-height: 48px;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--pp-surface);
+    border-bottom: 1px solid var(--pp-border);
 }
 .pp-rows > :last-child {
     border-bottom: 0 !important;

package/src/browser/panel.mjs

@@ -236,17 +236,17 @@ export function mountPanel(root, catalog) {
             const match = /^\[([^\]]+)\]\s*(.*)$/.exec(field.name);
             const group = match?.[1] ?? "通用";
             if (!groups.has(group)) {
-                const section = node("section", "pp-group mt_md");
+                const section = node("section", "pp-group");
                 const rows = node("div", "pp-rows");
-                section.append(node("h2", "text3 fs_4 fw_400 mb_sm", group), rows);
+                section.append(node("h2", "pp-group-title", group), rows);
                 groups.set(group, rows);
                 view.append(section);
             }
             const row = settingRow("div");
             row.classList.add("pp-field");
-            const label = node("div", "pp-label flex_col items_start mr_md");
-            label.append(node("span", "text1 fs_4", match?.[2] ?? field.name));
-            if (field.description) label.append(node("span", "text3 fs_5 mt_2", field.description));
+            const label = node("div", "pp-label");
+            label.append(node("span", "pp-field-name", match?.[2] ?? field.name));
+            if (field.description) label.append(node("span", "pp-field-description", field.description));
             row.append(label);
             const value = values[field.key];
             /**