@vanillaskyai/video 0.8.8 → 0.9.0

package/dist/focus-cards-TJ72BT7U.js

@@ -0,0 +1,20 @@
+import {
+  editorialFont,
+  fade
+} from "./chunk-4YM2M62S.js";
+
+// src/visual-system/scene-templates/focus-cards.tsx
+import { jsx } from "react/jsx-runtime";
+function CardsScene({ variables, width, height, progress, motionProgress = progress, safeZone }) {
+  const items = (Array.isArray(variables.items) ? variables.items : []).filter((v) => typeof v === "string" && !!v.trim()).slice(0, 4);
+  const u = Math.min(width, height), n = Math.max(1, items.length);
+  const side = Math.max(width * 0.12, safeZone.left, safeZone.right), available = width - side * 2;
+  const top = Math.max(height * 0.18, safeZone.top), bottom = height - Math.max(height * 0.22, safeZone.bottom);
+  const font = u * 0.057, slot = Math.min(u * 0.17, (bottom - top) / n), groupHeight = slot * n;
+  const listTop = top + (bottom - top - groupHeight) / 2;
+  return /* @__PURE__ */ jsx("div", { "data-template": "cards", style: { position: "absolute", inset: 0, overflow: "hidden", background: "#000", color: "#fff", fontFamily: editorialFont }, children: items.map((text, i) => /* @__PURE__ */ jsx("div", { "data-template-item": "cardList", style: { position: "absolute", left: side, top: listTop + i * slot, width: available, height: slot, display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", fontSize: Math.min(font, slot / (Math.max(1, Math.ceil(text.length * font * 0.52 / available)) * 1.6)), fontWeight: 500, lineHeight: 1.22, letterSpacing: "-.025em", textWrap: "balance", overflowWrap: "anywhere", opacity: fade((motionProgress - 0.04 - i * 0.14) / 0.18) }, children: text }, i)) });
+}
+var CardsSceneTemplate = CardsScene;
+export {
+  CardsSceneTemplate
+};

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { c as Video, h as VideoBrandInput, i as VideoBrand, e as VideoScene, j as VideoTemplatePacing } from './types-CEh9eUFu.js';
-export { d as VideoAudio, k as VideoBackground, b as VideoOrientation, V as VideoStyle, l as VideoStyleOptions } from './types-CEh9eUFu.js';
+import { c as Video, e as VideoScene, g as VideoTemplatePacing } from './types-DdZw4GRQ.js';
+export { d as VideoAudio, h as VideoNarrationGroup, b as VideoOrientation, V as VideoStyle, i as VideoStyleOptions } from './types-DdZw4GRQ.js';
 
 type VideoStatus = "idle" | "streaming" | "complete" | "error" | "aborted";
 
@@ -8,13 +8,11 @@ declare class VideoValidationError extends Error {
     readonly code: VideoValidationErrorCode;
     constructor(message: string, code?: VideoValidationErrorCode);
 }
-/** Parse a persisted Video using the current-only 0.1 schema policy. */
+/** Parse a persisted Video using the current-only 0.2 schema policy. */
 declare function parseVideo(value: unknown): Video;
 
 declare function getVideoDuration(config: Video): number;
 
-declare function resolveVideoBrand(input?: VideoBrandInput): VideoBrand;
-
 interface SceneDurationBounds {
     /**
      * The least this scene survives being shown for.
@@ -38,4 +36,4 @@ declare function getSceneDurationBounds(scene: Pick<VideoScene, "variables">, me
 declare function getSpokenDuration(narration: string): number;
 declare function getSceneDuration(scene: Pick<VideoScene, "variables" | "narration">, metadata: VideoTemplatePacing | undefined): number;
 
-export { type SceneDurationBounds, Video, VideoBrand, VideoBrandInput, VideoScene, type VideoStatus, VideoValidationError, type VideoValidationErrorCode, getSceneDuration, getSceneDurationBounds, getSpokenDuration, getVideoDuration, parseVideo, resolveVideoBrand };
+export { type SceneDurationBounds, Video, VideoScene, type VideoStatus, VideoValidationError, type VideoValidationErrorCode, getSceneDuration, getSceneDurationBounds, getSpokenDuration, getVideoDuration, parseVideo };

package/dist/index.js

@@ -6,21 +6,17 @@ import {
 import {
   VideoValidationError,
   parseVideo
-} from "./chunk-2DOLF4QN.js";
-import "./chunk-AOWSXU2K.js";
+} from "./chunk-AUPC6MDK.js";
+import "./chunk-7NZOMTAL.js";
 import "./chunk-3O7OMMMF.js";
 import {
   getVideoDuration
 } from "./chunk-SPVTJH3F.js";
-import {
-  resolveVideoBrand
-} from "./chunk-XGRA2MUV.js";
 export {
   VideoValidationError,
   getSceneDuration,
   getSceneDurationBounds,
   getSpokenDuration,
   getVideoDuration,
-  parseVideo,
-  resolveVideoBrand
+  parseVideo
 };

package/dist/key-figure-GYENXKH3.js

@@ -0,0 +1,20 @@
+import {
+  editorialFont,
+  editorialLabel,
+  fade
+} from "./chunk-4YM2M62S.js";
+
+// src/visual-system/scene-templates/key-figure.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function KeyFigureScene({ variables, width, height, progress, motionProgress = progress, safeZone }) {
+  const u = Math.min(width, height), side = Math.max(width * 0.13, safeZone.left, safeZone.right), available = width - side * 2;
+  const top = Math.max(height * 0.16, safeZone.top), bottom = height - Math.max(height * 0.23, safeZone.bottom), value = String(variables.value ?? "");
+  return /* @__PURE__ */ jsx("div", { "data-template": "keyFigure", style: { position: "absolute", inset: 0, background: "#000", color: "#fff", fontFamily: editorialFont, overflow: "hidden" }, children: /* @__PURE__ */ jsxs("div", { style: { position: "absolute", left: side, top: (top + bottom) / 2, width: available, transform: "translateY(-50%)", textAlign: "center", opacity: fade((motionProgress - 0.03) / 0.22) }, children: [
+    /* @__PURE__ */ jsx("div", { style: { fontSize: Math.min(u * 0.22, available / Math.max(1, value.length * 0.6)), fontWeight: 500, lineHeight: 1.05, letterSpacing: "-.045em", fontVariantNumeric: "tabular-nums" }, children: value }),
+    /* @__PURE__ */ jsx("div", { style: { ...editorialLabel(u), marginTop: u * 0.045, textWrap: "balance", overflowWrap: "anywhere" }, children: String(variables.label ?? "") })
+  ] }) });
+}
+var KeyFigureSceneTemplate = KeyFigureScene;
+export {
+  KeyFigureSceneTemplate
+};

package/dist/{kit-tQnCPMOM.d.ts → kit-DrRpdn0p.d.ts}

@@ -1,6 +1,6 @@
-import { V as VideoStyle, a as VideoCapabilities } from './types-CEh9eUFu.js';
+import { V as VideoStyle, a as VideoCapabilities } from './types-DdZw4GRQ.js';
 import { ComponentType } from 'react';
-import { S as SceneTemplateMetadata, d as TemplateJsonSchema, f as TemplateJsonSchemaProperty } from './catalog-types-BIhSpOWK.js';
+import { S as SceneTemplateMetadata, T as TemplateJsonSchema, d as TemplateJsonSchemaProperty } from './catalog-types-WTbLP6Jh.js';
 
 interface TemplateSafeZone {
     top: number;

package/dist/mobile-message-UZUPIKHD.js

@@ -0,0 +1,49 @@
+import {
+  MediaScene
+} from "./chunk-G7IZBBWF.js";
+import {
+  spring
+} from "./chunk-77VY4O7A.js";
+import {
+  editorialFont
+} from "./chunk-4YM2M62S.js";
+import "./chunk-UDIODEDK.js";
+import "./chunk-TVIU23OM.js";
+
+// src/visual-system/scene-templates/mobile-message.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var clamp = (value) => Math.max(0, Math.min(1, value));
+function NotificationScene(props) {
+  const { variables, progress, motionProgress = progress, sceneDuration = 6, width, height, safeZone } = props;
+  const message = String(variables.message ?? "");
+  const app = String(variables.app ?? "Messages");
+  const unit = Math.min(width, height);
+  const cardWidth = Math.min(width * 0.88, unit * 1.12, width - safeZone.left - safeZone.right - unit * 0.06);
+  const inset = unit * 0.038;
+  const elapsed = clamp(motionProgress) * Math.max(2, Math.min(sceneDuration, 8));
+  const entrance = clamp((elapsed - 0.18) / 0.82);
+  const arrival = entrance >= 1 ? 1 : spring(entrance, { damping: 22, stiffness: 220 });
+  const opacity = clamp((elapsed - 0.18) / 0.08);
+  const contentWidth = cardWidth - inset * 2;
+  const messageSize = unit * (message.length > 100 ? 0.038 : 0.043);
+  const longestWord = Math.max(1, ...message.split(/\s+/).map((word) => word.length));
+  const fittedMessageSize = Math.min(messageSize, contentWidth / (longestWord * 0.57));
+  const bannerTop = Math.max(safeZone.top, height * 0.08) + unit * 0.025;
+  const travel = bannerTop + unit * 0.65;
+  const iconSize = unit * 0.049;
+  return /* @__PURE__ */ jsxs("div", { "data-template": "notification", style: { position: "absolute", inset: 0, overflow: "hidden", background: "var(--vanillasky-template-surface, #000)", fontFamily: editorialFont }, children: [
+    /* @__PURE__ */ jsx(MediaScene, { ...props }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgba(0,0,0,.16)" } }),
+    /* @__PURE__ */ jsxs("div", { "data-notification-card": "true", style: { position: "absolute", left: (width - cardWidth) / 2, top: bannerTop, width: cardWidth, boxSizing: "border-box", transform: `translateY(${-(1 - arrival) * travel}px) scale(${0.985 + arrival * 0.015})`, opacity, transformOrigin: "50% 0%", padding: inset, borderRadius: unit * 0.042, background: "rgba(245,247,250,.64)", backdropFilter: `blur(${unit * 0.034}px) saturate(135%)`, WebkitBackdropFilter: `blur(${unit * 0.034}px) saturate(135%)`, border: `${unit * 1e-3}px solid rgba(255,255,255,.72)`, boxShadow: `0 ${unit * 0.018}px ${unit * 0.065}px rgba(0,0,0,.2), inset 0 ${unit * 1e-3}px 0 rgba(255,255,255,.8)`, color: "#202025" }, children: [
+      /* @__PURE__ */ jsxs("div", { "data-notification-header": "true", style: { display: "flex", alignItems: "center", gap: unit * 0.014, marginBottom: unit * 0.024 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { width: iconSize, height: iconSize, borderRadius: iconSize * 0.25, display: "grid", placeItems: "center", background: "linear-gradient(#5bd978, #25b749)", flexShrink: 0 }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 40 40", width: iconSize * 0.78, height: iconSize * 0.78, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M34 18c0 7-6 12-14 12-2 0-4 0-6-1l-7 3 2-7c-2-2-3-4-3-7C6 11 12 6 20 6s14 5 14 12Z", fill: "white" }) }) }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: unit * 0.029, fontWeight: 500, color: "#5b565f", minWidth: 0, overflowWrap: "anywhere" }, children: app })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { fontSize: fittedMessageSize, lineHeight: 1.26, letterSpacing: "-.016em", overflowWrap: "anywhere" }, children: message })
+    ] })
+  ] });
+}
+var NotificationSceneTemplate = NotificationScene;
+export {
+  NotificationSceneTemplate
+};

package/dist/{preload-media-LJXWKTWG.js → preload-media-CFTZIMZL.js}

@@ -1,7 +1,7 @@
 import {
   limitsConcurrentVideoDecoders,
   resolveMediaType
-} from "./chunk-224QNWRA.js";
+} from "./chunk-UDIODEDK.js";
 
 // src/player/preload-media.ts
 var warmed = /* @__PURE__ */ new Set();

