npm - @nsnanocat/preference-panes - Versions diffs - 1.2.4 → 1.3.0 - Mend

@nsnanocat/preference-panes 1.2.4 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/CHANGELOG.md +18 -0
package/README.md +64 -7
package/dist/home.html +1032 -0
package/dist/module/index.html +2 -3
package/dist/module/index.mjs +127 -59
package/dist/module/navigation.mjs +21 -5
package/dist/preference-panes.mjs +111 -58
package/package.json +3 -2
package/src/browser/ModuleFrame.mjs +21 -5
package/src/browser/Navigation.d.mts +3 -3
package/src/browser/boxjs.mjs +38 -8
package/src/browser/client.d.mts +2 -2
package/src/browser/client.mjs +51 -21
package/src/browser/home.d.mts +54 -0
package/src/browser/home.html +16 -0
package/src/browser/home.mjs +441 -0
package/src/browser/index.d.ts +2 -0
package/src/browser/index.mjs +16 -1
package/src/browser/module.html +1 -2
package/src/browser/panel.mjs +22 -29
package/src/browser/{panel.css → styles.css} +245 -3
package/src/index.d.ts +8 -0
package/dist/web.js +0 -1232
package/src/web.mjs +0 -99

package/dist/home.html ADDED Viewed

@@ -0,0 +1,1032 @@
+<!doctype html>
+<html lang="zh-CN" class="pp-page">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+    <title>设置</title>
+  </head>
+  <body>
+    <div data-preference-panes-pages>
+      <main class="pp-home" data-preference-panes-home></main>
+    </div>
+    <template data-preference-panes-module><section data-preference-panes-module-page><p data-module-message>正在打开设置…</p></section></template>
+    <script type="module">/**
+ * 独立页面的三点按钮和底部操作菜单；嵌入页面由宿主提供对应界面。
+ * Overflow trigger and bottom action sheet for standalone pages; embedded pages use host-provided chrome.
+ */
+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;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([]);
+    }
+    /**
+     * 同步可用操作和忙碌状态，不重建菜单触发按钮。
+     * 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();
+    }
+}
+/**
+ * 模块文档容器：获取静态 HTML，并通过 iframe 数据属性传递页面资源输入。
+ * Module document container: fetch static HTML and pass page resource inputs through iframe data attributes.
+ */
+class ModuleFrame extends EventTarget {
+    #url;
+    #options;
+    #controller = new AbortController();
+    #abort = () => this.destroy();
+    #state;
+    #change = event => {
+        this.#state = { ...event.detail, actions: event.detail.actions ?? [] };
+        this.dispatchEvent(new Event("change"));
+    };
+    #forward(type, event) {
+        if (!this.dispatchEvent(new CustomEvent(type, { cancelable: true, detail: event.detail }))) event.preventDefault();
+    }
+    #confirmation = event => this.#forward("confirm", event);
+    #notice = event => this.#forward("notice", event);
+    #openURL = event => this.#forward("open-url", event);
+    /**
+     * 建立 iframe；调用方挂载 element 后调用 load。
+     * Create the iframe; callers mount element and then call load.
+     * @param {string | URL} url 模块请求地址 / Module request URL.
+     * @param {{signal?: AbortSignal, headers?: HeadersInit}} [options] 请求选项 / Request options.
+     */
+    constructor(url, options = {}) {
+        super();
+        this.#url = new URL(url, document.baseURI);
+        const match = /^\/settings\/([a-zA-Z0-9_-]+)\/?$/.exec(this.#url.pathname);
+        if (!match) throw new TypeError("Open a concrete module URL");
+        this.#options = { signal: options.signal };
+        this.element = document.createElement("iframe");
+        this.element.title = `${match[1]} 设置`;
+        this.element.dataset.preferencePanes = "true";
+        this.element.dataset.preferencePanesModule = match[1];
+        this.element.dataset.preferencePanesBase = this.#url.href;
+        const headers = new Headers(options.headers);
+        for (const [header, property, kind] of [
+            ["X-PreferencePanes-JSON", "preferencePanesJson", "BoxJS"],
+            ["X-PreferencePanes-CSS", "preferencePanesStylesheet", "CSS"],
+        ]) {
+            if (!headers.has(header)) continue;
+            const source = headers.get(header)?.trim();
+            if (!source) {
+                if (kind === "BoxJS") throw new TypeError("BoxJS resource URL is required");
+                continue;
+            }
+            const resource = new URL(source, this.#url);
+            if (!["http:", "https:"].includes(resource.protocol)) throw new TypeError(`${kind} resource must use HTTP(S)`);
+            this.element.dataset[property] = resource.href;
+        }
+        this.element.addEventListener("preferencepanes:change", this.#change);
+        this.element.addEventListener("preferencepanes:confirm", this.#confirmation);
+        this.element.addEventListener("preferencepanes:notice", this.#notice);
+        this.element.addEventListener("preferencepanes:open-url", this.#openURL);
+        this.#state = { title: match[1], module: match[1], busy: false, canGoBack: true, actions: [] };
+        options.signal?.addEventListener("abort", this.#abort, { once: true });
+    }
+    /**
+     * 当前模块导航状态。
+     * Current module navigation state.
+     */
+    get state() {
+        return { ...this.#state };
+    }
+    /**
+     * 获取原始 HTML；晚到响应在退出后不得重新挂载。
+     * Fetch unmodified HTML; a late response must not remount after departure.
+     * @returns {Promise<void>} HTML 已交给 iframe；表单状态通过 change 事件提供 / HTML assigned; form state is reported through change.
+     */
+    async load() {
+        if (this.#options.signal?.aborted) this.destroy();
+        const timer = setTimeout(() => this.#controller.abort(), 10000);
+        try {
+            const response = await fetch(this.#url, { method: "GET", cache: "no-store", credentials: "omit", signal: this.#controller.signal });
+            if (response.status !== 200) throw new Error(`HTTP ${response.status}`);
+            const html = await response.text();
+            if (this.#controller.signal.aborted) throw new DOMException("The operation was aborted", "AbortError");
+            this.element.srcdoc = html;
+        } finally {
+            clearTimeout(timer);
+        }
+    }
+    /**
+     * 使用 iframe 的联合历史返回；写入期间不导航。
+     * Navigate joint iframe history back, except while a write is pending.
+     * @returns {void} 无返回值 / No return value.
+     */
+    back() {
+        if (!this.#state.busy && this.#state.canGoBack) this.element.contentWindow.history.back();
+    }
+    /**
+     * 向模块发送菜单操作，不让宿主访问内部 DOM 或存储客户端。
+     * Dispatch a menu action without host access to internal DOM or the storage client.
+     * @param {string} id 当前可用操作 / Available action identifier.
+     * @returns {void} 无返回值 / No return value.
+     */
+    perform(id) {
+        if (this.#state.busy || !this.#state.actions.some(action => action.id === id)) throw new Error("Action is not available");
+        this.element.dispatchEvent(new CustomEvent("preferencepanes:action", { detail: id }));
+    }
+    /**
+     * 取消加载与事件订阅；节点保留到 Navigation 的退出动画结束。
+     * Cancel loading and subscriptions; Navigation retains the node until its exit animation ends.
+     * @returns {void} 无返回值 / No return value.
+     */
+    destroy() {
+        this.#controller.abort();
+        this.#options.signal?.removeEventListener("abort", this.#abort);
+        this.element.removeEventListener("preferencepanes:change", this.#change);
+        this.element.removeEventListener("preferencepanes:confirm", this.#confirmation);
+        this.element.removeEventListener("preferencepanes:notice", this.#notice);
+        this.element.removeEventListener("preferencepanes:open-url", this.#openURL);
+    }
+}
+/**
+ * 模块探测请求选项。
+ * Options for a module probe request.
+ * @typedef {object} ModuleProbeOptions
+ * @property {typeof globalThis.fetch} [fetch] 可注入的 fetch / Injectable fetch.
+ * @property {AbortSignal} [signal] 外部取消信号 / External cancellation signal.
+ * @property {number} [timeout] 超时毫秒数，默认 3500 / Timeout in milliseconds, defaults to 3500.
+ */
+/**
+ * 通过模块 API 的 HEAD 响应检测安装状态和业务版本。
+ * Probe installation and business version from the module API HEAD response.
+ * @param {string | URL} url 模块 API 地址 / Module API URL.
+ * @param {ModuleProbeOptions} [options] 请求选项 / Request options.
+ * @returns {Promise<Response>} 原始 HTTP 响应，可直接读取 status 和响应头 / Native HTTP response; read status and headers directly.
+ */
+async function probeModule(url, { fetch: request = globalThis.fetch, signal, timeout = 3500 } = {}) {
+    const controller = new AbortController();
+    const abort = () => controller.abort();
+    if (signal?.aborted) abort();
+    signal?.addEventListener("abort", abort, { once: true });
+    const timer = setTimeout(() => controller.abort(), timeout);
+    try {
+        return await request(url, { method: "HEAD", cache: "no-store", credentials: "omit", signal: controller.signal });
+    } finally {
+        clearTimeout(timer);
+        signal?.removeEventListener("abort", abort);
+    }
+}
+/**
+ * 模块入口的固定状态行，只通过 HEAD 探测安装状态和业务版本。
+ * Fixed module status row, probing installation and business version with HEAD only.
+ */
+class ModuleStatus extends EventTarget {
+    #element;
+    #controller;
+    #state = { status: "checking", version: null };
+    /**
+     * 绑定调用方提供的状态行。
+     * Bind a caller-owned status row.
+     * @param {HTMLElement} element 状态文字容器 / Status text container.
+     */
+    constructor(element) {
+        super();
+        this.#element = element;
+        this.#render("checking");
+    }
+    /**
+     * 当前安装状态与业务版本。
+     * Current installation state and business version.
+     */
+    get state() {
+        return { ...this.#state };
+    }
+    /**
+     * 每次进入重新探测，取消旧请求并忽略其迟到结果。
+     * Reprobe on entry, cancelling old requests and ignoring late results.
+     * @param {string | URL} url 模块 API 地址 / Module API URL.
+     * @param {ModuleProbeOptions} [options] 请求选项 / Request options.
+     * @returns {Promise<Response | undefined>} 原始响应；被取消时无返回值 / Native response; undefined when cancelled.
+     */
+    async check(url, options = {}) {
+        this.#controller?.abort();
+        const controller = new AbortController();
+        this.#controller = controller;
+        const externalSignal = options.signal;
+        const abort = () => controller.abort();
+        if (externalSignal?.aborted) abort();
+        externalSignal?.addEventListener("abort", abort, { once: true });
+        this.#render("checking");
+        try {
+            const response = await probeModule(url, { ...options, signal: controller.signal });
+            if (controller !== this.#controller) return response;
+            const version = response.status === 200 ? response.headers.get("X-PreferencePanes-Version")?.trim() || null : null;
+            this.#render(version ? "installed" : "missing", version);
+            return response;
+        } catch (error) {
+            if (controller !== this.#controller) return;
+            if (externalSignal?.aborted) throw error;
+            this.#render("missing");
+        } finally {
+            externalSignal?.removeEventListener("abort", abort);
+        }
+    }
+    /**
+     * 更新状态标签，缺少版本时不伪造版本号。
+     * Render the label without inventing a missing version.
+     * @param {"checking" | "installed" | "missing"} status 状态 / State.
+     * @param {string | null} [version] 业务版本 / Business version.
+     * @returns {void} 无返回值 / No return value.
+     */
+    #render(status, version = null) {
+        this.#state = { status, version: status === "installed" ? version : null };
+        switch (status) {
+            case "checking":
+                this.#element.textContent = "检测中";
+                break;
+            case "installed":
+                this.#element.textContent = version ?? "版本未知";
+                break;
+            case "missing":
+                this.#element.textContent = "未安装";
+                break;
+        }
+        this.#element.dataset.state = status;
+        this.#element.title = this.#element.textContent;
+        this.dispatchEvent(new Event("change"));
+    }
+    /**
+     * 释放尚未完成的探测。
+     * Release pending probes.
+     * @returns {void} 无返回值 / No return value.
+     */
+    destroy() {
+        this.#controller?.abort();
+        this.#controller = undefined;
+    }
+}
+/**
+ * 同一文档内的主页/子页导航；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 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.#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();
+    }
+}
+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.
+ */
+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 };
+}
+/**
+ * 校验外部 JSON 中的章节、入口和导航目标，避免生成不可访问的设置入口。
+ * Validate sections, entries and navigation targets in external JSON before rendering inaccessible entries.
+ * @param {unknown} config 外部首页配置 / External homepage configuration.
+ * @returns {void} 非法输入抛出错误 / Invalid input throws.
+ */
+function validateHome(config) {
+    if (!config || typeof config.title !== "string" || !Array.isArray(config.sections)) throw new Error("首页 JSON 缺少 title 或 sections");
+    if (config.logo !== undefined && typeof config.logo !== "string") throw new Error("首页 logo 必须是图片地址");
+    if (config.footer !== undefined && (!Array.isArray(config.footer) || config.footer.some(text => typeof text !== "string"))) throw new Error("首页 footer 必须是文字数组");
+    const modules = new Set();
+    for (const section of config.sections) {
+        if (!section || typeof section.title !== "string" || !Array.isArray(section.items) || (section.layout !== undefined && !["grid", "list"].includes(section.layout))) throw new Error("首页章节需要 title、items 和有效的 layout");
+        for (const item of section.items) {
+            if (!item || typeof item.name !== "string" || !item.icon || (typeof item.icon.src === "string") === (typeof item.icon.text === "string") || (item.icon.src !== undefined && typeof item.icon.src !== "string") || (item.icon.text !== undefined && typeof item.icon.text !== "string"))
+                throw new Error("首页入口需要 name 和唯一的图片或文字 icon");
+            if (item.description !== undefined && typeof item.description !== "string") throw new Error(`入口 ${item.name} 的 description 必须是文字`);
+            if (item.target !== undefined && (item.module !== undefined || !["internal", "_self", "_blank"].includes(item.target))) throw new Error(`入口 ${item.name} 的 target 只允许链接使用 internal、_self 或 _blank`);
+            if ((typeof item.module === "string") === (typeof item.href === "string") || (item.module !== undefined && typeof item.module !== "string") || (item.href !== undefined && typeof item.href !== "string")) throw new Error(`入口 ${item.name} 必须选择 module 或 href`);
+            if (item.module !== undefined) {
+                if (!/^[A-Za-z0-9_-]+$/.test(item.module) || (item.pageModule !== undefined && (typeof item.pageModule !== "string" || !/^[A-Za-z0-9_-]+$/.test(item.pageModule))) || modules.has(item.module)) throw new Error(`入口 ${item.name} 的模块名称无效或重复`);
+                modules.add(item.module);
+            } else {
+                const protocol = new URL(item.href, "https://preference-panes.invalid/").protocol;
+                if (item.pageModule !== undefined || ["javascript:", "data:", "vbscript:"].includes(protocol) || (item.target === "internal" && !["http:", "https:"].includes(protocol))) throw new Error(`入口 ${item.name} 的链接无效`);
+            }
+        }
+    }
+}
+/**
+ * 共用网格和列表章节；资源地址相对于 JSON，所有项目文字通过 textContent 绘制。
+ * Share grid and list sections, resolve resources against JSON and render project text through textContent.
+ * @param {import("./home.mjs").HomeConfig} config 已校验的首页配置 / Validated homepage configuration.
+ * @param {URL} url JSON 地址 / JSON URL.
+ * @param {HTMLElement} home 首页容器 / Homepage container.
+ * @returns {void} 无返回值 / No return value.
+ */
+function renderHome(config, url, home) {
+    const document = home.ownerDocument;
+    home.replaceChildren();
+    if (config.logo) {
+        const logo = document.createElement("img");
+        logo.className = "pp-home-logo";
+        logo.src = new URL(config.logo, url).href;
+        logo.alt = config.title;
+        home.append(logo);
+    }
+    for (const section of config.sections) {
+        const group = document.createElement("section");
+        group.className = "pp-group";
+        const title = document.createElement("h2");
+        title.className = "pp-group-title";
+        title.textContent = section.title;
+        const entries = document.createElement("div");
+        entries.className = "pp-home-entries";
+        entries.dataset.layout = section.layout ?? "grid";
+        for (const item of section.items) {
+            const entry = document.createElement(item.module ? "button" : "a");
+            entry.className = "pp-home-item";
+            if (item.module) {
+                entry.type = "button";
+                entry.disabled = true;
+                entry.dataset.module = item.module;
+                if (item.pageModule) entry.dataset.preferencePanesModule = item.pageModule;
+            } else {
+                entry.href = new URL(item.href, url).href;
+                if (item.target !== undefined) {
+                    entry.dataset.target = item.target;
+                    switch (item.target) {
+                        case "_blank":
+                            entry.target = item.target;
+                            entry.rel = "noopener noreferrer";
+                            break;
+                        case "_self":
+                            entry.target = item.target;
+                            break;
+                    }
+                }
+            }
+            const icon = document.createElement("span");
+            icon.className = "pp-home-icon";
+            icon.setAttribute("aria-hidden", "true");
+            if (item.icon.src !== undefined) {
+                const image = document.createElement("img");
+                image.src = new URL(item.icon.src, url).href;
+                image.alt = "";
+                icon.append(image);
+            } else icon.textContent = item.icon.text;
+            const content = document.createElement("span");
+            content.className = "pp-home-content";
+            const name = document.createElement("span");
+            name.className = "pp-home-name";
+            name.textContent = item.name;
+            content.append(name);
+            if (item.description !== undefined) {
+                const description = document.createElement("span");
+                description.className = "pp-description";
+                description.textContent = item.description;
+                content.append(description);
+            }
+            if (item.module) {
+                const status = document.createElement("span");
+                status.className = "pp-description";
+                status.dataset.moduleStatus = "";
+                status.textContent = "检测中";
+                content.append(status);
+            }
+            entry.append(icon, content);
+            if (entries.dataset.layout === "list") {
+                const arrow = document.createElement("span");
+                arrow.className = "pp-home-arrow";
+                arrow.textContent = "›";
+                arrow.setAttribute("aria-hidden", "true");
+                entry.append(arrow);
+            }
+            entries.append(entry);
+        }
+        group.append(title, entries);
+        home.append(group);
+    }
+    const footer = document.createElement("footer");
+    footer.className = "pp-home-footer pp-description";
+    for (const text of config.footer ?? []) {
+        const paragraph = document.createElement("p");
+        paragraph.textContent = text;
+        footer.append(paragraph);
+    }
+    home.append(footer);
+}
+/**
+ * 浏览器宿主提供网页导航、通知、主题和可视区域避让。
+ * 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 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.textContent = "‹";
+    button.setAttribute("aria-label", "返回");
+    button.onclick = back;
+    const title = document.createElement("span");
+    title.className = "pp-host-title";
+    header.append(button, title, 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`);
+    };
+    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.title;
+            button.hidden = !state.canGoBack;
+            menu.element.hidden = !state.actions.length;
+        },
+        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);
+            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();
+        },
+    };
+}
+/**
+ * 读取固定相对路径的首页 JSON 与可选 CSS、Bridge，初始化后共用模块探测与导航。
+ * Load homepage JSON and optional CSS and Bridge at fixed relative paths, then share module probes and navigation.
+ * @returns {Promise<() => void>} 退出清理动作；加载失败会显示错误并拒绝 / Cleanup action; load failures display an error and reject.
+ */
+async function startHome() {
+    let host;
+    let menu;
+    let navigation;
+    let frame;
+    let linkTitle;
+    let statuses = [];
+    let destroyed = false;
+    let defaults;
+    let stylesheet;
+    const controller = new AbortController();
+    const destroy = () => {
+        if (destroyed) return;
+        destroyed = true;
+        controller.abort();
+        for (const { status } of statuses) status.destroy();
+        navigation?.destroy();
+        host?.destroy();
+        menu?.destroy();
+        stylesheet?.remove();
+        if (defaults?.owned) defaults.element.remove();
+        window.removeEventListener("pagehide", pagehide);
+    };
+    const pagehide = event => {
+        if (!event.persisted) destroy();
+    };
+    window.addEventListener("pagehide", pagehide);
+    try {
+        defaults = installDefaultStyles(document);
+        const jsonURL = new URL("./home.json", document.baseURI);
+        const response = await fetch(jsonURL, { signal: controller.signal });
+        if (!response.ok) throw new Error(`首页 JSON 加载失败：HTTP ${response.status}`);
+        const config = await response.json();
+        validateHome(config);
+        if (destroyed) return destroy;
+        const cssURL = new URL("./theme.css", document.baseURI);
+        const cssResponse = await fetch(cssURL, { method: "HEAD", cache: "no-store", signal: controller.signal });
+        if (destroyed) return destroy;
+        switch (cssResponse.status) {
+            case 200:
+                stylesheet = document.createElement("link");
+                stylesheet.rel = "stylesheet";
+                stylesheet.dataset.preferencePanesStylesheet = "";
+                stylesheet.href = cssURL.href;
+                await new Promise((resolve, reject) => {
+                    const abort = () => reject(new DOMException("页面已退出", "AbortError"));
+                    controller.signal.addEventListener("abort", abort, { once: true });
+                    stylesheet.onload = () => {
+                        controller.signal.removeEventListener("abort", abort);
+                        resolve();
+                    };
+                    stylesheet.onerror = () => {
+                        controller.signal.removeEventListener("abort", abort);
+                        reject(new Error("项目 CSS 加载失败"));
+                    };
+                    document.head.append(stylesheet);
+                });
+                break;
+            case 404:
+                break;
+            default:
+                throw new Error(`项目 CSS 探测失败：HTTP ${cssResponse.status}`);
+        }
+        if (destroyed) return destroy;
+        const bridgeURL = new URL("./bridge.mjs", document.baseURI);
+        const bridgeResponse = await fetch(bridgeURL, { method: "HEAD", cache: "no-store", signal: controller.signal });
+        if (destroyed) return destroy;
+        let factory;
+        switch (bridgeResponse.status) {
+            case 200:
+                factory = (await import(bridgeURL.href)).default;
+                break;
+            case 404:
+                factory = browserHost;
+                break;
+            default:
+                throw new Error(`Bridge 探测失败：HTTP ${bridgeResponse.status}`);
+        }
+        if (destroyed) return destroy;
+        document.title = config.title;
+        menu = new ActionMenu(id => frame.perform(id));
+        host = await factory({ menu, back: () => (navigation.current && frame ? frame.back() : navigation.back()) });
+        if (destroyed) {
+            host.destroy();
+            menu.destroy();
+            return destroy;
+        }
+        const container = document.querySelector("[data-preference-panes-pages]");
+        const home = document.querySelector("[data-preference-panes-home]");
+        const template = document.querySelector("template[data-preference-panes-module]");
+        renderHome(config, jsonURL, home);
+        const buttons = [...home.querySelectorAll("[data-module]")];
+        const links = [...home.querySelectorAll("a[href]")];
+        const stylesheetURL = stylesheet?.href;
+        const update = () => {
+            if (destroyed) return;
+            const state = navigation.current && frame ? frame.state : { title: navigation.current ? linkTitle : document.title, actions: [], busy: false, canGoBack: navigation.canGoBack };
+            menu.update(state.actions, state.busy);
+            Promise.resolve(host.update(state)).catch(error => {
+                if (!destroyed) host.notice({ kind: "error", message: error.message });
+            });
+        };
+        navigation = new Navigation(container, home, (module, signal) => {
+            frame = undefined;
+            const link = links.find((link, index) => link.dataset.target === "internal" && module === `link:${index}`);
+            if (link) {
+                const page = document.createElement("section");
+                page.dataset.preferencePanesLinkPage = "";
+                const iframe = document.createElement("iframe");
+                linkTitle = link.querySelector(".pp-home-name").textContent;
+                iframe.title = linkTitle;
+                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 button = buttons.find(button => button.dataset.module === module);
+            if (!button) return;
+            const page = template.content.firstElementChild.cloneNode(true);
+            page.dataset.preferencePanesModulePage = "";
+            const message = page.querySelector("[data-module-message]");
+            const moduleName = encodeURIComponent(button.dataset.preferencePanesModule ?? module);
+            const current = new ModuleFrame(`/settings/${moduleName}`, {
+                signal,
+                headers: { "X-PreferencePanes-JSON": `/api/${encodeURIComponent(module)}`, ...(stylesheetURL ? { "X-PreferencePanes-CSS": stylesheetURL } : {}) },
+            });
+            frame = current;
+            current.addEventListener("confirm", event => {
+                event.preventDefault();
+                Promise.resolve()
+                    .then(() => host.confirm(event.detail.message))
+                    .then(
+                        value => {
+                            if (!signal.aborted) event.detail.resolve(value);
+                        },
+                        error => {
+                            if (!signal.aborted) event.detail.reject(error);
+                        },
+                    );
+            });
+            current.addEventListener("notice", event => {
+                event.preventDefault();
+                host.notice(event.detail);
+            });
+            current.addEventListener("open-url", event => {
+                event.preventDefault();
+                Promise.resolve()
+                    .then(() => host.openURL(event.detail.url))
+                    .catch(error => {
+                        if (!signal.aborted) host.notice({ kind: "error", message: error.message });
+                    });
+            });
+            current.addEventListener("change", () => {
+                if (!signal.aborted) update();
+            });
+            current.element.onload = () => {
+                if (!signal.aborted) message.hidden = true;
+            };
+            page.append(current.element);
+            current.load().catch(error => {
+                if (!signal.aborted) message.textContent = error.message;
+            });
+            return page;
+        });
+        for (const [index, link] of links.entries()) {
+            link.addEventListener(
+                "click",
+                event => {
+                    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+                    event.preventDefault();
+                    switch (link.dataset.target) {
+                        case "internal":
+                            navigation.open(`link:${index}`);
+                            break;
+                        default:
+                            try {
+                                Promise.resolve(host.openURL(link.href, link.dataset.target)).catch(error => {
+                                    if (!destroyed) host.notice({ kind: "error", message: error.message });
+                                });
+                            } catch (error) {
+                                if (!destroyed) host.notice({ kind: "error", message: error.message });
+                            }
+                            break;
+                    }
+                },
+                { signal: controller.signal },
+            );
+        }
+        statuses = buttons.map(button => {
+            const status = new ModuleStatus(button.querySelector("[data-module-status]"));
+            status.addEventListener("change", () => {
+                button.disabled = status.state.status !== "installed";
+            });
+            button.addEventListener("click", () => navigation.open(button.dataset.module), { signal: controller.signal });
+            return { button, status };
+        });
+        const probe = () => {
+            update();
+            if (navigation.current) return;
+            for (const { button, status } of statuses) status.check(`/api/${encodeURIComponent(button.dataset.module)}`);
+        };
+        navigation.addEventListener("change", probe);
+        probe();
+        return destroy;
+    } catch (error) {
+        const display = !destroyed;
+        destroy();
+        if (display) {
+            const message = document.createElement("p");
+            message.className = "pp-host-error";
+            message.setAttribute("role", "alert");
+            message.textContent = `无法打开设置：${error.message}`;
+            document.body.prepend(message);
+        }
+        throw error;
+    }
+}
+export { startHome };
+await startHome();</script>
+  </body>
+</html>