@koda-sl/baker-cli 0.265.0-dev.1f1c09c80 → 0.265.2-dev.1f1c09c80

package/dist/cli.js

@@ -32651,12 +32651,13 @@ function buildAdBrandOverlay(opts) {
   const parts = [
     "<!-- Brand layer, emitted by `baker canvas scaffold-ad`. The mark and the closing",
     "     card are drawn HERE, by the composition \u2014 never generated as a picture, because",
-    "     a video model garbles a wordmark every time. Restyle freely; keep the `clip`",
-    "     class and the data-start/data-dur attributes, which is how the runtime times them. -->"
+    "     a video model garbles a wordmark every time. Restyle freely, but keep the",
+    "     data-start/data-dur attributes and the script below: that script is what shows",
+    "     and hides these, and the host composition has nothing that would. -->"
   ];
   if (logo) {
     parts.push(
-      `<img class="ov clip pos-top-left brand-mark" src="${escapeHtml2(logo.file)}" alt="${escapeHtml2(logo.alt)}" data-start="0" data-dur="${totalS}" />`
+      `<img class="clip brand-mark" src="${escapeHtml2(logo.file)}" alt="${escapeHtml2(logo.alt)}" data-start="0" data-dur="${totalS}" />`
     );
   }
   const cardBits = [];
@@ -32668,24 +32669,61 @@ function buildAdBrandOverlay(opts) {
     cardBits.push(`<div class="endcard-cta"${style}>${escapeHtml2(cta.trim())}</div>`);
   }
   parts.push(
-    `<div class="ov clip pos-center endcard" data-start="${cardAtS}" data-dur="${cardDurationS}" data-role="cta">`,
+    `<div class="clip endcard" data-start="${cardAtS}" data-dur="${cardDurationS}" data-role="cta">`,
     ...cardBits.map((b) => `  ${b}`),
-    "</div>"
+    "</div>",
+    brandLayerDriver()
   );
   return parts.join("\n");
 }
