@nsnanocat/preference-panes 0.6.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
  1. package/README.md +31 -127
  2. package/dist/module/app.mjs +1030 -0
  3. package/dist/module/index.html +14 -0
  4. package/dist/preference-panes.config.js +839 -813
  5. package/dist/preference-panes.mjs +935 -825
  6. package/dist/preference-panes.proxy.js +1726 -2123
  7. package/package.json +62 -67
  8. package/src/BoxJS.mjs +86 -0
  9. package/src/Store.mjs +127 -0
  10. package/src/browser/app.mjs +24 -148
  11. package/src/browser/client.d.mts +150 -0
  12. package/src/browser/client.mjs +191 -212
  13. package/src/browser/components.mjs +59 -0
  14. package/src/browser/index.d.ts +19 -152
  15. package/src/browser/index.mjs +60 -5
  16. package/src/browser/module.html +14 -0
  17. package/src/browser/panel.css +221 -221
  18. package/src/browser/panel.mjs +455 -514
  19. package/src/build.mjs +31 -0
  20. package/src/index.d.ts +227 -133
  21. package/src/index.mjs +3 -6
  22. package/src/lib/boxjs.mjs +77 -99
  23. package/src/lib/response.mjs +16 -0
  24. package/src/lib/settings-path.mjs +10 -23
  25. package/src/proxy/config.mjs +6 -11
  26. package/src/proxy/handler.mjs +40 -27
  27. package/src/proxy/response.mjs +16 -0
  28. package/dist/preference-panes.request.js +0 -2126
  29. package/dist/settings/app.mjs +0 -1044
  30. package/dist/settings/home.css +0 -134
  31. package/dist/settings/index.html +0 -15
  32. package/dist/settings/panel.css +0 -325
  33. package/src/PreferencesHandler.mjs +0 -50
  34. package/src/SettingsHandler.mjs +0 -144
  35. package/src/browser/home.css +0 -134
  36. package/src/browser/site.html +0 -15
  37. package/src/proxy/request.mjs +0 -5
package/src/browser/panel.css CHANGED
@@ -1,325 +1,325 @@
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: relative;
32
32
  }
33
33
  .pp-title {
34
- font-size: 17px;
35
- font-weight: 500;
36
- margin: 0;
37
- min-width: 0;
38
- overflow-wrap: anywhere;
34
+ font-size: 17px;
35
+ font-weight: 500;
36
+ margin: 0;
37
+ min-width: 0;
38
+ overflow-wrap: anywhere;
39
39
  }
40
40
  .pp-header .pp-title {
41
- flex: 1;
42
- text-align: center;
41
+ flex: 1;
42
+ text-align: center;
43
43
  }
44
44
  .pp-nav-spacer {
45
- width: 44px;
46
- flex: none;
45
+ width: 44px;
46
+ flex: none;
47
47
  }
48
48
  .pp-panel button {
49
- font: inherit;
50
- cursor: pointer;
51
- border: 0;
52
- background: none;
53
- color: inherit;
49
+ font: inherit;
50
+ cursor: pointer;
51
+ border: 0;
52
+ background: none;
53
+ color: inherit;
54
54
  }
55
55
  .pp-panel .pp-back {
56
- width: 44px;
57
- height: 44px;
58
- flex: none;
59
- font-size: 34px;
60
- line-height: 32px;
61
- padding: 0;
56
+ width: 44px;
57
+ height: 44px;
58
+ flex: none;
59
+ font-size: 34px;
60
+ line-height: 32px;
61
+ padding: 0;
62
62
  }
63
63
  .pp-panel button:disabled {
64
- opacity: 0.5;
65
- cursor: wait;
64
+ opacity: 0.5;
65
+ cursor: wait;
66
66
  }
67
67
  .pp-viewport {
68
- position: relative;
69
- height: calc(100vh - 52px - env(safe-area-inset-top));
70
- overflow: hidden;
68
+ position: relative;
69
+ height: calc(100vh - 52px - env(safe-area-inset-top));
70
+ overflow: hidden;
71
71
  }
