@nsnanocat/preference-panes 1.2.5 → 1.3.1

package/src/browser/ModuleFrame.mjs

@@ -1,122 +0,0 @@
-/**
- * 模块文档容器：获取静态 HTML，并通过 iframe 数据属性传递页面资源输入。
- * Module document container: fetch static HTML and pass page resource inputs through iframe data attributes.
- */
-export 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();
-            this.#controller.signal.throwIfAborted();
-            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);
-    }
-}

package/src/browser/index.mjs

@@ -1,89 +0,0 @@
-import { normalizeBoxJs } from "./boxjs.mjs";
-import { statusView } from "./components.mjs";
-import { mount } from "./mount.mjs";
-import { installDefaultStyles } from "./styles.mjs";
-
-/**
- * 管理模块文档的配置请求、重载和错误状态。
- * Manage configuration requests, reloads, and error states for a module document.
- */
-class ModulePage {
-    #window;
-    #root;
-    #view;
-
-    /**
-     * 创建模块页面控制器并安装基础样式。
-     * Create the module page controller and install base styles.
-     * @param {Document} document 模块文档 / Module document.
-     */
-    constructor(document) {
-        this.#window = document.defaultView;
-        this.#root = document.querySelector("#preferences");
-        installDefaultStyles(document);
-        this.#window.addEventListener("pageshow", this.#show);
-    }
-
-    /**
-     * 读取页面声明的 BoxJS JSON 并挂载通用前端。
-     * Read the BoxJS JSON declared by the page and mount the generic frontend.
-     * @returns {Promise<void>} 启动完成 / Startup completion.
-     */
-    async start() {
-        try {
-            this.#view?.destroy();
-            this.#view = undefined;
-            this.#root.replaceChildren(statusView("读取设置…"));
-            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 frame = this.#window.frameElement?.dataset;
-            const base = frame?.preferencePanesBase ?? this.#window.location.href;
-            this.#window.document.querySelector("link[data-preference-panes-stylesheet]")?.remove();
-            const stylesheetSource = frame?.preferencePanesStylesheet ?? new URLSearchParams(this.#window.location.search).get("css")?.trim();
-            if (stylesheetSource) {
-                const stylesheet = new URL(stylesheetSource, base);
-                if (!["http:", "https:"].includes(stylesheet.protocol)) throw new TypeError("CSS resource must use HTTP(S)");
-                const link = this.#window.document.createElement("link");
-                link.dataset.preferencePanesStylesheet = "true";
-                link.rel = "stylesheet";
-                link.href = stylesheet.href;
-                this.#window.document.head.append(link);
-            }
-            const jsonSource = frame?.preferencePanesJson ?? new URLSearchParams(this.#window.location.search).get("json")?.trim();
-            const source = new URL(jsonSource || `/api/${encodeURIComponent(module)}`, base);
-            if (!["http:", "https:"].includes(source.protocol)) throw new TypeError("BoxJS resource must use HTTP(S)");
-            const response = await fetch(source, { 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()));
-        }
-    }
-
-    /**
-     * 释放页面视图和页面级监听器。
-     * Release the page view and page-level listener.
-     * @returns {void} 无返回值 / No return value.
-     */
-    destroy() {
-        this.#window.removeEventListener("pageshow", this.#show);
-        this.#view?.destroy();
-        this.#view = undefined;
-    }
-
-    /**
-     * 从前进后退缓存恢复时重新加载模块。
-     * Reload the module when restored from the back-forward cache.
-     * @param {PageTransitionEvent} event 页面显示事件 / Page show event.
-     * @returns {void} 无返回值 / No return value.
-     */
-    #show = event => {
-        if (event.persisted) this.start();
-    };
-}
-
-new ModulePage(document).start();

package/src/browser/module.html

@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
-        <meta name="color-scheme" content="light dark">
-        <!--__PREFERENCE_PANES_JSON__-->
-        <title>Module Preferences</title>
-        <style>body { margin: 0; }</style>
-        <!--__PREFERENCE_PANES_STYLESHEET__-->
-    </head>
-    <body>
-        <main id="preferences"></main>
-        <script type="module" src="/settings/assets/index.mjs?v=__VERSION__"></script>
-    </body>
-</html>

package/src/browser/panel.css

@@ -1,315 +0,0 @@
-/* 通用默认样式只使用 pp 命名空间；项目可通过 CSS 输入覆盖变量和组件。
- * Generic defaults use only the pp namespace; projects may override variables and components through CSS input. */
-.pp-panel {
-    --pp-text: #18191c;
-    --pp-background: #f6f7f8;
-    --pp-surface: #fff;
-    --pp-field: #f1f2f3;
-    --pp-border: #e3e5e7;
-    --pp-muted: #797f87;
-    --pp-accent: #1677ff;
-    --pp-warning: #9a6700;
-    font:
-        15px / 1.5 -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        sans-serif;
-    color: var(--pp-text);
-    background: var(--pp-background);
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    max-width: 100vw;
-    min-width: 0;
-    height: 100vh;
-    overflow: hidden;
-}
-
-:root[data-theme="dark"] .pp-panel {
-    --pp-text: #f1f2f3;
-    --pp-background: #0d0e0f;
-    --pp-surface: #18191c;
-    --pp-field: #2f3238;
-    --pp-border: #2f3238;
-    --pp-muted: #9499a0;
-    --pp-warning: #f0b849;
-}
-.pp-panel * {
-    box-sizing: border-box;
-    letter-spacing: 0;
-}
-.pp-header {
-    flex: none;
-    height: calc(52px + env(safe-area-inset-top));
-    padding: env(safe-area-inset-top) 12px 0;
-    display: flex;
-    align-items: center;
-    background: var(--pp-surface);
-    border-bottom: 1px solid var(--pp-border);
-    position: relative;
-    z-index: 2;
-}
-.pp-title {
-    flex: 1;
-    text-align: center;
-    font-size: 17px;
-    font-weight: 500;
-    margin: 0;
-    min-width: 0;
-    overflow-wrap: anywhere;
-}
-.pp-nav-spacer {
-    width: 44px;
-    flex: none;
-}
-.pp-panel button {
-    font: inherit;
-    cursor: pointer;
-    border: 0;
-    background: none;
-    color: inherit;
-}
-.pp-panel .pp-back {
-    width: 44px;
-    height: 44px;
-    flex: none;
-    font-size: 34px;
-    line-height: 32px;
-    padding: 0;
-}
-.pp-panel button:disabled {
-    opacity: 0.5;
-    cursor: wait;
-}
-.pp-viewport {
-    position: relative;
-    flex: 1;
-    min-width: 0;
-    min-height: 0;
-    overflow: hidden;
-}
-@supports (height: 100dvh) {
-    .pp-panel {
-        height: 100dvh;
-    }
-}
-.pp-fields,
-.pp-choice-page,
-.pp-settings-page,
-.pp-cache-page {
-    position: absolute;
-    inset: 0;
-    min-width: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom) + var(--pp-keyboard-height, 0px));
-    scroll-padding-bottom: var(--pp-keyboard-height, 0px);
-    background: var(--pp-background);
-}
-.pp-choice-link {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 8px;
-    max-width: 45%;
-    min-width: 44px;
-    min-height: 44px;
-    padding: 0;
-    text-align: right;
-    flex: 1;
-}
-.pp-panel a.pp-choice-link {
-    color: var(--pp-accent);
-    text-decoration: none;
-}
-.pp-summary {
-    color: var(--pp-muted);
-    font-size: 13px;
-    line-height: 18px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    overflow-wrap: anywhere;
-}
-.pp-chevron {
-    color: var(--pp-muted);
-    font-size: 22px;
-    flex: none;
-}
-.pp-editor {
-    flex: none;
-    width: 45%;
-    min-width: 0;
-    min-height: 36px;
-    padding: 8px 10px;
-    font: inherit;
-    color: var(--pp-text);
-    background: var(--pp-field);
-    border: 0;
-    border-radius: 6px;
-}
-.pp-panel .pp-multiline {
-    display: block;
-}
-.pp-multiline .pp-editor {
-    width: 100%;
-    margin-top: 10px;
-}
-.pp-panel [hidden] {
-    display: none !important;
-}
-.pp-label {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-right: 16px;
-}
-.pp-field-name {
-    color: var(--pp-text);
-    font-size: 15px;
-}
-.pp-field-description {
-    margin-top: 2px;
-    color: var(--pp-muted);
-    font-size: 12px;
-}
-.pp-field-warning {
-    margin-top: 4px;
-    color: var(--pp-warning);
-    font-size: 12px;
-    overflow-wrap: anywhere;
-}
-.pp-group {
-    margin-top: 16px;
-}
-.pp-group-title {
-    margin: 0 0 8px;
-    color: var(--pp-muted);
-    font-size: 15px;
-    font-weight: 400;
-}
-.pp-row {
-    min-width: 0;
-    min-height: 48px;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--pp-surface);
-    border-bottom: 1px solid var(--pp-border);
-}
-.pp-rows > :last-child {
-    border-bottom: 0 !important;
-}
-.pp-switch {
-    flex: none;
-    accent-color: var(--pp-accent);
-}
-.pp-choice {
-    justify-content: space-between;
-    cursor: pointer;
-}
-.pp-choice input {
-    width: 20px;
-    height: 20px;
-    flex: none;
-    accent-color: var(--pp-accent);
-    margin: 0;
-}
-.pp-description {
-    font-size: 12px;
-    line-height: 1.6;
-    color: var(--pp-muted);
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-}
-.pp-module-info {
-    display: flex;
-    gap: 12px;
-    margin: 12px 0;
-}
-.pp-module-details {
-    min-width: 0;
-    overflow-wrap: anywhere;
-}
-.pp-module-source {
-    color: inherit;
-    text-decoration: underline;
-}
-.pp-status {
-    position: fixed;
-    inset: 0;
-    display: grid;
-    place-content: center;
-    justify-items: center;
-    gap: 12px;
-    min-width: 0;
-    min-height: 0;
-    margin: 0;
-    padding: 24px;
-    color: var(--pp-muted, GrayText);
-    text-align: center;
-    background: var(--pp-background, Canvas);
-}
-.pp-viewport > .pp-status {
-    position: absolute;
-}
-.pp-status-spinner {
-    box-sizing: border-box;
-    width: 28px;
-    height: 28px;
-    border: 3px solid color-mix(in srgb, currentColor 25%, transparent);
-    border-top-color: var(--pp-accent, AccentColor);
-    border-radius: 50%;
-    animation: pp-status-spin 0.8s linear infinite;
-}
-.pp-status-message {
-    max-width: 100%;
-    margin: 0;
-    overflow-wrap: anywhere;
-}
-.pp-status-action {
-    min-width: 96px;
-    min-height: 44px;
-    padding: 8px 16px;
-    border: 0;
-    border-radius: 6px;
-    color: var(--pp-text, ButtonText);
-    font: inherit;
-    cursor: pointer;
-    background: var(--pp-surface, ButtonFace);
-}
-@keyframes pp-status-spin {
-    to {
-        transform: rotate(1turn);
-    }
-}
-.pp-cache {
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-}
-.pp-toast {
-    pointer-events: none;
-    position: fixed;
-    bottom: calc(30px + env(safe-area-inset-bottom));
-    left: 50%;
-    transform: translateX(-50%);
-    max-width: 90vw;
-    padding: 10px 16px;
-    border-radius: 8px;
-    background: #333e;
-    color: white;
-    font-size: 13px;
-    z-index: 20;
-}
-.pp-toast[data-kind="error"] {
-    background: #8d2424;
-}
-.pp-panel :focus-visible {
-    outline: 2px solid var(--pp-accent);
-    outline-offset: -2px;
-}