@navipartner/demo-video 0.7.0 → 0.7.2

package/dist/runner/index.js

@@ -1,7 +1,12 @@
 import {
   CARD_IN_MS,
   CARD_OUT_MS,
+  COVERED_MAX_MS,
+  COVERED_SETTLED_MS,
+  CURSOR_MAX_MS,
+  CURSOR_MIN_MS,
   DEFAULT_VIEWPORT,
+  ESTABLISH_MS,
   LINGER_MS,
   MIN_SCALE,
   PARK,
@@ -11,15 +16,20 @@ import {
   POST_KEY_MS,
   PRESS_MS,
   PRE_CLICK_MS,
+  REACTION_MS,
+  SETTLED_MS,
   SETTLE_MS,
   STAGE_HEIGHT,
   STAGE_PATH,
   STAGE_WIDTH,
+  STILLS_PATH,
   StoryboardError,
+  TYPE_CHAR_MS,
   ZOOM_MS,
   cardSeconds,
   coverage,
   fittingScale,
+  isBehindCard,
   isCoreStep,
   lintStoryboard,
   loadStoryboard,
@@ -27,10 +37,11 @@ import {
   shows,
   stageHtml,
   stageLayout,
+  titleSeconds,
   unionRect,
   visibleRect,
   wideShot
-} from "../chunk-D7UYGNSF.js";
+} from "../chunk-XMOGUZJU.js";
 
 // src/runner/config.ts
 import path from "path";
@@ -67,8 +78,8 @@ var createDemoConfig = (adapter, demoDir, runnerDir, mode = process.env.DEMO_MOD
 });
 
 // src/runner/register.ts
-import fs3 from "fs";
-import path4 from "path";
+import fs4 from "fs";
+import path5 from "path";
 
 // src/brand.ts
 import fs from "fs";
@@ -249,16 +260,36 @@ var missingNeeds = (brand, needs = {}) => {
   ];
 };
 
+// src/director.ts
+import fs2 from "fs";
+import path3 from "path";
+
 // src/changes.ts
