@nsnanocat/preference-panes 0.9.8 → 0.9.10

package/dist/preference-panes.mjs

@@ -1,4 +1,4 @@
-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";
+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    width: 100%;\n    max-width: 100vw;\n    min-width: 0;\n    height: 100vh;\n    overflow: hidden;\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.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.pp-viewport {\n    position: relative;\n    flex: 1;\n    min-width: 0;\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    min-width: 0;\n    overflow-x: hidden;\n    overflow-y: 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-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-width: 0;\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 编码转换。
@@ -24,8 +24,8 @@ class BoxJS {
      */
     constructor(input) {
         if (!input || typeof input !== "object") throw new TypeError("Expected BoxJS JSON");
-        this.document = JSON.parse(JSON.stringify(input));
-        const apps = Array.isArray(this.document) ? [{ settings: this.document }] : (this.document.apps ?? [this.document]);
+        const document = JSON.parse(JSON.stringify(input));
+        const apps = Array.isArray(document) ? [{ settings: document }] : (document.apps ?? [document]);
         if (!Array.isArray(apps)) throw new TypeError("Expected BoxJS apps array");
         this.modules = new Map();
         for (const app of apps) {
@@ -33,7 +33,7 @@ class BoxJS {
             for (const entry of app.settings) {
                 if (typeof entry.id !== "string") throw new TypeError("BoxJS settings require string IDs");
                 if (!entry.id.startsWith("@")) {
-                    if (Array.isArray(this.document)) throw new TypeError("BoxJS settings require @root.path IDs");
+                    if (Array.isArray(document)) throw new TypeError("BoxJS settings require @root.path IDs");
                     continue;
                 }
                 const [storageKey, ...parts] = entry.id.slice(1).split(".");
@@ -50,24 +50,10 @@ class BoxJS {
                 target.owners.add(app);
             }
         }
-        this.metadata = metadata(Array.isArray(this.document) ? {} : this.document);
+        this.metadata = metadata(Array.isArray(document) ? {} : document);
         for (const target of this.modules.values()) target.metadata = target.owners.size === 1 ? metadata([...target.owners][0]) : {};
     }
 
-    /**
-     * 提取一个模块的原生 BoxJS，保留所属 app 的元数据。
-     * Select a module's native BoxJS while retaining owning-app metadata.
-     * @param {string} module 模块标识 / Module identifier.
-     * @returns {unknown} 可直接用作配置 Mock 的 JSON / JSON suitable for a configuration Mock.
-     */
-    select(module) {
-        const target = this.modules.get(module);
-        if (!target) throw new TypeError(`No BoxJS settings for module: ${module}`);
-        if (Array.isArray(this.document)) return target.entries;
-        const apps = [...target.owners].map(app => ({ ...app, settings: app.settings.filter(entry => target.entries.includes(entry)) }));
-        return this.document.apps ? { ...this.document, apps } : apps[0];
-    }
-
     /**
      * 取得本次导入的唯一模块，避免把模块数据变成项目目录。
      * Get the single imported module without turning module data into a project directory.
@@ -147,22 +133,6 @@ function resourceURL(value) {
     return url.href;
 }
 
-/**
- * 展示标准 BoxJS 图标；icons 保持透明/彩色语义，不解释为亮暗版本。
- * Display standard BoxJS icons, preserving transparent/color rather than light/dark semantics.
- * @param {import("../index.js").BoxJSMetadata} metadata 展示信息 / Presentation metadata.
- * @param {string} className 样式 / CSS class.
- * @returns {HTMLImageElement | null} 图标或无图标 / Icon or no icon.
- */
-function icon(metadata, className) {
-    const source = metadata.icon || metadata.icons?.[1] || metadata.icons?.[0];
-    if (!source) return null;
-    const image = element("img", className);
-    image.src = resourceURL(source);
-    image.alt = "";
-    return image;
-}
-
 /**
  * 共享加载失败视图，不创建配置表单或数据读取。
  * Share a load-error view without creating controls or reading settings.
@@ -198,17 +168,18 @@ function requestConfirmation(host, message) {
 }
 
 /**
- * 标题栏共用三点菜单；Shadow DOM 隔离项目样式，保留继承的主题色。
- * Shared title-bar overflow menu; Shadow DOM isolates layout while inheriting theme colors.
+ * 共用三点按钮和底部操作菜单；弹层挂载到文档根部，不受标题栏显示状态影响。
+ * Shared overflow trigger and bottom action sheet; the layer is mounted at document level and remains independent of header visibility.
  */
 class ActionMenu {
     #button;
-    #popup;
-    #backdrop;
+    #layer;
+    #items;
     #select;
     #document;
+    #disabled = true;
     #key = event => {
-        if (event.key === "Escape" && !this.#popup.hidden) {
+        if (event.key === "Escape" && !this.#layer.hidden) {
             event.preventDefault();
             this.close();
             this.#button.focus();
@@ -224,44 +195,55 @@ class ActionMenu {
         this.#document = document;
         this.#select = select;
         this.element = document.createElement("span");
-        const root = this.element.attachShadow({ mode: "open" });
-        root.innerHTML = `<style>
-          :host{display:inline-flex;position:relative;width:44px;height:44px;color:inherit}
-          :host([hidden]),[hidden]{display:none!important}
-          button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}
+        const triggerRoot = this.element.attachShadow({ mode: "open" });
+        triggerRoot.innerHTML = `<style>
+          :host{display:inline-flex;width:44px;height:44px;color:inherit}
+          :host([hidden]){display:none!important}
+          button{width:44px;height:44px;padding:10px;font:inherit;cursor:pointer;border:0;color:inherit;background:none}
           button:disabled{opacity:.4;cursor:default}
           button:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
-          #trigger{width:44px;height:44px;padding:10px;position:relative;z-index:3}
           svg{display:block;width:24px;height:24px;fill:currentColor}
-          #backdrop{position:fixed;inset:0;z-index:1}
-          #items{position:absolute;right:0;top:46px;z-index:2;min-width:160px;padding:6px;background:var(--pp-surface,Canvas);color:var(--pp-text,CanvasText);border:1px solid var(--pp-border,#8884);border-radius:12px;box-shadow:0 8px 28px #0003}
-          #items button{display:block;text-align:left;white-space:nowrap;width:100%;padding:11px 14px;border-radius:8px;font:14px/1.4 system-ui,sans-serif}
-          #items button:hover{background:#8882}
-          #items button[data-danger]{color:#e45656}
-        </style><button id="trigger" type="button" aria-label="更多操作" aria-haspopup="menu" aria-expanded="false" aria-controls="items"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="4" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="20" cy="12" r="2"/></svg></button><button id="backdrop" type="button" tabindex="-1" aria-label="关闭菜单" hidden></button><div id="items" role="menu" hidden></div>`;
-        this.#button = root.querySelector("#trigger");
-        this.#popup = root.querySelector("#items");
-        this.#backdrop = root.querySelector("#backdrop");
-        this.#button.onclick = () => {
-            const open = this.#popup.hidden;
-            this.#popup.hidden = this.#backdrop.hidden = !open;
-            this.#button.setAttribute("aria-expanded", String(open));
-            if (open) this.#popup.firstElementChild.focus();
+        </style><button type="button" aria-label="更多操作" aria-haspopup="menu" aria-expanded="false"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="4" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="20" cy="12" r="2"/></svg></button>`;
+        this.#button = triggerRoot.querySelector("button");
+        this.#layer = document.createElement("span");
+        const layerRoot = this.#layer.attachShadow({ mode: "open" });
+        layerRoot.innerHTML = `<style>
+          :host{position:fixed;inset:0;z-index:2147483647;color:var(--pp-text,CanvasText);font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
+          :host([hidden]){display:none!important}
+          button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}
+          button:focus-visible{outline:2px solid var(--pp-accent,Highlight);outline-offset:-3px}
+          #backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;background:#0008;animation:pp-fade-in .18s ease-out}
+          #sheet{position:absolute;z-index:1;left:0;right:0;bottom:0;width:min(100%,540px);max-height:calc(100% - 24px);margin:auto;padding:8px 8px calc(8px + env(safe-area-inset-bottom));animation:pp-sheet-in .22s cubic-bezier(.2,.8,.2,1)}
+          #items,#cancel{overflow:hidden;background:var(--pp-surface,Canvas);border:1px solid var(--pp-border,#8884);border-radius:14px;box-shadow:0 8px 28px #0004}
+          #items{max-height:calc(100vh - 116px - env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
+          #items button,#cancel{display:block;width:100%;min-height:54px;padding:14px 18px;text-align:center}
+          #items button+button{border-top:1px solid var(--pp-border,#8884)}
+          #items button[data-danger]{color:var(--pp-danger,#e45656)}
+          #cancel{margin-top:8px;color:var(--pp-accent,Highlight);font-weight:600}
+          @keyframes pp-fade-in{from{opacity:0}}
+          @keyframes pp-sheet-in{from{transform:translateY(100%)}}
+          @media (prefers-reduced-motion:reduce){#backdrop,#sheet{animation:none}}
+        </style><button id="backdrop" type="button" tabindex="-1" aria-label="关闭菜单"></button><section id="sheet" role="dialog" aria-modal="true" aria-label="更多操作"><div id="items" role="menu"></div><button id="cancel" type="button">取消</button></section>`;
+        this.#items = layerRoot.querySelector("#items");
+        this.#button.onclick = () => (this.#layer.hidden ? this.open() : this.close());
+        layerRoot.querySelector("#backdrop").onclick = () => {
+            this.close();
+            this.#button.focus();
         };
-        this.#backdrop.onclick = () => this.close();
-        this.#popup.onkeydown = event => {
-            if (event.key === "Tab") {
-                this.close();
-                return;
-            }
-            const items = [...this.#popup.children];
-            const index = items.indexOf(root.activeElement);
+        layerRoot.querySelector("#cancel").onclick = () => {
+            this.close();
+            this.#button.focus();
+        };
+        this.#items.onkeydown = event => {
+            const items = [...this.#items.children];
+            const index = items.indexOf(layerRoot.activeElement);
             const offsets = { ArrowDown: 1, ArrowUp: -1 };
             if (event.key in offsets) {
                 event.preventDefault();
                 items[(index + offsets[event.key] + items.length) % items.length].focus();
             }
         };
+        document.body.append(this.#layer);
         document.addEventListener("keydown", this.#key);
         this.update([]);
     }
@@ -275,8 +257,9 @@ class ActionMenu {
      */
     update(items, disabled = false) {
         this.close();
-        this.#button.disabled = disabled || items.length === 0;
-        this.#popup.replaceChildren(
+        this.#disabled = disabled || items.length === 0;
+        this.#button.disabled = this.#disabled;
+        this.#items.replaceChildren(
             ...items.map(item => {
                 const button = this.#document.createElement("button");
                 button.type = "button";
@@ -292,13 +275,30 @@ class ActionMenu {
         );
     }
 
+    /**
+     * 打开当前操作菜单。
+     * Open the current action sheet.
+     * @returns {void} 无返回值 / No return value.
+     */
+    open() {
+        if (this.#disabled) return;
+        const style = getComputedStyle(this.element);
+        for (const property of ["--pp-text", "--pp-surface", "--pp-border", "--pp-accent", "--pp-danger"]) {
+            const value = style.getPropertyValue(property);
+            if (value) this.#layer.style.setProperty(property, value);
+        }
+        this.#layer.hidden = false;
+        this.#button.setAttribute("aria-expanded", "true");
+        this.#items.firstElementChild.focus();
+    }
+
     /**
      * 关闭菜单。
      * Close the menu.
      * @returns {void} 无返回值 / No return value.
      */
     close() {
-        this.#popup.hidden = this.#backdrop.hidden = true;
+        this.#layer.hidden = true;
         this.#button.setAttribute("aria-expanded", "false");
     }
 
@@ -309,6 +309,7 @@ class ActionMenu {
      */
     destroy() {
         this.#document.removeEventListener("keydown", this.#key);
+        this.#layer.remove();
         this.element.remove();
     }
 }
@@ -316,14 +317,15 @@ class ActionMenu {
 /**
  * 将 BoxJS 数组、app 或订阅转换为模块字段，保留原文件为唯一字段来源。
  * Normalize a BoxJS array, app or subscription using the source JSON as the field authority.
- * @param {unknown} config BoxJS JSON / BoxJS document.
+ * @param {unknown | BoxJS} config BoxJS JSON 或已解析目录 / BoxJS document or parsed catalog.
  * @param {string} module API 第一段模块名 / First API path segment.
  * @returns {import("../index.js").ModuleDefinition} 存储根和字段 / Storage root and fields.
  * @throws {TypeError} 配置结构、字段路径、默认值或展示属性无效 / Invalid configuration, field path, default or presentation attribute.
  */
 function normalizeBoxJs(config, module) {
     validatePathParts([module]);
-    const target = new BoxJS(config).modules.get(module);
+    const catalog = config instanceof BoxJS ? config : new BoxJS(config);
+    const target = catalog.modules.get(module);
     if (!target) throw new TypeError(`No BoxJS settings for module: ${module}`);
     const { entries, storageKey, metadata } = target;
     const fields = [];
@@ -556,7 +558,7 @@ function createPreferencesClient({ catalog, fetch: request = globalThis.fetch.bi
             const state = { controller: new AbortController(), definition: null, values: {}, saving: false };
             sessions.set(module, state);
             try {
-                const definition = normalizeBoxJs(catalog.select(module), module);
+                const definition = normalizeBoxJs(catalog, module);
                 const response = await send(`@${definition.storageKey}.${definition.settingsPath.join(".")}`, "get", undefined, state.controller.signal);
                 let subtree = response.status === 404 ? {} : await response.json();
                 if (typeof subtree === "string") subtree = JSON.parse(subtree);
@@ -820,17 +822,10 @@ function mountPanel(root, catalog) {
     const menu = new ActionMenu(id => runAction(id));
     const trailing = element("span", "pp-nav-spacer");
     trailing.append(menu.element);
-    const logo = element("span", "pp-module-logo");
-    logo.setAttribute("aria-hidden", "true");
-    const image = icon(catalog.module.metadata, "");
-    if (image) logo.append(image);
-    const toolbar = element("div", "pp-toolbar");
-    toolbar.setAttribute("role", "search");
-    toolbar.hidden = true;
     const viewport = element("div", "pp-viewport");
     let toast;
     header.append(back, heading, trailing);
-    shell.append(header, toolbar, viewport);
+    shell.append(header, viewport);
     root.append(shell);
     // 嵌入模式向宿主发布导航状态，宿主不读取或修改模块内部 DOM。
     // Embedded mode publishes navigation state without host reads or mutations of the module DOM.
@@ -921,7 +916,6 @@ function mountPanel(root, catalog) {
     async function open(module) {
         const version = ++generation;
         active = module;
-        toolbar.hidden = true;
         back.disabled = window.history.length <= 1;
         heading.textContent = module;
         publishNavigation();
@@ -944,15 +938,6 @@ function mountPanel(root, catalog) {
         const { definition, values } = client.snapshot(active);
         heading.textContent = definition.metadata?.name || active;
         const view = element("section", "pp-fields");
-        view.append(logo);
-        const search = element("input", "");
-        search.type = "search";
-        search.placeholder = "搜索设置项";
-        search.setAttribute("aria-label", "搜索设置");
-        const searchField = fieldControl(search);
-        searchField.classList.add("pp-search");
-        toolbar.replaceChildren(searchField);
-        const searchRows = [];
         /**
          * 挂载后执行的多行高度更新
          * Textarea sizing callbacks run after mounting.
@@ -971,7 +956,6 @@ function mountPanel(root, catalog) {
          */
         const updateNavigation = () => {
             const editor = editors.get(navigation.current);
-            toolbar.hidden = Boolean(navigation.current);
             heading.textContent = editor?.title ?? definition.metadata?.name ?? active;
             back.disabled = saving || !navigation.canGoBack;
             publishNavigation();
@@ -1196,18 +1180,7 @@ function mountPanel(root, catalog) {
             });
             if (eventName === "input") inputContainer.addEventListener("compositionend", event => event.target.dispatchEvent(new window.Event("input", { bubbles: true })));
             groups.get(group).append(row);
-            searchRows.push({ row, text: [field.name, field.key, field.description, ...(field.options ?? []).map(option => option.label)].join(" ").toLocaleLowerCase() });
         }
-        const empty = element("p", "pp-description", "没有匹配的设置项");
-        empty.hidden = true;
-        empty.setAttribute("role", "status");
-        view.append(empty);
-        search.oninput = () => {
-            const words = search.value.trim().toLocaleLowerCase().split(/\s+/);
-            for (const { row, text } of searchRows) row.hidden = !words.every(word => text.includes(word));
-            for (const rows of groups.values()) rows.parentElement.hidden = [...rows.children].every(row => row.hidden);
-            empty.hidden = searchRows.some(({ row }) => !row.hidden);
-        };
         const cachePage = element("section", "pp-cache-page");
         const output = element("pre", "pp-cache");
         output.textContent = "暂无缓存";
@@ -1292,7 +1265,7 @@ function mountPanel(root, catalog) {
  */
 function mount(boxjs, css = "") {
     if (typeof css !== "string") throw new TypeError("CSS must be a string");
-    const catalog = new BoxJS(boxjs);
+    const catalog = boxjs instanceof BoxJS ? boxjs : new BoxJS(boxjs);
     const metadata = catalog.module.metadata;
     const image = metadata.icon || metadata.icons?.[1] || metadata.icons?.[0];
     if (image) resourceURL(image);

package/package.json

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

package/src/BoxJS.mjs

@@ -12,8 +12,8 @@ export class BoxJS {
      */
     constructor(input) {
         if (!input || typeof input !== "object") throw new TypeError("Expected BoxJS JSON");
-        this.document = JSON.parse(JSON.stringify(input));
-        const apps = Array.isArray(this.document) ? [{ settings: this.document }] : (this.document.apps ?? [this.document]);
+        const document = JSON.parse(JSON.stringify(input));
+        const apps = Array.isArray(document) ? [{ settings: document }] : (document.apps ?? [document]);
         if (!Array.isArray(apps)) throw new TypeError("Expected BoxJS apps array");
         this.modules = new Map();
         for (const app of apps) {
@@ -21,7 +21,7 @@ export class BoxJS {
             for (const entry of app.settings) {
                 if (typeof entry.id !== "string") throw new TypeError("BoxJS settings require string IDs");
                 if (!entry.id.startsWith("@")) {
-                    if (Array.isArray(this.document)) throw new TypeError("BoxJS settings require @root.path IDs");
+                    if (Array.isArray(document)) throw new TypeError("BoxJS settings require @root.path IDs");
                     continue;
                 }
                 const [storageKey, ...parts] = entry.id.slice(1).split(".");
@@ -38,24 +38,10 @@ export class BoxJS {
                 target.owners.add(app);
             }
         }
-        this.metadata = metadata(Array.isArray(this.document) ? {} : this.document);
+        this.metadata = metadata(Array.isArray(document) ? {} : document);
         for (const target of this.modules.values()) target.metadata = target.owners.size === 1 ? metadata([...target.owners][0]) : {};
     }
 
-    /**
-     * 提取一个模块的原生 BoxJS，保留所属 app 的元数据。
-     * Select a module's native BoxJS while retaining owning-app metadata.
-     * @param {string} module 模块标识 / Module identifier.
-     * @returns {unknown} 可直接用作配置 Mock 的 JSON / JSON suitable for a configuration Mock.
-     */
-    select(module) {
-        const target = this.modules.get(module);
-        if (!target) throw new TypeError(`No BoxJS settings for module: ${module}`);
-        if (Array.isArray(this.document)) return target.entries;
-        const apps = [...target.owners].map(app => ({ ...app, settings: app.settings.filter(entry => target.entries.includes(entry)) }));
-        return this.document.apps ? { ...this.document, apps } : apps[0];
-    }
-
     /**
      * 取得本次导入的唯一模块，避免把模块数据变成项目目录。
      * Get the single imported module without turning module data into a project directory.

package/src/browser/ActionMenu.mjs

@@ -1,15 +1,16 @@
 /**
- * 标题栏共用三点菜单；Shadow DOM 隔离项目样式，保留继承的主题色。
- * Shared title-bar overflow menu; Shadow DOM isolates layout while inheriting theme colors.
+ * 共用三点按钮和底部操作菜单；弹层挂载到文档根部，不受标题栏显示状态影响。
+ * Shared overflow trigger and bottom action sheet; the layer is mounted at document level and remains independent of header visibility.
  */
 export class ActionMenu {
     #button;
-    #popup;
-    #backdrop;
+    #layer;
+    #items;
     #select;
     #document;
+    #disabled = true;
     #key = event => {
-        if (event.key === "Escape" && !this.#popup.hidden) {
+        if (event.key === "Escape" && !this.#layer.hidden) {
             event.preventDefault();
             this.close();
             this.#button.focus();
@@ -25,44 +26,55 @@ export class ActionMenu {
         this.#document = document;
         this.#select = select;
         this.element = document.createElement("span");
-        const root = this.element.attachShadow({ mode: "open" });
-        root.innerHTML = `<style>
-          :host{display:inline-flex;position:relative;width:44px;height:44px;color:inherit}
-          :host([hidden]),[hidden]{display:none!important}
-          button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}
+        const triggerRoot = this.element.attachShadow({ mode: "open" });
+        triggerRoot.innerHTML = `<style>
+          :host{display:inline-flex;width:44px;height:44px;color:inherit}
+          :host([hidden]){display:none!important}
+          button{width:44px;height:44px;padding:10px;font:inherit;cursor:pointer;border:0;color:inherit;background:none}
           button:disabled{opacity:.4;cursor:default}
           button:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
-          #trigger{width:44px;height:44px;padding:10px;position:relative;z-index:3}
           svg{display:block;width:24px;height:24px;fill:currentColor}
-          #backdrop{position:fixed;inset:0;z-index:1}
-          #items{position:absolute;right:0;top:46px;z-index:2;min-width:160px;padding:6px;background:var(--pp-surface,Canvas);color:var(--pp-text,CanvasText);border:1px solid var(--pp-border,#8884);border-radius:12px;box-shadow:0 8px 28px #0003}
-          #items button{display:block;text-align:left;white-space:nowrap;width:100%;padding:11px 14px;border-radius:8px;font:14px/1.4 system-ui,sans-serif}
-          #items button:hover{background:#8882}
-          #items button[data-danger]{color:#e45656}
-        </style><button id="trigger" type="button" aria-label="更多操作" aria-haspopup="menu" aria-expanded="false" aria-controls="items"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="4" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="20" cy="12" r="2"/></svg></button><button id="backdrop" type="button" tabindex="-1" aria-label="关闭菜单" hidden></button><div id="items" role="menu" hidden></div>`;
-        this.#button = root.querySelector("#trigger");
-        this.#popup = root.querySelector("#items");
-        this.#backdrop = root.querySelector("#backdrop");
-        this.#button.onclick = () => {
-            const open = this.#popup.hidden;
-            this.#popup.hidden = this.#backdrop.hidden = !open;
-            this.#button.setAttribute("aria-expanded", String(open));
-            if (open) this.#popup.firstElementChild.focus();
+        </style><button type="button" aria-label="更多操作" aria-haspopup="menu" aria-expanded="false"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="4" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="20" cy="12" r="2"/></svg></button>`;
+        this.#button = triggerRoot.querySelector("button");
+        this.#layer = document.createElement("span");
+        const layerRoot = this.#layer.attachShadow({ mode: "open" });
+        layerRoot.innerHTML = `<style>
+          :host{position:fixed;inset:0;z-index:2147483647;color:var(--pp-text,CanvasText);font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
+          :host([hidden]){display:none!important}
+          button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}
+          button:focus-visible{outline:2px solid var(--pp-accent,Highlight);outline-offset:-3px}
+          #backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;background:#0008;animation:pp-fade-in .18s ease-out}
+          #sheet{position:absolute;z-index:1;left:0;right:0;bottom:0;width:min(100%,540px);max-height:calc(100% - 24px);margin:auto;padding:8px 8px calc(8px + env(safe-area-inset-bottom));animation:pp-sheet-in .22s cubic-bezier(.2,.8,.2,1)}
+          #items,#cancel{overflow:hidden;background:var(--pp-surface,Canvas);border:1px solid var(--pp-border,#8884);border-radius:14px;box-shadow:0 8px 28px #0004}
+          #items{max-height:calc(100vh - 116px - env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
+          #items button,#cancel{display:block;width:100%;min-height:54px;padding:14px 18px;text-align:center}
+          #items button+button{border-top:1px solid var(--pp-border,#8884)}
+          #items button[data-danger]{color:var(--pp-danger,#e45656)}
+          #cancel{margin-top:8px;color:var(--pp-accent,Highlight);font-weight:600}
+          @keyframes pp-fade-in{from{opacity:0}}
+          @keyframes pp-sheet-in{from{transform:translateY(100%)}}
+          @media (prefers-reduced-motion:reduce){#backdrop,#sheet{animation:none}}
+        </style><button id="backdrop" type="button" tabindex="-1" aria-label="关闭菜单"></button><section id="sheet" role="dialog" aria-modal="true" aria-label="更多操作"><div id="items" role="menu"></div><button id="cancel" type="button">取消</button></section>`;
+        this.#items = layerRoot.querySelector("#items");
+        this.#button.onclick = () => (this.#layer.hidden ? this.open() : this.close());
+        layerRoot.querySelector("#backdrop").onclick = () => {
+            this.close();
+            this.#button.focus();
         };
-        this.#backdrop.onclick = () => this.close();
-        this.#popup.onkeydown = event => {
-            if (event.key === "Tab") {
-                this.close();
-                return;
-            }
-            const items = [...this.#popup.children];
-            const index = items.indexOf(root.activeElement);
+        layerRoot.querySelector("#cancel").onclick = () => {
+            this.close();
+            this.#button.focus();
+        };
+        this.#items.onkeydown = event => {
+            const items = [...this.#items.children];
+            const index = items.indexOf(layerRoot.activeElement);
             const offsets = { ArrowDown: 1, ArrowUp: -1 };
             if (event.key in offsets) {
                 event.preventDefault();
                 items[(index + offsets[event.key] + items.length) % items.length].focus();
             }
         };
+        document.body.append(this.#layer);
         document.addEventListener("keydown", this.#key);
         this.update([]);
     }
@@ -76,8 +88,9 @@ export class ActionMenu {
      */
     update(items, disabled = false) {
         this.close();
-        this.#button.disabled = disabled || items.length === 0;
-        this.#popup.replaceChildren(
+        this.#disabled = disabled || items.length === 0;
+        this.#button.disabled = this.#disabled;
+        this.#items.replaceChildren(
             ...items.map(item => {
                 const button = this.#document.createElement("button");
                 button.type = "button";
@@ -93,13 +106,30 @@ export class ActionMenu {
         );
     }
 
+    /**
+     * 打开当前操作菜单。
+     * Open the current action sheet.
+     * @returns {void} 无返回值 / No return value.
+     */
+    open() {
+        if (this.#disabled) return;
+        const style = getComputedStyle(this.element);
+        for (const property of ["--pp-text", "--pp-surface", "--pp-border", "--pp-accent", "--pp-danger"]) {
+            const value = style.getPropertyValue(property);
+            if (value) this.#layer.style.setProperty(property, value);
+        }
+        this.#layer.hidden = false;
+        this.#button.setAttribute("aria-expanded", "true");
+        this.#items.firstElementChild.focus();
+    }
+
     /**
      * 关闭菜单。
      * Close the menu.
      * @returns {void} 无返回值 / No return value.
      */
     close() {
-        this.#popup.hidden = this.#backdrop.hidden = true;
+        this.#layer.hidden = true;
         this.#button.setAttribute("aria-expanded", "false");
     }
 
@@ -110,6 +140,7 @@ export class ActionMenu {
      */
     destroy() {
         this.#document.removeEventListener("keydown", this.#key);
+        this.#layer.remove();
         this.element.remove();
     }
 }

package/src/browser/Navigation.d.mts

@@ -140,6 +140,12 @@ export class ActionMenu {
      * @returns 无返回值 / No return value.
      */
     update(items: MenuAction[], disabled?: boolean): void;
+    /**
+     * 打开当前操作菜单。
+     * Open the current action sheet.
+     * @returns 无返回值 / No return value.
+     */
+    open(): void;
     /**
      * 关闭菜单。
      * Close the menu.

package/src/browser/app.mjs

@@ -35,9 +35,9 @@ async function start() {
         });
         const [data, style] = await Promise.all(resources.map(url => (url ? fetch(url, { cache: "no-store", credentials: "omit" }) : null)));
         if (data.status !== 200 || (style && style.status !== 200)) throw new Error(`HTTP ${data.status !== 200 ? data.status : style.status}`);
-        const boxjs = await data.json();
-        if (new BoxJS(boxjs).module.module !== inputs.module) throw new Error("Imported JSON does not match the module URL");
-        view = mount(boxjs, style ? await style.text() : "");
+        const catalog = new BoxJS(await data.json());
+        if (catalog.module.module !== inputs.module) throw new Error("Imported JSON does not match the module URL");
+        view = mount(catalog, style ? await style.text() : "");
     } catch (error) {
         document.querySelector("#preferences").replaceChildren(errorView(error, start));
     }

package/src/browser/client.mjs

@@ -128,7 +128,7 @@ export function createPreferencesClient({ catalog, fetch: request = globalThis.f
             const state = { controller: new AbortController(), definition: null, values: {}, saving: false };
             sessions.set(module, state);
             try {
-                const definition = normalizeBoxJs(catalog.select(module), module);
+                const definition = normalizeBoxJs(catalog, module);
                 const response = await send(`@${definition.storageKey}.${definition.settingsPath.join(".")}`, "get", undefined, state.controller.signal);
                 let subtree = response.status === 404 ? {} : await response.json();
                 if (typeof subtree === "string") subtree = JSON.parse(subtree);

package/src/browser/components.mjs

@@ -48,22 +48,6 @@ export function resourceURL(value) {
     return url.href;
 }
 
-/**
- * 展示标准 BoxJS 图标；icons 保持透明/彩色语义，不解释为亮暗版本。
- * Display standard BoxJS icons, preserving transparent/color rather than light/dark semantics.
- * @param {import("../index.js").BoxJSMetadata} metadata 展示信息 / Presentation metadata.
- * @param {string} className 样式 / CSS class.
- * @returns {HTMLImageElement | null} 图标或无图标 / Icon or no icon.
- */
-export function icon(metadata, className) {
-    const source = metadata.icon || metadata.icons?.[1] || metadata.icons?.[0];
-    if (!source) return null;
-    const image = element("img", className);
-    image.src = resourceURL(source);
-    image.alt = "";
-    return image;
-}
-
 /**
  * 共享加载失败视图，不创建配置表单或数据读取。
  * Share a load-error view without creating controls or reading settings.