package/dist/quote-EW5HQA6H.js

@@ -0,0 +1,23 @@
+import {
+  editorialFont,
+  fade
+} from "./chunk-4YM2M62S.js";
+
+// src/visual-system/scene-templates/quote.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function QuoteScene({ variables, width, height, progress, motionProgress = progress, safeZone }) {
+  const u = Math.min(width, height), top = Math.max(height * 0.16, safeZone.top), bottom = height - Math.max(height * 0.23, safeZone.bottom);
+  const side = Math.max(width * 0.13, safeZone.left, safeZone.right);
+  return /* @__PURE__ */ jsx("div", { "data-template": "quote", style: { position: "absolute", inset: 0, background: "#000", color: "#fff", fontFamily: editorialFont, overflow: "hidden" }, children: /* @__PURE__ */ jsxs("div", { style: { position: "absolute", left: side, top: (top + bottom) / 2, width: width - side * 2, transform: "translateY(-50%)", textAlign: "center", opacity: fade((motionProgress - 0.03) / 0.24) }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { fontSize: u * 0.067, fontWeight: 500, lineHeight: 1.25, letterSpacing: "-.025em", textWrap: "balance", overflowWrap: "anywhere" }, children: [
+      "\u201C",
+      String(variables.quote ?? ""),
+      "\u201D"
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { fontSize: u * 0.041, fontWeight: 400, color: "#b7b7bc", lineHeight: 1.3, marginTop: u * 0.065, textWrap: "balance", overflowWrap: "anywhere" }, children: String(variables.attribution ?? "") })
+  ] }) });
+}
+var QuoteSceneTemplate = QuoteScene;
+export {
+  QuoteSceneTemplate
+};