+var MAX_RESTYLES = 3;
 var watchChanges = (target) => target.evaluate((el) => {
-  const changed = /* @__PURE__ */ new Set();
+  const w = window;
+  w.__demoChanges?.observer.disconnect();
+  const changed = /* @__PURE__ */ new Map();
+  const watch = { changed, lastAt: Date.now() };
   const observer = new MutationObserver((records) => {
     for (const record of records) {
+      if (record.type !== "attributes") {
+        watch.lastAt = Date.now();
+      }
       const nodes = record.type === "childList" ? Array.from(record.addedNodes) : [record.target];
       for (const node of nodes) {
         const changedEl = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
         if (changedEl && !el.contains(changedEl) && !changedEl.contains(el)) {
-          changed.add(changedEl);
+          const seen = changed.get(changedEl) ?? {
+            content: false,
+            restyles: 0
+          };
+          if (record.type === "attributes") {
+            seen.restyles++;
+          } else {
+            seen.content = true;
+          }
+          changed.set(changedEl, seen);
         }
       }
     }
@@ -266,14 +297,21 @@ var watchChanges = (target) => target.evaluate((el) => {
   observer.observe(document.body, {
     subtree: true,
     childList: true,
-    characterData: true
+    characterData: true,
+    attributes: true,
+    attributeFilter: ["style", "class", "src"]
   });
-  window.__demoChanges = {
-    observer,
-    changed
-  };
+  watch.observer = observer;
+  w.__demoChanges = watch;
+});
+var watching = (app) => app.evaluate(
+  () => Boolean(window.__demoChanges)
+);
+var quietMs = (app) => app.evaluate(() => {
+  const watch = window.__demoChanges;
+  return watch ? Date.now() - watch.lastAt : Number.POSITIVE_INFINITY;
 });
-var biggestChange = (app) => app.evaluate(() => {
+var biggestChange = (app) => app.evaluate((maxRestyles) => {
   const w = window;
   const watch = w.__demoChanges;
   delete w.__demoChanges;
@@ -282,9 +320,10 @@ var biggestChange = (app) => app.evaluate(() => {
   }
   watch.observer.disconnect();
   let best = null;
+  let bestEl = null;
   let label = "";
-  for (const el of watch.changed) {
-    if (!el.isConnected) {
+  for (const [el, seen] of watch.changed) {
+    if (!el.isConnected || !seen.content && seen.restyles > maxRestyles) {
       continue;
     }
     const r = el.getBoundingClientRect();
@@ -293,16 +332,36 @@ var biggestChange = (app) => app.evaluate(() => {
     }
     if (!best || r.width * r.height > best.width * best.height) {
       best = { x: r.x, y: r.y, width: r.width, height: r.height };
+      bestEl = el;
       label = el.getAttribute("data-testid") ?? el.tagName.toLowerCase() + (el.textContent ? ` "${el.textContent.trim().slice(0, 30)}"` : "");
     }
   }
-  return best ? { rect: best, label } : null;
-});
+  if (!best || !bestEl) {
+    return null;
+  }
+  let fontPx = Number.POSITIVE_INFINITY;
+  const texts = [
+    bestEl,
+    ...Array.from(bestEl.querySelectorAll("*")).slice(0, 200)
+  ];
+  for (const node of texts) {
+    const hasText = Array.from(node.childNodes).some(
+      (c) => c.nodeType === Node.TEXT_NODE && c.textContent?.trim()
+    );
+    if (hasText) {
+      fontPx = Math.min(fontPx, parseFloat(getComputedStyle(node).fontSize));
+    }
+  }
+  return { rect: best, label, fontPx };
+}, MAX_RESTYLES);
 
 // src/director.ts
 var TARGET_TIMEOUT_MS = 15e3;
 var SHOWN = 0.5;
 var FRAME_MAX_SCALE = 1.8;
+var PUSH_WORTHY = 1.4;
+var READABLE_PX = 16;
+var STILL_MAX_PX = 1600;
 var testIdSelector = (selector) => /^[\w-]+$/.test(selector) ? `[data-testid="${selector}"]` : selector;
 var normalise = (text) => text.replace(/\s+/g, " ").trim();
 var sameShot = (a, b) => Math.abs(a.k - b.k) < 1e-3 && Math.abs(a.tx - b.tx) < 1 && Math.abs(a.ty - b.ty) < 1;
@@ -327,6 +386,20 @@ var Director = class {
    * what the click did.
    */
   unseen;
+  /** Behind a card: no cursor, no camera moves, nothing for the viewer. */
+  covered = false;
+  /**
+   * What clicks in the current wide shot used: their controls and what they
+   * changed. When the wide shot ends, all of it must not have fit a push-in.
+   */
+  wideUse = {
+    rects: [],
+    names: [],
+    textPx: Number.POSITIVE_INFINITY
+  };
+  /** When the whole window came into view (virtual ms), for ESTABLISH_MS. */
+  wideSince = 0;
+  cdp;
   get fast() {
     return this.options.fast;
   }
@@ -410,21 +483,39 @@ var Director = class {
   }
   // --- camera -----------------------------------------------------------------
   async zoomTo(t, scale) {
+    this.closeWide();
     const rect = await this.appRect(t);
     const next = shotFor(this.layout, rect, scale);
     this.requireSeen("zoom", next);
     if (sameShot(next, this.shot)) {
       return;
     }
+    this.wasWide = this.isWide();
     this.shot = next;
     this.shotLabel = `the shot on "${t.target}" at ${scale}`;
+    await this.moveCamera(next);
+  }
+  // Films a camera move. A push-in from the wide shot waits until the whole
+  // window has been seen for ESTABLISH_MS: a page never opens zoomed.
+  async moveCamera(shot) {
     if (this.fast) {
       return;
     }
-    await this.page.evaluate((s) => window.__demo.setShot(s), next);
-    await this.wait(ZOOM_MS + SETTLE_MS);
+    const fromWide = this.wasWide;
+    if (fromWide && !this.covered) {
+      await this.wait(ESTABLISH_MS - (this.clockMs() - this.wideSince));
+    }
+    const instant = this.covered;
+    await this.page.evaluate(([s, i]) => window.__demo.setShot(s, i), [
+      shot,
+      instant
+    ]);
+    if (!instant) {
+      await this.wait(ZOOM_MS + SETTLE_MS);
+    }
   }
   async frame(targets, options = {}) {
+    this.closeWide();
     const names = targets.map((t) => `"${t.target}"`).join(" and ");
     for (const t of targets) {
       await this.appRect(t);
@@ -448,7 +539,7 @@ var Director = class {
     );
     if (scale < MIN_SCALE) {
       throw new Error(
-        `${names} only fit in the wide shot (at ${scale.toFixed(2)}); frame things that sit together, or stay wide`
+        `${names} only fit in the wide shot (at ${scale.toFixed(2)}): stay wide, or frame things that sit together`
       );
     }
     const next = shotFor(this.layout, all, scale);
@@ -459,13 +550,10 @@ var Director = class {
     if (sameShot(next, this.shot)) {
       return;
     }
+    this.wasWide = this.isWide();
     this.shot = next;
     this.shotLabel = `the shot framing ${names}`;
-    if (this.fast) {
-      return;
-    }
-    await this.page.evaluate((s) => window.__demo.setShot(s), next);
-    await this.wait(ZOOM_MS + SETTLE_MS);
+    await this.moveCamera(next);
   }
   async zoomOut(options = {}) {
     this.requireSeen("zoomOut");
@@ -488,11 +576,19 @@ var Director = class {
       await this.page.evaluate((s) => window.__demo.setShot(s), wide);
     }
     await this.wait(Math.max(moving ? ZOOM_MS + SETTLE_MS : 0, parkMs));
+    if (moving) {
+      this.wideSince = this.clockMs();
+    }
   }
+  // Whether the camera shows the whole window now.
+  isWide() {
+    return this.shot.k <= this.layout.fit * 1.01;
+  }
+  wasWide = false;
   // --- cursor + input -----------------------------------------------------------
   /** Rests the cursor in empty space, off the content. */
   async park() {
-    if (this.fast) {
+    if (this.fast || this.covered) {
       return;
     }
     const ms = await this.page.evaluate(
@@ -510,28 +606,41 @@ var Director = class {
     const margin = 8;
     if (cx < v.x + margin || cx > v.x + v.width - margin || cy < v.y + margin || cy > v.y + v.height - margin) {
       throw new Error(
-        `"${t.target}" is outside ${this.shotLabel}. Zoom on an area that holds everything this shot uses, or zoomOut first.`
+        `"${t.target}" is outside ${this.shotLabel}: zoomOut first, or frame an area that holds everything this shot uses.`
       );
     }
-    return this.toStagePoint(rect);
+    return { point: this.toStagePoint(rect), rect };
   }
   async click(t, options = {}) {
+    await this.interact(t, { zoom: options.zoom, verb: "clicking" });
+  }
+  // One interaction with a control, as a person makes it: the cursor glides
+  // there and rests, presses (a real click, or only the look of one when an
+  // adapter action does the work), `then` runs (typing, the action), and the
+  // app's reaction plays out. What it changes is watched from before the
+  // press to the end, so typing's live preview, a toast after a save and a
+  // restyle all count as the result. Behind a card none of it is filmed.
+  async interact(t, options) {
     if (options.zoom !== void 0) {
       await this.zoomTo(t, options.zoom);
     } else {
       this.requireSeen("other");
     }
-    const point = await this.pointAt(t);
-    const zoomed = this.shot.k > this.layout.fit * 1.01;
-    if (zoomed) {
+    const { point, rect } = await this.pointAt(t);
+    const filmed = !this.fast && !this.covered;
+    const zoomed = !this.isWide();
+    const inner = await watching(this.app);
+    const fontPx = inner ? Number.NaN : await this.locator(t).evaluate(
+      (el) => parseFloat(getComputedStyle(el).fontSize),
+      void 0,
+      {
+        timeout: 1e3
+      }
+    ).catch(() => Number.NaN);
+    if (!inner) {
       await watchChanges(this.locator(t));
     }
-    if (this.fast) {
-      await this.page.mouse.click(point.x, point.y);
-      if (zoomed) {
-        await this.page.waitForTimeout(POST_CLICK_MS);
-      }
-    } else {
+    if (filmed) {
       const ms = await this.page.evaluate(
         ([x, y]) => window.__demo.cursorTo(x, y),
         [point.x, point.y]
@@ -539,20 +648,87 @@ var Director = class {
       await this.wait(ms);
       await this.page.mouse.move(point.x, point.y);
       await this.wait(PRE_CLICK_MS);
+    }
+    if (options.press === "look") {
+      await this.wait(PRESS_MS);
+    } else if (filmed) {
       await this.page.mouse.down();
       await this.wait(PRESS_MS);
       await this.page.mouse.up();
+    } else {
+      await this.page.mouse.click(point.x, point.y);
+    }
+    await options.then?.();
+    if (this.covered) {
+      await this.settle(COVERED_SETTLED_MS, COVERED_MAX_MS);
+      if (!inner) {
+        await biggestChange(this.app);
+      }
+      return;
+    }
+    if (filmed) {
       await this.wait(POST_CLICK_MS);
+    } else {
+      await this.page.waitForTimeout(POST_CLICK_MS);
+    }
+    await this.settle(SETTLED_MS, REACTION_MS);
+    if (inner) {
+      return;
     }
     if (zoomed) {
-      await this.assertChangeInShot(t);
+      await this.assertChangeInShot(t, options.verb);
+      return;
+    }
+    const biggest = await biggestChange(this.app);
+    this.wideUse.rects.push(rect, ...biggest ? [biggest.rect] : []);
+    this.wideUse.names.push(t.target);
+    const smallest = Math.min(
+      Number.isFinite(fontPx) ? fontPx : Number.POSITIVE_INFINITY,
+      biggest?.fontPx ?? Number.POSITIVE_INFINITY
+    );
+    if (Number.isFinite(smallest)) {
+      this.wideUse.textPx = Math.min(
+        this.wideUse.textPx,
+        smallest * this.layout.fit
+      );
+    }
+  }
+  // Until nothing in the app has changed for `quiet` ms, at most `max` ms:
+  // filmed on the virtual clock, in real time in check.
+  async settle(quiet, max) {
+    for (let waited = 0; waited < max; waited += POLL_MS) {
+      if (await quietMs(this.app) >= quiet) {
+        return;
+      }
+      if (this.fast) {
+        await this.page.waitForTimeout(POLL_MS);
+      } else {
+        await this.wait(POLL_MS);
+      }
+    }
+  }
+  // The wide shot ends (a push-in, a card, the end). Its clicks must have
+  // needed it: if their controls and results all fit a push-in, the wide
+  // shot showed them too small to read on a phone.
+  closeWide() {
+    const { rects, names, textPx } = this.wideUse;
+    this.wideUse = { rects: [], names: [], textPx: Number.POSITIVE_INFINITY };
+    if (names.length === 0 || textPx >= READABLE_PX) {
+      return;
+    }
+    const scale = fittingScale(this.layout, unionRect(rects));
+    if (scale >= PUSH_WORTHY) {
+      const used = [...new Set(names)].map((n) => `"${n}"`).join(", ");
+      throw new Error(
+        `${used} ${names.length > 1 ? "are" : "is"} used in the wide shot, where its text is ${Math.round(textPx)} px, too small to read, and the controls with what they change fit a push-in at ${Math.min(scale, FRAME_MAX_SCALE).toFixed(1)}: frame them (the engine pushes in after a wide beat), or do it behindCard if it's setup`
+      );
     }
   }
   // A zoomed shot is about what the click does. If the biggest thing the
   // click changed lands outside the shot (an item added to a basket
   // off-screen), the zoom is on the wrong area: the viewer would see a
   // button pressed and nothing happen.
-  async assertChangeInShot(t) {
+  async assertChangeInShot(t, verb) {
     const biggest = await biggestChange(this.app);
     if (!biggest) {
       return;
@@ -560,7 +736,7 @@ var Director = class {
     if (coverage(biggest.rect, visibleRect(this.layout, this.shot)) < SHOWN) {
       this.unseen = {
         rect: biggest.rect,
-        message: `clicking "${t.target}" changes ${biggest.label}, which is outside ${this.shotLabel}, and the next step doesn't show it. Frame what the click changes, or pull out right after.`
+        message: `${verb} "${t.target}" changes ${biggest.label}, which is outside ${this.shotLabel}, and the next step doesn't show it: zoomOut right after, or frame the control with what it changes.`
       };
     }
   }
@@ -579,17 +755,34 @@ var Director = class {
     }
     throw new Error(unseen.message);
   }
-  async type(t, text, perCharMs = 70) {
-    await this.click(t);
-    if (this.fast) {
-      await this.page.keyboard.type(text);
-      return;
-    }
-    for (const char of text) {
-      await this.page.keyboard.type(char);
-      await this.wait(perCharMs);
-    }
-    await this.wait(POST_KEY_MS);
+  async type(t, text, perCharMs = TYPE_CHAR_MS, options = {}) {
+    await this.interact(t, {
+      verb: "typing in",
+      then: async () => {
+        if (options.replace) {
+          await this.page.keyboard.press("ControlOrMeta+A");
+        } else {
+          await this.app.evaluate(() => {
+            const el = document.activeElement;
+            if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+              try {
+                el.setSelectionRange(el.value.length, el.value.length);
+              } catch {
+              }
+            }
+          });
+        }
+        if (this.fast || this.covered) {
+          await this.page.keyboard.type(text);
+          return;
+        }
+        await this.wait(POST_KEY_MS);
+        for (const char of text) {
+          await this.page.keyboard.type(char);
+          await this.wait(perCharMs);
+        }
+      }
+    });
   }
   async press(key) {
     this.requireSeen("other");
@@ -603,14 +796,24 @@ var Director = class {
   /** After the last step: a zoomed click's change must have been shown. */
   end() {
     this.requireSeen("other");
+    this.closeWide();
   }
-  async during(work) {
-    this.requireSeen("other");
+  async during(work, options = {}) {
     const recorder = this.options.recorder;
-    if (this.fast || !recorder) {
-      return work();
+    const run = () => this.fast || !recorder ? work() : recorder.during(work());
+    if (options.target) {
+      let result2;
+      await this.interact(options.target, {
+        verb: "using",
+        press: "look",
+        then: async () => {
+          result2 = await run();
+        }
+      });
+      return result2;
     }
-    const result = await recorder.during(work());
+    this.requireSeen("other");
+    const result = await run();
     await this.wait(POST_ACTION_MS);
     return result;
   }
@@ -651,24 +854,85 @@ var Director = class {
   // --- overlays --------------------------------------------------------------------
   async card(spec, options = {}) {
     this.requireSeen("other");
+    this.closeWide();
     this.shot = wideShot(this.layout);
     this.shotLabel = "the wide shot";
     if (this.fast) {
+      await this.behind(options.behind);
       return;
     }
-    await this.showCard(spec);
-    await this.wait(CARD_IN_MS);
+    if (!options.opening) {
+      await this.showCard(spec);
+      await this.wait(CARD_IN_MS);
+    }
     await this.page.evaluate(() => {
       window.__demo.resetCamera();
       window.__demo.parkNow();
     });
     await this.page.mouse.move(PARK.x, PARK.y);
-    await this.wait(cardSeconds(spec) * 1e3);
+    const started = this.clockMs();
+    await this.behind(options.behind);
+    await this.page.mouse.move(PARK.x, PARK.y);
+    const readMs = (options.opening ? titleSeconds(spec, options.kind) : cardSeconds(spec)) * 1e3;
+    await this.wait(readMs - (this.clockMs() - started));
     if (!options.keepUp) {
       await this.hideCard();
       await this.wait(CARD_OUT_MS);
+      this.wideSince = this.clockMs();
     }
   }
+  async behind(work) {
+    if (!work) {
+      return;
+    }
+    this.covered = true;
+    try {
+      await work();
+    } finally {
+      this.covered = false;
+    }
+  }
+  async capture(t, file) {
+    const locator = this.locator(t);
+    if (!await locator.isVisible().catch(() => false)) {
+      return false;
+    }
+    const r = await this.readRect(locator);
+    const { width, height } = this.layout.viewport;
+    const x0 = Math.max(0, r.x);
+    const y0 = Math.max(0, r.y);
+    const x1 = Math.min(width, r.x + r.width);
+    const y1 = Math.min(height, r.y + r.height);
+    if (x1 - x0 < 1 || y1 - y0 < 1) {
+      return false;
+    }
+    const shot = this.fast ? wideShot(this.layout) : this.shot;
+    const k = shot.k;
+    const left = Math.ceil(this.layout.left + shot.tx + k * x0);
+    const top = Math.ceil(this.layout.top + shot.ty + k * y0);
+    const right = Math.floor(this.layout.left + shot.tx + k * x1);
+    const bottom = Math.floor(this.layout.top + shot.ty + k * y1);
+    if (right - left < 1 || bottom - top < 1) {
+      return false;
+    }
+    this.cdp ??= await this.page.context().newCDPSession(this.page);
+    const { data } = await this.cdp.send("Page.captureScreenshot", {
+      format: "png",
+      clip: {
+        x: left,
+        y: top,
+        width: right - left,
+        height: bottom - top,
+        scale: Math.min(
+          2 / k,
+          STILL_MAX_PX / Math.max(right - left, bottom - top)
+        )
+      }
+    });
+    fs2.mkdirSync(path3.dirname(file), { recursive: true });
+    fs2.writeFileSync(file, Buffer.from(data, "base64"));
+    return true;
+  }
   /** `instant` puts the card up with no dissolve (the video's first frame). */
   async showCard(spec, instant = false) {
     if (!this.fast) {
@@ -698,10 +962,367 @@ var Director = class {
   }
 };
 
+// src/run.ts
+var CAMERA_MOVE_MS = ZOOM_MS + SETTLE_MS;
+var CARD_DISSOLVE_MS = CARD_IN_MS + CARD_OUT_MS;
+var IDLE_MARGIN_MS = 1e4;
+var INTERACTIONS = /* @__PURE__ */ new Set(["click", "type", "press"]);
+var CAMERA_MOVES = /* @__PURE__ */ new Set(["zoom", "frame", "zoomOut"]);
+var describeTarget = (t) => typeof t === "string" ? t : typeof t === "object" && t !== null && "target" in t ? `${String(t.target)}${"nth" in t && typeof t.nth === "number" ? `[${t.nth}]` : ""}` : "";
+var describeStep = (step) => {
+  if ("targets" in step && Array.isArray(step.targets)) {
+    return `${step.do} ${step.targets.map(describeTarget).join(" + ")}`;
+  }
+  const target = "target" in step ? describeTarget(step) : "";
+  return `${step.do}${target ? ` ${target}` : ""}`;
+};
+var StepError = class extends Error {
+  constructor(index, step, reason, visible) {
+    super(`Step ${index + 1} (${describeStep(step)}) failed: ${reason}`);
+    this.index = index;
+    this.step = step;
+    this.reason = reason;
+    this.visible = visible;
+  }
+  index;
+  step;
+  reason;
+  visible;
+};
+var reasonOf = (cause) => {
+  if (cause && typeof cause === "object" && "issues" in cause && Array.isArray(cause.issues)) {
+    return cause.issues.map((i) => `${i.path.join(".") || "(params)"}: ${i.message}`).join("; ");
+  }
+  const text = cause instanceof Error ? cause.message : String(cause);
+  return text.split("\n")[0].trim();
+};
+var runStep = async (d, step, adapter) => {
+  if (isCoreStep(step)) {
+    switch (step.do) {
+      case "click":
+        return d.click(step, { zoom: step.zoom });
+      case "type":
+        return d.type(step, step.text, step.perCharMs, {
+          replace: step.replace
+        });
+      case "press":
+        return d.press(step.key);
+      case "zoom":
+        return d.zoomTo(step, step.scale);
+      case "frame":
+        return d.frame(
+          step.targets.map((t) => typeof t === "string" ? { target: t } : t),
+          { maxScale: step.maxScale }
+        );
+      case "zoomOut":
+        return d.zoomOut({ park: step.park });
+      case "park":
+        return d.park();
+      case "waitFor":
+        return d.waitFor(step, {
+          hidden: step.hidden,
+          timeoutMs: step.timeout * 1e3
+        });
+      case "expectText":
+        return d.expectText(step, step.text, {
+          contains: step.contains,
+          timeoutMs: step.timeout * 1e3
+        });
+      case "hold":
+        return d.hold(step.seconds * 1e3);
+      case "card":
+        throw new Error("a card is run by runSteps, not runStep");
+    }
+  }
+  const action = adapter.actions?.[step.do];
+  if (!action) {
+    throw new Error(`unknown step "${step.do}"`);
+  }
+  const params = Object.fromEntries(
+    Object.entries(step).filter(
+      ([key]) => key !== "do" && key !== "behindCard"
+    )
+  );
+  const parsed = action.params.parse(params);
+  const target = action.target?.(parsed);
+  await d.during(
+    () => action.run(d, parsed),
+    target === void 0 ? void 0 : { target: toTarget(target) }
+  );
+};
+var needsLinger = (previous) => previous !== void 0 && previous.do !== "hold" && previous.do !== "card" && !isBehindCard(previous);
+var TITLE = -1;
+var planCards = (steps, hasTitle) => {
+  const plans = /* @__PURE__ */ new Map();
+  const starts = [
+    ...hasTitle ? [TITLE] : [],
+    ...steps.flatMap((s, i) => s.do === "card" ? [i] : [])
+  ];
+  for (const start of starts) {
+    const behind = [];
+    let j = start + 1;
+    while (j < steps.length && isBehindCard(steps[j])) {
+      behind.push(j++);
+    }
+    plans.set(start, {
+      behind,
+      opens: j < steps.length && steps[j].do !== "card"
+    });
+  }
+  [...plans.entries()].filter(([at, plan]) => at !== TITLE && plan.opens).forEach(([, plan], n) => {
+    plan.chapter = n + 1;
+  });
+  return plans;
+};
+var toTarget = (t) => typeof t === "string" ? { target: t } : t;
+var cardSpecFor = (card, plan, still) => ({
+  eyebrow: card.eyebrow,
+  heading: card.heading,
+  sub: card.sub,
+  logo: card.logo,
+  seconds: card.seconds,
+  style: card.style ?? (plan?.chapter !== void 0 && plan.chapter % 2 === 0 ? "brand" : "pale"),
+  ...still ? { still } : {}
+});
+var stillCards = (steps, title) => [
+  ...title?.show !== void 0 ? [TITLE] : [],
+  ...steps.flatMap(
+    (s, i) => s.do === "card" && s.show !== void 0 ? [i] : []
+  )
+];
+var WAITS = /* @__PURE__ */ new Set(["waitFor", "expectText"]);
+var runSteps = async (d, steps, adapter, options = {}) => {
+  const idleLimitMs = adapter.idleTimeoutSeconds ? adapter.idleTimeoutSeconds * 1e3 - IDLE_MARGIN_MS : Number.POSITIVE_INFINITY;
+  let quietMs2 = options.initialQuietMs ?? 0;
+  const tooQuiet = () => new Error(
+    `the app would sit untouched for ${Math.round(quietMs2 / 1e3)} s; its idle timeout is ${adapter.idleTimeoutSeconds} s. Add an interaction or shorten the holds.`
+  );
+  const plans = planCards(steps, Boolean(options.title));
+  const covered = new Set([...plans.values()].flatMap((p) => p.behind));
+  let pending;
+  const hero = options.title?.show && options.stillFile ? { target: toTarget(options.title.show), seen: false } : void 0;
+  const fail = async (index, cause) => {
+    if (cause instanceof StepError) {
+      throw cause;
+    }
+    const visible = await d.visibleTestIds().catch(() => []);
+    throw new StepError(index, steps[index], reasonOf(cause), visible);
+  };
+  const settlePending = async () => {
+    const was = pending;
+    pending = void 0;
+    if (was && !was.seen) {
+      await fail(
+        was.card,
+        new Error(
+          `"${was.target.target}" (show) never appears in the chapter after this card, so there is no still to put on it`
+        )
+      );
+    }
+  };
+  const runCard = async (at) => {
+    const plan = plans.get(at);
+    const card = at === TITLE ? options.title : steps[at];
+    const show = card.show ? toTarget(card.show) : void 0;
+    if (show && options.stillFile && at !== TITLE) {
+      if (plan?.opens) {
+        pending = { card: at, target: show, seen: false };
+      } else if (!await d.capture(show, options.stillFile(at))) {
+        throw new Error(
+          `"${show.target}" (show) isn't on screen when this card comes up`
+        );
+      }
+    }
+    const behind = plan?.behind ?? [];
+    const last = behind.at(-1) ?? at;
+    const next = steps[last + 1] ?? (last === steps.length - 1 && options.keepLastCardUp ? { do: "card" } : void 0);
+    await d.card(
+      cardSpecFor(
+        card,
+        plan,
+        show && options.stillUrl ? options.stillUrl(at) : void 0
+      ),
+      {
+        keepUp: next?.do === "card",
+        opening: at === TITLE,
+        kind: options.kind,
+        behind: behind.length ? async () => {
+          for (const index of behind) {
+            await runOne(index);
+          }
+        } : void 0
+      }
+    );
+  };
+  const runOne = async (index) => {
+    const step = steps[index];
+    if (step.do === "card") {
+      await settlePending();
+    }
+    try {
+      const linger = step.do === "card" && needsLinger(steps[index - 1]);
+      if (step.do === "hold" || step.do === "card" || CAMERA_MOVES.has(step.do) && !covered.has(index)) {
+        quietMs2 += step.do === "hold" ? Number(step.seconds) * 1e3 : step.do === "card" ? cardSeconds(step) * 1e3 + CARD_DISSOLVE_MS + (linger ? LINGER_MS : 0) : CAMERA_MOVE_MS;
+        if (quietMs2 > idleLimitMs) {
+          throw tooQuiet();
+        }
+      }
+      if (linger) {
+        await d.hold(LINGER_MS);
+      }
+      const started = d.clockMs();
+      if (step.do === "card") {
+        await runCard(index);
+      } else {
+        await runStep(d, step, adapter);
+      }
+      if (WAITS.has(step.do)) {
+        quietMs2 += d.clockMs() - started;
+        if (quietMs2 > idleLimitMs) {
+          throw tooQuiet();
+        }
+      }
+      if (INTERACTIONS.has(step.do) || adapter.actions?.[step.do]) {
+        quietMs2 = 0;
+      }
+    } catch (cause) {
+      await fail(index, cause);
+    }
+    if (pending && step.do !== "card" && options.stillFile) {
+      const seen = await d.capture(
+        pending.target,
+        options.stillFile(pending.card)
+      );
+      pending.seen ||= seen;
+    }
+    if (hero && step.do !== "card" && options.stillFile) {
+      hero.seen ||= await d.capture(hero.target, options.stillFile(TITLE));
+    }
+  };
+  if (options.title) {
+    quietMs2 += titleSeconds(options.title, options.kind) * 1e3 + CARD_OUT_MS;
+    await runCard(TITLE);
+  }
+  for (const index of steps.keys()) {
+    if (!covered.has(index)) {
+      await runOne(index);
+    }
+  }
+  await settlePending();
+  if (hero && !hero.seen) {
+    throw new Error(
+      `title.show: "${hero.target.target}" never appears in the story, so the open card has no snapshot`
+    );
+  }
+};
+
+// src/estimate.ts
+var CURSOR_MS = (CURSOR_MIN_MS + CURSOR_MAX_MS) / 2;
+var CLICK_MS = CURSOR_MS + PRE_CLICK_MS + PRESS_MS + POST_CLICK_MS;
+var CAMERA_MS = ZOOM_MS + SETTLE_MS;
+var stepMs = (step) => {
+  const s = step;
+  switch (step.do) {
+    case "click":
+      return CLICK_MS + (s.zoom !== void 0 ? CAMERA_MS : 0);
+    case "type":
+      return CLICK_MS + String(s.text).length * Number(s.perCharMs ?? TYPE_CHAR_MS) + POST_KEY_MS;
+    case "press":
+      return POST_KEY_MS;
+    case "zoom":
+    case "frame":
+    case "zoomOut":
+      return CAMERA_MS;
+    case "park":
+      return CURSOR_MS;
+    case "hold":
+      return Number(s.seconds) * 1e3;
+    case "waitFor":
+    case "expectText":
+      return 0;
+    default:
+      return POST_ACTION_MS + CURSOR_MS;
+  }
+};
+var estimateSeconds = (story) => Math.round(estimateMs(story) / 1e3);
+var estimateMs = (story) => {
+  const steps = story.steps;
+  const plans = planCards(steps, Boolean(story.title));
+  const covered = new Set([...plans.values()].flatMap((p) => p.behind));
+  const after = (at) => steps[(plans.get(at)?.behind.at(-1) ?? at) + 1];
+  let ms = 0;
+  let wideAt = 0;
+  if (story.title) {
+    ms += titleSeconds(story.title, story.kind) * 1e3;
+    ms += after(TITLE)?.do === "card" ? 0 : CARD_OUT_MS;
+    wideAt = ms;
+  }
+  steps.forEach((step, i) => {
+    if (covered.has(i)) {
+      return;
+    }
+    if (step.do !== "card") {
+      const pushes = step.do === "zoom" || step.do === "frame" || step.do === "click" && step.zoom !== void 0;
+      if (pushes && wideAt !== null) {
+        ms += Math.max(0, ESTABLISH_MS - (ms - wideAt));
+        wideAt = null;
+      }
+      ms += stepMs(step);
+      if (step.do === "zoomOut") {
+        wideAt = ms;
+      }
+      return;
+    }
+    const previous = steps[i - 1];
+    const linger = previous !== void 0 && previous.do !== "hold" && previous.do !== "card" && !isBehindCard(previous);
+    ms += (linger ? LINGER_MS : 0) + CARD_IN_MS;
+    ms += cardSeconds(step) * 1e3;
+    ms += after(i)?.do === "card" || !after(i) && story.closing ? 0 : CARD_OUT_MS;
+    wideAt = ms;
+  });
+  if (story.closing) {
+    const last = steps.at(-1)?.do;
+    ms += last !== "card" && last !== "hold" ? LINGER_MS : 0;
+    ms += CARD_IN_MS + titleSeconds(story.closing, story.kind) * 1e3;
+  }
+  return ms;
+};
+var COVERED_STEP_MS = {
+  click: 300,
+  type: 350,
+  press: 100,
+  waitFor: 200
+};
+var COVERED_ACTION_MS = 500;
+var slowCards = (story) => {
+  const steps = story.steps;
+  const plans = planCards(steps, Boolean(story.title));
+  const slow = [];
+  for (const [at, plan] of plans) {
+    const card = at === TITLE ? story.title : steps[at];
+    if (!card || plan.behind.length === 0) {
+      continue;
+    }
+    const setupMs = plan.behind.reduce(
+      (sum, i) => sum + (COVERED_STEP_MS[steps[i].do] ?? COVERED_ACTION_MS),
+      0
+    );
+    const readSeconds = at === TITLE ? titleSeconds(card, story.kind) : cardSeconds(card);
+    if (setupMs / 1e3 > readSeconds + 0.3) {
+      slow.push({
+        where: at === TITLE ? "title" : `steps.${at}`,
+        readSeconds,
+        setupSeconds: Math.round(setupMs / 100) / 10
+      });
+    }
+  }
+  return slow;
+};
+
 // src/frames.ts
 import { spawn } from "child_process";
-import fs2 from "fs";
-import path3 from "path";
+import fs3 from "fs";
+import path4 from "path";
 import ffmpegPath from "ffmpeg-static";
 var FPS = 60;
 var DRAFT_FPS = 30;
@@ -712,8 +1333,8 @@ var FrameRecorder = class {
     this.workDir = workDir;
     this.stem = stem;
     this.fps = fps;
-    this.rawDir = path3.join(workDir, "raw");
-    this.videoPath = path3.join(this.rawDir, "stage.mkv");
+    this.rawDir = path4.join(workDir, "raw");
+    this.videoPath = path4.join(this.rawDir, "stage.mkv");
   }
   page;
   workDir;
@@ -748,13 +1369,13 @@ var FrameRecorder = class {
   }
   /** Starts writing frames. Time advanced before this is not filmed. */
   start() {
-    if (!ffmpegPath || !fs2.existsSync(ffmpegPath)) {
+    if (!ffmpegPath || !fs3.existsSync(ffmpegPath)) {
       throw new Error(
         "ffmpeg-static has no binary; with pnpm >= 10, allow its install script (onlyBuiltDependencies) and reinstall."
       );
     }
-    fs2.rmSync(this.rawDir, { recursive: true, force: true });
-    fs2.mkdirSync(this.rawDir, { recursive: true });
+    fs3.rmSync(this.rawDir, { recursive: true, force: true });
+    fs3.mkdirSync(this.rawDir, { recursive: true });
     const ffmpeg = spawn(
       ffmpegPath,
       [
@@ -963,138 +1584,14 @@ var FrameRecorder = class {
       endAt: null,
       storyboard: this.stem
     };
-    fs2.writeFileSync(
-      path3.join(this.workDir, "manifest.json"),
+    fs3.writeFileSync(
+      path4.join(this.workDir, "manifest.json"),
       JSON.stringify(manifest, null, 2)
     );
     return manifest;
   }
 };
 
-// src/run.ts
-var CAMERA_MOVE_MS = ZOOM_MS + SETTLE_MS;
-var CARD_DISSOLVE_MS = CARD_IN_MS + CARD_OUT_MS;
-var IDLE_MARGIN_MS = 1e4;
-var INTERACTIONS = /* @__PURE__ */ new Set(["click", "type", "press"]);
-var CAMERA_MOVES = /* @__PURE__ */ new Set(["zoom", "frame", "zoomOut"]);
-var describeTarget = (t) => typeof t === "string" ? t : typeof t === "object" && t !== null && "target" in t ? `${String(t.target)}${"nth" in t && typeof t.nth === "number" ? `[${t.nth}]` : ""}` : "";
-var describeStep = (step) => {
-  if ("targets" in step && Array.isArray(step.targets)) {
-    return `${step.do} ${step.targets.map(describeTarget).join(" + ")}`;
-  }
-  const target = "target" in step ? describeTarget(step) : "";
-  return `${step.do}${target ? ` ${target}` : ""}`;
-};
-var StepError = class extends Error {
-  constructor(index, step, reason, visible) {
-    super(`Step ${index + 1} (${describeStep(step)}) failed: ${reason}`);
-    this.index = index;
-    this.step = step;
-    this.reason = reason;
-    this.visible = visible;
-  }
-  index;
-  step;
-  reason;
-  visible;
-};
-var reasonOf = (cause) => {
-  if (cause && typeof cause === "object" && "issues" in cause && Array.isArray(cause.issues)) {
-    return cause.issues.map((i) => `${i.path.join(".") || "(params)"}: ${i.message}`).join("; ");
-  }
-  const text = cause instanceof Error ? cause.message : String(cause);
-  return text.split("\n")[0].trim();
-};
-var runStep = async (d, step, adapter, next) => {
-  if (isCoreStep(step)) {
-    switch (step.do) {
-      case "click":
-        return d.click(step, { zoom: step.zoom });
-      case "type":
-        return d.type(step, step.text, step.perCharMs);
-      case "press":
-        return d.press(step.key);
-      case "zoom":
-        return d.zoomTo(step, step.scale);
-      case "frame":
-        return d.frame(
-          step.targets.map((t) => typeof t === "string" ? { target: t } : t),
-          { maxScale: step.maxScale }
-        );
-      case "zoomOut":
-        return d.zoomOut({ park: step.park });
-      case "park":
-        return d.park();
-      case "waitFor":
-        return d.waitFor(step, {
-          hidden: step.hidden,
-          timeoutMs: step.timeout * 1e3
-        });
-      case "expectText":
-        return d.expectText(step, step.text, {
-          contains: step.contains,
-          timeoutMs: step.timeout * 1e3
-        });
-      case "hold":
-        return d.hold(step.seconds * 1e3);
-      case "card":
-        return d.card(step, { keepUp: next?.do === "card" });
-    }
-  }
-  const action = adapter.actions?.[step.do];
-  if (!action) {
-    throw new Error(`unknown step "${step.do}"`);
-  }
-  const params = Object.fromEntries(
-    Object.entries(step).filter(([key]) => key !== "do")
-  );
-  const parsed = action.params.parse(params);
-  await d.during(() => action.run(d, parsed));
-};
-var needsLinger = (previous) => previous !== void 0 && previous.do !== "hold" && previous.do !== "card";
-var WAITS = /* @__PURE__ */ new Set(["waitFor", "expectText"]);
-var runSteps = async (d, steps, adapter, options = {}) => {
-  const idleLimitMs = adapter.idleTimeoutSeconds ? adapter.idleTimeoutSeconds * 1e3 - IDLE_MARGIN_MS : Number.POSITIVE_INFINITY;
-  let quietMs = options.initialQuietMs ?? 0;
-  const tooQuiet = () => new Error(
-    `the app would sit untouched for ${Math.round(quietMs / 1e3)} s; its idle timeout is ${adapter.idleTimeoutSeconds} s. Add an interaction or shorten the holds.`
-  );
-  for (const [index, step] of steps.entries()) {
-    try {
-      const linger = step.do === "card" && needsLinger(steps[index - 1]);
-      if (step.do === "hold" || step.do === "card" || CAMERA_MOVES.has(step.do)) {
-        quietMs += step.do === "hold" ? Number(step.seconds) * 1e3 : step.do === "card" ? cardSeconds(step) * 1e3 + CARD_DISSOLVE_MS + (linger ? LINGER_MS : 0) : CAMERA_MOVE_MS;
-        if (quietMs > idleLimitMs) {
-          throw tooQuiet();
-        }
-      }
-      if (linger) {
-        await d.hold(LINGER_MS);
-      }
-      const isLast = index === steps.length - 1;
-      const started = d.clockMs();
-      await runStep(
-        d,
-        step,
-        adapter,
-        steps[index + 1] ?? (isLast && options.keepLastCardUp ? { do: "card" } : void 0)
-      );
-      if (WAITS.has(step.do)) {
-        quietMs += d.clockMs() - started;
-        if (quietMs > idleLimitMs) {
-          throw tooQuiet();
-        }
-      }
-      if (INTERACTIONS.has(step.do) || adapter.actions?.[step.do]) {
-        quietMs = 0;
-      }
-    } catch (cause) {
-      const visible = await d.visibleTestIds().catch(() => []);
-      throw new StepError(index, step, reasonOf(cause), visible);
-    }
-  }
-};
-
 // src/runner/env.ts
 var readRunEnv = (env = process.env) => {
   const storyboardPath = env.DEMO_STORYBOARD;
@@ -1111,7 +1608,8 @@ var readRunEnv = (env = process.env) => {
     workDir: env.DEMO_WORK || `${outDir}/.work`,
     brand: env.DEMO_BRAND || void 0,
     brandsDir: env.DEMO_BRANDS || void 0,
-    draft: env.DEMO_DRAFT === "1"
+    draft: env.DEMO_DRAFT === "1",
+    stillsDir: env.DEMO_STILLS || void 0
   };
 };
 
@@ -1156,20 +1654,20 @@ var bootFailure = (adapter, frameUrl, headers, cause) => {
   return `The app didn't get ready: ${reason}. Check that the adapter's setup mocks what the app calls at start, and that "${adapter.ready}" is shown once it booted.`;
 };
 var writeJson = (file, value) => {
-  fs3.mkdirSync(path4.dirname(file), { recursive: true });
-  fs3.writeFileSync(file, JSON.stringify(value, null, 2));
+  fs4.mkdirSync(path5.dirname(file), { recursive: true });
+  fs4.writeFileSync(file, JSON.stringify(value, null, 2));
 };
 var registerDemoTests = (test, adapter, demoDir) => {
   if (process.env.DEMO_MODE === "needs") {
     test("demo", async () => {
-      writeJson(path4.join(process.env.DEMO_WORK ?? demoDir, "needs.json"), {
+      writeJson(path5.join(process.env.DEMO_WORK ?? demoDir, "needs.json"), {
         app: adapter.app,
         viewport: adapter.viewport ?? DEFAULT_VIEWPORT,
         video: VIDEO_NEEDS,
         appNeeds: describeNeeds(adapter.brandNeeds),
         example: JSON.parse(
-          fs3.readFileSync(
-            path4.join(sharedBrandsDir(), "navipartner.json"),
+          fs4.readFileSync(
+            path5.join(sharedBrandsDir(), "navipartner.json"),
             "utf8"
           )
         )
@@ -1180,10 +1678,16 @@ var registerDemoTests = (test, adapter, demoDir) => {
   test("demo", async ({ page }) => {
     const env = readRunEnv();
     if (env.mode === "check") {
-      const reportPath = path4.join(env.workDir, "check.json");
+      const reportPath = path5.join(env.workDir, "check.json");
       try {
-        const steps = await perform(page, env);
-        writeJson(reportPath, { ok: true, steps });
+        const story = await perform(page, env);
+        writeJson(reportPath, {
+          ok: true,
+          steps: story.steps.length,
+          kind: story.kind ?? "showcase",
+          seconds: estimateSeconds(story),
+          slowCards: slowCards(story)
+        });
       } catch (error) {
         writeJson(reportPath, failureReport(error));
         throw error;
@@ -1198,7 +1702,7 @@ var registerDemoTests = (test, adapter, demoDir) => {
     if (issues.length > 0) {
       throw new StoryboardError(
         [
-          `${path4.basename(env.storyboardPath)} won't film well:`,
+          `${path5.basename(env.storyboardPath)} won't film well:`,
           ...issues.map((i) => `  ${i}`)
         ].join("\n")
       );
@@ -1235,6 +1739,31 @@ var registerDemoTests = (test, adapter, demoDir) => {
       })
     );
     const fast = env.mode === "check";
+    const stillsDir = env.stillsDir ?? path5.join(env.workDir, "stills");
+    const stillName = (index) => index === TITLE ? "card-title.png" : `card-${index}.png`;
+    const stillFile = (index) => path5.join(stillsDir, stillName(index));
+    const stillUrl = (index) => `${STILLS_PATH}/${stillName(index)}`;
+    const stills = stillCards(storyboard.steps, storyboard.title);
+    if (!fast && stills.length > 0) {
+      const missing2 = stills.filter((i) => !fs4.existsSync(stillFile(i)));
+      if (missing2.length > 0) {
+        throw new Error(
+          `No still for the card at ${missing2.map((i) => i === TITLE ? "title" : `steps.${i}`).join(", ")}: render the story with the demo-video CLI, which checks it first and captures them`
+        );
+      }
+      await page.route(
+        `**${STILLS_PATH}/*`,
+        (route) => route.fulfill({
+          contentType: "image/png",
+          body: fs4.readFileSync(
+            path5.join(
+              stillsDir,
+              path5.basename(new URL(route.request().url()).pathname)
+            )
+          )
+        })
+      );
+    }
     if (!fast) {
       await FrameRecorder.prepare(page);
     }
@@ -1262,39 +1791,44 @@ var registerDemoTests = (test, adapter, demoDir) => {
         cause: error
       });
     }
+    const title = storyboard.title;
     if (fast) {
-      await runSteps(boot, storyboard.steps, adapter);
+      await runSteps(boot, storyboard.steps, adapter, {
+        title,
+        kind: storyboard.kind,
+        ...stills.length > 0 ? { stillFile } : {}
+      });
       boot.end();
-      return storyboard.steps.length;
+      return storyboard;
     }
     await page.evaluate(() => document.fonts.ready.then(() => void 0));
     await frame.evaluate(() => document.fonts.ready.then(() => void 0));
+    await page.evaluate(
+      (urls) => window.__demo.preload(urls),
+      stills.map(stillUrl)
+    );
     await page.waitForTimeout(300);
     const recorder = new FrameRecorder(
       page,
       env.workDir,
-      `${path4.basename(env.storyboardPath, ".json")}-${brand.name}${env.draft ? "-draft" : ""}`,
+      `${path5.basename(env.storyboardPath, ".json")}-${brand.name}${env.draft ? "-draft" : ""}`,
       env.draft ? DRAFT_FPS : FPS
     );
     await recorder.freeze();
     const d = new Director(page, frame, { fast: false, viewport, recorder });
-    const title = storyboard.title;
     if (title) {
-      await d.showCard(title, true);
+      await d.showCard(
+        cardSpecFor(title, void 0, title.show ? stillUrl(TITLE) : void 0),
+        true
+      );
     }
     recorder.start();
-    if (title) {
-      await recorder.advance(cardSeconds(title) * 1e3);
-      if (storyboard.steps[0]?.do !== "card") {
-        await d.hideCard();
-        await recorder.advance(CARD_OUT_MS);
-      }
-    }
     const closing = storyboard.closing;
     await runSteps(d, storyboard.steps, adapter, {
-      // Booted, the title card and its dissolve.
-      initialQuietMs: title ? cardSeconds(title) * 1e3 + CARD_OUT_MS : 0,
-      keepLastCardUp: Boolean(closing)
+      title,
+      kind: storyboard.kind,
+      keepLastCardUp: Boolean(closing),
+      stillUrl
     });
     d.end();
     if (closing) {
@@ -1303,11 +1837,13 @@ var registerDemoTests = (test, adapter, demoDir) => {
         await recorder.advance(LINGER_MS);
       }
       await d.showCard(closing);
-      await recorder.advance(CARD_IN_MS + cardSeconds(closing) * 1e3);
+      await recorder.advance(
+        CARD_IN_MS + titleSeconds(closing, storyboard.kind) * 1e3
+      );
     }
     await recorder.advance(300);
     await recorder.stop();
-    return storyboard.steps.length;
+    return storyboard;
   };
 };
 export {