npm - @nsnanocat/preference-panes - Versions diffs - 0.5.0 → 0.7.0 - Mend

@nsnanocat/preference-panes 0.5.0 → 0.7.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 (37) hide show

package/README.md +31 -124
package/dist/module/app.mjs +1030 -0
package/dist/module/index.html +14 -0
package/dist/preference-panes.config.js +842 -0
package/dist/preference-panes.mjs +935 -825
package/dist/preference-panes.proxy.js +1726 -2121
package/package.json +62 -66
package/src/BoxJS.mjs +86 -0
package/src/Store.mjs +127 -0
package/src/browser/app.mjs +24 -148
package/src/browser/client.d.mts +150 -0
package/src/browser/client.mjs +191 -212
package/src/browser/components.mjs +59 -0
package/src/browser/index.d.ts +19 -152
package/src/browser/index.mjs +60 -5
package/src/browser/module.html +14 -0
package/src/browser/panel.css +221 -221
package/src/browser/panel.mjs +455 -514
package/src/build.mjs +31 -0
package/src/index.d.ts +227 -133
package/src/index.mjs +3 -6
package/src/lib/boxjs.mjs +77 -99
package/src/lib/response.mjs +16 -0
package/src/lib/settings-path.mjs +10 -23
package/src/proxy/config.mjs +14 -0
package/src/proxy/handler.mjs +40 -27
package/src/proxy/response.mjs +16 -0
package/dist/preference-panes.request.js +0 -2124
package/dist/settings/app.mjs +0 -1044
package/dist/settings/home.css +0 -134
package/dist/settings/index.html +0 -15
package/dist/settings/panel.css +0 -325
package/src/PreferencesHandler.mjs +0 -50
package/src/SettingsHandler.mjs +0 -142
package/src/browser/home.css +0 -134
package/src/browser/site.html +0 -15
package/src/proxy/request.mjs +0 -5

package/dist/settings/home.css DELETED Viewed

@@ -1,134 +0,0 @@
-/* 通用菜单样式；项目可通过 JSON 引用官方组件样式。
- * Generic menu styles; projects may reference official component styles through JSON. */
-body {
-	margin: 0;
-	overflow-x: hidden;
-	font-family: system-ui, sans-serif;
-	background: #f6f7f8;
-	color: #18191c;
-}
-.pp-home {
-	max-width: 720px;
-	margin: auto;
-	padding: 32px 16px;
-}
-.brand-logo {
-	display: block;
-	width: 64px;
-	height: 64px;
-	margin: auto;
-}
-.brand-logo img {
-	display: block;
-	width: 100%;
-	height: 100%;
-	object-fit: contain;
-}
-.pp-home h1 {
-	text-align: center;
-	font-size: 26px;
-	margin: 12px 0 32px;
-}
-.self-panel {
-	padding: 12px;
-	background: #fff;
-	border-radius: 12px;
-}
-.self-panel .header {
-	font-size: 16px;
-	margin: 0;
-	padding: 0 6px;
-}
-.self-panel .container {
-	margin-top: 16px;
-}
-.self-panel .self-item {
-	width: 25%;
-	min-width: 0;
-	border: 0;
-	background: none;
-	padding: 12px 2px;
-	color: inherit;
-	cursor: pointer;
-}
-.self-panel .self-item .logo {
-	display: block;
-	width: 56px;
-	height: 56px;
-	padding: 10px;
-	box-sizing: border-box;
-	border-radius: 50%;
-	background: #f1f2f3;
-}
-.self-panel .logo img {
-	display: block;
-	width: 100%;
-	height: 100%;
-	object-fit: contain;
-}
-.self-panel .self-item.is-zh .name {
-	font-size: 13px;
-	line-height: 20px;
-	margin-top: 8px;
-	white-space: normal;
-}
-.module-status {
-	font-size: 11px;
-	line-height: 16px;
-	min-height: 16px;
-	color: #9499a0;
-}
-.self-item:disabled {
-	opacity: 0.45;
-	cursor: default;
-}
-.settings-note {
-	font-size: 13px;
-	line-height: 1.6;
-	color: #797f89;
-	padding: 16px 0;
-}
-@media (prefers-color-scheme: dark) {
-	body {
-		background: #101114;
-		color: #e3e5e7;
-	}
-	.self-panel {
-		background: #1c1d20;
-	}
-	.self-panel .self-item .logo {
-		background: #303136;
-	}
-}
-:root[data-theme="dark"] body {
-	background: #101114;
-	color: #e3e5e7;
-}
-:root[data-theme="dark"] .self-panel {
-	background: #1c1d20;
-}
-:root[data-theme="dark"] .self-panel .self-item .logo {
-	background: #303136;
-}
-:root[data-theme="light"] body {
-	background: #f6f7f8;
-	color: #18191c;
-}
-:root[data-theme="light"] .self-panel {
-	background: #fff;
-}
-:root[data-theme="light"] .self-panel .self-item .logo {
-	background: #f1f2f3;
-}
-.self-panel .scroll {
-	display: flex;
-}
-.self-panel .self-item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-.pp-site-error {
-	padding: 16px;
-}

