@nsnanocat/preference-panes 1.1.0 → 1.1.2

package/dist/module/index.mjs

@@ -1,112 +1,3 @@
-/**
- * 统一解析模块页的资源地址：Header 优先于查询参数，再使用模块约定。
- * Resolve module resource locations: headers override query parameters and module conventions.
- * @param {URL} url 已解析的页面请求地址 / Parsed page request URL.
- * @param {Record<string, string | undefined>} [headers] 请求头，名称不区分大小写 / Case-insensitive request headers.
- * @returns {{url: string, module: string, json: string, css: string}} 页面上下文与两个资源输入 / Page context and two resource inputs.
- */
-function pageInputs(url, headers = {}) {
-    const match = /^\/settings\/([a-zA-Z0-9_-]+)\/?$/.exec(url.pathname);
-    if (!match) throw new TypeError("Open a concrete module URL");
-    const module = match[1];
-    const values = Object.fromEntries(Object.entries(headers).map(([key, value]) => [key.toLowerCase(), value]));
-    const json = values["x-preferencepanes-json"] ?? url.searchParams.get("json") ?? `/configs/${module}`;
-    const css = values["x-preferencepanes-css"] ?? url.searchParams.get("css") ?? "";
-    if (!json.trim()) throw new TypeError("JSON resource URL is required");
-    return { url: url.href, module, json, css };
-}
-
-/**
- * 创建元素，所有展示文本通过 textContent 写入。
- * Create elements and assign display text through textContent only.
- * @template {keyof HTMLElementTagNameMap} T
- * @param {T} tag 元素标签 / Element tag.
- * @param {string} className 样式类名 / CSS class.
- * @param {string} [text] 纯文本 / Plain text.
- * @returns {HTMLElementTagNameMap[T]} 创建的元素 / Created element.
- */
-function element(tag, className, text) {
-    const node = document.createElement(tag);
-    node.className = className;
-    if (text !== undefined) node.textContent = text;
-    return node;
-}
-
-/**
- * 创建通用设置行；外部 CSS 可通过 pp 类名覆盖视觉样式。
- * Create a generic settings row whose appearance can be overridden through pp classes.
- * @template {"div" | "label"} T
- * @param {T} tag 行元素 / Row element.
- * @returns {HTMLElementTagNameMap[T]} 设置行 / Settings row.
- */
-function settingRow(tag) {
-    return element(tag, "pp-row");
-}
-
-/**
- * 为标准 HTML 输入控件添加通用面板类名。
- * Add the generic panel class to a standard HTML input control.
- * @param {HTMLElement} control 已创建的原生控件 / Existing native control.
- * @returns {HTMLElement} 输入控件 / Input control.
- */
-function fieldControl(control) {
-    control.classList.add("pp-editor");
-    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.
- * @param {string} message 状态文本 / Status message.
- * @param {(() => unknown) | undefined} [retry] 重试动作 / Retry action.
- * @returns {HTMLElement} 居中状态视图 / Centered status view.
- */
-function statusView(message, retry) {
-    const view = element("section", "pp-status");
-    view.setAttribute("role", "status");
-    view.setAttribute("aria-live", "polite");
-    const spinner = element("span", "pp-status-spinner");
-    spinner.setAttribute("aria-hidden", "true");
-    view.append(spinner, element("p", "pp-status-message", message));
-    if (retry) {
-        const button = element("button", "pp-status-action", "重新读取");
-        button.type = "button";
-        button.onclick = retry;
-        view.append(button);
-    }
-    return view;
-}
-
-/**
- * 请求宿主确认；独立网页使用浏览器对话框。
- * 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 编码转换。
  * Validate raw path segments without URL encoding conversion.
@@ -292,6 +183,97 @@ function validValue(field, value) {
     return !field.options || (field.type === "array" ? value : [value]).every(item => field.options.some(option => option.key === item));
 }
 
+/**
+ * 创建元素，所有展示文本通过 textContent 写入。
+ * Create elements and assign display text through textContent only.
+ * @template {keyof HTMLElementTagNameMap} T
+ * @param {T} tag 元素标签 / Element tag.
+ * @param {string} className 样式类名 / CSS class.
+ * @param {string} [text] 纯文本 / Plain text.
+ * @returns {HTMLElementTagNameMap[T]} 创建的元素 / Created element.
+ */
+function element(tag, className, text) {
+    const node = document.createElement(tag);
+    node.className = className;
+    if (text !== undefined) node.textContent = text;
+    return node;
+}
+
+/**
+ * 创建通用设置行；外部 CSS 可通过 pp 类名覆盖视觉样式。
+ * Create a generic settings row whose appearance can be overridden through pp classes.
+ * @template {"div" | "label"} T
+ * @param {T} tag 行元素 / Row element.
+ * @returns {HTMLElementTagNameMap[T]} 设置行 / Settings row.
+ */
+function settingRow(tag) {
+    return element(tag, "pp-row");
+}
+
+/**
+ * 为标准 HTML 输入控件添加通用面板类名。
+ * Add the generic panel class to a standard HTML input control.
+ * @param {HTMLElement} control 已创建的原生控件 / Existing native control.
+ * @returns {HTMLElement} 输入控件 / Input control.
+ */
+function fieldControl(control) {
+    control.classList.add("pp-editor");
+    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.
+ * @param {string} message 状态文本 / Status message.
+ * @param {(() => unknown) | undefined} [retry] 重试动作 / Retry action.
+ * @returns {HTMLElement} 居中状态视图 / Centered status view.
+ */
+function statusView(message, retry) {
+    const view = element("section", "pp-status");
+    view.setAttribute("role", "status");
+    view.setAttribute("aria-live", "polite");
+    const spinner = element("span", "pp-status-spinner");
+    spinner.setAttribute("aria-hidden", "true");
+    view.append(spinner, element("p", "pp-status-message", message));
+    if (retry) {
+        const button = element("button", "pp-status-action", "重新读取");
+        button.type = "button";
+        button.onclick = retry;
+        view.append(button);
+    }
+    return view;
+}
+
+/**
+ * 请求宿主确认；独立网页使用浏览器对话框。
+ * 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));
+    });
+}
+
 /**
  * 共用三点按钮和底部操作菜单；弹层挂载到文档根部，不受标题栏显示状态影响。
  * Shared overflow trigger and bottom action sheet; the layer is mounted at document level and remains independent of header visibility.
@@ -446,28 +428,50 @@ class ActionMenu {
  */
 class PreferencesClient {
     #module;
-    #configURL;
     #definition;
     #request;
     #notify;
     #timeout;
     #session = new AbortController();
-    #values;
+    #values = {};
     #saving = false;
 
     /**
-     * 创建只调用模块 API、不读取或解析 BoxJS 的页面客户端。
-     * Create a page client that only calls the module API and never reads or parses BoxJS.
-     * @param {import("./client.mjs").PreferencesClientOptions} options API 模型、请求与通知 / API model, requests, and notifications.
+     * 创建从 BoxJS 定义读取和持久化设置的页面客户端。
+     * Create a page client that reads and persists settings from a BoxJS definition.
+     * @param {import("./client.mjs").PreferencesClientOptions} options 字段定义、请求与通知 / Field definition, requests, and notifications.
      */
-    constructor({ model, definition, fetch: request = globalThis.fetch.bind(globalThis), notify = () => {}, timeout = 10000 }) {
-        this.#module = model.module;
-        this.#configURL = model.configURL;
+    constructor({ definition, fetch: request = globalThis.fetch.bind(globalThis), notify = () => {}, timeout = 10000 }) {
+        this.#module = definition.module;
         this.#definition = definition;
         this.#request = request;
         this.#notify = notify;
         this.#timeout = timeout;
-        this.#values = structuredClone(model.values);
+    }
+
+    /**
+     * 读取一次 Settings 子树并建立页面值快照。
+     * Read the Settings subtree once and establish the page value snapshot.
+     * @returns {Promise<import("./client.mjs").ModuleSnapshot>} 页面快照 / Page snapshot.
+     */
+    async open() {
+        let subtree = await this.readSettings();
+        if (subtree === undefined) subtree = {};
+        if (typeof subtree === "string") subtree = JSON.parse(subtree);
+        if (!subtree || typeof subtree !== "object" || Array.isArray(subtree)) throw new TypeError("Expected a settings subtree object");
+        const values = {};
+        for (const field of this.#definition.fields) {
+            const stored = field.key
+                .split(".")
+                .slice(this.#definition.settingsPath.length)
+                .reduce((parent, part) => Object(parent)[part], subtree);
+            const value = normalizeStoredValue(field, stored === undefined ? field.defaultValue : stored);
+            if (value === undefined) continue;
+            if (!validValue(field, value)) throw new TypeError(`Invalid stored value: ${field.key}`);
+            values[field.key] = value;
+        }
+        this.#values = values;
+        return this.snapshot();
     }
 
     /**
@@ -485,7 +489,7 @@ class PreferencesClient {
      * @returns {Promise<unknown>} Settings 内容或 undefined / Settings content or undefined.
      */
     async readSettings() {
-        const response = await this.#send("get", { scope: "settings" });
+        const response = await this.#send("get", `@${this.#definition.storageKey}.${this.#definition.settingsPath.join(".")}`);
         return response.status === 404 ? undefined : response.json();
     }
 
@@ -495,7 +499,7 @@ class PreferencesClient {
      * @returns {Promise<unknown>} Caches 内容或 undefined / Caches content or undefined.
      */
     async readCaches() {
-        const response = await this.#send("get", { scope: "caches" });
+        const response = await this.#send("get", `@${this.#definition.storageKey}.${this.#module}.Caches`);
         return response.status === 404 ? undefined : response.json();
     }
 
@@ -505,7 +509,7 @@ class PreferencesClient {
      * @returns {Promise<void>} 操作完成 / Operation completion.
      */
     clearCaches() {
-        return this.#change("delete", { scope: "caches" }, "clearCaches");
+        return this.#change("delete", `${this.#module}.Caches`, undefined, "clearCaches");
     }
 
     /**
@@ -514,7 +518,7 @@ class PreferencesClient {
      * @returns {Promise<void>} 操作完成 / Operation completion.
      */
     reset() {
-        return this.#change("delete", { scope: "module" }, "reset");
+        return this.#change("delete", this.#module, undefined, "reset");
     }
 
     /**
@@ -534,7 +538,7 @@ class PreferencesClient {
      * @returns {Promise<void>} 操作完成 / Operation completion.
      */
     set(key, value) {
-        return this.#change("set", { key, value }, "write", key);
+        return this.#change("set", key, value, "write");
     }
 
     /**
@@ -544,30 +548,31 @@ class PreferencesClient {
      * @returns {Promise<void>} 操作完成 / Operation completion.
      */
     remove(key) {
-        return this.#change("delete", { key }, "delete", key);
+        return this.#change("delete", key, undefined, "delete");
     }
 
     /**
-     * 向模块 API 发送 JSON 动作。
-     * Send a JSON action to the module API.
-     * @param {"get" | "set" | "delete"} action 模块动作 / Module action.
-     * @param {unknown} payload JSON 请求体 / JSON request body.
+     * 向固定存储 API 发送完整路径的 form 动作。
+     * Send a complete-path form action to the fixed storage API.
+     * @param {"get" | "set" | "delete"} action 存储动作 / Storage action.
+     * @param {string} path 完整 @root.path / Complete @root.path.
+     * @param {unknown} [value] set 写入值 / Value written by set.
      * @returns {Promise<Response>} 原始响应 / Raw response.
      */
-    async #send(action, payload) {
+    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/${encodeURIComponent(this.#module)}/${action}`, {
+            const response = await this.#request(`/api/${action}`, {
                 method: "POST",
                 credentials: "omit",
                 cache: "no-store",
                 signal: controller.signal,
-                headers: { "Content-Type": "application/json", "X-PreferencePanes-JSON": this.#configURL },
-                body: JSON.stringify(payload),
+                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;
@@ -581,24 +586,28 @@ class PreferencesClient {
      * 执行写入动作；成功后只更新当前页面值。
      * Execute a mutation and update only the current page values after success.
      * @param {"set" | "delete"} action API 动作 / API action.
-     * @param {Record<string, unknown>} payload JSON 请求体 / JSON request body.
+     * @param {string} key 不含存储根的路径 / Path without the storage root.
+     * @param {unknown} value set 写入值 / Value written by set.
      * @param {"write" | "delete" | "clearCaches" | "reset"} operation 通知操作 / Notification operation.
-     * @param {string} [key] 字段路径 / Field path.
      * @returns {Promise<void>} 操作完成 / Operation completion.
      */
-    async #change(action, payload, operation, key) {
+    async #change(action, key, value, operation) {
         if (this.#saving) throw new Error("A settings write is already in progress");
         this.#saving = true;
         try {
-            await this.#send(action, payload);
+            let field;
+            if (operation === "write" || operation === "delete") {
+                field = this.#definition.fields.find(candidate => candidate.key === key);
+                if (!field || (operation === "write" && !validValue(field, value))) throw new TypeError("Invalid setting value");
+            }
+            await this.#send(action, `@${this.#definition.storageKey}.${key}`, value);
             switch (operation) {
                 case "write":
-                    this.#values[key] = structuredClone(payload.value);
+                    this.#values[key] = structuredClone(value);
                     break;
                 case "delete": {
-                    const field = this.#definition.fields.find(candidate => candidate.key === key);
                     delete this.#values[key];
-                    if (field && Object.hasOwn(field, "defaultValue")) this.#values[key] = structuredClone(field.defaultValue);
+                    if (Object.hasOwn(field, "defaultValue")) this.#values[key] = structuredClone(field.defaultValue);
                     break;
                 }
                 case "clearCaches":
@@ -787,24 +796,23 @@ class PreferencesPanel {
     #release;
 
     /**
-     * 挂载 API 返回的模块模型表单。
-     * Mount the module form returned by the API.
+     * 挂载 BoxJS 定义对应的模块表单。
+     * Mount the module form described by a BoxJS definition.
      * @param {HTMLElement} root 包内挂载元素 / Internal mount element.
-     * @param {import("../index.js").ModuleModel & {definition: import("../index.js").ModuleDefinition}} model 已规范化模块模型 / Normalized module model.
+     * @param {import("../index.js").ModuleDefinition} definition 已规范化字段定义 / Normalized field definition.
      */
-    constructor(root, model) {
-        this.#release = this.#mount(root, model);
+    constructor(root, definition) {
+        this.#release = this.#mount(root, definition);
     }
 
     /**
      * 建立面板 DOM、交互和会话，并返回其释放操作。
      * Build panel DOM, interactions, and session, then return its release operation.
      * @param {HTMLElement} root 包内挂载元素 / Internal mount element.
-     * @param {import("../index.js").ModuleModel & {definition: import("../index.js").ModuleDefinition}} model 已规范化模块模型 / Normalized module model.
+     * @param {import("../index.js").ModuleDefinition} definition 已规范化字段定义 / Normalized field definition.
      * @returns {() => void} 释放操作 / Release operation.
      */
-    #mount(root, model) {
-        const { definition } = model;
+    #mount(root, definition) {
         const title = definition.metadata?.name ?? definition.module;
         const document = root.ownerDocument;
         const window = document.defaultView;
@@ -896,7 +904,7 @@ class PreferencesPanel {
                 toast.hidden = true;
             }, 2400);
         };
-        const client = new PreferencesClient({ model, definition, notify });
+        const client = new PreferencesClient({ definition, notify });
         /**
          * 两种菜单入口共用异步错误处理，包含宿主确认框错误。
          * Share async error handling between both menus, including host-dialog errors.
@@ -924,6 +932,7 @@ class PreferencesPanel {
             publishNavigation();
             viewport.replaceChildren(statusView("读取设置…"));
             try {
+                await client.open();
                 if (version === generation) controls();
             } catch (error) {
                 if (version !== generation) return;
@@ -1312,15 +1321,14 @@ function installDefaultStyles(document) {
 }
 
 /**
- * 管理模块设置视图的模型规范化、样式、主题同步和面板生命周期。
- * Manage model normalization, styles, theme synchronization, and panel lifecycle for a module settings view.
+ * 管理 BoxJS 规范化、主题同步和面板生命周期。
+ * Manage BoxJS normalization, theme synchronization, and panel lifecycle.
  */
 class PreferencesView {
     #existing;
     #root;
     #base;
     #ownsBase;
-    #custom;
     #previousTitle;
     #previousTheme;
     #systemTheme;
@@ -1330,22 +1338,12 @@ class PreferencesView {
     #panel;
 
     /**
-     * 使用模块 API 返回的模型挂载设置页。
-     * Mount a settings page from the model returned by the module API.
-     * @param {import("../index.js").ModuleModel} model API 返回的模块模型 / Module model returned by the API.
-     * @param {string} [css] 可选 CSS 正文 / Optional module-scoped CSS text.
+     * 使用原始 BoxJS JSON 挂载设置页。
+     * Mount a settings page from raw BoxJS JSON.
+     * @param {import("../index.js").BoxJSInput} boxjs 单模块 BoxJS JSON / Single-module BoxJS JSON.
      */
-    constructor(model, css = "") {
-        if (typeof css !== "string") throw new TypeError("CSS must be a string");
-        const definition = normalizeBoxJs(model.boxjs, model.module);
-        const values = { ...model.values };
-        for (const field of definition.fields) {
-            if (values[field.key] === undefined) continue;
-            values[field.key] = normalizeStoredValue(field, values[field.key]);
-            if (!validValue(field, values[field.key])) throw new TypeError(`Invalid stored value: ${field.key}`);
-        }
-        for (const field of definition.fields) if (values[field.key] === undefined && Object.hasOwn(field, "defaultValue")) values[field.key] = structuredClone(field.defaultValue);
-        const rendered = { ...model, definition, values };
+    constructor(boxjs) {
+        const definition = normalizeBoxJs(boxjs);
         const metadata = definition.metadata ?? {};
         const image = metadata.icon || metadata.icons?.[1] || metadata.icons?.[0];
         if (image) resourceURL(image);
@@ -1360,9 +1358,6 @@ class PreferencesView {
         const styles = installDefaultStyles(document);
         this.#base = styles.element;
         this.#ownsBase = styles.owned;
-        this.#custom = element("style", "");
-        this.#custom.textContent = css;
-        document.head.append(this.#custom);
         this.#previousTitle = document.title;
         this.#previousTheme = document.documentElement.dataset.theme;
         this.#systemTheme = window.matchMedia("(prefers-color-scheme: dark)");
@@ -1377,7 +1372,7 @@ class PreferencesView {
         document.title = metadata.name ?? definition.module;
         try {
             this.#root.replaceChildren();
-            this.#panel = new PreferencesPanel(this.#root, rendered);
+            this.#panel = new PreferencesPanel(this.#root, definition);
         } catch (error) {
             this.destroy();
             throw error;
@@ -1405,7 +1400,6 @@ class PreferencesView {
         this.#systemTheme.removeEventListener("change", this.#syncAppearance);
         this.#panel?.destroy();
         if (this.#ownsBase) this.#base.remove();
-        this.#custom.remove();
         if (this.#existing) this.#root.replaceChildren();
         else this.#root.remove();
         document.title = this.#previousTitle;
@@ -1416,11 +1410,20 @@ class PreferencesView {
 }
 
 /**
- * 管理模块文档的页面输入、初始请求、重载和错误状态。
- * Manage page inputs, initial requests, reloads, and error states for a module document.
+ * 使用原始 BoxJS JSON 挂载设置页。
+ * Mount a settings page from raw BoxJS JSON.
+ * @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);
+}
+
+/**
+ * 管理模块文档的配置请求、重载和错误状态。
+ * Manage configuration requests, reloads, and error states for a module document.
  */
 class ModulePage {
-    #document;
     #window;
     #root;
     #view;
@@ -1431,7 +1434,6 @@ class ModulePage {
      * @param {Document} document 模块文档 / Module document.
      */
     constructor(document) {
-        this.#document = document;
         this.#window = document.defaultView;
         this.#root = document.querySelector("#preferences");
         installDefaultStyles(document);
@@ -1439,8 +1441,8 @@ class ModulePage {
     }
 
     /**
-     * 从 URL 或代理传递的 Header 导入 JSON/CSS，支持独立文档与 srcdoc。
-     * Import JSON/CSS from the URL or proxy-carried headers in standalone and srcdoc documents.
+     * 通过模块 API 读取 BoxJS JSON 并挂载通用前端。
+     * Read BoxJS JSON through the module API and mount the generic frontend.
      * @returns {Promise<void>} 启动完成 / Startup completion.
      */
     async start() {
@@ -1448,12 +1450,15 @@ class ModulePage {
             this.#view?.destroy();
             this.#view = undefined;
             this.#root.replaceChildren(statusView("读取设置…"));
-            const inputs = this.#readInputs();
-            const apiURL = new URL(`/api/${encodeURIComponent(inputs.module)}`, inputs.url).href;
-            const styleURL = this.#resourceURL(inputs.css, inputs.url);
-            const [style, modelResponse] = await Promise.all([styleURL ? fetch(styleURL, { cache: "no-store", credentials: "omit" }) : null, fetch(apiURL, { cache: "no-store", credentials: "omit", headers: { Accept: "application/json", "X-PreferencePanes-JSON": inputs.json } })]);
-            if ((style && style.status !== 200) || modelResponse.status !== 200) throw new Error(`HTTP ${modelResponse.status !== 200 ? modelResponse.status : style.status}`);
-            this.#view = new PreferencesView(await modelResponse.json(), style ? await style.text() : "");
+            const embedded = this.#window.frameElement?.dataset.preferencePanesModule;
+            const match = /^\/settings\/([a-zA-Z0-9_-]+)\/?$/.exec(this.#window.location.pathname);
+            const module = embedded ?? match?.[1];
+            if (!module) throw new TypeError("Open a concrete module URL");
+            const response = await fetch(`/api/${encodeURIComponent(module)}`, { cache: "no-store", credentials: "omit", headers: { Accept: "application/json" } });
+            if (response.status !== 200) throw new Error(`HTTP ${response.status}`);
+            const boxjs = await response.json();
+            normalizeBoxJs(boxjs, module);
+            this.#view = mount(boxjs);
         } catch (error) {
             this.#root.replaceChildren(statusView(`加载失败：${error.message}`, () => this.start()));
         }
@@ -1470,39 +1475,6 @@ class ModulePage {
         this.#view = undefined;
     }
 
-    /**
-     * 读取嵌入参数、文档元数据或当前 URL 输入。
-     * Read embedded parameters, document metadata, or current URL inputs.
-     * @returns {ReturnType<typeof pageInputs>} 页面输入 / Page inputs.
-     */
-    #readInputs() {
-        const context = this.#document.querySelector('meta[name="preference-panes-inputs"]');
-        const embedded = this.#window.frameElement?.dataset.preferencePanes;
-        switch (true) {
-            case embedded !== undefined:
-                this.#document.documentElement.dataset.preferencePanesEmbedded = "";
-                return JSON.parse(embedded);
-            case context !== null:
-                return JSON.parse(decodeURIComponent(context.content));
-            default:
-                return pageInputs(new URL(this.#window.location.href));
-        }
-    }
-
-    /**
-     * 将可选页面资源限制为 HTTP(S) 地址。
-     * Restrict an optional page resource to an HTTP(S) URL.
-     * @param {string | undefined} source 资源地址 / Resource location.
-     * @param {string} baseURL 页面基准地址 / Page base URL.
-     * @returns {string | null} 绝对资源地址 / Absolute resource URL.
-     */
-    #resourceURL(source, baseURL) {
-        if (!source) return null;
-        const url = new URL(source, baseURL);
-        if (!["http:", "https:"].includes(url.protocol)) throw new TypeError("Resources must use HTTP(S) URLs");
-        return url.href;
-    }
-
     /**
      * 从前进后退缓存恢复时重新加载模块。
      * Reload the module when restored from the back-forward cache.
@@ -1515,5 +1487,3 @@ class ModulePage {
 }
 
 new ModulePage(document).start();
-
-export { ModulePage };