@vanillaskyai/video 0.8.8 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (173) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/PUBLIC-API.md +5 -8
  3. package/dist/{builtin-server-CUYPIDE7.js → builtin-server-W4PLJUZ5.js} +2 -2
  4. package/dist/{catalog-types-BIhSpOWK.d.ts → catalog-types-WTbLP6Jh.d.ts} +5 -1
  5. package/dist/chapter-title-YRLIQY3V.js +7 -0
  6. package/dist/check-runtime.js +5 -14
  7. package/dist/{chunk-AITKH6QT.js → chunk-2HFO22K2.js} +15 -40
  8. package/dist/chunk-4YM2M62S.js +13 -0
  9. package/dist/chunk-4ZJLPHBV.js +684 -0
  10. package/dist/chunk-77VY4O7A.js +390 -0
  11. package/dist/{chunk-MMUXVA47.js → chunk-7M56IUUX.js} +9 -8
  12. package/dist/chunk-7NZOMTAL.js +63 -0
  13. package/dist/{chunk-2DOLF4QN.js → chunk-AUPC6MDK.js} +12 -14
  14. package/dist/{chunk-352ZZCET.js → chunk-EGVQODKU.js} +2 -2
  15. package/dist/{chunk-2USVB3CY.js → chunk-ELVOT2FQ.js} +284 -177
  16. package/dist/chunk-EWWCQFTI.js +18 -0
  17. package/dist/{chunk-KT3M7KDL.js → chunk-HKUI5BTB.js} +3 -3
  18. package/dist/chunk-IIN5M5HW.js +697 -0
  19. package/dist/{chunk-LMG3GHLL.js → chunk-IQMYK5DX.js} +29 -3
  20. package/dist/{chunk-OWBT45EN.js → chunk-IR44XKBI.js} +1 -1
  21. package/dist/{chunk-MXZSDGZQ.js → chunk-NMFDC2W2.js} +4 -6
  22. package/dist/{chunk-5SLENAJW.js → chunk-PAJ44TFW.js} +1 -2
  23. package/dist/{chunk-L7QGGKJ2.js → chunk-PDQFQIQW.js} +1 -1
  24. package/dist/{chunk-WJ6FLKNC.js → chunk-R3XAOMKP.js} +14 -0
  25. package/dist/{chunk-2OKB27TG.js → chunk-RXTN2CW6.js} +2 -2
  26. package/dist/{chunk-XWWLKRNU.js → chunk-TVIU23OM.js} +38 -49
  27. package/dist/chunk-XX4GXKTX.js +35 -0
  28. package/dist/chunk-Z67Q5KUW.js +16 -0
  29. package/dist/{chunk-3VRMKFM7.js → chunk-ZDJNFA52.js} +11 -24
  30. package/dist/cinema-media-C7OUPNSH.js +12 -0
  31. package/dist/cli.js +18 -9
  32. package/dist/comparison-GNZOR7MF.js +37 -0
  33. package/dist/compose-video-TBFTONUC.js +12 -0
  34. package/dist/editorial-timeline-EMV5335S.js +43 -0
  35. package/dist/{events-BQ6z264n.d.ts → events-B4YCc4vc.d.ts} +1 -1
  36. package/dist/index.d.ts +4 -6
  37. package/dist/index.js +3 -7
  38. package/dist/key-figure-P37VK425.js +30 -0
  39. package/dist/{kit-tQnCPMOM.d.ts → kit-DrRpdn0p.d.ts} +2 -2
  40. package/dist/mobile-message-OF7T62B7.js +50 -0
  41. package/dist/quote-T6WYLN7A.js +33 -0
  42. package/dist/react.d.ts +21 -11
  43. package/dist/react.js +585 -826
  44. package/dist/scene-video-backdrop-PCTARAAJ.js +7 -0
  45. package/dist/server.d.ts +7 -8
  46. package/dist/server.js +179 -84
  47. package/dist/{system-prompt-RRXIWDDD.js → system-prompt-SYRT5DWM.js} +1 -1
  48. package/dist/template-catalog.d.ts +392 -16
  49. package/dist/template-catalog.js +1 -1
  50. package/dist/templates.d.ts +5 -5
  51. package/dist/test.d.ts +3 -3
  52. package/dist/test.js +18 -18
  53. package/dist/text-stream-LD364KBI.js +9 -0
  54. package/dist/{types-DWFO6qca.d.ts → types-CdBmNTGD.d.ts} +1 -1
  55. package/dist/{types-CEh9eUFu.d.ts → types-DdZw4GRQ.d.ts} +17 -48
  56. package/dist/validate-4OUD2CLX.js +10 -0
  57. package/docs/architecture.md +1 -1
  58. package/docs/concepts.md +1 -1
  59. package/docs/custom-templates.md +13 -28
  60. package/docs/customization.md +11 -59
  61. package/docs/getting-started.md +2 -2
  62. package/docs/immersive-interface.md +3 -4
  63. package/docs/maintainers/cinematic-migration.md +38 -0
  64. package/docs/media-and-audio.md +14 -14
  65. package/docs/motion-and-effects.md +6 -14
  66. package/docs/persistence.md +3 -3
  67. package/docs/production.md +11 -9
  68. package/docs/provider-integration.md +9 -16
  69. package/docs/reference/design-system.html +1 -1
  70. package/docs/reference/protocol.md +14 -4
  71. package/docs/testing.md +1 -1
  72. package/package.json +6 -3
  73. package/registry/items/backgrounds.json +1 -1
  74. package/registry/items/chapterTitle.json +80 -0
  75. package/registry/items/cinemaMedia.json +136 -0
  76. package/registry/items/comparison.json +168 -0
  77. package/registry/items/editorialTimeline.json +172 -0
  78. package/registry/items/keyFigure.json +162 -0
  79. package/registry/items/mobileMessage.json +153 -0
  80. package/registry/items/quote.json +161 -0
  81. package/registry/items/template-context.json +1 -1
  82. package/registry/items/theme.json +1 -1
  83. package/starters/video-chat/README.md +24 -26
  84. package/starters/video-chat/package.json +1 -1
  85. package/starters/video-chat/providers/video.ts +6 -5
  86. package/starters/video-chat/stock.ts +35 -151
  87. package/styles/fonts/OFL.txt +93 -0
  88. package/styles/fonts/manifest.json +66 -0
  89. package/styles/fonts/roboto-v51-cyrillic-ext.woff2 +0 -0
  90. package/styles/fonts/roboto-v51-cyrillic.woff2 +0 -0
  91. package/styles/fonts/roboto-v51-greek-ext.woff2 +0 -0
  92. package/styles/fonts/roboto-v51-greek.woff2 +0 -0
  93. package/styles/fonts/roboto-v51-latin-ext.woff2 +0 -0
  94. package/styles/fonts/roboto-v51-latin.woff2 +0 -0
  95. package/styles/fonts/roboto-v51-math.woff2 +0 -0
  96. package/styles/fonts/roboto-v51-symbols.woff2 +0 -0
  97. package/styles/fonts/roboto-v51-vietnamese.woff2 +0 -0
  98. package/styles/fonts/roboto.css +91 -0
  99. package/styles/video-chat.css +30 -22
  100. package/dist/bg-confetti-HITCGLGD.js +0 -89
  101. package/dist/bg-emoji-VU4UZYZN.js +0 -150
  102. package/dist/bg-media-L34PDQXJ.js +0 -106
  103. package/dist/brand-message-FUJ4STFO.js +0 -256
  104. package/dist/chart-bar-EGPHJATL.js +0 -310
  105. package/dist/chart-counter-5FFWQNZO.js +0 -306
  106. package/dist/chart-progress-ring-JMXQLMLC.js +0 -302
  107. package/dist/chunk-4UNKZEAT.js +0 -3575
  108. package/dist/chunk-5CDAM24P.js +0 -31
  109. package/dist/chunk-AOWSXU2K.js +0 -18
  110. package/dist/chunk-CJ7F2CE6.js +0 -104
  111. package/dist/chunk-FRN6WKHA.js +0 -185
  112. package/dist/chunk-G5JPHBX7.js +0 -336
  113. package/dist/chunk-L5BTTCZV.js +0 -97
  114. package/dist/chunk-P22HHFDK.js +0 -43
  115. package/dist/chunk-PP3MCPN4.js +0 -1998
  116. package/dist/chunk-QAAO7OAY.js +0 -19
  117. package/dist/chunk-S7HFLYNN.js +0 -35
  118. package/dist/chunk-W3VDIBGR.js +0 -217
  119. package/dist/chunk-XGRA2MUV.js +0 -242
  120. package/dist/chunk-XTOXFMLM.js +0 -105
  121. package/dist/chunk-YJJC4N4D.js +0 -761
  122. package/dist/compose-video-2NFH4DZY.js +0 -13
  123. package/dist/cta-logo-YR7LYUR5.js +0 -212
  124. package/dist/cta-media-DQJBKUO2.js +0 -221
  125. package/dist/incoming-call-54KQ7O5A.js +0 -323
  126. package/dist/infographic-before-after-ROS52GOW.js +0 -460
  127. package/dist/infographic-feature-list-E7MGUDAN.js +0 -272
  128. package/dist/infographic-problem-solution-3S6NGO5N.js +0 -343
  129. package/dist/infographic-stat-row-SYB7AB7H.js +0 -247
  130. package/dist/infographic-steps-KCE6JWE2.js +0 -406
  131. package/dist/prompt-input-MHX4O42G.js +0 -239
  132. package/dist/reaction-SLEGR3BE.js +0 -122
  133. package/dist/scene-video-backdrop-XFPX4O3I.js +0 -10
  134. package/dist/showcase-code-2HLAVKBM.js +0 -357
  135. package/dist/showcase-phone-Q4HEO4LH.js +0 -278
  136. package/dist/showcase-terminal-DL45LUFG.js +0 -312
  137. package/dist/showcase-web-2QZO73FZ.js +0 -396
  138. package/dist/social-conversation-75SD2637.js +0 -695
  139. package/dist/social-milestone-GEFUQSBF.js +0 -296
  140. package/dist/social-notification-FJ5VHVLK.js +0 -247
  141. package/dist/social-review-stack-KXQCKFRP.js +0 -242
  142. package/dist/social-testimonial-JZ7CHC7S.js +0 -287
  143. package/dist/social-tweet-UCDXM25F.js +0 -298
  144. package/dist/text-stream-54LXABJW.js +0 -10
  145. package/dist/validate-T7GBU2YF.js +0 -8
  146. package/registry/items/barChart.json +0 -245
  147. package/registry/items/beforeAfter.json +0 -180
  148. package/registry/items/bigNumber.json +0 -232
  149. package/registry/items/brandMessage.json +0 -164
  150. package/registry/items/cardList.json +0 -214
  151. package/registry/items/chatMessenger.json +0 -151
  152. package/registry/items/chatWhatsapp.json +0 -151
  153. package/registry/items/codeEditor.json +0 -191
  154. package/registry/items/confetti.json +0 -107
  155. package/registry/items/ctaLogo.json +0 -167
  156. package/registry/items/ctaMedia.json +0 -200
  157. package/registry/items/emojiBurst.json +0 -101
  158. package/registry/items/incomingCall.json +0 -177
  159. package/registry/items/media.json +0 -187
  160. package/registry/items/milestone.json +0 -212
  161. package/registry/items/notification.json +0 -189
  162. package/registry/items/phoneMockup.json +0 -261
  163. package/registry/items/problemSolution.json +0 -193
  164. package/registry/items/progressRing.json +0 -206
  165. package/registry/items/promptInput.json +0 -155
  166. package/registry/items/reaction.json +0 -176
  167. package/registry/items/reviewStack.json +0 -231
  168. package/registry/items/steps.json +0 -215
  169. package/registry/items/terminal.json +0 -219
  170. package/registry/items/testimonial.json +0 -171
  171. package/registry/items/tripleStats.json +0 -235
  172. package/registry/items/tweet.json +0 -210
  173. package/registry/items/webMockup.json +0 -280
