@koda-sl/baker-cli 0.396.0-dev.88120240 → 0.396.0

package/canvas/static-ad-composition/index.html

@@ -5,8 +5,10 @@
     <meta name="viewport" content="width=__WIDTH__, height=__HEIGHT__" />
     <script src="./gsap.min.js"></script>
     <style>
-      /* The brand's own faces, staged beside this file by the render. One range per face,
-         so a single-weight file is used as it is instead of being faked bolder. */
+      /* The ad's own faces, staged beside this file by the render (a brand file or a web font
+         file). One range per face, so a single-weight file is used as it is instead of being
+         faked bolder. The browser fetches a face only when text uses it, and text uses it
+         only when a face was staged (see FRAME.fonts below). */
       @font-face { font-family: 'AdHeadline'; src: url('./headline.font'); font-weight: 100 900; font-display: block; }
       @font-face { font-family: 'AdBody'; src: url('./body.font'); font-weight: 100 900; font-display: block; }
       * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -14,22 +16,20 @@
       #root { position: absolute; inset: 0; overflow: hidden; }
       .plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
       .scrim { position: absolute; left: 0; right: 0; pointer-events: none; display: none; }
-      .band { position: absolute; display: flex; flex-direction: column; gap: 0; }
+      .group { position: absolute; display: flex; flex-direction: column; gap: 0; }
       .block { font-family: 'AdBody', 'Helvetica Neue', Arial, sans-serif; overflow-wrap: break-word; text-wrap: pretty; }
       .block.headline, .block.subheadline, .block.cta { font-family: 'AdHeadline', 'AdBody', 'Helvetica Neue', Arial, sans-serif; }
       .block.headline { text-wrap: balance; letter-spacing: -0.01em; }
