@navipartner/demo-video 0.0.0-stage → 0.4.0

package/bin/pick.mjs

@@ -0,0 +1,252 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { listStories } from "./args.mjs";
+
+// `demo-video pick`: turns a `/demo-video …` request into one of the
+// already-made stories and a brand. No AI and nothing written: stories are a
+// developer's to make (locally, with the skill); a request only chooses.
+//
+//   /demo-video                                  → the primary story (one app)
+//   /demo-video checkout in acme branding   → story "checkout", brand "acme"
+//   /demo-video retail checkout                  → the app whose folder says retail
+//
+// Anything it can't settle on one story is answered with the menu.
+
+const engineDir = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  "..",
+);
+
+const STOP = new Set(
+  "a an and as at by for from in into make me of on or our please show story the this to video with branding brand marketing demo film render".split(
+    " ",
+  ),
+);
+
+const words = (text) =>
+  (text.toLowerCase().match(/[a-z0-9æøå]+(?:-[a-z0-9æøå]+)*/g) ?? []).flatMap(
+    (w) => [w, ...(w.includes("-") ? w.split("-") : [])],
+  );
+
+const brandNames = (dir) =>
+  fs.existsSync(dir)
+    ? fs
+        .readdirSync(dir)
+        .filter((f) => f.endsWith(".json"))
+        .map((f) => f.slice(0, -".json".length))
+    : [];
+
+// The adapter may keep its brands elsewhere (`brands: "../brands"`). Read
+// from demo.config.ts's text: a literal path, as the field is documented.
+const adapterBrandsDir = (appDir) => {
+  const config = path.join(appDir, "demo", "demo.config.ts");
+  const text = fs.existsSync(config) ? fs.readFileSync(config, "utf8") : "";
+  const dir = /\bbrands:\s*["'`]([^"'`]+)["'`]/.exec(text)?.[1] ?? "./brands";
+  return path.resolve(appDir, "demo", dir);
+};
+
+/** What an app offers: its stories, and its brands plus the engine's. */
+export const appMenu = (appDir) => ({
+  dir: appDir,
+  name: path.basename(appDir),
+  stories: listStories(path.join(appDir, "demo")),
+  brands: [
+    ...new Set([
+      ...brandNames(adapterBrandsDir(appDir)),
+      ...brandNames(path.join(engineDir, "brands")),
+    ]),
+  ],
+});
+
+/**
+ * Picks from `apps` (appMenu results). Returns { app, story, brand } (brand
+ * null = the adapter's default) or { menu: true, reason }.
+ */
+export const pick = (request, apps) => {
+  const said = words(request);
+  const has = (word) => said.includes(word.toLowerCase());
+
+  // The brand: any offered brand named in the request.
+  const allBrands = [...new Set(apps.flatMap((a) => a.brands))];
+  const brands = allBrands.filter(has);
+  if (brands.length > 1) {
+    return {
+      menu: true,
+      reason: `Name one brand, not ${brands.join(" and ")}.`,
+    };
+  }
+  const brand = brands[0] ?? null;
+
+  // What's left of the request once the brand and filler are gone.
+  const content = said.filter(
+    (w) => !STOP.has(w) && !brands.includes(w) && !/^\d+$/.test(w),
+  );
+
+  // The app: named by its folder, else by a part of it no other app's
+  // folder has ("retail", not "self"), else the only one.
+  let candidates = apps;
+  if (apps.length > 1) {
+    const exact = apps.filter((a) => has(a.name));
+    const partCount = (part) =>
+      apps.filter((a) => a.name.split("-").includes(part)).length;
+    const named = exact.length
+      ? exact
+      : apps.filter((a) =>
+          a.name
+            .split("-")
+            .some(
+              (part) => part.length > 3 && partCount(part) === 1 && has(part),
+            ),
+        );
+    if (named.length === 1) {
+      candidates = named;
+    }
+  }
+
+  // Score every story: its name (or a part of it) said outright counts most,
+  // then words shared with its description.
+  // Variants aren't scored: the base story plus the brand finds them.
+  const scored = candidates.flatMap((app) =>
+    app.stories
+      .filter((story) => !story.extends)
+      .map((story) => {
+        const nameParts = story.name.split("-");
+        // "checkout express" says the story checkout-express in full.
+        let score = has(story.name) || nameParts.every((p) => has(p)) ? 10 : 0;
+        score += nameParts.filter((p) => p.length > 2 && has(p)).length * 3;
+        const description = new Set(words(story.description ?? ""));
+        score += content.filter(
+          (w) => w.length > 2 && description.has(w),
+        ).length;
+        return { app, story, score };
+      }),
+  );
+  const best = Math.max(0, ...scored.map((s) => s.score));
+  const top = scored.filter((s) => s.score === best);
+
+  if (best === 0) {
+    // Nothing named a story: a request with no feature gets the primary
+    // story ("a marketing video of the retail app"), if that's one app.
+    const noFeature = content.every((w) =>
+      candidates.some(
+        (a) => a.name.includes(w) || a.name.split("-").includes(w),
+      ),
+    );
+    const primaries = candidates
+      .map((app) => ({ app, story: app.stories.find((s) => s.primary) }))
+      .filter((p) => p.story);
+    if (noFeature && candidates.length === 1 && primaries.length === 1) {
+      return withBrand(primaries[0].app, primaries[0].story.name, brand);
+    }
+    return {
+      menu: true,
+      reason:
+        candidates.length > 1 && noFeature
+          ? "Which app?"
+          : "No story matches that. Pick one by name:",
+    };
+  }
+  if (top.length > 1) {
+    return {
+      menu: true,
+      reason: `That matches ${top.map((t) => `\`${t.story.name}\``).join(", ")}. Pick one by name:`,
+    };
+  }
+  return withBrand(top[0].app, top[0].story.name, brand);
+};
+
+// The brand must be one the chosen app has: another app's brand would fail
+// at render time with a worse message. A story with a variant for that brand
+// (checkout + acme → checkout.acme) films the variant: its words are the
+// customer's.
+const withBrand = (app, story, brand) => {
+  if (brand && !app.brands.includes(brand)) {
+    return {
+      menu: true,
+      reason: `No brand \`${brand}\` in ${app.name}. Pick one:`,
+      apps: [app],
+    };
+  }
+  const variant =
+    brand && app.stories.find((s) => s.extends === story && s.brand === brand);
+  return { app: app.dir, story: variant ? variant.name : story, brand };
+};
+
+/** The menu as Markdown, for the PR reply. */
+export const menuMarkdown = (apps, reason) => {
+  const lines = [reason, ""];
+  for (const app of apps) {
+    lines.push(`**${app.name}**`);
+    if (app.stories.length === 0) {
+      lines.push("- no stories yet");
+    }
+    for (const s of app.stories.filter((x) => !x.extends)) {
+      lines.push(
+        `- \`${s.name}\`${s.primary ? " (primary)" : ""}${s.description ? `: ${s.description}` : ""}`,
+      );
+      for (const v of app.stories.filter((x) => x.extends === s.name)) {
+        lines.push(`  - in \`${v.brand}\` branding: \`${v.name}\``);
+      }
+    }
+    lines.push(`- brands: ${app.brands.map((b) => `\`${b}\``).join(", ")}`, "");
+  }
+  const example = apps.find((a) => a.stories.some((s) => !s.extends));
+  if (example) {
+    lines.push(
+      `For example: \`/demo-video ${example.stories.find((s) => !s.extends).name}${example.brands.length > 1 ? ` in ${example.brands.find((b) => b !== "navipartner") ?? example.brands[0]} branding` : ""}\``,
+    );
+  }
+  return lines.join("\n");
+};
+
+/**
+ * The form's version (Actions → Run workflow): app, story and brand by name,
+ * no guessing. Empty story = the primary story, empty brand = the adapter's
+ * default, empty app = the only app. A name that doesn't exist gets the menu,
+ * so a typo never films something else. `apps` in a menu result narrows it.
+ */
+export const pickExact = (apps, { app = "", story = "", brand = "" }) => {
+  const slashes = (p) => p.split("\\").join("/");
+  const wanted = slashes(app).replace(/\/+$/, "");
+  const candidates = wanted
+    ? apps.filter((a) => {
+        const dir = slashes(a.dir);
+        return (
+          a.name === wanted || dir === wanted || dir.endsWith(`/${wanted}`)
+        );
+      })
+    : apps;
+  if (candidates.length === 0) {
+    return { menu: true, reason: `No app \`${wanted}\`. The apps:` };
+  }
+  if (candidates.length > 1) {
+    return { menu: true, reason: "Which app? Fill in App with one of:" };
+  }
+  const chosen = candidates[0];
+  const found = story
+    ? chosen.stories.find((s) => s.name === story)
+    : chosen.stories.find((s) => s.primary);
+  if (!found) {
+    return {
+      menu: true,
+      reason: story
+        ? `No story \`${story}\` in ${chosen.name}. Pick one:`
+        : `${chosen.name} has no primary story. Pick one:`,
+      apps: [chosen],
+    };
+  }
+  if (found.extends) {
+    // A variant is made for one brand.
+    if (brand && brand !== found.brand) {
+      return {
+        menu: true,
+        reason: `\`${found.name}\` is made for \`${found.brand}\`. Leave Brand empty, or pick \`${found.extends}\`:`,
+        apps: [chosen],
+      };
+    }
+    return { app: chosen.dir, story: found.name, brand: found.brand };
+  }
+  return withBrand(chosen, found.name, brand || null);
+};