@@ -0,0 +1,390 @@
1
+ import {
2
+ darken,
3
+ resolveTokens,
4
+ useMediaAudio
5
+ } from "./chunk-TVIU23OM.js";
6
+
7
+ // src/visual-system/scene-templates/scene-video-backdrop.tsx
8
+ import { useEffect, useRef, useState } from "react";
9
+
10
+ // src/visual-system/scene-templates/color-utils.ts
11
+ import React from "react";
12
+
13
+ // src/visual-system/theme/colors.ts
14
+ function orderDarkToLight(a, b) {
15
+ const luminance = (hex) => {
16
+ const match = hex.match(/^#([0-9a-f]{6})$/i);
17
+ if (!match) return 0;
18
+ const h = match[1];
19
+ return 0.299 * parseInt(h.slice(0, 2), 16) + 0.587 * parseInt(h.slice(2, 4), 16) + 0.114 * parseInt(h.slice(4, 6), 16);
20
+ };
21
+ return luminance(a) <= luminance(b) ? [a, b] : [b, a];
22
+ }
23
+
24
+ // src/visual-system/scene-templates/color-utils.ts
25
+ function gradientBackground({
26
+ colorA,
27
+ colorB,
28
+ solidBg,
29
+ progress,
30
+ sceneDuration,
31
+ seed,
32
+ family
33
+ }) {
34
+ if (solidBg) return solidBg;
35
+ const normalizedProgress = Math.max(0, Math.min(1, progress));
36
+ const atBoundary = normalizedProgress === 0 || normalizedProgress === 1;
37
+ const easedLoop = normalizedProgress * normalizedProgress * (3 - 2 * normalizedProgress);
38
+ const seedEnvelope = atBoundary ? 0 : Math.sin(normalizedProgress * Math.PI) ** 2;
39
+ void sceneDuration;
40
+ const seededRandom = (s) => {
41
+ const x = Math.sin(s * 12.9898 + s * 78.233) * 43758.5453;
42
+ return x - Math.floor(x);
43
+ };
44
+ const phase = seededRandom(seed) * Math.PI * 2 * seedEnvelope;
45
+ const t = (atBoundary ? 0 : easedLoop * Math.PI * 2) + phase;
46
+ const [topColor, bottomColor] = orderDarkToLight(colorA, colorB);
47
+ if (family === "wash") {
48
+ const shift = Math.sin(t) * 6;
49
+ return `linear-gradient(${175 + shift}deg, ${topColor} 0%, ${bottomColor} 100%)`;
50
+ }
51
+ if (family === "spotlight") {
52
+ const x = 50 + Math.sin(t) * 8;
53
+ const y = 28 + Math.cos(t + 1) * 5;
54
+ return `
55
+ radial-gradient(ellipse 70% 55% at ${x}% ${y}%, ${colorA}66 0%, ${colorA}1a 45%, transparent 72%),
56
+ linear-gradient(180deg, ${darken(topColor, 0.55)} 0%, ${darken(bottomColor, 0.7)} 100%)
57
+ `;
58
+ }
59
+ const x1 = 25 + Math.sin(t) * 25;
60
+ const y1 = 30 + Math.cos(t + 1) * 25;
61
+ const x2 = 75 + Math.sin(t + 2) * 25;
62
+ const y2 = 70 + Math.cos(t + 3.5) * 25;
63
+ return `
64
+ radial-gradient(ellipse 60% 60% at ${x1}% ${y1}%, ${colorA}4d 0%, transparent 65%),
65
+ radial-gradient(ellipse 60% 60% at ${x2}% ${y2}%, ${colorB}4d 0%, transparent 65%),
66
+ linear-gradient(180deg, ${topColor} 0%, ${bottomColor} 100%)
67
+ `;
68
+ }
69
+ var BrandGradientOverlay = ({ style: globalStyle, progress, sceneDuration, seed }) => {
70
+ const tokens = resolveTokens(globalStyle);
71
+ const [first, second] = tokens.background.type === "gradient" ? tokens.background.colors : [tokens.background.color, tokens.background.color];
72
+ const solidBg = tokens.background.type === "solid" ? tokens.background.color : void 0;
73
+ return React.createElement("div", {
74
+ "data-brand-gradient": "true",
75
+ style: {
76
+ position: "absolute",
77
+ inset: 0,
78
+ background: gradientBackground({ colorA: first, colorB: second, solidBg, progress, sceneDuration, seed, family: tokens.preset.background }),
79
+ pointerEvents: "none"
80
+ }
81
+ });
82
+ };
83
+
84
+ // src/visual-system/motion/curves.ts
85
+ function interpolate(value, inputRange, outputRange, options) {
86
+ const { easing, extrapolateLeft = "extend", extrapolateRight = "extend" } = options ?? {};
87
+ let i = 0;
88
+ for (; i < inputRange.length - 2; i++) {
89
+ if (value < inputRange[i + 1]) break;
90
+ }
91
+ const inputMin = inputRange[i];
92
+ const inputMax = inputRange[i + 1];
93
+ const outputMin = outputRange[i];
94
+ const outputMax = outputRange[i + 1];
95
+ let t = inputMax === inputMin ? 0 : (value - inputMin) / (inputMax - inputMin);
96
+ if (t < 0 && extrapolateLeft === "clamp") t = 0;
97
+ if (t > 1 && extrapolateRight === "clamp") t = 1;
98
+ if (easing && t >= 0 && t <= 1) {
99
+ t = easing(t);
100
+ }
101
+ return outputMin + t * (outputMax - outputMin);
102
+ }
103
+ function spring(progress, config) {
104
+ if (progress <= 0) return 0;
105
+ if (progress >= 1) {
106
+ const { damping: damping2 = 26 } = config ?? {};
107
+ if (damping2 >= 20) return 1;
108
+ }
109
+ const { damping = 26, stiffness = 170, mass = 1 } = config ?? {};
110
+ const omega = Math.sqrt(stiffness / mass);
111
+ const zeta = damping / (2 * Math.sqrt(stiffness * mass));
112
+ const t = progress * 3.5;
113
+ let value;
114
+ if (zeta < 1) {
115
+ const omegaD = omega * Math.sqrt(1 - zeta * zeta);
116
+ value = 1 - Math.exp(-zeta * omega * t) * (Math.cos(omegaD * t) + zeta * omega / omegaD * Math.sin(omegaD * t));
117
+ } else if (zeta === 1) {
118
+ value = 1 - Math.exp(-omega * t) * (1 + omega * t);
119
+ } else {
120
+ const s1 = -omega * (zeta + Math.sqrt(zeta * zeta - 1));
121
+ const s2 = -omega * (zeta - Math.sqrt(zeta * zeta - 1));
122
+ value = 1 + (s1 * Math.exp(s2 * t) - s2 * Math.exp(s1 * t)) / (s2 - s1);
123
+ }
124
+ return value;
125
+ }
126
+
127
+ // src/visual-system/scene-templates/background-effect.ts
128
+ var DIRECTIONS = ["right", "left", "up", "down"];
129
+ function getKenBurnsTransform(progress, direction) {
130
+ const scale = interpolate(progress, [0, 1], [1.05, 1.15]);
131
+ const mainAxis = direction === "right" || direction === "left";
132
+ const sign = direction === "right" || direction === "down" ? 1 : -1;
133
+ const primary = interpolate(progress, [0, 1], [-2 * sign, 2 * sign]);
134
+ const secondary = interpolate(progress, [0, 1], [-0.5, 0.5]);
135
+ const x = mainAxis ? primary : secondary;
136
+ const y = mainAxis ? secondary : primary;
137
+ return {
138
+ transform: `scale(${scale}) translate(${x}%, ${y}%)`,
139
+ transformOrigin: "center"
140
+ };
141
+ }
142
+ function getDriftTransform(progress, direction) {
143
+ const horizontal = direction === "right" || direction === "left";
144
+ const sign = direction === "right" || direction === "down" ? 1 : -1;
145
+ const offset = interpolate(progress, [0, 1], [-2 * sign, 2 * sign]);
146
+ return {
147
+ transform: horizontal ? `scale(1.1) translateX(${offset}%)` : `scale(1.1) translateY(${offset}%)`,
148
+ transformOrigin: "center"
149
+ };
150
+ }
151
+ function getBackgroundTransform(effect, progress, beatIntensity = 0, sceneIndex = 0) {
152
+ const dir = DIRECTIONS[sceneIndex % DIRECTIONS.length];
153
+ const resolved = effect ?? "static";
154
+ switch (resolved) {
155
+ case "slow-zoom-in":
156
+ return {
157
+ transform: `scale(${interpolate(progress, [0, 1], [1, 1.12])})`,
158
+ transformOrigin: "center"
159
+ };
160
+ case "slow-zoom-out":
161
+ return {
162
+ transform: `scale(${interpolate(progress, [0, 1], [1.12, 1])})`,
163
+ transformOrigin: "center"
164
+ };
165
+ case "ken-burns":
166
+ return getKenBurnsTransform(progress, dir);
167
+ case "drift":
168
+ return getDriftTransform(progress, dir);
169
+ case "pulse": {
170
+ const base = 1 + beatIntensity * 0.04;
171
+ const breathe = 1 + Math.sin(progress * Math.PI * 2) * 0.02;
172
+ return {
173
+ transform: `scale(${base * breathe})`,
174
+ transformOrigin: "center"
175
+ };
176
+ }
177
+ case "breathe": {
178
+ const s = 1 + Math.sin(progress * Math.PI) * 0.03;
179
+ const y = Math.sin(progress * Math.PI) * 0.5;
180
+ return {
181
+ transform: `scale(${s}) translateY(${y}%)`,
182
+ transformOrigin: "center"
183
+ };
184
+ }
185
+ case "slow-tilt": {
186
+ const angle = interpolate(progress, [0, 1], [0, 2.5]);
187
+ return {
188
+ transform: `scale(1.08) rotate(${angle}deg)`,
189
+ transformOrigin: "center"
190
+ };
191
+ }
192
+ case "camera-shake": {
193
+ const t = progress * 40;
194
+ const sx = Math.sin(t * 2.3) * 0.4 + Math.sin(t * 5.7) * 0.2;
195
+ const sy = Math.cos(t * 3.1) * 0.3 + Math.cos(t * 4.9) * 0.15;
196
+ const sr = Math.sin(t * 1.7) * 0.3;
197
+ return {
198
+ transform: `scale(1.05) translate(${sx}%, ${sy}%) rotate(${sr}deg)`,
199
+ transformOrigin: "center"
200
+ };
201
+ }
202
+ case "static":
203
+ default:
204
+ return {
205
+ transform: "none",
206
+ transformOrigin: "center"
207
+ };
208
+ }
209
+ }
210
+
211
+ // src/visual-system/scene-templates/media-position.ts
212
+ var MEDIA_POSITIONS = {
213
+ center: "center center",
214
+ top: "center top",
215
+ bottom: "center bottom",
216
+ left: "left center",
217
+ right: "right center"
218
+ };
219
+ function resolveMediaPosition(value) {
220
+ return MEDIA_POSITIONS[value] ?? MEDIA_POSITIONS.center;
221
+ }
222
+
223
+ // src/visual-system/scene-templates/scene-video-backdrop.tsx
224
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
225
+ var SceneVideoBackdrop = ({
226
+ mediaUrl,
227
+ mediaPoster,
228
+ mediaPosition = "center",
229
+ backgroundEffect,
230
+ progress,
231
+ beatIntensity = 0,
232
+ isPlaying,
233
+ muted,
234
+ volume,
235
+ playbackId = mediaUrl,
236
+ retainPoster = false,
237
+ persistent = false,
238
+ preparedPoster,
239
+ onReady,
240
+ onError
241
+ }) => {
242
+ const inheritedAudio = useMediaAudio();
243
+ const resolvedMuted = muted ?? inheritedAudio.muted;
244
+ const resolvedVolume = volume ?? inheritedAudio.volume;
245
+ const resolvedPosition = resolveMediaPosition(mediaPosition);
246
+ const bgTransform = getBackgroundTransform(backgroundEffect, progress, beatIntensity);
247
+ const [decodedVideoUrl, setDecodedVideoUrl] = useState();
248
+ const videoRef = useRef(null);
249
+ const startedVideoUrl = useRef(void 0);
250
+ const startedPlaybackId = useRef(void 0);
251
+ const videoPresentationKey = `${playbackId}\0${mediaUrl}`;
252
+ useEffect(() => {
253
+ const video = videoRef.current;
254
+ if (!video) return;
255
+ if (video.getAttribute("src") !== mediaUrl) {
256
+ video.setAttribute("src", mediaUrl);
257
+ video.load();
258
+ }
259
+ return () => {
260
+ video.pause();
261
+ video.removeAttribute("src");
262
+ video.load();
263
+ startedVideoUrl.current = void 0;
264
+ startedPlaybackId.current = void 0;
265
+ };
266
+ }, [mediaUrl]);
267
+ useEffect(() => {
268
+ const video = videoRef.current;
269
+ if (video) video.volume = resolvedVolume;
270
+ }, [resolvedVolume]);
271
+ useEffect(() => {
272
+ const video = videoRef.current;
273
+ if (!video) return;
274
+ if (!isPlaying) {
275
+ video.pause();
276
+ return;
277
+ }
278
+ if (startedPlaybackId.current === playbackId) {
279
+ if (!video.ended) void video.play().catch(() => {
280
+ });
281
+ return;
282
+ }
283
+ const changingSource = startedVideoUrl.current !== void 0 && startedVideoUrl.current !== mediaUrl;
284
+ video.playbackRate = 1;
285
+ if (!changingSource && video.currentTime > 0) video.currentTime = 0;
286
+ video.play().catch(() => {
287
+ });
288
+ startedVideoUrl.current = mediaUrl;
289
+ startedPlaybackId.current = playbackId;
290
+ }, [isPlaying, mediaUrl, playbackId]);
291
+ const mediaStyle = {
292
+ position: "absolute",
293
+ inset: 0,
294
+ width: "100%",
295
+ height: "100%",
296
+ objectFit: "cover",
297
+ objectPosition: resolvedPosition,
298
+ transform: bgTransform.transform,
299
+ transformOrigin: bgTransform.transformOrigin,
300
+ zIndex: persistent ? 1 : void 0
301
+ };
302
+ const preparedPosition = preparedPoster ? resolveMediaPosition(preparedPoster.mediaPosition) : resolvedPosition;
303
+ const preparedTransform = getBackgroundTransform(preparedPoster?.backgroundEffect, 0, 0);
304
+ const posterPlanes = [
305
+ ...persistent && mediaPoster ? [{
306
+ presentationKey: videoPresentationKey,
307
+ mediaPoster,
308
+ mediaPosition: resolvedPosition,
309
+ transform: bgTransform.transform,
310
+ transformOrigin: bgTransform.transformOrigin,
311
+ opacity: 1,
312
+ zIndex: 0,
313
+ role: "current"
314
+ }] : [],
315
+ ...preparedPoster && preparedPoster.presentationKey !== videoPresentationKey ? [{
316
+ presentationKey: preparedPoster.presentationKey,
317
+ mediaPoster: preparedPoster.mediaPoster,
318
+ mediaPosition: preparedPosition,
319
+ transform: preparedTransform.transform,
320
+ transformOrigin: preparedTransform.transformOrigin,
321
+ opacity: preparedPoster.opacity ?? 0,
322
+ zIndex: 2,
323
+ role: "prepared"
324
+ }] : []
325
+ ];
326
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
327
+ posterPlanes.map((posterPlane) => /* @__PURE__ */ jsx(
328
+ "img",
329
+ {
330
+ src: posterPlane.mediaPoster,
331
+ alt: "",
332
+ "aria-hidden": "true",
333
+ draggable: false,
334
+ "data-video-poster-plane": posterPlane.role,
335
+ "data-video-poster-visible": posterPlane.opacity > 0 ? "true" : "false",
336
+ style: {
337
+ position: "absolute",
338
+ inset: 0,
339
+ width: "100%",
340
+ height: "100%",
341
+ objectFit: "cover",
342
+ objectPosition: posterPlane.mediaPosition,
343
+ transform: posterPlane.transform,
344
+ transformOrigin: posterPlane.transformOrigin,
345
+ zIndex: posterPlane.zIndex,
346
+ opacity: posterPlane.opacity,
347
+ pointerEvents: "none"
348
+ }
349
+ },
350
+ posterPlane.presentationKey
351
+ )),
352
+ /* @__PURE__ */ jsx(
353
+ "video",
354
+ {
355
+ ref: videoRef,
356
+ src: mediaUrl,
357
+ poster: retainPoster || decodedVideoUrl !== mediaUrl ? mediaPoster || void 0 : void 0,
358
+ muted: resolvedMuted,
359
+ loop: false,
360
+ playsInline: true,
361
+ preload: "auto",
362
+ onLoadedData: (event) => {
363
+ const video = event.currentTarget;
364
+ const markPresented = () => {
365
+ if (!video.isConnected) return;
366
+ onReady?.();
367
+ if (!retainPoster) setDecodedVideoUrl(mediaUrl);
368
+ };
369
+ if (video.requestVideoFrameCallback) {
370
+ video.requestVideoFrameCallback(markPresented);
371
+ return;
372
+ }
373
+ markPresented();
374
+ },
375
+ onError,
376
+ "data-media-position": mediaPosition,
377
+ "data-video-backdrop": persistent ? "persistent" : "scene",
378
+ style: mediaStyle
379
+ }
380
+ )
381
+ ] });
382
+ };
383
+
384
+ export {
385
+ BrandGradientOverlay,
386
+ spring,
387
+ getBackgroundTransform,
388
+ resolveMediaPosition,
389
+ SceneVideoBackdrop
390
+ };
@@ -1,10 +1,9 @@
1
1
  import {
2
2
  VIDEO_PROTOCOL_VERSION,
3
- VIDEO_SCHEMA_VERSION
4
- } from "./chunk-AOWSXU2K.js";
5
- import {
6
- validateVideoBrand
7
- } from "./chunk-XGRA2MUV.js";
3
+ VIDEO_SCHEMA_VERSION,
4
+ validateNarrationGroup,
5
+ validateNarrationGroups
6
+ } from "./chunk-7NZOMTAL.js";
8
7
 
