@nsnanocat/preference-panes 0.6.0 → 0.7.1

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 (41) hide show
  1. package/README.md +60 -116
  2. package/dist/module/app.mjs +1170 -0
  3. package/dist/module/index.html +14 -0
  4. package/dist/module/navigation.mjs +160 -0
  5. package/dist/preference-panes.config.js +839 -813
  6. package/dist/preference-panes.mjs +1052 -825
  7. package/dist/preference-panes.proxy.js +1751 -2123
  8. package/package.json +66 -67
  9. package/src/BoxJS.mjs +86 -0
  10. package/src/Store.mjs +127 -0
  11. package/src/browser/Navigation.d.mts +43 -0
  12. package/src/browser/Navigation.mjs +158 -0
  13. package/src/browser/app.mjs +30 -148
  14. package/src/browser/client.d.mts +150 -0
  15. package/src/browser/client.mjs +191 -212
  16. package/src/browser/components.mjs +59 -0
  17. package/src/browser/index.d.ts +19 -152
  18. package/src/browser/index.mjs +60 -5
  19. package/src/browser/module.html +14 -0
  20. package/src/browser/panel.css +245 -223
  21. package/src/browser/panel.mjs +414 -514
  22. package/src/build.mjs +33 -0
  23. package/src/index.d.ts +227 -133
  24. package/src/index.mjs +3 -6
  25. package/src/lib/boxjs.mjs +77 -99
  26. package/src/lib/page-inputs.mjs +17 -0
  27. package/src/lib/response.mjs +16 -0
  28. package/src/lib/settings-path.mjs +10 -23
  29. package/src/proxy/config.mjs +6 -11
  30. package/src/proxy/handler.mjs +48 -27
  31. package/src/proxy/response.mjs +16 -0
  32. package/dist/preference-panes.request.js +0 -2126
  33. package/dist/settings/app.mjs +0 -1044
  34. package/dist/settings/home.css +0 -134
  35. package/dist/settings/index.html +0 -15
  36. package/dist/settings/panel.css +0 -325
  37. package/src/PreferencesHandler.mjs +0 -50
  38. package/src/SettingsHandler.mjs +0 -144
  39. package/src/browser/home.css +0 -134
  40. package/src/browser/site.html +0 -15
  41. package/src/proxy/request.mjs +0 -5
package/src/browser/panel.css CHANGED
@@ -1,325 +1,347 @@
1
1
  /* 分组列表沿用 Bilibili 设置页的行结构，样式限定在面板内。
2
2
  * Grouped rows follow the Bilibili settings layout, scoped to the panel. */
3
3
  .pp-panel {
4
- --pp-text: #18191c;
5
- --pp-background: #f6f7f8;
6
- --pp-surface: #fff;
7
- --pp-border: #e3e5e7;
8
- --pp-muted: #9499a0;
9
- --pp-accent: #fb7299;
10
- font:
11
- 15px / 1.5 -apple-system,
12
- BlinkMacSystemFont,
13
- "Segoe UI",
14
- sans-serif;
15
- color: var(--pp-text);
16
- background: var(--pp-background);
17
- position: relative;
18
- min-height: 100vh;
4
+ --pp-text: #18191c;
5
+ --pp-background: #f6f7f8;
6
+ --pp-surface: #fff;
7
+ --pp-border: #e3e5e7;
8
+ --pp-muted: #9499a0;
9
+ --pp-accent: #fb7299;
10
+ font:
11
+ 15px / 1.5 -apple-system,
12
+ BlinkMacSystemFont,
13
+ "Segoe UI",
14
+ sans-serif;
15
+ color: var(--pp-text);
16
+ background: var(--pp-background);
17
+ position: relative;
18
+ min-height: 100vh;
19
19
  }
20
20
  .pp-panel * {
21
- box-sizing: border-box;
22
- letter-spacing: 0;
21
+ box-sizing: border-box;
22
+ letter-spacing: 0;
23
23
  }
