@vanillaskyai/video 0.8.7 → 0.9.0

package/dist/showcase-code-2HLAVKBM.js

@@ -1,357 +0,0 @@
-import {
-  fitTextSize,
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  TemplateText
-} from "./chunk-YJJC4N4D.js";
-import "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import {
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import {
-  hasSceneMedia
-} from "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/devices/CodeEditor.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var SPRING_EDITOR = { damping: 20, stiffness: 100 };
-var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
-var MONO_CHAR_RATIO = 0.63;
-var MONO_MIN_SCALE = 0.68;
-var MONO_FONT = "'Fira Code', 'SF Mono', 'Cascadia Code', Menlo, monospace";
-var CHROME_FONT = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
-var KEYWORDS = /* @__PURE__ */ new Set([
-  "const",
-  "let",
-  "var",
-  "function",
-  "return",
-  "import",
-  "export",
-  "from",
-  "async",
-  "await",
-  "if",
-  "else",
-  "for",
-  "while",
-  "class",
-  "new",
-  "this",
-  "true",
-  "false",
-  "null",
-  "undefined",
-  "def",
-  "self",
-  "print",
-  "in",
-  "not",
-  "and",
-  "or",
-  "try",
-  "catch",
-  "throw"
-]);
-function tokenizeLine(line, keywordColor, stringColor, commentColor, numberColor, defaultColor) {
-  const tokens = [];
-  const commentMatch = line.match(/^(.*?)(\/\/.*|#.*)$/);
-  if (commentMatch) {
-    tokens.push(...tokenizeCode(commentMatch[1], keywordColor, stringColor, numberColor, defaultColor));
-    tokens.push({ text: commentMatch[2], color: commentColor });
-    return tokens;
-  }
-  return tokenizeCode(line, keywordColor, stringColor, numberColor, defaultColor);
-}
-function tokenizeCode(code, keywordColor, stringColor, numberColor, defaultColor) {
-  const tokens = [];
-  const regex = /("[^"]*"|'[^']*'|`[^`]*`|\b\d+\.?\d*\b|\b\w+\b|[^\s]|\s+)/g;
-  let match;
-  while ((match = regex.exec(code)) !== null) {
-    const t = match[0];
-    if (t.startsWith('"') || t.startsWith("'") || t.startsWith("`")) {
-      tokens.push({ text: t, color: stringColor });
-    } else if (/^\d+\.?\d*$/.test(t)) {
-      tokens.push({ text: t, color: numberColor });
-    } else if (KEYWORDS.has(t)) {
-      tokens.push({ text: t, color: keywordColor });
-    } else {
-      tokens.push({ text: t, color: defaultColor });
-    }
-  }
-  return tokens;
-}
-var CodeEditor = ({
-  progress,
-  code,
-  filename = "app.ts",
-  width,
-  height,
-  beatIntensity = 0
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const codeRaw = String(code || "").replace(/\\n/g, "\n");
-  const filenameClean = stripPipe(String(filename || "app.ts"));
-  const codeLines = codeRaw.split("\n");
-  const editorWidth = Math.min(width * 0.88, height * 0.55 * (16 / 9));
-  const chromeHeight = 44 * s;
-  const contentHeight = editorWidth * (9 / 16);
-  const editorHeight = chromeHeight + contentHeight;
-  const borderRadius = 12 * s;
-  const editorBg = "#1e1e2e";
-  const chromeBg = "#313244";
-  const codeDefault = "#cdd6f4";
-  const keywordColor = "#cba6f7";
-  const stringColor = "#a6e3a1";
-  const commentColor = "#6c7086";
-  const numberColor = "#fab387";
-  const lineNumColor = "#45475a";
-  const lineNumWidth = 40 * s;
-  const codeAvailWidth = editorWidth - lineNumWidth - 16 * s;
-  const baseFontSize = Math.max(16, 22 * s);
-  const longestLineChars = codeLines.reduce((m, l) => Math.max(m, l.length), 1);
-  const fontSize = fitTextSize("M".repeat(longestLineChars), baseFontSize, codeAvailWidth, {
-    minScale: MONO_MIN_SCALE,
-    charWidthRatio: MONO_CHAR_RATIO
-  });
-  const atFloor = fontSize <= baseFontSize * MONO_MIN_SCALE + 0.01;
-  const maxLineChars = atFloor ? Math.max(4, Math.floor(codeAvailWidth / (fontSize * MONO_CHAR_RATIO))) : Infinity;
-  const displayLines = codeLines.map(
-    (l) => l.length > maxLineChars ? `${l.slice(0, maxLineChars - 1).trimEnd()}\u2026` : l
-  );
-  const lineHeight = fontSize * 1.7;
-  const slideProgress = interpolate(progress, [0.02, 0.15], [0, 1], CLAMP);
-  const springVal = spring(slideProgress, SPRING_EDITOR);
-  const editorY = (1 - springVal) * 200 * s;
-  const editorOpacity = interpolate(slideProgress, [0, 0.08], [0, 1], CLAMP);
-  const lineStaggerStart = 0.15;
-  const lineStaggerEnd = 0.8;
-  const lineSlice = codeLines.length > 0 ? (lineStaggerEnd - lineStaggerStart) / codeLines.length : 0;
-  const beatScale = 1 + beatIntensity * 0.01;
-  const dotSize = 12 * s;
-  const dotGap = 8 * s;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: height * 0.35,
-        left: (width - editorWidth) / 2,
-        width: editorWidth,
-        height: editorHeight,
-        transform: `translateY(${editorY}px) scale(${beatScale})`,
-        opacity: editorOpacity
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            width: editorWidth,
-            height: editorHeight,
-            borderRadius,
-            overflow: "hidden",
-            position: "relative",
-            boxShadow: `0 ${20 * s}px ${60 * s}px rgba(0,0,0,0.35)`
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  width: "100%",
-                  height: chromeHeight,
-                  backgroundColor: chromeBg,
-                  display: "flex",
-                  alignItems: "center",
-                  paddingLeft: 16 * s,
-                  paddingRight: 16 * s
-                },
-                children: [
-                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: dotGap, flexShrink: 0 }, children: [
-                    /* @__PURE__ */ jsx("div", { style: { width: dotSize, height: dotSize, borderRadius: "50%", backgroundColor: "#ff5f57" } }),
-                    /* @__PURE__ */ jsx("div", { style: { width: dotSize, height: dotSize, borderRadius: "50%", backgroundColor: "#febc2e" } }),
-                    /* @__PURE__ */ jsx("div", { style: { width: dotSize, height: dotSize, borderRadius: "50%", backgroundColor: "#28c840" } })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        flex: 1,
-                        textAlign: "center",
-                        fontSize: 13 * s,
-                        fontFamily: CHROME_FONT,
-                        color: "#a6adc8",
-                        whiteSpace: "nowrap"
-                      },
-                      children: filenameClean
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("div", { style: { width: dotSize * 3 + dotGap * 2, flexShrink: 0 } })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: "100%",
-                  height: contentHeight,
-                  backgroundColor: editorBg,
-                  padding: `${16 * s}px 0`,
-                  overflow: "hidden"
-                },
-                children: displayLines.map((line, i) => {
-                  const lineStart = lineStaggerStart + i * lineSlice;
-                  const lineOpacity = interpolate(progress, [lineStart, lineStart + 0.04], [0, 1], CLAMP);
-                  const lineSlideX = interpolate(progress, [lineStart, lineStart + 0.06], [12 * s, 0], CLAMP);
-                  const tokens = line.trim() === "" ? [{ text: " ", color: codeDefault }] : tokenizeLine(line, keywordColor, stringColor, commentColor, numberColor, codeDefault);
-                  return /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "baseline",
-                        height: lineHeight,
-                        opacity: lineOpacity,
-                        transform: `translateX(${lineSlideX}px)`
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            style: {
-                              width: lineNumWidth,
-                              textAlign: "right",
-                              paddingRight: 12 * s,
-                              fontSize,
-                              fontFamily: MONO_FONT,
-                              color: lineNumColor,
-                              lineHeight: `${lineHeight}px`,
-                              flexShrink: 0,
-                              userSelect: "none"
-                            },
-                            children: i + 1
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            style: {
-                              fontSize,
-                              fontFamily: MONO_FONT,
-                              lineHeight: `${lineHeight}px`,
-                              whiteSpace: "pre"
-                            },
-                            children: tokens.map((token, j) => /* @__PURE__ */ jsx("span", { style: { color: token.color }, children: token.text }, j))
-                          }
-                        )
-                      ]
-                    },
-                    i
-                  );
-                })
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-
-// src/visual-system/scene-templates/showcase-code.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ShowcaseCodeTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  safeZone,
-  sceneDuration,
-  backgroundEffect,
-  isPlaying = true
-}) => {
-  const { primary, foreground, font } = resolveTokens(style);
-  const textColor = foreground;
-  const textsRaw = String(variables.texts || "");
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: font
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            backgroundEffect,
-            seed: textsRaw,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          TemplateText,
-          {
-            overMedia: hasSceneMedia(variables),
-            motionProgress,
-            typeTreatment: resolveTokens(style).preset.type,
-            archetype: "subtle",
-            text: String(variables.texts ?? ""),
-            progress,
-            sceneDuration: sceneDuration ?? 3,
-            width,
-            height,
-            position: "top",
-            sizeRole: "headline",
-            safeZone,
-            font,
-            color: textColor,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          CodeEditor,
-          {
-            progress,
-            code: String(variables.code || ""),
-            filename: String(variables.filename || "app.ts"),
-            width,
-            height,
-            accent: primary,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  ShowcaseCodeTemplate
-};

package/dist/showcase-phone-Q4HEO4LH.js

@@ -1,278 +0,0 @@
-import {
-  PhoneScreenFill,
-  ProductSurface,
-  resolveProductSurfaceMotion
-} from "./chunk-G5JPHBX7.js";
-import "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  TemplateText
-} from "./chunk-YJJC4N4D.js";
-import "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import {
-  SPRING_SMOOTH,
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import {
-  hasSceneMedia
-} from "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  TOKEN_DEFAULTS,
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/devices/PhoneFrame.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var PhoneFrame = ({
-  progress,
-  motionProgress = progress,
-  screenMediaUrl = "",
-  screens = [],
-  width,
-  height,
-  font = TOKEN_DEFAULTS.font,
-  beatIntensity = 0,
-  accent = TOKEN_DEFAULTS.primary,
-  secondary = "#00b5e5",
-  bg,
-  screenFit = "cover",
-  screenFocusX = 50,
-  screenFocusY = 50,
-  screenMotion = "pushIn",
-  screenCalloutText = "",
-  screenCalloutX = 70,
-  screenCalloutY = 35
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const slidesMode = screens.length > 0;
-  const maxPhoneH = height * 0.6;
-  const phoneWidth = width > height ? Math.min(width * 0.55, maxPhoneH / 2) : Math.min(width * 0.55, height * 0.35);
-  const phoneHeight = phoneWidth * 2;
-  const borderRadius = 40 * s;
-  const borderWidth = 6 * s;
-  const enterRange = slidesMode ? [0.02, 0.35] : [0.02, 0.85];
-  const enterP = spring(
-    interpolate(motionProgress, enterRange, [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }),
-    { damping: 26, stiffness: 80 }
-  );
-  const phoneRotateX = (1 - enterP) * 60;
-  const phoneY = (1 - enterP) * 180 * s;
-  const phoneScale = interpolate(enterP, [0, 1], [0.85, 1]);
-  const phoneOpacity = interpolate(motionProgress, [0.02, 0.12], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const slide1to2 = slidesMode && screens.length >= 2 ? spring(interpolate(progress, [0.28, 0.48], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }), SPRING_SMOOTH) : 0;
-  const slide2to3 = slidesMode && screens.length >= 3 ? spring(interpolate(progress, [0.58, 0.78], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }), SPRING_SMOOTH) : 0;
-  const slideOffset = -(slide1to2 + slide2to3) * phoneWidth;
-  const beatScale = 1 + beatIntensity * (slidesMode ? 0.01 : 0.015);
-  const renderScreen = (url, key, withCallout = false) => /* @__PURE__ */ jsx("div", { style: { position: "relative", width: phoneWidth, height: phoneHeight, flexShrink: 0 }, children: /* @__PURE__ */ jsx(
-    ProductSurface,
-    {
-      mediaUrl: url,
-      progress,
-      width: phoneWidth,
-      height: phoneHeight,
-      fit: screenFit,
-      focusX: screenFocusX,
-      focusY: screenFocusY,
-      motion: withCallout ? screenMotion : "still",
-      calloutText: withCallout ? screenCalloutText : "",
-      calloutX: screenCalloutX,
-      calloutY: screenCalloutY,
-      accent,
-      font,
-      placeholder: /* @__PURE__ */ jsx(
-        PhoneScreenFill,
-        {
-          accent,
-          secondary,
-          bg,
-          font,
-          s,
-          w: phoneWidth,
-          h: phoneHeight,
-          progress
-        }
-      )
-    }
-  ) }, key);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: height * 0.32,
-        left: (width - phoneWidth) / 2,
-        width: phoneWidth,
-        height: phoneHeight,
-        perspective: `${1600 * s}px`,
-        transformStyle: "preserve-3d"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            width: phoneWidth,
-            height: phoneHeight,
-            transform: `translateY(${phoneY}px) rotateX(${phoneRotateX}deg) scale(${phoneScale * beatScale})`,
-            transformOrigin: "center bottom",
-            opacity: phoneOpacity
-          },
-          children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                width: phoneWidth,
-                height: phoneHeight,
-                borderRadius,
-                overflow: "hidden",
-                position: "relative",
-                boxShadow: `0 ${20 * s}px ${60 * s}px rgba(0,0,0,0.35)`
-              },
-              children: [
-                slidesMode ? /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "data-phone-screen-progress": Number((slide1to2 + slide2to3).toFixed(6)),
-                    style: {
-                      display: "flex",
-                      width: phoneWidth * screens.length,
-                      height: phoneHeight,
-                      transform: `translateX(${slideOffset}px)`
-                    },
-                    children: screens.map((url, i) => renderScreen(url, i))
-                  }
-                ) : renderScreen(screenMediaUrl, void 0, true),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      inset: 0,
-                      borderRadius,
-                      border: `${borderWidth * 1.5}px solid rgba(220,220,220,0.6)`,
-                      boxShadow: `inset 0 0 0 ${1 * s}px rgba(255,255,255,0.1)`,
-                      pointerEvents: "none",
-                      zIndex: 2
-                    }
-                  }
-                )
-              ]
-            }
-          )
-        }
-      )
-    }
-  );
-};
-
-// src/visual-system/scene-templates/showcase-phone.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ShowcasePhoneTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  textArchetype,
-  safeZone,
-  sceneDuration,
-  backgroundEffect,
-  isPlaying
-}) => {
-  const tokens = resolveTokens(style);
-  const { primary, secondary, foreground, font, background } = tokens;
-  const textColor = foreground;
-  const screenMediaUrl = String(variables.screenMediaUrl || "");
-  const extraScreens = [
-    String(variables.screen1Url || ""),
-    String(variables.screen2Url || "")
-  ].filter(Boolean);
-  const screens = extraScreens.length > 0 && screenMediaUrl ? [screenMediaUrl, ...extraScreens] : extraScreens;
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: font
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            backgroundEffect,
-            seed: String(variables.texts || ""),
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          TemplateText,
-          {
-            overMedia: hasSceneMedia(variables),
-            motionProgress,
-            typeTreatment: tokens.preset.type,
-            archetype: textArchetype ?? "subtle",
-            text: String(variables.texts ?? ""),
-            progress,
-            sceneDuration: sceneDuration ?? 3,
-            width,
-            height,
-            position: "top",
-            sizeRole: "headline",
-            safeZone,
-            font,
-            color: textColor,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          PhoneFrame,
-          {
-            progress,
-            motionProgress,
-            screenMediaUrl,
-            screens,
-            width,
-            height,
-            font,
-            beatIntensity,
-            accent: primary,
-            secondary,
-            bg: background.type === "solid" ? background.color : void 0,
-            screenFit: variables.screenFit === "contain" ? "contain" : "cover",
-            screenFocusX: Number(variables.screenFocusX ?? 50),
-            screenFocusY: Number(variables.screenFocusY ?? 50),
-            screenMotion: resolveProductSurfaceMotion(variables.screenMotion),
-            screenCalloutText: String(variables.screenCalloutText || ""),
-            screenCalloutX: Number(variables.screenCalloutX ?? 70),
-            screenCalloutY: Number(variables.screenCalloutY ?? 35)
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  ShowcasePhoneTemplate
-};