+function brandLayerDriver() {
+  return [
+    "<script>",
+    "  (function () {",
+    "    var els = Array.prototype.slice.call(document.querySelectorAll('.brand-mark, .endcard'));",
+    "    if (!els.length) return;",
+    "    els.forEach(function (el) { gsap.set(el, { visibility: 'hidden' }); });",
+    "    function attach(tl) {",
+    "      if (!tl) return;",
+    "      els.forEach(function (el) {",
+    "        var at = parseFloat(el.getAttribute('data-start') || '0') || 0;",
+    "        var dur = parseFloat(el.getAttribute('data-dur') || '0') || 0;",
+    "        tl.set(el, { visibility: 'visible' }, at);",
+    "        if (dur > 0) tl.set(el, { visibility: 'hidden' }, at + dur);",
+    "      });",
+    "    }",
+    "    var store = window.__timelines || {};",
+    "    var main = store.main;",
+    "    if (main) { attach(main); return; }",
+    "    Object.defineProperty(store, 'main', {",
+    "      configurable: true,",
+    "      get: function () { return main; },",
+    "      set: function (tl) { main = tl; attach(tl); },",
+    "    });",
+    "    window.__timelines = store;",
+    "  })();",
+    "</script>"
+  ].join("\n");
+}
 function adBrandOverlayCss() {
   return [
     "      /* --- brand layer (baker canvas scaffold-ad) --- */",
-    "      .brand-mark { width: 220px; height: auto; opacity: 0.92;",
-    "        filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45)); }",
-    "      .endcard { display: flex; flex-direction: column; align-items: center; gap: 56px;",
+    "      /* Positioned by this block alone. The composition that actually renders an ad",
+    "         is the caption track, which has no .pos-* helpers \u2014 relying on them put the",
+    "         brand layer in a file nothing opens and shipped an empty green end plate. */",
+    "      .brand-mark { position: absolute; top: 90px; left: 56px; width: 220px; height: auto;",
+    "        opacity: 0.92; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45)); }",
+    "      .endcard { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);",
+    "        display: flex; flex-direction: column; align-items: center; gap: 56px;",
     "        width: 100%; max-width: 1080px; padding: 0 60px; text-align: center; }",
     "      .endcard-logo { width: 620px; max-width: 78%; height: auto; }",
     "      /* Capped and wrapping, not sized to its content: measured in a real browser,",
     "         `GET YOUR FREE QUOTE` renders 948px wide against a 1080px canvas, so the next",
     "         slightly longer call to action runs off the frame. Two lines beat an edge. */",
-    "      .endcard-cta { font-size: 64px; font-weight: 900; text-transform: uppercase;",
+    "      /* Declares its own family: rendered without one it inherited the document",
+    "         default and the call to action came out in Times, beside sans-serif captions. */",
+    "      .endcard-cta { font-family: 'BrandFont', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;",
+    "        font-size: 64px; font-weight: 900; text-transform: uppercase;",
     "        letter-spacing: 0.01em; color: #fff; padding: 28px 58px; border-radius: 56px;",
     "        max-width: 900px; line-height: 1.15; background: rgba(0,0,0,0.82); }"
   ].join("\n");
@@ -32694,7 +32732,11 @@ function injectAdBrandOverlay(indexHtml, overlayHtml) {
   if (!overlayHtml.trim()) return indexHtml;
   const withCss = indexHtml.replace("    </style>", `${adBrandOverlayCss()}
     </style>`);
-  return withCss.replace("<!--OVERLAYS-->", () => overlayHtml);
+  if (withCss.includes("<!--OVERLAYS-->")) return withCss.replace("<!--OVERLAYS-->", () => overlayHtml);
+  const rootClose = withCss.lastIndexOf("</div>");
+  if (rootClose === -1) return withCss;
+  return `${withCss.slice(0, rootClose)}${overlayHtml}
+    ${withCss.slice(rootClose)}`;
 }
 
 // src/commands/canvas/composition-path.ts
@@ -32796,18 +32838,35 @@ var scaffoldAdCommand = defineCommand104({
     await writeSceneFiles(outDir, blueprint);
     await writeFile9(blueprintStylePath, renderStyleProjectionFromValue(blueprint), "utf8");
     const logoPath = spec.data.brand?.logo?.trim();
+    const opts = {
+      imageModel: AD_IMAGE_MODEL,
+      videoModel: DEFAULT_VIDEO_GENERATE_MODEL,
+      overlayCompositionPath: path23.relative(outDir, compositionDest),
+      captionsCompositionPath: path23.relative(outDir, captionsDest),
+      blueprintPath: path23.relative(outDir, blueprintPath),
+      blueprintStylePath: path23.relative(outDir, blueprintStylePath),
+      aspect: spec.data.format.aspect_ratio,
+      resolution: spec.data.format.resolution,
+      // A beat is one clause and one card, so the cap has to clear a whole clause.
+      // The composition's default of 3 is TikTok karaoke styling; applied to an ad
+      // it overrode the clause rule on every line and rendered "IS STANDARD. WE".
+      // 8 is the composition's own maximum and clears every beat measured here.
+      captionWordsPerGroup: 8
+    };
+    const canvas = scaffoldVideoCanvas(blueprint, adSpecCastElements(spec.data), opts);
+    const renderNode3 = canvas.nodes.find((n) => n.type === "hyperframe_render");
+    const renderedDir = renderNode3 ? path23.join(outDir, String(renderNode3.params?.composition ?? "")) : null;
     let staged = null;
-    if (logoPath) {
+    if (logoPath && renderedDir) {
       const ext = path23.extname(logoPath) || ".png";
-      const dest = path23.join(compositionDest, `brand-mark${ext}`);
       try {
-        await copyFile(logoPath, dest);
+        await copyFile(logoPath, path23.join(renderedDir, `brand-mark${ext}`));
         staged = { file: `brand-mark${ext}`, alt: spec.data.brand?.name ?? "brand" };
       } catch {
       }
     }
     const closing = blueprint.scenes[blueprint.scenes.length - 1];
-    const overlayHtml = endCardWanted(spec.data) && closing ? buildAdBrandOverlay({
+    const overlayHtml = endCardWanted(spec.data) && closing && renderedDir ? buildAdBrandOverlay({
       logo: staged,
       cta: endCardCta(spec.data),
       cardAtS: closing.start_s,
@@ -32815,27 +32874,11 @@ var scaffoldAdCommand = defineCommand104({
       totalS: blueprint.estimated_duration_s,
       accent: firstHex(spec.data.brand?.palette)
     }) : "";
-    if (overlayHtml) {
-      const indexPath = path23.join(compositionDest, "index.html");
+    if (overlayHtml && renderedDir) {
+      const indexPath = path23.join(renderedDir, "index.html");
       const html = await readFile15(indexPath, "utf-8");
       await writeFile9(indexPath, injectAdBrandOverlay(html, overlayHtml), "utf-8");
     }
-    const opts = {
-      imageModel: AD_IMAGE_MODEL,
-      videoModel: DEFAULT_VIDEO_GENERATE_MODEL,
-      overlayCompositionPath: path23.relative(outDir, compositionDest),
-      captionsCompositionPath: path23.relative(outDir, captionsDest),
-      blueprintPath: path23.relative(outDir, blueprintPath),
-      blueprintStylePath: path23.relative(outDir, blueprintStylePath),
-      aspect: spec.data.format.aspect_ratio,
-      resolution: spec.data.format.resolution,
-      // A beat is one clause and one card, so the cap has to clear a whole clause.
-      // The composition's default of 3 is TikTok karaoke styling; applied to an ad
-      // it overrode the clause rule on every line and rendered "IS STANDARD. WE".
-      // 8 is the composition's own maximum and clears every beat measured here.
-      captionWordsPerGroup: 8
-    };
-    const canvas = scaffoldVideoCanvas(blueprint, adSpecCastElements(spec.data), opts);
     await writeFile9(outPath, `${JSON.stringify(canvas, null, 2)}
 `, "utf-8");
     writeJson({