24
24
  .pp-header {
25
- height: calc(52px + env(safe-area-inset-top));
26
- padding: env(safe-area-inset-top) 12px 0;
27
- display: flex;
28
- align-items: center;
29
- background: var(--pp-surface);
30
- border-bottom: 1px solid var(--pp-border);
31
- position: relative;
25
+ height: calc(52px + env(safe-area-inset-top));
26
+ padding: env(safe-area-inset-top) 12px 0;
27
+ display: flex;
28
+ align-items: center;
29
+ background: var(--pp-surface);
30
+ border-bottom: 1px solid var(--pp-border);
31
+ position: sticky;
32
+ top: 0;
33
+ z-index: 1;
32
34
  }
33
35
  .pp-title {
34
- font-size: 17px;
35
- font-weight: 500;
36
- margin: 0;
37
- min-width: 0;
38
- overflow-wrap: anywhere;
39
- }
40
- .pp-header .pp-title {
41
- flex: 1;
42
- text-align: center;
36
+ font-size: 17px;
37
+ font-weight: 500;
38
+ margin: 0;
39
+ min-width: 0;
40
+ overflow-wrap: anywhere;
41
+ }
42
+ .pp-brand {
43
+ flex: 1;
44
+ min-width: 0;
45
+ display: flex;
46
+ align-items: center;
47
+ justify-content: center;
48
+ gap: 8px;
49
+ text-align: center;
50
+ }
51
+ .pp-brand-icon {
52
+ display: none;
53
+ flex: none;
54
+ width: 28px;
55
+ height: 28px;
56
+ }
57
+ .pp-brand-icon:not(:empty) {
58
+ display: block;
59
+ }
60
+ .pp-brand-icon img {
61
+ display: block;
62
+ width: 100%;
63
+ height: 100%;
64
+ object-fit: contain;
43
65
  }
44
66
  .pp-nav-spacer {
45
- width: 44px;
46
- flex: none;
67
+ width: 44px;
68
+ flex: none;
47
69
  }
48
70
  .pp-panel button {
49
- font: inherit;
50
- cursor: pointer;
51
- border: 0;
52
- background: none;
53
- color: inherit;
71
+ font: inherit;
72
+ cursor: pointer;
73
+ border: 0;
74
+ background: none;
75
+ color: inherit;
54
76
  }
55
77
  .pp-panel .pp-back {
56
- width: 44px;
57
- height: 44px;
58
- flex: none;
59
- font-size: 34px;
60
- line-height: 32px;
61
- padding: 0;
78
+ width: 44px;
79
+ height: 44px;
80
+ flex: none;
81
+ font-size: 34px;
82
+ line-height: 32px;
83
+ padding: 0;
62
84
  }
63
85
  .pp-panel button:disabled {
64
- opacity: 0.5;
65
- cursor: wait;
86
+ opacity: 0.5;
87
+ cursor: wait;
66
88
  }
67
89
  .pp-viewport {
68
- position: relative;
69
- height: calc(100vh - 52px - env(safe-area-inset-top));
70
- overflow: hidden;
90
+ position: relative;
91
+ height: calc(100vh - 52px - env(safe-area-inset-top));
92
+ overflow: hidden;
71
93
  }
72
94
  @supports (height: 100dvh) {
73
- .pp-viewport {
74
- height: calc(100dvh - 52px - env(safe-area-inset-top));
75
- }
95
+ .pp-viewport {
96
+ height: calc(100dvh - 52px - env(safe-area-inset-top));
97
+ }
76
98
  }
77
99
  .pp-fields,
78
100
  .pp-choice-page {
79
- position: absolute;
80
- inset: 0;
81
- overflow: auto;
82
- padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom));
83
- background: var(--pp-background);
101
+ position: absolute;
102
+ inset: 0;
103
+ overflow: auto;
104
+ padding: 12px max(16px, calc((100% - 688px) / 2)) calc(28px + env(safe-area-inset-bottom));
105
+ background: var(--pp-background);
84
106
  }
85
107
  .pp-panel .form-group {
86
- margin: 0 0 12px;
108
+ margin: 0 0 12px;
87
109
  }
88
110
  .pp-panel .form-group__title {
89
- font-size: 12px;
90
- line-height: 17px;
91
- font-weight: 400;
92
- color: var(--pp-muted);
93
- padding-left: 12px;
94
- margin: 12px 0 6px;
111
+ font-size: 12px;
112
+ line-height: 17px;
113
+ font-weight: 400;
114
+ color: var(--pp-muted);
115
+ padding-left: 12px;
116
+ margin: 12px 0 6px;
95
117
  }