package/dist/settings/index.html DELETED Viewed

@@ -1,15 +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">
-  <title>Preferences</title>
-  <link rel="stylesheet" href="/settings/assets/panel.css?v=0.5.0">
-  <link rel="stylesheet" href="/settings/assets/home.css?v=0.5.0">
-</head>
-<body>
-  <main id="preferences"></main>
-  <script type="module" src="/settings/assets/app.mjs?v=0.5.0"></script>
-</body>
-</html>

package/dist/settings/panel.css DELETED Viewed

@@ -1,325 +0,0 @@
-/* 分组列表沿用 Bilibili 设置页的行结构，样式限定在面板内。
- * Grouped rows follow the Bilibili settings layout, scoped to the panel. */
-.pp-panel {
-	--pp-text: #18191c;
-	--pp-background: #f6f7f8;
-	--pp-surface: #fff;
-	--pp-border: #e3e5e7;
-	--pp-muted: #9499a0;
-	--pp-accent: #fb7299;
-	font:
-		15px / 1.5 -apple-system,
-		BlinkMacSystemFont,
-		"Segoe UI",
-		sans-serif;
-	color: var(--pp-text);
-	background: var(--pp-background);
-	position: relative;
-	min-height: 100vh;
-}
-.pp-panel * {
-	box-sizing: border-box;
-	letter-spacing: 0;
-}
-.pp-header {
-	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;
-}
-.pp-title {
-	font-size: 17px;
-	font-weight: 500;
-	margin: 0;
-	min-width: 0;
-	overflow-wrap: anywhere;
-}
-.pp-header .pp-title {
-	flex: 1;
-	text-align: center;
-}
-.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;
-	height: calc(100vh - 52px - env(safe-area-inset-top));
-	overflow: hidden;
-}
-@supports (height: 100dvh) {
-	.pp-viewport {
-		height: calc(100dvh - 52px - env(safe-area-inset-top));
-	}
-}
-.pp-fields,
-.pp-choice-page {
-	position: absolute;
-	inset: 0;
-	overflow: auto;
-	padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom));
-	background: var(--pp-background);
-}
-.pp-panel .form-group {
-	margin: 0 0 12px;
-}
-.pp-panel .form-group__title {
-	font-size: 12px;
-	line-height: 17px;
-	font-weight: 400;
-	color: var(--pp-muted);
-	padding-left: 12px;
-	margin: 12px 0 6px;
-}
-.pp-panel .form-group__row {
-	border-radius: 8px;
-	overflow: hidden;
-	background: var(--pp-surface);
-}
-.pp-panel .form-row {
-	position: relative;
-	display: flex;
-	align-items: center;
-	width: 100%;
-	min-height: 46px;
-	padding: 12px;
-	border: 0;
-	border-bottom: 1px solid var(--pp-border);
-	background: var(--pp-surface);
-	gap: 12px;
-}
-.pp-panel .form-row:last-child {
-	border-bottom: 0;
-}
-.pp-panel .form-row__text {
-	flex: 1;
-	min-width: 0;
-	margin: 0;
-	display: flex;
-	flex-direction: column;
-}
-.pp-panel .form-row__title {
-	font-size: 15px;
-	line-height: 22px;
-	color: var(--pp-text);
-	text-align: left;
-}
-.pp-panel .form-row__subtitle {
-	font-size: 12px;
-	line-height: 18px;
-	color: var(--pp-muted);
-	overflow-wrap: anywhere;
-	margin-top: 2px;
-}
-.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-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-input {
-	font: inherit;
-	color: var(--pp-text);
-	background: var(--pp-surface);
-	border: 1px solid var(--pp-border);
-	border-radius: 6px;
-	padding: 8px;
-	min-width: 0;
-	max-width: 45%;
-	width: 45%;
-}
-select.pp-input {
-	text-overflow: ellipsis;
-	font-size: 13px;
-}
-.pp-panel .pp-multiline {
-	display: block;
-}
-.pp-multiline .pp-input {
-	max-width: 100%;
-	width: 100%;
-	margin-top: 10px;
-}
-.pp-switch {
-	appearance: none;
-	-webkit-appearance: none;
-	position: relative;
-	flex: none;
-	width: 32px;
-	height: 20px;
-	max-width: none;
-	border: 0;
-	border-radius: 15px;
-	padding: 0;
-	background: #c9ccd0;
-	cursor: pointer;
-	transition: background 0.2s;
-}
-.pp-switch::before {
-	content: "";
-	position: absolute;
-	top: 3px;
-	left: 3px;
-	width: 14px;
-	height: 14px;
-	border-radius: 50%;
-	background: white;
-	transition: transform 0.2s;
-}
-.pp-switch:checked {
-	background: var(--pp-accent);
-}
-.pp-switch:checked::before {
-	transform: translateX(12px);
-}
-.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-icon {
-	width: 48px;
-	height: 48px;
-	object-fit: contain;
-	flex: none;
-}
-.pp-module-details {
-	min-width: 0;
-	overflow-wrap: anywhere;
-}
-.pp-module-source {
-	color: inherit;
-	text-decoration: underline;
-}
-.pp-maintenance {
-	margin-top: 24px;
-}
-.pp-actions {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-}
-.pp-actions button,
-.pp-error button {
-	min-height: 44px;
-	padding: 8px 12px;
-	border-radius: 6px;
-	background: var(--pp-surface);
-}
-.pp-panel .pp-danger {
-	color: #e45656;
-}
-.pp-cache {
-	max-height: 320px;
-	overflow: auto;
-	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;
-}
-@media (prefers-color-scheme: dark) {
-	.pp-panel {
-		--pp-text: #e3e5e7;
-		--pp-background: #17181a;
-		--pp-surface: #232427;
-		--pp-border: #343538;
-	}
-}
-:root[data-theme="dark"] .pp-panel {
-	--pp-text: #e3e5e7;
-	--pp-background: #17181a;
-	--pp-surface: #232427;
-	--pp-border: #343538;
-}
-:root[data-theme="light"] .pp-panel {
-	--pp-text: #18191c;
-	--pp-background: #f6f7f8;
-	--pp-surface: #fff;
-	--pp-border: #e3e5e7;
-}
-@media (prefers-reduced-motion: reduce) {
-	.pp-panel .pp-switch,
-	.pp-panel .pp-switch::before {
-		transition: none;
-	}
-}

