@vanillaskyai/video 0.10.23 → 0.11.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.
- package/CHANGELOG.md +69 -0
- package/PUBLIC-API.md +47 -438
- package/README.md +53 -97
- package/dist/builtin-metadata-OT6V7TB4.js +8 -0
- package/dist/{chapter-title-2JVDU62E.js → chapter-title-2RCXX7SN.js} +1 -2
- package/dist/{chunk-5BSJLT6H.js → chunk-2WIETEL7.js} +16 -29
- package/dist/{chunk-3O7OMMMF.js → chunk-35K6IKB2.js} +3 -3
- package/dist/{chunk-PDQFQIQW.js → chunk-3EQ6PVWL.js} +1 -1
- package/dist/chunk-4G4JBMCM.js +37 -0
- package/dist/{chunk-7AA2JWHZ.js → chunk-5DOQTIMD.js} +6 -6
- package/dist/chunk-666HGTVZ.js +41 -0
- package/dist/{chunk-7M56IUUX.js → chunk-6Z3ID54H.js} +0 -18
- package/dist/chunk-AUN4S3YW.js +50 -0
- package/dist/chunk-HIQM4J3U.js +30 -0
- package/dist/chunk-ISWQ6T5X.js +36 -0
- package/dist/{chunk-224QNWRA.js → chunk-K5J7ESRO.js} +1 -10
- package/dist/chunk-NM4CXXZY.js +25 -0
- package/dist/{chunk-44WND2VP.js → chunk-RFXHLLYU.js} +34 -62
- package/dist/{chunk-RXTN2CW6.js → chunk-Z3DLSLAJ.js} +1 -1
- package/dist/cinema-media-YZ2UANJG.js +365 -0
- package/dist/cli.js +154 -1748
- package/dist/{compose-video-BH5K6XWT.js → compose-video-RSLI4CVP.js} +4 -4
- package/dist/{events-B4YCc4vc.d.ts → events-BZAfl0Dm.d.ts} +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +4 -6
- package/dist/preload-media-23JXUFCF.js +77 -0
- package/dist/react.d.ts +39 -15
- package/dist/react.js +1355 -740
- package/dist/scene-validation-SGLLLFY5.js +9 -0
- package/dist/server.d.ts +67 -117
- package/dist/server.js +296 -626
- package/dist/test.d.ts +2 -2
- package/dist/test.js +21 -21
- package/dist/{text-stream-LD364KBI.js → text-stream-SOVLYR2L.js} +2 -2
- package/dist/{types-BqB8zC9u.d.ts → types-CG-kPI81.d.ts} +3 -1
- package/dist/{types-DdZw4GRQ.d.ts → types-ht-Zw3Wv.d.ts} +1 -1
- package/docs/agent-integration.md +19 -64
- package/docs/architecture.md +80 -106
- package/docs/customization.md +49 -66
- package/docs/development.md +18 -17
- package/docs/errors.md +4 -4
- package/docs/getting-started.md +74 -93
- package/docs/media-and-audio.md +9 -7
- package/docs/performance.md +11 -6
- package/docs/persistence.md +3 -7
- package/docs/production.md +4 -15
- package/docs/prompt-and-input.md +1 -2
- package/docs/provider-integration.md +156 -181
- package/docs/reference/protocol.md +5 -14
- package/docs/reference/provider-adapters.md +21 -13
- package/docs/security.md +1 -14
- package/docs/testing.md +56 -123
- package/package.json +4 -25
- package/starters/video-chat/.env.example +12 -4
- package/starters/video-chat/.env.native.example +13 -0
- package/starters/video-chat/README.md +72 -11
- package/starters/video-chat/package.json +1 -1
- package/starters/video-chat/providers/text-native.ts +94 -0
- package/starters/video-chat/providers/text.ts +19 -0
- package/starters/video-chat/providers/transcription.ts +32 -0
- package/starters/video-chat/providers/video-custom.ts +45 -0
- package/starters/video-chat/providers/video-delivery.ts +57 -0
- package/starters/video-chat/providers/video-google.ts +48 -0
- package/starters/video-chat/providers/video-job.ts +103 -0
- package/starters/video-chat/providers/video-runway.ts +45 -0
- package/starters/video-chat/providers/video.ts +39 -63
- package/starters/video-chat/server.ts +3 -29
- package/starters/video-chat/vite.config.ts +2 -8
- package/styles/video-chat.css +8 -105
- package/dist/builtin-server-W4PLJUZ5.js +0 -8
- package/dist/catalog-types-WTbLP6Jh.d.ts +0 -78
- package/dist/check-runtime.d.ts +0 -15
- package/dist/check-runtime.js +0 -96
- package/dist/chunk-2E6T633S.js +0 -27
- package/dist/chunk-4YM2M62S.js +0 -13
- package/dist/chunk-4ZJLPHBV.js +0 -684
- package/dist/chunk-5JBMYQP6.js +0 -156
- package/dist/chunk-73NTSFFI.js +0 -81
- package/dist/chunk-EGVQODKU.js +0 -83
- package/dist/chunk-HFVNAPHZ.js +0 -35
- package/dist/chunk-IIN5M5HW.js +0 -697
- package/dist/chunk-IQMYK5DX.js +0 -133
- package/dist/chunk-IR44XKBI.js +0 -46
- package/dist/chunk-JKVOBTRO.js +0 -145
- package/dist/chunk-LVM5Q2DL.js +0 -68
- package/dist/chunk-M4QTEJTK.js +0 -709
- package/dist/chunk-QSBDB4J2.js +0 -16
- package/dist/chunk-R3XAOMKP.js +0 -29
- package/dist/chunk-SPVTJH3F.js +0 -24
- package/dist/chunk-YAHT3LST.js +0 -663
- package/dist/chunk-ZD2VTUYR.js +0 -28
- package/dist/cinema-media-HYCDG65Z.js +0 -11
- package/dist/comparison-XXAP4S4J.js +0 -36
- package/dist/editorial-timeline-VUQC6KPA.js +0 -42
- package/dist/key-figure-4TJK7HLT.js +0 -29
- package/dist/kit-DrRpdn0p.d.ts +0 -79
- package/dist/mobile-message-FIHAO6XC.js +0 -49
- package/dist/preload-media-LJXWKTWG.js +0 -57
- package/dist/quote-GRPIYKQJ.js +0 -32
- package/dist/system-prompt-AG26KJAA.js +0 -12
- package/dist/template-catalog.d.ts +0 -400
- package/dist/template-catalog.js +0 -6
- package/dist/templates.d.ts +0 -25
- package/dist/templates.js +0 -102
- package/dist/validate-4OUD2CLX.js +0 -10
- package/docs/concepts.md +0 -107
- package/docs/custom-templates.md +0 -346
- package/docs/immersive-interface.md +0 -86
- package/docs/motion-and-effects.md +0 -109
- package/docs/reference/design-system.html +0 -125
- package/docs/responsive-orientation.md +0 -37
- package/docs/streaming-protocol.md +0 -15
- package/examples/custom-template/README.md +0 -19
- package/examples/custom-template/minimal-text.tsx +0 -82
- package/examples/custom-template/structured-data.tsx +0 -104
- package/registry/items/backgrounds.json +0 -70
- package/registry/items/chapterTitle.json +0 -80
- package/registry/items/cinemaMedia.json +0 -136
- package/registry/items/comparison.json +0 -168
- package/registry/items/editorialTimeline.json +0 -172
- package/registry/items/keyFigure.json +0 -162
- package/registry/items/mobileMessage.json +0 -153
- package/registry/items/motion.json +0 -45
- package/registry/items/quote.json +0 -161
- package/registry/items/template-context.json +0 -31
- package/registry/items/theme.json +0 -47
- package/registry/items/typography.json +0 -47
package/styles/video-chat.css
CHANGED
|
@@ -76,7 +76,6 @@
|
|
|
76
76
|
|
|
77
77
|
.vanillasky-video-chat {
|
|
78
78
|
margin: 0;
|
|
79
|
-
background: var(--vs-bg);
|
|
80
79
|
color: var(--vs-fg);
|
|
81
80
|
font-family: var(--vs-font);
|
|
82
81
|
-webkit-font-smoothing: antialiased;
|
|
@@ -106,9 +105,7 @@
|
|
|
106
105
|
--vs-side: 1rem;
|
|
107
106
|
--vs-frame: min(72rem, 100dvw - 2 * var(--vs-side), (100dvh - var(--vs-reserve)) * 16 / 9);
|
|
108
107
|
--vs-column: min(48rem, 100dvw - 2 * var(--vs-side));
|
|
109
|
-
display: grid;
|
|
110
108
|
grid-template-rows: auto auto 1fr;
|
|
111
|
-
height: 100dvh;
|
|
112
109
|
overflow: hidden;
|
|
113
110
|
}
|
|
114
111
|
|
|
@@ -124,9 +121,6 @@
|
|
|
124
121
|
align-items: center;
|
|
125
122
|
justify-content: space-between;
|
|
126
123
|
gap: 0.75rem;
|
|
127
|
-
width: max(var(--vs-frame), var(--vs-column) - 2 * var(--vs-side));
|
|
128
|
-
margin: 0 auto;
|
|
129
|
-
padding: max(0.6rem, env(safe-area-inset-top)) 0 0.5rem;
|
|
130
124
|
}
|
|
131
125
|
|
|
132
126
|
.vanillasky-video-chat .group { display: flex; align-items: center; gap: 0.5rem; }
|
|
@@ -167,26 +161,19 @@
|
|
|
167
161
|
.vanillasky-video-chat .pill:hover { background: var(--vs-surface-hover); }
|
|
168
162
|
|
|
169
163
|
.vanillasky-video-chat .stage-area {
|
|
170
|
-
position: relative;
|
|
171
164
|
min-height: 0;
|
|
172
165
|
display: grid;
|
|
173
166
|
place-items: center;
|
|
174
|
-
padding: 1.5rem var(--vs-side) 0;
|
|
175
167
|
}
|
|
176
168
|
|
|
177
169
|
.vanillasky-video-chat .stage {
|
|
178
170
|
position: relative;
|
|
179
|
-
aspect-ratio: 16 / 9;
|
|
180
|
-
width: var(--vs-frame);
|
|
181
171
|
overflow: hidden;
|
|
182
|
-
border-radius: var(--vs-radius-lg);
|
|
183
172
|
container-type: size;
|
|
184
173
|
}
|
|
185
174
|
|
|
186
175
|
.vanillasky-video-chat[data-orientation="portrait"] { --vs-frame: min(100dvw - 2 * var(--vs-side), (100dvh - var(--vs-reserve)) * 9 / 16); }
|
|
187
176
|
|
|
188
|
-
.vanillasky-video-chat[data-orientation="portrait"] .stage { aspect-ratio: 9 / 16; }
|
|
189
|
-
|
|
190
177
|
@media (min-width: 900px) { .vanillasky-video-chat .stage { border: 1px solid var(--vs-border); } }
|
|
191
178
|
|
|
192
179
|
.vanillasky-video-chat .stage > * { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; }
|
|
@@ -200,9 +187,6 @@
|
|
|
200
187
|
.vanillasky-video-chat .welcome-wash {
|
|
201
188
|
position: absolute;
|
|
202
189
|
inset: 0;
|
|
203
|
-
background:
|
|
204
|
-
linear-gradient(100deg, oklch(0.14 0.05 265 / 88%) 0%, oklch(0.14 0.05 265 / 62%) 38%, transparent 72%),
|
|
205
|
-
linear-gradient(0deg, oklch(0.14 0.05 265 / 45%) 0%, transparent 45%);
|
|
206
190
|
}
|
|
207
191
|
|
|
208
192
|
.vanillasky-video-chat .welcome-body {
|
|
@@ -211,29 +195,19 @@
|
|
|
211
195
|
display: flex;
|
|
212
196
|
flex-direction: column;
|
|
213
197
|
align-items: flex-start;
|
|
214
|
-
gap: clamp(0.9rem, 2.2cqh, 1.6rem);
|
|
215
|
-
padding: clamp(2rem, 8cqh, 4.5rem) clamp(1.25rem, 4cqw, 3.5rem) clamp(1.25rem, 4cqh, 2.5rem);
|
|
216
198
|
color: oklch(1 0 0);
|
|
217
199
|
}
|
|
218
200
|
|
|
219
201
|
.vanillasky-video-chat .welcome-title {
|
|
220
202
|
margin: 0;
|
|
221
|
-
font-size: clamp(1.6rem, 5.2cqw, 3.4rem);
|
|
222
|
-
line-height: 1.22;
|
|
223
|
-
letter-spacing: var(--vs-track-display);
|
|
224
|
-
font-weight: 600;
|
|
225
203
|
text-wrap: balance;
|
|
226
204
|
}
|
|
227
205
|
|
|
228
|
-
.vanillasky-video-chat .welcome-title em { font-style: normal;
|
|
206
|
+
.vanillasky-video-chat .welcome-title em { font-style: normal; }
|
|
229
207
|
|
|
230
208
|
.vanillasky-video-chat .cards {
|
|
231
209
|
display: flex;
|
|
232
|
-
gap: clamp(0.5rem, 1.2cqw, 0.9rem);
|
|
233
|
-
margin: auto -0.4rem 0;
|
|
234
|
-
padding: 0.4rem;
|
|
235
210
|
list-style: none;
|
|
236
|
-
max-width: calc(100% + 0.8rem);
|
|
237
211
|
overflow-x: auto;
|
|
238
212
|
overflow-y: visible;
|
|
239
213
|
scrollbar-width: none;
|
|
@@ -241,20 +215,12 @@
|
|
|
241
215
|
|
|
242
216
|
.vanillasky-video-chat .cards::-webkit-scrollbar { display: none; }
|
|
243
217
|
|
|
244
|
-
.vanillasky-video-chat .cards::-webkit-scrollbar { display: none; }
|
|
245
|
-
|
|
246
218
|
.vanillasky-video-chat .cards button {
|
|
247
219
|
position: relative;
|
|
248
|
-
display: block;
|
|
249
220
|
flex: 0 0 auto;
|
|
250
|
-
width: clamp(7rem, 12.5cqw, 9.5rem);
|
|
251
|
-
aspect-ratio: 3 / 4;
|
|
252
221
|
padding: 0;
|
|
253
222
|
overflow: hidden;
|
|
254
223
|
border: 0;
|
|
255
|
-
border-radius: clamp(0.75rem, 1.3cqw, 1.1rem);
|
|
256
|
-
background: oklch(0.16 0.04 280);
|
|
257
|
-
box-shadow: 0 2px 6px -2px oklch(0 0 0 / 40%), 0 12px 28px -10px oklch(0 0 0 / 55%);
|
|
258
224
|
outline: 2px solid transparent;
|
|
259
225
|
outline-offset: 2px;
|
|
260
226
|
color: oklch(1 0 0);
|
|
@@ -264,14 +230,6 @@
|
|
|
264
230
|
outline-color var(--vs-duration) ease;
|
|
265
231
|
}
|
|
266
232
|
|
|
267
|
-
.vanillasky-video-chat .cards button[data-active] {
|
|
268
|
-
outline-color: oklch(0.84 0.1 268);
|
|
269
|
-
box-shadow:
|
|
270
|
-
0 0 0 5px oklch(0.72 0.15 268 / 22%),
|
|
271
|
-
0 2px 6px -2px oklch(0 0 0 / 40%),
|
|
272
|
-
0 14px 32px -10px oklch(0 0 0 / 60%);
|
|
273
|
-
}
|
|
274
|
-
|
|
275
233
|
.vanillasky-video-chat .cards button:hover {
|
|
276
234
|
transform: translateY(-3px);
|
|
277
235
|
box-shadow: 0 4px 10px -2px oklch(0 0 0 / 45%), 0 20px 40px -12px oklch(0 0 0 / 65%);
|
|
@@ -282,21 +240,14 @@
|
|
|
282
240
|
.vanillasky-video-chat .card-wash {
|
|
283
241
|
position: absolute;
|
|
284
242
|
inset: 0;
|
|
285
|
-
background: linear-gradient(0deg, oklch(0.12 0.03 280 / 92%) 0%, oklch(0.12 0.03 280 / 30%) 45%, transparent 70%);
|
|
286
243
|
}
|
|
287
244
|
|
|
288
245
|
.vanillasky-video-chat .card-prompt {
|
|
289
|
-
position: absolute;
|
|
290
|
-
inset: auto 0 0;
|
|
291
|
-
padding: 0.6rem 0.7rem;
|
|
292
|
-
font-size: clamp(var(--vs-text-footnote), 0.95cqw, 0.9rem);
|
|
293
246
|
line-height: var(--vs-lead-footnote);
|
|
294
|
-
letter-spacing: var(--vs-track-footnote);
|
|
295
|
-
font-weight: 500;
|
|
296
247
|
text-wrap: balance;
|
|
297
248
|
}
|
|
298
249
|
|
|
299
|
-
.vanillasky-video-chat .card-dots {
|
|
250
|
+
.vanillasky-video-chat .card-dots { gap: 0.15rem; margin-top: 0.6rem; align-self: center; }
|
|
300
251
|
|
|
301
252
|
.vanillasky-video-chat .card-dots button {
|
|
302
253
|
display: grid;
|
|
@@ -362,7 +313,6 @@
|
|
|
362
313
|
|
|
363
314
|
.vanillasky-video-chat .ending-label {
|
|
364
315
|
margin: 0;
|
|
365
|
-
font-size: clamp(var(--vs-text-footnote), 1.1cqw, var(--vs-text-subhead));
|
|
366
316
|
line-height: var(--vs-lead-footnote);
|
|
367
317
|
letter-spacing: var(--vs-track-footnote);
|
|
368
318
|
font-weight: 600;
|
|
@@ -370,14 +320,10 @@
|
|
|
370
320
|
text-shadow: 0 1px 3px oklch(0.14 0.05 265 / 70%);
|
|
371
321
|
}
|
|
372
322
|
|
|
373
|
-
.vanillasky-video-chat .panel {
|
|
323
|
+
.vanillasky-video-chat .panel { align-items: center; min-height: 0; }
|
|
374
324
|
|
|
375
325
|
.vanillasky-video-chat .panel-inner {
|
|
376
|
-
display: grid;
|
|
377
|
-
gap: 0.5rem;
|
|
378
|
-
width: var(--vs-column);
|
|
379
326
|
margin: 0 auto;
|
|
380
|
-
padding: 1rem var(--vs-side) max(1rem, env(safe-area-inset-bottom));
|
|
381
327
|
}
|
|
382
328
|
|
|
383
329
|
@media (min-width: 900px) {
|
|
@@ -388,9 +334,7 @@
|
|
|
388
334
|
|
|
389
335
|
.vanillasky-video-chat .line-row {
|
|
390
336
|
display: flex;
|
|
391
|
-
align-items: flex-start;
|
|
392
337
|
gap: 0.75rem;
|
|
393
|
-
min-height: calc(2 * var(--vs-text-body) * var(--vs-lead-body));
|
|
394
338
|
margin-bottom: 0.5rem;
|
|
395
339
|
}
|
|
396
340
|
|
|
@@ -398,12 +342,6 @@
|
|
|
398
342
|
flex: 1 1 auto;
|
|
399
343
|
min-width: 0;
|
|
400
344
|
margin: 0;
|
|
401
|
-
display: block;
|
|
402
|
-
overflow: visible;
|
|
403
|
-
font-size: var(--vs-text-body);
|
|
404
|
-
line-height: var(--vs-lead-body);
|
|
405
|
-
letter-spacing: var(--vs-track-body);
|
|
406
|
-
color: var(--vs-fg);
|
|
407
345
|
animation: vanillasky-video-chat-fade-in 320ms ease both;
|
|
408
346
|
}
|
|
409
347
|
|
|
@@ -531,7 +469,6 @@
|
|
|
531
469
|
isolation: isolate;
|
|
532
470
|
display: block;
|
|
533
471
|
width: 100%;
|
|
534
|
-
height: 100dvh;
|
|
535
472
|
background: var(--vs-media-ground);
|
|
536
473
|
}
|
|
537
474
|
|
|
@@ -590,7 +527,7 @@
|
|
|
590
527
|
pointer-events: auto;
|
|
591
528
|
}
|
|
592
529
|
|
|
593
|
-
.vanillasky-video-chat .line { color: var(--vs-media-text); text-align: center;
|
|
530
|
+
.vanillasky-video-chat .line { color: var(--vs-media-text); text-align: center; letter-spacing: -.02em; text-shadow: 0 1px 6px rgb(0 0 0 / 30%); }
|
|
594
531
|
|
|
595
532
|
.vanillasky-video-chat[data-controls-visible="false"] .chrome { opacity: 0; visibility: hidden; transform: translateY(-8px); }
|
|
596
533
|
|
|
@@ -610,7 +547,7 @@
|
|
|
610
547
|
|
|
611
548
|
.vanillasky-video-chat .cards { gap: 14px; margin: auto -12px 0; width: calc(100% + 24px); max-width: calc(100% + 24px); padding: 12px; }
|
|
612
549
|
|
|
613
|
-
.vanillasky-video-chat .cards button { --vs-card-width: clamp(160px, 18vw, 260px); --vs-card-ratio: 1.65; width: var(--vs-card-width);
|
|
550
|
+
.vanillasky-video-chat .cards button { --vs-card-width: clamp(160px, 18vw, 260px); --vs-card-ratio: 1.65; width: var(--vs-card-width); border-radius: 14px; box-shadow: 0 8px 30px rgb(0 0 0 / 24%); background: #202438; }
|
|
614
551
|
|
|
615
552
|
.vanillasky-video-chat .card-prompt { font-size: clamp(13px, 1.1vw, 16px); padding: 14px 16px; letter-spacing: -.015em; font-weight: 550; }
|
|
616
553
|
|
|
@@ -662,9 +599,9 @@
|
|
|
662
599
|
|
|
663
600
|
.vanillasky-video-chat .line-row { position: relative; }
|
|
664
601
|
|
|
665
|
-
.vanillasky-video-chat .caption-actions { display: flex; flex-shrink: 0; align-self: center; gap: 2px;
|
|
602
|
+
.vanillasky-video-chat .caption-actions { display: flex; flex-shrink: 0; align-self: center; gap: 2px; }
|
|
666
603
|
|
|
667
|
-
.vanillasky-video-chat .caption-action {
|
|
604
|
+
.vanillasky-video-chat .caption-action { place-items: center; min-width: 36px; min-height: 36px; padding: 5px; border: 0; border-radius: 9px; color: var(--vs-media-muted); background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
|
|
668
605
|
|
|
669
606
|
.vanillasky-video-chat .caption-action:hover { color: var(--vs-media-text); background: var(--vs-media-hover); }
|
|
670
607
|
|
|
@@ -694,10 +631,6 @@
|
|
|
694
631
|
|
|
695
632
|
.vanillasky-video-chat .caption-action { display: flex; align-items: center; justify-content: center; gap: 5px; }
|
|
696
633
|
|
|
697
|
-
.vanillasky-video-chat .eyebrow { display: block; font-size: 10px; line-height: 1.5; letter-spacing: .12em; font-weight: 600; color: var(--vs-fg-muted); margin-bottom: 8px; }
|
|
698
|
-
|
|
699
|
-
.vanillasky-video-chat .expanded-captions .eyebrow { color: var(--vs-media-muted); }
|
|
700
|
-
|
|
701
634
|
.vanillasky-video-chat .dock-hint { position: absolute; inset: auto 0 7px; text-align: center; margin: 0; color: var(--vs-media-muted); font-size: 11px; line-height: 16px; }
|
|
702
635
|
|
|
703
636
|
.vanillasky-video-chat .panel-inner:has(.dock-hint) { padding-bottom: max(38px, calc(env(safe-area-inset-bottom) + 20px)); }
|
|
@@ -803,7 +736,7 @@
|
|
|
803
736
|
|
|
804
737
|
.vanillasky-video-chat .caption-slot[data-captions="true"] { grid-template-rows: 1fr; opacity: 1; }
|
|
805
738
|
|
|
806
|
-
.vanillasky-video-chat .caption-clip { min-height: 0;
|
|
739
|
+
.vanillasky-video-chat .caption-clip { min-height: 0; border-radius: 12px; }
|
|
807
740
|
|
|
808
741
|
.vanillasky-video-chat .caption-slot[data-captions="false"] { pointer-events: none; visibility: hidden; }
|
|
809
742
|
|
|
@@ -816,7 +749,6 @@
|
|
|
816
749
|
z-index: 30;
|
|
817
750
|
inset: max(82px, calc(env(safe-area-inset-top) + 64px)) var(--vs-media-gutter) auto auto;
|
|
818
751
|
width: min(360px, calc(100% - 32px));
|
|
819
|
-
max-height: min(650px, calc(100dvh - 108px));
|
|
820
752
|
overflow-y: auto;
|
|
821
753
|
overscroll-behavior: contain;
|
|
822
754
|
scrollbar-width: thin;
|
|
@@ -870,36 +802,12 @@
|
|
|
870
802
|
|
|
871
803
|
.vanillasky-video-chat .settings input[type="checkbox"]:checked::after { background: #fafaff; transform: translateX(15px); }
|
|
872
804
|
|
|
873
|
-
.vanillasky-video-chat .settings .visual-choices { display: grid; gap: 4px; padding: 4px; border: 1px solid rgb(255 255 255 / 6%); border-radius: 16px; background: rgb(0 0 0 / 10%); }
|
|
874
|
-
|
|
875
|
-
.vanillasky-video-chat .settings .choice-row { min-height: 52px; padding: 9px 10px; border: 1px solid transparent; border-radius: 12px; transition: background 150ms ease, border-color 150ms ease; }
|
|
876
|
-
|
|
877
|
-
.vanillasky-video-chat .settings .choice-row:hover { background: rgb(255 255 255 / 4%); }
|
|
878
|
-
|
|
879
|
-
.vanillasky-video-chat .settings .choice-row:has(input:checked) { background: rgb(193 196 229 / 12%); border-color: rgb(210 213 247 / 10%); }
|
|
880
|
-
|
|
881
805
|
.vanillasky-video-chat .settings input[type="radio"] { position: relative; width: 18px; height: 18px; border: 1px solid rgb(216 220 246 / 32%); border-radius: 50%; background: rgb(0 0 0 / 8%); }
|
|
882
806
|
|
|
883
807
|
.vanillasky-video-chat .settings input[type="radio"]:checked { background: #c1c4e5; border-color: #c1c4e5; }
|
|
884
808
|
|
|
885
809
|
.vanillasky-video-chat .settings input[type="radio"]:checked::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #25283d; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
|
|
886
810
|
|
|
887
|
-
.vanillasky-video-chat .settings .style-choices { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; border-radius: 16px; background: rgb(0 0 0 / 15%); }
|
|
888
|
-
|
|
889
|
-
.vanillasky-video-chat .settings .style-options label { flex: 1 1 70px; min-height: 40px; justify-content: center; padding: 8px 10px; border: 1px solid transparent; border-radius: 11px; }
|
|
890
|
-
|
|
891
|
-
.vanillasky-video-chat .settings .style-options label:has(input:checked) { background: rgb(193 196 229 / 18%); border-color: rgb(226 228 255 / 16%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 2px 5px rgb(0 0 0 / 8%); }
|
|
892
|
-
|
|
893
|
-
.vanillasky-video-chat .settings .style-options label:hover { background: rgb(255 255 255 / 8%); }
|
|
894
|
-
|
|
895
|
-
.vanillasky-video-chat .settings .style-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
|
|
896
|
-
|
|
897
|
-
.vanillasky-video-chat .settings .style-options label:has(input:focus-visible) { outline: 2px solid var(--vs-focus-ring); outline-offset: 2px; }
|
|
898
|
-
|
|
899
|
-
.vanillasky-video-chat .settings .style-options strong { font-size: 12px; }
|
|
900
|
-
|
|
901
|
-
.vanillasky-video-chat .settings-note { margin: 0; padding: 0 3px; color: #aeb2c7; font-size: 11px; line-height: 1.5; }
|
|
902
|
-
|
|
903
811
|
.vanillasky-video-chat .developer-links { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 12%); }
|
|
904
812
|
.vanillasky-video-chat .developer-links .section-label { padding-bottom: 4px; }
|
|
905
813
|
.vanillasky-video-chat .developer-links :is(a, button) { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 12px; color: var(--vs-fg); font-size: 13px; line-height: 1.4; text-decoration: none; }
|
|
@@ -931,15 +839,10 @@
|
|
|
931
839
|
@media (max-width: 700px) {
|
|
932
840
|
.vanillasky-video-chat .sheet-popover { right: 12px; width: min(360px, calc(100% - 24px)); max-height: calc(100dvh - 102px); padding: 16px; }
|
|
933
841
|
.vanillasky-video-chat .popover-heading .round { width: 44px; height: 44px; }
|
|
934
|
-
.vanillasky-video-chat .settings .style-options label { min-height: 44px; }
|
|
935
842
|
}
|
|
936
843
|
|
|
937
844
|
.vanillasky-video-chat .settings label small { font-size: 11px; line-height: 1.4; }
|
|
938
845
|
|
|
939
|
-
.vanillasky-video-chat .settings .style-options label > span { font-size: 12px; font-weight: 500; white-space: nowrap; }
|
|
940
|
-
|
|
941
|
-
.vanillasky-video-chat .settings .style-options label:has(input:checked) > span { color: var(--vs-fg); }
|
|
942
|
-
|
|
943
846
|
.vanillasky-video-chat .history-row.current::after { content: ""; flex: 0 0 5px; width: 5px; height: 9px; margin: 0 4px; border: solid #c1c4e5; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
|
|
944
847
|
|
|
945
848
|
/* Host sizing is opt-in; the default experience occupies the viewport. */
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
interface TemplateJsonSchemaProperty {
|
|
2
|
-
readonly type?: "string" | "number" | "integer" | "boolean" | "array" | "object";
|
|
3
|
-
/** Semantic formats enforced by runtime validation instead of inferred from field names. */
|
|
4
|
-
readonly format?: "uri" | "supplied-image" | "grounded-quote" | "grounded-stat" | "stock-media-keyword" | "emoji";
|
|
5
|
-
readonly enum?: readonly string[];
|
|
6
|
-
readonly title?: string;
|
|
7
|
-
readonly description?: string;
|
|
8
|
-
readonly default?: unknown;
|
|
9
|
-
readonly examples?: readonly unknown[];
|
|
10
|
-
readonly minItems?: number;
|
|
11
|
-
readonly maxItems?: number;
|
|
12
|
-
readonly minLength?: number;
|
|
13
|
-
readonly maxLength?: number;
|
|
14
|
-
readonly minimum?: number;
|
|
15
|
-
readonly maximum?: number;
|
|
16
|
-
readonly items?: TemplateJsonSchemaProperty;
|
|
17
|
-
readonly properties?: Readonly<Record<string, TemplateJsonSchemaProperty>>;
|
|
18
|
-
readonly required?: readonly string[];
|
|
19
|
-
readonly additionalProperties?: boolean;
|
|
20
|
-
}
|
|
21
|
-
interface TemplateJsonSchema {
|
|
22
|
-
readonly type: "object";
|
|
23
|
-
readonly properties: Readonly<Record<string, TemplateJsonSchemaProperty>>;
|
|
24
|
-
readonly required?: readonly string[];
|
|
25
|
-
readonly additionalProperties?: boolean;
|
|
26
|
-
readonly "x-vanillasky"?: {
|
|
27
|
-
readonly requiresStat?: boolean;
|
|
28
|
-
readonly allowsStockMedia?: boolean;
|
|
29
|
-
/** Every group requires at least one declared top-level field with a meaningful non-empty value. */
|
|
30
|
-
readonly requiredAnyOf?: readonly (readonly string[])[];
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
type TemplateJob = "setup" | "claim" | "proof" | "atmosphere" | "payoff" | "punctuation" | "ask";
|
|
34
|
-
type TemplateRegister = "motion-led" | "typography-led" | "device-led" | "card-led" | "mockup-led";
|
|
35
|
-
type TemplateFamily = "Media & motion" | "Data & metrics" | "Product showcase" | "Social & messaging" | "Explainers" | "Calls to action";
|
|
36
|
-
interface TemplateTimingMetadata {
|
|
37
|
-
/** Schema fields whose rendered content may inform a future adaptive duration. */
|
|
38
|
-
readonly contentFields: readonly string[];
|
|
39
|
-
/** Authored motion and uninterrupted reading minimums in seconds. */
|
|
40
|
-
readonly revealSeconds?: number;
|
|
41
|
-
readonly holdSeconds?: number;
|
|
42
|
-
readonly exitSeconds?: number;
|
|
43
|
-
/** How content in contentFields should be measured; no runtime behavior is implied. */
|
|
44
|
-
readonly contentUnit: "words" | "characters" | "items";
|
|
45
|
-
}
|
|
46
|
-
interface TemplateTransitionTiming {
|
|
47
|
-
/** Earliest readable local motion point used when this scene enters from a global transition. */
|
|
48
|
-
readonly entryReadyProgress: number;
|
|
49
|
-
/** Audited readable checkpoint before the template's own exit animation begins. */
|
|
50
|
-
readonly holdProgress: number;
|
|
51
|
-
}
|
|
52
|
-
interface SceneTemplateMetadata {
|
|
53
|
-
id: string;
|
|
54
|
-
label?: string;
|
|
55
|
-
description?: string;
|
|
56
|
-
category?: string | null;
|
|
57
|
-
/** Human-readable browse group. */
|
|
58
|
-
family?: TemplateFamily;
|
|
59
|
-
jobs?: TemplateJob[];
|
|
60
|
-
register?: TemplateRegister;
|
|
61
|
-
useWhen?: string;
|
|
62
|
-
avoidWhen?: string;
|
|
63
|
-
usesGlobalTextEffect: boolean;
|
|
64
|
-
/** Opts into renderer-owned transitions. Defaults to false for customer templates. */
|
|
65
|
-
usesGlobalTransition: boolean;
|
|
66
|
-
/** Required exactly when usesGlobalTransition is true. */
|
|
67
|
-
transitionTiming?: TemplateTransitionTiming;
|
|
68
|
-
usesGlobalBackgroundEffect: boolean;
|
|
69
|
-
textCanvas?: "tight" | "open";
|
|
70
|
-
/** The only authoring contract for defaults, validation, planning, grounding, and editor fields. */
|
|
71
|
-
schema: TemplateJsonSchema;
|
|
72
|
-
minDuration?: number;
|
|
73
|
-
preferredDuration?: number;
|
|
74
|
-
/** Declarative hints for future content-aware duration selection. */
|
|
75
|
-
timing?: TemplateTimingMetadata;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
export type { SceneTemplateMetadata as S, TemplateJsonSchema as T, TemplateFamily as a, TemplateTimingMetadata as b, TemplateTransitionTiming as c, TemplateJsonSchemaProperty as d };
|
package/dist/check-runtime.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
interface TemplateRenderCheckInput {
|
|
2
|
-
sourceUrl: string;
|
|
3
|
-
exportName: string;
|
|
4
|
-
templateId: string;
|
|
5
|
-
exampleName: string;
|
|
6
|
-
variables: Record<string, unknown>;
|
|
7
|
-
duration: number;
|
|
8
|
-
timeoutMs: number;
|
|
9
|
-
}
|
|
10
|
-
interface TemplateRenderCheckResult {
|
|
11
|
-
renders: number;
|
|
12
|
-
}
|
|
13
|
-
declare function renderTemplateChecks(input: TemplateRenderCheckInput): Promise<TemplateRenderCheckResult>;
|
|
14
|
-
|
|
15
|
-
export { type TemplateRenderCheckInput, type TemplateRenderCheckResult, renderTemplateChecks };
|
package/dist/check-runtime.js
DELETED
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
VideoFrame
|
|
3
|
-
} from "./chunk-M4QTEJTK.js";
|
|
4
|
-
import "./chunk-5JBMYQP6.js";
|
|
5
|
-
import "./chunk-224QNWRA.js";
|
|
6
|
-
import "./chunk-SPVTJH3F.js";
|
|
7
|
-
import "./chunk-R3XAOMKP.js";
|
|
8
|
-
import "./chunk-73NTSFFI.js";
|
|
9
|
-
|
|
10
|
-
// src/cli/check-runtime.ts
|
|
11
|
-
import * as React from "react";
|
|
12
|
-
import { createElement } from "react";
|
|
13
|
-
import { PassThrough } from "stream";
|
|
14
|
-
import { renderToPipeableStream } from "react-dom/server";
|
|
15
|
-
function renderFrame(element, timeoutMs) {
|
|
16
|
-
return new Promise((resolve, reject) => {
|
|
17
|
-
const output = new PassThrough();
|
|
18
|
-
const chunks = [];
|
|
19
|
-
let renderError;
|
|
20
|
-
output.on("data", (chunk) => chunks.push(chunk));
|
|
21
|
-
output.on("error", (error) => {
|
|
22
|
-
clearTimeout(timeout);
|
|
23
|
-
reject(error);
|
|
24
|
-
});
|
|
25
|
-
output.on("end", () => {
|
|
26
|
-
clearTimeout(timeout);
|
|
27
|
-
if (renderError == null) resolve(Buffer.concat(chunks).toString("utf8"));
|
|
28
|
-
else reject(renderError);
|
|
29
|
-
});
|
|
30
|
-
const stream = renderToPipeableStream(element, {
|
|
31
|
-
onAllReady: () => stream.pipe(output),
|
|
32
|
-
onError: (error) => {
|
|
33
|
-
renderError ??= error;
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
const timeout = setTimeout(() => stream.abort(new Error(`SSR timed out after ${timeoutMs}ms`)), timeoutMs);
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
async function renderTemplateChecks(input) {
|
|
40
|
-
Object.assign(globalThis, { React });
|
|
41
|
-
const progressPoints = [0, 0.5, 0.999];
|
|
42
|
-
let renders = 0;
|
|
43
|
-
let importSequence = 0;
|
|
44
|
-
for (const orientation of ["portrait", "landscape"]) {
|
|
45
|
-
const [width, height] = orientation === "portrait" ? [1080, 1920] : [1920, 1080];
|
|
46
|
-
const config = {
|
|
47
|
-
schemaVersion: "0.2",
|
|
48
|
-
orientation,
|
|
49
|
-
scenes: [{
|
|
50
|
-
id: "authoring-check",
|
|
51
|
-
templateId: input.templateId,
|
|
52
|
-
variables: input.variables,
|
|
53
|
-
timing: { startTime: 0, endTime: input.duration, fixedDuration: input.duration }
|
|
54
|
-
}],
|
|
55
|
-
style: {}
|
|
56
|
-
};
|
|
57
|
-
for (const progress of progressPoints) {
|
|
58
|
-
let first;
|
|
59
|
-
let second;
|
|
60
|
-
try {
|
|
61
|
-
const frame = async () => {
|
|
62
|
-
const loaded = await import(`${input.sourceUrl}?vanillasky-render=${Date.now()}-${importSequence++}`);
|
|
63
|
-
const template = loaded[input.exportName];
|
|
64
|
-
if (!template || typeof template.component !== "function") throw new Error(`could not resolve export ${JSON.stringify(input.exportName)}`);
|
|
65
|
-
const kit = {
|
|
66
|
-
templates: [template],
|
|
67
|
-
capabilities: { templates: [template.id] },
|
|
68
|
-
getTemplate: (id) => id === template.id ? template : void 0,
|
|
69
|
-
getTemplateMetadata: (id) => id === template.id ? template : void 0,
|
|
70
|
-
listTemplateMetadata: () => [template]
|
|
71
|
-
};
|
|
72
|
-
return renderFrame(createElement(VideoFrame, {
|
|
73
|
-
kit,
|
|
74
|
-
config,
|
|
75
|
-
time: progress * input.duration,
|
|
76
|
-
width,
|
|
77
|
-
height
|
|
78
|
-
}), input.timeoutMs);
|
|
79
|
-
};
|
|
80
|
-
first = await frame();
|
|
81
|
-
second = await frame();
|
|
82
|
-
} catch (error) {
|
|
83
|
-
const detail = error instanceof Error ? error.message : String(error);
|
|
84
|
-
throw new Error(`${input.templateId} example ${JSON.stringify(input.exampleName)} ${orientation} at progress ${progress}: ${detail}`);
|
|
85
|
-
}
|
|
86
|
-
if (first !== second) {
|
|
87
|
-
throw new Error(`${input.templateId} example ${JSON.stringify(input.exampleName)} ${orientation} at progress ${progress} is nondeterministic`);
|
|
88
|
-
}
|
|
89
|
-
renders += 2;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
return { renders };
|
|
93
|
-
}
|
|
94
|
-
export {
|
|
95
|
-
renderTemplateChecks
|
|
96
|
-
};
|
package/dist/chunk-2E6T633S.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
// src/visual-system/catalog/transition-contract.ts
|
|
2
|
-
var TRANSITION_TIMING_KEYS = /* @__PURE__ */ new Set(["entryReadyProgress", "holdProgress"]);
|
|
3
|
-
function assertTemplateTransitionMetadata(template) {
|
|
4
|
-
const timing = template.transitionTiming;
|
|
5
|
-
if (!template.usesGlobalTransition) {
|
|
6
|
-
if (timing !== void 0) {
|
|
7
|
-
throw new Error(`${template.id}.transitionTiming requires usesGlobalTransition: true`);
|
|
8
|
-
}
|
|
9
|
-
return;
|
|
10
|
-
}
|
|
11
|
-
if (!timing || typeof timing !== "object" || Array.isArray(timing)) {
|
|
12
|
-
throw new Error(`${template.id}.transitionTiming is required when usesGlobalTransition is true`);
|
|
13
|
-
}
|
|
14
|
-
for (const key of Object.keys(timing)) {
|
|
15
|
-
if (!TRANSITION_TIMING_KEYS.has(key)) throw new Error(`${template.id}.transitionTiming.${key} is not supported`);
|
|
16
|
-
}
|
|
17
|
-
const { entryReadyProgress, holdProgress } = timing;
|
|
18
|
-
if (!Number.isFinite(entryReadyProgress) || !Number.isFinite(holdProgress) || entryReadyProgress < 0 || holdProgress > 1 || entryReadyProgress >= holdProgress) {
|
|
19
|
-
throw new Error(
|
|
20
|
-
`${template.id}.transitionTiming must satisfy 0 <= entryReadyProgress < holdProgress <= 1`
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export {
|
|
26
|
-
assertTemplateTransitionMetadata
|
|
27
|
-
};
|
package/dist/chunk-4YM2M62S.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
// src/visual-system/scene-templates/editorial-typography.ts
|
|
2
|
-
var editorialFont = '-apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif';
|
|
3
|
-
var fade = (value) => {
|
|
4
|
-
const t = Math.max(0, Math.min(1, value));
|
|
5
|
-
return t * t * (3 - 2 * t);
|
|
6
|
-
};
|
|
7
|
-
var editorialLabel = (unit) => ({ fontSize: unit * 0.042, fontWeight: 400, color: "#b7b7bc", lineHeight: 1.25 });
|
|
8
|
-
|
|
9
|
-
export {
|
|
10
|
-
editorialFont,
|
|
11
|
-
fade,
|
|
12
|
-
editorialLabel
|
|
13
|
-
};
|