rei-kit 1.0.2 → 2.0.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.
- package/README.md +100 -15
- package/dist/{GoogleButton-lxNEycyw.js → GoogleButton-DS-3rpUA.js} +6 -6
- package/dist/GoogleButton-DS-3rpUA.js.map +1 -0
- package/dist/{SettingsGroup-JsD19V81.js → SettingsGroup-BXkajKGl.js} +2 -2
- package/dist/{SettingsGroup-JsD19V81.js.map → SettingsGroup-BXkajKGl.js.map} +1 -1
- package/dist/{SettingsRow-3lPRJbBZ.js → SettingsRow-BXFn8tCk.js} +12 -12
- package/dist/SettingsRow-BXFn8tCk.js.map +1 -0
- package/dist/app.js +7 -7
- package/dist/app.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +130 -30
- package/dist/index.js.map +1 -1
- package/dist/materials/brutal.css +32 -0
- package/dist/materials/glass.css +104 -0
- package/dist/materials/quiet.css +39 -0
- package/dist/materials/soft.css +57 -0
- package/dist/materials.css +15 -0
- package/dist/palettes/palettes.generated.json.d.ts +475 -0
- package/dist/palettes.css +420 -0
- package/dist/pwa.js +4 -4
- package/dist/pwa.js.map +1 -1
- package/dist/shell/mobile.css +7 -7
- package/dist/shell/web.css +4 -4
- package/dist/styles.css +296 -426
- package/dist/tokens.css +254 -8
- package/dist/utils/appearance.d.ts +71 -0
- package/dist/web.js +9 -9
- package/dist/web.js.map +1 -1
- package/package.json +21 -5
- package/dist/GoogleButton-lxNEycyw.js.map +0 -1
- package/dist/SettingsRow-3lPRJbBZ.js.map +0 -1
|
@@ -0,0 +1,420 @@
|
|
|
1
|
+
/* rei-kit palettes. Generated by scripts/build-palettes.mjs — edit
|
|
2
|
+
* src/palettes/palettes.source.json and run `pnpm palettes`, never this file.
|
|
3
|
+
*
|
|
4
|
+
* Import after `tokens.css` and choose one with an attribute:
|
|
5
|
+
*
|
|
6
|
+
* <html data-palette="nord">
|
|
7
|
+
*
|
|
8
|
+
* or at runtime with `applyPalette('nord')` / `usePalette()`. Every palette
|
|
9
|
+
* has a light and a dark mode, and every text pairing in both has been
|
|
10
|
+
* measured against WCAG AA before it was allowed in this file. */
|
|
11
|
+
|
|
12
|
+
/* Rei — rei-kit */
|
|
13
|
+
[data-palette='rei'] {
|
|
14
|
+
--color-primary: #26667f;
|
|
15
|
+
--color-accent: #124170;
|
|
16
|
+
--color-positive: #67c090;
|
|
17
|
+
--color-negative: #c9463b;
|
|
18
|
+
--color-warning: #d89a3e;
|
|
19
|
+
--color-canvas: #f4faf8;
|
|
20
|
+
--color-surface: #ffffff;
|
|
21
|
+
--color-muted: #ddf4e7;
|
|
22
|
+
--color-ink: #0f2229;
|
|
23
|
+
--color-ink-soft: #5c7480;
|
|
24
|
+
--color-hair: #e1edea;
|
|
25
|
+
--color-on-primary: #ffffff;
|
|
26
|
+
--color-on-accent: #ffffff;
|
|
27
|
+
--color-on-positive: #07141a;
|
|
28
|
+
--color-on-negative: #ffffff;
|
|
29
|
+
--color-on-warning: #07141a;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.dark[data-palette='rei'],
|
|
33
|
+
.dark [data-palette='rei'] {
|
|
34
|
+
--color-primary: #5fb0c9;
|
|
35
|
+
--color-accent: #8cb8e0;
|
|
36
|
+
--color-positive: #67c090;
|
|
37
|
+
--color-negative: #f07a6f;
|
|
38
|
+
--color-warning: #e6ad58;
|
|
39
|
+
--color-canvas: #07141a;
|
|
40
|
+
--color-surface: #102630;
|
|
41
|
+
--color-muted: #12303a;
|
|
42
|
+
--color-ink: #e6f0ee;
|
|
43
|
+
--color-ink-soft: #8fa8b2;
|
|
44
|
+
--color-hair: #1c3945;
|
|
45
|
+
--color-on-primary: #07141a;
|
|
46
|
+
--color-on-accent: #07141a;
|
|
47
|
+
--color-on-positive: #07141a;
|
|
48
|
+
--color-on-negative: #07141a;
|
|
49
|
+
--color-on-warning: #07141a;
|
|
50
|
+
--shadow-color: #000000;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Nord — Arctic Ice Studio */
|
|
54
|
+
[data-palette='nord'] {
|
|
55
|
+
--color-primary: #5e81ac;
|
|
56
|
+
--color-accent: #b48ead;
|
|
57
|
+
--color-positive: #a3be8c;
|
|
58
|
+
--color-negative: #bf616a;
|
|
59
|
+
--color-warning: #ebcb8b;
|
|
60
|
+
--color-canvas: #eceff4;
|
|
61
|
+
--color-surface: #ffffff;
|
|
62
|
+
--color-muted: #e5e9f0;
|
|
63
|
+
--color-ink: #2e3440;
|
|
64
|
+
--color-ink-soft: #4c566a;
|
|
65
|
+
--color-hair: #d8dee9;
|
|
66
|
+
--color-on-primary: #111111;
|
|
67
|
+
--color-on-accent: #111111;
|
|
68
|
+
--color-on-positive: #2e3440;
|
|
69
|
+
--color-on-negative: #111111;
|
|
70
|
+
--color-on-warning: #2e3440;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.dark[data-palette='nord'],
|
|
74
|
+
.dark [data-palette='nord'] {
|
|
75
|
+
--color-primary: #88c0d0;
|
|
76
|
+
--color-accent: #b48ead;
|
|
77
|
+
--color-positive: #a3be8c;
|
|
78
|
+
--color-negative: #bf616a;
|
|
79
|
+
--color-warning: #ebcb8b;
|
|
80
|
+
--color-canvas: #2e3440;
|
|
81
|
+
--color-surface: #3b4252;
|
|
82
|
+
--color-muted: #434c5e;
|
|
83
|
+
--color-ink: #eceff4;
|
|
84
|
+
--color-ink-soft: #d8dee9;
|
|
85
|
+
--color-hair: #4c566a;
|
|
86
|
+
--color-on-primary: #2e3440;
|
|
87
|
+
--color-on-accent: #111111;
|
|
88
|
+
--color-on-positive: #2e3440;
|
|
89
|
+
--color-on-negative: #111111;
|
|
90
|
+
--color-on-warning: #2e3440;
|
|
91
|
+
--shadow-color: #000000;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Dracula — Dracula Theme */
|
|
95
|
+
[data-palette='dracula'] {
|
|
96
|
+
--color-primary: #644ac9;
|
|
97
|
+
--color-accent: #a3144d;
|
|
98
|
+
--color-positive: #14710a;
|
|
99
|
+
--color-negative: #cb3a2a;
|
|
100
|
+
--color-warning: #a34d14;
|
|
101
|
+
--color-canvas: #fffbeb;
|
|
102
|
+
--color-surface: #ffffff;
|
|
103
|
+
--color-muted: #f3eeda;
|
|
104
|
+
--color-ink: #1f1f1f;
|
|
105
|
+
--color-ink-soft: #635d4f;
|
|
106
|
+
--color-hair: #e6e0c8;
|
|
107
|
+
--color-on-primary: #ffffff;
|
|
108
|
+
--color-on-accent: #ffffff;
|
|
109
|
+
--color-on-positive: #ffffff;
|
|
110
|
+
--color-on-negative: #ffffff;
|
|
111
|
+
--color-on-warning: #ffffff;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.dark[data-palette='dracula'],
|
|
115
|
+
.dark [data-palette='dracula'] {
|
|
116
|
+
--color-primary: #bd93f9;
|
|
117
|
+
--color-accent: #ff79c6;
|
|
118
|
+
--color-positive: #50fa7b;
|
|
119
|
+
--color-negative: #ff5555;
|
|
120
|
+
--color-warning: #ffb86c;
|
|
121
|
+
--color-canvas: #21222c;
|
|
122
|
+
--color-surface: #282a36;
|
|
123
|
+
--color-muted: #343746;
|
|
124
|
+
--color-ink: #f8f8f2;
|
|
125
|
+
--color-ink-soft: #b6b9cf;
|
|
126
|
+
--color-hair: #44475a;
|
|
127
|
+
--color-on-primary: #1f1f1f;
|
|
128
|
+
--color-on-accent: #1f1f1f;
|
|
129
|
+
--color-on-positive: #1f1f1f;
|
|
130
|
+
--color-on-negative: #1f1f1f;
|
|
131
|
+
--color-on-warning: #1f1f1f;
|
|
132
|
+
--shadow-color: #000000;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* Catppuccin — Catppuccin */
|
|
136
|
+
[data-palette='catppuccin'] {
|
|
137
|
+
--color-primary: #8839ef;
|
|
138
|
+
--color-accent: #1e66f5;
|
|
139
|
+
--color-positive: #40a02b;
|
|
140
|
+
--color-negative: #d20f39;
|
|
141
|
+
--color-warning: #df8e1d;
|
|
142
|
+
--color-canvas: #eff1f5;
|
|
143
|
+
--color-surface: #ffffff;
|
|
144
|
+
--color-muted: #e6e9ef;
|
|
145
|
+
--color-ink: #4c4f69;
|
|
146
|
+
--color-ink-soft: #5c5f77;
|
|
147
|
+
--color-hair: #ccd0da;
|
|
148
|
+
--color-on-primary: #ffffff;
|
|
149
|
+
--color-on-accent: #ffffff;
|
|
150
|
+
--color-on-positive: #1e1e2e;
|
|
151
|
+
--color-on-negative: #ffffff;
|
|
152
|
+
--color-on-warning: #1e1e2e;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.dark[data-palette='catppuccin'],
|
|
156
|
+
.dark [data-palette='catppuccin'] {
|
|
157
|
+
--color-primary: #cba6f7;
|
|
158
|
+
--color-accent: #89b4fa;
|
|
159
|
+
--color-positive: #a6e3a1;
|
|
160
|
+
--color-negative: #f38ba8;
|
|
161
|
+
--color-warning: #f9e2af;
|
|
162
|
+
--color-canvas: #1e1e2e;
|
|
163
|
+
--color-surface: #24273a;
|
|
164
|
+
--color-muted: #313244;
|
|
165
|
+
--color-ink: #cdd6f4;
|
|
166
|
+
--color-ink-soft: #a6adc8;
|
|
167
|
+
--color-hair: #45475a;
|
|
168
|
+
--color-on-primary: #1e1e2e;
|
|
169
|
+
--color-on-accent: #1e1e2e;
|
|
170
|
+
--color-on-positive: #1e1e2e;
|
|
171
|
+
--color-on-negative: #1e1e2e;
|
|
172
|
+
--color-on-warning: #1e1e2e;
|
|
173
|
+
--shadow-color: #000000;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* Solarized — Ethan Schoonover */
|
|
177
|
+
[data-palette='solarized'] {
|
|
178
|
+
--color-primary: #268bd2;
|
|
179
|
+
--color-accent: #6a6fc0;
|
|
180
|
+
--color-positive: #859900;
|
|
181
|
+
--color-negative: #dc322f;
|
|
182
|
+
--color-warning: #b58900;
|
|
183
|
+
--color-canvas: #fdf6e3;
|
|
184
|
+
--color-surface: #fffcf3;
|
|
185
|
+
--color-muted: #eee8d5;
|
|
186
|
+
--color-ink: #073642;
|
|
187
|
+
--color-ink-soft: #586e75;
|
|
188
|
+
--color-hair: #e4dcc4;
|
|
189
|
+
--color-on-primary: #111111;
|
|
190
|
+
--color-on-accent: #ffffff;
|
|
191
|
+
--color-on-positive: #002b36;
|
|
192
|
+
--color-on-negative: #ffffff;
|
|
193
|
+
--color-on-warning: #002b36;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.dark[data-palette='solarized'],
|
|
197
|
+
.dark [data-palette='solarized'] {
|
|
198
|
+
--color-primary: #268bd2;
|
|
199
|
+
--color-accent: #6a6fc0;
|
|
200
|
+
--color-positive: #859900;
|
|
201
|
+
--color-negative: #dc322f;
|
|
202
|
+
--color-warning: #b58900;
|
|
203
|
+
--color-canvas: #002b36;
|
|
204
|
+
--color-surface: #073642;
|
|
205
|
+
--color-muted: #0b3f4c;
|
|
206
|
+
--color-ink: #eee8d5;
|
|
207
|
+
--color-ink-soft: #93a1a1;
|
|
208
|
+
--color-hair: #16505e;
|
|
209
|
+
--color-on-primary: #111111;
|
|
210
|
+
--color-on-accent: #ffffff;
|
|
211
|
+
--color-on-positive: #002b36;
|
|
212
|
+
--color-on-negative: #ffffff;
|
|
213
|
+
--color-on-warning: #002b36;
|
|
214
|
+
--shadow-color: #000000;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* Gruvbox — morhetz */
|
|
218
|
+
[data-palette='gruvbox'] {
|
|
219
|
+
--color-primary: #076678;
|
|
220
|
+
--color-accent: #8f3f71;
|
|
221
|
+
--color-positive: #79740e;
|
|
222
|
+
--color-negative: #9d0006;
|
|
223
|
+
--color-warning: #b57614;
|
|
224
|
+
--color-canvas: #fbf1c7;
|
|
225
|
+
--color-surface: #fdf7dd;
|
|
226
|
+
--color-muted: #ebdbb2;
|
|
227
|
+
--color-ink: #3c3836;
|
|
228
|
+
--color-ink-soft: #665c54;
|
|
229
|
+
--color-hair: #e2cfa4;
|
|
230
|
+
--color-on-primary: #ffffff;
|
|
231
|
+
--color-on-accent: #ffffff;
|
|
232
|
+
--color-on-positive: #ffffff;
|
|
233
|
+
--color-on-negative: #ffffff;
|
|
234
|
+
--color-on-warning: #111111;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.dark[data-palette='gruvbox'],
|
|
238
|
+
.dark [data-palette='gruvbox'] {
|
|
239
|
+
--color-primary: #83a598;
|
|
240
|
+
--color-accent: #d3869b;
|
|
241
|
+
--color-positive: #b8bb26;
|
|
242
|
+
--color-negative: #fb4934;
|
|
243
|
+
--color-warning: #fabd2f;
|
|
244
|
+
--color-canvas: #282828;
|
|
245
|
+
--color-surface: #32302f;
|
|
246
|
+
--color-muted: #3c3836;
|
|
247
|
+
--color-ink: #ebdbb2;
|
|
248
|
+
--color-ink-soft: #bdae93;
|
|
249
|
+
--color-hair: #504945;
|
|
250
|
+
--color-on-primary: #282828;
|
|
251
|
+
--color-on-accent: #282828;
|
|
252
|
+
--color-on-positive: #282828;
|
|
253
|
+
--color-on-negative: #111111;
|
|
254
|
+
--color-on-warning: #282828;
|
|
255
|
+
--shadow-color: #000000;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* Tokyo Night — enkia */
|
|
259
|
+
[data-palette='tokyo-night'] {
|
|
260
|
+
--color-primary: #2e7de9;
|
|
261
|
+
--color-accent: #9351ea;
|
|
262
|
+
--color-positive: #587539;
|
|
263
|
+
--color-negative: #f52a65;
|
|
264
|
+
--color-warning: #8c6c3e;
|
|
265
|
+
--color-canvas: #e1e2e7;
|
|
266
|
+
--color-surface: #f5f5f8;
|
|
267
|
+
--color-muted: #d5d6db;
|
|
268
|
+
--color-ink: #3760bf;
|
|
269
|
+
--color-ink-soft: #536297;
|
|
270
|
+
--color-hair: #c4c8da;
|
|
271
|
+
--color-on-primary: #111111;
|
|
272
|
+
--color-on-accent: #ffffff;
|
|
273
|
+
--color-on-positive: #ffffff;
|
|
274
|
+
--color-on-negative: #16161e;
|
|
275
|
+
--color-on-warning: #ffffff;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.dark[data-palette='tokyo-night'],
|
|
279
|
+
.dark [data-palette='tokyo-night'] {
|
|
280
|
+
--color-primary: #7aa2f7;
|
|
281
|
+
--color-accent: #bb9af7;
|
|
282
|
+
--color-positive: #9ece6a;
|
|
283
|
+
--color-negative: #f7768e;
|
|
284
|
+
--color-warning: #e0af68;
|
|
285
|
+
--color-canvas: #16161e;
|
|
286
|
+
--color-surface: #1a1b26;
|
|
287
|
+
--color-muted: #292e42;
|
|
288
|
+
--color-ink: #c0caf5;
|
|
289
|
+
--color-ink-soft: #a9b1d6;
|
|
290
|
+
--color-hair: #2f3549;
|
|
291
|
+
--color-on-primary: #16161e;
|
|
292
|
+
--color-on-accent: #16161e;
|
|
293
|
+
--color-on-positive: #16161e;
|
|
294
|
+
--color-on-negative: #16161e;
|
|
295
|
+
--color-on-warning: #16161e;
|
|
296
|
+
--shadow-color: #000000;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
/* Rosé Pine — Rosé Pine */
|
|
300
|
+
[data-palette='rose-pine'] {
|
|
301
|
+
--color-primary: #286983;
|
|
302
|
+
--color-accent: #907aa9;
|
|
303
|
+
--color-positive: #56949f;
|
|
304
|
+
--color-negative: #b4637a;
|
|
305
|
+
--color-warning: #ea9d34;
|
|
306
|
+
--color-canvas: #faf4ed;
|
|
307
|
+
--color-surface: #fffaf3;
|
|
308
|
+
--color-muted: #f2e9e1;
|
|
309
|
+
--color-ink: #575279;
|
|
310
|
+
--color-ink-soft: #716d89;
|
|
311
|
+
--color-hair: #dfdad9;
|
|
312
|
+
--color-on-primary: #ffffff;
|
|
313
|
+
--color-on-accent: #191724;
|
|
314
|
+
--color-on-positive: #191724;
|
|
315
|
+
--color-on-negative: #111111;
|
|
316
|
+
--color-on-warning: #191724;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.dark[data-palette='rose-pine'],
|
|
320
|
+
.dark [data-palette='rose-pine'] {
|
|
321
|
+
--color-primary: #9ccfd8;
|
|
322
|
+
--color-accent: #c4a7e7;
|
|
323
|
+
--color-positive: #31748f;
|
|
324
|
+
--color-negative: #eb6f92;
|
|
325
|
+
--color-warning: #f6c177;
|
|
326
|
+
--color-canvas: #191724;
|
|
327
|
+
--color-surface: #1f1d2e;
|
|
328
|
+
--color-muted: #26233a;
|
|
329
|
+
--color-ink: #e0def4;
|
|
330
|
+
--color-ink-soft: #908caa;
|
|
331
|
+
--color-hair: #403d52;
|
|
332
|
+
--color-on-primary: #191724;
|
|
333
|
+
--color-on-accent: #191724;
|
|
334
|
+
--color-on-positive: #ffffff;
|
|
335
|
+
--color-on-negative: #191724;
|
|
336
|
+
--color-on-warning: #191724;
|
|
337
|
+
--shadow-color: #000000;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
/* Sakura — rei-kit */
|
|
341
|
+
[data-palette='sakura'] {
|
|
342
|
+
--color-primary: #c2415d;
|
|
343
|
+
--color-accent: #7a3b4f;
|
|
344
|
+
--color-positive: #3f8f6a;
|
|
345
|
+
--color-negative: #c43d3d;
|
|
346
|
+
--color-warning: #c98a2a;
|
|
347
|
+
--color-canvas: #fdf6f7;
|
|
348
|
+
--color-surface: #ffffff;
|
|
349
|
+
--color-muted: #fbe4e8;
|
|
350
|
+
--color-ink: #2a1b1f;
|
|
351
|
+
--color-ink-soft: #6f5a5f;
|
|
352
|
+
--color-hair: #f0dde1;
|
|
353
|
+
--color-on-primary: #ffffff;
|
|
354
|
+
--color-on-accent: #ffffff;
|
|
355
|
+
--color-on-positive: #1a1013;
|
|
356
|
+
--color-on-negative: #ffffff;
|
|
357
|
+
--color-on-warning: #1a1013;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.dark[data-palette='sakura'],
|
|
361
|
+
.dark [data-palette='sakura'] {
|
|
362
|
+
--color-primary: #f08aa0;
|
|
363
|
+
--color-accent: #d7a1b3;
|
|
364
|
+
--color-positive: #6fc39a;
|
|
365
|
+
--color-negative: #f07a7a;
|
|
366
|
+
--color-warning: #e6b060;
|
|
367
|
+
--color-canvas: #1a1013;
|
|
368
|
+
--color-surface: #24171b;
|
|
369
|
+
--color-muted: #321f25;
|
|
370
|
+
--color-ink: #f6e8eb;
|
|
371
|
+
--color-ink-soft: #c3a9b0;
|
|
372
|
+
--color-hair: #3d2930;
|
|
373
|
+
--color-on-primary: #1a1013;
|
|
374
|
+
--color-on-accent: #1a1013;
|
|
375
|
+
--color-on-positive: #1a1013;
|
|
376
|
+
--color-on-negative: #1a1013;
|
|
377
|
+
--color-on-warning: #1a1013;
|
|
378
|
+
--shadow-color: #000000;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
/* Matcha — rei-kit */
|
|
382
|
+
[data-palette='matcha'] {
|
|
383
|
+
--color-primary: #5a7a2e;
|
|
384
|
+
--color-accent: #3d5a3a;
|
|
385
|
+
--color-positive: #4a8a4f;
|
|
386
|
+
--color-negative: #b8473a;
|
|
387
|
+
--color-warning: #b8862c;
|
|
388
|
+
--color-canvas: #f6f7f0;
|
|
389
|
+
--color-surface: #ffffff;
|
|
390
|
+
--color-muted: #e7ecd6;
|
|
391
|
+
--color-ink: #1e2418;
|
|
392
|
+
--color-ink-soft: #5b6450;
|
|
393
|
+
--color-hair: #e1e6d3;
|
|
394
|
+
--color-on-primary: #ffffff;
|
|
395
|
+
--color-on-accent: #ffffff;
|
|
396
|
+
--color-on-positive: #111111;
|
|
397
|
+
--color-on-negative: #ffffff;
|
|
398
|
+
--color-on-warning: #11140d;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.dark[data-palette='matcha'],
|
|
402
|
+
.dark [data-palette='matcha'] {
|
|
403
|
+
--color-primary: #a8c77a;
|
|
404
|
+
--color-accent: #8fb58a;
|
|
405
|
+
--color-positive: #7cc281;
|
|
406
|
+
--color-negative: #e8826f;
|
|
407
|
+
--color-warning: #e0b35c;
|
|
408
|
+
--color-canvas: #11140d;
|
|
409
|
+
--color-surface: #191d13;
|
|
410
|
+
--color-muted: #242a1b;
|
|
411
|
+
--color-ink: #eef1e6;
|
|
412
|
+
--color-ink-soft: #aab39e;
|
|
413
|
+
--color-hair: #2e3525;
|
|
414
|
+
--color-on-primary: #11140d;
|
|
415
|
+
--color-on-accent: #11140d;
|
|
416
|
+
--color-on-positive: #11140d;
|
|
417
|
+
--color-on-negative: #11140d;
|
|
418
|
+
--color-on-warning: #11140d;
|
|
419
|
+
--shadow-color: #000000;
|
|
420
|
+
}
|
package/dist/pwa.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { a as addDays, f as todayKey, i as needsIosInstall, r as isInstalled, t as SettingsGroup_default } from "./SettingsGroup-
|
|
1
|
+
import { a as addDays, f as todayKey, i as needsIosInstall, r as isInstalled, t as SettingsGroup_default } from "./SettingsGroup-BXkajKGl.js";
|
|
2
2
|
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
|
|
3
|
-
import { n as BaseButton_default, t as SettingsRow_default } from "./SettingsRow-
|
|
3
|
+
import { n as BaseButton_default, t as SettingsRow_default } from "./SettingsRow-BXFn8tCk.js";
|
|
4
4
|
import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
|
|
5
5
|
import { CheckCircle2, Download, RefreshCw, Share, X } from "lucide-vue-next";
|
|
6
6
|
//#region src/pwa/use-install.ts
|
|
@@ -171,7 +171,7 @@ var InstallPrompt_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
|
|
|
171
171
|
});
|
|
172
172
|
};
|
|
173
173
|
}
|
|
174
|
-
}), [["__scopeId", "data-v-
|
|
174
|
+
}), [["__scopeId", "data-v-552a4ac9"]]);
|
|
175
175
|
//#endregion
|
|
176
176
|
//#region src/pwa/InstallSettings.vue
|
|
177
177
|
var InstallSettings_default = /* @__PURE__ */ defineComponent({
|
|
@@ -277,7 +277,7 @@ var UpdatePrompt_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
|
|
|
277
277
|
});
|
|
278
278
|
};
|
|
279
279
|
}
|
|
280
|
-
}), [["__scopeId", "data-v-
|
|
280
|
+
}), [["__scopeId", "data-v-ac5bec25"]]);
|
|
281
281
|
//#endregion
|
|
282
282
|
export { InstallPrompt_default as InstallPrompt, InstallSettings_default as InstallSettings, UpdatePrompt_default as UpdatePrompt, useInstall, useSnooze, watchInstallability };
|
|
283
283
|
|
package/dist/pwa.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pwa.js","names":["$emit"],"sources":["../src/pwa/use-install.ts","../src/pwa/use-snooze.ts","../src/pwa/InstallPrompt.vue","../src/pwa/InstallPrompt.vue","../src/pwa/InstallSettings.vue","../src/pwa/InstallSettings.vue","../src/pwa/UpdatePrompt.vue","../src/pwa/UpdatePrompt.vue"],"sourcesContent":["import { computed, ref } from 'vue'\n\nimport { isInstalled, needsIosInstall } from '../utils/platform'\n\n/**\n * The event Chromium fires when it decides the app is installable.\n *\n * Not in lib.dom yet, and it is the only way to trigger the install sheet from\n * the app's own button rather than the browser's.\n */\ninterface BeforeInstallPromptEvent extends Event {\n prompt: () => Promise<void>\n userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>\n}\n\nconst deferred = ref<BeforeInstallPromptEvent | null>(null)\nconst installed = ref(false)\n\nlet listening = false\n\n/**\n * Starts listening for the install event.\n *\n * **Call this from the app's entry file, not from a component.**\n * `beforeinstallprompt` fires once, early, and only once per page load — a\n * listener attached when a component mounts has usually already missed it.\n *\n * It is a function rather than module-scope side effects so the package can be\n * imported on a server: the phone apps this came from ran it at module scope\n * and the kit spent a release learning why that is not free.\n *\n * @example\n * ```ts\n * // main.ts\n * import { watchInstallability } from 'rei-kit/pwa'\n * watchInstallability()\n * ```\n */\nexport function watchInstallability(): void {\n if (listening || typeof window === 'undefined') return\n\n listening = true\n installed.value = isInstalled()\n\n window.addEventListener('beforeinstallprompt', (event) => {\n // Without this the browser shows its own bar, and then the app's card and\n // the browser's bar are both on screen saying the same thing.\n event.preventDefault()\n deferred.value = event as BeforeInstallPromptEvent\n })\n\n window.addEventListener('appinstalled', () => {\n installed.value = true\n deferred.value = null\n })\n}\n\n/**\n * Adding the app to the Home Screen.\n *\n * Three states, because the platforms genuinely differ: Chromium hands over an\n * event that can be triggered from a button, Safari on iOS has no API at all\n * and needs the user walked through Share → Add to Home Screen, and everything\n * else can only be told that installing is possible.\n *\n * @example\n * ```ts\n * const install = useInstall()\n * if (install.canPrompt.value) await install.prompt()\n * ```\n */\nexport function useInstall() {\n async function prompt(): Promise<boolean> {\n const event = deferred.value\n if (!event) return false\n\n await event.prompt()\n const { outcome } = await event.userChoice\n\n // The event is single-use: Chromium refuses a second prompt() on it.\n deferred.value = null\n\n return outcome === 'accepted'\n }\n\n return {\n isInstalled: computed(() => installed.value),\n /** A button can open the real install sheet. */\n canPrompt: computed(() => !installed.value && deferred.value !== null),\n /** No API — the user has to be shown the Share menu. */\n needsManualSteps: computed(() => !installed.value && needsIosInstall()),\n prompt,\n }\n}\n","import { computed, ref } from 'vue'\n\nimport { addDays, todayKey } from '../utils/date'\n\n/**\n * A nudge that stops asking for a while after it is dismissed.\n *\n * Both phone apps had this inside their install card, identically: a date in\n * `localStorage`, compared against today. Pulled out because the install card\n * is not the only thing that should stop asking — a notification nudge wants\n * exactly the same behaviour, and had exactly the same code.\n *\n * Storage is wrapped in try/catch on both sides. A private window or a browser\n * set to block site data throws on access, and the honest failure there is a\n * nudge that reappears next session rather than one that crashes the screen it\n * is asking from.\n *\n * @param key - Where the date is kept. Namespace it to the app.\n * @param days - How long to stay quiet after a dismissal.\n */\nexport function useSnooze(key: string, days = 7) {\n const read = (): string => {\n try {\n return localStorage.getItem(key) ?? ''\n } catch {\n return ''\n }\n }\n\n const until = ref(read())\n\n return {\n /** False while the nudge is snoozed. */\n isOver: computed(() => todayKey() >= until.value),\n\n /** Stop asking for `days`. */\n snooze(): void {\n const next = addDays(todayKey(), days)\n until.value = next\n\n try {\n localStorage.setItem(key, next)\n } catch {\n // Storage blocked; it reappears next session rather than never.\n }\n },\n }\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport { useInstall } from './use-install'\nimport { useSnooze } from './use-snooze'\n\n/**\n * The card that offers to install the app, and remembers being turned down.\n *\n * Both phone apps had this, 111 lines, differing in a storage key and a colour.\n * What is here is the part that was the same: the three-way platform check, the\n * week-long snooze, and the shape.\n *\n * Every string is a prop. The kit does not know a language, and \"Add to Home\n * Screen\" is a sentence about a platform, not about this component.\n */\nconst {\n storageKey,\n title,\n body,\n action,\n later,\n iosTitle = '',\n iosBody = '',\n snoozeDays = 7,\n} = defineProps<{\n /** Where the dismissal is remembered. Namespace it: `hibi-install-nudge`. */\n storageKey: string\n title: string\n body: string\n /** The install button. Not shown on iOS, which has no API to call. */\n action: string\n later: string\n /** Shown instead of `title` where the user has to use the Share menu. */\n iosTitle?: string | undefined\n iosBody?: string | undefined\n snoozeDays?: number | undefined\n}>()\n\nconst { canPrompt, needsManualSteps, prompt } = useInstall()\nconst { isOver, snooze } = useSnooze(storageKey, snoozeDays)\n\nconst visible = computed(() => (canPrompt.value || needsManualSteps.value) && isOver.value)\n\nasync function install() {\n await prompt()\n\n // Accepted or dismissed, stop asking for a week. The prompt is what gets\n // tiring, not the answer.\n snooze()\n}\n</script>\n\n<template>\n <Transition name=\"install\">\n <section\n v-if=\"visible\"\n class=\"border-positive/25 bg-positive/5 rounded-card flex gap-3 border p-3.5\"\n >\n <span\n class=\"bg-positive/15 text-positive flex size-10 shrink-0 items-center justify-center rounded-xl\"\n aria-hidden=\"true\"\n >\n <component :is=\"needsManualSteps ? Share : Download\" class=\"size-5\" />\n </span>\n\n <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n <div>\n <p class=\"text-ink text-sm font-semibold\">\n {{ needsManualSteps && iosTitle ? iosTitle : title }}\n </p>\n <p class=\"text-ink-soft mt-0.5 text-xs leading-relaxed\">\n {{ needsManualSteps && iosBody ? iosBody : body }}\n </p>\n </div>\n\n <div class=\"flex items-center gap-2\">\n <!-- No button on iOS: Safari exposes no way to open the Share sheet\n from script, so a button here could only fail. -->\n <BaseButton\n v-if=\"canPrompt\"\n variant=\"positive\"\n pill\n size=\"xs\"\n class=\"font-semibold\"\n @click=\"install\"\n >\n {{ action }}\n </BaseButton>\n\n <BaseButton pill size=\"xs\" variant=\"quiet\" @click=\"snooze\">{{ later }}</BaseButton>\n </div>\n </div>\n </section>\n </Transition>\n</template>\n\n<style scoped>\n.install-enter-active,\n.install-leave-active {\n transition:\n opacity 200ms ease,\n transform 200ms ease;\n}\n\n.install-enter-from,\n.install-leave-to {\n opacity: 0;\n transform: translateY(-4px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .install-enter-from,\n .install-leave-to {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport { useInstall } from './use-install'\nimport { useSnooze } from './use-snooze'\n\n/**\n * The card that offers to install the app, and remembers being turned down.\n *\n * Both phone apps had this, 111 lines, differing in a storage key and a colour.\n * What is here is the part that was the same: the three-way platform check, the\n * week-long snooze, and the shape.\n *\n * Every string is a prop. The kit does not know a language, and \"Add to Home\n * Screen\" is a sentence about a platform, not about this component.\n */\nconst {\n storageKey,\n title,\n body,\n action,\n later,\n iosTitle = '',\n iosBody = '',\n snoozeDays = 7,\n} = defineProps<{\n /** Where the dismissal is remembered. Namespace it: `hibi-install-nudge`. */\n storageKey: string\n title: string\n body: string\n /** The install button. Not shown on iOS, which has no API to call. */\n action: string\n later: string\n /** Shown instead of `title` where the user has to use the Share menu. */\n iosTitle?: string | undefined\n iosBody?: string | undefined\n snoozeDays?: number | undefined\n}>()\n\nconst { canPrompt, needsManualSteps, prompt } = useInstall()\nconst { isOver, snooze } = useSnooze(storageKey, snoozeDays)\n\nconst visible = computed(() => (canPrompt.value || needsManualSteps.value) && isOver.value)\n\nasync function install() {\n await prompt()\n\n // Accepted or dismissed, stop asking for a week. The prompt is what gets\n // tiring, not the answer.\n snooze()\n}\n</script>\n\n<template>\n <Transition name=\"install\">\n <section\n v-if=\"visible\"\n class=\"border-positive/25 bg-positive/5 rounded-card flex gap-3 border p-3.5\"\n >\n <span\n class=\"bg-positive/15 text-positive flex size-10 shrink-0 items-center justify-center rounded-xl\"\n aria-hidden=\"true\"\n >\n <component :is=\"needsManualSteps ? Share : Download\" class=\"size-5\" />\n </span>\n\n <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n <div>\n <p class=\"text-ink text-sm font-semibold\">\n {{ needsManualSteps && iosTitle ? iosTitle : title }}\n </p>\n <p class=\"text-ink-soft mt-0.5 text-xs leading-relaxed\">\n {{ needsManualSteps && iosBody ? iosBody : body }}\n </p>\n </div>\n\n <div class=\"flex items-center gap-2\">\n <!-- No button on iOS: Safari exposes no way to open the Share sheet\n from script, so a button here could only fail. -->\n <BaseButton\n v-if=\"canPrompt\"\n variant=\"positive\"\n pill\n size=\"xs\"\n class=\"font-semibold\"\n @click=\"install\"\n >\n {{ action }}\n </BaseButton>\n\n <BaseButton pill size=\"xs\" variant=\"quiet\" @click=\"snooze\">{{ later }}</BaseButton>\n </div>\n </div>\n </section>\n </Transition>\n</template>\n\n<style scoped>\n.install-enter-active,\n.install-leave-active {\n transition:\n opacity 200ms ease,\n transform 200ms ease;\n}\n\n.install-enter-from,\n.install-leave-to {\n opacity: 0;\n transform: translateY(-4px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .install-enter-from,\n .install-leave-to {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { CheckCircle2, Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport SettingsGroup from '../components/SettingsGroup.vue'\nimport SettingsRow from '../components/SettingsRow.vue'\nimport { useInstall } from './use-install'\n\n/**\n * The way back to installing after the card has been dismissed.\n *\n * The card snoozes for a week; without this row, someone who tapped \"Not now\"\n * and then changed their mind would have nowhere to go. Both phone apps had it,\n * thirty-four lines, with no difference at all.\n *\n * It renders nothing where installing is neither possible nor already done — a\n * settings group that says \"you cannot install this\" is worse than silence.\n */\ndefineProps<{\n /** The group's heading. */\n title: string\n /** The row's label while installing is still possible. */\n label: string\n /** The row's label once it is installed. */\n installedLabel: string\n body: string\n /** Shown instead of `body` on iOS, where the user must use the Share menu. */\n iosBody: string\n /** The install button. Absent on iOS, which has no API to call. */\n action: string\n}>()\n\nconst { isInstalled, canPrompt, needsManualSteps, prompt } = useInstall()\n</script>\n\n<template>\n <SettingsGroup v-if=\"isInstalled || canPrompt || needsManualSteps\" :title=\"title\">\n <SettingsRow\n :label=\"isInstalled ? installedLabel : label\"\n :description=\"isInstalled ? '' : needsManualSteps ? iosBody : body\"\n :icon=\"isInstalled ? CheckCircle2 : needsManualSteps ? Share : Download\"\n stacked\n >\n <BaseButton v-if=\"canPrompt\" variant=\"primary\" size=\"sm\" class=\"self-start\" @click=\"prompt\">\n {{ action }}\n </BaseButton>\n </SettingsRow>\n </SettingsGroup>\n</template>\n","<script setup lang=\"ts\">\nimport { CheckCircle2, Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport SettingsGroup from '../components/SettingsGroup.vue'\nimport SettingsRow from '../components/SettingsRow.vue'\nimport { useInstall } from './use-install'\n\n/**\n * The way back to installing after the card has been dismissed.\n *\n * The card snoozes for a week; without this row, someone who tapped \"Not now\"\n * and then changed their mind would have nowhere to go. Both phone apps had it,\n * thirty-four lines, with no difference at all.\n *\n * It renders nothing where installing is neither possible nor already done — a\n * settings group that says \"you cannot install this\" is worse than silence.\n */\ndefineProps<{\n /** The group's heading. */\n title: string\n /** The row's label while installing is still possible. */\n label: string\n /** The row's label once it is installed. */\n installedLabel: string\n body: string\n /** Shown instead of `body` on iOS, where the user must use the Share menu. */\n iosBody: string\n /** The install button. Absent on iOS, which has no API to call. */\n action: string\n}>()\n\nconst { isInstalled, canPrompt, needsManualSteps, prompt } = useInstall()\n</script>\n\n<template>\n <SettingsGroup v-if=\"isInstalled || canPrompt || needsManualSteps\" :title=\"title\">\n <SettingsRow\n :label=\"isInstalled ? installedLabel : label\"\n :description=\"isInstalled ? '' : needsManualSteps ? iosBody : body\"\n :icon=\"isInstalled ? CheckCircle2 : needsManualSteps ? Share : Download\"\n stacked\n >\n <BaseButton v-if=\"canPrompt\" variant=\"primary\" size=\"sm\" class=\"self-start\" @click=\"prompt\">\n {{ action }}\n </BaseButton>\n </SettingsRow>\n </SettingsGroup>\n</template>\n","<script setup lang=\"ts\">\nimport { RefreshCw, X } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\n\n/**\n * The card that says a new version is waiting.\n *\n * `registerType: 'prompt'` means a new service worker waits rather than taking\n * over, and this is what asks whether to apply it. Asking rather than reloading\n * is the decision worth keeping: an automatic swap mid-sentence loses whatever\n * was being typed.\n *\n * **The service worker stays the app's.** `virtual:pwa-register/vue` is a\n * build-time module from `vite-plugin-pwa`, and a library cannot import one —\n * so the app owns `useRegisterSW` and hands the answer down as `open`. That\n * split is also honest: whether an update is waiting is the app's business,\n * and what the card looks like is this component's.\n *\n * @example\n * ```vue\n * <script setup>\n * const { needRefresh, updateServiceWorker } = useRegisterSW()\n * <\\/script>\n *\n * <UpdatePrompt\n * :open=\"needRefresh\"\n * :title=\"t('pwa.updateTitle')\"\n * :body=\"t('pwa.updateBody')\"\n * :action=\"t('pwa.reload')\"\n * :dismiss-label=\"t('pwa.later')\"\n * @update=\"updateServiceWorker(true)\"\n * @dismiss=\"needRefresh = false\"\n * />\n * ```\n */\ndefineProps<{\n open: boolean\n title: string\n body: string\n action: string\n /** The X's accessible name. An X on its own has none. */\n dismissLabel: string\n}>()\n\ndefineEmits<{ update: []; dismiss: [] }>()\n</script>\n\n<template>\n <Transition name=\"update\">\n <aside v-if=\"open\" class=\"update-card\" role=\"status\">\n <span class=\"update-icon\" aria-hidden=\"true\">\n <RefreshCw class=\"size-4\" />\n </span>\n\n <div class=\"min-w-0 flex-1\">\n <p class=\"text-ink text-sm font-semibold\">{{ title }}</p>\n <p class=\"text-ink-soft text-xs leading-snug\">{{ body }}</p>\n </div>\n\n <BaseButton\n variant=\"primary\"\n pill\n size=\"xs\"\n class=\"shrink-0 font-semibold\"\n @click=\"$emit('update')\"\n >\n {{ action }}\n </BaseButton>\n\n <BaseButton\n variant=\"quiet\"\n icon\n pill\n size=\"sm\"\n class=\"shrink-0\"\n :aria-label=\"dismissLabel\"\n @click=\"$emit('dismiss')\"\n >\n <X class=\"size-4\" />\n </BaseButton>\n </aside>\n </Transition>\n</template>\n\n<style scoped>\n/* Sits above the tab bar and the action button, because it outranks both — but\n absolutely inside its container, so on a desktop-sized shell it does not\n float off into the page. Give the shell `relative`. */\n.update-card {\n border-color: var(--color-hair);\n background: color-mix(in srgb, var(--color-surface) 95%, transparent);\n border-radius: var(--radius-card);\n position: absolute;\n left: 50%;\n z-index: 50;\n display: flex;\n width: 100%;\n max-width: 360px;\n align-items: center;\n gap: 0.75rem;\n border-width: 1px;\n padding: 0.75rem;\n backdrop-filter: blur(12px);\n box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);\n transform: translateX(-50%);\n bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.update-icon {\n background: color-mix(in srgb, var(--color-primary) 15%, transparent);\n color: var(--color-primary);\n display: flex;\n height: 2.25rem;\n width: 2.25rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.75rem;\n}\n\n.update-enter-active,\n.update-leave-active {\n transition:\n opacity 250ms ease,\n transform 250ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n\n.update-enter-from,\n.update-leave-to {\n opacity: 0;\n transform: translate(-50%, 1rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .update-enter-from,\n .update-leave-to {\n transform: translate(-50%, 0);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { RefreshCw, X } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\n\n/**\n * The card that says a new version is waiting.\n *\n * `registerType: 'prompt'` means a new service worker waits rather than taking\n * over, and this is what asks whether to apply it. Asking rather than reloading\n * is the decision worth keeping: an automatic swap mid-sentence loses whatever\n * was being typed.\n *\n * **The service worker stays the app's.** `virtual:pwa-register/vue` is a\n * build-time module from `vite-plugin-pwa`, and a library cannot import one —\n * so the app owns `useRegisterSW` and hands the answer down as `open`. That\n * split is also honest: whether an update is waiting is the app's business,\n * and what the card looks like is this component's.\n *\n * @example\n * ```vue\n * <script setup>\n * const { needRefresh, updateServiceWorker } = useRegisterSW()\n * <\\/script>\n *\n * <UpdatePrompt\n * :open=\"needRefresh\"\n * :title=\"t('pwa.updateTitle')\"\n * :body=\"t('pwa.updateBody')\"\n * :action=\"t('pwa.reload')\"\n * :dismiss-label=\"t('pwa.later')\"\n * @update=\"updateServiceWorker(true)\"\n * @dismiss=\"needRefresh = false\"\n * />\n * ```\n */\ndefineProps<{\n open: boolean\n title: string\n body: string\n action: string\n /** The X's accessible name. An X on its own has none. */\n dismissLabel: string\n}>()\n\ndefineEmits<{ update: []; dismiss: [] }>()\n</script>\n\n<template>\n <Transition name=\"update\">\n <aside v-if=\"open\" class=\"update-card\" role=\"status\">\n <span class=\"update-icon\" aria-hidden=\"true\">\n <RefreshCw class=\"size-4\" />\n </span>\n\n <div class=\"min-w-0 flex-1\">\n <p class=\"text-ink text-sm font-semibold\">{{ title }}</p>\n <p class=\"text-ink-soft text-xs leading-snug\">{{ body }}</p>\n </div>\n\n <BaseButton\n variant=\"primary\"\n pill\n size=\"xs\"\n class=\"shrink-0 font-semibold\"\n @click=\"$emit('update')\"\n >\n {{ action }}\n </BaseButton>\n\n <BaseButton\n variant=\"quiet\"\n icon\n pill\n size=\"sm\"\n class=\"shrink-0\"\n :aria-label=\"dismissLabel\"\n @click=\"$emit('dismiss')\"\n >\n <X class=\"size-4\" />\n </BaseButton>\n </aside>\n </Transition>\n</template>\n\n<style scoped>\n/* Sits above the tab bar and the action button, because it outranks both — but\n absolutely inside its container, so on a desktop-sized shell it does not\n float off into the page. Give the shell `relative`. */\n.update-card {\n border-color: var(--color-hair);\n background: color-mix(in srgb, var(--color-surface) 95%, transparent);\n border-radius: var(--radius-card);\n position: absolute;\n left: 50%;\n z-index: 50;\n display: flex;\n width: 100%;\n max-width: 360px;\n align-items: center;\n gap: 0.75rem;\n border-width: 1px;\n padding: 0.75rem;\n backdrop-filter: blur(12px);\n box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);\n transform: translateX(-50%);\n bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.update-icon {\n background: color-mix(in srgb, var(--color-primary) 15%, transparent);\n color: var(--color-primary);\n display: flex;\n height: 2.25rem;\n width: 2.25rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.75rem;\n}\n\n.update-enter-active,\n.update-leave-active {\n transition:\n opacity 250ms ease,\n transform 250ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n\n.update-enter-from,\n.update-leave-to {\n opacity: 0;\n transform: translate(-50%, 1rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .update-enter-from,\n .update-leave-to {\n transform: translate(-50%, 0);\n }\n}\n</style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pwa.js","names":["$emit"],"sources":["../src/pwa/use-install.ts","../src/pwa/use-snooze.ts","../src/pwa/InstallPrompt.vue","../src/pwa/InstallPrompt.vue","../src/pwa/InstallSettings.vue","../src/pwa/InstallSettings.vue","../src/pwa/UpdatePrompt.vue","../src/pwa/UpdatePrompt.vue"],"sourcesContent":["import { computed, ref } from 'vue'\n\nimport { isInstalled, needsIosInstall } from '../utils/platform'\n\n/**\n * The event Chromium fires when it decides the app is installable.\n *\n * Not in lib.dom yet, and it is the only way to trigger the install sheet from\n * the app's own button rather than the browser's.\n */\ninterface BeforeInstallPromptEvent extends Event {\n prompt: () => Promise<void>\n userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>\n}\n\nconst deferred = ref<BeforeInstallPromptEvent | null>(null)\nconst installed = ref(false)\n\nlet listening = false\n\n/**\n * Starts listening for the install event.\n *\n * **Call this from the app's entry file, not from a component.**\n * `beforeinstallprompt` fires once, early, and only once per page load — a\n * listener attached when a component mounts has usually already missed it.\n *\n * It is a function rather than module-scope side effects so the package can be\n * imported on a server: the phone apps this came from ran it at module scope\n * and the kit spent a release learning why that is not free.\n *\n * @example\n * ```ts\n * // main.ts\n * import { watchInstallability } from 'rei-kit/pwa'\n * watchInstallability()\n * ```\n */\nexport function watchInstallability(): void {\n if (listening || typeof window === 'undefined') return\n\n listening = true\n installed.value = isInstalled()\n\n window.addEventListener('beforeinstallprompt', (event) => {\n // Without this the browser shows its own bar, and then the app's card and\n // the browser's bar are both on screen saying the same thing.\n event.preventDefault()\n deferred.value = event as BeforeInstallPromptEvent\n })\n\n window.addEventListener('appinstalled', () => {\n installed.value = true\n deferred.value = null\n })\n}\n\n/**\n * Adding the app to the Home Screen.\n *\n * Three states, because the platforms genuinely differ: Chromium hands over an\n * event that can be triggered from a button, Safari on iOS has no API at all\n * and needs the user walked through Share → Add to Home Screen, and everything\n * else can only be told that installing is possible.\n *\n * @example\n * ```ts\n * const install = useInstall()\n * if (install.canPrompt.value) await install.prompt()\n * ```\n */\nexport function useInstall() {\n async function prompt(): Promise<boolean> {\n const event = deferred.value\n if (!event) return false\n\n await event.prompt()\n const { outcome } = await event.userChoice\n\n // The event is single-use: Chromium refuses a second prompt() on it.\n deferred.value = null\n\n return outcome === 'accepted'\n }\n\n return {\n isInstalled: computed(() => installed.value),\n /** A button can open the real install sheet. */\n canPrompt: computed(() => !installed.value && deferred.value !== null),\n /** No API — the user has to be shown the Share menu. */\n needsManualSteps: computed(() => !installed.value && needsIosInstall()),\n prompt,\n }\n}\n","import { computed, ref } from 'vue'\n\nimport { addDays, todayKey } from '../utils/date'\n\n/**\n * A nudge that stops asking for a while after it is dismissed.\n *\n * Both phone apps had this inside their install card, identically: a date in\n * `localStorage`, compared against today. Pulled out because the install card\n * is not the only thing that should stop asking — a notification nudge wants\n * exactly the same behaviour, and had exactly the same code.\n *\n * Storage is wrapped in try/catch on both sides. A private window or a browser\n * set to block site data throws on access, and the honest failure there is a\n * nudge that reappears next session rather than one that crashes the screen it\n * is asking from.\n *\n * @param key - Where the date is kept. Namespace it to the app.\n * @param days - How long to stay quiet after a dismissal.\n */\nexport function useSnooze(key: string, days = 7) {\n const read = (): string => {\n try {\n return localStorage.getItem(key) ?? ''\n } catch {\n return ''\n }\n }\n\n const until = ref(read())\n\n return {\n /** False while the nudge is snoozed. */\n isOver: computed(() => todayKey() >= until.value),\n\n /** Stop asking for `days`. */\n snooze(): void {\n const next = addDays(todayKey(), days)\n until.value = next\n\n try {\n localStorage.setItem(key, next)\n } catch {\n // Storage blocked; it reappears next session rather than never.\n }\n },\n }\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport { useInstall } from './use-install'\nimport { useSnooze } from './use-snooze'\n\n/**\n * The card that offers to install the app, and remembers being turned down.\n *\n * Both phone apps had this, 111 lines, differing in a storage key and a colour.\n * What is here is the part that was the same: the three-way platform check, the\n * week-long snooze, and the shape.\n *\n * Every string is a prop. The kit does not know a language, and \"Add to Home\n * Screen\" is a sentence about a platform, not about this component.\n */\nconst {\n storageKey,\n title,\n body,\n action,\n later,\n iosTitle = '',\n iosBody = '',\n snoozeDays = 7,\n} = defineProps<{\n /** Where the dismissal is remembered. Namespace it: `hibi-install-nudge`. */\n storageKey: string\n title: string\n body: string\n /** The install button. Not shown on iOS, which has no API to call. */\n action: string\n later: string\n /** Shown instead of `title` where the user has to use the Share menu. */\n iosTitle?: string | undefined\n iosBody?: string | undefined\n snoozeDays?: number | undefined\n}>()\n\nconst { canPrompt, needsManualSteps, prompt } = useInstall()\nconst { isOver, snooze } = useSnooze(storageKey, snoozeDays)\n\nconst visible = computed(() => (canPrompt.value || needsManualSteps.value) && isOver.value)\n\nasync function install() {\n await prompt()\n\n // Accepted or dismissed, stop asking for a week. The prompt is what gets\n // tiring, not the answer.\n snooze()\n}\n</script>\n\n<template>\n <Transition name=\"install\">\n <section\n v-if=\"visible\"\n class=\"border-positive/25 bg-positive/5 rounded-card flex gap-3 border p-3.5\"\n >\n <span\n class=\"bg-positive/15 text-positive flex size-10 shrink-0 items-center justify-center rounded-xl\"\n aria-hidden=\"true\"\n >\n <component :is=\"needsManualSteps ? Share : Download\" class=\"size-5\" />\n </span>\n\n <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n <div>\n <p class=\"text-ink text-sm font-semibold\">\n {{ needsManualSteps && iosTitle ? iosTitle : title }}\n </p>\n <p class=\"text-ink-soft mt-0.5 text-xs leading-relaxed\">\n {{ needsManualSteps && iosBody ? iosBody : body }}\n </p>\n </div>\n\n <div class=\"flex items-center gap-2\">\n <!-- No button on iOS: Safari exposes no way to open the Share sheet\n from script, so a button here could only fail. -->\n <BaseButton\n v-if=\"canPrompt\"\n variant=\"positive\"\n pill\n size=\"xs\"\n class=\"font-semibold\"\n @click=\"install\"\n >\n {{ action }}\n </BaseButton>\n\n <BaseButton pill size=\"xs\" variant=\"quiet\" @click=\"snooze\">{{ later }}</BaseButton>\n </div>\n </div>\n </section>\n </Transition>\n</template>\n\n<style scoped>\n.install-enter-active,\n.install-leave-active {\n transition:\n opacity var(--duration-base) ease,\n transform var(--duration-base) ease;\n}\n\n.install-enter-from,\n.install-leave-to {\n opacity: 0;\n transform: translateY(-4px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .install-enter-from,\n .install-leave-to {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport { useInstall } from './use-install'\nimport { useSnooze } from './use-snooze'\n\n/**\n * The card that offers to install the app, and remembers being turned down.\n *\n * Both phone apps had this, 111 lines, differing in a storage key and a colour.\n * What is here is the part that was the same: the three-way platform check, the\n * week-long snooze, and the shape.\n *\n * Every string is a prop. The kit does not know a language, and \"Add to Home\n * Screen\" is a sentence about a platform, not about this component.\n */\nconst {\n storageKey,\n title,\n body,\n action,\n later,\n iosTitle = '',\n iosBody = '',\n snoozeDays = 7,\n} = defineProps<{\n /** Where the dismissal is remembered. Namespace it: `hibi-install-nudge`. */\n storageKey: string\n title: string\n body: string\n /** The install button. Not shown on iOS, which has no API to call. */\n action: string\n later: string\n /** Shown instead of `title` where the user has to use the Share menu. */\n iosTitle?: string | undefined\n iosBody?: string | undefined\n snoozeDays?: number | undefined\n}>()\n\nconst { canPrompt, needsManualSteps, prompt } = useInstall()\nconst { isOver, snooze } = useSnooze(storageKey, snoozeDays)\n\nconst visible = computed(() => (canPrompt.value || needsManualSteps.value) && isOver.value)\n\nasync function install() {\n await prompt()\n\n // Accepted or dismissed, stop asking for a week. The prompt is what gets\n // tiring, not the answer.\n snooze()\n}\n</script>\n\n<template>\n <Transition name=\"install\">\n <section\n v-if=\"visible\"\n class=\"border-positive/25 bg-positive/5 rounded-card flex gap-3 border p-3.5\"\n >\n <span\n class=\"bg-positive/15 text-positive flex size-10 shrink-0 items-center justify-center rounded-xl\"\n aria-hidden=\"true\"\n >\n <component :is=\"needsManualSteps ? Share : Download\" class=\"size-5\" />\n </span>\n\n <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n <div>\n <p class=\"text-ink text-sm font-semibold\">\n {{ needsManualSteps && iosTitle ? iosTitle : title }}\n </p>\n <p class=\"text-ink-soft mt-0.5 text-xs leading-relaxed\">\n {{ needsManualSteps && iosBody ? iosBody : body }}\n </p>\n </div>\n\n <div class=\"flex items-center gap-2\">\n <!-- No button on iOS: Safari exposes no way to open the Share sheet\n from script, so a button here could only fail. -->\n <BaseButton\n v-if=\"canPrompt\"\n variant=\"positive\"\n pill\n size=\"xs\"\n class=\"font-semibold\"\n @click=\"install\"\n >\n {{ action }}\n </BaseButton>\n\n <BaseButton pill size=\"xs\" variant=\"quiet\" @click=\"snooze\">{{ later }}</BaseButton>\n </div>\n </div>\n </section>\n </Transition>\n</template>\n\n<style scoped>\n.install-enter-active,\n.install-leave-active {\n transition:\n opacity var(--duration-base) ease,\n transform var(--duration-base) ease;\n}\n\n.install-enter-from,\n.install-leave-to {\n opacity: 0;\n transform: translateY(-4px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .install-enter-from,\n .install-leave-to {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { CheckCircle2, Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport SettingsGroup from '../components/SettingsGroup.vue'\nimport SettingsRow from '../components/SettingsRow.vue'\nimport { useInstall } from './use-install'\n\n/**\n * The way back to installing after the card has been dismissed.\n *\n * The card snoozes for a week; without this row, someone who tapped \"Not now\"\n * and then changed their mind would have nowhere to go. Both phone apps had it,\n * thirty-four lines, with no difference at all.\n *\n * It renders nothing where installing is neither possible nor already done — a\n * settings group that says \"you cannot install this\" is worse than silence.\n */\ndefineProps<{\n /** The group's heading. */\n title: string\n /** The row's label while installing is still possible. */\n label: string\n /** The row's label once it is installed. */\n installedLabel: string\n body: string\n /** Shown instead of `body` on iOS, where the user must use the Share menu. */\n iosBody: string\n /** The install button. Absent on iOS, which has no API to call. */\n action: string\n}>()\n\nconst { isInstalled, canPrompt, needsManualSteps, prompt } = useInstall()\n</script>\n\n<template>\n <SettingsGroup v-if=\"isInstalled || canPrompt || needsManualSteps\" :title=\"title\">\n <SettingsRow\n :label=\"isInstalled ? installedLabel : label\"\n :description=\"isInstalled ? '' : needsManualSteps ? iosBody : body\"\n :icon=\"isInstalled ? CheckCircle2 : needsManualSteps ? Share : Download\"\n stacked\n >\n <BaseButton v-if=\"canPrompt\" variant=\"primary\" size=\"sm\" class=\"self-start\" @click=\"prompt\">\n {{ action }}\n </BaseButton>\n </SettingsRow>\n </SettingsGroup>\n</template>\n","<script setup lang=\"ts\">\nimport { CheckCircle2, Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport SettingsGroup from '../components/SettingsGroup.vue'\nimport SettingsRow from '../components/SettingsRow.vue'\nimport { useInstall } from './use-install'\n\n/**\n * The way back to installing after the card has been dismissed.\n *\n * The card snoozes for a week; without this row, someone who tapped \"Not now\"\n * and then changed their mind would have nowhere to go. Both phone apps had it,\n * thirty-four lines, with no difference at all.\n *\n * It renders nothing where installing is neither possible nor already done — a\n * settings group that says \"you cannot install this\" is worse than silence.\n */\ndefineProps<{\n /** The group's heading. */\n title: string\n /** The row's label while installing is still possible. */\n label: string\n /** The row's label once it is installed. */\n installedLabel: string\n body: string\n /** Shown instead of `body` on iOS, where the user must use the Share menu. */\n iosBody: string\n /** The install button. Absent on iOS, which has no API to call. */\n action: string\n}>()\n\nconst { isInstalled, canPrompt, needsManualSteps, prompt } = useInstall()\n</script>\n\n<template>\n <SettingsGroup v-if=\"isInstalled || canPrompt || needsManualSteps\" :title=\"title\">\n <SettingsRow\n :label=\"isInstalled ? installedLabel : label\"\n :description=\"isInstalled ? '' : needsManualSteps ? iosBody : body\"\n :icon=\"isInstalled ? CheckCircle2 : needsManualSteps ? Share : Download\"\n stacked\n >\n <BaseButton v-if=\"canPrompt\" variant=\"primary\" size=\"sm\" class=\"self-start\" @click=\"prompt\">\n {{ action }}\n </BaseButton>\n </SettingsRow>\n </SettingsGroup>\n</template>\n","<script setup lang=\"ts\">\nimport { RefreshCw, X } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\n\n/**\n * The card that says a new version is waiting.\n *\n * `registerType: 'prompt'` means a new service worker waits rather than taking\n * over, and this is what asks whether to apply it. Asking rather than reloading\n * is the decision worth keeping: an automatic swap mid-sentence loses whatever\n * was being typed.\n *\n * **The service worker stays the app's.** `virtual:pwa-register/vue` is a\n * build-time module from `vite-plugin-pwa`, and a library cannot import one —\n * so the app owns `useRegisterSW` and hands the answer down as `open`. That\n * split is also honest: whether an update is waiting is the app's business,\n * and what the card looks like is this component's.\n *\n * @example\n * ```vue\n * <script setup>\n * const { needRefresh, updateServiceWorker } = useRegisterSW()\n * <\\/script>\n *\n * <UpdatePrompt\n * :open=\"needRefresh\"\n * :title=\"t('pwa.updateTitle')\"\n * :body=\"t('pwa.updateBody')\"\n * :action=\"t('pwa.reload')\"\n * :dismiss-label=\"t('pwa.later')\"\n * @update=\"updateServiceWorker(true)\"\n * @dismiss=\"needRefresh = false\"\n * />\n * ```\n */\ndefineProps<{\n open: boolean\n title: string\n body: string\n action: string\n /** The X's accessible name. An X on its own has none. */\n dismissLabel: string\n}>()\n\ndefineEmits<{ update: []; dismiss: [] }>()\n</script>\n\n<template>\n <Transition name=\"update\">\n <aside v-if=\"open\" class=\"update-card\" role=\"status\">\n <span class=\"update-icon\" aria-hidden=\"true\">\n <RefreshCw class=\"size-4\" />\n </span>\n\n <div class=\"min-w-0 flex-1\">\n <p class=\"text-ink text-sm font-semibold\">{{ title }}</p>\n <p class=\"text-ink-soft text-xs leading-snug\">{{ body }}</p>\n </div>\n\n <BaseButton\n variant=\"primary\"\n pill\n size=\"xs\"\n class=\"shrink-0 font-semibold\"\n @click=\"$emit('update')\"\n >\n {{ action }}\n </BaseButton>\n\n <BaseButton\n variant=\"quiet\"\n icon\n pill\n size=\"sm\"\n class=\"shrink-0\"\n :aria-label=\"dismissLabel\"\n @click=\"$emit('dismiss')\"\n >\n <X class=\"size-4\" />\n </BaseButton>\n </aside>\n </Transition>\n</template>\n\n<style scoped>\n/* Sits above the tab bar and the action button, because it outranks both — but\n absolutely inside its container, so on a desktop-sized shell it does not\n float off into the page. Give the shell `relative`. */\n.update-card {\n border-color: var(--color-hair);\n background: color-mix(in srgb, var(--color-surface) 95%, transparent);\n border-radius: var(--radius-card);\n position: absolute;\n left: 50%;\n z-index: 50;\n display: flex;\n width: 100%;\n max-width: 360px;\n align-items: center;\n gap: 0.75rem;\n border-width: 1px;\n padding: 0.75rem;\n backdrop-filter: blur(12px);\n box-shadow: var(--shadow-overlay);\n transform: translateX(-50%);\n bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.update-icon {\n background: color-mix(in srgb, var(--color-primary) 15%, transparent);\n color: var(--color-primary);\n display: flex;\n height: 2.25rem;\n width: 2.25rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.75rem;\n}\n\n.update-enter-active,\n.update-leave-active {\n transition:\n opacity var(--duration-slow) ease,\n transform var(--duration-slow) var(--ease-sheet);\n}\n\n.update-enter-from,\n.update-leave-to {\n opacity: 0;\n transform: translate(-50%, 1rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .update-enter-from,\n .update-leave-to {\n transform: translate(-50%, 0);\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { RefreshCw, X } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\n\n/**\n * The card that says a new version is waiting.\n *\n * `registerType: 'prompt'` means a new service worker waits rather than taking\n * over, and this is what asks whether to apply it. Asking rather than reloading\n * is the decision worth keeping: an automatic swap mid-sentence loses whatever\n * was being typed.\n *\n * **The service worker stays the app's.** `virtual:pwa-register/vue` is a\n * build-time module from `vite-plugin-pwa`, and a library cannot import one —\n * so the app owns `useRegisterSW` and hands the answer down as `open`. That\n * split is also honest: whether an update is waiting is the app's business,\n * and what the card looks like is this component's.\n *\n * @example\n * ```vue\n * <script setup>\n * const { needRefresh, updateServiceWorker } = useRegisterSW()\n * <\\/script>\n *\n * <UpdatePrompt\n * :open=\"needRefresh\"\n * :title=\"t('pwa.updateTitle')\"\n * :body=\"t('pwa.updateBody')\"\n * :action=\"t('pwa.reload')\"\n * :dismiss-label=\"t('pwa.later')\"\n * @update=\"updateServiceWorker(true)\"\n * @dismiss=\"needRefresh = false\"\n * />\n * ```\n */\ndefineProps<{\n open: boolean\n title: string\n body: string\n action: string\n /** The X's accessible name. An X on its own has none. */\n dismissLabel: string\n}>()\n\ndefineEmits<{ update: []; dismiss: [] }>()\n</script>\n\n<template>\n <Transition name=\"update\">\n <aside v-if=\"open\" class=\"update-card\" role=\"status\">\n <span class=\"update-icon\" aria-hidden=\"true\">\n <RefreshCw class=\"size-4\" />\n </span>\n\n <div class=\"min-w-0 flex-1\">\n <p class=\"text-ink text-sm font-semibold\">{{ title }}</p>\n <p class=\"text-ink-soft text-xs leading-snug\">{{ body }}</p>\n </div>\n\n <BaseButton\n variant=\"primary\"\n pill\n size=\"xs\"\n class=\"shrink-0 font-semibold\"\n @click=\"$emit('update')\"\n >\n {{ action }}\n </BaseButton>\n\n <BaseButton\n variant=\"quiet\"\n icon\n pill\n size=\"sm\"\n class=\"shrink-0\"\n :aria-label=\"dismissLabel\"\n @click=\"$emit('dismiss')\"\n >\n <X class=\"size-4\" />\n </BaseButton>\n </aside>\n </Transition>\n</template>\n\n<style scoped>\n/* Sits above the tab bar and the action button, because it outranks both — but\n absolutely inside its container, so on a desktop-sized shell it does not\n float off into the page. Give the shell `relative`. */\n.update-card {\n border-color: var(--color-hair);\n background: color-mix(in srgb, var(--color-surface) 95%, transparent);\n border-radius: var(--radius-card);\n position: absolute;\n left: 50%;\n z-index: 50;\n display: flex;\n width: 100%;\n max-width: 360px;\n align-items: center;\n gap: 0.75rem;\n border-width: 1px;\n padding: 0.75rem;\n backdrop-filter: blur(12px);\n box-shadow: var(--shadow-overlay);\n transform: translateX(-50%);\n bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.update-icon {\n background: color-mix(in srgb, var(--color-primary) 15%, transparent);\n color: var(--color-primary);\n display: flex;\n height: 2.25rem;\n width: 2.25rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.75rem;\n}\n\n.update-enter-active,\n.update-leave-active {\n transition:\n opacity var(--duration-slow) ease,\n transform var(--duration-slow) var(--ease-sheet);\n}\n\n.update-enter-from,\n.update-leave-to {\n opacity: 0;\n transform: translate(-50%, 1rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .update-enter-from,\n .update-leave-to {\n transform: translate(-50%, 0);\n }\n}\n</style>\n"],"mappings":"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"}
|
package/dist/shell/mobile.css
CHANGED
|
@@ -47,9 +47,9 @@
|
|
|
47
47
|
will-change: transform, opacity;
|
|
48
48
|
/* iOS sheet curve: quick take-off, long soft landing. */
|
|
49
49
|
transition:
|
|
50
|
-
transform
|
|
51
|
-
opacity
|
|
52
|
-
filter
|
|
50
|
+
transform var(--duration-slow) var(--ease-sheet),
|
|
51
|
+
opacity var(--duration-slow) var(--ease-sheet),
|
|
52
|
+
filter var(--duration-slow) var(--ease-sheet);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
/* The incoming screen travels the full width; the outgoing one moves a
|
|
@@ -101,15 +101,15 @@
|
|
|
101
101
|
.tour-forward-enter-active,
|
|
102
102
|
.tour-backward-enter-active {
|
|
103
103
|
transition:
|
|
104
|
-
opacity
|
|
105
|
-
transform
|
|
104
|
+
opacity var(--duration-slow) ease-out,
|
|
105
|
+
transform var(--duration-slow) var(--ease-standard);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
.tour-forward-leave-active,
|
|
109
109
|
.tour-backward-leave-active {
|
|
110
110
|
transition:
|
|
111
|
-
opacity
|
|
112
|
-
transform
|
|
111
|
+
opacity var(--duration-fast) ease-in,
|
|
112
|
+
transform var(--duration-fast) ease-in;
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
.tour-forward-enter-from {
|
package/dist/shell/web.css
CHANGED
|
@@ -50,14 +50,14 @@
|
|
|
50
50
|
considered. */
|
|
51
51
|
.page-enter-active {
|
|
52
52
|
transition:
|
|
53
|
-
opacity
|
|
54
|
-
transform
|
|
53
|
+
opacity var(--duration-slow) ease-out,
|
|
54
|
+
transform var(--duration-slow) var(--ease-standard);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
.page-leave-active {
|
|
58
58
|
transition:
|
|
59
|
-
opacity
|
|
60
|
-
transform
|
|
59
|
+
opacity var(--duration-fast) ease-in,
|
|
60
|
+
transform var(--duration-fast) ease-in;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.page-enter-from {
|