@vanillaskyai/video 0.1.0

package/dist/react.js

@@ -0,0 +1,835 @@
+import {
+  VIDEO_STREAM_CONTENT_TYPE,
+  VIDEO_STREAM_HEADER,
+  decodeVideoSse
+} from "./chunk-OOPIETLW.js";
+import {
+  applyVideoEvent,
+  createVideoState
+} from "./chunk-ABPKM4GK.js";
+import {
+  safePublicDiagnostic
+} from "./chunk-ERY4S6QV.js";
+import {
+  parseVideo
+} from "./chunk-GHJEAP4O.js";
+import {
+  VIDEO_PROTOCOL_VERSION,
+  createVideoRequest
+} from "./chunk-EE6PK6XC.js";
+import {
+  overlayTemplateRegistry
+} from "./chunk-CR7FE7BW.js";
+import {
+  BUILTIN_TEMPLATE_CAPABILITIES,
+  BUILTIN_TEMPLATE_CATALOG,
+  getBuiltinTemplateMetadata
+} from "./chunk-CHLGW22F.js";
+import "./chunk-2E6T633S.js";
+import {
+  VideoFrame,
+  getDimensions
+} from "./chunk-XB7LH4J2.js";
+import {
+  fontStack
+} from "./chunk-FNAEQ7QO.js";
+import {
+  getVideoDuration,
+  resolveVideoTimeline
+} from "./chunk-SPVTJH3F.js";
+import "./chunk-XGRA2MUV.js";
+import "./chunk-73NTSFFI.js";
+
+// src/player/video-player.tsx
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/visual-system/catalog/builtin.ts
+import { createElement } from "react";
+
+// src/visual-system/catalog/builtin-loaders.generated.ts
+var GENERATED_BUILTIN_TEMPLATE_LOADERS = {
+  "media": () => import("./bg-media-SVUZAMGX.js").then((module) => ({ default: module.BgMediaTemplate })),
+  "reaction": () => import("./reaction-QG4CYZLQ.js").then((module) => ({ default: module.ReactionTemplate })),
+  "confetti": () => import("./bg-confetti-WNQXS7ZS.js").then((module) => ({ default: module.BgConfettiTemplate })),
+  "emojiBurst": () => import("./bg-emoji-ETI47GLS.js").then((module) => ({ default: module.BgEmojiTemplate })),
+  "bigNumber": () => import("./chart-counter-MCRHKN77.js").then((module) => ({ default: module.ChartCounterTemplate })),
+  "barChart": () => import("./chart-bar-CNSC7BNK.js").then((module) => ({ default: module.ChartBarTemplate })),
+  "progressRing": () => import("./chart-progress-ring-RMI4A7ZK.js").then((module) => ({ default: module.ChartProgressRingTemplate })),
+  "phoneMockup": () => import("./showcase-phone-6CP6XEU5.js").then((module) => ({ default: module.ShowcasePhoneTemplate })),
+  "webMockup": () => import("./showcase-web-Y4W2HVRJ.js").then((module) => ({ default: module.ShowcaseWebTemplate })),
+  "codeEditor": () => import("./showcase-code-RUTFZR3H.js").then((module) => ({ default: module.ShowcaseCodeTemplate })),
+  "terminal": () => import("./showcase-terminal-MGAEQWPR.js").then((module) => ({ default: module.ShowcaseTerminalTemplate })),
+  "tweet": () => import("./social-tweet-5OLCNPPC.js").then((module) => ({ default: module.SocialTweetTemplate })),
+  "notification": () => import("./social-notification-2UOHQCUY.js").then((module) => ({ default: module.SocialNotificationTemplate })),
+  "chatMessenger": () => import("./social-conversation-75SD2637.js").then((module) => ({ default: module.SocialConversationTemplate })),
+  "chatWhatsapp": () => import("./social-conversation-75SD2637.js").then((module) => ({ default: module.SocialConversationTemplate })),
+  "milestone": () => import("./social-milestone-XI2QE5BO.js").then((module) => ({ default: module.SocialMilestoneTemplate })),
+  "reviewStack": () => import("./social-review-stack-FDYZGZTJ.js").then((module) => ({ default: module.SocialReviewStackTemplate })),
+  "testimonial": () => import("./social-testimonial-OQ7N52GJ.js").then((module) => ({ default: module.SocialTestimonialTemplate })),
+  "incomingCall": () => import("./incoming-call-62MFZL3Z.js").then((module) => ({ default: module.IncomingCallTemplate })),
+  "brandMessage": () => import("./brand-message-F3RD4P3P.js").then((module) => ({ default: module.BrandMessageTemplate })),
+  "promptInput": () => import("./prompt-input-LOUCRXCY.js").then((module) => ({ default: module.PromptInputTemplate })),
+  "beforeAfter": () => import("./infographic-before-after-AXCDAWND.js").then((module) => ({ default: module.InfographicBeforeAfterTemplate })),
+  "tripleStats": () => import("./infographic-stat-row-J7IZR6ZN.js").then((module) => ({ default: module.InfographicStatRowTemplate })),
+  "problemSolution": () => import("./infographic-problem-solution-7NURJANA.js").then((module) => ({ default: module.InfographicProblemSolutionTemplate })),
+  "cardList": () => import("./infographic-feature-list-GW5GUE6O.js").then((module) => ({ default: module.InfographicFeatureListTemplate })),
+  "steps": () => import("./infographic-steps-VSZM6F5M.js").then((module) => ({ default: module.InfographicStepsTemplate })),
+  "ctaLogo": () => import("./cta-logo-SVA5GP2A.js").then((module) => ({ default: module.CtaLogoTemplate })),
+  "ctaMedia": () => import("./cta-media-E7VLLK42.js").then((module) => ({ default: module.CtaMediaTemplate }))
+};
+
+// src/visual-system/catalog/builtin.ts
+function createPreloadableBuiltinTemplate(loader) {
+  let loaded;
+  let failure;
+  let pending;
+  const preload = () => {
+    if (loaded) return Promise.resolve();
+    if (failure) return Promise.reject(failure);
+    pending ??= loader().then(
+      (module) => {
+        loaded = module;
+      },
+      (cause) => {
+        failure = cause;
+        throw cause;
+      }
+    );
+    return pending;
+  };
+  const component = (props) => {
+    if (loaded) return createElement(loaded.default, props);
+    if (failure) throw failure;
+    throw preload();
+  };
+  return { component, preload };
+}
+function freezeTemplate(value) {
+  if (value && typeof value === "object" && !Object.isFrozen(value)) {
+    for (const nested of Object.values(value)) freezeTemplate(nested);
+    Object.freeze(value);
+  }
+  return value;
+}
+var preloadableById = new Map(
+  BUILTIN_TEMPLATE_CATALOG.map((metadata) => {
+    const id = metadata.id;
+    return [id, createPreloadableBuiltinTemplate(GENERATED_BUILTIN_TEMPLATE_LOADERS[id])];
+  })
+);
+var BUILTIN_TEMPLATES = Object.freeze(
+  BUILTIN_TEMPLATE_CATALOG.map((metadata) => Object.freeze({
+    ...freezeTemplate({ ...metadata }),
+    component: preloadableById.get(
+      metadata.id
+    ).component
+  }))
+);
+var templateById = new Map(BUILTIN_TEMPLATES.map((template) => [template.id, template]));
+var BUILTIN_TEMPLATE_KIT = Object.freeze({
+  templates: BUILTIN_TEMPLATES,
+  capabilities: BUILTIN_TEMPLATE_CAPABILITIES,
+  getTemplate: (id) => templateById.get(id),
+  getTemplateMetadata: getBuiltinTemplateMetadata,
+  listTemplateMetadata: () => BUILTIN_TEMPLATES.map(({ component: _component, ...metadata }) => metadata)
+});
+function preloadBuiltinTemplate(id) {
+  return preloadableById.get(id)?.preload();
+}
+
+// src/player/video-player.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function savedVideoState(video) {
+  return {
+    ...createVideoState(),
+    status: "complete",
+    config: video
+  };
+}
+function VideoPlayerRuntime({
+  kit,
+  stream,
+  video,
+  autoPlay = true,
+  startMuted = true,
+  width,
+  orientation: orientationOverride,
+  responsiveBreakpoint = 520,
+  className,
+  style,
+  ariaLabel = "Video response",
+  onComplete,
+  onError,
+  onStateChange
+}) {
+  const [reducedMotion] = useState(
+    () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+  const [isPlaying, setIsPlaying] = useState(() => autoPlay && !reducedMotion);
+  const [isMuted, setIsMuted] = useState(startMuted);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [state, setState] = useState(() => video ? savedVideoState(video) : createVideoState());
+  const [currentTime, setCurrentTime] = useState(0);
+  const [observedWidth, setObservedWidth] = useState(0);
+  const containerRef = useRef(null);
+  const stateRef = useRef(state);
+  const timeRef = useRef(currentTime);
+  const audioRef = useRef(null);
+  const callbacksRef = useRef({ onComplete, onError, onStateChange });
+  stateRef.current = state;
+  timeRef.current = currentTime;
+  callbacksRef.current = { onComplete, onError, onStateChange };
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handleChange = (event) => {
+      if (event.matches) setIsPlaying(false);
+    };
+    preference.addEventListener?.("change", handleChange);
+    return () => preference.removeEventListener?.("change", handleChange);
+  }, []);
+  useEffect(() => setIsMuted(startMuted), [startMuted]);
+  useEffect(() => {
+    const updateFullscreen = () => setIsFullscreen(document.fullscreenElement === containerRef.current);
+    document.addEventListener("fullscreenchange", updateFullscreen);
+    return () => document.removeEventListener("fullscreenchange", updateFullscreen);
+  }, []);
+  useEffect(() => {
+    let cancelled = false;
+    let started = false;
+    const reset = video ? savedVideoState(video) : createVideoState();
+    stateRef.current = reset;
+    timeRef.current = 0;
+    setState(reset);
+    setCurrentTime(0);
+    if (video) {
+      for (const scene of video.scenes) preloadBuiltinTemplate(scene.templateId);
+      return;
+    }
+    if (!stream) return;
+    const consume = async () => {
+      try {
+        for await (const event of stream) {
+          if (cancelled) return;
+          const current = stateRef.current;
+          const mutableSceneIds = new Set(
+            current.config ? resolveVideoTimeline(current.config).filter((range) => range.end > timeRef.current + 1e-3).map((range) => range.scene.id) : []
+          );
+          const next = applyVideoEvent(current, event, {
+            ...current.config ? { mutableSceneIds } : {}
+          });
+          stateRef.current = next;
+          setState(next);
+          callbacksRef.current.onStateChange?.(next);
+          if (next.status === "complete" && current.status !== "complete") {
+            callbacksRef.current.onComplete?.(next);
+          } else if (next.status === "error" && current.status !== "error") {
+            callbacksRef.current.onError?.(new Error("Video response could not finish"), next);
+          }
+        }
+      } catch {
+        if (!cancelled) {
+          callbacksRef.current.onError?.(new Error("Video playback stream failed"), stateRef.current);
+        }
+      }
+    };
+    queueMicrotask(() => {
+      if (cancelled) return;
+      started = true;
+      void consume();
+    });
+    return () => {
+      cancelled = true;
+      if (started) {
+        stream.cancel?.();
+      }
+    };
+  }, [stream, video]);
+  useEffect(() => {
+    if (width != null) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const update = () => setObservedWidth(container.clientWidth);
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(update);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [width]);
+  useEffect(() => {
+    if (!isPlaying) return;
+    let frame = 0;
+    let previous = performance.now();
+    const tick = (now) => {
+      const current = stateRef.current;
+      const config2 = current.config;
+      const delta = Math.max(0, (now - previous) / 1e3);
+      previous = now;
+      if (config2?.scenes.length) {
+        const duration3 = getVideoDuration(config2);
+        const nextTime = Math.min(timeRef.current + delta, duration3);
+        if (nextTime !== timeRef.current) {
+          timeRef.current = nextTime;
+          setCurrentTime(nextTime);
+        }
+        const audio = audioRef.current;
+        if (audio && (current.status === "complete" || current.status === "error")) {
+          const fadeSeconds = Math.max(0, (config2.audio?.fadeOutMs ?? 3e3) / 1e3);
+          const remaining = Math.max(0, duration3 - nextTime);
+          const baseVolume = config2.audio?.volume ?? 1;
+          audio.volume = fadeSeconds > 0 ? baseVolume * Math.min(1, remaining / fadeSeconds) : baseVolume;
+          if (remaining <= 0) audio.pause();
+        }
+      }
+      const terminal2 = current.status === "complete" || current.status === "error" || current.status === "aborted";
+      const duration2 = current.config ? getVideoDuration(current.config) : 0;
+      if (!terminal2 || timeRef.current < duration2) frame = requestAnimationFrame(tick);
+      else setIsPlaying(false);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [isPlaying]);
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audio.volume = state.config?.audio?.volume ?? 1;
+  }, [state.config?.audio?.audioUrl, state.config?.audio?.volume]);
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (isPlaying) {
+      void audio.play().catch(() => {
+        setIsPlaying(false);
+      });
+    } else {
+      audio.pause();
+    }
+  }, [isPlaying, state.config?.audio?.audioUrl]);
+  const streamOrientation = state.config?.orientation ?? "portrait";
+  const responsiveWidth = width ?? observedWidth;
+  const orientation = orientationOverride === "auto" ? responsiveWidth > 0 ? responsiveWidth <= responsiveBreakpoint ? "portrait" : "landscape" : streamOrientation : orientationOverride ?? streamOrientation;
+  const dimensions = getDimensions(orientation);
+  const displayWidth = (width ?? observedWidth) || dimensions.width;
+  const displayHeight = displayWidth * dimensions.height / dimensions.width;
+  const scale = displayWidth / dimensions.width;
+  const config = state.config;
+  const displayConfig = config && config.orientation !== orientation ? { ...config, orientation } : config;
+  const duration = config ? getVideoDuration(config) : 0;
+  const terminal = state.status === "complete" || state.status === "error" || state.status === "aborted";
+  const ended = terminal && duration > 0 && currentTime >= duration - 1e-3;
+  const togglePlayback = () => {
+    if (!isPlaying && ended) {
+      timeRef.current = 0;
+      setCurrentTime(0);
+      if (audioRef.current) audioRef.current.currentTime = 0;
+      setIsPlaying(true);
+      return;
+    }
+    setIsPlaying((playing) => !playing);
+  };
+  const toggleFullscreen = async () => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (document.fullscreenElement === container) await document.exitFullscreen?.();
+    else await container.requestFullscreen?.();
+  };
+  const controlButtonStyle = {
+    display: "inline-grid",
+    placeItems: "center",
+    flex: "0 0 auto",
+    minWidth: 44,
+    minHeight: 44,
+    padding: "6px 9px",
+    border: 0,
+    borderRadius: 8,
+    backgroundColor: "rgba(9, 7, 18, 0.88)",
+    color: "#ffffff",
+    font: "600 13px/1 system-ui, sans-serif",
+    cursor: "pointer"
+  };
+  const generationCoverVisible = state.status === "streaming" && !config?.scenes.length;
+  const coverBackground = config?.style.brand.background;
+  const coverText = config?.style.brand.colors.foreground ?? "#ffffff";
+  const coverBackgroundCss = coverBackground?.type === "solid" ? coverBackground.color : `linear-gradient(135deg, ${coverBackground?.colors[0] ?? "#8711C1"}, ${coverBackground?.colors[1] ?? "#2167E3"})`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      role: "region",
+      "aria-label": ariaLabel,
+      tabIndex: 0,
+      onKeyDown: (event) => {
+        if (event.target === event.currentTarget && (event.key === " " || event.key === "Enter")) {
+          event.preventDefault();
+          togglePlayback();
+        }
+      },
+      "data-testid": "video-player",
+      "data-status": state.status,
+      "data-finish-reason": state.finishReason,
+      "data-scenes": config?.scenes.length ?? 0,
+      "data-orientation": orientation,
+      "data-current-time": currentTime.toFixed(3),
+      "data-playing": isPlaying,
+      "data-ended": ended,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: displayHeight,
+        position: "relative",
+        overflow: "hidden",
+        background: "#090712",
+        ...style
+      },
+      children: [
+        generationCoverVisible ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "video-generation-cover",
+            role: "status",
+            "aria-live": "polite",
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "grid",
+              placeItems: "center",
+              padding: "12%",
+              textAlign: "center",
+              color: coverText,
+              background: coverBackgroundCss,
+              fontFamily: fontStack(config?.style.brand.font)
+            },
+            children: /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { fontSize: "clamp(28px, 8vw, 72px)", opacity: 0.9 }, children: "\u2726" }),
+              /* @__PURE__ */ jsx("strong", { style: { display: "block", marginTop: 18, fontSize: "clamp(24px, 5vw, 56px)", lineHeight: 1.08 }, children: "Creating your video\u2026" }),
+              /* @__PURE__ */ jsx("span", { style: { display: "block", marginTop: 14, fontSize: "clamp(14px, 2vw, 22px)", lineHeight: 1.4, opacity: 0.78 }, children: "Choosing the best scenes for your content." })
+            ] })
+          }
+        ) : config?.scenes.length ? /* @__PURE__ */ jsx(
+          VideoFrame,
+          {
+            kit,
+            config: displayConfig,
+            time: currentTime,
+            width: dimensions.width,
+            height: dimensions.height,
+            playing: isPlaying,
+            style: {
+              position: "absolute",
+              inset: 0,
+              transform: `scale(${scale})`,
+              transformOrigin: "top left"
+            }
+          }
+        ) : null,
+        config?.audio ? /* @__PURE__ */ jsx(
+          "audio",
+          {
+            ref: audioRef,
+            src: config.audio.audioUrl,
+            autoPlay: isPlaying,
+            muted: isMuted,
+            preload: "auto",
+            loop: state.status === "streaming"
+          }
+        ) : null,
+        !generationCoverVisible ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-testid": "video-controls",
+            style: {
+              position: "absolute",
+              right: 10,
+              bottom: 10,
+              zIndex: 2,
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              minHeight: 48,
+              padding: "6px 8px",
+              border: "1px solid rgba(255, 255, 255, 0.2)",
+              borderRadius: 12,
+              backgroundColor: "rgba(9, 7, 18, 0.82)",
+              backdropFilter: "blur(12px)",
+              color: "#ffffff",
+              boxShadow: "0 4px 20px rgba(0, 0, 0, 0.35)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": ended ? "Replay video response" : isPlaying ? "Pause video response" : "Play video response",
+                  onClick: togglePlayback,
+                  style: controlButtonStyle,
+                  children: ended ? "\u21BB" : isPlaying ? "\u2161" : "\u25B6"
+                }
+              ),
+              config?.audio ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": isMuted ? "Unmute video response" : "Mute video response",
+                  "aria-pressed": !isMuted,
+                  onClick: () => setIsMuted((muted) => !muted),
+                  style: controlButtonStyle,
+                  children: isMuted ? "\u{1F507}" : "\u{1F50A}"
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                  onClick: () => void toggleFullscreen(),
+                  style: controlButtonStyle,
+                  children: isFullscreen ? "\u2199" : "\u26F6"
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function VideoPlayer({
+  templates,
+  stream,
+  video,
+  onComplete,
+  onError,
+  ...props
+}) {
+  const savedVideo = useMemo(() => video ? parseVideo(video) : void 0, [video]);
+  const kit = useMemo(
+    () => templates ? overlayTemplateRegistry(BUILTIN_TEMPLATE_KIT, templates) : BUILTIN_TEMPLATE_KIT,
+    [templates]
+  );
+  if (!stream && !savedVideo) return null;
+  return /* @__PURE__ */ jsx(
+    VideoPlayerRuntime,
+    {
+      ...props,
+      kit,
+      stream,
+      video: savedVideo,
+      onComplete: (state) => {
+        if (state.config) onComplete?.(state.config);
+      },
+      onError: (error) => onError?.(error)
+    }
+  );
+}
+
+// src/player/video-error.ts
+var VideoError = class extends Error {
+  code;
+  status;
+  requestId;
+  runId;
+  recoverable;
+  constructor(message, options) {
+    super(safePublicDiagnostic(message, "Video response failed"));
+    this.name = "VideoError";
+    this.code = /^[a-z][a-z0-9_]{0,63}$/.test(options.code) ? options.code : "video_failed";
+    this.status = options.status;
+    this.requestId = options.requestId?.slice(0, 128);
+    this.runId = options.runId?.slice(0, 128);
+    this.recoverable = options.recoverable;
+  }
+};
+
+// src/player/use-video.ts
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+
+// src/player/stream-video.ts
+var HTTP_ERROR_CODES = /* @__PURE__ */ new Set([
+  "body_too_large",
+  "http_error",
+  "invalid_body",
+  "invalid_cursor",
+  "invalid_input",
+  "invalid_json",
+  "invalid_request",
+  "method_not_allowed",
+  "origin_forbidden",
+  "resume_unavailable",
+  "secret_field",
+  "unauthorized"
+]);
+async function responseError(response, requestId) {
+  let code = "http_error";
+  let message = `Video response endpoint failed (${response.status})`;
+  try {
+    const body = await response.json();
+    if (body && typeof body === "object" && "error" in body) {
+      const error = body.error;
+      if (error && typeof error === "object") {
+        if ("code" in error && typeof error.code === "string" && HTTP_ERROR_CODES.has(error.code)) {
+          code = error.code;
+        }
+        if ("message" in error && typeof error.message === "string") {
+          message = safePublicDiagnostic(error.message, message);
+        }
+      }
+    }
+  } catch {
+  }
+  return new VideoError(message, { code, status: response.status, requestId });
+}
+function normalizeStreamError(cause, requestId, state, aborted) {
+  if (cause instanceof VideoError) return cause;
+  const causeError = cause instanceof Error ? cause : void 0;
+  const safeMessage = aborted ? causeError?.name === "TimeoutError" ? "Request timed out" : safePublicDiagnostic(causeError?.message, "Video generation was aborted") : causeError?.message.startsWith("Video response protocol") || causeError?.message.startsWith("Video response endpoint omitted protocol") ? safePublicDiagnostic(causeError.message, "Video response protocol failed") : "Video response stream failed";
+  return new VideoError(safeMessage, {
+    code: aborted ? "aborted" : "stream_failed",
+    requestId: state.requestId ?? requestId,
+    runId: state.runId,
+    recoverable: false
+  });
+}
+function streamVideo(options) {
+  const request = createVideoRequest(options.input, {
+    requestId: options.requestId,
+    capabilities: options.capabilities,
+    ...options.resume?.state.runId != null && options.resume.state.lastSequence >= 0 ? {
+      resume: {
+        runId: options.resume.state.runId,
+        afterSequence: options.resume.state.lastSequence
+      }
+    } : {}
+  });
+  const controller = new AbortController();
+  const forwardAbort = () => controller.abort(options.signal?.reason);
+  if (options.signal?.aborted) forwardAbort();
+  else options.signal?.addEventListener("abort", forwardAbort, { once: true });
+  let resolveResult;
+  let rejectResult;
+  let settled = false;
+  const result = new Promise((resolve, reject) => {
+    resolveResult = resolve;
+    rejectResult = reject;
+  });
+  const buffered = [];
+  const waiters = /* @__PURE__ */ new Set();
+  let streamDone = false;
+  let streamError;
+  const notify = () => {
+    for (const waiter of waiters) waiter();
+    waiters.clear();
+  };
+  void (async function consume() {
+    let state = options.resume?.state ?? createVideoState();
+    try {
+      const fetcher = options.fetcher ?? fetch;
+      const headers = new Headers(options.headers);
+      headers.set("Accept", VIDEO_STREAM_CONTENT_TYPE);
+      headers.set("Content-Type", "application/json");
+      if (request.resume) headers.set("Last-Event-ID", `${request.resume.runId}:${request.resume.afterSequence}`);
+      const response = await fetcher(options.endpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify(request),
+        signal: controller.signal,
+        credentials: options.credentials
+      });
+      if (!response.ok) throw await responseError(response, request.requestId);
+      if (!response.body || !response.headers.get("content-type")?.includes("text/event-stream")) {
+        throw new Error("Video response endpoint did not return an SSE stream");
+      }
+      const protocolVersion = response.headers.get(VIDEO_STREAM_HEADER);
+      if (protocolVersion == null) {
+        throw new Error(`Video response endpoint omitted protocol version header ${VIDEO_STREAM_HEADER}`);
+      }
+      if (protocolVersion !== VIDEO_PROTOCOL_VERSION) {
+        throw new Error(
+          `Video response protocol mismatch: expected ${VIDEO_PROTOCOL_VERSION}, received ${protocolVersion}`
+        );
+      }
+      for await (const event of decodeVideoSse(response.body)) {
+        state = applyVideoEvent(state, event);
+        options.onEvent?.(event, state);
+        buffered.push(event);
+        notify();
+        if (state.status === "complete" && !settled) {
+          settled = true;
+          resolveResult(state);
+        } else if (state.status === "error" && !settled) {
+          settled = true;
+          const error = state.errors.at(-1);
+          rejectResult(new VideoError(error?.message ?? "Video response could not finish", {
+            code: error?.code ?? "generation_failed",
+            status: response.status,
+            requestId: state.requestId ?? request.requestId,
+            runId: state.runId,
+            recoverable: error?.recoverable
+          }));
+        } else if (state.status === "aborted" && !settled) {
+          settled = true;
+          rejectResult(new VideoError(state.abortReason ?? "Video generation was aborted", {
+            code: "aborted",
+            status: response.status,
+            requestId: state.requestId ?? request.requestId,
+            runId: state.runId,
+            recoverable: false
+          }));
+        }
+      }
+      if (!["complete", "error", "aborted"].includes(state.status)) {
+        throw new Error("Video response stream ended without a terminal event");
+      }
+      if (!settled && state.status === "complete") {
+        settled = true;
+        resolveResult(state);
+      }
+    } catch (cause) {
+      const error = normalizeStreamError(cause, request.requestId, state, controller.signal.aborted);
+      if (!settled) {
+        settled = true;
+        rejectResult(error);
+      }
+      streamError = error;
+    } finally {
+      streamDone = true;
+      notify();
+      options.signal?.removeEventListener("abort", forwardAbort);
+    }
+  })();
+  const stream = {
+    async *[Symbol.asyncIterator]() {
+      let index = 0;
+      while (true) {
+        while (index < buffered.length) yield buffered[index++];
+        if (streamDone) {
+          if (streamError) throw streamError;
+          return;
+        }
+        await new Promise((resolve) => waiters.add(resolve));
+      }
+    }
+  };
+  return {
+    request,
+    stream,
+    result,
+    abort(reason = "user cancelled") {
+      controller.abort(new Error(reason));
+    }
+  };
+}
+
+// src/player/use-video.ts
+function defaultRequestId() {
+  const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+  return `request-${id}`;
+}
+function errorFrom(cause) {
+  if (cause instanceof VideoError) return cause;
+  const error = cause instanceof Error ? cause : new Error(String(cause));
+  return new VideoError(error.message, { code: "video_failed" });
+}
+function useVideo(options = {}) {
+  const templates = useMemo2(
+    () => options.templates ? overlayTemplateRegistry(BUILTIN_TEMPLATE_KIT, options.templates) : BUILTIN_TEMPLATE_KIT,
+    [options.templates]
+  );
+  const [state, setState] = useState2(() => createVideoState());
+  const [error, setError] = useState2();
+  const [run, setRun] = useState2();
+  const activeRun = useRef2();
+  const generation = useRef2(0);
+  const mounted = useRef2(true);
+  const optionsRef = useRef2(options);
+  const templatesRef = useRef2(templates);
+  optionsRef.current = options;
+  templatesRef.current = templates;
+  const abort = useCallback((reason = "user cancelled") => {
+    generation.current += 1;
+    const current = activeRun.current;
+    activeRun.current = void 0;
+    current?.abort(reason);
+    if (current && mounted.current) {
+      setError(new VideoError(reason, {
+        code: "aborted",
+        requestId: current.request.requestId,
+        recoverable: false
+      }));
+      setState((previous) => ({ ...previous, status: "aborted", abortReason: reason }));
+    }
+  }, []);
+  const generate = useCallback((input) => {
+    const currentGeneration = generation.current + 1;
+    generation.current = currentGeneration;
+    activeRun.current?.abort("replaced by a new composition");
+    const currentOptions = optionsRef.current;
+    const initialState = createVideoState();
+    setState({ ...initialState, status: "streaming" });
+    setError(void 0);
+    const nextRun = streamVideo({
+      endpoint: currentOptions.endpoint ?? "/api/video",
+      input,
+      requestId: (currentOptions.createRequestId ?? defaultRequestId)(),
+      capabilities: currentOptions.templateIds ? { ...templatesRef.current.capabilities, templates: [...new Set(currentOptions.templateIds)] } : templatesRef.current.capabilities,
+      headers: currentOptions.headers,
+      credentials: currentOptions.credentials,
+      fetcher: currentOptions.fetcher,
+      onEvent: (_event, nextState) => {
+        if (_event.type === "scene.add" && !currentOptions.templates?.getTemplate(_event.data.scene.templateId)) {
+          preloadBuiltinTemplate(_event.data.scene.templateId);
+        }
+        if (mounted.current && generation.current === currentGeneration) setState(nextState);
+      }
+    });
+    activeRun.current = nextRun;
+    setRun(nextRun);
+    void nextRun.result.then(() => {
+      if (generation.current === currentGeneration) activeRun.current = void 0;
+    }).catch((cause) => {
+      if (mounted.current && generation.current === currentGeneration) {
+        activeRun.current = void 0;
+        const error2 = errorFrom(cause);
+        setError(error2);
+        setState((previous) => ({
+          ...previous,
+          status: error2.code === "aborted" ? "aborted" : "error",
+          ...error2.code === "aborted" && previous.abortReason == null ? { abortReason: error2.message } : {}
+        }));
+      }
+    });
+    const result = nextRun.result.then((nextState) => {
+      if (!nextState.config) throw new Error("Video generation ended without a video");
+      return nextState.config;
+    });
+    void result.catch(() => void 0);
+    return result;
+  }, []);
+  useEffect2(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      generation.current += 1;
+      activeRun.current?.abort("component unmounted");
+      activeRun.current = void 0;
+    };
+  }, []);
+  return {
+    generate,
+    abort,
+    video: state.config,
+    status: state.status,
+    error,
+    warnings: state.warnings,
+    playerProps: { templates, ...run ? { stream: run.stream } : {} }
+  };
+}
+export {
+  VideoError,
+  VideoPlayer,
+  useVideo
+};