package/src/PreferencesHandler.mjs DELETED Viewed

@@ -1,50 +0,0 @@
-import { URL } from "@nsnanocat/url";
-import { fetch } from "@nsnanocat/util/polyfill/fetch";
-import { SettingsHandler } from "./SettingsHandler.mjs";
-/**
- * 统一处理存储 API 和无原生 Mock 平台的静态资源请求。
- * Handle storage APIs and static resources on hosts without native Mock support.
- */
-export class PreferencesHandler extends SettingsHandler {
-	#origin;
-	#resources;
-	/**
-	 * 根据安装 JSON 配置资源映射，不执行项目自定义代码。
-	 * Configure resource mappings from installation JSON without project-specific code.
-	 * @param {import("./index.js").PreferencesHandlerOptions} options 安装映射 / Installation mapping.
-	 */
-	constructor(options) {
-		super(options);
-		this.#origin = new URL(options.origin).origin;
-		this.#resources = options.resources.map(({ pattern, source, contentType }) => {
-			const url = new URL(source);
-			if (url.protocol !== "https:") throw new TypeError("Resource sources must use HTTPS");
-			if (typeof contentType !== "string" || /[\r\n]/.test(contentType)) throw new TypeError("Invalid resource content type");
-			return { pattern: new RegExp(pattern), source: url.href, contentType };
-		});
-	}
-	/**
-	 * API 先交给存储桥接，只有资源路由才发出下载请求。
-	 * Dispatch APIs to storage first; only resource routes perform downloads.
-	 * @param {import("./index.js").SettingsRequest} request 宿主请求 / Host request.
-	 * @returns {Promise<import("./index.js").SettingsResponse | undefined>} 响应或非接管请求 / Response or unhandled request.
-	 */
-	async handle(request) {
-		const api = await super.handle(request);
-		if (api) return api;
-		const url = new URL(request.url);
-		if (url.origin !== this.#origin) return;
-		const resource = this.#resources.find(resource => resource.pattern.test(url.pathname));
-		if (!resource) return;
-		switch (request.method) {
-			case "GET":
-			case "HEAD": {
-				const response = await fetch({ url: resource.source, method: "GET", headers: { "Cache-Control": "no-cache" }, timeout: 5000 });
-				return { status: response.status, headers: { "Content-Type": `${resource.contentType}; charset=utf-8`, "Cache-Control": "no-store" }, body: request.method === "HEAD" ? "" : response.body };
-			}
-			default:
-				return { status: 405, headers: { Allow: "HEAD, GET" }, body: "" };
-		}
-	}
-}