96
118
  .pp-panel .form-group__row {
97
- border-radius: 8px;
98
- overflow: hidden;
99
- background: var(--pp-surface);
119
+ border-radius: 8px;
120
+ overflow: hidden;
121
+ background: var(--pp-surface);
100
122
  }
101
123
  .pp-panel .form-row {
102
- position: relative;
103
- display: flex;
104
- align-items: center;
105
- width: 100%;
106
- min-height: 46px;
107
- padding: 12px;
108
- border: 0;
109
- border-bottom: 1px solid var(--pp-border);
110
- background: var(--pp-surface);
111
- gap: 12px;
124
+ position: relative;
125
+ display: flex;
126
+ align-items: center;
127
+ width: 100%;
128
+ min-height: 46px;
129
+ padding: 12px;
130
+ border: 0;
131
+ border-bottom: 1px solid var(--pp-border);
132
+ background: var(--pp-surface);
133
+ gap: 12px;
112
134
  }
113
135
  .pp-panel .form-row:last-child {
114
- border-bottom: 0;
136
+ border-bottom: 0;
115
137
  }
116
138
  .pp-panel .form-row__text {
117
- flex: 1;
118
- min-width: 0;
119
- margin: 0;
120
- display: flex;
121
- flex-direction: column;
139
+ flex: 1;
140
+ min-width: 0;
141
+ margin: 0;
142
+ display: flex;
143
+ flex-direction: column;
122
144
  }
123
145
  .pp-panel .form-row__title {
124
- font-size: 15px;
125
- line-height: 22px;
126
- color: var(--pp-text);
127
- text-align: left;
146
+ font-size: 15px;
147
+ line-height: 22px;
148
+ color: var(--pp-text);
149
+ text-align: left;
128
150
  }
129
151
  .pp-panel .form-row__subtitle {
130
- font-size: 12px;
131
- line-height: 18px;
132
- color: var(--pp-muted);
133
- overflow-wrap: anywhere;
134
- margin-top: 2px;
152
+ font-size: 12px;
153
+ line-height: 18px;
154
+ color: var(--pp-muted);
155
+ overflow-wrap: anywhere;
156
+ margin-top: 2px;
135
157
  }
136
158
  .pp-choice-link {
137
- display: flex;
138
- align-items: center;
139
- justify-content: flex-end;
140
- gap: 8px;
141
- max-width: 45%;
142
- min-width: 44px;
143
- min-height: 44px;
144
- padding: 0;
145
- text-align: right;
146
- flex: 1;
159
+ display: flex;
160
+ align-items: center;
161
+ justify-content: flex-end;
162
+ gap: 8px;
163
+ max-width: 45%;
164
+ min-width: 44px;
165
+ min-height: 44px;
166
+ padding: 0;
167
+ text-align: right;
168
+ flex: 1;
147
169
  }
148
170
  .pp-summary {
149
- color: var(--pp-muted);
150
- font-size: 13px;
151
- line-height: 18px;
152
- display: -webkit-box;
153
- -webkit-line-clamp: 2;
154
- -webkit-box-orient: vertical;
155
- overflow: hidden;
156
- overflow-wrap: anywhere;
171
+ color: var(--pp-muted);
172
+ font-size: 13px;
173
+ line-height: 18px;
174
+ display: -webkit-box;
175
+ -webkit-line-clamp: 2;
176
+ -webkit-box-orient: vertical;
177
+ overflow: hidden;
178
+ overflow-wrap: anywhere;
157
179
  }
158
180
  .pp-chevron {
159
- color: var(--pp-muted);
160
- font-size: 22px;
161
- flex: none;
181
+ color: var(--pp-muted);
182
+ font-size: 22px;
183
+ flex: none;
162
184
  }
163
185
  .pp-input {
164
- font: inherit;
165
- color: var(--pp-text);
166
- background: var(--pp-surface);
167
- border: 1px solid var(--pp-border);
168
- border-radius: 6px;
169
- padding: 8px;
170
- min-width: 0;
171
- max-width: 45%;
172
- width: 45%;
186
+ font: inherit;
187
+ color: var(--pp-text);
188
+ background: var(--pp-surface);
189
+ border: 1px solid var(--pp-border);
190
+ border-radius: 6px;
191
+ padding: 8px;
192
+ min-width: 0;
193
+ max-width: 45%;
194
+ width: 45%;
173
195
  }