package/dist/react.d.ts

@@ -1,10 +1,10 @@
 import * as react from 'react';
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { b as VideoEvent } from './events-BQ6z264n.js';
-import { b as VideoOrientation, c as Video, e as VideoScene, h as VideoBrandInput, l as VideoStyleOptions } from './types-CEh9eUFu.js';
-import { T as TemplateRegistry } from './kit-tQnCPMOM.js';
-import { V as VideoChatMode, a as VideoChatAskOptions, b as VideoChatMedia, c as VideoChatSuggestion, d as VideoChatCapabilities, e as VideoChatWelcome } from './types-DWFO6qca.js';
-import './catalog-types-BIhSpOWK.js';
+import { b as VideoEvent } from './events-B4YCc4vc.js';
+import { b as VideoOrientation, e as VideoScene, c as Video, i as VideoStyleOptions } from './types-DdZw4GRQ.js';
+import { T as TemplateRegistry } from './kit-DrRpdn0p.js';
+import { V as VideoChatMode, a as VideoChatAskOptions, b as VideoChatMedia, c as VideoChatSuggestion, d as VideoChatCapabilities, e as VideoChatWelcome } from './types-CdBmNTGD.js';
+import './catalog-types-WTbLP6Jh.js';
 
 type VideoPlaybackMode = "manual" | "muted-autoplay" | "autoplay-with-sound" | "autoplay-after-interaction";
 
