@vanillaskyai/video 0.8.8 → 0.10.0

package/dist/social-review-stack-KXQCKFRP.js

@@ -1,242 +0,0 @@
-import {
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import "./chunk-FRN6WKHA.js";
-import {
-  accessibleTextColor,
-  withOpacity
-} from "./chunk-W3VDIBGR.js";
-import {
-  SPRING_SNAPPY,
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  lighten,
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/social/ReviewStack.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var CLAMP = {
-  extrapolateLeft: "clamp",
-  extrapolateRight: "clamp"
-};
-var ROTATIONS = [-1.4, 0.8, -0.7, 1.1, -0.9];
-var ReviewStack = ({
-  progress,
-  width,
-  height,
-  reviews,
-  starColor = "#facc15",
-  surfaceElevated,
-  foreground,
-  muted,
-  beatIntensity = 0
-}) => {
-  const dim = Math.min(width, height);
-  const s = dim / 1080;
-  const cardBg = surfaceElevated || lighten("#0a0a0f", 0.08);
-  const borderColor = lighten("#0a0a0f", 0.15);
-  const textPrimary = accessibleTextColor(cardBg, foreground);
-  const textSecondary = accessibleTextColor(cardBg, muted);
-  const isPortrait = height > width;
-  const cardWidth = Math.min(
-    width * (isPortrait ? 0.82 : 0.64),
-    dim * (isPortrait ? 0.78 : 0.9)
-  );
-  const cardPad = dim * 0.028;
-  const rowGap = Math.min(
-    dim * 0.28,
-    height * 0.55 / Math.max(reviews.length - 1, 1)
-  );
-  const beatScale = 1 + beatIntensity * 0.01;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: reviews.map((review, i) => {
-        const cardStart = 0.02 + i * 0.1;
-        const cardEnd = cardStart + 0.16;
-        const cardP = spring(
-          interpolate(progress, [cardStart, cardEnd], [0, 1], CLAMP),
-          SPRING_SNAPPY
-        );
-        const cardScale = interpolate(cardP, [0, 1], [0.9, 1]);
-        const cardOpacity = Math.min(1, cardP);
-        const cardX = interpolate(cardP, [0, 1], [(i % 2 === 0 ? -1 : 1) * 54 * s, 0]);
-        const rotation = ROTATIONS[i % ROTATIONS.length];
-        const rowOffset = (i - (reviews.length - 1) / 2) * rowGap;
-        const stars = review.stars == null ? 5 : Math.max(0, Math.min(5, Math.round(review.stars)));
-        const title = stripPipe(review.title || review.quote || "");
-        const body = stripPipe(review.body || "");
-        const author = stripPipe(review.author || "");
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-review-card": i,
-            style: {
-              position: "absolute",
-              width: cardWidth,
-              padding: cardPad,
-              backgroundColor: cardBg,
-              borderRadius: dim * 0.018,
-              border: `1px solid ${borderColor}`,
-              boxShadow: `0 ${dim * 0.01}px ${dim * 0.04}px rgba(0,0,0,0.4)`,
-              transform: `translateX(${cardX}px) translateY(${rowOffset}px) rotate(${rotation}deg) scale(${cardScale * beatScale})`,
-              opacity: cardOpacity,
-              zIndex: i,
-              top: "50%",
-              left: "50%",
-              marginLeft: -(cardWidth / 2),
-              marginTop: -(dim * 0.11)
-            },
-            children: [
-              /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 3 * s, marginBottom: dim * 0.011 }, children: Array.from({ length: 5 }).map((_, si) => /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    color: si < stars ? starColor : withOpacity(textPrimary, 0.15),
-                    fontSize: dim * 0.03,
-                    lineHeight: 1
-                  },
-                  children: "\u2605"
-                },
-                si
-              )) }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: dim * 0.034,
-                    fontWeight: 700,
-                    color: textPrimary,
-                    marginBottom: dim * 9e-3,
-                    lineHeight: 1.3
-                  },
-                  children: title
-                }
-              ),
-              body && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: dim * 0.026,
-                    color: textSecondary,
-                    lineHeight: 1.5,
-                    marginBottom: dim * 0.014
-                  },
-                  children: body
-                }
-              ),
-              author && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: dim * 0.024,
-                    color: textSecondary,
-                    fontWeight: 500
-                  },
-                  children: author
-                }
-              )
-            ]
-          },
-          i
-        );
-      })
-    }
-  );
-};
-
-// src/visual-system/scene-templates/social-review-stack.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function buildReviews(variables) {
-  const reviews = [];
-  for (let i = 1; i <= 3; i++) {
-    const title = String(variables[`review${i}Title`] || "");
-    if (!title) continue;
-    reviews.push({
-      title,
-      body: String(variables[`review${i}Body`] || ""),
-      author: String(variables[`review${i}Author`] || "")
-    });
-  }
-  return reviews;
-}
-var SocialReviewStackTemplate = ({
-  variables,
-  style,
-  progress,
-  beatIntensity,
-  width,
-  height,
-  sceneDuration,
-  isPlaying = true
-}) => {
-  const { font, foreground, surfaceElevated, muted } = resolveTokens(style);
-  const starColor = "#facc15";
-  const reviews = buildReviews(variables);
-  const gradSeed = String(variables.review1Title || "review").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,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            seed: gradSeed,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          ReviewStack,
-          {
-            progress,
-            width,
-            height,
-            reviews,
-            starColor,
-            surfaceElevated,
-            foreground,
-            muted,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  SocialReviewStackTemplate
-};

package/dist/social-testimonial-JZ7CHC7S.js

@@ -1,287 +0,0 @@
-import {
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import "./chunk-FRN6WKHA.js";
-import {
-  accessibleTextColor,
-  autoTextColor,
-  withOpacity
-} from "./chunk-W3VDIBGR.js";
-import {
-  SPRING_SMOOTH,
-  SPRING_SNAPPY,
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  TOKEN_DEFAULTS,
-  lighten,
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/social/TestimonialCard.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
-var TestimonialCard = ({
-  progress,
-  quote: rawQuote,
-  authorName: rawAuthorName,
-  authorRole: rawAuthorRole = "",
-  avatarColor = "#ec4899",
-  accent = TOKEN_DEFAULTS.primary,
-  surfaceElevated,
-  foreground,
-  muted,
-  width,
-  height,
-  beatIntensity = 0
-}) => {
-  const dim = Math.min(width, height);
-  const s = dim / 1080;
-  const quote = stripPipe(rawQuote || "");
-  const authorName = stripPipe(rawAuthorName || "");
-  const authorRole = stripPipe(rawAuthorRole || "");
-  const initialChar = authorName.charAt(0).toUpperCase();
-  const cardBg = surfaceElevated || lighten("#0a0a0f", 0.08);
-  const borderColor = lighten("#0a0a0f", 0.15);
-  const textPrimary = accessibleTextColor(cardBg, foreground);
-  const textSecondary = accessibleTextColor(cardBg, muted);
-  const quoteMarkP = spring(interpolate(progress, [0.02, 0.2], [0, 1], CLAMP), SPRING_SNAPPY);
-  const quoteMarkScale = interpolate(quoteMarkP, [0, 1], [0.3, 1]);
-  const quoteMarkOpacity = quoteMarkP;
-  const lineWidth = interpolate(progress, [0.35, 0.55], [0, 100], CLAMP);
-  const authorP = spring(interpolate(progress, [0.45, 0.7], [0, 1], CLAMP), SPRING_SMOOTH);
-  const authorY = interpolate(authorP, [0, 1], [20 * s, 0]);
-  const authorOpacity = authorP;
-  const cardWidth = Math.min(width * 0.75, dim * 0.85);
-  const cardPad = dim * 0.045;
-  const avatarSize = dim * 0.055;
-  const cardP = spring(interpolate(progress, [0, 0.15], [0, 1], CLAMP), SPRING_SMOOTH);
-  const cardScale = interpolate(cardP, [0, 1], [0.92, 1]);
-  const cardOpacity = interpolate(cardP, [0, 1], [0, 1]);
-  const beatScale = 1 + beatIntensity * 0.01;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            width: cardWidth,
-            padding: cardPad,
-            backgroundColor: cardBg,
-            borderRadius: dim * 0.02,
-            border: `1px solid ${borderColor}`,
-            boxShadow: `0 ${dim * 0.01}px ${dim * 0.04}px rgba(0,0,0,0.4)`,
-            position: "relative",
-            zIndex: 1,
-            transform: `scale(${cardScale * beatScale})`,
-            opacity: cardOpacity
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  fontSize: dim * 0.08,
-                  lineHeight: 0.8,
-                  color: accent,
-                  fontWeight: 700,
-                  marginBottom: dim * 0.018,
-                  transform: `scale(${quoteMarkScale})`,
-                  opacity: quoteMarkOpacity,
-                  transformOrigin: "left top"
-                },
-                children: "\u201C"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  fontSize: dim * 0.038,
-                  lineHeight: 1.6,
-                  color: textPrimary,
-                  fontWeight: 500,
-                  marginBottom: dim * 0.032,
-                  display: "flex",
-                  flexWrap: "wrap",
-                  gap: `0 ${dim * 7e-3}px`
-                },
-                children: quote.split(/\s+/).filter(Boolean).map((word, i, arr) => {
-                  const wStart = 0.2 + i * (0.3 / Math.max(arr.length, 1));
-                  const wEnd = Math.min(wStart + 0.08, 0.55);
-                  const wordOpacity = interpolate(progress, [wStart, wEnd], [0, 1], CLAMP);
-                  const wordY = interpolate(progress, [wStart, wEnd], [8 * s, 0], CLAMP);
-                  return /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        opacity: wordOpacity,
-                        transform: `translateY(${wordY}px)`,
-                        display: "inline-block"
-                      },
-                      children: word
-                    },
-                    i
-                  );
-                })
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", marginBottom: dim * 0.028 }, children: /* @__PURE__ */ jsx("div", { style: { height: 1, width: `${lineWidth}%`, backgroundColor: borderColor } }) }),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: dim * 0.016,
-                  opacity: authorOpacity,
-                  transform: `translateY(${authorY}px)`
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        width: avatarSize,
-                        height: avatarSize,
-                        borderRadius: "50%",
-                        backgroundColor: avatarColor,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        fontSize: avatarSize * 0.45,
-                        fontWeight: 700,
-                        color: autoTextColor(avatarColor),
-                        flexShrink: 0
-                      },
-                      children: initialChar
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          fontSize: dim * 0.032,
-                          fontWeight: 600,
-                          color: textPrimary,
-                          marginBottom: dim * 3e-3
-                        },
-                        children: authorName
-                      }
-                    ),
-                    authorRole && /* @__PURE__ */ jsx("div", { style: { fontSize: dim * 0.024, color: textSecondary }, children: authorRole })
-                  ] })
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-
-// src/visual-system/scene-templates/social-testimonial.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var SocialTestimonialTemplate = ({
-  variables,
-  style,
-  progress,
-  beatIntensity,
-  width,
-  height,
-  sceneDuration,
-  isPlaying = true
-}) => {
-  const dim = Math.min(width, height);
-  const { primary, foreground, font, surfaceElevated, muted } = resolveTokens(style);
-  const quote = stripPipe(String(variables.quote || ""));
-  const gradSeed = quote.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
-  const authorName = String(variables.authorName || "Jessica Torres");
-  const authorRole = String(variables.authorRole || "");
-  const avatarBg = primary;
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: font,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            seed: gradSeed,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              width: dim * 0.9,
-              height: dim * 0.7,
-              borderRadius: "50%",
-              background: `radial-gradient(ellipse, ${withOpacity(primary, 0.15)} 0%, ${withOpacity(primary, 0.05)} 40%, transparent 70%)`,
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              pointerEvents: "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          TestimonialCard,
-          {
-            progress,
-            quote,
-            authorName,
-            authorRole,
-            avatarColor: avatarBg,
-            accent: primary,
-            surfaceElevated,
-            foreground,
-            muted,
-            width,
-            height,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  SocialTestimonialTemplate
-};