@vosjs/cli 0.28.0 → 0.29.0

package/README.md

@@ -33,7 +33,7 @@ Until 0.9 the take pipeline and the vos.so verbs shipped separately as `@vosso/v
 
 ## Requirements
 
-Node 18 or newer and a Chromium-family browser. A system Chrome is used when present; otherwise `npx playwright install chromium` once, or set `VOS_BROWSER_PATH`. mp4 output needs Chrome (Chromium ships no AVC encoder). Render pages load `three`, `gsap` and mediabunny from a CDN, so rendering needs network access.
+Node 18 or newer and a Chromium-family browser. A system Chrome is used when present; otherwise `npx playwright install chromium` once, or set `VOS_BROWSER_PATH`. mp4 output needs Chrome (Chromium ships no AVC encoder). Render pages load `three` and mediabunny from a CDN, so rendering needs network access.
 
 ## Engine verbs
 
@@ -161,6 +161,8 @@ Verified the flow in agent-browser already? `vos actions from-agent-browser step
 
 **Image and video overlays.** Media kinds on the same lane: `{ "id": "m0", "kind": "image" | "video", "start": 2, "duration": 4, "key": "/logo.png", "width": 0.35, "radius": 12, "opacity": 1, "loop": false, "transform": { … } }`. `key` is a file inside the take directory (`"/logo.png"`) or a URL; `width` is a fraction of the frame width, height follows the media's aspect; corners in design px. Video time is clip-local and muted by design; soundtracks belong to `doc.audio`.
 
+**HTML layers.** A UI component authored as DOM on the same lane, sharp at any export size because it is rasterized from source, not magnified from the footage: `{ "id": "h0", "kind": "html", "start": 2, "duration": 4, "html": "<div class=\"card\">Open Code</div>", "css": ".card{font-family:'Inter';background:#0b0b0d;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.45)}", "box": { "width": 452, "height": 132 }, "transform": { … } }`. The markup is well-formed XML (`<br />`, `&amp;`, quoted attributes; `vos validate` refuses the rest in words, because a malformed layer decodes to nothing and says nothing). `box` is the design box in 1080p px; `width` defaults to the design size. The CSS is the chrome (shadow, radius, border; `bleed` is derived from the shadows, or stated), a `font-family` it names resolves against the hosted catalog at every `font-weight` it names (a face outside the catalog rides `fonts: [{ family, url }]`), an image inside must be a `data:` URI, and an `animation` runs on the wall clock rather than the timeline, so animate the layer with `anim` and `motion`. It is never re-hosted and never an upload.
+
 **3D props.** `doc.objects`: world-space props between the card and the overlays. `{ "id": "p0", "asset": { "kind": "primitive", "shape": "knot", "color": "#ffb03a" }, "span": { "start": 1, "duration": 3 }, "transform3d": { "x": 0.8, "y": 0.28, "z": 0.5, "rx": 0, "ry": 40, "rz": 0, "scale": 0.18 }, "animation": "spin" }`. Shapes `cube`, `sphere`, `torus`, `knot`; `kind: "gltf"` with `key` loads a GLB (bounding-box normalized so `scale` means the same for every model; a bad model fails open). `x`/`y` are frame fractions, `z` world units toward the camera from the card plane, `scale` a fraction of the frame height; `animation` is `spin` or `float`, deterministic.
 
 **Audio.** `doc.audio` clips (music, effects, `key` a take-directory file or a URL) are mixed with gain, fade and loop envelopes and muxed into every full render: Opus for webm, AAC (Opus fallback) for mp4. Audio forces single-flight (`--parallel` is ignored with a note); a `--range` render keeps its audio.

package/dist/{chunk-T35XY4YW.js → chunk-GSRCASV2.js}

