@navipartner/demo-video 0.6.0 → 0.7.1

package/dist/{adapter-CDOXdUZI.d.ts → adapter-bOi1ZBRa.d.ts}

@@ -38,6 +38,13 @@ interface VideoBrand {
     fontsUrl: string;
 }
 
+/**
+ * What a story is (look.md): a showcase walks the app's main journey for a
+ * buyer (45–90 s); a feature clip shows one feature (15–30 s). The beats are
+ * the same; the shape differs.
+ */
+type Kind = "showcase" | "feature";
+
 /** A testid (letters, digits, dash, underscore) or a Playwright selector. */
 interface Target {
     target: string;
@@ -53,6 +60,21 @@ interface CardSpec {
     logo?: boolean;
     style: "pale" | "brand";
     seconds: number;
+    /** A still of what the chapter achieves, beside the words (a URL). */
+    still?: string;
+}
+interface CardOptions {
+    /** The next card replaces this one directly, with no app in between. */
+    keepUp?: boolean;
+    /** The video's open card: already up on the first frame, no dissolve in. */
+    opening?: boolean;
+    /** The story's kind: how long the open card may stay up. */
+    kind?: Kind;
+    /**
+     * Done while the card covers the app (setup, the chapter's first shot):
+     * no cursor, no camera moves, and the card stays up until it's done.
+     */
+    behind?: () => Promise<void>;
 }
 interface DirectorApi {
     /** The app's iframe, for actions that talk to the app directly. */
@@ -75,7 +97,10 @@ interface DirectorApi {
     click(target: Target, options?: {
         zoom?: number;
     }): Promise<void>;
-    type(target: Target, text: string, perCharMs?: number): Promise<void>;
+    /** `replace`: select what the field holds first, so the text replaces it. */
+    type(target: Target, text: string, perCharMs?: number, options?: {
+        replace?: boolean;
+    }): Promise<void>;
     press(key: string): Promise<void>;
     park(): Promise<void>;
     waitFor(target: Target, options: {
@@ -98,12 +123,16 @@ interface DirectorApi {
      */
     clockMs(): number;
     /**
-     * Dissolves the card in over the app and holds it. It dissolves back out
-     * unless `keepUp`: then the next card replaces it directly.
+     * Dissolves the card in over the app and holds it, doing `behind` while
+     * it covers the app. It dissolves back out unless `keepUp`: then the next
+     * card replaces it directly.
      */
-    card(spec: CardSpec, options?: {
-        keepUp?: boolean;
-    }): Promise<void>;
+    card(spec: CardSpec, options?: CardOptions): Promise<void>;
+    /**
+     * Saves a still of the element as it looks now, for a card that shows it.
+     * False when it isn't on screen.
+     */
+    capture(target: Target, file: string): Promise<boolean>;
     /** Testids currently visible in the app, for failure reports. */
     visibleTestIds(): Promise<string[]>;
 }
@@ -166,4 +195,4 @@ interface DemoAdapter {
 declare const defineDemo: (adapter: DemoAdapter) => DemoAdapter;
 declare const defineAction: <S extends z.ZodRawShape>(action: DemoAction<S>) => DemoAction<S>;
 
-export { type Brand as B, type CardSpec as C, type DemoAdapter as D, type Target as T, type VideoBrand as V, type DemoAction as a, type DirectorApi as b, defineDemo as c, defineAction as d };
+export { type Brand as B, type CardSpec as C, type DemoAdapter as D, type Kind as K, type Target as T, type VideoBrand as V, type DemoAction as a, type DirectorApi as b, defineDemo as c, defineAction as d };

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

@@ -4,29 +4,39 @@ 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 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.6 + 0.28 * (wordCount(spec.heading) + wordCount(spec.sub)) + 0.14 * 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 +75,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 +138,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 +174,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 +222,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 +279,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 +323,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 +444,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 +453,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.8)
+};
+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 +467,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 +497,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 +507,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)
@@ -447,6 +518,7 @@ var CORE_STEP_NAMES = coreStepSchemas.map(
 );
 var RESERVED_FIELDS = ["do"];
 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(
@@ -471,8 +543,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 +588,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 +608,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 +691,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 +764,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 +820,21 @@ export {
   ZOOM_MS,
   CARD_IN_MS,
   CARD_OUT_MS,
+  CURSOR_MIN_MS,
+  CURSOR_MAX_MS,
   SETTLE_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 +853,6 @@ export {
   StoryboardError,
   parseStoryboard,
   loadStoryboard,
+  isBehindCard,
   lintStoryboard
 };