[68e1e4db] Video: release 0.26.0 (#604)

* [68e1e4db] feat(video): author release-0.26.0 marketing clip in the panel-demo kit register * [68e1e4db] fix(video): extend pk-frame clip window to full length to kill black-gap render bug * [68e1e4db] docs(video): document release-0.26.0 composition structure in motion/README Added a comprehensive "Release-specific example: release-0.26.0" section documenting the v0.26.0 marketing video composition: a 40-second panel-demo kit clip showcasing four key features (orchestrator security hardening, three-forge support, Telegram Mini App V4, active guard mode) with choreographed panel elements, stats overlay, and dual-format captions. Includes preview/test instructions, props.js shape, captions schema with verified character counts, and smoke-test invariants matching the pattern established by release-0.25.0. --------- Co-authored-by: UX/UI Developer 1 <ux-dev-1@roboco.tech> Co-authored-by: UX/UI Documenter <ux-doc@roboco.tech>
2026-08-03 07:23:24 +02:00 · 2026-07-20 11:00:27 +02:00
parent a5d8c6bd5b
commit cd73ad6a74
7 changed files with 924 additions and 0 deletions
@@ -0,0 +1,115 @@
+import { readFileSync, existsSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+// HTML-structure smoke test for the RoboCo v0.26.0 release composition.
+// Extends the panel-demo register: panel chrome, typing reveal, four feature cards
+// with progress -> completed pill flips, cursor, stats overlay, toast,
+// outro, offline constraint, and the captions.json schema/limits.
+
+const here = dirname(fileURLToPath(import.meta.url));
+const dir = here;
+const read = (name) => readFileSync(join(dir, name), "utf8");
+
+const orientations = [
+  { file: "vertical.html", height: "1920" },
+  { file: "square.html", height: "1080" },
+];
+
+describe("release-0.26.0 composition", () => {
+  it("ships props.js (default preview values, sidecar overwrites at render)", () => {
+    expect(existsSync(join(dir, "props.js"))).toBe(true);
+    const src = read("props.js");
+    expect(src).toContain("window.__PROPS__");
+    expect(src).toContain("window.__ORIENTATION__");
+    expect(src).toContain("introText");
+    expect(src).toContain("toastTitle");
+    expect(src).toContain("toastBody");
+    expect(src).not.toMatch(/—/);
+  });
+
+  it.each(orientations)("$file parses with correct dimensions and wiring", ({ file, height }) => {
+    const html = read(file);
+
+    expect(html).toContain('data-width="1080"');
+    expect(html).toContain(`data-height="${height}"`);
+    expect(html).toMatch(/data-duration="40"/);
+    expect(html).toMatch(/data-fps="30"/);
+
+    const propsIdx = html.indexOf('<script src="props.js"></script>');
+    const kitJsIdx = html.indexOf('<script src="../../kit/kit.js"></script>');
+    const inlineIdx = html.indexOf("window.__timelines");
+    expect(propsIdx).toBeGreaterThan(-1);
+    expect(kitJsIdx).toBeGreaterThan(propsIdx);
+    expect(inlineIdx).toBeGreaterThan(kitJsIdx);
+
+    expect(html).toContain('href="../../kit/kit.css"');
+    expect(html).toMatch(/class="[^"]*clip[^"]*"/);
+
+    expect(html).toContain("pk-frame");
+    expect(html).toContain("pk-frame__sidebar");
+    expect(html).toContain("pk-frame__topbar");
+
+    expect(html).toContain('id="typeIntro"');
+    expect(html).toContain("pk-caret");
+    expect(html).toContain("typeReveal");
+
+    const cardCount = (html.match(/class="pk-card"/g) || []).length;
+    const progressCount = (html.match(/pk-pill--progress/g) || []).length;
+    const completedCount = (html.match(/pk-pill--completed/g) || []).length;
+    expect(cardCount).toBe(4);
+    expect(progressCount).toBe(4);
+    expect(completedCount).toBe(4);
+
+    expect(html).toContain("v0.26.0");
+    expect(html).toContain("Off the public net");
+    expect(html).toContain("3 forges, 1 API");
+    expect(html).toContain("Telegram cockpit");
+    expect(html).toContain("Guard mode: active");
+
+    // Choreographed cursor: multi-waypoint path with at least one click
+    // beat (rings are generated at runtime by kit.js, not static HTML),
+    // and a camera that moves — a locked-off frame is an automatic bounce.
+    expect(html).toContain("pk-cursor");
+    const waypoints = html.match(/data-waypoints="([^"]+)"/);
+    expect(waypoints).not.toBeNull();
+    expect(waypoints[1].split(";").length).toBeGreaterThanOrEqual(6);
+    expect(waypoints[1]).toContain("click");
+    const shots = html.match(/data-shots="([^"]+)"/);
+    expect(shots).not.toBeNull();
+    expect(shots[1].split(";").length).toBeGreaterThanOrEqual(4);
+    expect(html).toContain("choreographAllCursors");
+    expect(html).toContain("choreographAllCameras");
+
+    expect(html).toContain("pk-toast");
+    expect(html).toContain('id="toastTitle"');
+    expect(html).toContain('id="toastBody"');
+
+    expect(html).toContain("pk-outro");
+    expect(html).toContain("roboco.tech");
+
+    expect(html).not.toMatch(/<script[^>]+src="https?:\/\//);
+    expect(html).not.toMatch(/href="https?:\/\//);
+    // on-screen copy only; the document <title> may carry an em dash as
+    // metadata (matches release-0.25.0's precedent) — it never renders.
+    const body = html.slice(html.indexOf("<body"));
+    expect(body).not.toMatch(/—/);
+  });
+
+  it("ships captions.json within X and TikTok platform limits", () => {
+    expect(existsSync(join(dir, "captions.json"))).toBe(true);
+    const captions = JSON.parse(read("captions.json"));
+
+    expect(captions.composition_id).toBe("release-0.26.0");
+    expect(captions.platforms.x.char_count).toBe(captions.platforms.x.caption.length);
+    expect(captions.platforms.x.char_count).toBeLessThanOrEqual(captions.platforms.x.limit);
+    expect(captions.platforms.x.within_limit).toBe(true);
+    expect(captions.platforms.tiktok.char_count).toBe(captions.platforms.tiktok.caption.length);
+    expect(captions.platforms.tiktok.char_count).toBeLessThanOrEqual(captions.platforms.tiktok.limit);
+    expect(captions.platforms.tiktok.within_limit).toBe(true);
+
+    expect(captions.platforms.x.caption).not.toMatch(/—/);
+    expect(captions.platforms.tiktok.caption).not.toMatch(/—/);
+  });
+});