174
196
  select.pp-input {
175
- text-overflow: ellipsis;
176
- font-size: 13px;
197
+ text-overflow: ellipsis;
198
+ font-size: 13px;
177
199
  }
178
200
  .pp-panel .pp-multiline {
179
- display: block;
201
+ display: block;
180
202
  }
181
203
  .pp-multiline .pp-input {
182
- max-width: 100%;
183
- width: 100%;
184
- margin-top: 10px;
204
+ max-width: 100%;
205
+ width: 100%;
206
+ margin-top: 10px;
185
207
  }
186
208
  .pp-switch {
187
- appearance: none;
188
- -webkit-appearance: none;
189
- position: relative;
190
- flex: none;
191
- width: 32px;
192
- height: 20px;
193
- max-width: none;
194
- border: 0;
195
- border-radius: 15px;
196
- padding: 0;
197
- background: #c9ccd0;
198
- cursor: pointer;
199
- transition: background 0.2s;
209
+ appearance: none;
210
+ -webkit-appearance: none;
211
+ position: relative;
212
+ flex: none;
213
+ width: 32px;
214
+ height: 20px;
215
+ max-width: none;
216
+ border: 0;
217
+ border-radius: 15px;
218
+ padding: 0;
219
+ background: #c9ccd0;
220
+ cursor: pointer;
221
+ transition: background 0.2s;
200
222
  }
201
223
  .pp-switch::before {
202
- content: "";
203
- position: absolute;
204
- top: 3px;
205
- left: 3px;
206
- width: 14px;
207
- height: 14px;
208
- border-radius: 50%;
209
- background: white;
210
- transition: transform 0.2s;
224
+ content: "";
225
+ position: absolute;
226
+ top: 3px;
227
+ left: 3px;
228
+ width: 14px;
229
+ height: 14px;
230
+ border-radius: 50%;
231
+ background: white;
232
+ transition: transform 0.2s;
211
233
  }
212
234
  .pp-switch:checked {
213
- background: var(--pp-accent);
235
+ background: var(--pp-accent);
214
236
  }
215
237
  .pp-switch:checked::before {
216
- transform: translateX(12px);
238
+ transform: translateX(12px);
217
239
  }
218
240
  .pp-choice {
219
- justify-content: space-between;
220
- cursor: pointer;
241
+ justify-content: space-between;
242
+ cursor: pointer;
221
243
  }
222
244
  .pp-choice input {
223
- width: 20px;
224
- height: 20px;
225
- flex: none;
226
- accent-color: var(--pp-accent);
227
- margin: 0;
245
+ width: 20px;
246
+ height: 20px;
247
+ flex: none;
248
+ accent-color: var(--pp-accent);
249
+ margin: 0;
228
250
  }
229
251
  .pp-description {
230
- font-size: 12px;
231
- line-height: 1.6;
232
- color: var(--pp-muted);
233
- white-space: pre-wrap;
234
- overflow-wrap: anywhere;
252
+ font-size: 12px;
253
+ line-height: 1.6;
254
+ color: var(--pp-muted);
255
+ white-space: pre-wrap;
256
+ overflow-wrap: anywhere;
235
257
  }
236
258
  .pp-module-info {
237
- display: flex;
238
- gap: 12px;
239
- margin: 12px 0;
259
+ display: flex;
260
+ gap: 12px;
261
+ margin: 12px 0;
240
262
  }
241
263
  .pp-module-icon {
242
- width: 48px;
243
- height: 48px;
244
- object-fit: contain;
245
- flex: none;
264
+ width: 48px;
265
+ height: 48px;
266
+ object-fit: contain;
267
+ flex: none;
246
268
  }
247
269
  .pp-module-details {
248
- min-width: 0;
249
- overflow-wrap: anywhere;
270
+ min-width: 0;
271
+ overflow-wrap: anywhere;
250
272
  }
