@navipartner/demo-video 0.7.0 → 0.7.2

package/dist/{chunk-D7UYGNSF.js → chunk-XMOGUZJU.js}

@@ -4,29 +4,44 @@ import path from "path";
 import { z } from "zod";
 
 // src/timing.ts
-var ZOOM_MS = 1200;
+var ZOOM_MS = 900;
 var CAMERA_EASE = "cubic-bezier(0.65, 0, 0.35, 1)";
-var CARD_IN_MS = 800;
-var CARD_OUT_MS = 900;
-var CURSOR_MIN_MS = 550;
-var CURSOR_MAX_MS = 1100;
-var CURSOR_MS_PER_PX = 0.9;
-var SETTLE_MS = 300;
-var PRE_CLICK_MS = 220;
+var CARD_IN_MS = 500;
+var CARD_OUT_MS = 600;
+var CURSOR_MIN_MS = 400;
+var CURSOR_MAX_MS = 800;
+var CURSOR_MS_PER_PX = 0.7;
+var SETTLE_MS = 150;
+var ESTABLISH_MS = 800;
+var SETTLED_MS = 250;
+var REACTION_MS = 1e3;
+var COVERED_SETTLED_MS = 150;
+var COVERED_MAX_MS = 600;
+var PRE_CLICK_MS = 160;
 var PRESS_MS = 110;
-var POST_CLICK_MS = 650;
-var POST_KEY_MS = 300;
-var POST_ACTION_MS = 650;
-var LINGER_MS = 1400;
+var POST_CLICK_MS = 450;
+var POST_KEY_MS = 250;
+var POST_ACTION_MS = 500;
+var TYPE_CHAR_MS = 45;
+var LINGER_MS = 900;
+var TITLE_MAX_SECONDS = {
+  showcase: 3.5,
+  feature: 2.5
+};
 var POLL_MS = 100;
 var wordCount = (text) => text ? text.replace(/\*/g, "").split(/\s+/).filter(Boolean).length : 0;