package/src/SettingsHandler.mjs DELETED Viewed

@@ -1,142 +0,0 @@
-import { URL } from "@nsnanocat/url";
-import { Lodash as _ } from "@nsnanocat/util/polyfill/Lodash.mjs";
-import { Storage } from "@nsnanocat/util/polyfill/Storage";
-import { parseSettingsPathname, validatePathParts } from "./lib/settings-path.mjs";
-/**
- * 按插件声明的根和模块桥接持久化存储，不下载或解析 BoxJS。
- * Bridge persistence within the installed root and module without downloading or parsing BoxJS.
- */
-export class SettingsHandler {
-	/** @type {string} 接管来源 / Handled origin. */
-	#origin;
-	/** @type {string} 安装配置中的存储根 / Storage root from installation config. */
-	#storageKey;
-	/** @type {string} 安装配置中的模块 / Module from installation config. */
-	#module;
-	/** @type {string} 页面标记头 / Page marker header. */
-	#requestHeader;
-	/**
-	 * 固定来源、存储根和模块，构造时不访问网络或存储。
-	 * Fix the origin, storage root and module without network or storage access at construction.
-	 * @param {import("./index.js").SettingsHandlerOptions} options 插件安装配置 / Plugin installation config.
-	 * @throws {TypeError} 安装配置无效 / Invalid installation config.
-	 */
-	constructor({ origin, storageKey, module, requestHeader = "X-Settings-Client" }) {
-		const target = new URL(origin);
-		if (target.protocol !== "https:" || target.pathname !== "/" || target.search || target.hash || target.username || target.password) throw new TypeError("origin must be an HTTPS origin");
-		if (typeof storageKey !== "string" || !storageKey || storageKey.startsWith("@")) throw new TypeError("storageKey must be a literal root key");
-		validatePathParts([module]);
-		if (!/^[a-z][a-z0-9-]*$/i.test(requestHeader)) throw new TypeError("Invalid requestHeader");
-		this.#origin = target.origin;
-		this.#storageKey = storageKey;
-		this.#module = module;
-		this.#requestHeader = requestHeader;
-	}
-	/**
-	 * GET 返回指定值，POST 替换指定值，DELETE 删除指定键或整个模块。
-	 * GET returns a value, POST replaces it, and DELETE removes a key or the entire module.
-	 * @param {import("./index.js").SettingsRequest} request 代理请求 / Proxy request.
-	 * @returns {Promise<import("./index.js").SettingsResponse | undefined>} 响应或非接管请求 / Response, or undefined for an unhandled request.
-	 */
-	async handle(request) {
-		const url = new URL(request.url);
-		if (url.origin !== this.#origin || !url.pathname.startsWith("/api/")) return;
-		const headers = { "Content-Type": "application/json; charset=utf-8", "Cache-Control": "no-store", "X-Content-Type-Options": "nosniff" };
-		const reply = (status, data) => ({ status, headers, body: request.method === "HEAD" ? "" : JSON.stringify(data) });
-		let parts;
-		try {
-			parts = parseSettingsPathname(url.pathname);
-		} catch (error) {
-			return reply(400, { error: error.message });
-		}
-		if (parts[0] !== this.#module) return reply(404, { error: "Module is not handled" });
-		const requestHeaders = Object.fromEntries(Object.entries(request.headers ?? {}).map(([key, value]) => [key.toLowerCase(), value]));
-		if (requestHeaders[this.#requestHeader.toLowerCase()] !== "1" || (requestHeaders.origin && requestHeaders.origin !== this.#origin)) return reply(403, { error: "Forbidden settings client" });
-		let value;
-		switch (request.method) {
-			case "HEAD":
-				return reply(200, undefined);
-			case "GET":
-			case "DELETE":
-				break;
-			case "POST":
-				if (requestHeaders["content-type"]?.split(";")[0].trim().toLowerCase() !== "application/json") return reply(415, { error: "Expected application/json" });
-				if (typeof request.body !== "string") return reply(400, { error: "Expected a JSON string body" });
-				if (request.body.length > 65536) return reply(413, { error: "Body exceeds 65536 UTF-16 code units" });
-				try {
-					value = JSON.parse(request.body);
-				} catch {
-					return reply(400, { error: "Invalid JSON" });
-				}
-				break;
-			default:
-				return { ...reply(405, { error: "Method not allowed" }), headers: { ...headers, Allow: "HEAD, GET, POST, DELETE" } };
-		}
-		try {
-			const root = Storage.getItem(this.#storageKey, {});
-			if (!isRecord(root)) throw new TypeError("stored root must be an object");
-			const parent = storageParent(root, parts, request.method === "POST");
-			const key = parts.at(-1);
-			switch (request.method) {
-				case "GET": {
-					const result = parent ? _.get(parent, [key]) : undefined;
-					return result === undefined ? reply(404, { error: "Stored path does not exist" }) : reply(200, result);
-				}
-				case "POST":
-					_.set(parent, [key], value);
-					break;
-				case "DELETE":
-					if (parent) _.unset(parent, [key]);
-					break;
-			}
-			if (!Storage.setItem(this.#storageKey, root)) throw new Error("Storage write failed");
-			return reply(200, request.method === "POST" ? { saved: true } : { deleted: true });
-		} catch (error) {
-			return reply(500, { error: error.message });
-		}
-	}
-}
-/**
- * 判断根节点是否为普通对象。
- * Determine whether a root node is a plain object.
- * @param {unknown} value 待检查值 / Value to inspect.
- * @returns {boolean} 是否为普通对象 / Whether this is a plain object.
- */
-function isRecord(value) {
-	return value !== null && typeof value === "object" && Object.getPrototypeOf(value) === Object.prototype;
-}
-/**
- * 遍历父路径，兼容旧存储中 JSON 字符串形式的中间节点。
- * Traverse parents, supporting legacy intermediate nodes serialized as JSON strings.
- * @param {Record<string, unknown>} root 存储根 / Storage root.
- * @param {string[]} parts 完整路径 / Complete path.
- * @param {boolean} create 是否创建缺失节点 / Whether to create missing parents.
- * @returns {object | undefined} 父节点，缺失且不创建时为 undefined / Parent, or undefined when absent and not creating.
- * @throws {TypeError} 无法继续遍历标量节点 / A scalar node cannot be traversed.
- */
-function storageParent(root, parts, create) {
-	let parent = root;
-	for (const part of parts.slice(0, -1)) {
-		let next = _.get(parent, [part]);
-		switch (typeof next) {
-			case "undefined":
-				if (!create) return;
-				next = {};
-				break;
-			case "string":
-				next = JSON.parse(next);
-				break;
-			default:
-				break;
-		}
-		if (!isRecord(next) && !Array.isArray(next)) throw new TypeError("Stored parent is not an object or array");
-		_.set(parent, [part], next);
-		parent = next;
-	}
-	return parent;
-}