@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.
Files changed (127) hide show
  1. package/CHANGELOG.md +69 -0
  2. package/PUBLIC-API.md +47 -438
  3. package/README.md +53 -97
  4. package/dist/builtin-metadata-OT6V7TB4.js +8 -0
  5. package/dist/{chapter-title-2JVDU62E.js → chapter-title-2RCXX7SN.js} +1 -2
  6. package/dist/{chunk-5BSJLT6H.js → chunk-2WIETEL7.js} +16 -29
  7. package/dist/{chunk-3O7OMMMF.js → chunk-35K6IKB2.js} +3 -3
  8. package/dist/{chunk-PDQFQIQW.js → chunk-3EQ6PVWL.js} +1 -1
  9. package/dist/chunk-4G4JBMCM.js +37 -0
  10. package/dist/{chunk-7AA2JWHZ.js → chunk-5DOQTIMD.js} +6 -6
  11. package/dist/chunk-666HGTVZ.js +41 -0
  12. package/dist/{chunk-7M56IUUX.js → chunk-6Z3ID54H.js} +0 -18
  13. package/dist/chunk-AUN4S3YW.js +50 -0
  14. package/dist/chunk-HIQM4J3U.js +30 -0
  15. package/dist/chunk-ISWQ6T5X.js +36 -0
  16. package/dist/{chunk-224QNWRA.js → chunk-K5J7ESRO.js} +1 -10
  17. package/dist/chunk-NM4CXXZY.js +25 -0
  18. package/dist/{chunk-44WND2VP.js → chunk-RFXHLLYU.js} +34 -62
  19. package/dist/{chunk-RXTN2CW6.js → chunk-Z3DLSLAJ.js} +1 -1
  20. package/dist/cinema-media-YZ2UANJG.js +365 -0
  21. package/dist/cli.js +154 -1748
  22. package/dist/{compose-video-BH5K6XWT.js → compose-video-RSLI4CVP.js} +4 -4
  23. package/dist/{events-B4YCc4vc.d.ts → events-BZAfl0Dm.d.ts} +1 -1
  24. package/dist/index.d.ts +2 -2
  25. package/dist/index.js +4 -6
  26. package/dist/preload-media-23JXUFCF.js +77 -0
  27. package/dist/react.d.ts +39 -15
  28. package/dist/react.js +1355 -740
  29. package/dist/scene-validation-SGLLLFY5.js +9 -0
  30. package/dist/server.d.ts +67 -117
  31. package/dist/server.js +296 -626
  32. package/dist/test.d.ts +2 -2
  33. package/dist/test.js +21 -21
  34. package/dist/{text-stream-LD364KBI.js → text-stream-SOVLYR2L.js} +2 -2
  35. package/dist/{types-BqB8zC9u.d.ts → types-CG-kPI81.d.ts} +3 -1
  36. package/dist/{types-DdZw4GRQ.d.ts → types-ht-Zw3Wv.d.ts} +1 -1
  37. package/docs/agent-integration.md +19 -64
  38. package/docs/architecture.md +80 -106
  39. package/docs/customization.md +49 -66
  40. package/docs/development.md +18 -17
  41. package/docs/errors.md +4 -4
  42. package/docs/getting-started.md +74 -93
  43. package/docs/media-and-audio.md +9 -7
  44. package/docs/performance.md +11 -6
  45. package/docs/persistence.md +3 -7
  46. package/docs/production.md +4 -15
  47. package/docs/prompt-and-input.md +1 -2
  48. package/docs/provider-integration.md +156 -181
  49. package/docs/reference/protocol.md +5 -14
  50. package/docs/reference/provider-adapters.md +21 -13
  51. package/docs/security.md +1 -14
  52. package/docs/testing.md +56 -123
  53. package/package.json +4 -25
  54. package/starters/video-chat/.env.example +12 -4
  55. package/starters/video-chat/.env.native.example +13 -0
  56. package/starters/video-chat/README.md +72 -11
  57. package/starters/video-chat/package.json +1 -1
  58. package/starters/video-chat/providers/text-native.ts +94 -0
  59. package/starters/video-chat/providers/text.ts +19 -0
  60. package/starters/video-chat/providers/transcription.ts +32 -0
  61. package/starters/video-chat/providers/video-custom.ts +45 -0
  62. package/starters/video-chat/providers/video-delivery.ts +57 -0
  63. package/starters/video-chat/providers/video-google.ts +48 -0
  64. package/starters/video-chat/providers/video-job.ts +103 -0
  65. package/starters/video-chat/providers/video-runway.ts +45 -0
  66. package/starters/video-chat/providers/video.ts +39 -63
  67. package/starters/video-chat/server.ts +3 -29
  68. package/starters/video-chat/vite.config.ts +2 -8
  69. package/styles/video-chat.css +8 -105
  70. package/dist/builtin-server-W4PLJUZ5.js +0 -8
  71. package/dist/catalog-types-WTbLP6Jh.d.ts +0 -78
  72. package/dist/check-runtime.d.ts +0 -15
  73. package/dist/check-runtime.js +0 -96
  74. package/dist/chunk-2E6T633S.js +0 -27
  75. package/dist/chunk-4YM2M62S.js +0 -13
  76. package/dist/chunk-4ZJLPHBV.js +0 -684
  77. package/dist/chunk-5JBMYQP6.js +0 -156
  78. package/dist/chunk-73NTSFFI.js +0 -81
  79. package/dist/chunk-EGVQODKU.js +0 -83
  80. package/dist/chunk-HFVNAPHZ.js +0 -35
  81. package/dist/chunk-IIN5M5HW.js +0 -697
  82. package/dist/chunk-IQMYK5DX.js +0 -133
  83. package/dist/chunk-IR44XKBI.js +0 -46
  84. package/dist/chunk-JKVOBTRO.js +0 -145
  85. package/dist/chunk-LVM5Q2DL.js +0 -68
  86. package/dist/chunk-M4QTEJTK.js +0 -709
  87. package/dist/chunk-QSBDB4J2.js +0 -16
  88. package/dist/chunk-R3XAOMKP.js +0 -29
  89. package/dist/chunk-SPVTJH3F.js +0 -24
  90. package/dist/chunk-YAHT3LST.js +0 -663
  91. package/dist/chunk-ZD2VTUYR.js +0 -28
  92. package/dist/cinema-media-HYCDG65Z.js +0 -11
  93. package/dist/comparison-XXAP4S4J.js +0 -36
  94. package/dist/editorial-timeline-VUQC6KPA.js +0 -42
  95. package/dist/key-figure-4TJK7HLT.js +0 -29
  96. package/dist/kit-DrRpdn0p.d.ts +0 -79
  97. package/dist/mobile-message-FIHAO6XC.js +0 -49
  98. package/dist/preload-media-LJXWKTWG.js +0 -57
  99. package/dist/quote-GRPIYKQJ.js +0 -32
  100. package/dist/system-prompt-AG26KJAA.js +0 -12
  101. package/dist/template-catalog.d.ts +0 -400
  102. package/dist/template-catalog.js +0 -6
  103. package/dist/templates.d.ts +0 -25
  104. package/dist/templates.js +0 -102
  105. package/dist/validate-4OUD2CLX.js +0 -10
  106. package/docs/concepts.md +0 -107
  107. package/docs/custom-templates.md +0 -346
  108. package/docs/immersive-interface.md +0 -86
  109. package/docs/motion-and-effects.md +0 -109
  110. package/docs/reference/design-system.html +0 -125
  111. package/docs/responsive-orientation.md +0 -37
  112. package/docs/streaming-protocol.md +0 -15
  113. package/examples/custom-template/README.md +0 -19
  114. package/examples/custom-template/minimal-text.tsx +0 -82
  115. package/examples/custom-template/structured-data.tsx +0 -104
  116. package/registry/items/backgrounds.json +0 -70
  117. package/registry/items/chapterTitle.json +0 -80
  118. package/registry/items/cinemaMedia.json +0 -136
  119. package/registry/items/comparison.json +0 -168
  120. package/registry/items/editorialTimeline.json +0 -172
  121. package/registry/items/keyFigure.json +0 -162
  122. package/registry/items/mobileMessage.json +0 -153
  123. package/registry/items/motion.json +0 -45
  124. package/registry/items/quote.json +0 -161
  125. package/registry/items/template-context.json +0 -31
  126. package/registry/items/theme.json +0 -47
  127. package/registry/items/typography.json +0 -47