package/bin/runner.d.mts

@@ -0,0 +1,5 @@
+import type { DemoArgs } from "./args.mjs";
+
+export function writeRunner(
+  args: Pick<DemoArgs, "runnerDir" | "demoDir" | "adapterPath" | "configPath">,
+): string;

package/bin/runner.mjs

@@ -0,0 +1,47 @@
+// Writes the Playwright config and spec that run a story, into the app's
+// demo/out/.runner/. They live in the app (not in this package) for two
+// reasons: Playwright only transforms TypeScript outside node_modules, and
+// they must import the app's own @playwright/test so one Playwright loads.
+
+import fs from "node:fs";
+import path from "node:path";
+
+const importPath = (from, to) => {
+  const rel = path.relative(from, to).split(path.sep).join("/");
+  return rel.startsWith(".") ? rel : `./${rel}`;
+};
+
+const HEADER =
+  "// Generated by @navipartner/demo-video on every run; do not edit.\n";
+
+/** Writes playwright.config.mjs and demo.spec.mjs; returns the config path. */
+export const writeRunner = ({
+  runnerDir,
+  demoDir,
+  adapterPath,
+  configPath,
+}) => {
+  fs.mkdirSync(runnerDir, { recursive: true });
+  const adapter = JSON.stringify(importPath(runnerDir, adapterPath));
+  const dirs = `${JSON.stringify(demoDir)}, ${JSON.stringify(runnerDir)}`;
+  fs.writeFileSync(
+    configPath,
+    `${HEADER}import { createDemoConfig } from "@navipartner/demo-video/runner";
+
+import adapter from ${adapter};
+
+export default createDemoConfig(adapter, ${dirs});
+`,
+  );
+  fs.writeFileSync(
+    path.join(runnerDir, "demo.spec.mjs"),
+    `${HEADER}import { registerDemoTests } from "@navipartner/demo-video/runner";
+import { test } from "@playwright/test";
+
+import adapter from ${adapter};
+
+registerDemoTests(test, adapter, ${JSON.stringify(demoDir)});
+`,
+  );
+  return configPath;
+};

