@nsnanocat/preference-panes 0.1.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,109 @@
+# @nsnanocat/preference-panes
+
+尚未发布的通用设置面板和代理存储 API，基于 `@nsnanocat/util`。字段直接来自运行时加载的 BoxJS JSON，页面、缓存与读写逻辑不包含具体项目的选项。
+
+## 工作方式
+
+| 操作 | 网络请求 | 页面缓存 |
+| --- | --- | --- |
+| 进入主菜单 | 并发 HEAD `/configs/<模块>` | 不读取持久化设置 |
+| 打开、再次进入或刷新模块页 | GET 模块 BoxJS，再 GET 声明字段的公共子树，各一次 | 建立新的内存会话，替换旧值 |
+| 修改单值 | POST 对应键路径，正文为 JSON 值本身 | 仅 HTTP 200 后更新该键 |
+| 删除单值 | DELETE 对应键路径 | 仅 HTTP 200 后移除覆盖值，显示 BoxJS 默认值 |
+| 保存、删除后 | 不追加 GET | 成功或失败显示临时通知 |
+
+只有 `/api/` 是固定前缀。`@BiliBili.Enhanced.Settings.Home.Top_left` 映射为 `/api/Enhanced/Settings/Home/Top_left`；`BiliBili` 从 BoxJS ID 解析，不经浏览器 header 传递。
+
+配置资源与数据接口使用不同前缀：`/configs/Enhanced` 是 BoxJS Mock，`/api/Enhanced/…` 是持久化 API。配置 Mock 地址不部署同名线上文件，关闭模块后 HEAD 非 200 或失败即禁用入口；它的下载源可以是另一个在线资源地址。公共 HTML、JS、CSS 可以在线托管后由代理 Mock 提供，选项由浏览器实时生成。
+
+## 浏览器组件
+
+```js
+import { mountPreferencePanes } from "@nsnanocat/preference-panes/browser";
+import "@nsnanocat/preference-panes/browser/panel.css";
+
+const panel = mountPreferencePanes({
+  element: document.querySelector("#preferences"),
+  title: "Preferences"
+});
+// 卸载时 panel.destroy()
+```
+
+同一份 HTML 从 `/settings/{module}` 路径读取模块标识，按固定约定读取配置：
+
+```text
+/settings/Enhanced → GET /configs/Enhanced
+/settings/Global   → GET /configs/Global
+```
+
+不需要查询参数。路径中的 module 既决定配置 Mock 路径，也选择 BoxJS ID 中对应模块的字段，例如 `@BiliBili.Enhanced.Settings.…` 中的 Enhanced。配置文件的实际下载地址由模块模板中的 Mock 规则指定，不写入 HTML 或页面 URL。HTML 和通用 JS 不包含业务模块目录。
+
+| 地址 | 谁响应 | 内容 |
+| --- | --- | --- |
+| `/settings/Enhanced` | 公共 HTML Mock | 通用设置页面 |
+| `/configs/Enhanced` | Enhanced 的配置 Mock | argument config 经原有生成器生成的 BoxJS JSON |
+| `/api/Enhanced/` 或 `/api/Enhanced/Settings/` | 通用读写脚本 | 已声明字段的持久化子树 |
+| `/api/Enhanced/Settings/Home/Top_left` | 同一个通用读写脚本 | 单键 GET/POST/DELETE |
+
+模块模板的配置规则只匹配 `/configs/…`，脚本规则只匹配 `/api/…`，两者没有交集，不依赖命中先后顺序。代理脚本自己的 configURL 参数由模块模板提供，指向与 Mock 相同版本的 BoxJS 下载源，用于写入校验；该 configURL 是代理脚本的模块模板参数，不是页面参数。
+
+业务主菜单由调用项目维护（Biliverse 由 Enhanced 负责），每次进入通过 `client.probe(module)` 并发 HEAD `/configs/{module}`，再打开 `/settings/模块标识`。HEAD 只检测配置 Mock 可用性，不读取存储。
+
+通用设置页每次进入、刷新或浏览器缓存恢复时，用 `client.open(module)` GET `/configs/{module}` 一次，再 GET 持久化子树一次。用配置实时生成表单，值放在内存，不使用 localStorage/sessionStorage。保存/删除仅 HTTP 200 后更新缓存和通知，不追加 GET。现有 UI 可直接使用同一客户端的 snapshot/set/remove/leave；snapshot 返回副本。
+
+默认 CSS 是独立的通用样式，可由调用方替换；本包不依赖 Bilibili 样式或框架。字段定义由 BoxJS 决定，通用 JS 只定义每类控件如何绘制，不编入各项目的具体选项。
+
+## 代理读写组件
+
+```js
+import { createSettingsHandler } from "@nsnanocat/preference-panes";
+import { fetch } from "@nsnanocat/util/polyfill/fetch";
+
+const handle = createSettingsHandler({
+  origin: "https://example.org",
+  loadConfig: async module => {
+    const response = await fetch(`https://assets.example.org/${module}.boxjs.json`);
+    if (response.status !== 200) throw new Error(`BoxJS HTTP ${response.status}`);
+    return JSON.parse(response.body);
+  }
+});
+const response = await handle($request);
+// 接入现有平台的 done 适配；或直接使用下述打包入口。
+```
+
+每个支持面板的模块都携带自己的配置 Mock，并引用同一个通用读写脚本。脚本正则只匹配各自 `/api/<模块>` 的数据路径，配置 Mock 则只匹配 `/configs/`。处理器每次键值请求运行时加载配置，仅允许操作已声明的字段。
+
+持久化 GET 调用一次 util `Storage.getItem`；POST/DELETE 在写入前重新读取最新根对象，再用 util `Lodash.set/unset` 修改单键并 `Storage.setItem` 写回，保留其它模块、隐藏字段和缓存。这是代理端必要的读改写，浏览器不会因此重新 GET 整个模块。多个独立脚本上下文同时写同一根键仍受代理存储无事务能力的限制。
+
+`resolveSettings(stored, definition)` 是可选的 GET 解析器，用来按模块既有规则合并 database、argument、持久化值。默认只返回持久化覆盖值，控件缺值时使用 BoxJS `val`。本包不修改插件原有的配置优先级；删除后不重新计算 resolver，而是在下次进入/刷新时重新读取。
+
+## BoxJS 范围
+
+支持 settings 数组、单个 app 的 `settings`、订阅的 `apps[].settings`；控件类型支持 boolean、selects、checkboxes、text、textarea、number。不执行 BoxJS 脚本或 HTML。
+
+设置 ID 必须为 `@存储根.模块.子路径.键`。同一模块使用一个存储根，字段路径不得重复或父子重叠。为了用一次 GET 获取设置，字段必须具有模块根以下的公共父路径，例如 `Enhanced.Settings` 或 `Weather.Preferences`；公共路径自动计算，不固定为 Settings。不满足条件或遇到不支持的控件会报错。
+
+## 打包与示例
+
+```sh
+npm ci --registry=https://registry.npmjs.org/ --@nsnanocat:registry=https://registry.npmjs.org/
+npm run build
+npm run check
+npm run apifox:generate
+node scripts/generate-apifox.mjs --check
+npm pack --dry-run
+```
+
+构建生成可直接加载的 `dist/preference-panes.mjs` 和代理 IIFE `dist/preference-panes.request.js`，公共样式位于 `browser/panel.css`。代理包包括 util 的平台适配和 `@nsnanocat/url`，不依赖 Node 内置模块。
+
+[Surge 模板](examples/surge.sgmodule)使用原生 Map Local 提供静态资源，http-request 提供持久化 API。模板中的域名均为占位，尚未部署；需要把源码资源和 dist 产物发布到自己的资源地址。其 `argument` 只配置 `origin` 和 `configURL`，不会固化字段。Map Local 下载缓存的更新时机由代理管理；浏览器 no-store 不会强制 Surge 更新资源缓存。配置 Mock 与脚本 configURL 应引用同一版本的 BoxJS。
+
+Quantumult X 等不能通过模板传递 `$argument` 的平台，需要在构建入口注入这两个地址参数，再打包同一通用执行端；本仓库没有声称该 Surge 模板可直接安装到其它代理。隔离测试覆盖 Surge/QX 宿主 API，尚未在用户设备上安装验收。
+
+## 接口文档与发布
+
+- [完整请求、返回与缓存时序说明](apifox/guide.md)
+- [Apifox 原生 JSON](apifox/preference-panes.apifox.json)
+- [Apifox 项目](https://app.apifox.com/project/8803052)、[Git 数据源绑定记录](apifox/sync.md)
+
+main/dev 普通推送与手动 CI 只验证并生成候选 tgz；两套 v* tag workflow 分别发布 npm 与 GitHub Packages。首版拟定为 `0.1.0`，发布步骤、首次 npm 注册与 Trusted Publisher 配置见 [RELEASING.md](RELEASING.md)。Enhanced 可先用候选 tgz 验证，正式依赖及 lockfile 必须在 registry 首发成功后生成。

package/browser/client.mjs

@@ -0,0 +1,112 @@
+import { Lodash as _ } from "@nsnanocat/util/polyfill/Lodash.mjs";
+import { normalizeBoxJs, normalizeStoredValue, validValue } from "../lib/boxjs.mjs";
+import { parseSettingsPath } from "../lib/settings-path.mjs";
+
+/**
+ * 创建页面会话缓存；打开时重读，选项操作仅在 HTTP 200 后更新缓存。
+ * Create a page-session cache; reload on open and mutate cache only after HTTP 200.
+ * @param {import("../types/browser.js").PreferencesClientOptions} options 请求与通知 / Requests and notifications.
+ * @returns {import("../types/browser.js").PreferencesClient} 通用客户端 / Generic client.
+ */
+export function createPreferencesClient({ fetch: request = globalThis.fetch.bind(globalThis), notify = () => {}, timeout = 10000 } = {}) {
+  const sessions = new Map();
+  async function send(path, method, body, signal, resource = false) {
+    const controller = new AbortController();
+    const abort = () => controller.abort();
+    if (signal?.aborted) abort();
+    signal?.addEventListener("abort", abort, { once: true });
+    const timer = setTimeout(abort, timeout);
+    try {
+      const response = await request(path, {
+        method,
+        credentials: "omit",
+        cache: "no-store",
+        signal: controller.signal,
+        headers: resource ? {} : { "X-Settings-Client": "1", ...(method === "POST" ? { "Content-Type": "application/json" } : {}) },
+        ...(method === "POST" ? { body: JSON.stringify(body) } : {}),
+      });
+      if (response.status !== 200) throw new Error(`HTTP ${response.status}`);
+      return response;
+    } finally {
+      clearTimeout(timer);
+      signal?.removeEventListener("abort", abort);
+    }
+  }
+  const configPath = (module) => {
+    if (typeof module !== "string" || !module) throw new TypeError("module is required");
+    const parts = parseSettingsPath(`https://example.invalid/api/${encodeURIComponent(module)}/`);
+    if (parts.length !== 1) throw new TypeError("Expected a module name");
+    return `/configs/${encodeURIComponent(module)}`;
+  };
+  const snapshot = (module) => {
+    const state = sessions.get(module);
+    if (!state?.definition) throw new Error("Open the module first");
+    return structuredClone({ definition: state.definition, values: state.values });
+  };
+  async function change(module, key, method, value) {
+    const state = sessions.get(module);
+    if (!state?.definition) throw new Error("Open the module first");
+    if (state.saving) throw new Error("A settings write is already in progress");
+    const field = state.definition.fields.find((field) => field.key === key);
+    state.saving = true;
+    try {
+      if (!field || (method === "POST" && !validValue(field, value))) throw new TypeError("Invalid setting value");
+      await send(`/api/${key.split(".").map(encodeURIComponent).join("/")}`, method, value);
+      if (sessions.get(module) === state) {
+        if (method === "DELETE") {
+          delete state.values[key];
+          if (Object.hasOwn(field, "defaultValue")) state.values[key] = structuredClone(field.defaultValue);
+        } else state.values[key] = structuredClone(value);
+      }
+      notify({ kind: "success", operation: method === "DELETE" ? "delete" : "write", module, key });
+    } catch (error) {
+      notify({ kind: "error", operation: method === "DELETE" ? "delete" : "write", module, key, message: error.message });
+      throw error;
+    } finally {
+      state.saving = false;
+    }
+  }
+  return {
+    async probe(module) {
+      try {
+        await send(configPath(module), "HEAD", undefined, undefined, true);
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    async open(module) {
+      const previous = sessions.get(module);
+      if (previous?.saving) throw new Error("Cannot refresh while saving");
+      previous?.controller.abort();
+      const state = { controller: new AbortController(), definition: null, values: {}, saving: false };
+      sessions.set(module, state);
+      try {
+        const resource = configPath(module);
+        const definition = normalizeBoxJs(await (await send(resource, "GET", undefined, state.controller.signal, true)).json(), module);
+        if (definition.settingsPath.length < 2) throw new TypeError("BoxJS fields must share a settings subtree below the module root");
+        const subtree = await (
+          await send(`/api/${definition.settingsPath.map(encodeURIComponent).join("/")}/`, "GET", undefined, state.controller.signal)
+        ).json();
+        if (!subtree || typeof subtree !== "object" || Array.isArray(subtree)) throw new TypeError("Expected a settings subtree object");
+        if (sessions.get(module) !== state) throw new Error("Module session was replaced");
+        state.definition = definition;
+        for (const field of definition.fields) {
+          const value = _.get(subtree, field.key.split(".").slice(definition.settingsPath.length), field.defaultValue);
+          if (value !== undefined) state.values[field.key] = normalizeStoredValue(field, value);
+        }
+        return snapshot(module);
+      } catch (error) {
+        if (sessions.get(module) === state) sessions.delete(module);
+        throw error;
+      }
+    },
+    snapshot,
+    leave(module) {
+      sessions.get(module)?.controller.abort();
+      sessions.delete(module);
+    },
+    set: (module, key, value) => change(module, key, "POST", value),
+    remove: (module, key) => change(module, key, "DELETE"),
+  };
+}

package/browser/index.mjs

@@ -0,0 +1,2 @@
+export { createPreferencesClient } from "./client.mjs";
+export { mountPreferencePanes } from "./panel.mjs";

package/browser/panel.css

@@ -0,0 +1,103 @@
+.pp-panel {
+  font:
+    15px / 1.5 system-ui,
+    sans-serif;
+  color: var(--pp-text, #18191c);
+  background: var(--pp-background, #f6f7f8);
+  max-width: 760px;
+  margin: auto;
+  position: relative;
+}
+.pp-panel * {
+  box-sizing: border-box;
+}
+.pp-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--pp-surface, #fff);
+}
+.pp-title {
+  font-size: 18px;
+  margin: 0;
+}
+.pp-viewport {
+  max-height: 80vh;
+  overflow: auto;
+  padding: 16px;
+}
+.pp-panel button {
+  font: inherit;
+  cursor: pointer;
+  border: 1px solid var(--pp-border, #d8dce0);
+  border-radius: 8px;
+  padding: 8px 12px;
+  color: inherit;
+  background: var(--pp-surface, #fff);
+}
+.pp-panel button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.pp-field {
+  margin: 0 0 16px;
+  padding: 16px;
+  border: 1px solid var(--pp-border, #d8dce0);
+  border-radius: 10px;
+  background: var(--pp-surface, #fff);
+  min-width: 0;
+}
+.pp-description {
+  font-size: 13px;
+  opacity: 0.7;
+  margin: 0 0 8px;
+}
+.pp-input:not([type="checkbox"]) {
+  width: 100%;
+  font: inherit;
+  padding: 8px;
+  border: 1px solid var(--pp-border, #d8dce0);
+  border-radius: 6px;
+  background: var(--pp-surface, #fff);
+  color: inherit;
+}
+.pp-choice {
+  display: block;
+  margin: 6px 0;
+}
+.pp-choice input {
+  margin-right: 8px;
+}
+.pp-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+.pp-toast {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px 18px;
+  border-radius: 10px;
+  background: #252525;
+  color: #fff;
+  max-width: 90vw;
+  z-index: 1000;
+}
+.pp-toast[data-kind="error"] {
+  background: #8d2424;
+}
+.pp-panel :focus-visible {
+  outline: 2px solid #008ac5;
+  outline-offset: 2px;
+}
+@media (prefers-color-scheme: dark) {
+  .pp-panel {
+    --pp-text: #eee;
+    --pp-background: #18191c;
+    --pp-surface: #25262a;
+    --pp-border: #47494e;
+  }
+}