-var cardSeconds = (spec) => {
-  const read = 1 + 0.32 * (wordCount(spec.eyebrow) + wordCount(spec.heading) + wordCount(spec.sub));
-  return Math.max(spec.seconds, Math.round(read * 10) / 10);
+var cardSeconds = (spec, maxSeconds = Number.POSITIVE_INFINITY) => {
+  const read = 0.5 + 0.25 * wordCount(spec.heading) + 0.2 * wordCount(spec.sub) + 0.12 * wordCount(spec.eyebrow);
+  return Math.max(
+    spec.seconds,
+    Math.min(maxSeconds, Math.round(read * 10) / 10)
+  );
 };
+var titleSeconds = (spec, kind = "showcase") => cardSeconds(spec, TITLE_MAX_SECONDS[kind]);
 
 // src/stage.ts
 var STAGE_PATH = "/__demo/stage";
+var STILLS_PATH = "/__demo/stills";
 var STAGE_WIDTH = 1920;
 var STAGE_HEIGHT = 1080;
 var FRAME_WIDTH = 1728;
@@ -65,9 +80,15 @@ var stageScript = (layout, look) => String.raw`
   // Nothing here waits: time is virtual (frames.ts), so each call starts a
   // move and returns at once, and the director films its duration.
 
-  // A shot from camera.ts: the app's translation and total scale.
-  const setShot = (shot) => {
+  // A shot from camera.ts: the app's translation and total scale. Instant
+  // behind a card, so the chapter opens on it.
+  const setShot = (shot, instant) => {
+    if (instant) { camera.classList.add("instant"); }
     camera.style.transform = "translate(" + shot.tx + "px, " + shot.ty + "px) scale(" + shot.k + ")";
+    if (instant) {
+      void camera.offsetWidth;
+      camera.classList.remove("instant");
+    }
   };
 
   // Behind an opaque card: back to wide with no move, so every chapter opens
@@ -122,14 +143,30 @@ var stageScript = (layout, look) => String.raw`
   // (payoff into end card) without the app showing in between.
   let current = null;
 
+  // Card stills, loaded and decoded before filming starts, so a card never
+  // shows one half-drawn.
+  const stills = new Map();
+  const preload = (urls) =>
+    Promise.all(urls.map((url) => {
+      const img = new Image();
+      img.alt = "";
+      img.src = url;
+      stills.set(url, img);
+      return img.decode();
+    })).then(() => undefined);
+
   const buildCard = (spec) => {
     const el = document.createElement("div");
-    el.className = "card " + (spec.style === "brand" ? "brand" : "pale");
+    el.className = "card " + (spec.style === "brand" ? "brand" : "pale") + (spec.still ? " split" : "");
+    // The words, in one column; beside them, a still of the result.
+    const text = document.createElement("div");
+    text.className = "text";
+    el.appendChild(text);
     const add = (tag, cls, html) => {
       const child = document.createElement(tag);
-      child.className = cls;
+      child.className = "part " + cls;
       child.innerHTML = html;
-      el.appendChild(child);
+      text.appendChild(child);
       return child;
     };
     if (spec.eyebrow) { add("p", "eyebrow", escapeHtml(spec.eyebrow)); }
@@ -142,6 +179,15 @@ var stageScript = (layout, look) => String.raw`
     }
     if (spec.heading) { add("h1", "heading", emphasise(spec.heading)); }
     if (spec.sub) { add("p", "sub", escapeHtml(spec.sub)); }
+    if (spec.still) {
+      const img = stills.get(spec.still) || new Image();
+      img.src = spec.still;
+      img.className = "part still";
+      // A tall still (a pass, a kiosk screen) and a wide one (a dialog, a
+      // receipt row) are bounded differently.
+      img.classList.add(img.naturalHeight > img.naturalWidth ? "tall" : "broad");
+      el.appendChild(img);
+    }
     return el;
   };
 
@@ -181,7 +227,7 @@ var stageScript = (layout, look) => String.raw`
     setTimeout(() => el.remove(), CARD_OUT_MS);
   };
 
-  window.__demo = { setShot, resetCamera, cursorTo, parkNow, showCard, hideCard };
+  window.__demo = { setShot, resetCamera, cursorTo, parkNow, showCard, hideCard, preload };
   cursor.style.transform = "translate(" + cursorX + "px, " + cursorY + "px)";
 })();
 `;
@@ -238,34 +284,41 @@ var stageHtml = (background, appUrl, look, options = {}) => {
      through them; the dissolve is the card fading while the app blurs. */
   .card {
     position: absolute; inset: 0; z-index: 40; isolation: isolate;
-    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
-    padding: 0 240px; text-align: center;
+    display: flex; align-items: center; justify-content: center; gap: 104px;
+    padding: 0 200px; text-align: center;
     opacity: 0; transition: opacity ${CARD_OUT_MS}ms ease;
     pointer-events: none;
   }
+  /* Words stay inside the central 1080\xD71080, so a square crop keeps them. */
+  .card .text { display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 1080px; }
+  /* Text and UI on one card: the words on the left, the result beside them. */
+  .card.split { padding: 0 150px; text-align: left; }
+  .card.split .text { align-items: flex-start; flex: 0 1 820px; }
   .card.show { opacity: 1; transition: opacity ${CARD_IN_MS}ms ease; }
   .card.pale { background: ${background}; }
   .card.brand {
     background: radial-gradient(1200px 800px at 20% 10%, rgba(255,255,255,0.10), transparent 60%), ${look.primary};
   }
   .card.instant, .card.instant * { transition: none !important; }
-  .card > * {
+  .card .part {
     margin: 0; opacity: 0; filter: blur(12px);
-    transition: opacity 400ms ease, filter 400ms ease;
+    transition: opacity 300ms ease, filter 300ms ease;
   }
-  .card.show > * { opacity: 1; filter: blur(0); transition: opacity 600ms ease, filter 600ms ease; }
-  .card.show > .eyebrow, .card.show > .logo { transition-delay: 150ms; }
-  .card.show > .heading { transition-delay: 260ms; }
-  .card.show > .sub { transition-delay: 700ms; }
-  /* Beats every .card.show rule above (same specificity, declared later). */
-  .card.show.leaving > *, .card.show.leaving > .heading, .card.show.leaving > .sub,
-  .card.show.leaving > .eyebrow, .card.show.leaving > .logo {
+  .card.show .part { opacity: 1; filter: blur(0); transition: opacity 500ms ease, filter 500ms ease; }
+  .card.show .eyebrow, .card.show .logo { transition-delay: 80ms; }
+  .card.show .heading { transition-delay: 160ms; }
+  .card.show .still { transition-delay: 260ms; }
+  .card.show .sub { transition-delay: 420ms; }
+  /* Beats every .card.show rule above (more specific). */
+  .card.show.leaving .part, .card.show.leaving .heading, .card.show.leaving .sub,
+  .card.show.leaving .eyebrow, .card.show.leaving .logo, .card.show.leaving .still {
     opacity: 0; filter: blur(12px);
-    transition: opacity 280ms ease 0ms, filter 280ms ease 0ms;
+    transition: opacity 240ms ease 0ms, filter 240ms ease 0ms;
   }
-  .card.show.after > .eyebrow, .card.show.after > .logo { transition-delay: 420ms; }
-  .card.show.after > .heading { transition-delay: 520ms; }
-  .card.show.after > .sub { transition-delay: 900ms; }
+  .card.show.after .eyebrow, .card.show.after .logo { transition-delay: 300ms; }
+  .card.show.after .heading { transition-delay: 380ms; }
+  .card.show.after .still { transition-delay: 480ms; }
+  .card.show.after .sub { transition-delay: 620ms; }
   /* Faint grain over the background and cards: it dithers their soft
      gradients, which in 8-bit video would band and block. */
   body::before, .card::before {
@@ -275,18 +328,29 @@ var stageHtml = (background, appUrl, look, options = {}) => {
     opacity: 0.045;
   }
   .card::before { z-index: -1; }
-  .card .eyebrow { font-size: 24px; font-weight: 600; letter-spacing: 0.02em; color: #707070; }
+  .card .eyebrow {
+    font-size: 28px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
+    color: ${look.primary};
+  }
   .card .logo.wide { width: 720px; height: auto; }
   .card .logo.square { height: 240px; width: auto; }
   .card .heading {
     font-family: ${font(look.headingFont)}, Georgia, serif;
-    font-size: 76px; font-weight: 400; line-height: 1.15; letter-spacing: -0.01em;
+    font-size: 116px; font-weight: 400; line-height: 1.08; letter-spacing: -0.015em;
     color: ${look.ink};
   }
   .card .heading em { font-style: italic; color: ${look.primary}; }
-  .card .sub { font-size: 28px; font-weight: 400; color: ${look.text}; opacity: 0.8; }
+  .card .sub { font-size: 40px; font-weight: 400; line-height: 1.3; color: ${look.text}; opacity: 0.85; }
+  .card.split .heading { font-size: 92px; }
+  .card.split .sub { font-size: 36px; }
+  .card .still {
+    flex: 0 0 auto; border-radius: 18px; background: #fff;
+    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
+  }
+  .card .still.tall { max-height: 760px; max-width: 640px; }
+  .card .still.broad { max-width: 760px; max-height: 620px; }
   .card.brand .heading, .card.brand .heading em { color: #fff; }
-  .card.brand .sub, .card.brand .eyebrow { color: rgba(255,255,255,0.82); }
+  .card.brand .sub, .card.brand .eyebrow { color: rgba(255,255,255,0.86); }
   .card.brand .logo { filter: brightness(0) invert(1); }
 </style>
 </head>
@@ -385,6 +449,7 @@ var target = {
 };
 var scale = z.number().min(1).max(3);
 var seconds = z.number().min(0.5).max(60);
+var behindCard = { behindCard: z.boolean().optional() };
 var cardFields = {
   eyebrow: z.string().min(1).max(40).optional(),
   heading: z.string().min(1).max(80).optional(),
@@ -393,7 +458,13 @@ var cardFields = {
   logo: z.boolean().optional(),
   /** "pale" = brand-tinted white; "brand" = full-bleed primary colour. */
   style: z.enum(["pale", "brand"]).default("pale"),
-  seconds: z.number().min(0.5).max(10).default(2.5)
+  seconds: z.number().min(0.5).max(10).default(1.6)
+};
+var show = z.union([z.string().min(1), z.object({ ...target }).strict()]).optional();
+var stepCardFields = {
+  ...cardFields,
+  style: z.enum(["pale", "brand"]).optional(),
+  show
 };
 var hasContent = (c) => Boolean(c.heading || c.logo);
 var CARD_EMPTY = "a card needs a heading or the logo";
@@ -401,15 +472,19 @@ var coreStepSchemas = [
   z.object({
     do: z.literal("click"),
     ...target,
-    zoom: scale.optional()
+    zoom: scale.optional(),
+    ...behindCard
   }).strict(),
   z.object({
     do: z.literal("type"),
     ...target,
     text: z.string(),
-    perCharMs: z.number().int().min(0).max(500).optional()
+    perCharMs: z.number().int().min(0).max(500).optional(),
+    // Select what the field holds first, so the text replaces it.
+    replace: z.boolean().optional(),
+    ...behindCard
   }).strict(),
-  z.object({ do: z.literal("press"), key: z.string().min(1) }).strict(),
+  z.object({ do: z.literal("press"), key: z.string().min(1), ...behindCard }).strict(),
   z.object({
     do: z.literal("zoom"),
     ...target,
@@ -427,7 +502,8 @@ var coreStepSchemas = [
     do: z.literal("waitFor"),
     ...target,
     hidden: z.boolean().optional(),
-    timeout: seconds.default(15)
+    timeout: seconds.default(15),
+    ...behindCard
   }).strict(),
   z.object({
     do: z.literal("expectText"),
@@ -436,7 +512,7 @@ var coreStepSchemas = [
     contains: z.boolean().optional(),
     timeout: seconds.default(10)
   }).strict(),
-  z.object({ do: z.literal("card"), ...cardFields }).strict(),
+  z.object({ do: z.literal("card"), ...stepCardFields }).strict(),
   z.object({
     do: z.literal("hold"),
     seconds: z.number().min(0).max(10)
@@ -445,8 +521,9 @@ var coreStepSchemas = [
 var CORE_STEP_NAMES = coreStepSchemas.map(
   (s) => s.shape.do.value
 );
-var RESERVED_FIELDS = ["do"];
+var RESERVED_FIELDS = ["do", "behindCard"];
 var cardSchema = z.object(cardFields).strict().refine(hasContent, CARD_EMPTY);
+var titleSchema = z.object({ ...cardFields, show }).strict().refine(hasContent, CARD_EMPTY);
 var isCoreStep = (step) => CORE_STEP_NAMES.includes(step.do);
 var buildStoryboardSchema = (adapter) => {
   const actionSchemas = Object.entries(adapter.actions ?? {}).map(
@@ -461,7 +538,7 @@ var buildStoryboardSchema = (adapter) => {
           );
         }
       }
-      return z.object({ do: z.literal(name) }).merge(action.params).strict();
+      return z.object({ do: z.literal(name), ...behindCard }).merge(action.params).strict();
     }
   );
   const stepSchema = z.discriminatedUnion("do", [
@@ -471,8 +548,9 @@ var buildStoryboardSchema = (adapter) => {
   return z.object({
     app: z.literal(adapter.app),
     description: z.string().min(1).max(280).optional(),
+    kind: z.enum(["showcase", "feature"]).optional(),
     primary: z.boolean().optional(),
-    title: cardSchema.optional(),
+    title: titleSchema.optional(),
     closing: cardSchema.optional(),
     steps: z.array(stepSchema).min(1)
   }).strict().superRefine((story, ctx) => {
@@ -515,6 +593,7 @@ var loadStoryboard = (file, adapter) => {
 var MIN_ZOOM = MIN_SCALE;
 var MAX_ZOOM = MAX_SCALE;
 var MAX_PUSHES_PER_CHAPTER = 2;
+var MAX_SHOWCASE_CHAPTERS = 4;
 var MAX_HOLD_SECONDS = 6;
 var MIN_PER_CHAR_MS = 40;
 var MAX_WORDS = { eyebrow: 4, heading: 8, sub: 16 };
@@ -534,7 +613,8 @@ var CODE_ON_CARD = [
   ]
 ];
 var INTERACTIONS = /* @__PURE__ */ new Set(["click", "type", "press"]);
-var isInteraction = (step) => INTERACTIONS.has(step.do) || !isCoreStep(step);
+var isBehindCard = (step) => step.behindCard === true;
+var isInteraction = (step) => (INTERACTIONS.has(step.do) || !isCoreStep(step)) && !isBehindCard(step);
 var lintStoryboard = (story) => {
   const issues = [];
   const steps = story.steps;
@@ -616,10 +696,32 @@ var lintStoryboard = (story) => {
   steps.forEach((step, index) => {
     const where = `steps.${index}`;
     const s = step;
+    if (isBehindCard(step)) {
+      let k = index - 1;
+      while (k >= 0 && isBehindCard(steps[k])) {
+        k--;
+      }
+      const afterCard = k === -1 ? Boolean(story.title) : steps[k].do === "card";
+      if (!afterCard) {
+        issues.push(
+          `${where}: behindCard only right after a card, which covers the app while it's done`
+        );
+      }
+      if (step.do === "click" && s.zoom !== void 0) {
+        issues.push(
+          `${where}: a click behind a card has no shot to push in to; drop its zoom`
+        );
+      }
+    }
     if (step.do === "card") {
       endChapter(index);
       chapterStart = index + 1;
       lintCard(where, s);
+      if (s.eyebrow !== void 0) {
+        issues.push(
+          `${where}.eyebrow: cards between chapters have no eyebrow; the statement and its sub-line say it`
+        );
+      }
       const rest = steps.slice(index + 1);
       const nextCard = rest.findIndex((x) => x.do === "card");
       const chapter = nextCard === -1 ? rest : rest.slice(0, nextCard);
@@ -667,6 +769,54 @@ var lintStoryboard = (story) => {
     }
   });
   endChapter(steps.length);