9
8
  // src/protocol/warnings.ts
10
9
  var VIDEO_WARNING_CATEGORIES = {
@@ -144,7 +143,8 @@ function scene(value, path) {
144
143
  "textArchetype",
145
144
  "backgroundEffect",
146
145
  "timing",
147
- "narration"
146
+ "narration",
147
+ "narrationGroup"
148
148
  ], path);
149
149
  string(result.id, `${path}.id`);
150
150
  string(result.templateId, `${path}.templateId`);
@@ -154,6 +154,7 @@ function scene(value, path) {
154
154
  if (result.textArchetype != null) string(result.textArchetype, `${path}.textArchetype`);
155
155
  if (result.backgroundEffect != null) string(result.backgroundEffect, `${path}.backgroundEffect`);
156
156
  if (result.narration != null) string(result.narration, `${path}.narration`);
157
+ if (result.narrationGroup !== void 0) validateNarrationGroup(result.narrationGroup);
157
158
  return result;
158
159
  }
159
160
  function capabilities(value, path) {
@@ -175,7 +176,6 @@ function capabilities(value, path) {
175
176
  function style(value, path) {
176
177
  const result = record(value, path);
177
178
  allowedKeys(result, [
178
- "brand",
179
179
  "preset",
180
180
  "defaultBackgroundEffect",
181
181
  "defaultTextArchetype",
@@ -184,7 +184,6 @@ function style(value, path) {
184
184
  "motion",
185
185
  "generatedLook"
186
186
  ], path);
187
- validateVideoBrand(result.brand, `${path}.brand`);
188
187
  if (result.generatedLook != null) string(result.generatedLook, `${path}.generatedLook`);
189
188
  return result;
190
189
  }
@@ -247,6 +246,7 @@ function config(value, path) {
247
246
  }
248
247
  if (!Array.isArray(result.scenes)) throw new Error(`${path}.scenes must be an array`);
249
248
  result.scenes.forEach((item, index) => scene(item, `${path}.scenes[${index}]`));
249
+ validateNarrationGroups(result.scenes);
250
250
  style(result.style, `${path}.style`);
251
251
  if (result.orientation != null && result.orientation !== "portrait" && result.orientation !== "landscape") {
252
252
  throw new Error(`${path}.orientation is unsupported`);
@@ -347,6 +347,7 @@ function parseVideoPlanPart(value) {
347
347
  throw new Error("plan part.placement is unsupported");
348
348
  }
349
349
  scene(part.scene, "plan part.scene");
350
+ if (part.scene.narrationGroup !== void 0) throw new Error("narrationGroup is host-authored and cannot be emitted by a planner");
350
351
  } else if (type === "plan.complete") {
351
352
  allowedKeys(part, ["type", "finishReason"], "plan part");
352
353
  if (part.finishReason != null && !["stop", "length", "content-filter", "other"].includes(String(part.finishReason))) {
@@ -0,0 +1,63 @@
1
+ // src/protocol/narration-group.ts
2
+ var close = (a, b) => Math.abs(a - b) <= 0.02;
3
+ var normalized = (text) => text.trim().replace(/\s+/gu, " ");
4
+ function validateNarrationGroup(value) {
5
+ if (!value || typeof value !== "object" || Array.isArray(value)) throw new Error("Invalid narrationGroup");
6
+ const group = value;
7
+ if (Object.keys(group).some((key) => !["id", "text", "offsetSeconds", "durationSeconds", "totalSeconds"].includes(key))) throw new Error("Unknown narrationGroup field");
8
+ for (const [key, maximum] of [["id", 128], ["text", 4e3]]) {
9
+ if (typeof group[key] !== "string" || !group[key].trim() || group[key].length > maximum) throw new Error(`Invalid narrationGroup.${key}`);
10
+ }
11
+ for (const key of ["offsetSeconds", "durationSeconds", "totalSeconds"]) {
12
+ const number = group[key];
13
+ if (typeof number !== "number" || !Number.isFinite(number) || number < 0 || number > 1800 || key !== "offsetSeconds" && number === 0) throw new Error(`Invalid narrationGroup.${key}`);
14
+ }
15
+ if (group.offsetSeconds + group.durationSeconds > group.totalSeconds + 0.02) throw new Error("Narration group segment exceeds its audio");
16
+ }
17
+ function validateNarrationGroups(scenes) {
18
+ const seen = /* @__PURE__ */ new Set();
19
+ for (let index = 0; index < scenes.length; ) {
20
+ const first = scenes[index]?.narrationGroup;
21
+ if (!first) {
22
+ index++;
23
+ continue;
24
+ }
25
+ validateNarrationGroup(first);
26
+ if (seen.has(first.id) || !close(first.offsetSeconds, 0)) throw new Error("Narration groups must be contiguous and start at zero");
27
+ seen.add(first.id);
28
+ let offset = 0;
29
+ const fragments = [];
30
+ while (index < scenes.length && scenes[index]?.narrationGroup?.id === first.id) {
31
+ const scene = scenes[index];
32
+ const group = scene.narrationGroup;
33
+ validateNarrationGroup(group);
34
+ if (group.text !== first.text || !close(group.totalSeconds, first.totalSeconds) || !close(group.offsetSeconds, offset)) throw new Error("Narration group segments must share audio and contiguous offsets");
35
+ if (!close(scene.timing.fixedDuration ?? -1, group.durationSeconds)) throw new Error("Narration group duration must match fixed scene duration");
36
+ fragments.push(scene.narration ?? "");
37
+ offset += group.durationSeconds;
38
+ index++;
39
+ }
40
+ if (!close(offset, first.totalSeconds) || normalized(fragments.join(" ")) !== normalized(first.text)) throw new Error("Narration group must cover its complete spoken paragraph");
41
+ }
42
+ }
43
+
44
+ // src/protocol/types.ts
45
+ var VIDEO_PROTOCOL_VERSION = "0.6";
46
+ var VIDEO_SCHEMA_VERSION = "0.2";
47
+ function createVideoRequest(input, options) {
48
+ return {
49
+ protocolVersion: VIDEO_PROTOCOL_VERSION,
50
+ requestId: options.requestId,
51
+ input,
52
+ ...options.capabilities ? { capabilities: options.capabilities } : {},
53
+ ...options.resume ? { resume: options.resume } : {}
54
+ };
55
+ }
56
+
57
+ export {
58
+ validateNarrationGroup,
59
+ validateNarrationGroups,
60
+ VIDEO_PROTOCOL_VERSION,
61
+ VIDEO_SCHEMA_VERSION,
62
+ createVideoRequest
63
+ };
@@ -1,9 +1,8 @@
1
1
  import {
2
- VIDEO_SCHEMA_VERSION
3
- } from "./chunk-AOWSXU2K.js";
4
- import {
5
- validateVideoBrand
6
- } from "./chunk-XGRA2MUV.js";
2
+ VIDEO_SCHEMA_VERSION,
3
+ validateNarrationGroup,
4
+ validateNarrationGroups
5
+ } from "./chunk-7NZOMTAL.js";
7
6
 
8
7
  // src/protocol/persistence.ts
9
8
  var MAX_RETAINED_SOURCE_LENGTH = 16384;
@@ -274,7 +273,8 @@ function validateScene(value, path) {
274
273
  "textArchetype",
275
274
  "backgroundEffect",
276
275
  "timing",
277
- "narration"
276
+ "narration",
277
+ "narrationGroup"
278
278
  ], path);
279
279
  nonEmptyString(requiredField(result, "id", `${path}.id`), `${path}.id`, 128);
280
280
  nonEmptyString(requiredField(result, "templateId", `${path}.templateId`), `${path}.templateId`, 128);
@@ -288,12 +288,12 @@ function validateScene(value, path) {
288
288
  }
289
289
  const narration = ownField(result, "narration", `${path}.narration`);
290
290
  if (narration.present) nonEmptyString(narration.value, `${path}.narration`, 4e3);
291
+ if (result.narrationGroup !== void 0) validateNarrationGroup(result.narrationGroup);
291
292
  return result;
292
293
  }
293
294
  function validateStyle(value, path) {
294
295
  const result = record(value, path);
295
296
  allowedKeys(result, [
296
- "brand",
297
297
  "preset",
298
298
  "defaultBackgroundEffect",
299
299
  "defaultTextArchetype",
@@ -302,13 +302,6 @@ function validateStyle(value, path) {
302
302
  "motion",
303
303
  "generatedLook"
304
304
  ], path);
305
- const brandValue = requiredField(result, "brand", `${path}.brand`);
306
- const brand = record(brandValue, `${path}.brand`);
307
- for (const key of ["name", "logoUrl"]) {
308
- const field = ownField(brand, key, `${path}.brand.${key}`);
309
- if (field.present) nonEmptyString(field.value, `${path}.brand.${key}`);
310
- }
311
- validateVideoBrand(brandValue, `${path}.brand`);
312
305
  const look = ownField(result, "generatedLook", `${path}.generatedLook`);
313
306
  if (look.present) nonEmptyString(look.value, `${path}.generatedLook`, 1e3);
314
307
  for (const key of [
@@ -450,6 +443,11 @@ function validateCurrentVideo(value) {
450
443
  for (let index = 0; index < sceneItems.length; index += 1) {
451
444
  scenes[index] = validateScene(sceneItems[index], `video.scenes[${index}]`);
452
445
  }
446
+ try {
447
+ validateNarrationGroups(scenes);
448
+ } catch (error) {
449
+ fail(error instanceof Error ? error.message : "Invalid narration groups");
450
+ }
453
451
  const ids = /* @__PURE__ */ new Set();
454
452
  let cursor = 0;
455
453
  for (let index = 0; index < scenes.length; index += 1) {
@@ -1,7 +1,7 @@
1
1
  // src/visual-system/catalog/value-validation.ts
2
2
  var STRING_FORMATS = /* @__PURE__ */ new Set(["uri", "supplied-image", "grounded-quote", "stock-media-keyword", "emoji"]);
3
3
  function isTemplatePropertyFormatSupported(format, type) {
4
- return format === "grounded-stat" ? type === "number" || type === "integer" : STRING_FORMATS.has(format) && type === "string";
4
+ return format === "grounded-stat" ? type === "string" || type === "number" || type === "integer" : STRING_FORMATS.has(format) && type === "string";
5
5
  }
6
6
  function validUrl(value) {
7
7
  try {
@@ -25,7 +25,7 @@ function validateTemplateSchemaValue(schema, value, path, options = {}) {
25
25
  const text = value;
26
26
  if (schema.minLength != null && text.length < schema.minLength) fail(`must contain at least ${schema.minLength} characters`);
27
27
  if (schema.maxLength != null && text.length > schema.maxLength) fail(`must contain at most ${schema.maxLength} characters`);
28
- if (schema.format === "uri" || schema.format === "supplied-image") {
28
+ if (!options.deferMediaUrls && (schema.format === "uri" || schema.format === "supplied-image")) {
29
29
  const emptySentinel = options.allowEmptyOptionalMedia && options.optional && text === "";
30
30
  if (!emptySentinel && !validUrl(text)) fail("must be a valid URL");
31
31
  }