@koda-sl/baker-cli 0.395.0-dev.f8ecbaa42 → 0.395.0

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

@@ -20,18 +20,10 @@
       .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; }
-      .fill { display: inline-block; line-height: 1.1; padding: 0.5em 1.2em; white-space: nowrap; }
+      .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); }
-      .fill.outline { background: transparent !important; border: 0.09em solid currentColor; }
       .logo { display: block; width: auto; object-fit: contain; }
-      .shape { position: absolute; pointer-events: none; }
-      .shape svg { display: block; height: 100%; width: auto; }
-      .shape.chrome { display: flex; align-items: center; justify-content: space-between; }
-      .chrome-back { display: flex; align-items: center; gap: 0.2em; font-family: 'AdBody', 'Helvetica Neue', Arial, sans-serif; }
-      .chrome-more { display: flex; align-items: center; justify-content: center; border-radius: 999px; }
-      .block.mark { display: flex; align-items: flex-start; gap: 0.45em; }
-      .block.mark svg { flex: none; width: 1.05em; height: 1.05em; margin-top: 0.1em; }
     </style>
   </head>
   <body>
@@ -130,8 +122,6 @@
           el.style.minHeight = ((at.y[1] - at.y[0]) / 100) * H + "px";
           el.style.justifyContent = "center";
           el.style.gap = 1.2 * U + "px";
-          // A card's lines keep off its edges.
-          if (g.inset) el.style.padding = 2.6 * U + "px " + 3.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);
@@ -156,91 +146,6 @@
           else el.insertBefore(img, el.firstChild);
         }
 
