@vanillaskyai/video 0.5.6 → 0.5.7

package/dist/{chunk-3QEKIC6C.js → chunk-NGY3TNND.js}

@@ -1,3 +1,6 @@
+import {
+  ExternalVideoBackdropProvider
+} from "./chunk-C6WVCZRW.js";
 import {
   limitsConcurrentVideoDecoders,
   resolveMediaType
@@ -8,12 +11,21 @@ import {
 import {
   resolveVideoTimeline
 } from "./chunk-SPVTJH3F.js";
+import {
+  supportsExternalVideoBackdrop
+} from "./chunk-WJ6FLKNC.js";
 import {
   getTemplateDefaults
 } from "./chunk-73NTSFFI.js";
 
 // src/player/video-frame.tsx
-import { createElement, Suspense } from "react";
+import {
+  createElement,
+  lazy,
+  Suspense,
+  useState,
+  useSyncExternalStore
+} from "react";
 
 // src/visual-system/layout.ts
 function getDimensions(orientation = "portrait") {
@@ -35,8 +47,18 @@ function scaleSafeZone(zone, factor) {
 // src/player/video-frame.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var SCENE_TRANSITION_SECONDS = 0.3;
+var SceneVideoBackdrop = lazy(() => import("./scene-video-backdrop-IL4F2SVD.js").then((module) => ({ default: module.SceneVideoBackdrop })));
 var MEDIA_PREROLL_SECONDS = 1.2;
 var CONTIGUITY_ULP_FACTOR = 4;
+var subscribeToDecoderPolicy = () => () => {
+};
+function useDecoderConstraint() {
+  return useSyncExternalStore(
+    subscribeToDecoderPolicy,
+    limitsConcurrentVideoDecoders,
+    () => false
+  );
+}
 function clamp01(value) {
   return Math.max(0, Math.min(1, value));
 }
@@ -60,11 +82,21 @@ function sceneHasBackdrop(range) {
   return String(range.scene.variables.mediaType || "auto") !== "gradient" && String(range.scene.variables.mediaUrl || "").trim() !== "";
 }
 function sceneHasVideoBackdrop(range) {
-  return resolveMediaType(
+  const mediaUrl = String(range.scene.variables.mediaUrl || "").trim();
+  return mediaUrl !== "" && resolveMediaType(
     String(range.scene.variables.mediaType || "auto"),
-    String(range.scene.variables.mediaUrl || "")
+    mediaUrl
   ) === "video";
 }
+function registrySupportsExternalVideoBackdrop(kit) {
+  return kit.templates.every((template) => {
+    const properties = template.schema?.properties;
+    if (!properties?.mediaUrl) return true;
+    const mediaTypes = properties.mediaType?.enum;
+    const canRenderVideo = mediaTypes == null || mediaTypes.includes("video") || mediaTypes.includes("auto");
+    return !canRenderVideo || supportsExternalVideoBackdrop(template);
+  });
+}
 function sceneBackgroundChanges(left, right) {
   const mediaUrl = (range) => String(range.scene.variables.mediaType || "auto") === "gradient" ? "" : String(range.scene.variables.mediaUrl || "");
   return mediaUrl(left) !== mediaUrl(right);
@@ -81,11 +113,12 @@ function SceneLayer({
   layer,
   opacity,
   interactive,
-  zIndex
+  zIndex,
+  externalVideoBackdrop
 }) {
   const template = kit.getTemplate(range.scene.templateId);
   const duration = range.end - range.start;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ExternalVideoBackdropProvider, { mode: externalVideoBackdrop, children: /* @__PURE__ */ jsx(
     "div",
     {
       "data-scene-layer": layer,
@@ -102,7 +135,8 @@ function SceneLayer({
         // A changed-media transition can expose an incoming template's true
         // initial frame. Values that would be false placeholders at progress
         // zero opt into this inherited guard.
-        "--vanillasky-transition-semantic-visibility": layer === "incoming" ? "hidden" : "visible"
+        "--vanillasky-transition-semantic-visibility": layer === "incoming" ? "hidden" : "visible",
+        "--vanillasky-template-surface": externalVideoBackdrop !== false ? "transparent" : void 0
       },
       children: template ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(
         "div",
@@ -134,7 +168,7 @@ function SceneLayer({
         range.scene.templateId
       ] })
     }
-  );
+  ) });
 }
 function VideoFrame({
   kit,
@@ -146,6 +180,9 @@ function VideoFrame({
   className,
   style
 }) {
+  const [failedPersistentVideo, setFailedPersistentVideo] = useState();
+  const [readyPersistentVideo, setReadyPersistentVideo] = useState();
+  const decoderConstrainedDevice = useDecoderConstraint();
   const timeline = resolveVideoTimeline(config);
   const lastRange = timeline.at(-1);
   const foundIndex = timeline.findIndex((range) => time >= range.start && time < range.end);
@@ -202,8 +239,30 @@ function VideoFrame({
   const prerollDuration = prerollsNext ? Math.min(Math.max(MEDIA_PREROLL_SECONDS, blendDuration), Math.max(0, duration)) : blendDuration;
   const prerollStart = active.end - prerollDuration;
   const decoderConstrainedTransition = Boolean(
-    contiguousNext && limitsConcurrentVideoDecoders() && sceneHasVideoBackdrop(active) && sceneHasVideoBackdrop(contiguousNext)
+    contiguousNext && decoderConstrainedDevice && sceneHasVideoBackdrop(active) && sceneHasVideoBackdrop(contiguousNext)
+  );
+  const persistentVideoEnabled = decoderConstrainedDevice && registrySupportsExternalVideoBackdrop(kit);
+  const activeUsesPersistentVideo = persistentVideoEnabled && sceneHasVideoBackdrop(active);
+  const incomingUsesPersistentVideo = Boolean(
+    persistentVideoEnabled && contiguousNext && !sceneHasVideoBackdrop(active) && sceneHasVideoBackdrop(contiguousNext) && time >= prerollStart && time < blendEnd
   );
+  const persistentVideoRange = activeUsesPersistentVideo ? active : incomingUsesPersistentVideo && contiguousNext ? contiguousNext : void 0;
+  const persistentVideoKey = persistentVideoRange ? `${persistentVideoRange.scene.id}\0${String(persistentVideoRange.scene.variables.mediaUrl || "")}` : void 0;
+  const firstVideoRange = timeline.find(sceneHasVideoBackdrop);
+  const posterPreparationRange = activeUsesPersistentVideo ? contiguousNext && sceneHasVideoBackdrop(contiguousNext) ? contiguousNext : activeIndex === timeline.length - 1 && firstVideoRange?.scene.id !== active.scene.id ? firstVideoRange : void 0 : void 0;
+  const preparedPoster = posterPreparationRange && String(
+    posterPreparationRange.scene.variables.mediaPoster || ""
+  ) ? {
+    presentationKey: `${posterPreparationRange.scene.id}\0${String(
+      posterPreparationRange.scene.variables.mediaUrl || ""
+    )}`,
+    mediaPoster: String(posterPreparationRange.scene.variables.mediaPoster),
+    mediaPosition: String(posterPreparationRange.scene.variables.mediaPosition || "center"),
+    backgroundEffect: posterPreparationRange.scene.backgroundEffect ?? config.style.defaultBackgroundEffect
+  } : void 0;
+  const persistentVideoFailed = persistentVideoKey !== void 0 && failedPersistentVideo === persistentVideoKey;
+  const persistentVideoReady = persistentVideoRange !== void 0 && (String(persistentVideoRange.scene.variables.mediaPoster || "") !== "" || readyPersistentVideo === persistentVideoKey);
+  const persistentVideoMode = persistentVideoFailed ? "fallback" : persistentVideoReady ? "ready" : "pending";
   const mountingNext = Boolean(
     contiguousNext && !decoderConstrainedTransition && time >= prerollStart && time < blendEnd && (eligibleNextTransition || prerollsNext)
   );
@@ -261,6 +320,54 @@ function VideoFrame({
                 }
               }
             ),
+            persistentVideoRange && !persistentVideoFailed && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-persistent-video-scene-id": persistentVideoRange.scene.id,
+                "aria-hidden": "true",
+                style: { position: "absolute", inset: 0, zIndex: 0 },
+                children: /* @__PURE__ */ jsx(Suspense, { fallback: String(persistentVideoRange.scene.variables.mediaPoster || "") ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: String(persistentVideoRange.scene.variables.mediaPoster),
+                    alt: "",
+                    "data-video-poster-plane": "loading",
+                    "data-video-poster-visible": "true",
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "cover",
+                      objectPosition: String(persistentVideoRange.scene.variables.mediaPosition || "center")
+                    }
+                  }
+                ) : null, children: /* @__PURE__ */ jsx(
+                  SceneVideoBackdrop,
+                  {
+                    mediaUrl: String(persistentVideoRange.scene.variables.mediaUrl || ""),
+                    mediaPoster: String(persistentVideoRange.scene.variables.mediaPoster || "") || void 0,
+                    mediaPosition: String(persistentVideoRange.scene.variables.mediaPosition || "center"),
+                    backgroundEffect: persistentVideoRange.scene.backgroundEffect ?? config.style.defaultBackgroundEffect,
+                    progress: persistentVideoRange.scene.id === active.scene.id ? rawProgress : 0,
+                    isPlaying: persistentVideoRange.scene.id === active.scene.id && playing,
+                    playbackId: persistentVideoRange.scene.id,
+                    retainPoster: true,
+                    persistent: true,
+                    preparedPoster: preparedPoster ? {
+                      ...preparedPoster,
+                      // The image is already decoded and costs no second video
+                      // decoder. Fade it above the outgoing video using the same
+                      // authored transition clock, then reuse that exact DOM image
+                      // as the new source's underlay at the cut.
+                      opacity: decoderConstrainedTransition ? blendProgress : 0
+                    } : void 0,
+                    onReady: () => setReadyPersistentVideo(persistentVideoKey),
+                    onError: () => setFailedPersistentVideo(persistentVideoKey)
+                  }
+                ) })
+              }
+            ),
             mountingNext && contiguousNext ? [
               /* @__PURE__ */ jsx(
                 SceneLayer,
@@ -276,7 +383,8 @@ function VideoFrame({
                   layer: previewingNext ? "outgoing" : "active",
                   opacity: 1 - blendProgress,
                   interactive: true,
-                  zIndex: 1
+                  zIndex: 1,
+                  externalVideoBackdrop: persistentVideoRange?.scene.id === active.scene.id ? persistentVideoMode : false
                 },
                 active.scene.id
               ),
@@ -294,7 +402,8 @@ function VideoFrame({
                   layer: "incoming",
                   opacity: blendProgress,
                   interactive: false,
-                  zIndex: 2
+                  zIndex: 2,
+                  externalVideoBackdrop: persistentVideoRange?.scene.id === contiguousNext.scene.id ? persistentVideoMode : false
                 },
                 contiguousNext.scene.id
               )
@@ -313,7 +422,8 @@ function VideoFrame({
                   layer: "active",
                   opacity: 1,
                   interactive: true,
-                  zIndex: 1
+                  zIndex: 1,
+                  externalVideoBackdrop: persistentVideoRange?.scene.id === active.scene.id ? persistentVideoMode : false
                 },
                 active.scene.id
               )

package/dist/{chunk-MFYFZQHM.js → chunk-W3VDIBGR.js}

@@ -112,6 +112,7 @@ var BrandGradientOverlay = ({ style: globalStyle, progress, sceneDuration, seed
   const [first, second] = tokens.background.type === "gradient" ? tokens.background.colors : [tokens.background.color, tokens.background.color];
   const solidBg = tokens.background.type === "solid" ? tokens.background.color : void 0;
   return React.createElement("div", {
+    "data-brand-gradient": "true",
     style: {
       position: "absolute",
       inset: 0,

package/dist/chunk-WJ6FLKNC.js

@@ -0,0 +1,15 @@
+// src/visual-system/catalog/video-backdrop-capability.ts
+var EXTERNAL_VIDEO_BACKDROP_CAPABILITY = "__vanillaskyExternalVideoBackdrop";
+function supportsExternalVideoBackdrop(template) {
+  if (typeof template !== "object" || template === null) return false;
+  const component = template.component;
+  return (typeof component === "object" && component !== null || typeof component === "function") && component[EXTERNAL_VIDEO_BACKDROP_CAPABILITY] === true;
+}
+function externalVideoBackdropCapabilitySource() {
+  return JSON.stringify(EXTERNAL_VIDEO_BACKDROP_CAPABILITY);
+}
+
+export {
+  supportsExternalVideoBackdrop,
+  externalVideoBackdropCapabilitySource
+};

package/dist/cli.js

@@ -16,6 +16,9 @@ import {
 import {
   BUILTIN_TEMPLATE_MANIFEST
 } from "./chunk-HVCPEAQF.js";
+import {
+  externalVideoBackdropCapabilitySource
+} from "./chunk-WJ6FLKNC.js";
 import {
   getTemplateDefaults,
   isMeaningfullyPresentTemplateValue,
@@ -182,6 +185,9 @@ function templateSource(item2) {
   const component = templateFile.content.match(/export const (\w+Template)\b/)?.[1];
   if (!component) throw new Error(`Cannot identify the component exported by ${item2.name}`);
   const definition = templateDefinition(item2);
+  const properties = definition.schema.properties;
+  const mediaTypes = properties.mediaType?.enum;
+  const supportsExternalVideoBackdrop = !!properties.mediaUrl && (mediaTypes == null || mediaTypes.includes("video") || mediaTypes.includes("auto"));
   const definitionLines = JSON.stringify(definition, null, 2).split("\n").slice(1, -1);
   definitionLines[definitionLines.length - 1] += ",";
   let componentSource = templateFile.content.replace(/(from\s+["'])\.\//g, "$1../scene-templates/").replace(/(import\(\s*["'])\.\//g, "$1../scene-templates/").replace(
@@ -201,6 +207,9 @@ function templateSource(item2) {
     ...definitionLines,
     `  component: ${component},`,
     "});",
+    ...supportsExternalVideoBackdrop ? [
+      `Object.defineProperty(${component}, ${externalVideoBackdropCapabilitySource()}, { value: true });`
+    ] : [],
     ""
   ].join("\n");
 }

package/dist/{cta-logo-JIG22SWA.js → cta-logo-S4OMTNXD.js}

@@ -4,13 +4,15 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
-import "./chunk-MFYFZQHM.js";
+} from "./chunk-6M6DATLW.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import {
   SPRING_SMOOTH,
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import {
   TOKEN_DEFAULTS,
@@ -166,7 +168,7 @@ var CtaLogoTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{cta-media-GIHQTPPK.js → cta-media-EROTHDRR.js}

@@ -5,17 +5,19 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-MFYFZQHM.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import {
   SPRING_SMOOTH,
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
@@ -158,7 +160,7 @@ var CtaMediaTemplate = ({
   const { primary, foreground, font } = resolveTokens(style);
   const textColor = foreground;
   const headline = String(variables.headline || "");
-  return /* @__PURE__ */ jsxs2("div", { style: { width, height, backgroundColor: "#000", position: "relative", overflow: "hidden", fontFamily: font }, children: [
+  return /* @__PURE__ */ jsxs2("div", { style: { width, height, backgroundColor: "var(--vanillasky-template-surface, #000)", position: "relative", overflow: "hidden", fontFamily: font }, children: [
     /* @__PURE__ */ jsx2(
       SceneBackground,
       {

package/dist/{incoming-call-2O5NPJ7B.js → incoming-call-5IWJ2TAS.js}

@@ -5,14 +5,16 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
-import "./chunk-MFYFZQHM.js";
+} from "./chunk-6M6DATLW.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import {
   SPRING_BOUNCY,
   SPRING_SMOOTH,
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import {
   resolveTokens
@@ -274,7 +276,7 @@ var IncomingCallTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: "system-ui, -apple-system, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif"

package/dist/{infographic-before-after-FQXCQ2CY.js → infographic-before-after-2I7YZVDD.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk-L5BTTCZV.js";
 import {
   gradientBackground
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
 import {
   interpolate,
   spring
@@ -408,7 +408,7 @@ var InfographicBeforeAfterTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{infographic-feature-list-MVJ3GQVK.js → infographic-feature-list-7SK65U3K.js}

@@ -7,18 +7,20 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import {
   Emoji
 } from "./chunk-L5BTTCZV.js";
-import "./chunk-MFYFZQHM.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import {
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
@@ -215,7 +217,7 @@ var InfographicFeatureListTemplate = ({
   const labels = parseList(variables.items, 3);
   const emojis = parseList(variables.itemEmojis);
   const features = labels.map((title, index) => ({ title, icon: emojis[index] || "\u2726" }));
-  return /* @__PURE__ */ jsxs2("div", { style: { width, height, backgroundColor: "#000", position: "relative", overflow: "hidden", fontFamily: font }, children: [
+  return /* @__PURE__ */ jsxs2("div", { style: { width, height, backgroundColor: "var(--vanillasky-template-surface, #000)", position: "relative", overflow: "hidden", fontFamily: font }, children: [
     /* @__PURE__ */ jsx2(
       SceneBackground,
       {

package/dist/{infographic-problem-solution-ZUF54SNF.js → infographic-problem-solution-IW35S6BR.js}

@@ -4,16 +4,18 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   smoothSize
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
-import "./chunk-MFYFZQHM.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import {
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import {
   TOKEN_DEFAULTS,
@@ -296,7 +298,7 @@ var InfographicProblemSolutionTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{infographic-stat-row-4DLC5NSC.js → infographic-stat-row-XHUZZPDM.js}

@@ -1,19 +1,21 @@
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import "./chunk-L5BTTCZV.js";
+import "./chunk-HT6BGERF.js";
 import {
   TOP_TEXT_AREA_RATIO,
   withOpacity
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
 import {
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
@@ -184,7 +186,7 @@ var InfographicStatRowTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{infographic-steps-IT23RFV6.js → infographic-steps-JDDEDI7X.js}

@@ -8,22 +8,24 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
+} from "./chunk-6M6DATLW.js";
 import {
   TemplateText
 } from "./chunk-TCEHK2BW.js";
 import {
   Emoji
 } from "./chunk-L5BTTCZV.js";
+import "./chunk-HT6BGERF.js";
 import {
   TOP_TEXT_AREA_RATIO,
   autoTextColor,
   withOpacity
-} from "./chunk-MFYFZQHM.js";
+} from "./chunk-W3VDIBGR.js";
 import {
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import {
   hasSceneMedia
 } from "./chunk-224QNWRA.js";
@@ -339,7 +341,7 @@ var InfographicStepsTemplate = ({
       style: {
         width,
         height,
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         position: "relative",
         overflow: "hidden",
         fontFamily: font

package/dist/{preload-media-IYFMPMLB.js → preload-media-LJXWKTWG.js}

@@ -1,4 +1,5 @@
 import {
+  limitsConcurrentVideoDecoders,
   resolveMediaType
 } from "./chunk-224QNWRA.js";
 
@@ -45,6 +46,7 @@ function preloadSceneMedia(variables) {
   if (resolved === "gradient") return;
   if (resolved === "video") {
     warmImage(String(variables.mediaPoster || ""));
+    if (limitsConcurrentVideoDecoders()) return;
     warmVideo(mediaUrl);
     return;
   }

package/dist/{prompt-input-IL7HP5WX.js → prompt-input-6ZWXEL3V.js}

@@ -4,14 +4,16 @@ import {
 import {
   SceneBackground,
   getMediaBackgroundProps
-} from "./chunk-CTEYFVUY.js";
-import "./chunk-MFYFZQHM.js";
+} from "./chunk-6M6DATLW.js";
+import "./chunk-HT6BGERF.js";
+import "./chunk-W3VDIBGR.js";
 import {
   SPRING_BOUNCY,
   SPRING_SMOOTH,
   interpolate,
   spring
 } from "./chunk-XTOXFMLM.js";
+import "./chunk-C6WVCZRW.js";
 import "./chunk-224QNWRA.js";
 import {
   resolveTokens
@@ -197,7 +199,7 @@ var PromptInputTemplate = ({
         height,
         position: "relative",
         overflow: "hidden",
-        backgroundColor: "#000",
+        backgroundColor: "var(--vanillasky-template-surface, #000)",
         fontFamily: font
       },
       children: [