@@ -189,6 +189,7 @@ import {
   SEGMENT_EXIT_KINDS,
   enterOf,
   exitOf,
+  htmlLayerProblems,
   segmentOutputExtents,
   transitionSeconds,
   CARD_EXIT_KINDS,
@@ -926,9 +927,9 @@ function lintDoc(docIn) {
       problems.push(`${name} must be an object`);
       continue;
     }
-    if (o.kind !== "text" && o.kind !== "image" && o.kind !== "video") {
+    if (o.kind !== "text" && o.kind !== "image" && o.kind !== "video" && o.kind !== "html") {
       problems.push(
-        `${name}.kind must be "text" | "image" | "video" (got ${String(o.kind)})`
+        `${name}.kind must be "text" | "image" | "video" | "html" (got ${String(o.kind)})`
       );
     }
     if (!isNum(o.start) || o.start < 0)
@@ -1105,6 +1106,55 @@ function lintDoc(docIn) {
         problems.push(`${name}.opacity must be 0..1`);
       }
     }
+    if (o.kind === "html") {
+      if (typeof o.html !== "string") {
+        problems.push(`${name}.html must be the layer's markup (a string)`);
+      }
+      if (o.css !== void 0 && typeof o.css !== "string") {
+        problems.push(`${name}.css must be a string of CSS`);
+      }
+      const box = isObj(o.box) ? o.box : void 0;
+      if (!box || !isNum(box.width) || !isNum(box.height) || box.width <= 0 || box.height <= 0) {
+        problems.push(
+          `${name}.box must be { width, height } in design px, both > 0 (the 1080p frame is 1920 wide)`
+        );
+      }
+      if (o.bleed !== void 0 && (!isNum(o.bleed) || o.bleed < 0)) {
+        problems.push(
+          `${name}.bleed must be \u2265 0 design px (absent = derived from the CSS's shadows)`
+        );
+      }
+      if (o.fonts !== void 0) {
+        if (!Array.isArray(o.fonts)) {
+          problems.push(
+            `${name}.fonts must be an array of { family, url, weight?, style? }`
+          );
+        } else {
+          o.fonts.forEach((f, fi) => {
+            if (!isObj(f) || typeof f.family !== "string" || typeof f.url !== "string" || !/^https?:\/\//.test(f.url))
+              problems.push(
+                `${name}.fonts[${fi}] must be { family, url (https), weight?, style? }: a face the catalog does not host. A hosted family needs no entry; name it in the CSS`
+              );
+          });
+        }
+      }
+      if (o.width !== void 0 && (!isNum(o.width) || o.width <= 0 || o.width > 1)) {
+        problems.push(
+          `${name}.width must be a fraction of the frame width in (0..1] (got ${String(o.width)}; absent = the design size)`
+        );
+      }
+      if (o.opacity !== void 0 && (!isNum(o.opacity) || o.opacity < 0 || o.opacity > 1)) {
+        problems.push(`${name}.opacity must be 0..1`);
+      }
+      if (typeof o.html === "string") {
+        for (const p of htmlLayerProblems(o)) {
+          ;
+          (p.level === "problem" ? problems : warnings).push(
+            `${name}: ${p.message}`
+          );
+        }
+      }
+    }
     const tf = isObj(o.transform) ? o.transform : void 0;
     if (!tf) {
       problems.push(
@@ -6515,6 +6565,7 @@ import { basename, join as join15 } from "path";
 import { lowerToComposition as lowerToComposition3, migrateHostedDoc as migrateHostedDoc3 } from "@vosjs/studio-core";
 
 // src/plugin/media.ts
+import { isKeyedOverlay } from "@vosjs/studio-core";
 import { createWriteStream, existsSync as existsSync11 } from "fs";
 import { writeFile as writeFile9 } from "fs/promises";
 import { join as join13 } from "path";
@@ -6562,7 +6613,7 @@ function docMediaRefs(doc, keep = isTakeRelativeKey) {
       });
   }
   for (const clip of doc.overlays ?? []) {
-    if (clip.kind === "text" || !keep(clip.key)) continue;
+    if (!isKeyedOverlay(clip) || !keep(clip.key)) continue;
     out.push({
       where: `overlay ${clip.id}`,
       key: clip.key,
@@ -10536,4 +10587,4 @@ export {
   convertAgentBrowser,
   run
 };
-//# sourceMappingURL=chunk-T35XY4YW.js.map
+//# sourceMappingURL=chunk-GSRCASV2.js.map