-        // The structures of a text-only ad, each at its layout region's box on this format:
-        // cards and panels, dividers, icons and an app's chrome. Drawn before the copy, under it.
-        var ICON_PATHS = {
-          check: '<path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="C" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>',
-          cross: '<path d="M6.5 6.5l11 11M17.5 6.5l-11 11" fill="none" stroke="C" stroke-width="3" stroke-linecap="round"/>',
-          dots: '<circle cx="5" cy="12" r="2" fill="C"/><circle cx="12" cy="12" r="2" fill="C"/><circle cx="19" cy="12" r="2" fill="C"/>',
-          chevron_left: '<path d="M15 4.5L7.5 12 15 19.5" fill="none" stroke="C" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>',
-          arrow_right: '<path d="M4 12h15M13 6l6 6-6 6" fill="none" stroke="C" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>',
-          star: '<path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z" fill="C"/>',
-          heart: '<path d="M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z" fill="C"/>',
-        };
-        function icon(name, color) {
-          var path = ICON_PATHS[name] || "";
-          return '<svg viewBox="0 0 24 24" aria-hidden="true">' + path.split('"C"').join('"' + color + '"') + "</svg>";
-        }
-        var SHAPE_RADIUS = { pill: "999px", rounded: 2.4 * U + "px", square: "0" };
-        function addShape(s) {
-          var at = s.at && s.at[FRAME.format];
-          if (!at) return;
-          var left = (at.x[0] / 100) * W;
-          var top = (at.y[0] / 100) * H;
-          var width = ((at.x[1] - at.x[0]) / 100) * W;
-          var height = ((at.y[1] - at.y[0]) / 100) * H;
-          var el = document.createElement("div");
-          el.className = "shape " + s.kind;
-          el.setAttribute("data-layout-ignore", "");
-          el.style.left = left + "px";
-          el.style.top = top + "px";
-          el.style.width = width + "px";
-          el.style.height = height + "px";
-          if (s.kind === "box") {
-            el.style.background = s.fill || "transparent";
-            if (s.border) el.style.border = Math.max(2, 0.28 * U) + "px solid " + s.border;
-            el.style.borderRadius = SHAPE_RADIUS[s.radius] || SHAPE_RADIUS.rounded;
-            if (s.shadow) el.style.boxShadow = "0 " + 0.8 * U + "px " + 2.6 * U + "px rgba(0,0,0,0.18)";
-          } else if (s.kind === "rule") {
-            var thick = Math.max(2, 0.32 * U);
-            el.style.background = s.color;
-            if (width >= height) {
-              el.style.top = top + height / 2 - thick / 2 + "px";
-              el.style.height = thick + "px";
-            } else {
-              el.style.left = left + width / 2 - thick / 2 + "px";
-              el.style.width = thick + "px";
-            }
-          } else if (s.kind === "icon") {
-            el.style.display = "flex";
-            el.style.justifyContent = "center";
-            el.style.alignItems = "center";
-            if (s.ring) {
-              // A circled icon (a note's "more" button): the ring is as tall as the region.
-              var ring = Math.min(width, height);
-              var circle = document.createElement("div");
-              circle.className = "chrome-more";
-              circle.style.width = ring + "px";
-              circle.style.height = ring + "px";
-              circle.style.border = Math.max(2, ring * 0.07) + "px solid " + s.color;
-              circle.innerHTML = '<span style="display:block;height:' + ring * 0.6 + 'px">' + icon(s.icon, s.color) + "</span>";
-              el.appendChild(circle);
-            } else {
-              el.innerHTML = icon(s.icon, s.color);
-            }
-          } else if (s.kind === "chrome") {
-            var size = Math.min(height * 0.62, 5 * U);
-            var back = document.createElement("div");
-            back.className = "chrome-back";
-            if (!facesStaged) back.style.fontFamily = FALLBACK_FACE;
-            back.style.color = s.color;
-            back.style.fontSize = size + "px";
-            back.innerHTML = '<span style="display:block;height:1.1em">' + icon("chevron_left", s.color) + "</span>";
-            var label = document.createElement("span");
-            label.textContent = s.label;
-            back.appendChild(label);
-            var more = document.createElement("div");
-            more.className = "chrome-more";
-            more.style.width = size * 1.35 + "px";
-            more.style.height = size * 1.35 + "px";
-            more.style.border = Math.max(2, size * 0.09) + "px solid " + s.color;
-            more.innerHTML = '<span style="display:block;height:' + size * 0.8 + 'px">' + icon("dots", s.color) + "</span>";
-            el.appendChild(back);
-            if (s.more) el.appendChild(more);
-          }
-          root.appendChild(el);
-        }
-
         function addBlock(b) {
           var el = document.createElement("div");
           el.className = "block " + b.role;
@@ -249,11 +154,6 @@
           el.dataset.base = String(size);
           el.style.fontSize = size * U + "px";
           el.style.fontWeight = String(WEIGHT[b.weight] || (b.role === "cta" ? 700 : 400));
-          // A staged face is one weight, so a line prompt.json sets bold (a bold paragraph, a
-          // sign-off) is drawn in the heavy face whatever its role.
-          if (facesStaged && WEIGHT[b.weight] >= 600) {
-            el.style.fontFamily = "'AdHeadline', 'AdBody', 'Helvetica Neue', Arial, sans-serif";
-          }
           el.style.lineHeight = b.role === "headline" ? "1.04" : "1.22";
           el.style.textTransform = CASE[b.case] || "none";
           el.style.textAlign = b.align || "center";
@@ -269,29 +169,15 @@
             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;
-            if (t.outline) fill.classList.add("outline");
             el.appendChild(fill);
           } else {
-            if (t.kind === "mark") {
-              // A tick or cross list item: the mark in its own colour, then the line.
-              el.classList.add("mark");
-              el.innerHTML = icon(t.mark, t.color);
-              var words = document.createElement("span");
-              words.textContent = text;
-              el.appendChild(words);
-            } else {
-              el.textContent = text;
-            }
+            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";
             }
-            if (t.kind === "strike") {
-              el.style.textDecoration = "line-through";
-              el.style.textDecorationThickness = "0.08em";
-            }
             var dark = (luma(ink) || 255) < 110;
             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)";
