@vanillaskyai/video 0.8.8 → 0.9.0

package/dist/social-milestone-GEFUQSBF.js

@@ -1,296 +0,0 @@
-import {
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  ConfettiLayer
-} from "./chunk-CJ7F2CE6.js";
-import "./chunk-QAAO7OAY.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  Emoji,
-  renderWithEmoji
-} from "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import {
-  accessibleTextColor,
-  withOpacity
-} from "./chunk-W3VDIBGR.js";
-import {
-  SPRING_BOUNCY,
-  SPRING_SMOOTH,
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  MEDIA_TEXT_SHADOW,
-  TOKEN_DEFAULTS,
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/social/MilestoneBadge.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var CLAMP = {
-  extrapolateLeft: "clamp",
-  extrapolateRight: "clamp"
-};
-var MilestoneBadge = ({
-  progress,
-  width,
-  height,
-  targetNumber,
-  label: rawLabel,
-  prefix = "",
-  suffix = "",
-  startNumber,
-  badgeText: rawBadgeText = "",
-  badgeEmoji = "\u{1F389}",
-  accent = TOKEN_DEFAULTS.primary,
-  hasMedia = false,
-  foreground = TOKEN_DEFAULTS.foreground,
-  surfaceElevated = TOKEN_DEFAULTS.surfaceElevated,
-  beatIntensity = 0,
-  confettiBgColor
-}) => {
-  const dim = Math.min(width, height);
-  const s = dim / 1080;
-  const label = stripPipe(rawLabel || "");
-  const badgeText = stripPipe(rawBadgeText || "");
-  const safeTarget = Number.isFinite(targetNumber) ? targetNumber : 0;
-  const safeStart = startNumber != null && Number.isFinite(startNumber) ? startNumber : Math.max(0, Math.round(safeTarget * 0.98));
-  const mainTextColor = hasMedia ? "#FFFFFF" : foreground;
-  const pillTextColor = accessibleTextColor(surfaceElevated, foreground);
-  const mediaTextShadow = hasMedia ? MEDIA_TEXT_SHADOW : void 0;
-  const followerCount = Math.round(
-    interpolate(progress, [0.056, 0.556], [safeStart, safeTarget], CLAMP)
-  );
-  const hasHitTarget = followerCount >= safeTarget;
-  const numberScale = spring(
-    interpolate(progress, [0, 0.25], [0, 1], CLAMP),
-    SPRING_SMOOTH
-  );
-  const glowIntensity = interpolate(progress, [0.33, 0.556], [0, 1], CLAMP);
-  const labelOpacity = interpolate(progress, [0, 0.167], [0, 1], CLAMP);
-  const badgeP = hasHitTarget ? spring(
-    interpolate(progress, [0.556, 0.85], [0, 1], CLAMP),
-    SPRING_BOUNCY
-  ) : 0;
-  const badgeScale = interpolate(badgeP, [0, 0.5, 1], [0, 1.2, 1], CLAMP);
-  const badgeOpacity = badgeP;
-  const confettiActive = hasHitTarget;
-  const confettiProgress = confettiActive ? Math.max(0, (progress - 0.556) / 0.444) : 0;
-  const beatScale = 1 + beatIntensity * 0.02;
-  const numberDisplay = `${prefix}${followerCount.toLocaleString()}${suffix}`;
-  const fontSize = numberDisplay.length > 9 ? dim * 0.09 : numberDisplay.length > 6 ? dim * 0.12 : dim * 0.16;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      children: [
-        confettiActive && /* @__PURE__ */ jsx(
-          ConfettiLayer,
-          {
-            progress: confettiProgress,
-            width,
-            height,
-            beatIntensity,
-            bgColor: hasMedia ? void 0 : confettiBgColor || accent
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: dim * 0.015,
-              transform: `scale(${numberScale * beatScale})`,
-              position: "relative",
-              zIndex: 1,
-              width: "100%"
-            },
-            children: [
-              label && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    color: mainTextColor,
-                    fontSize: dim * 0.032,
-                    fontWeight: 500,
-                    textTransform: "uppercase",
-                    letterSpacing: dim * 4e-3,
-                    opacity: labelOpacity,
-                    textAlign: "center",
-                    ...mediaTextShadow ? { textShadow: mediaTextShadow } : {}
-                  },
-                  children: label
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    color: mainTextColor,
-                    fontSize,
-                    fontWeight: 800,
-                    letterSpacing: dim * -4e-3,
-                    lineHeight: 1,
-                    position: "relative",
-                    maxWidth: "90%",
-                    textAlign: "center",
-                    ...mediaTextShadow ? { textShadow: mediaTextShadow } : {}
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          top: "50%",
-                          left: "50%",
-                          transform: "translate(-50%, -50%)",
-                          width: dim * 0.5,
-                          height: dim * 0.2,
-                          borderRadius: "50%",
-                          background: `radial-gradient(ellipse, ${withOpacity(accent, glowIntensity * 0.2)} 0%, ${withOpacity(accent, glowIntensity * 0.05)} 50%, transparent 70%)`,
-                          pointerEvents: "none"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { style: { position: "relative" }, children: numberDisplay })
-                  ]
-                }
-              ),
-              badgeText && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: "100%",
-                    left: "50%",
-                    transform: `translateX(-50%) scale(${badgeScale})`,
-                    opacity: badgeOpacity,
-                    backgroundColor: surfaceElevated,
-                    border: "1px solid rgba(255,255,255,0.15)",
-                    borderRadius: 100 * s,
-                    padding: `${dim * 0.015}px ${dim * 0.037}px`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: dim * 0.011,
-                    whiteSpace: "nowrap",
-                    marginTop: dim * 0.02
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(Emoji, { char: badgeEmoji, size: dim * 0.045, verticalAlign: "middle" }),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          color: pillTextColor,
-                          fontSize: dim * 0.036,
-                          fontWeight: 700,
-                          letterSpacing: dim * 5e-4
-                        },
-                        children: renderWithEmoji(badgeText, dim * 0.036)
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/visual-system/scene-templates/social-milestone.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var SocialMilestoneTemplate = ({
-  variables,
-  style,
-  progress,
-  beatIntensity,
-  width,
-  height,
-  sceneDuration,
-  isPlaying = true,
-  backgroundEffect
-}) => {
-  const { primary, secondary, foreground, surfaceElevated, font } = resolveTokens(style);
-  const label = stripPipe(String(variables.label || "Followers"));
-  const gradSeed = label.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
-  const targetNumber = Number(variables.targetNumber) || 1e4;
-  const rawStart = variables.startNumber != null ? Number(variables.startNumber) : void 0;
-  const badgeText = stripPipe(String(variables.badgeText || ""));
-  const badgeEmoji = String(variables.badgeEmoji || "\u{1F389}");
-  const hasMedia = !!String(variables.mediaUrl || "").trim() && String(variables.mediaType || "auto") !== "gradient";
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: font,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            backgroundEffect,
-            seed: gradSeed,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          MilestoneBadge,
-          {
-            progress,
-            width,
-            height,
-            targetNumber,
-            label,
-            startNumber: rawStart,
-            badgeText,
-            badgeEmoji,
-            accent: primary,
-            hasMedia,
-            foreground,
-            surfaceElevated,
-            beatIntensity,
-            confettiBgColor: secondary
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  SocialMilestoneTemplate
-};

package/dist/social-notification-FJ5VHVLK.js

@@ -1,247 +0,0 @@
-import {
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  Emoji,
-  renderWithEmoji
-} from "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import {
-  SPRING_SMOOTH,
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/social/NotificationCard.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
-var NotificationCard = ({
-  progress,
-  motionProgress = progress,
-  appName: rawAppName,
-  appIcon: rawAppIcon,
-  message: rawMessage,
-  width,
-  height,
-  beatIntensity = 0
-}) => {
-  const dim = Math.min(width, height);
-  const appName = stripPipe(rawAppName);
-  const appIcon = (rawAppIcon || "\u{1F514}").trim() || "\u{1F514}";
-  const message = rawMessage;
-  const presentationProgress = Math.max(progress, motionProgress);
-  const cardSpring = spring(interpolate(presentationProgress, [0.05, 0.2], [0, 1], CLAMP), SPRING_SMOOTH);
-  const cardOpacity = interpolate(presentationProgress, [0.05, 0.15], [0, 1], CLAMP);
-  const cardScale = interpolate(cardSpring, [0, 1], [0.95, 1]);
-  const cardLift = (1 - cardSpring) * 12;
-  const headerOpacity = interpolate(presentationProgress, [0.18, 0.3], [0, 1], CLAMP);
-  const words = message.split(/\s+/).filter(Boolean);
-  const wordStart = 0.3;
-  const wordEnd = 0.7;
-  const wordSlice = (wordEnd - wordStart) / Math.max(words.length, 1);
-  const cardW = Math.min(width * 0.88, dim * 0.9);
-  const cardPad = dim * 0.038;
-  const cardRadius = dim * 0.025;
-  const iconSize = dim * 0.045;
-  const iconRadius = iconSize * 0.28;
-  const iconFont = iconSize * 0.66;
-  const appFontSize = dim * 0.03;
-  const timeFontSize = dim * 0.026;
-  const msgFontSize = dim * 0.04;
-  const beatGlow = 1 + beatIntensity * 0.3;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-notification-card": "true",
-      style: {
-        position: "absolute",
-        top: "50%",
-        left: (width - cardW) / 2,
-        width: cardW,
-        transform: `translateY(calc(-50% + ${cardLift}px))`,
-        opacity: cardOpacity
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            backgroundColor: "rgba(245,242,238,0.92)",
-            borderRadius: cardRadius,
-            padding: cardPad,
-            boxShadow: `0 ${dim * 0.012}px ${dim * 0.05 * beatGlow}px rgba(0,0,0,0.18)`,
-            transform: `scale(${cardScale})`,
-            transformOrigin: "center top",
-            display: "flex",
-            flexDirection: "column",
-            gap: dim * 0.018
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                "data-notification-header": "true",
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: dim * 0.014,
-                  opacity: headerOpacity
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        width: iconSize,
-                        height: iconSize,
-                        borderRadius: iconRadius,
-                        backgroundColor: "rgba(0,0,0,0.06)",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        lineHeight: 1,
-                        fontSize: iconFont
-                      },
-                      children: /* @__PURE__ */ jsx(Emoji, { char: appIcon, size: iconFont, verticalAlign: "middle" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        fontSize: appFontSize,
-                        fontWeight: 600,
-                        color: "rgba(0,0,0,0.65)",
-                        letterSpacing: 0.2
-                      },
-                      children: appName
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        fontSize: timeFontSize,
-                        color: "rgba(0,0,0,0.4)",
-                        marginLeft: "auto"
-                      },
-                      children: "now"
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  fontSize: msgFontSize,
-                  fontWeight: 400,
-                  color: "#1c1c1e",
-                  lineHeight: 1.28,
-                  display: "flex",
-                  flexWrap: "wrap",
-                  gap: `0 ${dim * 9e-3}px`
-                },
-                children: words.map((word, wi) => {
-                  const wordP = interpolate(
-                    presentationProgress,
-                    [wordStart + wi * wordSlice, wordStart + wi * wordSlice + wordSlice * 0.6],
-                    [0, 1],
-                    CLAMP
-                  );
-                  return /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        opacity: wordP,
-                        transform: `translateY(${(1 - wordP) * 4}px)`,
-                        display: "inline-block"
-                      },
-                      children: renderWithEmoji(word, msgFontSize)
-                    },
-                    wi
-                  );
-                })
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-
-// src/visual-system/scene-templates/social-notification.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var SocialNotificationTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  sceneDuration,
-  isPlaying = true,
-  backgroundEffect
-}) => {
-  const { font } = resolveTokens(style);
-  const message = String(variables.message || "");
-  const gradSeed = message.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
-  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: gradSeed,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          NotificationCard,
-          {
-            progress,
-            motionProgress,
-            appName: String(variables.appName || "Reminder"),
-            appIcon: String(variables.appIcon || "\u{1F514}"),
-            message,
-            width,
-            height,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  SocialNotificationTemplate
-};