+  const snapshots = /* @__PURE__ */ new Map();
+  const showOf = (where, value) => {
+    if (value === void 0) {
+      return;
+    }
+    const t = value;
+    const key = typeof t === "string" ? `${t}#0` : `${t.target}#${t.nth ?? 0}`;
+    const first = snapshots.get(key);
+    if (first) {
+      issues.push(
+        `${where}.show: ${first} shows the same snapshot; show each result once`
+      );
+    } else {
+      snapshots.set(key, where);
+    }
+  };
+  showOf("title", story.title?.show);
+  steps.forEach((step, index) => {
+    if (step.do === "card") {
+      showOf(`steps.${index}`, step.show);
+    }
+  });
+  const kind = story.kind ?? "showcase";
+  if (story.primary && kind !== "showcase") {
+    issues.push(
+      "kind: the primary story walks the app's main journey, so it is a showcase"
+    );
+  }
+  const chapters = steps.filter((step, i) => {
+    if (step.do !== "card") {
+      return false;
+    }
+    const rest = steps.slice(i + 1);
+    const next = rest.findIndex((x) => x.do === "card");
+    return (next === -1 ? rest : rest.slice(0, next)).some(
+      (x) => !isBehindCard(x)
+    );
+  }).length;
+  if (kind === "feature" && chapters !== 1) {
+    issues.push(
+      `kind: a feature clip shows one feature, in one chapter; this has ${chapters}. Make it one, or a showcase`
+    );
+  }
+  if (kind === "showcase" && chapters > MAX_SHOWCASE_CHAPTERS) {
+    issues.push(
+      `${chapters} chapters; a showcase has at most ${MAX_SHOWCASE_CHAPTERS}: make a second story`
+    );
+  }
   return issues;
 };
 var normaliseText = (text) => text.replace(/\s+/g, " ").trim();
@@ -675,16 +825,26 @@ export {
   ZOOM_MS,
   CARD_IN_MS,
   CARD_OUT_MS,
+  CURSOR_MIN_MS,
+  CURSOR_MAX_MS,
   SETTLE_MS,
+  ESTABLISH_MS,
+  SETTLED_MS,
+  REACTION_MS,
+  COVERED_SETTLED_MS,
+  COVERED_MAX_MS,
   PRE_CLICK_MS,
   PRESS_MS,
   POST_CLICK_MS,
   POST_KEY_MS,
   POST_ACTION_MS,
+  TYPE_CHAR_MS,
   LINGER_MS,
   POLL_MS,
   cardSeconds,
+  titleSeconds,
   STAGE_PATH,
+  STILLS_PATH,
   STAGE_WIDTH,
   STAGE_HEIGHT,
   DEFAULT_VIEWPORT,
@@ -703,5 +863,6 @@ export {
   StoryboardError,
   parseStoryboard,
   loadStoryboard,
+  isBehindCard,
   lintStoryboard
 };