72
72
  @supports (height: 100dvh) {
73
- .pp-viewport {
74
- height: calc(100dvh - 52px - env(safe-area-inset-top));
75
- }
73
+ .pp-viewport {
74
+ height: calc(100dvh - 52px - env(safe-area-inset-top));
75
+ }
76
76
  }
77
77
  .pp-fields,
78
78
  .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);
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);
84
84
  }
85
85
  .pp-panel .form-group {
86
- margin: 0 0 12px;
86
+ margin: 0 0 12px;
87
87
  }
88
88
  .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;
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;
95
95
  }
96
96
  .pp-panel .form-group__row {
97
- border-radius: 8px;
98
- overflow: hidden;
99
- background: var(--pp-surface);
97
+ border-radius: 8px;
98
+ overflow: hidden;
99
+ background: var(--pp-surface);
100
100
  }
101
101
  .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;
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;
112
112
  }
113
113
  .pp-panel .form-row:last-child {
114
- border-bottom: 0;
114
+ border-bottom: 0;
115
115
  }
116
116
  .pp-panel .form-row__text {
117
- flex: 1;
118
- min-width: 0;
119
- margin: 0;
120
- display: flex;
121
- flex-direction: column;
117
+ flex: 1;
118
+ min-width: 0;
119
+ margin: 0;
120
+ display: flex;
121
+ flex-direction: column;
122
122
  }
123
123
  .pp-panel .form-row__title {
124
- font-size: 15px;
125
- line-height: 22px;
126
- color: var(--pp-text);
127
- text-align: left;
124
+ font-size: 15px;
125
+ line-height: 22px;
126
+ color: var(--pp-text);
127
+ text-align: left;
128
128
  }
129
129
  .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;
130
+ font-size: 12px;
131
+ line-height: 18px;
132
+ color: var(--pp-muted);
133
+ overflow-wrap: anywhere;
134
+ margin-top: 2px;
135
135
  }
136
136
  .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;
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;
147
147
  }
148
148
  .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;
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;
157
157
  }
158
158
  .pp-chevron {
159
- color: var(--pp-muted);
160
- font-size: 22px;
161
- flex: none;
159
+ color: var(--pp-muted);
160
+ font-size: 22px;
161
+ flex: none;
162
162
  }
163
163
  .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%;
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%;
173
173
  }
174
174
  select.pp-input {
175
- text-overflow: ellipsis;
176
- font-size: 13px;
175
+ text-overflow: ellipsis;
176
+ font-size: 13px;
177
177
  }
178
178
  .pp-panel .pp-multiline {
179
- display: block;
179
+ display: block;
180
180
  }
181
181
  .pp-multiline .pp-input {
182
- max-width: 100%;
183
- width: 100%;
184
- margin-top: 10px;
182
+ max-width: 100%;
183
+ width: 100%;
184
+ margin-top: 10px;
185
185
  }
186
186
  .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;
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;
200
200
  }
201
201
  .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;
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;
211
211
  }
212
212
  .pp-switch:checked {
213
- background: var(--pp-accent);
213
+ background: var(--pp-accent);
214
214
  }
215
215
  .pp-switch:checked::before {
216
- transform: translateX(12px);
216
+ transform: translateX(12px);
217
217
  }
218
218
  .pp-choice {
219
- justify-content: space-between;
220
- cursor: pointer;
219
+ justify-content: space-between;
220
+ cursor: pointer;
221
221
  }
222
222
  .pp-choice input {
223
- width: 20px;
224
- height: 20px;
225
- flex: none;
226
- accent-color: var(--pp-accent);
227
- margin: 0;
223
+ width: 20px;
224
+ height: 20px;
225
+ flex: none;
226
+ accent-color: var(--pp-accent);
227
+ margin: 0;
228
228
  }
229
229
  .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;
230
+ font-size: 12px;
231
+ line-height: 1.6;
232
+ color: var(--pp-muted);
233
+ white-space: pre-wrap;
234
+ overflow-wrap: anywhere;
235
235
  }