package/brands/navipartner/logo.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 441.60001 41.099998" xml:space="preserve" sodipodi:docname="NaviPartner_rgb.svg" width="441.60001" height="41.099998" inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"><defs id="defs335"></defs>
+<style type="text/css" id="style308">
+	.st0{fill:#729FD3;}
+	.st1{fill:#123A7E;}
+</style>
+<path class="st0" d="m 11.42,14.87 21.04,23.39 c 1.63,1.81 3.94,2.84 6.37,2.84 H 48.4 V 0 H 36.99 V 26.22 L 15.93,2.82 C 14.31,1.02 12.01,0 9.59,0 H 0 v 41.1 h 11.42 z" id="path310"></path>
+<path class="st0" d="M 66.51,41.1 82.43,11.92 98.34,41.1 h 13 L 88.92,0 H 80.98 C 77.86,0 74.99,1.7 73.5,4.44 L 53.51,41.1 Z" id="path312"></path>
+<path class="st0" d="M 137.46,36.47 157.35,0 h -13 L 128.44,29.18 112.52,0 h -13 l 22.42,41.1 h 7.72 c 3.25,0 6.25,-1.78 7.8,-4.63 z" id="path314"></path>
+<path class="st0" d="M 172.8,41.1 V 0 h -3.5 C 164.71,0 161,3.72 161,8.3 v 32.8 z" id="path316"></path>
+<path class="st1" d="m 186.11,0 h 19.9 c 3.05,0 5.51,0.86 7.37,2.58 1.86,1.72 2.79,3.99 2.79,6.81 v 6.05 c 0,3.01 -1,5.45 -2.99,7.31 -2,1.86 -4.62,2.79 -7.87,2.79 H 190.46 V 41.1 h -4.34 V 0 Z m 19.08,21.67 c 2,0 3.6,-0.58 4.81,-1.73 1.21,-1.15 1.82,-2.69 1.82,-4.61 V 9.28 c 0,-1.6 -0.54,-2.91 -1.61,-3.9 -1.08,-1 -2.52,-1.5 -4.31,-1.5 h -15.44 v 17.79 z" id="path318"></path>
+<path class="st1" d="M 310,3.76 H 295.21 V 0 h 33.92 V 3.76 H 314.34 V 41.1 H 310 Z" id="path320"></path>
+<path class="st1" d="m 334.72,0 h 4.11 l 22.78,34.23 V 0 h 4.23 v 41.1 h -4.11 L 338.95,7.11 V 41.1 h -4.23 z" id="path322"></path>
+<path class="st1" d="m 376.14,40.07 c -0.67,-0.68 -1,-1.63 -1,-2.85 V 0 h 27.59 V 3.76 H 379.48 V 21.8 h 14.82 v 3.76 h -14.82 v 11.78 h 23.25 v 3.76 h -23.77 c -1.21,0 -2.15,-0.34 -2.82,-1.03 z" id="path324"></path>
+<path class="st1" d="M 441.6,15.44 V 9.39 C 441.6,6.57 440.67,4.3 438.81,2.58 436.95,0.86 434.49,0 431.44,0 h -19.9 v 41.1 h 4.34 V 25.54 h 11.73 l 8.97,15.56 h 5.02 l -9.04,-15.68 c 2.42,-0.29 4.44,-1.18 6.05,-2.67 1.99,-1.86 2.99,-4.29 2.99,-7.31 z m -4.34,-0.12 c 0,1.92 -0.61,3.45 -1.82,4.61 -1.21,1.15 -2.82,1.73 -4.81,1.73 H 415.89 V 3.88 h 15.44 c 1.8,0 3.24,0.5 4.31,1.5 1.08,1 1.61,2.3 1.61,3.9 v 6.04 z" id="path326"></path>
+<path class="st1" d="M 291.63,15.44 V 9.39 C 291.63,6.57 290.7,4.3 288.84,2.58 286.98,0.86 284.52,0 281.47,0 h -19.9 v 41.1 h 4.34 V 25.54 h 11.73 l 8.97,15.56 h 5.02 l -9.04,-15.68 c 2.42,-0.29 4.44,-1.18 6.05,-2.67 1.99,-1.86 2.99,-4.29 2.99,-7.31 z m -4.34,-0.12 c 0,1.92 -0.61,3.45 -1.82,4.61 -1.21,1.15 -2.82,1.73 -4.81,1.73 H 265.92 V 3.88 h 15.44 c 1.8,0 3.24,0.5 4.31,1.5 1.08,1 1.61,2.3 1.61,3.9 v 6.04 z" id="path328"></path>
+<path class="st1" d="m 248.14,41.1 h 4.63 L 244.1,0 h -6.26 -4.42 -2.35 c -2.28,0 -4.29,1.63 -4.76,3.87 l -7.86,37.23 h 4.63 l 3.3,-15.61 h 18.47 z m -20.95,-19.5 3.32,-16 c 0.18,-0.85 0.93,-1.47 1.8,-1.47 h 1.13 4.42 2.59 l 3.57,17.47 z" id="path330"></path>
+</svg>

package/brands/navipartner.json

@@ -0,0 +1,22 @@
+{
+  "tenantName": "NaviPartner",
+  "config": {
+    "primaryColor": "#1F5494",
+    "primaryForegroundColor": "#ffffff",
+    "secondaryColor": "#729FD3",
+    "surfaceTone": "light",
+    "radiusStyle": "soft",
+    "fontPair": "editorial"
+  },
+  "assets": {
+    "logo": "navipartner/logo.svg"
+  },
+  "video": {
+    "primary": "#1F5494",
+    "ink": "#123A7E",
+    "accent": "#729FD3",
+    "text": "#232323",
+    "headingFont": "Merriweather",
+    "bodyFont": "Work Sans"
+  }
+}

package/dist/adapter-CWqMoNdw.d.ts

@@ -0,0 +1,157 @@
+import { Frame, Page } from '@playwright/test';
+import { z } from 'zod';
+
+interface Brand {
+    /** Folder name; letters, digits and dashes. */
+    name: string;
+    tenantName: string;
+    /** Opaque to the engine; the adapter decides how to apply it. */
+    config: Record<string, unknown>;
+    /** Asset slot → file path relative to the brands folder. */
+    assets: Record<string, string>;
+    /** Asset slot → URL the stage serves it on (for the adapter's mocks). */
+    assetUrls: Record<string, string>;
+    /** Absolute brands folder the asset paths are relative to. */
+    assetsDir: string;
+    stage: {
+        background: string;
+    };
+    /** The video's own look: cards, background, fonts (see the skill's look.md). */
+    video: VideoBrand;
+    /** Replaces white fills in an SVG logo. */
+    logoColor?: string;
+}
+interface VideoBrand {
+    /** Asset slot shown on cards; default "logo" when the brand has one. */
+    logo?: string;
+    /** Full-bleed cards, the italic emphasis word, background tint. */
+    primary: string;
+    /** Headings on pale cards. */
+    ink: string;
+    /** Soft background bloom. */
+    accent: string;
+    /** Sub-lines and eyebrows. */
+    text: string;
+    headingFont: string;
+    bodyFont: string;
+    /** Google Fonts css2 URL; built from the font names when omitted. */
+    fontsUrl: string;
+}
+
+/** A testid (letters, digits, dash, underscore) or a Playwright selector. */
+interface Target {
+    target: string;
+    /** Pick the nth match (0-based; -1 = last). Default: first. */
+    nth?: number;
+}
+/** A full-frame text card; see look.md. */
+interface CardSpec {
+    eyebrow?: string;
+    /** `*word*` is set in italic. */
+    heading?: string;
+    sub?: string;
+    logo?: boolean;
+    style: "pale" | "brand";
+    seconds: number;
+}
+interface DirectorApi {
+    /** The app's iframe, for actions that talk to the app directly. */
+    readonly app: Frame;
+    /** True in `check`: no camera, cursor, cards or holds. */
+    readonly fast: boolean;
+    zoomTo(target: Target, scale: number): Promise<void>;
+    zoomOut(options?: {
+        park?: boolean;
+    }): Promise<void>;
+    /**
+     * One shot that holds every target (a button and what it changes): pushed
+     * in as far as they all fit, up to `maxScale`. Targets that only fit in
+     * the wide shot fail the step.
+     */
+    frame(targets: Target[], options?: {
+        maxScale?: number;
+    }): Promise<void>;
+    /** zoom: push in to that scale first; omitted = leave the camera. */
+    click(target: Target, options?: {
+        zoom?: number;
+    }): Promise<void>;
+    type(target: Target, text: string, perCharMs?: number): Promise<void>;
+    press(key: string): Promise<void>;
+    park(): Promise<void>;
+    waitFor(target: Target, options: {
+        hidden?: boolean;
+        timeoutMs: number;
+    }): Promise<void>;
+    expectText(target: Target, text: string, options: {
+        contains?: boolean;
+        timeoutMs: number;
+    }): Promise<void>;
+    hold(ms: number): Promise<void>;
+    /**
+     * Runs an adapter action. While filming, time is stopped, so an action that
+     * waits on the app (a scan that fetches) needs frames filmed meanwhile.
+     */
+    during<T>(work: () => Promise<T>): Promise<T>;
+    /**
+     * The app's clock, in ms: real time in check mode, the filmed (virtual)
+     * time while filming. The idle accounting measures waits with it.
+     */
+    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.
+     */
+    card(spec: CardSpec, options?: {
+        keepUp?: boolean;
+    }): Promise<void>;
+    /** Testids currently visible in the app, for failure reports. */
+    visibleTestIds(): Promise<string[]>;
+}
+
+interface DemoAction<S extends z.ZodRawShape = z.ZodRawShape> {
+    params: z.ZodObject<S>;
+    run(d: DirectorApi, params: z.infer<z.ZodObject<S>>): Promise<void>;
+}
+interface DemoAdapter {
+    /** Must equal the storyboard's `app`. */
+    app: string;
+    webServer: {
+        command: string;
+        url: string;
+        env?: Record<string, string>;
+        timeoutSeconds?: number;
+    };
+    /** Path the stage loads in its iframe, e.g. "/?tenant=demo". */
+    appPath: string;
+    /**
+     * The app's screen in CSS pixels. Default 1728×972 (landscape). A portrait
+     * kiosk such as 1080×1920 is scaled to fit and centred on the stage.
+     */
+    viewport?: {
+        width: number;
+        height: number;
+    };
+    locale?: string;
+    timezone?: string;
+    /** Testid that means "the mocks booted the app". */
+    ready: string;
+    /** The app's own idle timeout; `check` and `render` keep holds under it. */
+    idleTimeoutSeconds?: number;
+    /** Installs mocks and applies the brand. Runs before the app loads. */
+    setup(page: Page, ctx: {
+        brand: Brand;
+    }): Promise<void>;
+    /**
+     * The app's own brands folder, relative to demo/ (default "./brands").
+     * Searched before the brands shipped with the engine (navipartner, ...).
+     */
+    brands?: string;
+    /** Default "navipartner". */
+    defaultBrand?: string;
+    /** App-specific steps, used in storyboards as { "do": "<name>", …params }. */
+    actions?: Record<string, DemoAction<any>>;
+}
+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 };