@vanillaskyai/video 0.8.7 → 0.9.0

package/dist/{chunk-2USVB3CY.js → chunk-3ZTEFJIR.js}

@@ -1,23 +1,130 @@
 import {
   limitsConcurrentVideoDecoders,
   resolveMediaType
-} from "./chunk-224QNWRA.js";
-import {
-  ExternalVideoBackdropProvider
-} from "./chunk-5CDAM24P.js";
+} from "./chunk-UDIODEDK.js";
 import {
+  ExternalVideoBackdropProvider,
   resolveDensity
-} from "./chunk-XWWLKRNU.js";
+} from "./chunk-TVIU23OM.js";
 import {
   resolveVideoTimeline
 } from "./chunk-SPVTJH3F.js";
 import {
   supportsExternalVideoBackdrop
-} from "./chunk-WJ6FLKNC.js";
+} from "./chunk-R3XAOMKP.js";
 import {
   getTemplateDefaults
 } from "./chunk-73NTSFFI.js";
 
+// src/player/mounted-scene-readiness.tsx
+import { createContext, useContext, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var MountedReadinessContext = createContext(void 0);
+var sceneReadinessKey = (scene) => `${scene.id}\0${String(scene.variables.mediaUrl || "")}`;
+function MountedSceneReadiness({ scene, playing, fallback = false }) {
+  const marker = useRef(null);
+  const report = useContext(MountedReadinessContext);
+  const key = sceneReadinessKey(scene);
+  useEffect(() => {
+    if (!report || !playing) return;
+    let stopped = false;
+    let frame = 0;
+    let callback;
+    let observed;
+    const start = performance.now();
+    const finish = (error, actualVideoFrame = false) => {
+      if (!stopped) {
+        stopped = true;
+        report(key, error, actualVideoFrame);
+      }
+    };
+    const check = () => {
+      if (stopped) return;
+      const root = marker.current?.closest("[data-video-frame]");
+      if (fallback && root?.querySelector("[data-scene-fallback]")) {
+        finish();
+        return;
+      }
+      const layer = root?.querySelector('[data-scene-layer="active"]');
+      const loading = layer?.querySelector("[data-template-loading]");
+      const mediaUrl = String(scene.variables.mediaUrl || "");
+      const isVideo = scene.variables.mediaType === "video" || /\.(mp4|webm|mov)(?:[?#]|$)/i.test(mediaUrl);
+      if (root && layer && !loading && document.fonts?.status !== "loading") {
+        if (!mediaUrl || scene.variables.mediaType === "gradient") {
+          finish();
+          return;
+        }
+        if (isVideo) {
+          const persistent = root.querySelector("[data-persistent-video-scene-id]");
+          const video = (persistent?.getAttribute("data-persistent-video-scene-id") === scene.id ? persistent : layer)?.querySelector("video");
+          if (video && video.getAttribute("src") === mediaUrl && video.readyState >= 2) {
+            observed = video;
+            if (video.requestVideoFrameCallback) {
+              callback = video.requestVideoFrameCallback(() => finish(void 0, true));
+              return;
+            }
+            finish(void 0, true);
+            return;
+          }
+        } else {
+          const image = [...layer.querySelectorAll("img") ?? []].find((element) => element.getAttribute("src") === mediaUrl);
+          if (image?.complete && image.naturalWidth > 0) {
+            finish();
+            return;
+          }
+        }
+      }
+      if (performance.now() - start >= 8e3) {
+        finish(new Error("Scene media did not become ready"));
+        return;
+      }
+      frame = requestAnimationFrame(check);
+    };
+    check();
+    const timeout = setTimeout(() => finish(new Error("Scene media did not become ready")), 8e3);
+    return () => {
+      stopped = true;
+      clearTimeout(timeout);
+      cancelAnimationFrame(frame);
+      if (callback !== void 0) observed?.cancelVideoFrameCallback?.(callback);
+    };
+  }, [key, report, scene, playing, fallback]);
+  return /* @__PURE__ */ jsx("span", { ref: marker, hidden: true });
+}
+function PreparedSceneReadiness({ scene }) {
+  const marker = useRef(null);
+  const report = useContext(MountedReadinessContext);
+  useEffect(() => {
+    if (!report) return;
+    let frame = 0;
+    let stopped = false;
+    const check = () => {
+      if (stopped) return;
+      const root = marker.current?.closest("[data-video-frame]");
+      const incoming = root?.querySelector("[data-scene-layer='incoming']");
+      const video = incoming?.getAttribute("data-layer-scene-id") === scene.id ? incoming.querySelector("video") : void 0;
+      if (video && video.getAttribute("src") === scene.variables.mediaUrl && video.readyState >= 2) {
+        report(sceneReadinessKey(scene), void 0, false, true);
+        return;
+      }
+      const image = [...root?.querySelectorAll("img[data-video-poster-plane='prepared']") ?? []].find((image2) => image2.getAttribute("src") === scene.variables.mediaPoster);
+      if (image?.complete && image.naturalWidth > 0) {
+        void image.decode().then(() => {
+          if (!stopped && image.isConnected) report(sceneReadinessKey(scene), void 0, false, true);
+        }).catch(() => void 0);
+        return;
+      }
+      frame = requestAnimationFrame(check);
+    };
+    check();
+    return () => {
+      stopped = true;
+      cancelAnimationFrame(frame);
+    };
+  }, [scene, report]);
+  return /* @__PURE__ */ jsx("span", { ref: marker, hidden: true });
+}
+
 // src/player/video-frame.tsx
 import {
   createElement,
@@ -25,7 +132,7 @@ import {
   lazy,
   Suspense,
   useState,
-  useEffect,
+  useEffect as useEffect2,
   useSyncExternalStore
 } from "react";
 
@@ -47,9 +154,9 @@ function scaleSafeZone(zone, factor) {
 }
 
 // src/player/video-frame.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function PresentedScene({ notify }) {
-  useEffect(() => {
+  useEffect2(() => {
     if (!notify) return;
     const frame = requestAnimationFrame(() => {
       try {
@@ -80,9 +187,10 @@ function SafeScene({ scene, onFramePresented }) {
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx(PresentedScene, { notify: onFramePresented }),
-        /* @__PURE__ */ jsx("p", { children: copy.slice(0, 600) || "Your response continues." }),
-        /* @__PURE__ */ jsx("small", { style: { fontSize: "0.3em" }, role: "status", children: "This scene uses a simpler layout." })
+        /* @__PURE__ */ jsx2(MountedSceneReadiness, { scene, playing: true, fallback: true }),
+        /* @__PURE__ */ jsx2(PresentedScene, { notify: onFramePresented }),
+        /* @__PURE__ */ jsx2("p", { children: copy.slice(0, 600) || "Your response continues." }),
+        /* @__PURE__ */ jsx2("small", { style: { fontSize: "0.3em" }, role: "status", children: "This scene uses a simpler layout." })
       ]
     }
   );
@@ -93,11 +201,11 @@ var SceneBoundary = class extends Component {
     return { failed: true };
   }
   render() {
-    return this.state.failed ? /* @__PURE__ */ jsx(SafeScene, { scene: this.props.scene, onFramePresented: this.props.onFramePresented }) : this.props.children;
+    return this.state.failed ? /* @__PURE__ */ jsx2(SafeScene, { scene: this.props.scene, onFramePresented: this.props.onFramePresented }) : this.props.children;
   }
 };
 var SCENE_TRANSITION_SECONDS = 0.3;
-var SceneVideoBackdrop = lazy(() => import("./scene-video-backdrop-XFPX4O3I.js").then((module) => ({ default: module.SceneVideoBackdrop })));
+var SceneVideoBackdrop = lazy(() => import("./scene-video-backdrop-PCTARAAJ.js").then((module) => ({ default: module.SceneVideoBackdrop })));
 var MEDIA_PREROLL_SECONDS = 1.2;
 var CONTIGUITY_ULP_FACTOR = 4;
 var subscribeToDecoderPolicy = () => () => {
@@ -120,14 +228,6 @@ function rangesAreContiguous(left, right) {
   const ulpTolerance = Number.EPSILON * scale * CONTIGUITY_ULP_FACTOR;
   return Math.abs(left.end - right.start) <= ulpTolerance;
 }
-function brandBackground(config) {
-  const background = config.style.brand.background;
-  return background.type === "solid" ? background.color : `linear-gradient(135deg, ${background.colors[0]}, ${background.colors[1]})`;
-}
-function brandBackgroundFallback(config) {
-  const background = config.style.brand.background;
-  return background.type === "solid" ? background.color : background.colors[0];
-}
 function sceneHasBackdrop(range) {
   return String(range.scene.variables.mediaType || "auto") !== "gradient" && String(range.scene.variables.mediaUrl || "").trim() !== "";
 }
@@ -171,13 +271,13 @@ function SceneLayer({
 }) {
   const template = kit.getTemplate(range.scene.templateId);
   const duration = range.end - range.start;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     ExternalVideoBackdropProvider,
     {
       mode: externalVideoBackdrop,
       audioMuted: mediaAudioMuted || !playing,
       audioVolume: mediaAudioVolume,
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx2(
         "div",
         {
           "data-scene-layer": layer,
@@ -197,14 +297,14 @@ function SceneLayer({
             "--vanillasky-transition-semantic-visibility": layer === "incoming" ? "hidden" : "visible",
             "--vanillasky-template-surface": externalVideoBackdrop !== false ? "transparent" : void 0
           },
-          children: template ? /* @__PURE__ */ jsx(SceneBoundary, { scene: range.scene, onFramePresented, children: /* @__PURE__ */ jsxs(Suspense, { fallback: /* @__PURE__ */ jsx(
+          children: template ? /* @__PURE__ */ jsx2(SceneBoundary, { scene: range.scene, onFramePresented, children: /* @__PURE__ */ jsxs(Suspense, { fallback: /* @__PURE__ */ jsx2(
             "div",
             {
               "data-template-loading": range.scene.templateId,
               style: { position: "absolute", inset: 0 }
             }
           ), children: [
-            /* @__PURE__ */ jsx(PresentedScene, { notify: onFramePresented }),
+            /* @__PURE__ */ jsx2(PresentedScene, { notify: onFramePresented }),
             createElement(template.component, {
               variables: {
                 ...template.defaults ?? getTemplateDefaults(template.schema),
@@ -225,7 +325,7 @@ function SceneLayer({
               sceneDuration: duration,
               isPlaying: playing
             })
-          ] }) }, range.scene.id) : /* @__PURE__ */ jsx(SafeScene, { scene: range.scene, onFramePresented })
+          ] }) }, range.scene.id) : /* @__PURE__ */ jsx2(SafeScene, { scene: range.scene, onFramePresented })
         }
       )
     }
@@ -254,24 +354,24 @@ function VideoFrame({
   const activeIndex = foundIndex >= 0 ? foundIndex : afterEnd ? timeline.length - 1 : -1;
   const active = activeIndex >= 0 ? timeline[activeIndex] : void 0;
   if (!active) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       "div",
       {
         "data-video-frame": timeline.length === 0 ? "empty" : "gap",
         className,
-        style: { width, height, background: brandBackground(config), ...style }
+        style: { width, height, background: "#000", ...style }
       }
     );
   }
   if (!kit.getTemplate(active.scene.templateId)) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       "div",
       {
         "data-video-frame": "unsupported",
         "data-template-id": active.scene.templateId,
         className,
         style: { width, height, background: "#090712", color: "#fff", ...style },
-        children: /* @__PURE__ */ jsx(SafeScene, { scene: active.scene, onFramePresented })
+        children: /* @__PURE__ */ jsx2(SafeScene, { scene: active.scene, onFramePresented })
       }
     );
   }
@@ -311,6 +411,7 @@ function VideoFrame({
   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 preparedReadinessRange = posterPreparationRange ?? (contiguousNext && sceneHasVideoBackdrop(contiguousNext) ? contiguousNext : void 0);
   const preparedPoster = posterPreparationRange && String(
     posterPreparationRange.scene.variables.mediaPoster || ""
   ) ? {
@@ -338,7 +439,7 @@ function VideoFrame({
   const scale = Math.min(width / canvas.width, height / canvas.height);
   const canvasLeft = (width - canvas.width * scale) / 2;
   const canvasTop = (height - canvas.height * scale) / 2;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-video-frame": "ready",
@@ -350,163 +451,169 @@ function VideoFrame({
         height,
         position: "relative",
         overflow: "hidden",
-        background: brandBackground(config),
+        background: "#000",
         ...style
       },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-video-canvas": "true",
-          style: {
-            position: "absolute",
-            left: canvasLeft,
-            top: canvasTop,
-            width: canvas.width,
-            height: canvas.height,
-            transform: `scale(${scale})`,
-            transformOrigin: "top left"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                "data-player-background": "brand",
-                "aria-hidden": "true",
-                style: {
-                  position: "absolute",
-                  inset: 0,
-                  background: brandBackground(config),
-                  backgroundColor: brandBackgroundFallback(config),
-                  pointerEvents: "none"
-                }
-              }
-            ),
-            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,
-                    muted: mediaAudioMuted || persistentVideoRange.scene.id !== active.scene.id || !playing,
-                    volume: mediaAudioVolume,
-                    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,
+      children: [
+        /* @__PURE__ */ jsx2(MountedSceneReadiness, { scene: active.scene, playing }),
+        preparedReadinessRange && /* @__PURE__ */ jsx2(PreparedSceneReadiness, { scene: preparedReadinessRange.scene }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-video-canvas": "true",
+            style: {
+              position: "absolute",
+              left: canvasLeft,
+              top: canvasTop,
+              width: canvas.width,
+              height: canvas.height,
+              transform: `scale(${scale})`,
+              transformOrigin: "top left"
+            },
+            children: [
+              /* @__PURE__ */ jsx2(
+                "div",
                 {
-                  onFramePresented,
-                  kit,
-                  config,
-                  range: active,
-                  progress,
-                  motionProgress,
-                  width: canvas.width,
-                  height: canvas.height,
-                  playing,
-                  mediaAudioMuted,
-                  mediaAudioVolume,
-                  layer: previewingNext ? "outgoing" : "active",
-                  opacity: 1 - blendProgress,
-                  interactive: true,
-                  zIndex: 1,
-                  externalVideoBackdrop: persistentVideoRange?.scene.id === active.scene.id ? persistentVideoMode : false
-                },
-                active.scene.id
+                  "data-player-background": "black",
+                  "aria-hidden": "true",
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    background: "#000",
+                    backgroundColor: "#000",
+                    pointerEvents: "none"
+                  }
+                }
               ),
-              /* @__PURE__ */ jsx(
-                SceneLayer,
+              persistentVideoRange && !persistentVideoFailed && /* @__PURE__ */ jsx2(
+                "div",
                 {
-                  kit,
-                  config,
-                  range: contiguousNext,
-                  progress: 0,
-                  motionProgress: 0,
-                  width: canvas.width,
-                  height: canvas.height,
-                  playing: false,
-                  mediaAudioMuted,
-                  mediaAudioVolume,
-                  layer: "incoming",
-                  opacity: blendProgress,
-                  interactive: false,
-                  zIndex: 2,
-                  externalVideoBackdrop: persistentVideoRange?.scene.id === contiguousNext.scene.id ? persistentVideoMode : false
-                },
-                contiguousNext.scene.id
-              )
-            ] : [
-              /* @__PURE__ */ jsx(
-                SceneLayer,
-                {
-                  onFramePresented,
-                  kit,
-                  config,
-                  range: active,
-                  progress,
-                  motionProgress,
-                  width: canvas.width,
-                  height: canvas.height,
-                  playing,
-                  mediaAudioMuted,
-                  mediaAudioVolume,
-                  layer: "active",
-                  opacity: 1,
-                  interactive: true,
-                  zIndex: 1,
-                  externalVideoBackdrop: persistentVideoRange?.scene.id === active.scene.id ? persistentVideoMode : false
-                },
-                active.scene.id
-              )
+                  "data-persistent-video-scene-id": persistentVideoRange.scene.id,
+                  "aria-hidden": "true",
+                  style: { position: "absolute", inset: 0, zIndex: 0 },
+                  children: /* @__PURE__ */ jsx2(Suspense, { fallback: String(persistentVideoRange.scene.variables.mediaPoster || "") ? /* @__PURE__ */ jsx2(
+                    "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__ */ jsx2(
+                    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,
+                      muted: mediaAudioMuted || persistentVideoRange.scene.id !== active.scene.id || !playing,
+                      volume: mediaAudioVolume,
+                      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__ */ jsx2(
+                  SceneLayer,
+                  {
+                    onFramePresented,
+                    kit,
+                    config,
+                    range: active,
+                    progress,
+                    motionProgress,
+                    width: canvas.width,
+                    height: canvas.height,
+                    playing,
+                    mediaAudioMuted,
+                    mediaAudioVolume,
+                    layer: previewingNext ? "outgoing" : "active",
+                    opacity: 1 - blendProgress,
+                    interactive: true,
+                    zIndex: 1,
+                    externalVideoBackdrop: persistentVideoRange?.scene.id === active.scene.id ? persistentVideoMode : false
+                  },
+                  active.scene.id
+                ),
+                /* @__PURE__ */ jsx2(
+                  SceneLayer,
+                  {
+                    kit,
+                    config,
+                    range: contiguousNext,
+                    progress: 0,
+                    motionProgress: 0,
+                    width: canvas.width,
+                    height: canvas.height,
+                    playing: false,
+                    mediaAudioMuted,
+                    mediaAudioVolume,
+                    layer: "incoming",
+                    opacity: blendProgress,
+                    interactive: false,
+                    zIndex: 2,
+                    externalVideoBackdrop: persistentVideoRange?.scene.id === contiguousNext.scene.id ? persistentVideoMode : false
+                  },
+                  contiguousNext.scene.id
+                )
+              ] : [
+                /* @__PURE__ */ jsx2(
+                  SceneLayer,
+                  {
+                    onFramePresented,
+                    kit,
+                    config,
+                    range: active,
+                    progress,
+                    motionProgress,
+                    width: canvas.width,
+                    height: canvas.height,
+                    playing,
+                    mediaAudioMuted,
+                    mediaAudioVolume,
+                    layer: "active",
+                    opacity: 1,
+                    interactive: true,
+                    zIndex: 1,
+                    externalVideoBackdrop: persistentVideoRange?.scene.id === active.scene.id ? persistentVideoMode : false
+                  },
+                  active.scene.id
+                )
+              ]
             ]
-          ]
-        }
-      )
+          }
+        )
+      ]
     }
   );
 }
 
 export {
+  MountedReadinessContext,
+  sceneReadinessKey,
   getDimensions,
   VideoFrame
 };

package/dist/chunk-4YM2M62S.js

@@ -0,0 +1,13 @@
+// src/visual-system/scene-templates/editorial-typography.ts
+var editorialFont = '-apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif';
+var fade = (value) => {
+  const t = Math.max(0, Math.min(1, value));
+  return t * t * (3 - 2 * t);
+};
+var editorialLabel = (unit) => ({ fontSize: unit * 0.042, fontWeight: 400, color: "#b7b7bc", lineHeight: 1.25 });
+
+export {
+  editorialFont,
+  fade,
+  editorialLabel
+};