@@ -300,7 +186,6 @@
         }
 
         var drawCopy = FRAME.draw_copy !== false;
-        (hasPlate ? [] : AD.shapes || []).forEach(addShape);
         (drawCopy ? AD.copy || [] : []).forEach(addBlock);
         if (AD.logo) addLogo(AD.logo);
 
@@ -313,9 +198,7 @@
         // layout is written.
         function fit(el) {
           var max = Number(el.dataset.max);
-          // The room inside a card's padding, not the card's outer width.
-          var pad = getComputedStyle(el);
-          var width = el.getBoundingClientRect().width - parseFloat(pad.paddingLeft) - parseFloat(pad.paddingRight);
+          var width = el.getBoundingClientRect().width;
           var scale = 1;
           for (var i = 0; i < 40; i++) {
             var tooTall = el.scrollHeight > max;
@@ -326,42 +209,10 @@
             scale *= 0.94;
             Array.prototype.forEach.call(el.querySelectorAll(".block"), function (c) {
               c.style.fontSize = Number(c.dataset.base) * U * scale + "px";
-              c.dataset.scale = String(scale);
             });
           }
         }
 
-        // A region's copy may run past its box, but never into the next region down the same
-        // column: the room it has ends where that one starts.
-        function keepClearOfNext(el) {
-          var r = el.getBoundingClientRect();
-          var room = Infinity;
-          Array.prototype.forEach.call(root.querySelectorAll(".group.placed"), function (other) {
-            if (other === el) return;
-            var q = other.getBoundingClientRect();
-            var sameColumn = Math.min(r.right, q.right) - Math.max(r.left, q.left) > 0;
-            if (sameColumn && q.top > r.top + 1) room = Math.min(room, q.top - r.top - 0.8 * U);
-          });
-          // Two regions the format already stacks on each other are left as they are: holding
-          // one to less than its own box would only shrink its type to nothing.
-          if (room === Infinity || room < parseFloat(el.style.minHeight)) return;
-          el.dataset.max = String(Math.min(Number(el.dataset.max), room));
-        }
-
-        // Lines set at one size in prompt.json stay one size in the ad: every one is drawn at
-        // the smallest scale any of them needed to fit.
-        function evenSizes() {
-          var least = {};
-          var blocks = Array.prototype.slice.call(root.querySelectorAll(".block"));
-          blocks.forEach(function (b) {
-            var s = Number(b.dataset.scale || 1);
-            least[b.dataset.base] = Math.min(least[b.dataset.base] || 1, s);
-          });
-          blocks.forEach(function (b) {
-            b.style.fontSize = Number(b.dataset.base) * U * least[b.dataset.base] + "px";
-          });
-        }
-
         // 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.
@@ -392,9 +243,7 @@
 
         var ready = document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
         ready.then(function () {
-          Array.prototype.forEach.call(root.querySelectorAll(".group.placed"), keepClearOfNext);
           containers().forEach(fit);
-          evenSizes();
           ["top", "bottom"].forEach(scrim);
           root.setAttribute("data-ready", "1");
         });

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

@@ -1,6 +1,6 @@
 {
   "id": "static-ad",
-  "title": "Static ad: the picture (or, text-only, the layout drawn from prompt.json) with what the concept holds drawn on top",
+  "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,

package/dist/{chunk-AOVFDDVW.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 {
@@ -958,7 +964,12 @@ function compactWinningAd(record) {
     summary: String(dna.creative_concept ?? ""),
     advertiser_id: String(record.advertiser_id ?? ""),
     ad_id: String(record.ad_id ?? ""),
-    media_url: String(record.media_url ?? "")
+    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 } : {}
   };
 }
 function fullWinningAd(record) {
@@ -975,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
   };
 }
@@ -1299,4 +1311,4 @@ export {
   captureVimeoCookie,
   childEnvWith
 };
-//# sourceMappingURL=chunk-AOVFDDVW.js.map
+//# sourceMappingURL=chunk-BRIJ4OWT.js.map