@navipartner/demo-video 0.0.0-stage → 0.4.0

package/dist/chunk-BYAFDWPA.js

@@ -0,0 +1,768 @@
+// src/storyboard.ts
+import fs from "fs";
+import path from "path";
+import { z } from "zod";
+
+// src/timing.ts
+var ZOOM_MS = 1200;
+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 PRESS_MS = 110;
+var POST_CLICK_MS = 650;
+var POST_KEY_MS = 300;
+var POST_ACTION_MS = 650;
+var LINGER_MS = 1400;
+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);
+};
+
+// src/stage.ts
+var STAGE_PATH = "/__demo/stage";
+var STAGE_WIDTH = 1920;
+var STAGE_HEIGHT = 1080;
+var FRAME_WIDTH = 1728;
+var FRAME_HEIGHT = 972;
+var DEFAULT_VIEWPORT = { width: FRAME_WIDTH, height: FRAME_HEIGHT };
+var PARK = { x: STAGE_WIDTH * 0.6, y: STAGE_HEIGHT * 0.66 };
+var stageLayout = (viewport = DEFAULT_VIEWPORT) => {
+  const fit = Math.min(
+    FRAME_WIDTH / viewport.width,
+    FRAME_HEIGHT / viewport.height
+  );
+  return {
+    viewport,
+    fit,
+    left: (STAGE_WIDTH - viewport.width * fit) / 2,
+    top: (STAGE_HEIGHT - viewport.height * fit) / 2
+  };
+};
+var GRAIN = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="160" height="160" filter="url(#g)"/></svg>'
+)}`;
+var stageScript = (layout, look) => String.raw`
+(() => {
+  const camera = document.getElementById("camera");
+  const cursor = document.getElementById("cursor");
+  const LOGO_URL = ${JSON.stringify(look.logoUrl ?? null)};
+
+  const F = ${layout.fit};
+  const PARK_X = ${PARK.x}, PARK_Y = ${PARK.y};
+  const CARD_IN_MS = ${CARD_IN_MS}, CARD_OUT_MS = ${CARD_OUT_MS};
+  const cursorMs = (dist) =>
+    Math.round(Math.min(${CURSOR_MAX_MS}, Math.max(${CURSOR_MIN_MS}, dist * ${CURSOR_MS_PER_PX})));
+
+  let cursorX = PARK_X, cursorY = PARK_Y;
+
+  // 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) => {
+    camera.style.transform = "translate(" + shot.tx + "px, " + shot.ty + "px) scale(" + shot.k + ")";
+  };
+
+  // Behind an opaque card: back to wide with no move, so every chapter opens
+  // on the whole window.
+  const resetCamera = () => {
+    camera.classList.add("instant");
+    camera.style.transform = "translate(0px, 0px) scale(" + F + ")";
+    void camera.offsetWidth;
+    camera.classList.remove("instant");
+  };
+
+  // A quadratic Bezier with a slight bow, eased in and out, so the cursor
+  // moves like a hand rather than a robot. The bow is kept small: a visible
+  // swoop reads as showing off. Returns the move's duration.
+  const cursorTo = (x, y) => {
+    const dx = x - cursorX, dy = y - cursorY;
+    const dist = Math.hypot(dx, dy);
+    if (dist < 1) { return 0; }
+    const ms = cursorMs(dist);
+    const bow = Math.min(40, dist * 0.06);
+    const mx = cursorX + dx / 2 - dy / dist * bow || cursorX;
+    const my = cursorY + dy / 2 + dx / dist * bow || cursorY;
+    const steps = 24;
+    const frames = [];
+    for (let i = 0; i <= steps; i++) {
+      const t = i / steps;
+      const px = (1 - t) * (1 - t) * cursorX + 2 * (1 - t) * t * mx + t * t * x;
+      const py = (1 - t) * (1 - t) * cursorY + 2 * (1 - t) * t * my + t * t * y;
+      frames.push({ transform: "translate(" + px + "px, " + py + "px)" });
+    }
+    cursorX = x; cursorY = y;
+    // The resting transform is set first; the animation covers it until it
+    // ends, so the hand-off is seamless.
+    cursor.style.transform = "translate(" + x + "px, " + y + "px)";
+    cursor.animate(frames, { duration: ms, easing: "cubic-bezier(0.45, 0, 0.2, 1)" });
+    return ms;
+  };
+
+  // Behind an opaque card: the cursor rests in empty space for the next chapter.
+  const parkNow = () => {
+    cursorX = PARK_X; cursorY = PARK_Y;
+    cursor.getAnimations().forEach((a) => a.cancel());
+    cursor.style.transform = "translate(" + cursorX + "px, " + cursorY + "px)";
+  };
+
+  const escapeHtml = (text) =>
+    text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  // "Pay *their way*." becomes Pay <em>their way</em>.
+  const emphasise = (text) => escapeHtml(text).replace(/\*([^*]+)\*/g, "<em>$1</em>");
+
+  // Each card is its own layer, so one card dissolves straight into the next
+  // (payoff into end card) without the app showing in between.
+  let current = null;
+
+  const buildCard = (spec) => {
+    const el = document.createElement("div");
+    el.className = "card " + (spec.style === "brand" ? "brand" : "pale");
+    const add = (tag, cls, html) => {
+      const child = document.createElement(tag);
+      child.className = cls;
+      child.innerHTML = html;
+      el.appendChild(child);
+      return child;
+    };
+    if (spec.eyebrow) { add("p", "eyebrow", escapeHtml(spec.eyebrow)); }
+    if (spec.logo && LOGO_URL) {
+      const logo = add("img", "logo", "");
+      logo.alt = "";
+      // A wordmark is sized by width, a square mark by height.
+      logo.onload = () => logo.classList.add(logo.naturalWidth > logo.naturalHeight * 3 ? "wide" : "square");
+      logo.src = LOGO_URL;
+    }
+    if (spec.heading) { add("h1", "heading", emphasise(spec.heading)); }
+    if (spec.sub) { add("p", "sub", escapeHtml(spec.sub)); }
+    return el;
+  };
+
+  // setTimeout runs on the virtual clock, so a removal lands on the frame
+  // its dissolve ends.
+  const showCard = (spec, instant) => {
+    const el = buildCard(spec);
+    const previous = current;
+    current = el;
+    if (instant) { el.classList.add("instant"); camera.classList.add("instant"); }
+    // Card to card: the old words dissolve first, then the new ones come in,
+    // so two headings never show at once.
+    if (previous && !instant) {
+      previous.classList.add("leaving");
+      el.classList.add("after");
+    }
+    document.body.appendChild(el);
+    void el.offsetWidth;
+    camera.classList.add("behind");
+    el.classList.add("show");
+    if (instant) {
+      void el.offsetWidth;
+      el.classList.remove("instant");
+      camera.classList.remove("instant");
+      if (previous) { previous.remove(); }
+      return;
+    }
+    if (previous) { setTimeout(() => previous.remove(), CARD_IN_MS); }
+  };
+
+  const hideCard = () => {
+    const el = current;
+    current = null;
+    if (!el) { return; }
+    el.classList.remove("show");
+    camera.classList.remove("behind");
+    setTimeout(() => el.remove(), CARD_OUT_MS);
+  };
+
+  window.__demo = { setShot, resetCamera, cursorTo, parkNow, showCard, hideCard };
+  cursor.style.transform = "translate(" + cursorX + "px, " + cursorY + "px)";
+})();
+`;
+var stageHtml = (background, appUrl, look, options = {}) => {
+  const layout = stageLayout(options.viewport);
+  const f = layout.fit;
+  const font = (name) => `"${name.replace(/"/g, "")}"`;
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Demo stage</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="${look.fontsUrl.replace(/"/g, "&quot;")}" rel="stylesheet" />
+<style>
+  html, body { margin: 0; width: ${STAGE_WIDTH}px; height: ${STAGE_HEIGHT}px; overflow: hidden; }
+  body {
+    position: relative;
+    background: ${background};
+    font-family: ${font(look.bodyFont)}, system-ui, sans-serif;
+    color: ${look.text};
+  }
+  #camera {
+    position: absolute;
+    left: ${layout.left}px; top: ${layout.top}px;
+    width: ${layout.viewport.width}px; height: ${layout.viewport.height}px;
+    transform-origin: 0 0;
+    transform: translate(0px, 0px) scale(${f});
+    transition: transform ${ZOOM_MS}ms ${CAMERA_EASE}, filter ${CARD_OUT_MS}ms ease;
+    border-radius: ${14 / f}px;
+    box-shadow: 0 ${28 / f}px ${90 / f}px rgba(15, 23, 42, 0.16), 0 ${2 / f}px ${8 / f}px rgba(15, 23, 42, 0.08);
+    overflow: hidden;
+    background: #fff;
+    /* No will-change: it would rasterise the app once and scale the bitmap,
+       so zoomed-in text would blur. */
+  }
+  #camera.behind {
+    filter: blur(${16 / f}px);
+    transition: transform ${ZOOM_MS}ms ${CAMERA_EASE}, filter ${CARD_IN_MS}ms ease;
+  }
+  #camera.instant { transition: none; }
+  #app {
+    display: block; border: 0;
+    width: ${layout.viewport.width}px; height: ${layout.viewport.height}px;
+  }
+  #cursor {
+    position: absolute; left: 0; top: 0;
+    width: 30px; height: 40px;
+    pointer-events: none; z-index: 30;
+    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35));
+  }
+  /* Full-frame text cards (look.md). Opaque, so the app is never read
+     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;
+    opacity: 0; transition: opacity ${CARD_OUT_MS}ms ease;
+    pointer-events: none;
+  }
+  .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 > * {
+    margin: 0; opacity: 0; filter: blur(12px);
+    transition: opacity 400ms ease, filter 400ms 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 {
+    opacity: 0; filter: blur(12px);
+    transition: opacity 280ms ease 0ms, filter 280ms 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; }
+  /* 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 {
+    content: ""; position: absolute; inset: 0; pointer-events: none;
+    background-image: url("${GRAIN}");
+    background-size: 160px 160px;
+    opacity: 0.045;
+  }
+  .card::before { z-index: -1; }
+  .card .eyebrow { font-size: 24px; font-weight: 600; letter-spacing: 0.02em; color: #707070; }
+  .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;
+    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.brand .heading, .card.brand .heading em { color: #fff; }
+  .card.brand .sub, .card.brand .eyebrow { color: rgba(255,255,255,0.82); }
+  .card.brand .logo { filter: brightness(0) invert(1); }
+</style>
+</head>
+<body>
+  <div id="camera"><iframe id="app" name="app" src="${appUrl}" title="App"></iframe></div>
+  <svg id="cursor" viewBox="0 0 30 40" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 2 L3 30 L10.5 23.5 L16 36 L21 33.5 L15.5 21 L26 21 Z" fill="#fff" stroke="#0f172a" stroke-width="2.2" stroke-linejoin="round"/>
+  </svg>
+  <script>${stageScript(layout, look)}</script>
+</body>
+</html>`;
+};
+
+// src/camera.ts
+var EDGE = 40;
+var MIN_SCALE = 1.3;
+var MAX_SCALE = 2;
+var FRAME_PADDING = 96;
+var clamp = (t, size, full, offset) => {
+  if (size >= full) {
+    return Math.max(Math.min(t, -offset), full - offset - size);
+  }
+  const edge = Math.min(EDGE, (full - size) / 2);
+  return Math.min(Math.max(t, edge - offset), full - edge - offset - size);
+};
+var shotFor = (layout, rect, scale2) => {
+  const k = scale2 * layout.fit;
+  const cx = rect.x + rect.width / 2;
+  const cy = rect.y + rect.height / 2;
+  return {
+    k,
+    tx: clamp(
+      STAGE_WIDTH / 2 - layout.left - k * cx,
+      layout.viewport.width * k,
+      STAGE_WIDTH,
+      layout.left
+    ),
+    ty: clamp(
+      STAGE_HEIGHT / 2 - layout.top - k * cy,
+      layout.viewport.height * k,
+      STAGE_HEIGHT,
+      layout.top
+    )
+  };
+};
+var wideShot = (layout) => ({
+  tx: 0,
+  ty: 0,
+  k: layout.fit
+});
+var visibleRect = (layout, shot) => {
+  const x0 = Math.max(0, (0 - layout.left - shot.tx) / shot.k);
+  const y0 = Math.max(0, (0 - layout.top - shot.ty) / shot.k);
+  const x1 = Math.min(
+    layout.viewport.width,
+    (STAGE_WIDTH - layout.left - shot.tx) / shot.k
+  );
+  const y1 = Math.min(
+    layout.viewport.height,
+    (STAGE_HEIGHT - layout.top - shot.ty) / shot.k
+  );
+  return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+};
+var shows = (layout, shot, rect) => {
+  const v = visibleRect(layout, shot);
+  const slack = 4;
+  return rect.x >= v.x - slack && rect.y >= v.y - slack && rect.x + rect.width <= v.x + v.width + slack && rect.y + rect.height <= v.y + v.height + slack;
+};
+var coverage = (rect, area) => {
+  const ix = Math.max(
+    0,
+    Math.min(rect.x + rect.width, area.x + area.width) - Math.max(rect.x, area.x)
+  );
+  const iy = Math.max(
+    0,
+    Math.min(rect.y + rect.height, area.y + area.height) - Math.max(rect.y, area.y)
+  );
+  return ix * iy / (rect.width * rect.height);
+};
+var unionRect = (rects) => {
+  const x0 = Math.min(...rects.map((r) => r.x));
+  const y0 = Math.min(...rects.map((r) => r.y));
+  const x1 = Math.max(...rects.map((r) => r.x + r.width));
+  const y1 = Math.max(...rects.map((r) => r.y + r.height));
+  return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+};
+var fittingScale = (layout, rect) => Math.min(
+  (STAGE_WIDTH - 2 * FRAME_PADDING) / rect.width,
+  (STAGE_HEIGHT - 2 * FRAME_PADDING) / rect.height
+) / layout.fit;
+
+// src/storyboard.ts
+var target = {
+  target: z.string().min(1),
+  nth: z.number().int().optional()
+};
+var scale = z.number().min(1).max(3);
+var seconds = z.number().min(0.5).max(60);
+var cardFields = {
+  eyebrow: z.string().min(1).max(40).optional(),
+  heading: z.string().min(1).max(80).optional(),
+  sub: z.string().min(1).max(140).optional(),
+  /** Show the brand's logo (open and end cards). */
+  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)
+};
+var hasContent = (c) => Boolean(c.heading || c.logo);
+var CARD_EMPTY = "a card needs a heading or the logo";
+var coreStepSchemas = [
+  z.object({
+    do: z.literal("click"),
+    ...target,
+    zoom: scale.optional()
+  }).strict(),
+  z.object({
+    do: z.literal("type"),
+    ...target,
+    text: z.string(),
+    perCharMs: z.number().int().min(0).max(500).optional()
+  }).strict(),
+  z.object({ do: z.literal("press"), key: z.string().min(1) }).strict(),
+  z.object({
+    do: z.literal("zoom"),
+    ...target,
+    scale: scale.default(1.4)
+  }).strict(),
+  z.object({
+    do: z.literal("frame"),
+    // A button and what it changes: 2–4 targets in one shot.
+    targets: z.array(z.union([z.string().min(1), z.object(target).strict()])).min(2).max(4),
+    maxScale: scale.optional()
+  }).strict(),
+  z.object({ do: z.literal("zoomOut"), park: z.boolean().optional() }).strict(),
+  z.object({ do: z.literal("park") }).strict(),
+  z.object({
+    do: z.literal("waitFor"),
+    ...target,
+    hidden: z.boolean().optional(),
+    timeout: seconds.default(15)
+  }).strict(),
+  z.object({
+    do: z.literal("expectText"),
+    ...target,
+    text: z.string(),
+    contains: z.boolean().optional(),
+    timeout: seconds.default(10)
+  }).strict(),
+  z.object({ do: z.literal("card"), ...cardFields }).strict(),
+  z.object({
+    do: z.literal("hold"),
+    seconds: z.number().min(0).max(10)
+  }).strict()
+];
+var CORE_STEP_NAMES = coreStepSchemas.map(
+  (s) => s.shape.do.value
+);
+var RESERVED_FIELDS = ["do"];
+var cardSchema = z.object(cardFields).strict().refine(hasContent, CARD_EMPTY);
+var isCoreStep = (step) => CORE_STEP_NAMES.includes(step.do);
+var buildStoryboardSchema = (adapter) => {
+  const actionSchemas = Object.entries(adapter.actions ?? {}).map(
+    ([name, action]) => {
+      if (CORE_STEP_NAMES.includes(name)) {
+        throw new Error(`Adapter action "${name}" collides with a core step`);
+      }
+      for (const field of RESERVED_FIELDS) {
+        if (field in action.params.shape) {
+          throw new Error(
+            `Adapter action "${name}" declares a "${field}" param, which collides with a core field`
+          );
+        }
+      }
+      return z.object({ do: z.literal(name) }).merge(action.params).strict();
+    }
+  );
+  const stepSchema = z.discriminatedUnion("do", [
+    ...coreStepSchemas,
+    ...actionSchemas
+  ]);
+  return z.object({
+    app: z.literal(adapter.app),
+    description: z.string().min(1).max(280).optional(),
+    primary: z.boolean().optional(),
+    title: cardSchema.optional(),
+    closing: cardSchema.optional(),
+    steps: z.array(stepSchema).min(1)
+  }).strict().superRefine((story, ctx) => {
+    story.steps.forEach((step, index) => {
+      const s = step;
+      if (s.do === "card" && !hasContent(s)) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["steps", index],
+          message: CARD_EMPTY
+        });
+      }
+    });
+  });
+};
+var StoryboardError = class extends Error {
+};
+var parseStoryboard = (raw, adapter, source = "storyboard") => {
+  const result = buildStoryboardSchema(adapter).safeParse(raw);
+  if (result.success) {
+    return result.data;
+  }
+  const lines = result.error.issues.map((issue) => {
+    const where = issue.path.length ? issue.path.join(".") : "(root)";
+    return `  ${where}: ${issue.message}`;
+  });
+  throw new StoryboardError(`Invalid ${source}:
+${lines.join("\n")}`);
+};
+var cardChange = z.object({
+  eyebrow: cardFields.eyebrow,
+  heading: cardFields.heading,
+  sub: cardFields.sub,
+  logo: cardFields.logo,
+  style: z.enum(["pale", "brand"]).optional(),
+  seconds: z.number().min(0.5).max(10).optional()
+}).strict();
+var variantSchema = z.object({
+  extends: z.string().regex(/^[\w-]+$/, "the base story's name"),
+  brand: z.string().regex(/^[\w-]+$/, "a brand name"),
+  description: z.string().min(1).max(280).optional(),
+  title: cardChange.optional(),
+  closing: cardChange.optional(),
+  cards: z.array(cardChange).optional()
+}).strict();
+var readJson = (file) => JSON.parse(fs.readFileSync(file, "utf8"));
+var isVariant = (raw) => typeof raw === "object" && raw !== null && "extends" in raw;
+var loadVariant = (raw, file, adapter) => {
+  const name = path.basename(file);
+  const result = variantSchema.safeParse(raw);
+  if (!result.success) {
+    const lines = result.error.issues.map(
+      (i) => `  ${i.path.join(".") || "(root)"}: ${i.message}`
+    );
+    throw new StoryboardError(`Invalid ${name}:
+${lines.join("\n")}`);
+  }
+  const variant = result.data;
+  const baseFile = path.join(path.dirname(file), `${variant.extends}.json`);
+  if (!fs.existsSync(baseFile)) {
+    throw new StoryboardError(
+      `${name} extends "${variant.extends}", but there is no ${variant.extends}.json beside it`
+    );
+  }
+  const base = readJson(baseFile);
+  if (isVariant(base)) {
+    throw new StoryboardError(
+      `${name} extends ${variant.extends}.json, which is a variant itself; extend the story it extends`
+    );
+  }
+  const steps = Array.isArray(base.steps) ? base.steps : [];
+  const cardAt = steps.flatMap((s, i) => s.do === "card" ? [i] : []);
+  if (variant.cards && variant.cards.length !== cardAt.length) {
+    throw new StoryboardError(
+      `${name} gives ${variant.cards.length} card${variant.cards.length === 1 ? "" : "s"}; ${variant.extends}.json has ${cardAt.length}. A variant gives every card of its story, in order.`
+    );
+  }
+  const change = (card, over) => over ? { ...card, ...over } : card;
+  const merged = steps.map(
+    (step, i) => variant.cards ? change(step, variant.cards[cardAt.indexOf(i)]) : step
+  );
+  const rest = { ...base };
+  delete rest.primary;
+  const story = parseStoryboard(
+    {
+      ...rest,
+      description: variant.description ?? base.description,
+      title: change(base.title, variant.title),
+      closing: change(base.closing, variant.closing),
+      steps: merged
+    },
+    adapter,
+    `${name} (on ${variant.extends}.json)`
+  );
+  return { ...story, brand: variant.brand, variantOf: variant.extends };
+};
+var loadStoryboard = (file, adapter) => {
+  const raw = readJson(file);
+  return isVariant(raw) ? loadVariant(raw, file, adapter) : parseStoryboard(raw, adapter, path.basename(file));
+};
+var MIN_ZOOM = MIN_SCALE;
+var MAX_ZOOM = MAX_SCALE;
+var MAX_PUSHES_PER_CHAPTER = 2;
+var MAX_HOLD_SECONDS = 6;
+var MIN_PER_CHAR_MS = 40;
+var MAX_WORDS = { eyebrow: 4, heading: 8, sub: 16 };
+var CODE_ON_CARD = [
+  // Hyphenated with a digit (quick-add-978…) or ending in a UI part
+  // (welcome-begin-button): prose like "made-to-order" passes.
+  [
+    /\b[a-z][a-z0-9]*(?:-[a-z0-9]+)*-(?:[a-z]*\d[a-z0-9]*|button|btn|input|row|modal|dialog|view|page|list|item|tile|container|wrapper|field|label|icon|link|menu|panel|section|header|footer)\b/i,
+    "a testid-like name"
+  ],
+  [/\d{5,}/, "a barcode or id"],
+  [/\b[a-z]+_[a-z0-9_]+\b/i, "a snake_case name"],
+  [/\b(?![ie][A-Z])[a-z]+[A-Z][A-Za-z]+\b/, "a camelCase name"],
+  [
+    /data-testid|\bundefined\b|\bnull\b|\bNaN\b|TODO|\{\{|\}\}|<\/?\w+>/,
+    "code"
+  ]
+];
+var INTERACTIONS = /* @__PURE__ */ new Set(["click", "type", "press"]);
+var isInteraction = (step) => INTERACTIONS.has(step.do) || !isCoreStep(step);
+var lintStoryboard = (story) => {
+  const issues = [];
+  const steps = story.steps;
+  if (!story.title) {
+    issues.push("title: a video opens on a title card (the logo, a tagline)");
+  }
+  if (!story.closing) {
+    issues.push(
+      "closing: a video ends on a closing card (the logo, held still)"
+    );
+  }
+  const numbersIn = (text) => text.match(/\d+(?:[.,:]\d+)*/g) ?? [];
+  const shown = new Set(
+    steps.filter((s) => s.do === "expectText").flatMap(
+      (s) => numbersIn(normaliseText(String(s.text)))
+    )
+  );
+  const targets = steps.map((s) => s.target).filter(
+    (t) => typeof t === "string" && /[-_]|[a-z][A-Z]|[=[\]()/]/.test(t)
+  );
+  const escape = (t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const lintCard = (where, card) => {
+    for (const field of ["eyebrow", "heading", "sub"]) {
+      const text = card[field];
+      if (!text) {
+        continue;
+      }
+      if (wordCount(text) > MAX_WORDS[field]) {
+        issues.push(
+          `${where}.${field}: ${wordCount(text)} words; at most ${MAX_WORDS[field]} read at a glance`
+        );
+      }
+      for (const [pattern, what] of CODE_ON_CARD) {
+        const hit = pattern.exec(text);
+        if (hit) {
+          issues.push(
+            `${where}.${field}: "${hit[0]}" looks like ${what}; cards are for people`
+          );
+        }
+      }
+      for (const t of targets) {
+        if (new RegExp(`(^|[^\\w-])${escape(t)}($|[^\\w-])`, "i").test(text)) {
+          issues.push(`${where}.${field}: shows the selector "${t}"`);
+        }
+      }
+      for (const number of numbersIn(text)) {
+        const year = /^(19|20)\d\d$/.test(number);
+        if (!year && !shown.has(number)) {
+          issues.push(
+            `${where}.${field}: "${number}" isn't shown by an expectText in the story; a card only states what the video shows`
+          );
+        }
+      }
+    }
+    const heading = card.heading ?? "";
+    const stars = (heading.match(/\*/g) ?? []).length;
+    if (stars % 2 !== 0) {
+      issues.push(`${where}.heading: an unclosed *emphasis*`);
+    } else if (stars > 2) {
+      issues.push(`${where}.heading: one *italic* word or phrase per card`);
+    }
+  };
+  if (story.title) {
+    lintCard("title", story.title);
+  }
+  if (story.closing) {
+    lintCard("closing", story.closing);
+  }
+  let chapterStart = 0;
+  let pushes = [];
+  const endChapter = (end) => {
+    if (pushes.length > MAX_PUSHES_PER_CHAPTER) {
+      issues.push(
+        `steps.${chapterStart}-${end - 1}: ${pushes.length} camera push-ins in one chapter (${pushes.join(", ")}); push in once on the area the chapter is about and hold steady through its clicks`
+      );
+    }
+    pushes = [];
+  };
+  steps.forEach((step, index) => {
+    const where = `steps.${index}`;
+    const s = step;
+    if (step.do === "card") {
+      endChapter(index);
+      chapterStart = index + 1;
+      lintCard(where, s);
+      const rest = steps.slice(index + 1);
+      const nextCard = rest.findIndex((x) => x.do === "card");
+      const chapter = nextCard === -1 ? rest : rest.slice(0, nextCard);
+      if (chapter.length > 0 && !chapter.some(isInteraction)) {
+        issues.push(
+          `${where}: the card announces a chapter in which nothing is done; follow it with the steps it describes`
+        );
+      }
+      return;
+    }
+    const zoom = step.do === "zoom" ? Number(s.scale) : step.do === "click" && s.zoom !== void 0 ? Number(s.zoom) : step.do === "frame" && s.maxScale !== void 0 ? Number(s.maxScale) : void 0;
+    if (zoom !== void 0 && (zoom < MIN_ZOOM || zoom > MAX_ZOOM)) {
+      issues.push(
+        `${where}: zoom ${zoom}; use ${MIN_ZOOM}\u2013${MAX_ZOOM} (tighter loses the context and softens the picture)`
+      );
+    }
+    const shot = step.do === "frame" ? `frame ${s.targets.map((t) => typeof t === "string" ? t : t.target).join("+")}` : zoom !== void 0 ? `${String(s.target)}@${zoom}` : void 0;
+    if (shot && pushes.at(-1) !== shot) {
+      pushes.push(shot);
+    }
+    if (step.do === "zoom" || step.do === "frame") {
+      const rest = steps.slice(index + 1);
+      const end = rest.findIndex(
+        (x) => x.do === "zoom" || x.do === "frame" || x.do === "zoomOut" || x.do === "card"
+      );
+      const inShot = end === -1 ? rest : rest.slice(0, end);
+      const purposeful = inShot.some(
+        (x) => isInteraction(x) || x.do === "expectText" || x.do === "waitFor" || x.do === "hold" && Number(x.seconds) >= 1
+      );
+      if (!purposeful) {
+        issues.push(
+          `${where}: a zoom with nothing in its shot; push in only where something then happens or is read`
+        );
+      }
+    }
+    if (step.do === "hold" && Number(s.seconds) > MAX_HOLD_SECONDS) {
+      issues.push(
+        `${where}: a ${String(s.seconds)} s hold is dead air; at most ${MAX_HOLD_SECONDS} s`
+      );
+    }
+    if (step.do === "type" && s.perCharMs !== void 0 && Number(s.perCharMs) < MIN_PER_CHAR_MS) {
+      issues.push(
+        `${where}: typing faster than ${MIN_PER_CHAR_MS} ms a character can't be read`
+      );
+    }
+  });
+  endChapter(steps.length);
+  return issues;
+};
+var normaliseText = (text) => text.replace(/\s+/g, " ").trim();
+
+export {
+  ZOOM_MS,
+  CARD_IN_MS,
+  CARD_OUT_MS,
+  SETTLE_MS,
+  PRE_CLICK_MS,
+  PRESS_MS,
+  POST_CLICK_MS,
+  POST_KEY_MS,
+  POST_ACTION_MS,
+  LINGER_MS,
+  POLL_MS,
+  cardSeconds,
+  STAGE_PATH,
+  STAGE_WIDTH,
+  STAGE_HEIGHT,
+  DEFAULT_VIEWPORT,
+  PARK,
+  stageLayout,
+  stageHtml,
+  MIN_SCALE,
+  shotFor,
+  wideShot,
+  visibleRect,
+  shows,
+  coverage,
+  unionRect,
+  fittingScale,
+  isCoreStep,
+  StoryboardError,
+  parseStoryboard,
+  loadStoryboard,
+  lintStoryboard
+};