@vanillaskyai/video 0.1.0

package/dist/kit-BMNcHqa9.d.ts

@@ -0,0 +1,79 @@
+import { g as VideoStyle, j as VideoCapabilities } from './types-B-PZR6G_.js';
+import { ComponentType } from 'react';
+import { S as SceneTemplateMetadata, d as TemplateJsonSchema, f as TemplateJsonSchemaProperty } from './catalog-types-BIhSpOWK.js';
+
+interface TemplateSafeZone {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+interface SceneTemplateProps<Variables extends Record<string, unknown> = Record<string, unknown>> {
+    variables: Variables;
+    style: VideoStyle;
+    progress: number;
+    /**
+     * Optional transition-safe visual progress. Keep grounded values, media,
+     * and semantic state on `progress`; use this only for entrance/exit motion.
+     * Older renderers may omit it, so templates must fall back to `progress`.
+     */
+    motionProgress?: number;
+    beatIntensity: number;
+    width: number;
+    height: number;
+    textArchetype?: string;
+    backgroundEffect?: string;
+    safeZone: TemplateSafeZone;
+    sceneDuration?: number;
+    isPlaying?: boolean;
+}
+type JsonObjectRequiredKeys<Property> = Property extends {
+    readonly required: readonly (infer Required)[];
+} ? Required : never;
+type JsonObjectValue<Property extends {
+    readonly properties: Readonly<Record<string, TemplateJsonSchemaProperty>>;
+}> = {
+    [Key in Extract<JsonObjectRequiredKeys<Property>, keyof Property["properties"]>]: JsonPropertyValue<Property["properties"][Key]>;
+} & {
+    [Key in Exclude<keyof Property["properties"], JsonObjectRequiredKeys<Property>>]?: JsonPropertyValue<Property["properties"][Key]>;
+};
+type JsonPropertyValue<Property> = Property extends {
+    readonly enum: readonly (infer Value)[];
+} ? Value : Property extends {
+    readonly type: "number" | "integer";
+} ? number : Property extends {
+    readonly type: "boolean";
+} ? boolean : Property extends {
+    readonly type: "array";
+    readonly items: infer Item;
+} ? JsonPropertyValue<Item>[] : Property extends {
+    readonly type: "array";
+} ? unknown[] : Property extends {
+    readonly type: "object";
+    readonly properties: Readonly<Record<string, TemplateJsonSchemaProperty>>;
+} ? JsonObjectValue<Property> : Property extends {
+    readonly type: "object";
+} ? Record<string, unknown> : string;
+type RequiredJsonSchemaKeys<Schema extends TemplateJsonSchema> = Schema["required"] extends readonly (infer Key)[] ? Extract<Key, keyof Schema["properties"]> : never;
+type InferTemplateJsonSchema<Schema extends TemplateJsonSchema> = {
+    [Key in RequiredJsonSchemaKeys<Schema>]: JsonPropertyValue<Schema["properties"][Key]>;
+} & {
+    [Key in Exclude<keyof Schema["properties"], RequiredJsonSchemaKeys<Schema>>]?: JsonPropertyValue<Schema["properties"][Key]>;
+};
+interface SceneTemplate<Variables extends Record<string, unknown> = Record<string, unknown>> extends SceneTemplateMetadata {
+    component: ComponentType<SceneTemplateProps<Variables>>;
+}
+
+interface TemplateRegistry {
+    readonly templates: readonly SceneTemplate<any>[];
+    readonly capabilities: VideoCapabilities;
+    getTemplate(id: string): SceneTemplate | undefined;
+    getTemplateMetadata(id: string): SceneTemplateMetadata | undefined;
+    listTemplateMetadata(): SceneTemplateMetadata[];
+}
+/** Build the browser renderer registry from customer-owned template definitions. */
+declare function createTemplateRegistry(options: {
+    definitions: readonly SceneTemplate<any>[];
+}): TemplateRegistry;
+
+export { type InferTemplateJsonSchema as I, type SceneTemplateProps as S, type TemplateRegistry as T, type SceneTemplate as a, createTemplateRegistry as c };

package/dist/prompt-input-LOUCRXCY.js

@@ -0,0 +1,236 @@
+import {
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import "./chunk-ABZACD4G.js";
+import {
+  SPRING_BOUNCY,
+  SPRING_SMOOTH,
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/primitives/typography/PromptInputPill.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CLAMP = {
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp"
+};
+var SparklesIcon = ({ size, gradientId }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: [
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#7C3AED" }),
+    /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#3B82F6" }),
+    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#06B6D4" })
+  ] }) }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.73 1.73 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.73 1.73 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.73 1.73 0 0 0 3.407 2.31zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z",
+      fill: `url(#${gradientId})`
+    }
+  )
+] });
+var PromptInputPill = ({
+  progress,
+  sceneDuration,
+  promptText: rawText,
+  pillBg = "#FFFFFF",
+  pillTextColor = "#374151",
+  width,
+  height
+}) => {
+  const dim = Math.min(width, height);
+  const promptText = stripPipe(rawText || "");
+  const seed = promptText.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
+  const pillHeight = dim * 0.13;
+  const pillTargetWidth = Math.min(width * 0.86, dim * 0.95);
+  const pillCircleWidth = pillHeight;
+  const pillRadius = pillHeight / 2;
+  const iconSize = pillHeight * 0.46;
+  const padLeft = pillHeight * 0.3;
+  const fontSizeDefault = pillHeight * 0.42;
+  const availableTextWidth = pillTargetWidth - padLeft * 3 - iconSize;
+  const naturalTextWidth = promptText.length * fontSizeDefault * 0.55 * 1.06;
+  const shrinkFactor = naturalTextWidth > availableTextWidth ? Math.max(0.45, availableTextWidth / naturalTextWidth) : 1;
+  const fontSize = fontSizeDefault * shrinkFactor;
+  const enterSpring = spring(
+    interpolate(progress, [0, 0.1], [0, 1], CLAMP),
+    SPRING_BOUNCY
+  );
+  const enterScale = 0.7 + 0.3 * enterSpring;
+  const enterOpacity = interpolate(progress, [0, 0.08], [0, 1], CLAMP);
+  const widthProgress = spring(
+    interpolate(progress, [0.1, 0.3], [0, 1], CLAMP),
+    SPRING_SMOOTH
+  );
+  const pillWidth = pillCircleWidth + (pillTargetWidth - pillCircleWidth) * widthProgress;
+  const typeStart = 0.3;
+  const typeEnd = 0.68;
+  const charsRevealed = Math.max(
+    0,
+    Math.floor(
+      interpolate(progress, [typeStart, typeEnd], [0, promptText.length], CLAMP)
+    )
+  );
+  const visibleText = promptText.slice(0, charsRevealed);
+  const realT = progress * sceneDuration;
+  const cursorVisible = progress >= typeStart * 0.9 && Math.sin(realT * Math.PI * 2.4) > 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: `translate(-50%, -50%) scale(${enterScale})`,
+        opacity: enterOpacity
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            width: pillWidth,
+            height: pillHeight,
+            backgroundColor: pillBg,
+            borderRadius: pillRadius,
+            display: "flex",
+            alignItems: "center",
+            paddingLeft: padLeft,
+            paddingRight: padLeft,
+            // Clip at the pill border — even after the 0.45× shrink floor,
+            // pathologically long prompts can still exceed the pill width.
+            // Clipping at the rounded border looks cleaner than letting text
+            // bleed past the right edge.
+            overflow: "hidden",
+            boxShadow: [
+              `inset 0 ${1 * (dim / 1080)}px 0 rgba(255,255,255,0.85)`,
+              `0 ${8 * (dim / 1080)}px ${24 * (dim / 1080)}px ${-8 * (dim / 1080)}px rgba(110,80,200,0.10)`,
+              `0 ${2 * (dim / 1080)}px ${8 * (dim / 1080)}px ${-4 * (dim / 1080)}px rgba(0,0,0,0.05)`
+            ].join(", "),
+            whiteSpace: "nowrap"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  flexShrink: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: iconSize,
+                  height: iconSize
+                },
+                children: /* @__PURE__ */ jsx(SparklesIcon, { size: iconSize, gradientId: `prompt-input-grad-${seed}` })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  marginLeft: padLeft,
+                  fontSize,
+                  lineHeight: 1.4,
+                  color: pillTextColor,
+                  fontWeight: 500,
+                  letterSpacing: -0.5,
+                  minWidth: 0,
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: visibleText }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-block",
+                        width: fontSize * 0.06,
+                        height: fontSize * 0.95,
+                        backgroundColor: pillTextColor,
+                        marginLeft: fontSize * 0.08,
+                        opacity: cursorVisible ? 0.85 : 0,
+                        borderRadius: fontSize * 0.03
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/visual-system/scene-templates/prompt-input.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PromptInputTemplate = ({
+  variables,
+  style,
+  progress,
+  beatIntensity,
+  width,
+  height,
+  sceneDuration,
+  isPlaying = true,
+  backgroundEffect
+}) => {
+  const { font } = resolveTokens(style);
+  const promptText = stripPipe(String(variables.promptText || "Make a launch video for our app"));
+  const pillBg = "#FFFFFF";
+  const pillTextColor = "#374151";
+  const seed = promptText.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: "#000",
+        fontFamily: font
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          SceneBackground,
+          {
+            style,
+            progress,
+            sceneDuration,
+            width,
+            height,
+            ...getMediaBackgroundProps(variables),
+            backgroundEffect,
+            seed,
+            isPlaying,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          PromptInputPill,
+          {
+            progress,
+            sceneDuration: sceneDuration ?? 4,
+            promptText,
+            pillBg,
+            pillTextColor,
+            width,
+            height
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  PromptInputTemplate
+};

package/dist/react.d.ts

@@ -0,0 +1,81 @@
+import { CSSProperties, ReactElement } from 'react';
+import { V as VideoEvent, a as VideoWarning } from './events-_wfjbmEp.js';
+import { e as VideoOrientation, V as Video, d as VideoInput } from './types-B-PZR6G_.js';
+import { T as TemplateRegistry } from './kit-BMNcHqa9.js';
+import { V as VideoStatus } from './state-DZcKuS32.js';
+import './catalog-types-BIhSpOWK.js';
+
+interface VideoPlayerSharedProps {
+    /** Initial playback state. Reduced-motion preferences take precedence. */
+    autoPlay?: boolean;
+    startMuted?: boolean;
+    /** Fixed display width. Omit to observe and fill the parent width. */
+    width?: number;
+    /** Override the streamed orientation, or switch at the container breakpoint. */
+    orientation?: VideoOrientation | "auto";
+    /** Container width at or below which auto orientation uses portrait. */
+    responsiveBreakpoint?: number;
+    className?: string;
+    style?: CSSProperties;
+    /** Accessible name for the player region. */
+    ariaLabel?: string;
+    onComplete?: (video: Video) => void;
+    onError?: (error: Error) => void;
+}
+type VideoPlayerProps = VideoPlayerSharedProps & ({
+    video: Video;
+    stream?: never;
+    templates?: TemplateRegistry;
+} | {
+    stream?: AsyncIterable<VideoEvent>;
+    video?: never;
+    templates: TemplateRegistry;
+});
+declare function VideoPlayer({ templates, stream, video, onComplete, onError, ...props }: VideoPlayerProps): ReactElement | null;
+
+interface VideoErrorOptions {
+    code: string;
+    status?: number;
+    requestId?: string;
+    runId?: string;
+    recoverable?: boolean;
+}
+/** A safe, actionable error returned by a VanillaSky video endpoint. */
+declare class VideoError extends Error {
+    readonly code: string;
+    readonly status?: number;
+    readonly requestId?: string;
+    readonly runId?: string;
+    readonly recoverable?: boolean;
+    constructor(message: string, options: VideoErrorOptions);
+}
+
+interface UseVideoOptions {
+    endpoint?: string | URL;
+    /** Customer-owned templates that replace matching built-ins and add new IDs. */
+    templates?: TemplateRegistry;
+    /** Templates the planner may select for this client experience. Renderers remain available for replay. */
+    templateIds?: readonly string[];
+    headers?: HeadersInit;
+    credentials?: RequestCredentials;
+    fetcher?: typeof fetch;
+    /** Override ID generation for tracing or deterministic tests. */
+    createRequestId?: () => string;
+}
+interface UseVideoResult {
+    /** Resolves with a completed video; rejects terminal errors and aborts. */
+    generate(input: VideoInput): Promise<Video>;
+    abort(reason?: string): void;
+    video?: Video;
+    status: VideoStatus;
+    error?: VideoError;
+    warnings: readonly VideoWarning[];
+    /** Spread into an explicitly rendered VideoPlayer. */
+    playerProps: VideoPlayerProps & {
+        templates: TemplateRegistry;
+        video?: never;
+    };
+}
+declare function useVideo(options?: UseVideoOptions): UseVideoResult;
+
+export { type UseVideoOptions, type UseVideoResult, VideoError, type VideoErrorOptions, VideoPlayer, type VideoPlayerProps, useVideo };