236
236
  .pp-module-info {
237
- display: flex;
238
- gap: 12px;
239
- margin: 12px 0;
237
+ display: flex;
238
+ gap: 12px;
239
+ margin: 12px 0;
240
240
  }
241
241
  .pp-module-icon {
242
- width: 48px;
243
- height: 48px;
244
- object-fit: contain;
245
- flex: none;
242
+ width: 48px;
243
+ height: 48px;
244
+ object-fit: contain;
245
+ flex: none;
246
246
  }
247
247
  .pp-module-details {
248
- min-width: 0;
249
- overflow-wrap: anywhere;
248
+ min-width: 0;
249
+ overflow-wrap: anywhere;
250
250
  }
251
251
  .pp-module-source {
252
- color: inherit;
253
- text-decoration: underline;
252
+ color: inherit;
253
+ text-decoration: underline;
254
254
  }
255
255
  .pp-maintenance {
256
- margin-top: 24px;
256
+ margin-top: 24px;
257
257
  }
258
258
  .pp-actions {
259
- display: flex;
260
- flex-wrap: wrap;
261
- gap: 8px;
259
+ display: flex;
260
+ flex-wrap: wrap;
261
+ gap: 8px;
262
262
  }
263
263
  .pp-actions button,
264
264
  .pp-error button {
265
- min-height: 44px;
266
- padding: 8px 12px;
267
- border-radius: 6px;
268
- background: var(--pp-surface);
265
+ min-height: 44px;
266
+ padding: 8px 12px;
267
+ border-radius: 6px;
268
+ background: var(--pp-surface);
269
269
  }
270
270
  .pp-panel .pp-danger {
271
- color: #e45656;
271
+ color: #e45656;
272
272
  }
273
273
  .pp-cache {
274
- max-height: 320px;
275
- overflow: auto;
276
- white-space: pre-wrap;
277
- overflow-wrap: anywhere;
274
+ max-height: 320px;
275
+ overflow: auto;
276
+ white-space: pre-wrap;
277
+ overflow-wrap: anywhere;
278
278
  }
279
279
  .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;
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;
292
292
  }
293
293
  .pp-toast[data-kind="error"] {
294
- background: #8d2424;
294
+ background: #8d2424;
295
295
  }
296
296
  .pp-panel :focus-visible {
297
- outline: 2px solid var(--pp-accent);
298
- outline-offset: -2px;
297
+ outline: 2px solid var(--pp-accent);
298
+ outline-offset: -2px;
299
299
  }
300
300
  @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
- }
301
+ .pp-panel {
302
+ --pp-text: #e3e5e7;
303
+ --pp-background: #17181a;
304
+ --pp-surface: #232427;
305
+ --pp-border: #343538;
306
+ }
307
307
  }
308
308
  :root[data-theme="dark"] .pp-panel {
309
- --pp-text: #e3e5e7;
310
- --pp-background: #17181a;
311
- --pp-surface: #232427;
312
- --pp-border: #343538;
309
+ --pp-text: #e3e5e7;
310
+ --pp-background: #17181a;
311
+ --pp-surface: #232427;
312
+ --pp-border: #343538;
313
313
  }
314
314
  :root[data-theme="light"] .pp-panel {
315
- --pp-text: #18191c;
316
- --pp-background: #f6f7f8;
317
- --pp-surface: #fff;
318
- --pp-border: #e3e5e7;
315
+ --pp-text: #18191c;
316
+ --pp-background: #f6f7f8;
317
+ --pp-surface: #fff;
318
+ --pp-border: #e3e5e7;
319
319
  }
320
320
  @media (prefers-reduced-motion: reduce) {
321
- .pp-panel .pp-switch,
322
- .pp-panel .pp-switch::before {
323
- transition: none;
324
- }
321
+ .pp-panel .pp-switch,
322
+ .pp-panel .pp-switch::before {
323
+ transition: none;
324
+ }
325
325
  }