@foldspace_npm/harness 0.1.30 → 0.1.32

package/src/video/README.md

@@ -0,0 +1,29 @@
+# src/video - what `foldspace record` is made of
+
+| File | What it is |
+|---|---|
+| `recorder.mjs` | One scene: a new conversation, the question typed key by key, the answer, recorded with Chrome's screencast into `.foldspace-dev/record/` |
+| `timeline.mjs` | Pure timing and layout: shortened waits, caption fades, dissolves, the caption card (its rows, the line wrapped evenly in two, the `*highlights*`), where the logo goes, colour contrast. Runs in Node (tests) and in the composer page |
+| `scenes.mjs` | `video/scenes.json`: checking it, the five capability names (one list: renaming a pill is a one-line change), each caption's "2 of 4", the file name |
+| `compose.mjs` | The plan, a short-lived 127.0.0.1 server and a hidden Chrome that makes the MP4 |
+| `composer/` | The page that draws each frame on a canvas, encodes H.264 with WebCodecs and muxes |
+| `brand.mjs` | Foldspace's brand, as its product video's storyboard draws it - its one blue on black, white, one muted grey - the caption card's fill and edge, and the logo files. Never the app's colours |
+
+Nothing is installed and nothing native runs: the video is encoded by the
+Google Chrome that is already there.
+
+## Vendored, with their licences
+
+- `vendor/mp4-muxer.min.mjs` - mp4-muxer 5.2.2 (MIT, `vendor/mp4-muxer.LICENSE`),
+  from the npm registry (tarball sha512
+  `dhozjTywI0h2qFzeShagt8YYw811fh1XlwiDCE2f6Aeqf6xG2CyuShoSa5E0AZDO8pPF0JOZ3wOmWBNWIGdSpQ==`),
+  `build/mp4-muxer.mjs` minified with esbuild. Not a dependency: the file is
+  loaded only by the composer page.
+- `fonts/Poppins-{Regular,SemiBold,ExtraBold}.woff2` - Poppins from the
+  google/fonts repository (`ofl/poppins`), converted from TTF to WOFF2 unchanged
+  otherwise; SIL Open Font License 1.1 in `fonts/OFL.txt`.
+- `assets/` - the official Foldspace logos, unchanged, from the website
+  (foldspace-ai/marketing-site): `logo-dark.svg` (src/assets: the white
+  wordmark, for dark backgrounds), `logo-light.svg` (src/assets: the dark
+  wordmark, for light backgrounds) and `foldspace-mark.svg` (public/favicon.svg:
+  the blue mark).

package/src/video/assets/foldspace-mark.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Foldspace_icon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.89 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #1842EF;
+      }
+
+      .cls-3 {
+        opacity: .5;
+      }
+    </style>
+  </defs>
+  <path class="cls-2" d="M21.31,18.6S23.08,0,18.84,0C14.31,0,0,14.51,0,18.84s18.57,2.55,18.57,2.55c0,0-1.76,18.61,2.47,18.61,4.54,0,18.84-14.51,18.84-18.84s-18.57-2.55-18.57-2.55Z"/>
+  <g class="cls-3">
+    <path class="cls-1" d="M21.32,18.6c-3.54.26-15.04.77-15.04-1.8,0-2.77,7.23-9.57,15.06-12.2.78,5.51-.02,14.01-.02,14.01h0Z"/>
+    <path class="cls-1" d="M18.57,21.39c3.54-.25,15.04-.77,15.04,1.8,0,2.77-7.23,9.57-15.06,12.2-.78-5.51.02-14,.02-14h0Z"/>
+  </g>
+  <g class="cls-3">
+    <path class="cls-1" d="M21.32,18.6c-2.36.13-7.66-1.08-7.66-2.66s4.7-4.41,8.03-5.37c0,4.19-.36,8.02-.36,8.02h0Z"/>
+    <path class="cls-1" d="M18.58,21.39c2.36-.14,7.67,1.07,7.67,2.66s-4.7,4.41-8.03,5.37c0-4.19.36-8.02.36-8.02h0Z"/>
+  </g>
+</svg>

