@nsnanocat/preference-panes 1.3.0 → 1.3.1

package/dist/preference-panes.mjs

@@ -1,3 +1,152 @@
+/**
+ * 共用菜单按钮和底部操作菜单；原生宿主可通过 MORE 调用。
+ * Shared menu trigger and bottom action sheet; native hosts may invoke it through MORE.
+ */
+class ActionMenu {
+    #button;
+    #layer;
+    #items;
+    #select;
+    #document;
+    #disabled = true;
+    #key = event => {
+        if (event.key === "Escape" && !this.#layer.hidden) {
+            event.preventDefault();
+            this.close();
+            this.#button.focus();
+        }
+    };
+
+    /**
+     * 创建菜单，操作逻辑由调用方提供。
+     * Create a menu whose actions are handled by the caller.
+     * @param {(id: string) => void} select 菜单选择回调 / Selection callback.
+     */
+    constructor(select) {
+        this.#document = document;
+        this.#select = select;
+        this.element = document.createElement("span");
+        const triggerRoot = this.element.attachShadow({ mode: "open" });
+        triggerRoot.innerHTML = `<style>
+          :host{display:inline-flex;flex:none;width:37px;height:37px;color:inherit}
+          :host([hidden]){display:none!important}
+          button{box-sizing:border-box;width:37px;height:37px;padding:8px;border-radius:4px;font:inherit;cursor:pointer;border:0;color:inherit;background:none;transition:background-color .3s}
+          button:hover{background:var(--pp-field,#8882)}
+          button:disabled{opacity:.4;cursor:default}
+          button:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
+          svg{display:block;width:21px;height:21px;fill:none}
+        </style><button type="button" aria-label="更多操作" aria-haspopup="menu" aria-expanded="false"><svg viewBox="0 0 21 21" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.667" d="M3.645 5.225h13.333M3.645 10.225h13.333M3.645 15.225h13.333"/></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}
+          *,*::before,*::after{box-sizing:border-box}
+          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:100%;max-width: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();
+        };
+        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([]);
+    }
+
+    /**
+     * 同步可用操作和忙碌状态，不重建菜单触发按钮。
+     * Update actions and busy state without replacing the trigger button.
+     * @param {Array<{id: string, label: string, destructive?: boolean}>} items 操作列表 / Actions.
+     * @param {boolean} [disabled] 是否忙碌 / Whether operations are busy.
+     * @returns {void} 无返回值 / No return value.
+     */
+    update(items, disabled = false) {
+        this.close();
+        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";
+                button.setAttribute("role", "menuitem");
+                button.textContent = item.label;
+                button.toggleAttribute("data-danger", Boolean(item.destructive));
+                button.onclick = () => {
+                    this.close();
+                    this.#select(item.id);
+                };
+                return button;
+            }),
+        );
+    }
+
+    /**
+     * 打开当前操作菜单。
+     * 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.#layer.hidden = true;
+        this.#button.setAttribute("aria-expanded", "false");
+    }
+
+    /**
+     * 移除监听器与节点。
+     * Remove listeners and elements.
+     * @returns {void} 无返回值 / No return value.
+     */
+    destroy() {
+        this.#document.removeEventListener("keydown", this.#key);
+        this.#layer.remove();
+        this.element.remove();
+    }
+}
+
 /**
  * 校验原始路径片段，不进行 URL 编码转换。
  * Validate raw path segments without URL encoding conversion.
@@ -298,18 +447,6 @@ function fieldControl(control) {
     return control;
 }
 
-/**
- * 元数据地址只允许 HTTP(S) 和相对地址。
- * Allow only HTTP(S) and relative metadata addresses.
- * @param {string} value 元数据地址 / Metadata address.
- * @returns {string} 完整地址 / Absolute address.
- */
-function resourceURL(value) {
-    const url = new URL(value, document.baseURI);
-    if (!["http:", "https:"].includes(url.protocol)) throw new TypeError("Metadata URLs must use HTTP(S)");
-    return url.href;
-}
-
 /**
  * 创建覆盖可用内容区的通用读取状态，失败时可附加重试动作。
  * Create a shared status view that fills the available content area and may include retry.
@@ -334,182 +471,191 @@ function statusView(message, retry) {
 }
 
 /**
- * 请求宿主确认；独立网页使用浏览器对话框。
- * Request confirmation from the host, using the browser dialog for standalone pages.
- * @param {Window} host 模块窗口 / Module window.
- * @param {string} message 确认内容 / Confirmation message.
- * @returns {Promise<boolean>} 用户是否确认 / Whether the user confirmed.
- */
-function requestConfirmation(host, message) {
-    return new Promise((resolve, reject) => {
-        const frame = host.frameElement;
-        if (frame) {
-            const event = new frame.ownerDocument.defaultView.CustomEvent("preferencepanes:confirm", { cancelable: true, detail: { message, resolve, reject } });
-            if (!frame.dispatchEvent(event)) return;
-        }
-        resolve(host.confirm(message));
-    });
-}
-
-/**
- * 请求宿主打开 URL；未被接管时保留链接默认导航。
- * Request host URL navigation while preserving the link default when unhandled.
- * @param {Window} host 模块窗口 / Module window.
- * @param {string} url 完整目标地址 / Absolute target URL.
- * @returns {boolean} 宿主是否接管导航 / Whether the host accepted navigation ownership.
- */
-function requestURLNavigation(host, url) {
-    const frame = host.frameElement;
-    if (!frame) return false;
-    const event = new frame.ownerDocument.defaultView.CustomEvent("preferencepanes:open-url", { cancelable: true, detail: { url } });
-    return !frame.dispatchEvent(event);
-}
-
-/**
- * 独立页面的三点按钮和底部操作菜单；嵌入页面由宿主提供对应界面。
- * Overflow trigger and bottom action sheet for standalone pages; embedded pages use host-provided chrome.
+ * 同一文档内的首页、模块及字段子页导航。
+ * Navigate homepage, module and field views within one document.
  */
-class ActionMenu {
-    #button;
-    #layer;
-    #items;
-    #select;
-    #document;
-    #disabled = true;
-    #key = event => {
-        if (event.key === "Escape" && !this.#layer.hidden) {
-            event.preventDefault();
-            this.close();
-            this.#button.focus();
-        }
+class Navigation extends EventTarget {
+    #container;
+    #home;
+    #create;
+    #window;
+    #key = null;
+    #view;
+    #retiring;
+    #controller;
+    #animation;
+    #scroll = new Map();
+    #onHistory = () => this.#route();
+    #onPageShow = event => {
+        if (event.persisted) this.#route(true);
     };
 
     /**
-     * 创建菜单，操作逻辑由调用方提供。
-     * Create a menu whose actions are handled by the caller.
-     * @param {(id: string) => void} select 菜单选择回调 / Selection callback.
+     * 根视图始终保留；工厂按需提供子页，可用 signal 取消离开后的异步加载。
+     * Retain the home view and create details on demand; signal cancels async work after departure.
+     * @param {HTMLElement} container 由调用方布局的页面容器 / Caller-styled view container.
+     * @param {HTMLElement} home 已创建的主页节点 / Existing home view.
+     * @param {(key: string, signal: AbortSignal) => HTMLElement | undefined} create 子页工厂；未知路径返回 undefined / Detail factory; undefined for unknown routes.
      */
-    constructor(select) {
-        this.#document = document;
-        this.#select = select;
-        this.element = document.createElement("span");
-        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}
-          svg{display:block;width:24px;height:24px;fill:currentColor}
-        </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}
-          *,*::before,*::after{box-sizing:border-box}
-          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:100%;max-width: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();
-        };
-        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([]);
+    constructor(container, home, create) {
+        super();
+        this.#container = container;
+        this.#home = home;
+        this.#create = create;
+        this.#window = container.ownerDocument.defaultView;
+        container.replaceChildren(home);
+        this.#window.addEventListener("popstate", this.#onHistory);
+        this.#window.addEventListener("hashchange", this.#onHistory);
+        this.#window.addEventListener("pageshow", this.#onPageShow);
+        this.#route();
     }
 
     /**
-     * 同步可用操作和忙碌状态，不重建菜单触发按钮。
-     * Update actions and busy state without replacing the trigger button.
-     * @param {Array<{id: string, label: string, destructive?: boolean}>} items 操作列表 / Actions.
-     * @param {boolean} [disabled] 是否忙碌 / Whether operations are busy.
+     * 当前子页键；空字符串表示主页。
+     * Current detail key; empty means home.
+     */
+    get current() {
+        return this.#key;
+    }
+
+    /**
+     * 是否可以返回上一级或先前文档。
+     * Whether a parent view or previous document is available.
+     */
+    get canGoBack() {
+        return Boolean(this.#key) || this.#window.history.length > 1;
+    }
+
+    /**
+     * 加入模块或字段子页历史，保留路由中的层级分隔符。
+     * Push a module or field view while retaining route hierarchy separators.
+     * @param {string} key 子页键 / Detail key.
      * @returns {void} 无返回值 / No return value.
      */
-    update(items, disabled = false) {
-        this.close();
-        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";
-                button.setAttribute("role", "menuitem");
-                button.textContent = item.label;
-                button.toggleAttribute("data-danger", Boolean(item.destructive));
-                button.onclick = () => {
-                    this.close();
-                    this.#select(item.id);
-                };
-                return button;
-            }),
-        );
+    open(key) {
+        if (key === this.#key) return;
+        const url = new URL(this.#window.location.href);
+        url.hash = key.split("/").map(encodeURIComponent).join("/");
+        this.#window.history.pushState({ ...this.#window.history.state, preferencePanesRoute: key }, "", url.href);
+        this.#route();
     }
 
     /**
-     * 打开当前操作菜单。
-     * Open the current action sheet.
+     * 沿文档历史返回，根页可退回上个文档。
+     * Go back through document history, including the previous document from home.
      * @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();
+    back() {
+        if (this.canGoBack) this.#window.history.back();
     }
 
     /**
-     * 关闭菜单。
-     * Close the menu.
+     * 更新当前页的挂载视图，保留路由和滚动位置。
+     * Refresh the mounted view while retaining route and scroll position.
      * @returns {void} 无返回值 / No return value.
      */
-    close() {
-        this.#layer.hidden = true;
-        this.#button.setAttribute("aria-expanded", "false");
+    refresh() {
+        this.#route(true);
     }
 
     /**
-     * 移除监听器与节点。
-     * Remove listeners and elements.
+     * 解析 URL 并统一处理页面切换、加载取消与动画结束后的释放。
+     * Resolve the URL and coordinate transitions, cancellation and release after animation.
+     * @param {boolean} [reload] 从页面缓存恢复时重新创建子页 / Recreate a detail after bfcache restoration.
+     * @returns {void} 无返回值 / No return value.
+     */
+    #route(reload = false) {
+        const url = new URL(this.#window.location.href);
+        let key;
+        try {
+            key = decodeURIComponent(url.hash.slice(1));
+        } catch (error) {
+            if (!(error instanceof URIError)) throw error;
+            key = "";
+        }
+        if (!reload && key === this.#key) return;
+        if (key !== this.#key) this.#scroll.set(this.#key, (this.#view ?? this.#home).scrollTop);
+        this.#controller?.abort();
+        this.#controller = new AbortController();
+        const next = key ? this.#create(key, this.#controller.signal) : undefined;
+        if (!next) key = "";
+        const history = this.#window.history;
+        // 直接打开字段页时补齐首页和模块历史；刷新不重复堆叠。
+        // Seed homepage and module history for direct field links without stacking on reload.
+        if (url.hash && history.state?.preferencePanesRoute !== key) {
+            url.hash = "";
+            history.replaceState({ ...history.state, preferencePanesRoute: "" }, "", url.href);
+            if (key) {
+                const module = key.split("/")[0];
+                if (key.includes("/") && module !== "$link") {
+                    url.hash = encodeURIComponent(module);
+                    history.pushState({ ...history.state, preferencePanesRoute: module }, "", url.href);
+                }
+                url.hash = key.split("/").map(encodeURIComponent).join("/");
+                history.pushState({ ...history.state, preferencePanesRoute: key }, "", url.href);
+            }
+        }
+        const previous = this.#view;
+        if (previous === next && this.#key === key) {
+            if (previous && this.#scroll.has(key)) {
+                previous.scrollTop = this.#scroll.get(key);
+                this.#scroll.delete(key);
+            }
+            this.dispatchEvent(new Event("change"));
+            return;
+        }
+        const scroll = this.#scroll.get(key) ?? (key === this.#key ? (previous?.scrollTop ?? 0) : 0);
+        const position = previous ? this.#window.getComputedStyle(previous).transform : "none";
+        this.#animation?.cancel();
+        this.#retiring?.remove();
+        this.#retiring = previous;
+        if (previous) {
+            previous.inert = true;
+        }
+        this.#key = key;
+        this.#view = next;
+        this.#home.inert = Boolean(next);
+        if (next) {
+            next.inert = false;
+            this.#container.append(next);
+            next.scrollTop = scroll;
+            // 加载占位页可能无法滚到原位置；配置与控件就绪后的 refresh 再恢复一次。
+            // A loading placeholder may clamp scrolling; restore once more when config and controls refresh.
+            if (next.scrollTop === scroll) this.#scroll.delete(key);
+        }
+        if (!next) {
+            this.#home.scrollTop = this.#scroll.get("") ?? 0;
+            this.#scroll.delete("");
+        }
+        const moving = next ?? previous;
+        if (moving) {
+            const animation = moving.animate([{ transform: next ? "translateX(100%)" : position }, { transform: next ? "translateX(0)" : "translateX(100%)" }], { duration: this.#window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 280, easing: "cubic-bezier(.22,.61,.36,1)", fill: "forwards" });
+            this.#animation = animation;
+            animation.onfinish = () => {
+                if (this.#animation !== animation) return;
+                this.#retiring?.remove();
+                this.#retiring = undefined;
+                animation.cancel();
+                this.#animation = undefined;
+            };
+        }
+        this.dispatchEvent(new Event("change"));
+    }
+
+    /**
+     * 释放监听器、加载、动画和节点；调用方可重新创建导航。
+     * Release listeners, loads, animations and nodes so callers can recreate navigation.
      * @returns {void} 无返回值 / No return value.
      */
     destroy() {
-        this.#document.removeEventListener("keydown", this.#key);
-        this.#layer.remove();
-        this.element.remove();
+        this.#window.removeEventListener("popstate", this.#onHistory);
+        this.#window.removeEventListener("hashchange", this.#onHistory);
+        this.#window.removeEventListener("pageshow", this.#onPageShow);
+        this.#controller?.abort();
+        this.#animation?.cancel();
+        this.#retiring?.remove();
+        this.#view?.remove();
+        this.#home.remove();
     }
 }
 
@@ -626,8 +772,8 @@ class PreferencesClient {
     }
 
     /**
-     * 终止当前页面仍在进行的请求。
-     * Abort requests still owned by the current page.
+     * 终止当前页面的读取；已开始的持久化写入继续完成。
+     * Abort reads owned by the current page while allowing started persistence writes to finish.
      * @returns {void} 无返回值 / No return value.
      */
     leave() {
@@ -665,252 +811,95 @@ class PreferencesClient {
      */
     async #send(action, path, value) {
         const controller = new AbortController();
-        const abort = () => controller.abort();
-        if (this.#session.signal.aborted) abort();
-        this.#session.signal.addEventListener("abort", abort, { once: true });
-        const timer = setTimeout(abort, this.#timeout);
-        try {
-            const response = await this.#request(`/api/${action}`, {
-                method: "POST",
-                credentials: "omit",
-                cache: "no-store",
-                signal: controller.signal,
-                headers: { "Content-Type": "application/x-www-form-urlencoded" },
-                body: new URLSearchParams([[path, action === "set" ? JSON.stringify(value) : ""]]).toString(),
-            });
-            if (response.status !== 200 && !(action === "get" && response.status === 404)) throw new Error(`HTTP ${response.status}`);
-            return response;
-        } finally {
-            clearTimeout(timer);
-            this.#session.signal.removeEventListener("abort", abort);
-        }
-    }
-
-    /**
-     * 执行写入动作；成功后只更新当前页面值。
-     * Execute a mutation and update only the current page values after success.
-     * @param {"set" | "delete"} action API 动作 / API action.
-     * @param {string} key 不含存储根的路径 / Path without the storage root.
-     * @param {unknown} value set 写入值 / Value written by set.
-     * @param {"write" | "delete" | "clearCaches" | "reset"} operation 通知操作 / Notification operation.
-     * @returns {Promise<void>} 操作完成 / Operation completion.
-     */
-    async #change(action, key, value, operation) {
-        if (this.#saving) throw new Error("A settings write is already in progress");
-        this.#saving = true;
-        try {
-            switch (operation) {
-                case "write":
-                case "delete": {
-                    const field = this.#definition.fields.find(candidate => candidate.key === key);
-                    if (!field || (operation === "write" && !validValue(field, value))) throw new TypeError("Invalid setting value");
-                    const indexed = /^(.*)\.(\d+)$/.exec(key);
-                    if (indexed) {
-                        const array = [...(this.#arrays.get(indexed[1]) ?? [])];
-                        for (const sibling of this.#definition.fields) {
-                            if (sibling.key.startsWith(`${indexed[1]}.`) && /^\d+$/.test(sibling.key.slice(indexed[1].length + 1))) {
-                                const index = Number(sibling.key.slice(indexed[1].length + 1));
-                                if (array[index] === undefined) array[index] = this.#values[sibling.key] ?? sibling.defaultValue;
-                            }
-                        }
-                        array[Number(indexed[2])] = operation === "delete" ? field.defaultValue : value;
-                        await this.#send("set", `@${this.#definition.storageKey}.${indexed[1]}`, array);
-                        this.#arrays.set(indexed[1], array);
-                    } else await this.#send(action, `@${this.#definition.storageKey}.${key}`, value);
-                    switch (operation) {
-                        case "write":
-                            this.#values[key] = JSON.parse(JSON.stringify(value));
-                            delete this.#warnings[key];
-                            break;
-                        case "delete":
-                            delete this.#values[key];
-                            delete this.#warnings[key];
-                            if (Object.prototype.hasOwnProperty.call(field, "defaultValue")) this.#values[key] = JSON.parse(JSON.stringify(field.defaultValue));
-                            break;
-                    }
-                    break;
-                }
-                case "clearCaches":
-                    await this.#send(action, `@${this.#definition.storageKey}.${key}`, value);
-                    break;
-                case "reset":
-                    if (this.#definition.resetPaths) {
-                        for (const path of this.#definition.resetPaths) await this.#send("delete", path);
-                    } else await this.#send(action, `@${this.#definition.storageKey}.${key}`, value);
-                    this.#arrays.clear();
-                    this.#warnings = {};
-                    for (const field of this.#definition.fields) {
-                        delete this.#values[field.key];
-                        if (Object.prototype.hasOwnProperty.call(field, "defaultValue")) this.#values[field.key] = JSON.parse(JSON.stringify(field.defaultValue));
-                    }
-                    break;
-            }
-            this.#notify({ kind: "success", operation, module: this.#module, key });
-        } catch (error) {
-            this.#notify({ kind: "error", operation, module: this.#module, key, message: error.message });
-            throw error;
-        } finally {
-            this.#saving = false;
-        }
-    }
-}
-
-/**
- * 同一文档内的主页/子页导航；iframe 各自的实例通过浏览器联合历史协作。
- * Navigate home/detail views within a document; iframe instances cooperate through joint browser history.
- */
-class Navigation extends EventTarget {
-    #container;
-    #home;
-    #create;
-    #window;
-    #key = null;
-    #view;
-    #retiring;
-    #controller;
-    #animation;
-    #scroll = new WeakMap();
-    #onHistory = () => this.#route();
-    #onPageShow = event => {
-        if (event.persisted) this.#route(true);
-    };
-
-    /**
-     * 根视图始终保留；工厂按需提供子页，可用 signal 取消离开后的异步加载。
-     * Retain the home view and create details on demand; signal cancels async work after departure.
-     * @param {HTMLElement} container 由调用方布局的页面容器 / Caller-styled view container.
-     * @param {HTMLElement} home 已创建的主页节点 / Existing home view.
-     * @param {(key: string, signal: AbortSignal) => HTMLElement | undefined} create 子页工厂；未知路径返回 undefined / Detail factory; undefined for unknown routes.
-     */
-    constructor(container, home, create) {
-        super();
-        this.#container = container;
-        this.#home = home;
-        this.#create = create;
-        this.#window = container.ownerDocument.defaultView;
-        container.replaceChildren(home);
-        this.#window.addEventListener("popstate", this.#onHistory);
-        this.#window.addEventListener("hashchange", this.#onHistory);
-        this.#window.addEventListener("pageshow", this.#onPageShow);
-        this.#route();
-    }
-
-    /**
-     * 当前子页键；空字符串表示主页。
-     * Current detail key; empty means home.
-     */
-    get current() {
-        return this.#key;
-    }
-
-    /**
-     * 是否可以返回上一级或先前文档。
-     * Whether a parent view or previous document is available.
-     */
-    get canGoBack() {
-        return Boolean(this.#key) || this.#window.history.length > 1;
-    }
-
-    /**
-     * 加入子页历史；使用文档自身 URL，避免 srcdoc 按宿主 base URL 跳转。
-     * Push a detail using the document URL, avoiding srcdoc navigation against the host base URL.
-     * @param {string} key 子页键 / Detail key.
-     * @returns {void} 无返回值 / No return value.
-     */
-    open(key) {
-        if (key === this.#key) return;
-        const url = new URL(this.#window.location.href);
-        url.hash = encodeURIComponent(key);
-        this.#window.history.pushState({ ...this.#window.history.state, preferencePanesRoute: key }, "", url.href);
-        this.#route();
-    }
-
-    /**
-     * 沿浏览器联合历史返回，根页可退回宿主或上个文档。
-     * Go back through joint history, including a host or previous document from home.
-     * @returns {void} 无返回值 / No return value.
-     */
-    back() {
-        if (this.canGoBack) this.#window.history.back();
-    }
-
-    /**
-     * 解析 URL 并统一处理页面切换、加载取消与动画结束后的释放。
-     * Resolve the URL and coordinate transitions, cancellation and release after animation.
-     * @param {boolean} [reload] 从页面缓存恢复时重新创建子页 / Recreate a detail after bfcache restoration.
-     * @returns {void} 无返回值 / No return value.
-     */
-    #route(reload = false) {
-        const url = new URL(this.#window.location.href);
-        let key;
-        try {
-            key = decodeURIComponent(url.hash.slice(1));
-        } catch (error) {
-            if (!(error instanceof URIError)) throw error;
-            key = "";
-        }
-        if (!reload && key === this.#key) return;
-        this.#controller?.abort();
-        this.#controller = new AbortController();
-        const next = key ? this.#create(key, this.#controller.signal) : undefined;
-        if (!next) key = "";
-        const history = this.#window.history;
-        // 直接打开子页时建立一次主页历史；刷新不重复堆叠。
-        // Seed home history once for direct details, without stacking entries on reload.
-        if (url.hash && history.state?.preferencePanesRoute !== key) {
-            url.hash = "";
-            history.replaceState({ ...history.state, preferencePanesRoute: "" }, "", url.href);
-            if (key) {
-                url.hash = encodeURIComponent(key);
-                history.pushState({ ...history.state, preferencePanesRoute: key }, "", url.href);
-            }
-        }
-        const previous = this.#view;
-        const position = previous ? this.#window.getComputedStyle(previous).transform : "none";
-        this.#animation?.cancel();
-        this.#retiring?.remove();
-        this.#retiring = previous;
-        if (previous) {
-            this.#scroll.set(previous, previous.scrollTop);
-            previous.inert = true;
-        }
-        this.#key = key;
-        this.#view = next;
-        this.#home.inert = Boolean(next);
-        if (next) {
-            next.inert = false;
-            this.#container.append(next);
-            next.scrollTop = this.#scroll.get(next) ?? 0;
+        const abort = () => controller.abort();
+        if (action === "get") {
+            if (this.#session.signal.aborted) abort();
+            this.#session.signal.addEventListener("abort", abort, { once: true });
         }
-        const moving = next ?? previous;
-        if (moving) {
-            const animation = moving.animate([{ transform: next ? "translateX(100%)" : position }, { transform: next ? "translateX(0)" : "translateX(100%)" }], { duration: this.#window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 280, easing: "cubic-bezier(.22,.61,.36,1)", fill: "forwards" });
-            this.#animation = animation;
-            animation.onfinish = () => {
-                if (this.#animation !== animation) return;
-                this.#retiring?.remove();
-                this.#retiring = undefined;
-                animation.cancel();
-                this.#animation = undefined;
-            };
+        const timer = setTimeout(abort, this.#timeout);
+        try {
+            const response = await this.#request(`/api/${action}`, {
+                method: "POST",
+                credentials: "omit",
+                cache: "no-store",
+                signal: controller.signal,
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+                body: new URLSearchParams([[path, action === "set" ? JSON.stringify(value) : ""]]).toString(),
+            });
+            if (response.status !== 200 && !(action === "get" && response.status === 404)) throw new Error(`HTTP ${response.status}`);
+            return response;
+        } finally {
+            clearTimeout(timer);
+            this.#session.signal.removeEventListener("abort", abort);
         }
-        this.dispatchEvent(new Event("change"));
     }
 
     /**
-     * 释放监听器、加载、动画和节点；调用方可重新创建导航。
-     * Release listeners, loads, animations and nodes so callers can recreate navigation.
-     * @returns {void} 无返回值 / No return value.
+     * 执行写入动作；成功后只更新当前页面值。
+     * Execute a mutation and update only the current page values after success.
+     * @param {"set" | "delete"} action API 动作 / API action.
+     * @param {string} key 不含存储根的路径 / Path without the storage root.
+     * @param {unknown} value set 写入值 / Value written by set.
+     * @param {"write" | "delete" | "clearCaches" | "reset"} operation 通知操作 / Notification operation.
+     * @returns {Promise<void>} 操作完成 / Operation completion.
      */
-    destroy() {
-        this.#window.removeEventListener("popstate", this.#onHistory);
-        this.#window.removeEventListener("hashchange", this.#onHistory);
-        this.#window.removeEventListener("pageshow", this.#onPageShow);
-        this.#controller?.abort();
-        this.#animation?.cancel();
-        this.#retiring?.remove();
-        this.#view?.remove();
-        this.#home.remove();
+    async #change(action, key, value, operation) {
+        if (this.#saving) throw new Error("A settings write is already in progress");
+        this.#saving = true;
+        try {
+            switch (operation) {
+                case "write":
+                case "delete": {
+                    const field = this.#definition.fields.find(candidate => candidate.key === key);
+                    if (!field || (operation === "write" && !validValue(field, value))) throw new TypeError("Invalid setting value");
+                    const indexed = /^(.*)\.(\d+)$/.exec(key);
+                    if (indexed) {
+                        const array = [...(this.#arrays.get(indexed[1]) ?? [])];
+                        for (const sibling of this.#definition.fields) {
+                            if (sibling.key.startsWith(`${indexed[1]}.`) && /^\d+$/.test(sibling.key.slice(indexed[1].length + 1))) {
+                                const index = Number(sibling.key.slice(indexed[1].length + 1));
+                                if (array[index] === undefined) array[index] = this.#values[sibling.key] ?? sibling.defaultValue;
+                            }
+                        }
+                        array[Number(indexed[2])] = operation === "delete" ? field.defaultValue : value;
+                        await this.#send("set", `@${this.#definition.storageKey}.${indexed[1]}`, array);
+                        this.#arrays.set(indexed[1], array);
+                    } else await this.#send(action, `@${this.#definition.storageKey}.${key}`, value);
+                    switch (operation) {
+                        case "write":
+                            this.#values[key] = JSON.parse(JSON.stringify(value));
+                            delete this.#warnings[key];
+                            break;
+                        case "delete":
+                            delete this.#values[key];
+                            delete this.#warnings[key];
+                            if (Object.prototype.hasOwnProperty.call(field, "defaultValue")) this.#values[key] = JSON.parse(JSON.stringify(field.defaultValue));
+                            break;
+                    }
+                    break;
+                }
+                case "clearCaches":
+                    await this.#send(action, `@${this.#definition.storageKey}.${key}`, value);
+                    break;
+                case "reset":
+                    if (this.#definition.resetPaths) {
+                        for (const path of this.#definition.resetPaths) await this.#send("delete", path);
+                    } else await this.#send(action, `@${this.#definition.storageKey}.${key}`, value);
+                    this.#arrays.clear();
+                    this.#warnings = {};
+                    for (const field of this.#definition.fields) {
+                        delete this.#values[field.key];
+                        if (Object.prototype.hasOwnProperty.call(field, "defaultValue")) this.#values[field.key] = JSON.parse(JSON.stringify(field.defaultValue));
+                    }
+                    break;
+            }
+            this.#notify({ kind: "success", operation, module: this.#module, key });
+        } catch (error) {
+            this.#notify({ kind: "error", operation, module: this.#module, key, message: error.message });
+            throw error;
+        } finally {
+            this.#saving = false;
+        }
     }
 }
 
@@ -931,20 +920,24 @@ function warningMessage(warning) {
 }
 
 /**
- * 管理模块表单、导航、操作队列和短暂通知。
- * Manage the module form, navigation, operation queue, and transient notifications.
+ * 管理模块表单、操作队列和设置会话。
+ * Manage the module form, operation queue and settings session.
  */
 class PreferencesPanel {
     #release;
+    #view;
+    #state;
+    #perform;
 
     /**
      * 挂载 BoxJS 定义对应的模块表单。
      * Mount the module form described by a BoxJS definition.
      * @param {HTMLElement} root 包内挂载元素 / Internal mount element.
      * @param {import("../index.js").ModuleDefinition} definition 已规范化字段定义 / Normalized field definition.
+     * @param {import("./page.mjs").PageController} page 内部页面控制器 / Internal page controller.
      */
-    constructor(root, definition) {
-        this.#release = this.#mount(root, definition);
+    constructor(root, definition, page) {
+        this.#release = this.#mount(root, definition, page);
     }
 
     /**
@@ -952,13 +945,13 @@ class PreferencesPanel {
      * Build panel DOM, interactions, and session, then return its release operation.
      * @param {HTMLElement} root 包内挂载元素 / Internal mount element.
      * @param {import("../index.js").ModuleDefinition} definition 已规范化字段定义 / Normalized field definition.
+     * @param {import("./page.mjs").PageController} page 内部页面控制器 / Internal page controller.
      * @returns {() => void} 释放操作 / Release operation.
      */
-    #mount(root, definition) {
+    #mount(root, definition, page) {
         const title = definition.metadata?.name ?? definition.module;
         const document = root.ownerDocument;
         const window = document.defaultView;
-        const frame = window.frameElement?.dataset.preferencePanes ? window.frameElement : undefined;
         const shell = element("div", "pp-panel");
         shell.dataset.module = definition.module;
         const handlers = new Map();
@@ -969,50 +962,25 @@ class PreferencesPanel {
             { id: "reset", label: "重置设置", destructive: true },
         ];
         const viewport = element("div", "pp-viewport");
-        let back, heading, menu;
-        if (frame) shell.append(viewport);
-        else {
-            const header = element("header", "pp-header");
-            back = element("button", "pp-back", "‹");
-            back.setAttribute("aria-label", "返回");
-            back.type = "button";
-            heading = element("h1", "pp-title", title);
-            menu = new ActionMenu(id => runAction(id));
-            const trailing = element("span", "pp-nav-spacer");
-            trailing.append(menu.element);
-            header.append(back, heading, trailing);
-            shell.append(header, viewport);
-        }
-        let toast;
+        shell.append(viewport);
         root.append(shell);
-        // 嵌入模式向宿主发布导航状态，宿主不读取或修改模块内部 DOM。
-        // Embedded mode publishes navigation state without host reads or mutations of the module DOM.
-        const publishNavigation = () => {
-            const actions = handlers.size ? menuItems : [];
-            if (frame)
-                frame.dispatchEvent(
-                    new frame.ownerDocument.defaultView.CustomEvent("preferencepanes:change", {
-                        detail: { title: currentTitle, module: definition.module, busy: saving, canGoBack, actions },
-                    }),
-                );
-            else {
-                heading.textContent = currentTitle;
-                back.disabled = !canGoBack;
-                menu.update(actions, saving);
-            }
+        const editors = new Map();
+        this.#view = key => {
+            const editor = editors.get(key);
+            editor?.load?.();
+            return editor?.node ?? root;
+        };
+        this.#state = key => ({ title: editors.get(key)?.title ?? title, actions: handlers.size ? menuItems : [], busy: saving });
+        this.#perform = id => {
+            if (!saving && handlers.has(id)) runAction(id);
         };
-        const onAction = event => {
-            if (!saving && handlers.has(event.detail)) runAction(event.detail);
+        const publishNavigation = () => {
+            if (!destroyed) page.update();
         };
-        frame?.addEventListener("preferencepanes:action", onAction);
-        let timer,
-            navigation,
-            generation = 0,
+        let generation = 0,
             active = null,
             saving = false,
-            destroyed = false,
-            currentTitle = title,
-            canGoBack = window.history.length > 1;
+            destroyed = false;
         /**
          * 展示短暂通知，不刷新设置数据。
          * Display a transient notification without refreshing settings.
@@ -1039,26 +1007,12 @@ class PreferencesPanel {
                     message = "修改成功";
                     break;
             }
-            // 宿主接管时不创建网页 Toast，也不运行其计时器。
-            // A host-owned notice creates no web Toast and starts no local timer.
-            if (frame && !frame.dispatchEvent(new frame.ownerDocument.defaultView.CustomEvent("preferencepanes:notice", { cancelable: true, detail: { kind: event.kind, message } }))) return;
-            if (!toast) {
-                toast = element("div", "pp-toast");
-                toast.setAttribute("role", "status");
-                shell.append(toast);
-            }
-            toast.textContent = message;
-            toast.dataset.kind = event.kind;
-            toast.hidden = false;
-            clearTimeout(timer);
-            timer = setTimeout(() => {
-                toast.hidden = true;
-            }, 2400);
+            page.notice({ kind: event.kind, message });
         };
         const client = new PreferencesClient({ definition, notify });
         /**
-         * 两种菜单入口共用异步错误处理，包含宿主确认框错误。
-         * Share async error handling between both menus, including host-dialog errors.
+         * 菜单操作统一处理异步错误，包含宿主确认框错误。
+         * Handle asynchronous action errors, including host-dialog errors.
          * @param {string} id 操作标识 / Action identifier.
          * @returns {Promise<void>} 操作已处理 / Action handled.
          */
@@ -1078,8 +1032,6 @@ class PreferencesPanel {
         async function open(module) {
             const version = ++generation;
             active = module;
-            currentTitle = module;
-            canGoBack = window.history.length > 1;
             publishNavigation();
             viewport.replaceChildren(statusView("读取设置…"));
             try {
@@ -1098,7 +1050,6 @@ class PreferencesPanel {
          */
         function controls() {
             const { definition, values } = client.snapshot();
-            currentTitle = definition.metadata?.name || active;
             const view = element("section", "pp-fields");
             /**
              * 挂载后执行的多行高度更新
@@ -1106,23 +1057,12 @@ class PreferencesPanel {
              * @type {Array<() => void>}
              */
             const growingInputs = [];
-            const editors = new Map();
+            editors.clear();
             const summaries = [];
             const warningRefreshers = [];
             const groups = new Map();
             let queue = Promise.resolve(),
                 pendingWrites = 0;
-            /**
-             * 导航组件处理页面切换，表单只更新当前标题与返回按钮。
-             * Let navigation own transitions; the form only updates the title and back button.
-             * @returns {void} 无返回值 / No return value.
-             */
-            const updateNavigation = () => {
-                const editor = editors.get(navigation.current);
-                currentTitle = editor?.title ?? definition.metadata?.name ?? active;
-                canGoBack = !saving && navigation.canGoBack;
-                publishNavigation();
-            };
             /**
              * 串行执行模块操作，保持输入可编辑。
              * Serialize module actions while keeping inputs editable.
@@ -1134,7 +1074,6 @@ class PreferencesPanel {
             function perform(action, success, failure = () => {}) {
                 pendingWrites++;
                 saving = true;
-                canGoBack = false;
                 publishNavigation();
                 queue = queue
                     .then(action)
@@ -1149,8 +1088,6 @@ class PreferencesPanel {
                     .finally(() => {
                         pendingWrites--;
                         saving = pendingWrites > 0;
-                        if (destroyed && !saving) client.leave();
-                        canGoBack = !saving && navigation.canGoBack;
                         publishNavigation();
                     });
                 return queue;
@@ -1204,7 +1141,8 @@ class PreferencesPanel {
                             link.href = value;
                         };
                         link.addEventListener("click", event => {
-                            if (requestURLNavigation(window, link.href)) event.preventDefault();
+                            event.preventDefault();
+                            page.openURL(link.href);
                         });
                         row.append(link);
                         row.addEventListener("click", event => {
@@ -1228,12 +1166,12 @@ class PreferencesPanel {
                         break;
                     }
                     case "checkboxes": {
-                        const page = element("section", "pp-choice-page");
-                        if (field.description) page.append(element("p", "pp-description", field.description));
+                        const editor = element("section", "pp-panel pp-detail pp-choice-page");
+                        if (field.description) editor.append(element("p", "pp-description", field.description));
                         const choices = element("div", "pp-rows");
-                        page.append(choices);
+                        editor.append(choices);
                         inputContainer = choices;
-                        editors.set(field.key, { node: page, title: match?.[2] ?? field.name });
+                        editors.set(field.key, { node: editor, title: match?.[2] ?? field.name });
                         const summary = element("span", "pp-summary");
                         const link = element("button", "pp-choice-link");
                         link.type = "button";
@@ -1250,7 +1188,7 @@ class PreferencesPanel {
                         };
                         summaries.push(refresh);
                         refresh();
-                        link.onclick = () => navigation.open(field.key);
+                        link.onclick = () => page.open(field.key);
                         row.addEventListener("click", event => {
                             if (!link.contains(event.target)) link.click();
                         });
@@ -1367,12 +1305,12 @@ class PreferencesPanel {
                 if (eventName === "input") inputContainer.addEventListener("compositionend", event => event.target.dispatchEvent(new window.Event("input", { bubbles: true })));
                 groups.get(group).append(row);
             }
-            const settingsPage = element("section", "pp-settings-page");
+            const settingsPage = element("section", "pp-panel pp-detail pp-settings-page");
             const settingsOutput = element("pre", "pp-cache");
             settingsOutput.setAttribute("aria-label", "Settings 内容");
             settingsPage.append(settingsOutput);
-            editors.set("$settings", { node: settingsPage, title: "设置" });
-            handlers.set("viewSettings", () => {
+            const loadSettings = () => {
+                editors.get("$settings").load = undefined;
                 if (saving) return;
                 let value;
                 return perform(
@@ -1386,17 +1324,24 @@ class PreferencesPanel {
                     },
                     () => {
                         settingsOutput.textContent = value === undefined ? "暂无设置" : JSON.stringify(value, null, 2);
-                        navigation.open("$settings");
+                    },
+                    () => {
+                        settingsOutput.textContent = "读取设置失败";
                     },
                 );
+            };
+            editors.set("$settings", { node: settingsPage, title: "设置", load: loadSettings });
+            handlers.set("viewSettings", () => {
+                loadSettings();
+                page.open("$settings");
             });
-            const cachePage = element("section", "pp-cache-page");
+            const cachePage = element("section", "pp-panel pp-detail pp-cache-page");
             const output = element("pre", "pp-cache");
-            output.textContent = "暂无缓存";
+            output.textContent = "正在读取缓存…";
             output.setAttribute("aria-label", "Caches 内容");
             cachePage.append(output);
-            editors.set("$caches", { node: cachePage, title: "缓存" });
-            handlers.set("viewCaches", () => {
+            const loadCaches = () => {
+                editors.get("$caches").load = undefined;
                 if (saving) return;
                 let value;
                 return perform(
@@ -1410,15 +1355,22 @@ class PreferencesPanel {
                     },
                     () => {
                         output.textContent = value === undefined ? "暂无缓存" : JSON.stringify(value, null, 2);
-                        navigation.open("$caches");
+                    },
+                    () => {
+                        output.textContent = "读取缓存失败";
                     },
                 );
+            };
+            editors.set("$caches", { node: cachePage, title: "缓存", load: loadCaches });
+            handlers.set("viewCaches", () => {
+                loadCaches();
+                page.open("$caches");
             });
             handlers.set("clearCaches", async () => {
                 if (saving) return;
                 const shared = definition.cachePath && definition.cachePath !== `@${definition.storageKey}.${active}.Caches`;
                 const message = shared ? `清空共享缓存 ${definition.cachePath}？使用该缓存的其它模块也会受影响。` : `清空 ${active} 的全部 Caches？`;
-                if (!(await requestConfirmation(window, message)) || destroyed || saving) return;
+                if (!(await page.confirm(message)) || destroyed || saving) return;
                 return perform(
                     () => client.clearCaches(),
                     () => {
@@ -1429,42 +1381,57 @@ class PreferencesPanel {
             handlers.set("reset", async () => {
                 if (saving) return;
                 const message = definition.resetPaths ? `重置 ${definition.metadata?.name ?? active} 的设置？只删除本页面的设置，保留共享存储中的其它设置和缓存。` : `重置 ${active} 的设置？这将删除该模块的 Settings、Caches 和其它持久化数据。`;
-                if (!(await requestConfirmation(window, message)) || destroyed || saving) return;
+                if (!(await page.confirm(message)) || destroyed || saving) return;
                 return perform(() => client.reset(), controls);
             });
-            navigation?.destroy();
-            navigation = new Navigation(viewport, view, key => editors.get(key)?.node);
-            navigation.addEventListener("change", updateNavigation);
+            viewport.replaceChildren(view);
             for (const grow of growingInputs) grow();
-            updateNavigation();
+            page.refresh();
         }
-        /**
-         * 已加载的表单交由导航组件返回；加载阶段可以返回先前文档。
-         * Loaded forms delegate back to navigation; loading views can return to the previous document.
-         * @returns {void} 无返回值 / No return value.
-         */
-        if (back)
-            back.onclick = () => {
-                if (saving) return;
-                if (navigation) navigation.back();
-                else window.history.back();
-            };
-        open(definition.module);
+        queueMicrotask(() => {
+            if (!destroyed) open(definition.module);
+        });
         return () => {
             destroyed = true;
-            menu?.destroy();
-            frame?.removeEventListener("preferencepanes:action", onAction);
-            navigation?.destroy();
             generation++;
-            if (active && !saving) client.leave();
-            clearTimeout(timer);
+            client.leave();
             shell.remove();
         };
     }
 
     /**
-     * 移除监听器、定时器、会话和挂载内容。
-     * Remove listeners, timers, session, and mounted content.
+     * 返回当前会话中的字段或操作页，不再读取配置。
+     * Return a field or action view from the current session without fetching configuration.
+     * @param {string} key 子页键 / Detail key.
+     * @returns {HTMLElement} 当前视图 / Current view.
+     */
+    view(key) {
+        return this.#view(key);
+    }
+
+    /**
+     * 提供当前页标题及菜单状态。
+     * Provide the current title and action state.
+     * @param {string} key 子页键 / Detail key.
+     * @returns {object} 页面状态 / Page state.
+     */
+    state(key) {
+        return this.#state(key);
+    }
+
+    /**
+     * 执行共用菜单中的操作。
+     * Perform an action from the shared menu.
+     * @param {string} id 操作标识 / Action identifier.
+     * @returns {void} 无返回值 / No return value.
+     */
+    perform(id) {
+        this.#perform(id);
+    }
+
+    /**
+     * 释放读取与视图；已开始的写入仍沿原队列完成。
+     * Release reads and views while allowing started writes to finish through the existing queue.
      * @returns {void} 无返回值 / No return value.
      */
     destroy() {
@@ -1472,124 +1439,403 @@ class PreferencesPanel {
     }
 }
 
-var defaults = "/* 通用默认样式只使用 pp 命名空间；项目可通过 CSS 输入覆盖变量和组件。\n * Generic defaults use only the pp namespace; projects may override variables and components through CSS input. */\n:root {\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    --pp-warning: #9a6700;\n    --pp-host-height: 0px;\n    --pp-keyboard-height: 0px;\n}\n.pp-panel {\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\"] {\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    --pp-warning: #f0b849;\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@supports (height: 100dvh) {\n    .pp-panel {\n        height: 100dvh;\n    }\n}\n.pp-fields,\n.pp-choice-page,\n.pp-settings-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-panel a.pp-choice-link {\n    color: var(--pp-accent);\n    text-decoration: none;\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    font-size: 16px;\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-field-warning {\n    margin-top: 4px;\n    color: var(--pp-warning);\n    font-size: 12px;\n    overflow-wrap: anywhere;\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-status {\n    position: fixed;\n    inset: 0;\n    display: grid;\n    place-content: center;\n    justify-items: center;\n    gap: 12px;\n    min-width: 0;\n    min-height: 0;\n    margin: 0;\n    padding: 24px;\n    color: var(--pp-muted, GrayText);\n    text-align: center;\n    background: var(--pp-background, Canvas);\n}\n.pp-viewport > .pp-status {\n    position: absolute;\n}\n.pp-status-spinner {\n    box-sizing: border-box;\n    width: 28px;\n    height: 28px;\n    border: 3px solid var(--pp-border, #8884);\n    border-top-color: var(--pp-accent, AccentColor);\n    border-radius: 50%;\n    animation: pp-status-spin 0.8s linear infinite;\n}\n.pp-status-message {\n    max-width: 100%;\n    margin: 0;\n    overflow-wrap: anywhere;\n}\n.pp-status-action {\n    min-width: 96px;\n    min-height: 44px;\n    padding: 8px 16px;\n    border: 0;\n    border-radius: 6px;\n    color: var(--pp-text, ButtonText);\n    font: inherit;\n    cursor: pointer;\n    background: var(--pp-surface, ButtonFace);\n}\n@keyframes pp-status-spin {\n    to {\n        transform: rotate(1turn);\n    }\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\n/* 首页沿用表单的分组与说明样式，入口按屏幕宽度自动换行。\n * The landing page reuses form groups and descriptions, with entries wrapping by viewport width. */\n:root.pp-page {\n    color-scheme: light dark;\n}\n.pp-page body {\n    margin: 0;\n    font:\n        16px / 1.5 -apple-system,\n        BlinkMacSystemFont,\n        \"Segoe UI\",\n        sans-serif;\n    background: var(--pp-background, Canvas);\n    color: var(--pp-text, CanvasText);\n}\n[data-preference-panes-pages] {\n    position: relative;\n    min-height: calc(100vh - var(--pp-host-height));\n    background: inherit;\n}\n[data-preference-panes-module-page],\n[data-preference-panes-link-page] {\n    position: fixed;\n    inset: var(--pp-host-height) 0 0;\n    background: inherit;\n    z-index: 1;\n    box-shadow: -8px 0 24px #00000014;\n}\n[data-preference-panes-module-page] iframe,\n[data-preference-panes-link-page] iframe {\n    display: block;\n    border: 0;\n    width: 100%;\n    height: 100%;\n    background: inherit;\n}\n[data-module-message] {\n    position: absolute;\n    inset: 0;\n    margin: 0;\n    padding: 20px;\n    background: inherit;\n}\n[data-module-message][hidden] {\n    display: none;\n}\n.pp-host-header {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    display: grid;\n    grid-template-columns: 44px minmax(0, 1fr) 44px;\n    align-items: center;\n    min-height: 44px;\n    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));\n    border-bottom: 1px solid var(--pp-border, #8884);\n    background: var(--pp-surface, Canvas);\n    color: var(--pp-accent, Highlight);\n    font-size: 17px;\n}\n.pp-host-title {\n    text-align: center;\n    color: var(--pp-text, CanvasText);\n    font-weight: 600;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.pp-host-back {\n    border: 0;\n    background: none;\n    color: inherit;\n    width: 44px;\n    height: 44px;\n    padding: 8px;\n    font:\n        32px / 1 -apple-system,\n        sans-serif;\n    cursor: pointer;\n}\n.pp-host-back[hidden] {\n    visibility: hidden;\n    display: block;\n}\n.pp-host-toast {\n    position: fixed;\n    z-index: 3;\n    bottom: calc(24px + env(safe-area-inset-bottom) + var(--pp-keyboard-height));\n    left: 50%;\n    transform: translateX(-50%);\n    max-width: calc(100% - 48px);\n    padding: 10px 18px;\n    border-radius: 12px;\n    background: #222e;\n    color: #fff;\n    font-size: 14px;\n    text-align: center;\n}\n.pp-host-toast[hidden] {\n    display: none;\n}\n.pp-host-error {\n    margin: 24px;\n    padding: 16px;\n    border: 1px solid var(--pp-danger, #e45656);\n    border-radius: 12px;\n    font-size: 16px;\n    overflow-wrap: anywhere;\n}\n\n.pp-home {\n    max-width: 1000px;\n    margin: auto;\n    padding: 24px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));\n}\n.pp-home-logo {\n    display: block;\n    width: 64px;\n    height: 64px;\n    margin: 0 auto 24px;\n    object-fit: contain;\n}\n.pp-home-entries {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-around;\n    row-gap: 16px;\n    padding: 16px 0;\n    background: var(--pp-surface);\n}\n.pp-home-item {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 25%;\n    min-width: 0;\n    padding: 0 4px;\n    border: 0;\n    background: none;\n    color: var(--pp-text);\n    font:\n        12px / 1.5 -apple-system,\n        sans-serif;\n    cursor: pointer;\n    text-decoration: none;\n}\n@media (min-width: 500px) {\n    .pp-home-item {\n        width: calc(100% / 6);\n    }\n}\n@media (min-width: 700px) {\n    .pp-home-item {\n        width: 12.5%;\n    }\n}\n.pp-home-icon {\n    box-sizing: border-box;\n    width: 56px;\n    height: 56px;\n    padding: 8px;\n    border-radius: 50%;\n    background: var(--pp-field);\n    font-size: 32px;\n    line-height: 40px;\n}\n.pp-home-icon img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n}\n.pp-home-name {\n    margin-top: 8px;\n}\n.pp-home-content {\n    min-width: 0;\n    width: 100%;\n}\n.pp-home-content > span {\n    display: block;\n}\n.pp-home-name,\n.pp-home-item [data-module-status] {\n    width: 100%;\n    overflow: hidden;\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.pp-home-item [data-module-status] {\n    min-height: 20px;\n}\n.pp-home-item:disabled {\n    opacity: 0.45;\n    cursor: default;\n}\n.pp-home-entries[data-layout=\"list\"] {\n    display: block;\n    padding: 0;\n}\n.pp-home-entries[data-layout=\"list\"] .pp-home-item {\n    flex-direction: row;\n    gap: 12px;\n    width: 100%;\n    padding: 12px 16px;\n    font-size: 15px;\n}\n.pp-home-entries[data-layout=\"list\"] .pp-home-item + .pp-home-item {\n    border-top: 1px solid var(--pp-border);\n}\n.pp-home-entries[data-layout=\"list\"] .pp-home-icon {\n    flex: none;\n    width: 40px;\n    height: 40px;\n    padding: 4px;\n    font-size: 24px;\n    line-height: 32px;\n}\n.pp-home-entries[data-layout=\"list\"] .pp-home-name {\n    margin-top: 0;\n    text-align: left;\n}\n.pp-home-arrow {\n    color: var(--pp-muted);\n    font-size: 24px;\n}\n.pp-home-footer {\n    margin-top: 16px;\n    text-align: center;\n    white-space: normal;\n}\n.pp-home-footer p {\n    margin: 8px 0 0;\n}\n";
-
-const selector = "style[data-preference-panes-defaults]";
-const stylesheetSelector = "link[data-preference-panes-stylesheet]";
-
 /**
- * 在文档中安装一次默认样式，并标记当前调用方是否拥有该节点。
- * Install default styles once and report whether the current caller owns the node.
- * @param {Document} document 目标文档 / Target document.
- * @returns {{element: HTMLStyleElement, owned: boolean}} 样式节点及所有权 / Style node and ownership.
+ * 浏览器宿主提供网页导航、通知、主题和可视区域避让。
+ * The browser host provides web navigation, notices, theme and viewport clearance.
+ * @param {import("./home.mjs").BridgeOptions} options 菜单和返回动作 / Menu and back action.
+ * @returns {import("./home.mjs").Bridge} 浏览器宿主 / Browser host.
  */
-function installDefaultStyles(document) {
-    const existing = document.head.querySelector(selector);
-    if (existing) return { element: existing, owned: false };
-    const element = document.createElement("style");
-    element.dataset.preferencePanesDefaults = "";
-    element.textContent = defaults;
-    document.head.insertBefore(element, document.head.querySelector(stylesheetSelector));
-    return { element, owned: true };
+function browserHost({ menu, back }) {
+    const root = document.documentElement;
+    const header = document.createElement("header");
+    header.className = "pp-host-header";
+    const button = document.createElement("button");
+    button.className = "pp-host-back";
+    button.type = "button";
+    button.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 5-7 7 7 7"/></svg>';
+    button.setAttribute("aria-label", "返回");
+    button.onclick = back;
+    const left = document.createElement("span");
+    left.className = "pp-host-left";
+    left.append(button);
+    const title = document.createElement("span");
+    title.className = "pp-host-title";
+    const brand = document.createElement("div");
+    brand.className = "pp-host-brand";
+    const brandLink = document.createElement("a");
+    brandLink.className = "pp-host-brand-link";
+    const logo = document.createElement("span");
+    logo.className = "pp-host-logo";
+    const image = document.createElement("img");
+    image.alt = "logo";
+    logo.append(image);
+    brandLink.append(logo, title);
+    brand.append(brandLink);
+    header.append(left, brand, menu.element);
+    document.body.prepend(header);
+    const toast = document.createElement("div");
+    toast.className = "pp-host-toast";
+    toast.setAttribute("role", "status");
+    toast.hidden = true;
+    document.body.append(toast);
+    let timer;
+    const theme = window.matchMedia("(prefers-color-scheme: dark)");
+    const applyTheme = () => {
+        root.dataset.theme = theme.matches ? "dark" : "light";
+    };
+    const viewport = window.visualViewport;
+    const resize = () => {
+        root.style.setProperty("--pp-host-height", `${header.getBoundingClientRect().height}px`);
+        const clearance = viewport && viewport.scale === 1 ? Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop) : 0;
+        root.style.setProperty("--pp-keyboard-height", `${clearance}px`);
+    };
+    const scroll = () => {
+        const pages = document.querySelector("[data-preference-panes-pages]");
+        const current = [...pages.children].find(view => !view.inert);
+        header.classList.toggle("pp-scrolled", (current?.scrollTop ?? 0) >= 100);
+    };
+    document.addEventListener("scroll", scroll, true);
+    theme.addEventListener("change", applyTheme);
+    window.addEventListener("resize", resize);
+    window.addEventListener("pageshow", resize);
+    viewport?.addEventListener("resize", resize);
+    viewport?.addEventListener("scroll", resize);
+    applyTheme();
+    resize();
+    return {
+        update(state) {
+            title.textContent = state.logoText ?? state.title;
+            brandLink.href = state.logoHref ?? "/";
+            logo.hidden = !state.logo;
+            if (state.logo) image.src = state.logo;
+            left.hidden = !state.canGoBack;
+            menu.element.hidden = !state.actions.length;
+            button.disabled = state.busy;
+            scroll();
+        },
+        confirm: message => window.confirm(message),
+        notice(detail) {
+            clearTimeout(timer);
+            toast.textContent = detail.message;
+            toast.hidden = false;
+            timer = setTimeout(() => {
+                toast.hidden = true;
+            }, 2400);
+        },
+        openURL(url, target) {
+            switch (target) {
+                case "_blank":
+                    window.open(url, "_blank", "noopener,noreferrer");
+                    break;
+                default:
+                    window.location.assign(url);
+                    break;
+            }
+        },
+        destroy() {
+            clearTimeout(timer);
+            document.removeEventListener("scroll", scroll, true);
+            theme.removeEventListener("change", applyTheme);
+            window.removeEventListener("resize", resize);
+            window.removeEventListener("pageshow", resize);
+            viewport?.removeEventListener("resize", resize);
+            viewport?.removeEventListener("scroll", resize);
+            root.style.removeProperty("--pp-host-height");
+            root.style.removeProperty("--pp-keyboard-height");
+            delete root.dataset.theme;
+            header.remove();
+            toast.remove();
+        },
+    };
 }
 
 /**
- * 管理 BoxJS 规范化、主题同步和面板生命周期。
- * Manage BoxJS normalization, theme synchronization, and panel lifecycle.
+ * 一个文档共享宿主、路由和当前模块会话，字段子页不重新读取配置。
+ * Share one host, router and module session within a document without reloading config for field views.
  */
-class PreferencesView {
-    #existing;
-    #root;
-    #base;
-    #ownsBase;
-    #previousTitle;
-    #previousTheme;
-    #systemTheme;
-    #previousKeyboard;
+class PageController {
+    #navigation;
     #host;
-    #observer;
-    #panel;
+    #menu;
+    #title;
+    #logo;
+    #logoText;
+    #logoHref;
+    #modules;
+    #links;
+    #session;
+    #destroyed = false;
+
+    /**
+     * 接管已初始化的宿主与首页；此接口仅供包内入口组合。
+     * Own an initialized host and homepage; this interface is only used by internal entry points.
+     * @param {HTMLElement} container 页面容器 / Page container.
+     * @param {HTMLElement} home 首页节点 / Homepage node.
+     * @param {object} options 宿主、菜单、品牌及入口 / Host, menu, brand and entries.
+     */
+    constructor(container, home, { host, menu, title, logo, logoText, logoHref, modules, links = [] }) {
+        this.#host = host;
+        this.#menu = menu;
+        this.#title = title;
+        this.#logo = logo;
+        this.#logoText = logoText || (logo ? "" : title);
+        this.#logoHref = logoHref;
+        this.#modules = modules;
+        this.#links = links;
+        this.#navigation = new Navigation(container, home, (key, signal) => this.#view(key, signal));
+        this.#navigation.addEventListener("change", () => this.update());
+        this.update();
+    }
 
     /**
-     * 使用原始 BoxJS JSON 挂载设置页。
-     * Mount a settings page from raw BoxJS JSON.
-     * @param {import("../index.js").BoxJSInput} boxjs 单模块 BoxJS JSON / Single-module BoxJS JSON.
+     * 创建模块会话或复用其字段页；外部网站才使用 iframe。
+     * Create a module session or reuse a field view; only external sites use an iframe.
+     * @param {string} key 路由键 / Route key.
+     * @param {AbortSignal} signal 当前外链视图的取消信号 / Cancellation signal for the current external view.
+     * @returns {HTMLElement | undefined} 视图；未知模块返回 undefined / View; undefined for unknown modules.
      */
-    constructor(boxjs) {
-        const definition = normalizeBoxJs(boxjs);
-        const metadata = definition.metadata ?? {};
-        const image = metadata.icon || metadata.icons?.[1] || metadata.icons?.[0];
-        if (image) resourceURL(image);
-        if (metadata.repo) resourceURL(metadata.repo);
-
-        this.#existing = document.querySelector("#preferences");
-        this.#root = this.#existing ?? element("main", "");
-        if (!this.#existing) {
-            this.#root.id = "preferences";
-            document.body.append(this.#root);
+    #view(key, signal) {
+        const [module, ...parts] = key.split("/");
+        const view = parts.join("/");
+        if (module !== this.#session?.module) {
+            this.#session?.controller.abort();
+            this.#session?.panel?.destroy();
+            this.#session = undefined;
+        }
+        if (module === "$link") {
+            const link = this.#links[Number(view)];
+            if (!link || link.dataset.target !== "internal") return;
+            const page = element("section", "pp-link-page");
+            const iframe = element("iframe", "");
+            iframe.title = link.querySelector(".pp-home-name").textContent;
+            iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox");
+            iframe.src = link.href;
+            page.append(iframe);
+            signal.addEventListener("abort", () => iframe.remove(), { once: true });
+            return page;
+        }
+        const entry = this.#modules.get(module);
+        if (!entry) return;
+        if (!this.#session) {
+            const controller = new AbortController();
+            const root = element("section", "pp-module-page");
+            const session = { module, root, controller };
+            this.#session = session;
+            const load = async () => {
+                if (controller.signal.aborted) return;
+                root.replaceChildren(statusView("正在打开设置…"));
+                try {
+                    let boxjs = entry.boxjs;
+                    if (!boxjs) {
+                        const response = await fetch(`/api/${encodeURIComponent(module)}`, { cache: "no-store", signal: controller.signal });
+                        if (!response.ok) throw new Error(`配置加载失败：HTTP ${response.status}`);
+                        boxjs = await response.json();
+                    }
+                    if (controller.signal.aborted) return;
+                    root.replaceChildren();
+                    session.panel = new PreferencesPanel(root, normalizeBoxJs(boxjs), this);
+                    this.update();
+                } catch (error) {
+                    if (controller.signal.aborted) return;
+                    root.replaceChildren(statusView(`加载失败：${error.message}`, load));
+                }
+            };
+            // 已提供 BoxJS 时也等待路由切换完成，再发布表单状态。
+            // Wait for routing to finish before publishing form state, even with supplied BoxJS.
+            queueMicrotask(load);
         }
-        const styles = installDefaultStyles(document);
-        this.#base = styles.element;
-        this.#ownsBase = styles.owned;
-        this.#previousTitle = document.title;
-        this.#previousTheme = document.documentElement.dataset.theme;
-        this.#systemTheme = window.matchMedia("(prefers-color-scheme: dark)");
-        this.#previousKeyboard = document.documentElement.style.getPropertyValue("--pp-keyboard-height");
-        this.#host = window.frameElement?.ownerDocument.documentElement;
-        this.#syncAppearance();
-        this.#systemTheme.addEventListener("change", this.#syncAppearance);
-        if (this.#host) {
-            this.#observer = new MutationObserver(this.#syncAppearance);
-            this.#observer.observe(this.#host, { attributes: true, attributeFilter: ["data-theme", "style"] });
+        return this.#session.panel?.view(view) ?? this.#session.root;
+    }
+
+    /**
+     * 同步唯一标题栏与菜单；离开模块时终止读取和会话。
+     * Synchronize the only title bar and menu, ending reads and sessions on departure.
+     * @returns {void} 无返回值 / No return value.
+     */
+    update() {
+        if (this.#destroyed || !this.#navigation) return;
+        const [module, ...parts] = this.#navigation.current.split("/");
+        if (!module && this.#session) {
+            this.#session.controller.abort();
+            this.#session.panel?.destroy();
+            this.#session = undefined;
         }
-        document.title = metadata.name ?? definition.module;
+        const state = this.#session?.panel?.state(parts.join("/")) ?? {
+            title: module === "$link" ? this.#links[Number(parts[0])].querySelector(".pp-home-name").textContent : (this.#modules.get(module)?.name ?? this.#title),
+            actions: [],
+            busy: false,
+        };
+        document.title = state.title;
+        this.#menu.update(state.actions, state.busy);
+        Promise.resolve(this.#host.update({ ...state, logo: module ? undefined : this.#logo, logoText: module ? undefined : this.#logoText, logoHref: this.#logoHref, canGoBack: this.#navigation.canGoBack })).catch(error => this.notice({ kind: "error", message: error.message }));
+    }
+
+    /**
+     * 控件重建后重新解析当前路由，不增加历史或重新加载模块配置。
+     * Resolve the current route after rebuilding controls without adding history or reloading config.
+     * @returns {void} 无返回值 / No return value.
+     */
+    refresh() {
+        if (!this.#destroyed) this.#navigation.refresh();
+    }
+
+    /**
+     * 打开当前模块的字段或操作子页。
+     * Open a field or action subview of the current module.
+     * @param {string} view 子页键 / Detail key.
+     * @returns {void} 无返回值 / No return value.
+     */
+    open(view) {
+        this.#navigation.open(`${this.#session.module}/${view}`);
+    }
+
+    /**
+     * 执行当前表单操作。
+     * Perform an action on the current form.
+     * @param {string} id 操作标识 / Action identifier.
+     * @returns {void} 无返回值 / No return value.
+     */
+    perform(id) {
+        this.#session?.panel?.perform(id);
+    }
+
+    /**
+     * 请求宿主确认；退出后忽略晚到的选择。
+     * Request host confirmation and ignore a late choice after departure.
+     * @param {string} message 确认文字 / Confirmation message.
+     * @returns {Promise<boolean>} 用户选择 / User choice.
+     */
+    async confirm(message) {
+        const session = this.#session;
+        const confirmed = await this.#host.confirm(message);
+        return !this.#destroyed && session === this.#session && confirmed;
+    }
+
+    /**
+     * 由唯一宿主显示通知。
+     * Display a notice through the only host.
+     * @param {import("./Navigation.mjs").Notice} detail 已格式化通知 / Formatted notice.
+     * @returns {void} 无返回值 / No return value.
+     */
+    notice(detail) {
+        if (!this.#destroyed) this.#host.notice(detail);
+    }
+
+    /**
+     * 由宿主执行标准外链导航。
+     * Delegate standard external navigation to the host.
+     * @param {string} url 完整地址 / Absolute URL.
+     * @param {"_self" | "_blank"} [target] 打开方式 / Opening mode.
+     * @returns {void} 无返回值 / No return value.
+     */
+    openURL(url, target) {
         try {
-            this.#root.replaceChildren();
-            this.#panel = new PreferencesPanel(this.#root, definition);
+            Promise.resolve(this.#host.openURL(url, target)).catch(error => this.notice({ kind: "error", message: error.message }));
         } catch (error) {
-            this.destroy();
-            throw error;
+            this.notice({ kind: "error", message: error.message });
         }
     }
 
     /**
-     * 跟随嵌入宿主的通用环境状态，不识别业务 App 或解析其 UA。
-     * Follow generic host appearance without detecting a business App or parsing its UA.
-     * @returns {void} 已同步主题与键盘避让 / Theme and keyboard clearance synchronized.
+     * 共用首页与表单导航。
+     * Navigation shared by the homepage and forms.
      */
-    #syncAppearance = () => {
-        const theme = this.#host?.dataset.theme ?? this.#previousTheme ?? (this.#systemTheme.matches ? "dark" : "light");
-        document.documentElement.dataset.theme = theme;
-        if (this.#host) document.documentElement.style.setProperty("--pp-keyboard-height", this.#host.style.getPropertyValue("--pp-keyboard-height"));
-    };
+    get navigation() {
+        return this.#navigation;
+    }
 
     /**
-     * 释放模块视图、样式与会话，不操作项目入口页。
-     * Release the module view, styles, and session without operating a project landing page.
+     * 结束页面能力和会话；表单写入队列自行收尾。
+     * End page capabilities and sessions while forms finish their write queues.
      * @returns {void} 无返回值 / No return value.
      */
     destroy() {
-        this.#observer?.disconnect();
-        this.#systemTheme.removeEventListener("change", this.#syncAppearance);
-        this.#panel?.destroy();
-        if (this.#ownsBase) this.#base.remove();
-        if (this.#existing) this.#root.replaceChildren();
-        else this.#root.remove();
-        document.title = this.#previousTitle;
-        if (this.#previousTheme === undefined) delete document.documentElement.dataset.theme;
-        else document.documentElement.dataset.theme = this.#previousTheme;
-        document.documentElement.style.setProperty("--pp-keyboard-height", this.#previousKeyboard);
+        if (this.#destroyed) return;
+        this.#destroyed = true;
+        this.#session?.controller.abort();
+        this.#session?.panel?.destroy();
+        this.#navigation.destroy();
+        this.#host.destroy();
+        this.#menu.destroy();
     }
 }
 
+var defaults = "/* 通用默认样式只使用 pp 命名空间；项目可通过 CSS 输入覆盖变量和组件。\n * Generic defaults use only the pp namespace; projects may override variables and components through CSS input. */\n:root {\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    --pp-warning: #9a6700;\n    --pp-host-height: 0px;\n    --pp-keyboard-height: 0px;\n}\n.pp-panel {\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}\n\n:root[data-theme=\"dark\"] {\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    --pp-warning: #f0b849;\n}\n.pp-panel * {\n    box-sizing: border-box;\n    letter-spacing: 0;\n}\n.pp-panel button {\n    font: inherit;\n    cursor: pointer;\n    border: 0;\n    background: none;\n    color: inherit;\n}\n.pp-panel button:disabled {\n    opacity: 0.5;\n    cursor: wait;\n}\n.pp-viewport {\n    min-width: 0;\n}\n.pp-fields,\n.pp-choice-page,\n.pp-settings-page,\n.pp-cache-page {\n    box-sizing: border-box;\n    min-width: 0;\n    padding: calc(12px + var(--pp-host-height)) max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom) + var(--pp-keyboard-height));\n    scroll-padding-bottom: var(--pp-keyboard-height);\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-panel a.pp-choice-link {\n    color: var(--pp-accent);\n    text-decoration: none;\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    font-size: 16px;\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-field-warning {\n    margin-top: 4px;\n    color: var(--pp-warning);\n    font-size: 12px;\n    overflow-wrap: anywhere;\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-status {\n    position: absolute;\n    inset: 0;\n    display: grid;\n    place-content: center;\n    justify-items: center;\n    gap: 12px;\n    min-width: 0;\n    min-height: 0;\n    margin: 0;\n    padding: 24px;\n    color: var(--pp-muted, GrayText);\n    text-align: center;\n    background: var(--pp-background, Canvas);\n}\n.pp-viewport > .pp-status {\n    position: absolute;\n}\n.pp-status-spinner {\n    box-sizing: border-box;\n    width: 28px;\n    height: 28px;\n    border: 3px solid var(--pp-border, #8884);\n    border-top-color: var(--pp-accent, AccentColor);\n    border-radius: 50%;\n    animation: pp-status-spin 0.8s linear infinite;\n}\n.pp-status-message {\n    max-width: 100%;\n    margin: 0;\n    overflow-wrap: anywhere;\n}\n.pp-status-action {\n    min-width: 96px;\n    min-height: 44px;\n    padding: 8px 16px;\n    border: 0;\n    border-radius: 6px;\n    color: var(--pp-text, ButtonText);\n    font: inherit;\n    cursor: pointer;\n    background: var(--pp-surface, ButtonFace);\n}\n@keyframes pp-status-spin {\n    to {\n        transform: rotate(1turn);\n    }\n}\n.pp-cache {\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n}\n.pp-panel :focus-visible {\n    outline: 2px solid var(--pp-accent);\n    outline-offset: -2px;\n}\n\n/* 首页沿用表单的分组与说明样式，入口按屏幕宽度自动换行。\n * The landing page reuses form groups and descriptions, with entries wrapping by viewport width. */\n:root.pp-page {\n    color-scheme: light dark;\n}\n.pp-page body {\n    margin: 0;\n    overflow: hidden;\n    font:\n        16px / 1.5 -apple-system,\n        BlinkMacSystemFont,\n        \"Segoe UI\",\n        sans-serif;\n    background: var(--pp-background, Canvas);\n    color: var(--pp-text, CanvasText);\n}\n[data-preference-panes-pages] {\n    position: relative;\n    height: 100vh;\n    background: inherit;\n    overflow: hidden;\n}\n@supports (height: 100dvh) {\n    [data-preference-panes-pages] {\n        height: 100dvh;\n    }\n}\n.pp-home,\n.pp-module-page,\n.pp-detail,\n.pp-link-page {\n    position: absolute;\n    inset: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    background: var(--pp-background);\n}\n.pp-module-page,\n.pp-detail,\n.pp-link-page {\n    z-index: 1;\n    box-shadow: -8px 0 24px #00000014;\n}\n.pp-link-page {\n    top: var(--pp-host-height);\n}\n.pp-link-page iframe {\n    display: block;\n    border: 0;\n    width: 100%;\n    height: 100%;\n    background: inherit;\n}\n.pp-host-header {\n    box-sizing: border-box;\n    position: fixed;\n    inset: 0 0 auto;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    height: calc(64px + env(safe-area-inset-top));\n    padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));\n    border-bottom: 1px solid transparent;\n    background: transparent;\n    -webkit-backdrop-filter: blur(25px);\n    backdrop-filter: blur(25px);\n    color: var(--pp-text);\n    transition:\n        background-color 200ms ease-in-out,\n        border-color 200ms ease-in-out;\n}\n.pp-host-header.pp-scrolled {\n    background: rgba(255, 255, 255, 0.6);\n    border-color: var(--pp-border);\n}\n:root[data-theme=\"dark\"] .pp-host-header.pp-scrolled {\n    background: rgba(13, 14, 15, 0.6);\n}\n@media (min-width: 1280px) {\n    .pp-host-header {\n        padding-right: max(20px, calc((100vw - 1588px) / 2));\n        padding-left: max(20px, calc((100vw - 1588px) / 2));\n    }\n}\n@media (prefers-reduced-motion: reduce) {\n    .pp-host-header {\n        transition: none;\n    }\n}\n.pp-host-brand {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    height: 36px;\n    min-width: 0;\n    margin-right: 8px;\n}\n.pp-host-brand-link {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    min-width: 0;\n    max-width: 100%;\n    color: inherit;\n    text-decoration: none;\n    transition: opacity 0.3s;\n}\n.pp-host-brand-link:hover {\n    opacity: 0.6;\n}\n.pp-host-logo {\n    flex: none;\n    min-width: 2rem;\n    margin-right: 0.25rem;\n}\n.pp-host-logo img {\n    display: block;\n    height: 1.6rem;\n}\n.pp-host-title {\n    min-width: 0;\n    text-align: left;\n    font-size: 16px;\n    font-weight: 600;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.pp-host-left {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n}\n.pp-host-left::after {\n    content: \"\";\n    display: inline-block;\n    width: 1px;\n    height: 24px;\n    margin: 0 16px;\n    background-color: #0000001f;\n}\n:root[data-theme=\"dark\"] .pp-host-left::after {\n    background-color: #5454547a;\n}\n.pp-host-left[hidden] {\n    display: none;\n}\n.pp-host-back {\n    border: 0;\n    border-radius: 18px;\n    background: none;\n    color: inherit;\n    width: 36px;\n    height: 36px;\n    padding: 8px;\n    cursor: pointer;\n    transition: background-color 0.2s ease-in-out;\n}\n.pp-host-back svg {\n    display: block;\n    width: 20px;\n    height: 20px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n}\n.pp-host-back:hover {\n    background: #f1f1f1;\n}\n:root[data-theme=\"dark\"] .pp-host-back:hover {\n    background: #343a46;\n}\n.pp-host-toast {\n    position: fixed;\n    z-index: 3;\n    bottom: calc(24px + env(safe-area-inset-bottom) + var(--pp-keyboard-height));\n    left: 50%;\n    transform: translateX(-50%);\n    max-width: calc(100% - 48px);\n    padding: 10px 18px;\n    border-radius: 12px;\n    background: #222e;\n    color: #fff;\n    font-size: 14px;\n    text-align: center;\n}\n.pp-host-toast[hidden] {\n    display: none;\n}\n.pp-host-error {\n    margin: 24px;\n    padding: 16px;\n    border: 1px solid var(--pp-danger, #e45656);\n    border-radius: 12px;\n    font-size: 16px;\n    overflow-wrap: anywhere;\n}\n\n.pp-home {\n    max-width: 1000px;\n    margin: auto;\n    padding: var(--pp-host-height) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));\n}\n.pp-home-entries {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-around;\n    row-gap: 16px;\n    padding: 16px 0;\n    background: var(--pp-surface);\n}\n.pp-home-item {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 25%;\n    min-width: 0;\n    padding: 0 4px;\n    border: 0;\n    background: none;\n    color: var(--pp-text);\n    font:\n        12px / 1.5 -apple-system,\n        sans-serif;\n    cursor: pointer;\n    text-decoration: none;\n}\n@media (min-width: 500px) {\n    .pp-home-item {\n        width: calc(100% / 6);\n    }\n}\n@media (min-width: 700px) {\n    .pp-home-item {\n        width: 12.5%;\n    }\n}\n.pp-home-icon {\n    box-sizing: border-box;\n    width: 56px;\n    height: 56px;\n    padding: 8px;\n    border-radius: 50%;\n    background: var(--pp-field);\n    font-size: 32px;\n    line-height: 40px;\n    text-align: center;\n}\n.pp-home-icon img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n}\n.pp-home-name {\n    margin-top: 8px;\n}\n.pp-home-content {\n    min-width: 0;\n    width: 100%;\n}\n.pp-home-content > span {\n    display: block;\n}\n.pp-home-name,\n.pp-home-item [data-module-status] {\n    width: 100%;\n    overflow: hidden;\n    text-align: center;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.pp-home-item [data-module-status] {\n    min-height: 20px;\n}\n.pp-home-item:disabled {\n    opacity: 0.45;\n    cursor: default;\n}\n.pp-home-entries[data-layout=\"list\"] {\n    display: block;\n    padding: 0;\n}\n.pp-home-entries[data-layout=\"list\"] .pp-home-item {\n    flex-direction: row;\n    gap: 12px;\n    width: 100%;\n    padding: 12px 16px;\n    font-size: 15px;\n}\n.pp-home-entries[data-layout=\"list\"] .pp-home-item + .pp-home-item {\n    border-top: 1px solid var(--pp-border);\n}\n.pp-home-entries[data-layout=\"list\"] .pp-home-icon {\n    flex: none;\n    width: 40px;\n    height: 40px;\n    padding: 4px;\n    font-size: 24px;\n    line-height: 32px;\n}\n.pp-home-entries[data-layout=\"list\"] .pp-home-name {\n    margin-top: 0;\n    text-align: left;\n}\n.pp-home-arrow {\n    color: var(--pp-muted);\n    font-size: 24px;\n}\n.pp-home-footer {\n    margin-top: 16px;\n    text-align: center;\n    white-space: normal;\n}\n.pp-home-footer p {\n    margin: 8px 0 0;\n}\n";
+
+const selector = "style[data-preference-panes-defaults]";
+const stylesheetSelector = "link[data-preference-panes-stylesheet]";
+
+/**
+ * 在文档中安装一次默认样式，并标记当前调用方是否拥有该节点。
+ * Install default styles once and report whether the current caller owns the node.
+ * @param {Document} document 目标文档 / Target document.
+ * @returns {{element: HTMLStyleElement, owned: boolean}} 样式节点及所有权 / Style node and ownership.
+ */
+function installDefaultStyles(document) {
+    const existing = document.head.querySelector(selector);
+    if (existing) return { element: existing, owned: false };
+    const element = document.createElement("style");
+    element.dataset.preferencePanesDefaults = "";
+    element.textContent = defaults;
+    document.head.insertBefore(element, document.head.querySelector(stylesheetSelector));
+    return { element, owned: true };
+}
+
 /**
- * 使用原始 BoxJS JSON 挂载设置页。
- * Mount a settings page from raw BoxJS JSON.
+ * 使用原始 BoxJS JSON 挂载设置页，共用内部页面控制器。
+ * Mount a settings page from raw BoxJS JSON through the shared internal page controller.
  * @param {import("../index.js").BoxJSInput} boxjs 单模块 BoxJS JSON / Single-module BoxJS JSON.
  * @returns {import("./index.js").MountedPreferences} 模块视图 / Module view.
  */
 function mount(boxjs) {
-    return new PreferencesView(boxjs);
+    const definition = normalizeBoxJs(boxjs);
+    const title = definition.metadata?.name ?? definition.module;
+    const existing = document.querySelector("#preferences");
+    const root = existing ?? element("main", "");
+    const previousTitle = document.title;
+    const previousKeyboard = document.documentElement.style.getPropertyValue("--pp-keyboard-height");
+    const previousHeight = document.documentElement.style.getPropertyValue("--pp-host-height");
+    const previousTheme = document.documentElement.dataset.theme;
+    const previousClass = document.documentElement.classList.contains("pp-page");
+    document.documentElement.classList.add("pp-page");
+    root.dataset.preferencePanesPages = "";
+    if (!existing) {
+        root.id = "preferences";
+        document.body.append(root);
+    }
+    const defaults = installDefaultStyles(document);
+    const menu = new ActionMenu(id => page.perform(id));
+    const host = browserHost({ menu, back: () => page.navigation.back() });
+    const page = new PageController(root, element("main", "pp-home"), { host, menu, title, modules: new Map([[definition.module, { name: title, boxjs }]]) });
+    if (!page.navigation.current) page.navigation.open(definition.module);
+    let destroyed = false;
+    const pagehide = event => {
+        if (!event.persisted) destroy();
+    };
+    window.addEventListener("pagehide", pagehide);
+    /**
+     * 释放模块、样式与监听器，并恢复调用方的文档状态。
+     * Release the module, styles and listeners and restore the caller's document state.
+     * @returns {void} 无返回值 / No return value.
+     */
+    function destroy() {
+        if (destroyed) return;
+        destroyed = true;
+        page.destroy();
+        window.removeEventListener("pagehide", pagehide);
+        if (defaults.owned) defaults.element.remove();
+        if (existing) {
+            root.replaceChildren();
+            delete root.dataset.preferencePanesPages;
+        } else root.remove();
+        if (!previousClass) document.documentElement.classList.remove("pp-page");
+        document.title = previousTitle;
+        document.documentElement.style.setProperty("--pp-keyboard-height", previousKeyboard);
+        document.documentElement.style.setProperty("--pp-host-height", previousHeight);
+        if (previousTheme === undefined) delete document.documentElement.dataset.theme;
+        else document.documentElement.dataset.theme = previousTheme;
+    }
+    return { destroy };
 }
 
 export { mount };