-      .cta-pill { display: inline-block; border-radius: 999px; font-weight: 700; line-height: 1.1; }
+      .fill { display: inline-block; line-height: 1.1; padding: 0.5em 1.2em; }
+      .fill.highlight { padding: 0.12em 0.4em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
+      .fill.sticker { transform: rotate(-3deg); }
       .logo { display: block; width: auto; object-fit: contain; }
     </style>
   </head>
   <body>
     <div id="root" data-composition-id="main" data-start="0" data-duration="1" data-width="__WIDTH__" data-height="__HEIGHT__">
-      <img class="plate" id="plate" src="./plate.png" alt="" />
       <div class="scrim" id="scrim-top"></div>
       <div class="scrim" id="scrim-bottom"></div>
-      <div class="band" id="band-top" data-role="copy-top"></div>
-      <div class="band" id="band-middle" data-role="copy-middle"></div>
-      <div class="band" id="band-bottom" data-role="copy-bottom"></div>
     </div>
 
     <script>
@@ -43,11 +43,31 @@
         var box = { x: safe.left * W, y: safe.top * H, w: W * (1 - safe.left - safe.right), h: H * (1 - safe.top - safe.bottom) };
         // One unit per percent of the shorter side, so type reads the same size on every format.
         var U = Math.min(W, H) / 100;
+        // A text-only ad has no picture (`plate: null`): the copy sits on the brand's ground.
+        var hasPlate = FRAME.plate !== null;
+        var ground = AD.background || { color: "#111111", ink: "#ffffff" };
 
         var SIZE = { x_large: 8.6, large: 6.6, medium: 4.4, small: 3.0 };
         var WEIGHT = { bold: 800, semibold: 600, regular: 400 };
         var CASE = { upper: "uppercase", title: "capitalize", sentence: "none" };
         var MAX_SHARE = { top: 0.44, middle: 0.3, bottom: 0.36 };
+        var RADIUS = { pill: "999px", rounded: "0.35em", square: "0" };
+
+        // With no face staged, the text never names the ad's faces, so the browser never asks
+        // for a file that is not there (a 404 the pre-render check refuses).
+        var FALLBACK_FACE = "'Helvetica Neue', Arial, sans-serif";
+        var facesStaged = FRAME.fonts !== false;
+
+        if (hasPlate) {
+          var plate = document.createElement("img");
+          plate.className = "plate";
+          plate.id = "plate";
+          plate.src = "./plate.png";
+          plate.alt = "";
+          root.insertBefore(plate, root.firstChild);
+        } else {
+          root.style.background = ground.color;
+        }
 
         function luma(hex) {
           var m = /^#?([0-9a-f]{6})$/i.exec(hex || "");
@@ -56,18 +76,23 @@
           return 0.2126 * ((v >> 16) & 255) + 0.7152 * ((v >> 8) & 255) + 0.0722 * (v & 255);
         }
 
-        var bands = { top: [], middle: [], bottom: [] };
-        var drawCopy = FRAME.draw_copy !== false;
-        (drawCopy ? AD.copy || [] : []).forEach(function (b) {
-          (bands[b.band] || bands.top).push(b);
+        function alignSelf(align) {
+          return align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
+        }
+
+        // Every line is drawn in its group: the layout region the reference put it in (placed
+        // at that region's box on this format), or a band when the layout gave no position.
+        var groups = {};
+        var bands = { top: null, middle: null, bottom: null };
+        (AD.groups || []).forEach(function (g) {
+          groups[g.id] = g;
         });
 
         function bandEl(name) {
-          return document.getElementById("band-" + name);
-        }
-
-        function place(name) {
-          var el = bandEl(name);
+          if (bands[name]) return bands[name];
+          var el = document.createElement("div");
+          el.className = "group band";
+          el.dataset.band = name;
           el.style.left = box.x + "px";
           el.style.width = box.w + "px";
           el.style.gap = 1.6 * U + "px";
@@ -77,80 +102,110 @@
             el.style.top = box.y + box.h / 2 + "px";
             el.style.transform = "translateY(-50%)";
           }
+          el.dataset.max = String(box.h * MAX_SHARE[name]);
+          root.appendChild(el);
+          bands[name] = el;
+          return el;
         }
 
-        function alignSelf(align) {
-          return align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
+        var placed = {};
+        function containerFor(groupId, band) {
+          var g = groups[groupId];
+          var at = g && g.at && g.at[FRAME.format];
+          if (!at) return bandEl((g && g.band) || band || "top");
+          if (placed[groupId]) return placed[groupId];
+          var el = document.createElement("div");
+          el.className = "group placed";
+          el.style.left = (at.x[0] / 100) * W + "px";
+          el.style.width = ((at.x[1] - at.x[0]) / 100) * W + "px";
+          el.style.top = (at.y[0] / 100) * H + "px";
+          el.style.minHeight = ((at.y[1] - at.y[0]) / 100) * H + "px";
+          el.style.justifyContent = "center";
+          el.style.gap = 1.2 * U + "px";
+          // Copy rewritten for our brand runs longer than the source's: allow some growth
+          // past the region before the type shrinks.
+          el.dataset.max = String(((at.y[1] - at.y[0]) / 100) * H * 1.35);
+          root.appendChild(el);
+          placed[groupId] = el;
+          return el;
         }
 
-        function addLogo(name, align) {
+        function addLogo(logo) {
           var img = document.createElement("img");
           img.className = "logo";
           img.src = "./logo.png";
           img.alt = "";
           img.style.height = 5.4 * U + "px";
           img.style.maxWidth = box.w * 0.42 + "px";
-          img.style.alignSelf = alignSelf(align);
+          img.style.alignSelf = alignSelf(logo.align);
           img.onerror = function () {
             img.remove();
           };
-          var el = bandEl(name);
-          if (name === "bottom") el.appendChild(img);
+          var el = containerFor(logo.group, logo.band);
+          if (el.dataset.band === "bottom") el.appendChild(img);
           else el.insertBefore(img, el.firstChild);
         }
 
-        function addBlock(name, b) {
+        function addBlock(b) {
           var el = document.createElement("div");
           el.className = "block " + b.role;
-          el.dataset.size = String(SIZE[b.size] || SIZE.medium);
-          var size = b.role === "fine_print" ? 2.4 : b.role === "cta" ? 4.2 : SIZE[b.size] || SIZE.medium;
+          if (!facesStaged) el.style.fontFamily = FALLBACK_FACE;
+          var size = b.role === "fine_print" ? 2.4 : SIZE[b.size] || SIZE.medium;
           el.dataset.base = String(size);
           el.style.fontSize = size * U + "px";
-          el.style.fontWeight = String(b.role === "cta" ? 700 : WEIGHT[b.weight] || 400);
+          el.style.fontWeight = String(WEIGHT[b.weight] || (b.role === "cta" ? 700 : 400));
           el.style.lineHeight = b.role === "headline" ? "1.04" : "1.22";
           el.style.textTransform = CASE[b.case] || "none";
           el.style.textAlign = b.align || "center";
           el.style.alignSelf = alignSelf(b.align);
-          if (b.role === "cta") {
-            var pill = document.createElement("span");
-            pill.className = "cta-pill";
-            pill.textContent = b.text;
-            pill.style.background = AD.cta.background;
-            pill.style.color = AD.cta.color;
-            pill.style.padding = "0.55em 1.4em";
-            el.appendChild(pill);
+          var t = b.treatment || { kind: b.role === "cta" && !AD.groups ? "button" : "plain" };
+          var ink = b.color || (hasPlate ? "#ffffff" : ground.ink);
+          var text = b.text;
+          if (t.kind === "arrow" && !/[→›»]\s*$/.test(text)) text = text + " →";
+          if (t.kind === "button" || t.kind === "sticker" || t.kind === "highlight") {
+            var fill = document.createElement("span");
+            fill.className = "fill " + t.kind;
+            fill.textContent = text;
+            fill.style.background = t.background || (AD.cta && AD.cta.background) || "#111111";
+            fill.style.color = t.color || (AD.cta && AD.cta.color) || "#ffffff";
+            fill.style.borderRadius = RADIUS[t.shape] || RADIUS.rounded;
+            el.appendChild(fill);
           } else {
-            el.textContent = b.text;
-            var ink = b.color || "#ffffff";
+            el.textContent = text;
             el.style.color = ink;
+            if (t.kind === "underline") {
+              el.style.textDecoration = "underline";
+              el.style.textDecorationThickness = "0.08em";
+              el.style.textUnderlineOffset = "0.18em";
+            }
             var dark = (luma(ink) || 255) < 110;
-            el.style.textShadow = dark ? "0 1px 10px rgba(255,255,255,0.35)" : "0 2px 14px rgba(0,0,0,0.45)";
             el.dataset.dark = dark ? "1" : "0";
+            if (hasPlate) el.style.textShadow = dark ? "0 1px 10px rgba(255,255,255,0.35)" : "0 2px 14px rgba(0,0,0,0.45)";
           }
-          bandEl(name).appendChild(el);
+          containerFor(b.group, b.band).appendChild(el);
         }
 
-        ["top", "middle", "bottom"].forEach(function (name) {
-          place(name);
-          bands[name].forEach(function (b) {
-            addBlock(name, b);
-          });
-        });
-        if (AD.logo) addLogo(AD.logo.band, AD.logo.align);
-
-        // Shrink a band's type until it fits its share of the safe area and no line runs
-        // past the edge. The copy is whatever prompt.json says today, so its length is
-        // not known when the layout is written.
-        function fit(name) {
-          var el = bandEl(name);
-          var max = box.h * MAX_SHARE[name];
+        var drawCopy = FRAME.draw_copy !== false;
+        (drawCopy ? AD.copy || [] : []).forEach(addBlock);
+        if (AD.logo) addLogo(AD.logo);
+
+        function containers() {
+          return Array.prototype.slice.call(root.querySelectorAll(".group"));
+        }
+
+        // Shrink a group's type until it fits its room and no line runs past its edge. The
+        // copy is whatever prompt.json says today, so its length is not known when the
+        // layout is written.
+        function fit(el) {
+          var max = Number(el.dataset.max);
+          var width = el.getBoundingClientRect().width;
           var scale = 1;
           for (var i = 0; i < 40; i++) {
             var tooTall = el.scrollHeight > max;
             var tooWide = Array.prototype.some.call(el.children, function (c) {
-              return c.scrollWidth > box.w + 1;
+              return c.scrollWidth > width + 1;
             });
-            if (!tooTall && !tooWide) break;
+            if ((!tooTall && !tooWide) || scale < 0.45) break;
             scale *= 0.94;
             Array.prototype.forEach.call(el.querySelectorAll(".block"), function (c) {
               c.style.fontSize = Number(c.dataset.base) * U * scale + "px";
@@ -158,15 +213,16 @@
           }
         }
 
-        // A soft scrim behind a band of light type (or a light one behind dark type), so the
-        // copy reads on any plate without boxing it in.
+        // A soft scrim behind a band of light type over the picture (or a light one behind
+        // dark type), so copy with no position of its own reads on any plate. Copy placed
+        // by the layout sits on the calm area the plate kept for it.
         function scrim(name) {
-          if (name === "middle" || bands[name].length === 0) return;
-          var el = bandEl(name);
+          var el = bands[name];
+          if (!hasPlate || !el) return;
           var s = document.getElementById("scrim-" + name);
-          var firstText = el.querySelector(".block:not(.cta)");
-          var dark = firstText && firstText.dataset.dark === "1";
-          var tint = dark ? "255,255,255" : "0,0,0";
+          var firstText = el.querySelector(".block[data-dark]");
+          if (!firstText) return;
+          var tint = firstText.dataset.dark === "1" ? "255,255,255" : "0,0,0";
           var rect = el.getBoundingClientRect();
           var reach = name === "top" ? rect.bottom + 6 * U : H - rect.top + 6 * U;
           s.style.display = "block";
@@ -187,7 +243,7 @@
 
         var ready = document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
         ready.then(function () {
-          ["top", "middle", "bottom"].forEach(fit);
+          containers().forEach(fit);
           ["top", "bottom"].forEach(scrim);
           root.setAttribute("data-ready", "1");
         });

package/canvas/static-ad-composition/meta.json

@@ -1,7 +1,7 @@
 {
   "id": "static-ad",
-  "title": "Static ad: a rendered plate with the copy, the call to action and the logo drawn on top",
-  "description": "Written by `baker canvas scaffold-static-ad`, one copy per delivered format. The plate is the image model's clean picture; the copy, the CTA and the logo are drawn here from prompt.compose.json (derived from prompt.json) in the brand's own fonts and logo file. Width and height are this format's delivered size.",
+  "title": "Static ad: the picture (or the brand colours) with what the concept holds drawn on top",
+  "description": "Written by `baker canvas scaffold-static-ad`, one copy per delivered format. Draws only what prompt.compose.json (derived from prompt.json) holds: each line of copy where the source layout placed it, set the way the reference set it (plain, underlined, with an arrow, as a button or sticker), in the staged fonts, and the logo file only when the concept shows one. The plate is the image model's clean picture; a text-only ad has none and sits on the brand colour. Width and height are this format's delivered size.",
   "width": 1080,
   "height": 1350,
   "fps": 1,
@@ -9,15 +9,15 @@
   "inputs": {
     "plate": {
       "kind": "image",
-      "required": true,
+      "required": false,
       "staged_as": "plate.png",
-      "description": "The picture, with no text and no logo."
+      "description": "The picture, with no overlay text and no logo. Absent for a text-only ad."
     },
     "logo": {
       "kind": "image",
       "required": false,
       "staged_as": "logo.png",
-      "description": "The brand's logo file."
+      "description": "The brand logo file, wired only when the concept shows a logo."
     },
     "font_headline": {
       "kind": "font",
@@ -47,7 +47,7 @@
     "frame": {
       "kind": "json",
       "required": true,
-      "description": "This format's safe area and whether the copy is drawn here."
+      "description": "This format: its safe area, whether copy is drawn, the picture it is cut from (plate: null for none), and whether fonts are staged."
     }
   }
 }

package/dist/{chunk-7OVZ6SOA.js → chunk-BRIJ4OWT.js}

@@ -947,6 +947,12 @@ function round2(value) {
 function asRecord(value) {
   return value && typeof value === "object" ? value : {};
 }
+function bakerUses(value) {
+  const uses = asRecord(value);
+  const companies = typeof uses.companies === "number" ? uses.companies : 0;
+  if (companies === 0) return {};
+  return { baker_uses: companies, ...uses.ours === true ? { already_adapted: true } : {} };
+}
 function compactWinningAd(record) {
   const dna = asRecord(record.dna);
   return {
@@ -959,6 +965,10 @@ function compactWinningAd(record) {
     advertiser_id: String(record.advertiser_id ?? ""),
     ad_id: String(record.ad_id ?? ""),
     media_url: String(record.media_url ?? ""),
+    ...typeof dna.visual === "string" && dna.visual ? { visual: dna.visual } : {},
+    ...typeof dna.container === "string" && dna.container ? { container: dna.container } : {},
+    ...typeof dna.mechanism === "string" && dna.mechanism ? { mechanism: dna.mechanism } : {},
+    ...bakerUses(record.baker_uses),
     ...record.source === "followed" || record.source === "library" ? { source: record.source } : {}
   };
 }
@@ -976,6 +986,7 @@ function fullWinningAd(record) {
     awareness_stage: dna.awareness_stage ?? null,
     target_persona: dna.target_persona ?? null,
     hook_archetype: dna.hook_archetype ?? null,
+    mechanism: dna.mechanism ?? null,
     industry: dna.industry ?? null
   };
 }
@@ -1300,4 +1311,4 @@ export {
   captureVimeoCookie,
   childEnvWith
 };
-//# sourceMappingURL=chunk-7OVZ6SOA.js.map
+//# sourceMappingURL=chunk-BRIJ4OWT.js.map