package/src/video/assets/logo-dark.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Foldspace wordmark, white — for dark backgrounds. Cloned from logo-light.svg (the fixed
+     black export): identical geometry, wordmark and gradient effects inverted to white, and
+     the blue mark on the left left exactly as-is. -->
+<svg id="Foldspace_logo_3" data-name="Foldspace logo 3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 383 40">
+  <defs>
+    <radialGradient id="radial-gradient-w" cx="-260.9" cy="-217.59" fx="-260.9" fy="-217.59" r="24.52" gradientTransform="matrix(1.999999, 0.002443, -0.000086, 0.07, 847.280029, 36.614626)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset=".14" stop-color="#fff" stop-opacity=".79"/>
+      <stop offset=".31" stop-color="#fff" stop-opacity=".56"/>
+      <stop offset=".48" stop-color="#fff" stop-opacity=".36"/>
+      <stop offset=".64" stop-color="#fff" stop-opacity=".2"/>
+      <stop offset=".78" stop-color="#fff" stop-opacity=".09"/>
+      <stop offset=".91" stop-color="#fff" stop-opacity=".02"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-w-2" cx="-42.52" cy="252.22" fx="-42.52" fy="252.22" r="24.52" gradientTransform="matrix(1.379999, 0.001686, -0.000061, 0.05, 385.178223, 6.85996)" href="#radial-gradient-w" xlink:href="#radial-gradient-w"/>
+    <radialGradient id="radial-gradient-w-3" cx="1130.48" cy="503.88" fx="1130.48" fy="503.88" r="2" gradientTransform="matrix(-3.531012, -0.924368, 1.219353, -2.668178, 3648.81282, 2350.485806)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset=".17" stop-color="#fff" stop-opacity=".78"/>
+      <stop offset=".4" stop-color="#fff" stop-opacity=".5"/>
+      <stop offset=".6" stop-color="#fff" stop-opacity=".29"/>
+      <stop offset=".78" stop-color="#fff" stop-opacity=".13"/>
+      <stop offset=".92" stop-color="#fff" stop-opacity=".04"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <g id="Foldspace_logo_3_art" transform="matrix(1, 0, 0, 1, 26.598669, -202.805344)">
+    <g transform="matrix(1, 0, 0, 1, -26.598669, 202.805344)">
+      <path class="cls-5" d="M21.31,18.6S23.08,0,18.84,0C14.31,0,0,14.51,0,18.84s18.57,2.55,18.57,2.55c0,0-1.76,18.61,2.47,18.61,4.54,0,18.84-14.51,18.84-18.84s-18.57-2.55-18.57-2.55Z" style="fill: rgb(24, 66, 239);"/>
+      <g class="cls-6" style="opacity: 0.5;">
+        <path class="cls-1" d="M21.32,18.6c-3.54.26-15.04.77-15.04-1.8,0-2.77,7.23-9.57,15.06-12.2.78,5.51-.02,14.01-.02,14.01h0Z" style="fill: rgb(255, 255, 255);"/>
+        <path class="cls-1" d="M18.57,21.39c3.54-.25,15.04-.77,15.04,1.8,0,2.77-7.23,9.57-15.06,12.2-.78-5.51.02-14,.02-14h0Z" style="fill: rgb(255, 255, 255);"/>
+      </g>
+      <g class="cls-6" style="opacity: 0.5;">
+        <path class="cls-1" d="M21.32,18.6c-2.36.13-7.66-1.08-7.66-2.66s4.7-4.41,8.03-5.37c0,4.19-.36,8.02-.36,8.02h0Z" style="fill: rgb(255, 255, 255);"/>
+        <path class="cls-1" d="M18.58,21.39c2.36-.14,7.67,1.07,7.67,2.66s-4.7,4.41-8.03,5.37c0-4.19.36-8.02.36-8.02h0Z" style="fill: rgb(255, 255, 255);"/>
+      </g>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, -26.598669, 202.805344)" fill="#fff">
+      <g>
+        <polygon points="53.77 30 55.91 30 55.91 21.21 68.29 21.21 68.29 19.07 53.77 19.06 53.77 30"/>
+        <rect x="53.77" y="10.28" width="19.72" height="2.14"/>
+      </g>
+      <path d="M94.82,10.28c-5.44,0-9.86,4.42-9.86,9.86s4.42,9.86,9.86,9.86,9.86-4.42,9.86-9.86-4.42-9.86-9.86-9.86ZM102.54,20.14c0,4.25-3.46,7.72-7.72,7.72s-7.72-3.46-7.72-7.72,3.46-7.72,7.72-7.72,7.72,3.46,7.72,7.72Z"/>
+      <polygon points="120.71 10.28 118.56 10.28 118.56 30 138.28 30 138.28 27.86 120.71 27.86 120.71 10.28"/>
+      <path d="M162.02,10.28h-9.86v2.14h9.86c4.25,0,7.72,3.46,7.72,7.72s-3.46,7.72-7.72,7.72h-9.86v2.14h9.86c5.44,0,9.86-4.42,9.86-9.86s-4.42-9.86-9.86-9.86Z"/>
+      <path d="M185.76,15.74c0,3.01,2.45,5.47,5.47,5.47h8.79c1.83,0,3.32,1.49,3.32,3.32s-1.49,3.32-3.32,3.32h-14.26v2.14h14.26c3.01,0,5.47-2.45,5.47-5.47s-2.45-5.47-5.47-5.47h-8.79c-1.83,0-3.32-1.49-3.32-3.32s1.49-3.32,3.32-3.32h14.26v-2.14h-14.26c-3.01,0-5.47,2.45-5.47,5.47Z"/>
+      <path d="M233.61,10.28h-14.26v2.14h14.26c1.83,0,3.32,1.49,3.32,3.32s-1.49,3.32-3.32,3.32h-14.26v10.93h2.15v-8.79h12.11c3.01,0,5.47-2.45,5.47-5.47s-2.45-5.47-5.47-5.47Z"/>
+      <polygon points="247.96 30 250.53 30 259.2 14.58 267.86 30 270.44 30 259.21 10 247.96 30"/>
+      <path d="M280.86,20.14c0,5.44,4.42,9.86,9.86,9.86h9.86v-2.14h-9.86c-4.25,0-7.72-3.46-7.72-7.72s3.46-7.72,7.72-7.72h9.86v-2.14h-9.86c-5.44,0-9.86,4.42-9.86,9.86Z"/>
+      <g>
+        <path class="cls-2" d="M 383.35 21.284 C 383.35 22.364 357.97 23.214 326.66 23.174 C 295.35 23.134 269.98 22.224 269.98 21.144 C 269.98 20.064 295.36 19.214 326.67 19.254 C 357.98 19.294 383.35 20.204 383.35 21.284 Z" style="fill: url(&quot;#radial-gradient-w&quot;);"/>
+        <path class="cls-4" d="M 365.688 19.379 C 365.688 20.169 348.148 20.789 326.508 20.769 C 304.868 20.739 287.328 20.079 287.338 19.289 C 287.338 18.499 304.878 17.879 326.518 17.899 C 348.158 17.929 365.698 18.589 365.688 19.379 Z" style="fill: url(&quot;#radial-gradient-w-2&quot;);"/>
+        <path d="M324.32,12.42h9.86v-2.14h-9.86c-5.44,0-9.86,4.42-9.86,9.86s4.42,9.86,9.86,9.86h9.86v-2.14h-9.86c-4.25,0-7.72-3.46-7.72-7.72s3.46-7.72,7.72-7.72Z"/>
+        <circle cx="326.67" cy="20.14" r="1.2"/>
+      </g>
+    </g>
+  </g>
+  <g id="svg-1" fill="#fff">
+    <g transform="matrix(1, 0, 0, 1, 55.221105, 59.088541)">
+      <g>
+        <path class="cls-3" d="M 264.114 -42.099 C 266.374 -44.822 292.155 -45.685 287.424 -34.392 C 284.798 -28.123 262.07 -35.124 261.921 -34.993" style="fill: url(&quot;#radial-gradient-w-3&quot;);"/>
+        <circle cx="271.424" cy="-38.941" r="1.2"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/video/assets/logo-light.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Foldspace wordmark, black — for light backgrounds. Source: foldspace-black-fixed-08-2026-1.svg,
+     normalized here so the artwork sits at the viewBox origin (0 0 383 40). -->
+<svg id="Foldspace_logo_1" data-name="Foldspace logo 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 383 40">
+  <defs>
+    <radialGradient id="radial-gradient" cx="-260.9" cy="-217.59" fx="-260.9" fy="-217.59" r="24.52" gradientTransform="matrix(1.999999, 0.002443, -0.000086, 0.07, 847.280029, 36.614626)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#000"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-2" cx="-42.52" cy="252.22" fx="-42.52" fy="252.22" r="24.52" gradientTransform="matrix(1.379999, 0.001686, -0.000061, 0.05, 385.178223, 6.85996)" href="#radial-gradient" xlink:href="#radial-gradient"/>
+    <radialGradient id="radial-gradient-3" cx="1130.48" cy="503.88" fx="1130.48" fy="503.88" r="2" gradientTransform="matrix(-3.531012, -0.924368, 1.219353, -2.668178, 3648.81282, 2350.485806)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#000"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <g id="Foldspace_logo_1_art" transform="matrix(1, 0, 0, 1, 26.598669, -202.805344)">
+    <g transform="matrix(1, 0, 0, 1, -26.598669, 202.805344)">
+      <path class="cls-5" d="M21.31,18.6S23.08,0,18.84,0C14.31,0,0,14.51,0,18.84s18.57,2.55,18.57,2.55c0,0-1.76,18.61,2.47,18.61,4.54,0,18.84-14.51,18.84-18.84s-18.57-2.55-18.57-2.55Z" style="fill: rgb(24, 66, 239);"/>
+      <g class="cls-6" style="opacity: 0.5;">
+        <path class="cls-1" d="M21.32,18.6c-3.54.26-15.04.77-15.04-1.8,0-2.77,7.23-9.57,15.06-12.2.78,5.51-.02,14.01-.02,14.01h0Z" style="fill: rgb(255, 255, 255);"/>
+        <path class="cls-1" d="M18.57,21.39c3.54-.25,15.04-.77,15.04,1.8,0,2.77-7.23,9.57-15.06,12.2-.78-5.51.02-14,.02-14h0Z" style="fill: rgb(255, 255, 255);"/>
+      </g>
+      <g class="cls-6" style="opacity: 0.5;">
+        <path class="cls-1" d="M21.32,18.6c-2.36.13-7.66-1.08-7.66-2.66s4.7-4.41,8.03-5.37c0,4.19-.36,8.02-.36,8.02h0Z" style="fill: rgb(255, 255, 255);"/>
+        <path class="cls-1" d="M18.58,21.39c2.36-.14,7.67,1.07,7.67,2.66s-4.7,4.41-8.03,5.37c0-4.19.36-8.02.36-8.02h0Z" style="fill: rgb(255, 255, 255);"/>
+      </g>
+    </g>
+    <g transform="matrix(1, 0, 0, 1, -26.598669, 202.805344)">
+      <g>
+        <polygon points="53.77 30 55.91 30 55.91 21.21 68.29 21.21 68.29 19.07 53.77 19.06 53.77 30"/>
+        <rect x="53.77" y="10.28" width="19.72" height="2.14"/>
+      </g>
+      <path d="M94.82,10.28c-5.44,0-9.86,4.42-9.86,9.86s4.42,9.86,9.86,9.86,9.86-4.42,9.86-9.86-4.42-9.86-9.86-9.86ZM102.54,20.14c0,4.25-3.46,7.72-7.72,7.72s-7.72-3.46-7.72-7.72,3.46-7.72,7.72-7.72,7.72,3.46,7.72,7.72Z"/>
+      <polygon points="120.71 10.28 118.56 10.28 118.56 30 138.28 30 138.28 27.86 120.71 27.86 120.71 10.28"/>
+      <path d="M162.02,10.28h-9.86v2.14h9.86c4.25,0,7.72,3.46,7.72,7.72s-3.46,7.72-7.72,7.72h-9.86v2.14h9.86c5.44,0,9.86-4.42,9.86-9.86s-4.42-9.86-9.86-9.86Z"/>
+      <path d="M185.76,15.74c0,3.01,2.45,5.47,5.47,5.47h8.79c1.83,0,3.32,1.49,3.32,3.32s-1.49,3.32-3.32,3.32h-14.26v2.14h14.26c3.01,0,5.47-2.45,5.47-5.47s-2.45-5.47-5.47-5.47h-8.79c-1.83,0-3.32-1.49-3.32-3.32s1.49-3.32,3.32-3.32h14.26v-2.14h-14.26c-3.01,0-5.47,2.45-5.47,5.47Z"/>
+      <path d="M233.61,10.28h-14.26v2.14h14.26c1.83,0,3.32,1.49,3.32,3.32s-1.49,3.32-3.32,3.32h-14.26v10.93h2.15v-8.79h12.11c3.01,0,5.47-2.45,5.47-5.47s-2.45-5.47-5.47-5.47Z"/>
+      <polygon points="247.96 30 250.53 30 259.2 14.58 267.86 30 270.44 30 259.21 10 247.96 30"/>
+      <path d="M280.86,20.14c0,5.44,4.42,9.86,9.86,9.86h9.86v-2.14h-9.86c-4.25,0-7.72-3.46-7.72-7.72s3.46-7.72,7.72-7.72h9.86v-2.14h-9.86c-5.44,0-9.86,4.42-9.86,9.86Z"/>
+      <g>
+        <path class="cls-2" d="M 383.35 21.284 C 383.35 22.364 357.97 23.214 326.66 23.174 C 295.35 23.134 269.98 22.224 269.98 21.144 C 269.98 20.064 295.36 19.214 326.67 19.254 C 357.98 19.294 383.35 20.204 383.35 21.284 Z" style="fill: url(&quot;#radial-gradient&quot;);"/>
+        <path class="cls-4" d="M 365.688 19.379 C 365.688 20.169 348.148 20.789 326.508 20.769 C 304.868 20.739 287.328 20.079 287.338 19.289 C 287.338 18.499 304.878 17.879 326.518 17.899 C 348.158 17.929 365.698 18.589 365.688 19.379 Z" style="fill: url(&quot;#radial-gradient-2&quot;);"/>
+        <path d="M324.32,12.42h9.86v-2.14h-9.86c-5.44,0-9.86,4.42-9.86,9.86s4.42,9.86,9.86,9.86h9.86v-2.14h-9.86c-4.25,0-7.72-3.46-7.72-7.72s3.46-7.72,7.72-7.72Z"/>
+        <circle cx="326.67" cy="20.14" r="1.2"/>
+      </g>
+    </g>
+  </g>
+  <g id="svg-1">
+    <g transform="matrix(1, 0, 0, 1, 55.221105, 59.088541)">
+      <g>
+        <path class="cls-3" d="M 264.114 -42.099 C 266.374 -44.822 292.155 -45.685 287.424 -34.392 C 284.798 -28.123 262.07 -35.124 261.921 -34.993" style="fill: url(&quot;#radial-gradient-3&quot;);"/>
+        <circle cx="271.424" cy="-38.941" r="1.2"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/video/brand.mjs

