@vanillaskyai/video 0.1.0

package/SECURITY.md

@@ -0,0 +1,22 @@
+# Security policy
+
+## Supported versions
+
+Security fixes target the latest published version of `@vanillaskyai/video`.
+Upgrade to the current release before reporting behavior that may already have
+been corrected.
+
+## Report a vulnerability
+
+Use [GitHub private vulnerability reporting](https://github.com/VanillaSkyAi/video/security/advisories/new)
+to report a suspected vulnerability. Do not open a public issue, discussion,
+or pull request containing exploit details, credentials, customer data, or an
+unannounced vulnerability.
+
+Include the affected version, impact, reproduction steps, and any suggested
+mitigation. Maintainers will validate the report and coordinate remediation and
+disclosure when appropriate, without a guaranteed response time.
+
+For deployment guidance covering authentication, provider credentials, request
+limits, media policy, and logging, read the
+[integration security guide](docs/security.md).

package/SUPPORT.md

@@ -0,0 +1,28 @@
+# Support
+
+VanillaSky Video is a beta open-source project. There is no guaranteed response time.
+
+## Product and integration questions
+
+Search the documentation and existing GitHub issues first. If the problem is
+not covered, open a reproducible GitHub issue at
+<https://github.com/VanillaSkyAi/video/issues> with:
+
+- the exact package, Node, React, framework, and provider versions;
+- a minimal reproduction or packed-consumer fixture;
+- expected and observed behavior;
+- redacted logs and the smallest relevant video input.
+
+Please do not include API keys, customer data, private media URLs, or
+unannounced security details.
+
+## Security reports
+
+Do not use a public issue for a suspected vulnerability. Follow `SECURITY.md`
+and use GitHub private vulnerability reporting.
+
+## Scope
+
+Maintainers may close requests that cannot be reproduced, rely on unsupported
+versions, or require application-specific implementation work. A public issue
+does not create a response-time or resolution commitment.

package/bin/vanillasky.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+import "../dist/cli.js";

package/dist/bg-confetti-WNQXS7ZS.js

@@ -0,0 +1,89 @@
+import {
+  ConfettiLayer
+} from "./chunk-CJ7F2CE6.js";
+import "./chunk-QAAO7OAY.js";
+import {
+  TemplateText
+} from "./chunk-BCRUUJ6A.js";
+import "./chunk-L5BTTCZV.js";
+import {
+  BrandGradientOverlay
+} from "./chunk-ABZACD4G.js";
+import "./chunk-XTOXFMLM.js";
+import {
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/scene-templates/bg-confetti.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var BgConfettiTemplate = ({
+  variables,
+  style,
+  progress,
+  motionProgress = progress,
+  beatIntensity,
+  width,
+  height,
+  textArchetype,
+  safeZone,
+  sceneDuration
+}) => {
+  const { background, foreground, font } = resolveTokens(style);
+  const textColor = foreground;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor: "#000",
+        position: "relative",
+        overflow: "hidden",
+        fontFamily: font
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          BrandGradientOverlay,
+          {
+            style,
+            progress,
+            sceneDuration,
+            seed: String(variables.texts || "").split("").reduce((acc, c) => acc + c.charCodeAt(0), 0)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ConfettiLayer,
+          {
+            progress: motionProgress,
+            width,
+            height,
+            beatIntensity,
+            bgColor: background.type === "solid" ? background.color : background.colors[1]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TemplateText,
+          {
+            motionProgress,
+            typeTreatment: resolveTokens(style).preset.type,
+            archetype: textArchetype ?? "subtle",
+            text: String(variables.texts ?? ""),
+            progress,
+            sceneDuration: sceneDuration ?? 3,
+            width,
+            height,
+            position: "center",
+            sizeRole: "headline",
+            safeZone,
+            font,
+            color: textColor,
+            beatIntensity
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  BgConfettiTemplate
+};

package/dist/bg-emoji-ETI47GLS.js

@@ -0,0 +1,150 @@
+import {
+  getCelebrationParticleTiming
+} from "./chunk-QAAO7OAY.js";
+import {
+  TemplateText
+} from "./chunk-BCRUUJ6A.js";
+import {
+  Emoji
+} from "./chunk-L5BTTCZV.js";
+import {
+  BrandGradientOverlay
+} from "./chunk-ABZACD4G.js";
+import "./chunk-XTOXFMLM.js";
+import {
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/scene-templates/bg-emoji.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function seededRandom(seed) {
+  const x = Math.sin(seed * 12.9898 + seed * 78.233) * 43758.5453;
+  return x - Math.floor(x);
+}
+var EMOJI_LIST = [
+  "\u2764\uFE0F",
+  // red heart
+  "\u2B50",
+  // star
+  "\u{1F389}",
+  // party popper
+  "\u{1F984}",
+  // unicorn
+  "\u{1F525}",
+  // fire
+  "\u2728",
+  // sparkles
+  "\u{1F680}",
+  // rocket
+  "\u{1F49C}"
+  // purple heart
+];
+var PARTICLE_COUNT = 100;
+function easeOutQuad(p) {
+  return 1 - (1 - p) * (1 - p);
+}
+var BgEmojiTemplate = ({
+  variables,
+  style,
+  progress,
+  motionProgress = progress,
+  beatIntensity,
+  width,
+  height,
+  textArchetype,
+  safeZone,
+  sceneDuration
+}) => {
+  const s = Math.min(width, height) / 1080;
+  const BURST_RADIUS = Math.max(width, height) * 0.95;
+  const { foreground, font } = resolveTokens(style);
+  const textColor = foreground;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor: "#000",
+        position: "relative",
+        overflow: "hidden",
+        fontFamily: font
+      },
+      children: [
+        /* @__PURE__ */ jsx(BrandGradientOverlay, { style, progress, sceneDuration, seed: String(variables.texts || "").split("").reduce((acc, c) => acc + c.charCodeAt(0), 0) }),
+        Array.from({ length: PARTICLE_COUNT }, (_, i) => {
+          const seed = i + 1;
+          const angle = i / PARTICLE_COUNT * Math.PI * 2;
+          const forceFactor = 0.75 + seededRandom(seed * 1) * 0.5;
+          const durationFactor = 1.1 + seededRandom(seed * 3) * 0.6;
+          const emoji = EMOJI_LIST[i % EMOJI_LIST.length];
+          const startRot = seededRandom(seed * 5) * 60 - 30;
+          const rotSpeed = (seededRandom(seed * 6) - 0.5) * 540;
+          const sizeJitter = 0.7 + seededRandom(seed * 7) * 0.7;
+          const timing = getCelebrationParticleTiming(motionProgress, i, durationFactor);
+          if (!timing) return null;
+          const p = timing.progress;
+          const reach = BURST_RADIUS * forceFactor;
+          const radialP = easeOutQuad(p);
+          const gravity = height * 0.08 * p * p;
+          const x = width * 0.5 + Math.cos(angle) * reach * radialP;
+          const y = height * 0.5 + Math.sin(angle) * reach * radialP + gravity;
+          const baseSize = (28 + seededRandom(seed * 11) * 24) * s;
+          const size = baseSize * sizeJitter;
+          const popScale = Math.min(1, p * 30);
+          const particleOpacity = p < 0.85 ? 1 : Math.max(0, 1 - (p - 0.85) / 0.15);
+          const opacity = particleOpacity * timing.opacity;
+          const beatPulse = 1 + beatIntensity * 0.2;
+          const rot = startRot + rotSpeed * p;
+          if (opacity <= 0) return null;
+          if (y > height + 100 || y < -100 || x < -100 || x > width + 100) return null;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: x - size / 2,
+                top: y - size / 2,
+                width: size,
+                height: size,
+                fontSize: size * 0.8,
+                lineHeight: 1,
+                textAlign: "center",
+                opacity,
+                transform: `rotate(${rot}deg) scale(${popScale * beatPulse})`,
+                pointerEvents: "none",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsx(Emoji, { char: emoji, size: size * 0.8, verticalAlign: "baseline" })
+            },
+            i
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          TemplateText,
+          {
+            motionProgress,
+            typeTreatment: resolveTokens(style).preset.type,
+            archetype: textArchetype ?? "subtle",
+            text: String(variables.texts ?? ""),
+            progress,
+            sceneDuration: sceneDuration ?? 3,
+            width,
+            height,
+            position: "center",
+            sizeRole: "headline",
+            safeZone,
+            font,
+            color: textColor,
+            beatIntensity
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  BgEmojiTemplate
+};

package/dist/bg-media-SVUZAMGX.js

@@ -0,0 +1,99 @@
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  ConfettiLayer
+} from "./chunk-CJ7F2CE6.js";
+import "./chunk-QAAO7OAY.js";
+import {
+  TemplateText
+} from "./chunk-BCRUUJ6A.js";
+import "./chunk-L5BTTCZV.js";
+import "./chunk-ABZACD4G.js";
+import "./chunk-XTOXFMLM.js";
+import {
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/scene-templates/bg-media.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var BgMediaTemplate = ({
+  variables,
+  style,
+  progress,
+  motionProgress = progress,
+  beatIntensity,
+  width,
+  height,
+  textArchetype,
+  backgroundEffect,
+  safeZone,
+  sceneDuration,
+  isPlaying = true
+}) => {
+  const { font, foreground, background } = resolveTokens(style);
+  const text = foreground;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor: "#000",
+        position: "relative",
+        overflow: "hidden",
+        fontFamily: font
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          SceneBackground,
+          {
+            style,
+            progress,
+            sceneDuration,
+            width,
+            height,
+            ...getMediaBackgroundProps(variables),
+            backgroundEffect,
+            seed: String(variables.texts || ""),
+            isPlaying,
+            beatIntensity
+          }
+        ),
+        variables.confetti === true && /* @__PURE__ */ jsx(
+          ConfettiLayer,
+          {
+            progress: motionProgress,
+            width,
+            height,
+            beatIntensity,
+            bgColor: String(variables.mediaUrl || "").trim() === "" ? background.type === "solid" ? background.color : background.colors[1] : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TemplateText,
+          {
+            motionProgress,
+            typeTreatment: resolveTokens(style).preset.type,
+            archetype: textArchetype ?? "subtle",
+            text: String(variables.texts ?? ""),
+            progress,
+            sceneDuration: sceneDuration ?? 3,
+            width,
+            height,
+            position: "center",
+            sizeRole: "headline",
+            safeZone,
+            font,
+            color: text,
+            beatIntensity
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  BgMediaTemplate
+};

package/dist/brand-message-F3RD4P3P.js

@@ -0,0 +1,253 @@
+import {
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  renderWithEmoji
+} from "./chunk-L5BTTCZV.js";
+import "./chunk-ABZACD4G.js";
+import {
+  interpolate
+} from "./chunk-XTOXFMLM.js";
+import "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/primitives/typography/BrandMessageBubble.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
+var BUBBLE_BG = "rgba(245,242,238,0.92)";
+var BUBBLE_TEXT = "#1c1c1e";
+var DOT_COLOR = "#8C8C92";
+function easeOutBack(t) {
+  const c1 = 1.70158;
+  const c3 = c1 + 1;
+  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+}
+var TAIL_WITH_EMOJI = /(\S+)(\s+)([\p{Extended_Pictographic}\p{Emoji_Modifier}\u{FE0E}\u{FE0F}\u{200D}]+)\s*$/u;
+function renderMessageWithEmojiTail(text, fontSizePx) {
+  const match = TAIL_WITH_EMOJI.exec(text);
+  if (!match || match.index === void 0) {
+    return renderWithEmoji(text, fontSizePx);
+  }
+  const [, lastWord, space, emoji] = match;
+  const leading = text.slice(0, match.index);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderWithEmoji(leading, fontSizePx),
+    /* @__PURE__ */ jsxs("span", { style: { whiteSpace: "nowrap" }, children: [
+      lastWord,
+      space,
+      renderWithEmoji(emoji, fontSizePx)
+    ] })
+  ] });
+}
+function popIn(t, start, dur = 0.4) {
+  if (t <= start) return 0;
+  if (t >= start + dur) return 1;
+  return easeOutBack((t - start) / dur);
+}
+var BrandMessageBubble = ({
+  progress,
+  sceneDuration,
+  brandName: rawBrandName,
+  message: rawMessage,
+  width,
+  height,
+  safeZone
+}) => {
+  const isLandscape = width > height;
+  const s = isLandscape ? Math.min(width, height) / 534 * 1.3 : width / 534;
+  const brandName = stripPipe(rawBrandName);
+  const message = stripPipe(rawMessage);
+  const realTimeSeconds = progress * sceneDuration;
+  const typingStart = 0.1;
+  const bubbleStart = 0.38;
+  const typingPop = popIn(progress, typingStart, 0.1);
+  const typingFade = interpolate(progress, [bubbleStart - 0.06, bubbleStart], [1, 0], CLAMP);
+  const showTyping = progress >= typingStart && progress < bubbleStart;
+  const bubblePop = popIn(progress, bubbleStart, 0.18);
+  const showBubble = progress >= bubbleStart;
+  const topPad = Math.max(safeZone.top, height * 0.25);
+  const sidePad = Math.max(safeZone.left, width * 0.06);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: topPad,
+        left: sidePad,
+        right: sidePad,
+        display: "flex",
+        justifyContent: "flex-end"
+      },
+      children: [
+        showTyping && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              opacity: typingPop * typingFade,
+              transform: `translateY(${(1 - typingPop) * 8 * s}px)`,
+              background: BUBBLE_BG,
+              borderRadius: 18 * s,
+              padding: `${12 * s}px ${16 * s}px`,
+              display: "flex",
+              gap: 5 * s,
+              alignItems: "center",
+              boxShadow: `0 ${1 * s}px ${4 * s}px rgba(0,0,0,0.10)`
+            },
+            children: [0, 1, 2].map((j) => {
+              const phase = (realTimeSeconds * 1.6 + j * 0.2) % 1;
+              const y = Math.sin(phase * Math.PI * 2) * 2.5 * s;
+              const op = 0.45 + 0.55 * Math.max(0, Math.sin(phase * Math.PI));
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: 7 * s,
+                    height: 7 * s,
+                    borderRadius: 3.5 * s,
+                    background: DOT_COLOR,
+                    transform: `translateY(${-y}px)`,
+                    opacity: op
+                  }
+                },
+                j
+              );
+            })
+          }
+        ),
+        showBubble && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              // `width: max-content` forces the bubble to size to its
+              // natural one-line content width up to `maxWidth`. Without
+              // this, modern-screenshot's foreignObject text shaping (the
+              // export path) was using an intrinsic width well below
+              // `maxWidth`, breaking text that would have fit on one line
+              // in the live DOM — even after the NBSP fix glued the
+              // trailing emoji to the last word. With `max-content` +
+              // `maxWidth`, the bubble grows up to the cap on a single
+              // line, then wraps naturally inside the cap for genuinely
+              // long messages.
+              width: "max-content",
+              maxWidth: width * 0.86,
+              // Render with native system fonts in BOTH paths. The export
+              // pipeline turns the iframe DOM into an SVG and loads it via
+              // <img src="data:image/svg+xml,…">, and SVG-as-image is a
+              // sandboxed graphics context that does NOT load @font-face
+              // resources (data: or otherwise — this is a browser security
+              // model, not a CSP issue). Inter therefore never resolves in
+              // the export; the SVG falls back to Helvetica/Helvetica Neue,
+              // which is wider at the same point size, and "We built this
+              // for you ❤️" wraps inside the pinned bubble box even though
+              // the iframe's Inter rendering fit on one line. Naming the
+              // system font explicitly here makes the iframe ALSO use that
+              // same OS-native font, so preview and export compute identical
+              // widths and both fit on one line. See PRs #598/#599/#604 for
+              // the months of font-embed work that this finally closes out.
+              fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+              background: BUBBLE_BG,
+              color: BUBBLE_TEXT,
+              borderRadius: `${22 * s}px ${22 * s}px 0 ${22 * s}px`,
+              padding: `${14 * s}px ${18 * s}px ${12 * s}px`,
+              fontSize: 23 * s,
+              lineHeight: `${29 * s}px`,
+              fontWeight: 400,
+              opacity: bubblePop,
+              transform: `translateY(${(1 - bubblePop) * 8 * s}px) scale(${0.96 + 0.04 * bubblePop})`,
+              transformOrigin: "right top",
+              boxShadow: `0 ${2 * s}px ${10 * s}px rgba(0,0,0,0.14)`
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: 14 * s,
+                    fontStyle: "italic",
+                    fontWeight: 400,
+                    color: "rgba(0,0,0,0.45)",
+                    lineHeight: 1.2,
+                    marginBottom: 6 * s
+                  },
+                  children: brandName
+                }
+              ),
+              renderMessageWithEmojiTail(message, 23 * s)
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/visual-system/scene-templates/brand-message.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var BrandMessageTemplate = ({
+  variables,
+  style,
+  progress,
+  beatIntensity,
+  width,
+  height,
+  sceneDuration,
+  isPlaying = true,
+  safeZone,
+  backgroundEffect
+}) => {
+  const brandName = stripPipe(style.brand.name ?? "Your brand");
+  const message = stripPipe(String(variables.message || ""));
+  const seed = (brandName + message).split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor: "#000",
+        position: "relative",
+        overflow: "hidden",
+        // System fonts only — see BrandMessageBubble for the why
+        // (SVG-as-image can't load @font-face data: URLs, so the only
+        // way to get preview/export parity is to use a font the OS
+        // already has natively).
+        fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          SceneBackground,
+          {
+            style,
+            progress,
+            sceneDuration,
+            width,
+            height,
+            ...getMediaBackgroundProps(variables),
+            backgroundEffect,
+            seed,
+            isPlaying,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          BrandMessageBubble,
+          {
+            progress,
+            sceneDuration: sceneDuration ?? 4,
+            brandName,
+            message,
+            width,
+            height,
+            safeZone
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  BrandMessageTemplate
+};

package/dist/builtin-server-F7YXRVCH.js

@@ -0,0 +1,8 @@
+import {
+  BUILTIN_SERVER_TEMPLATE_KIT
+} from "./chunk-A2X45FET.js";
+import "./chunk-CHLGW22F.js";
+import "./chunk-2E6T633S.js";
+export {
+  BUILTIN_SERVER_TEMPLATE_KIT
+};