251
273
  .pp-module-source {
252
- color: inherit;
253
- text-decoration: underline;
274
+ color: inherit;
275
+ text-decoration: underline;
254
276
  }
255
277
  .pp-maintenance {
256
- margin-top: 24px;
278
+ margin-top: 24px;
257
279
  }
258
280
  .pp-actions {
259
- display: flex;
260
- flex-wrap: wrap;
261
- gap: 8px;
281
+ display: flex;
282
+ flex-wrap: wrap;
283
+ gap: 8px;
262
284
  }
263
285
  .pp-actions button,
264
286
  .pp-error button {
265
- min-height: 44px;
266
- padding: 8px 12px;
267
- border-radius: 6px;
268
- background: var(--pp-surface);
287
+ min-height: 44px;
288
+ padding: 8px 12px;
289
+ border-radius: 6px;
290
+ background: var(--pp-surface);
269
291
  }
270
292
  .pp-panel .pp-danger {
271
- color: #e45656;
293
+ color: #e45656;
272
294
  }
273
295
  .pp-cache {
274
- max-height: 320px;
275
- overflow: auto;
276
- white-space: pre-wrap;
277
- overflow-wrap: anywhere;
296
+ max-height: 320px;
297
+ overflow: auto;
298
+ white-space: pre-wrap;
299
+ overflow-wrap: anywhere;
278
300
  }
279
301
  .pp-toast {
280
- pointer-events: none;
281
- position: fixed;
282
- bottom: calc(30px + env(safe-area-inset-bottom));
283
- left: 50%;
284
- transform: translateX(-50%);
285
- max-width: 90vw;
286
- padding: 10px 16px;
287
- border-radius: 8px;
288
- background: #333e;
289
- color: white;
290
- font-size: 13px;
291
- z-index: 20;
302
+ pointer-events: none;
303
+ position: fixed;
304
+ bottom: calc(30px + env(safe-area-inset-bottom));
305
+ left: 50%;
306
+ transform: translateX(-50%);
307
+ max-width: 90vw;
308
+ padding: 10px 16px;
309
+ border-radius: 8px;
310
+ background: #333e;
311
+ color: white;
312
+ font-size: 13px;
313
+ z-index: 20;
292
314
  }
293
315
  .pp-toast[data-kind="error"] {
294
- background: #8d2424;
316
+ background: #8d2424;
295
317
  }
296
318
  .pp-panel :focus-visible {
297
- outline: 2px solid var(--pp-accent);
298
- outline-offset: -2px;
319
+ outline: 2px solid var(--pp-accent);
320
+ outline-offset: -2px;
299
321
  }
300
322
  @media (prefers-color-scheme: dark) {
301
- .pp-panel {
302
- --pp-text: #e3e5e7;
303
- --pp-background: #17181a;
304
- --pp-surface: #232427;
305
- --pp-border: #343538;
306
- }
323
+ .pp-panel {
324
+ --pp-text: #e3e5e7;
325
+ --pp-background: #17181a;
326
+ --pp-surface: #232427;
327
+ --pp-border: #343538;
328
+ }
307
329
  }
308
330
  :root[data-theme="dark"] .pp-panel {
309
- --pp-text: #e3e5e7;
310
- --pp-background: #17181a;
311
- --pp-surface: #232427;
312
- --pp-border: #343538;
331
+ --pp-text: #e3e5e7;
332
+ --pp-background: #17181a;
333
+ --pp-surface: #232427;
334
+ --pp-border: #343538;
313
335
  }
314
336
  :root[data-theme="light"] .pp-panel {
315
- --pp-text: #18191c;
316
- --pp-background: #f6f7f8;
317
- --pp-surface: #fff;
318
- --pp-border: #e3e5e7;
337
+ --pp-text: #18191c;
338
+ --pp-background: #f6f7f8;
339
+ --pp-surface: #fff;
340
+ --pp-border: #e3e5e7;
319
341
  }
320
342
  @media (prefers-reduced-motion: reduce) {
321
- .pp-panel .pp-switch,
322
- .pp-panel .pp-switch::before {
323
- transition: none;
324
- }
343
+ .pp-panel .pp-switch,
344
+ .pp-panel .pp-switch::before {
345
+ transition: none;
346
+ }
325
347
  }