@@ -0,0 +1,46 @@
+// The video's look: Foldspace's own brand, as its product video's storyboard
+// draws it - never the app's colours. One accent, the brand blue, on pure
+// black; white text, and one muted grey for the small lines. The logos are
+// the website's own vector files, in assets/, in the brand kit's blue
+// (#1842EF): the website's copies carried an older blue, #3247F2.
+//
+// No Node imports: the composer page loads this file too.
+
+import { blendHex } from "./timeline.mjs";
+
+export const BRAND = Object.freeze({
+  blue: "#1842EF", // the one accent
+  black: "#000000", // the opening and closing cards, and the bars around the product
+  muted: "#8E8E99", // small lines: "Built with", "2 OF 4", the question, the closing card's eyebrow and last line
+  white: "#FFFFFF",
+});
+
+// The caption card: the storyboard's panel colour at 88%, so the product shows
+// through a little - the most see-through it can be with the muted question
+// still at 4.5:1 over a white app. In a letterboxed frame it stays on the
+// picture (captionLayout), so it never crosses onto the black band.
+export const CAPTION_FILL = Object.freeze({ color: "#0B0B0D", alpha: 0.88 });
+export const CAPTION_EDGE = "rgba(255, 255, 255, 0.12)";
+// The lightest it gets - over a white app - which is where light text on it
+// is hardest to read.
+export const CAPTION_BACKDROP_LIGHTEST = blendHex(CAPTION_FILL.color, CAPTION_FILL.alpha, "#FFFFFF");
+// The opening and closing cards' background, and the bars around the product.
+export const CARD_BG = BRAND.black;
+
+// WCAG: 4.5:1 for small text; 3:1 for large text (the blue "Product Agent"
+// line) and for rules. Blue on black is only about 3.06:1, so blue is never
+// small text on black: only the large title line, the rule, and a fill
+// behind white text - the pills and the caption's highlight (6.85:1).
+export const TEXT_CONTRAST = 4.5;
+export const LARGE_TEXT_CONTRAST = 3;
+export const MARK_CONTRAST = 3;
+
+// The logos, as the website ships them (viewBox 0 0 383 40 and 0 0 39.89 40),
+// in the brand kit's blue.
+export const LOGO_FILES = Object.freeze({
+  onDark: "logo-dark.svg", // white wordmark, blue mark
+  onLight: "logo-light.svg", // dark wordmark, blue mark
+  mark: "foldspace-mark.svg", // the blue mark alone (the website's favicon)
+});
+export const WORDMARK_RATIO = 383 / 40;
+export const MARK_RATIO = 39.89 / 40;