@@ -40,6 +40,10 @@ interface VideoPlayerSharedProps {
      * where a replay scrim would cover the answer the moment it finished.
      */
     controls?: boolean;
+    /** Optional synchronous onset handshake from useNarration.isReady. Does not pause audio or prevent the first scene cue. */
+    narrationReady?: () => boolean;
+    /** Active audio time: paragraph-relative for a narration group, scene-relative otherwise. Undefined resumes the normal clock. */
+    narrationTime?: (scene: VideoScene) => number | undefined;
     /**
      * Hold the playhead where it is, and release it again.
      *
@@ -63,6 +67,8 @@ interface VideoPlayerSharedProps {
     onError?: (error: Error) => void;
     /** First active scene committed, observed at the next animation frame; excludes idle posters. */
     onFramePresented?: () => unknown;
+    /** First actual mounted video frame; excludes graphics, posters and safe fallbacks. */
+    onMediaFramePresented?: () => unknown;
     /** Stream playback has reached its available scenes; excludes initial waiting and deliberate pauses. */
     onStallChange?: (stalled: boolean) => unknown;
     /** Fires when the scene under the playhead changes, including on a loop wrap. */
@@ -122,7 +128,12 @@ interface NarrationVoice {
      * scene is worse than being cut off. Report onStart only when speech actually
      * begins playing; leave it uncalled when onset cannot be observed.
      */
+    /** True only when the provider can start prepared audio at an exact offset. */
+    supportsOffsets?: boolean;
+    /** Active prepared audio time in seconds, including any requested seek offset. */
+    getCurrentTime?: () => number | undefined;
     speak(text: string, options: {
+        offsetSeconds?: number;
         signal: AbortSignal;
         onStart?: (source?: "browser" | "generated") => void;
     }): void | Promise<void>;
@@ -131,6 +142,8 @@ interface NarrationVoice {
 interface VideoChatPreparedSpeech {
     /** Measured or conservatively estimated spoken duration, in seconds. */
     seconds: number;
+    /** True only for decoded audio with seek support, never duration estimates. */
+    supportsOffsets?: boolean;
 }
 interface VideoChatVoice extends NarrationVoice {
     prepare(text: string, options?: {
@@ -182,7 +195,6 @@ interface UseVideoChatOptions {
     templates?: TemplateRegistry;
     mode?: VideoChatMode;
     orientation?: VideoOrientation;
-    brand?: VideoBrandInput;
     style?: VideoStyleOptions;
     headers?: HeadersInit;
     credentials?: RequestCredentials;
@@ -203,6 +215,8 @@ type VideoChatPlaybackMetric = {
     elapsedMs: number;
 } & ({
     type: "first-frame";
+} | {
+    type: "first-media-frame";
 } | {
     type: "first-speech";
     source: "browser" | "generated" | "custom";
@@ -256,14 +270,10 @@ interface VideoChatProps {
     className?: string;
     /** Replaces the default two-line welcome heading without changing the interaction. */
     welcomeTitle?: ReactNode;
-    /** Host-owned name for the generated-video choice in Settings. Does not change server capabilities. */
-    generatedVideoLabel?: string;
-    /** Explain the host's generated-video offering, including preview limits. */
-    generatedVideoDescription?: string;
     /** Show a dismissible safe notice when generated visuals fall back. Defaults to false. */
     showRecoveryNotice?: boolean;
 }
 /** A complete voice-and-video chat interface backed by createVideoChatHandler. */
-declare function VideoChat({ options, className, welcomeTitle, generatedVideoLabel, generatedVideoDescription, showRecoveryNotice }: VideoChatProps): react.JSX.Element;
+declare function VideoChat({ options, className, welcomeTitle, showRecoveryNotice }: VideoChatProps): react.JSX.Element;
 
 export { type CreateVideoChatVoiceOptions, type UseVideoChatOptions, type UseVideoChatResult, VideoChat, VideoChatAskOptions, VideoChatCapabilities, type VideoChatFirstFrameMetric, VideoChatMedia, VideoChatMode, type VideoChatPlaybackMetric, type VideoChatPreparedSpeech, type VideoChatProps, type VideoChatStatus, VideoChatSuggestion, type VideoChatTurn, type VideoChatVoice, VideoChatWelcome, VideoError, type VideoErrorOptions, type VideoPlaybackMode, VideoPlayer, type VideoPlayerProps, createVideoChatVoice, useVideoChat };