@vanillaskyai/video 0.8.8 → 0.9.0

package/dist/showcase-terminal-DL45LUFG.js

@@ -1,312 +0,0 @@
-import {
-  parseList
-} from "./chunk-P22HHFDK.js";
-import {
-  fitTextSize
-} 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 {
-  TOKEN_DEFAULTS,
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/devices/TerminalOutput.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var SPRING_TERMINAL = { 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 TerminalOutput = ({
-  progress,
-  command,
-  outputLines,
-  promptPrefix = "$",
-  width,
-  height,
-  accent = TOKEN_DEFAULTS.primary,
-  beatIntensity = 0
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const termWidth = Math.min(width * 0.85, height * 0.55 * (16 / 9));
-  const chromeHeight = 44 * s;
-  const contentHeight = termWidth * (9 / 16);
-  const termHeight = chromeHeight + contentHeight;
-  const borderRadius = 12 * s;
-  const termBg = "#1e1e2e";
-  const termText = "#cdd6f4";
-  const promptColor = accent;
-  const contentAvailWidth = termWidth - 48 * s;
-  const baseFontSize = Math.max(18, 26 * s);
-  const promptChars = promptPrefix.length + 1;
-  const commandLineChars = promptChars + command.length + 1;
-  const longestLineChars = outputLines.reduce(
-    (m, l) => Math.max(m, l.length),
-    Math.max(commandLineChars, 1)
-  );
-  const fontSize = fitTextSize("M".repeat(longestLineChars), baseFontSize, contentAvailWidth, {
-    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(contentAvailWidth / (fontSize * MONO_CHAR_RATIO))) : Infinity;
-  const ellipsize = (l) => l.length > maxLineChars ? `${l.slice(0, maxLineChars - 1).trimEnd()}\u2026` : l;
-  const displayCommand = commandLineChars > maxLineChars ? `${command.slice(0, Math.max(1, maxLineChars - promptChars - 2)).trimEnd()}\u2026` : command;
-  const displayOutputLines = outputLines.map(ellipsize);
-  const lineHeight = fontSize * 1.7;
-  const slideProgress = interpolate(progress, [0.02, 0.15], [0, 1], CLAMP);
-  const springVal = spring(slideProgress, SPRING_TERMINAL);
-  const termY = (1 - springVal) * 200 * s;
-  const termOpacity = interpolate(slideProgress, [0, 0.08], [0, 1], CLAMP);
-  const typeProgress = interpolate(progress, [0.1, 0.48], [0, 1], CLAMP);
-  const charsVisible = Math.floor(typeProgress * displayCommand.length);
-  const typedText = displayCommand.slice(0, charsVisible);
-  const isTyping = typeProgress > 0 && typeProgress < 1;
-  const cursorCycle = Math.floor(progress * 25);
-  const cursorVisible = isTyping || cursorCycle % 2 === 0;
-  const outputStartP = 0.55;
-  const outputEndP = 0.88;
-  const outputSlice = displayOutputLines.length > 0 ? (outputEndP - outputStartP) / displayOutputLines.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 - termWidth) / 2,
-        width: termWidth,
-        height: termHeight,
-        transform: `translateY(${termY}px) scale(${beatScale})`,
-        opacity: termOpacity
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            width: termWidth,
-            height: termHeight,
-            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: "#313244",
-                  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: "Terminal"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("div", { style: { width: dotSize * 3 + dotGap * 2, flexShrink: 0 } })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  width: "100%",
-                  height: contentHeight,
-                  backgroundColor: termBg,
-                  padding: `${20 * s}px ${24 * s}px`,
-                  overflow: "hidden"
-                },
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      style: {
-                        fontFamily: MONO_FONT,
-                        fontSize,
-                        lineHeight: `${lineHeight}px`,
-                        whiteSpace: "nowrap"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx("span", { style: { color: promptColor, fontWeight: 700 }, children: promptPrefix }),
-                        /* @__PURE__ */ jsxs("span", { style: { color: termText }, children: [
-                          " ",
-                          typedText
-                        ] }),
-                        /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            style: {
-                              display: "inline-block",
-                              width: fontSize * 0.55,
-                              height: fontSize * 1.1,
-                              backgroundColor: cursorVisible ? termText : "transparent",
-                              verticalAlign: "text-bottom",
-                              marginLeft: 1
-                            }
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  displayOutputLines.map((line, i) => {
-                    const lineStart = outputStartP + i * outputSlice;
-                    const lineOpacity = interpolate(progress, [lineStart, lineStart + 0.03], [0, 1], CLAMP);
-                    const lineSlideY = interpolate(progress, [lineStart, lineStart + 0.05], [8 * s, 0], CLAMP);
-                    return /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          fontFamily: MONO_FONT,
-                          fontSize,
-                          lineHeight: `${lineHeight}px`,
-                          color: termText,
-                          opacity: lineOpacity,
-                          transform: `translateY(${lineSlideY}px)`,
-                          marginTop: i === 0 ? lineHeight * 0.5 : 0,
-                          whiteSpace: "nowrap"
-                        },
-                        children: line
-                      },
-                      i
-                    );
-                  })
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-
-// src/visual-system/scene-templates/showcase-terminal.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ShowcaseTerminalTemplate = ({
-  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 || "");
-  const command = String(variables.command || "");
-  const promptPrefix = String(variables.promptPrefix || "$");
-  const outputLines = parseList(variables.output);
-  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(
-          TerminalOutput,
-          {
-            progress,
-            command,
-            outputLines,
-            promptPrefix,
-            width,
-            height,
-            accent: primary,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  ShowcaseTerminalTemplate
-};

package/dist/showcase-web-2QZO73FZ.js

@@ -1,396 +0,0 @@
-import {
-  ProductSurface,
-  WebScreenFill,
-  resolveProductSurfaceMotion
-} from "./chunk-G5JPHBX7.js";
-import {
-  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 {
-  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/WebMockup.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
-var WebMockup = ({
-  progress,
-  width,
-  height,
-  frame = "browser",
-  screenMediaUrl = "",
-  screens = [],
-  addressBarUrl = "yourapp.com",
-  font = TOKEN_DEFAULTS.font,
-  accent = TOKEN_DEFAULTS.primary,
-  secondary = "#00b5e5",
-  bg,
-  beatIntensity = 0,
-  screenFit = "cover",
-  screenFocusX = 50,
-  screenFocusY = 50,
-  screenMotion = "pushIn",
-  screenCalloutText = "",
-  screenCalloutX = 70,
-  screenCalloutY = 35
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const isBrowser = frame !== "tablet";
-  const addressBarUrlClean = stripPipe(String(addressBarUrl || "yourapp.com"));
-  const slidesMode = screens.length > 0;
-  const deviceWidth = Math.min(width * 0.85, height * 0.55 * (16 / 9));
-  const chromeHeight = isBrowser ? 44 * s : 0;
-  const contentHeight = deviceWidth * (9 / 16);
-  const deviceHeight = chromeHeight + contentHeight;
-  const borderRadius = isBrowser ? 12 * s : 24 * s;
-  const borderWidth = isBrowser ? 0 : 6 * s;
-  const enterRange = slidesMode ? [0.02, 0.35] : [0.02, 0.85];
-  const enterP = spring(
-    interpolate(progress, enterRange, [0, 1], CLAMP),
-    { damping: 28, stiffness: 80 }
-  );
-  const rotateX = (1 - enterP) * 70;
-  const deviceY = (1 - enterP) * 150 * s;
-  const deviceScale = interpolate(enterP, [0, 1], [0.85, 1]);
-  const deviceOpacity = interpolate(progress, [0.02, 0.1], [0, 1], CLAMP);
-  const slideCount = screens.length;
-  let slideOffset = 0;
-  if (slidesMode && slideCount >= 2) {
-    const transitionWidth = 0.1;
-    let totalSlides = 0;
-    for (let i = 1; i < slideCount; i++) {
-      const boundary = i / slideCount;
-      const start = boundary - transitionWidth / 2;
-      const end = boundary + transitionWidth / 2;
-      totalSlides += spring(
-        interpolate(progress, [start, end], [0, 1], CLAMP),
-        SPRING_SMOOTH
-      );
-    }
-    slideOffset = -totalSlides * deviceWidth;
-  }
-  const beatScale = slidesMode ? 1 + beatIntensity * 0.01 : 1 + beatIntensity * 0.015;
-  const dotSize = 12 * s;
-  const dotGap = 8 * s;
-  const placeholder = /* @__PURE__ */ jsx(
-    WebScreenFill,
-    {
-      accent,
-      secondary,
-      bg,
-      font,
-      s,
-      w: deviceWidth,
-      h: contentHeight,
-      progress
-    }
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: height * 0.35,
-        left: (width - deviceWidth) / 2,
-        width: deviceWidth,
-        height: deviceHeight,
-        perspective: `${1200 * s}px`
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            width: deviceWidth,
-            height: deviceHeight,
-            transform: `rotateX(${rotateX}deg) translateY(${deviceY}px) scale(${deviceScale * beatScale})`,
-            transformOrigin: "center bottom",
-            opacity: deviceOpacity
-          },
-          children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                width: deviceWidth,
-                height: deviceHeight,
-                borderRadius,
-                overflow: "hidden",
-                position: "relative",
-                boxShadow: `0 ${20 * s}px ${60 * s}px rgba(0,0,0,0.35)`
-              },
-              children: [
-                isBrowser && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      width: "100%",
-                      height: 44 * s,
-                      backgroundColor: "#e8e8e8",
-                      display: "flex",
-                      alignItems: "center",
-                      paddingLeft: 16 * s,
-                      paddingRight: 16 * s,
-                      gap: 0,
-                      position: "relative",
-                      zIndex: 2
-                    },
-                    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__ */ jsxs(
-                        "div",
-                        {
-                          style: {
-                            flex: 1,
-                            marginLeft: 16 * s,
-                            height: 28 * s,
-                            backgroundColor: "#ffffff",
-                            borderRadius: 6 * s,
-                            display: "flex",
-                            alignItems: "center",
-                            paddingLeft: 12 * s,
-                            paddingRight: 12 * s,
-                            overflow: "hidden"
-                          },
-                          children: [
-                            /* @__PURE__ */ jsxs(
-                              "svg",
-                              {
-                                width: 14 * s,
-                                height: 14 * s,
-                                viewBox: "0 0 14 14",
-                                fill: "none",
-                                style: { flexShrink: 0, marginRight: 6 * s },
-                                children: [
-                                  /* @__PURE__ */ jsx("rect", { x: "2", y: "6", width: "10", height: "7", rx: "1.5", fill: "#999" }),
-                                  /* @__PURE__ */ jsx("path", { d: "M4.5 6V4.5a2.5 2.5 0 015 0V6", stroke: "#999", strokeWidth: "1.5", fill: "none", strokeLinecap: "round" })
-                                ]
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                style: {
-                                  fontSize: 13 * s,
-                                  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-                                  color: "#666",
-                                  whiteSpace: "nowrap",
-                                  overflow: "hidden",
-                                  textOverflow: "ellipsis"
-                                },
-                                children: addressBarUrlClean
-                              }
-                            )
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                ),
-                !isBrowser && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      inset: 0,
-                      borderRadius,
-                      border: `${borderWidth * 1.5}px solid rgba(220,220,220,0.6)`,
-                      pointerEvents: "none",
-                      zIndex: 2
-                    }
-                  }
-                ),
-                slidesMode ? /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      top: chromeHeight,
-                      left: 0,
-                      width: deviceWidth * screens.length,
-                      height: contentHeight,
-                      display: "flex",
-                      transform: `translateX(${slideOffset}px)`
-                    },
-                    children: screens.map((url, i) => /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          width: deviceWidth,
-                          height: contentHeight,
-                          flexShrink: 0
-                        },
-                        children: /* @__PURE__ */ jsx(
-                          ProductSurface,
-                          {
-                            mediaUrl: url,
-                            progress,
-                            width: deviceWidth,
-                            height: contentHeight,
-                            fit: screenFit,
-                            focusX: screenFocusX,
-                            focusY: screenFocusY,
-                            motion: "still",
-                            accent,
-                            font,
-                            placeholder
-                          }
-                        )
-                      },
-                      i
-                    ))
-                  }
-                ) : /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: chromeHeight, left: 0, width: deviceWidth, height: contentHeight }, children: /* @__PURE__ */ jsx(
-                  ProductSurface,
-                  {
-                    mediaUrl: screenMediaUrl,
-                    progress,
-                    width: deviceWidth,
-                    height: contentHeight,
-                    fit: screenFit,
-                    focusX: screenFocusX,
-                    focusY: screenFocusY,
-                    motion: screenMotion,
-                    calloutText: screenCalloutText,
-                    calloutX: screenCalloutX,
-                    calloutY: screenCalloutY,
-                    accent,
-                    font,
-                    placeholder
-                  }
-                ) })
-              ]
-            }
-          )
-        }
-      )
-    }
-  );
-};
-
-// src/visual-system/scene-templates/showcase-web.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ShowcaseWebTemplate = ({
-  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;
-  const frame = String(variables.frame || "browser").toLowerCase() === "tablet" ? "tablet" : "browser";
-  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(
-          WebMockup,
-          {
-            progress,
-            width,
-            height,
-            frame,
-            screenMediaUrl,
-            screens,
-            addressBarUrl: String(variables.addressBarUrl || ""),
-            font,
-            accent: primary,
-            secondary,
-            bg: background.type === "solid" ? background.color : void 0,
-            beatIntensity,
-            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 {
-  ShowcaseWebTemplate
-};