@@ -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; color: oklch(0.8 0.11 268); }
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 { display: flex; gap: 0.15rem; margin-top: 0.6rem; align-self: center; }
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 { display: grid; align-items: center; min-height: 0; background: var(--vs-bg); }
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; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: -.02em; line-height: 1.45; text-shadow: 0 1px 6px rgb(0 0 0 / 30%); }
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); aspect-ratio: 1.65; border-radius: 14px; box-shadow: 0 8px 30px rgb(0 0 0 / 24%); background: #202438; }
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; transition: opacity 180ms ease; }
602
+ .vanillasky-video-chat .caption-actions { display: flex; flex-shrink: 0; align-self: center; gap: 2px; }
666
603
 
667
- .vanillasky-video-chat .caption-action { display: grid; 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; }
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; overflow: visible; border-radius: 12px; }
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,8 +0,0 @@
1
- import {
2
- BUILTIN_SERVER_TEMPLATE_KIT
3
- } from "./chunk-IR44XKBI.js";
4
- import "./chunk-IIN5M5HW.js";
5
- import "./chunk-2E6T633S.js";
6
- export {
7
- BUILTIN_SERVER_TEMPLATE_KIT
8
- };
@@ -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 };
@@ -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 };
@@ -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
- };
@@ -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
- };
@@ -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
- };