@vanillaskyai/video 0.1.0

package/dist/showcase-code-RUTFZR3H.js

@@ -0,0 +1,351 @@
+import {
+  fitTextSize,
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  TemplateText
+} from "./chunk-BCRUUJ6A.js";
+import "./chunk-L5BTTCZV.js";
+import "./chunk-ABZACD4G.js";
+import {
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  resolveTokens
+} from "./chunk-FNAEQ7QO.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: "#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,
+          {
+            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-6CP6XEU5.js

@@ -0,0 +1,272 @@
+import {
+  PhoneScreenFill,
+  ProductSurface,
+  resolveProductSurfaceMotion
+} from "./chunk-FSG2PYWG.js";
+import "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  TemplateText
+} from "./chunk-BCRUUJ6A.js";
+import "./chunk-L5BTTCZV.js";
+import "./chunk-ABZACD4G.js";
+import {
+  SPRING_SMOOTH,
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  TOKEN_DEFAULTS,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.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: "#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,
+          {
+            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
+};