@wibly/ui-kit 0.1.1 → 0.1.3
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/CHANGELOG.md +6 -0
- package/package.json +3 -2
- package/src/components/camera-capture-modal.tsx +172 -0
- package/src/components/host-display-viewport.tsx +174 -0
- package/src/components/player-avatar-picker.tsx +222 -0
- package/src/components/player-avatar.tsx +82 -0
- package/src/components/player-roster.tsx +71 -0
- package/src/components/shell-brand-mark.tsx +33 -0
- package/src/components/shell-glass-toolbar.tsx +107 -0
- package/src/components/shell-menu-avatar.tsx +73 -0
- package/src/components/shell-session-frame.test.ts +10 -0
- package/src/components/shell-session-frame.tsx +76 -0
- package/src/index.ts +70 -0
- package/src/lib/host-canvas.test.ts +40 -0
- package/src/lib/host-canvas.ts +30 -0
- package/src/lib/host-mount.test.ts +31 -0
- package/src/lib/host-mount.ts +68 -0
- package/styles/wibly-shell-theme.css +88 -0
|
@@ -88,7 +88,13 @@
|
|
|
88
88
|
/* Legacy shell tokens (@platform/ui-kit backward compat) */
|
|
89
89
|
--color-surface: var(--background);
|
|
90
90
|
--color-surface-2: var(--card);
|
|
91
|
+
--color-foreground: var(--foreground);
|
|
92
|
+
--color-muted: var(--muted-foreground);
|
|
91
93
|
--color-muted-2: var(--muted-foreground);
|
|
94
|
+
--color-primary: var(--primary);
|
|
95
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
96
|
+
--color-border: var(--border);
|
|
97
|
+
--color-destructive: var(--destructive);
|
|
92
98
|
--color-success: oklch(0.62 0.17 155);
|
|
93
99
|
|
|
94
100
|
/* Consent dialog bridge (Portal parity) */
|
|
@@ -205,6 +211,88 @@
|
|
|
205
211
|
padding: 1.25rem;
|
|
206
212
|
}
|
|
207
213
|
|
|
214
|
+
/**
|
|
215
|
+
* Linked session mode (chunk B25) — TV Host + phone-aspect Player.
|
|
216
|
+
* Applied via `data-shell-mode="linked"` on the session root.
|
|
217
|
+
*/
|
|
218
|
+
[data-shell-mode='linked'] {
|
|
219
|
+
--background: oklch(0.14 0.03 280);
|
|
220
|
+
--foreground: oklch(0.97 0.01 280);
|
|
221
|
+
--card: oklch(0.18 0.035 280);
|
|
222
|
+
--card-foreground: oklch(0.97 0.01 280);
|
|
223
|
+
--popover: oklch(0.2 0.04 280);
|
|
224
|
+
--popover-foreground: oklch(0.97 0.01 280);
|
|
225
|
+
--primary: var(--sunbeam);
|
|
226
|
+
--primary-foreground: var(--ink);
|
|
227
|
+
--secondary: oklch(0.22 0.04 280);
|
|
228
|
+
--secondary-foreground: oklch(0.92 0.02 280);
|
|
229
|
+
--muted: oklch(0.22 0.04 280);
|
|
230
|
+
--muted-foreground: oklch(0.72 0.04 280);
|
|
231
|
+
--accent: oklch(0.78 0.14 92);
|
|
232
|
+
--accent-foreground: var(--ink);
|
|
233
|
+
--border: oklch(0.97 0.01 280 / 14%);
|
|
234
|
+
--input: oklch(0.97 0.01 280 / 10%);
|
|
235
|
+
--ring: var(--sunbeam);
|
|
236
|
+
|
|
237
|
+
--color-surface: var(--background);
|
|
238
|
+
--color-surface-2: var(--card);
|
|
239
|
+
--color-foreground: var(--foreground);
|
|
240
|
+
--color-muted: var(--muted-foreground);
|
|
241
|
+
--color-muted-2: var(--muted-foreground);
|
|
242
|
+
--color-primary: var(--primary);
|
|
243
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
244
|
+
--color-border: var(--border);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
[data-shell-mode='linked'],
|
|
248
|
+
[data-shell-mode='linked'] body {
|
|
249
|
+
overflow: hidden;
|
|
250
|
+
height: 100%;
|
|
251
|
+
max-height: 100dvh;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
[data-shell-mode='linked'][data-shell-embedded] {
|
|
255
|
+
max-height: none;
|
|
256
|
+
height: 100%;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/**
|
|
260
|
+
* Host scale-to-fit viewport (16:9 logical canvas).
|
|
261
|
+
* Bundles set `--host-backdrop` on `[data-host-mount]`; the shell copies it
|
|
262
|
+
* here so the backdrop covers the full physical screen (letterbox regions too).
|
|
263
|
+
*/
|
|
264
|
+
.host-display-viewport {
|
|
265
|
+
--host-backdrop: var(--background);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.host-display-backdrop {
|
|
269
|
+
background: var(--host-backdrop);
|
|
270
|
+
background-size: cover;
|
|
271
|
+
background-position: center;
|
|
272
|
+
background-repeat: no-repeat;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.host-display-scaler {
|
|
276
|
+
contain: layout paint size;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.host-display-canvas {
|
|
280
|
+
contain: layout paint style;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
[data-shell-mode='linked'] .shell-dev-bar,
|
|
284
|
+
[data-shell-mode='linked'] .shell-dev-log-panel,
|
|
285
|
+
[data-shell-mode='linked'] .shell-dev-log {
|
|
286
|
+
--color-surface: var(--background);
|
|
287
|
+
--color-surface-2: var(--card);
|
|
288
|
+
--color-foreground: var(--foreground);
|
|
289
|
+
--color-muted-2: var(--muted-foreground);
|
|
290
|
+
--color-primary: var(--primary);
|
|
291
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
292
|
+
--color-border: var(--border);
|
|
293
|
+
--color-accent: var(--accent);
|
|
294
|
+
}
|
|
295
|
+
|
|
208
296
|
@media (prefers-reduced-motion: reduce) {
|
|
209
297
|
* {
|
|
210
298
|
animation-duration: 0.01ms !important;
|