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

package/README.md

@@ -4066,8 +4066,37 @@ baker canvas catalog --node video_generate
 #    multi-line / accented copy; the edit is re-validated before it is written back)
 baker canvas set-prompt my-canvas.json s0_start --text "Close-up, flushed and breathless"
 baker canvas set-prompt my-canvas.json s0_start --text-file ./hook-frame.txt
+
+# 6. Set a static ad's words without editing prompt.json by hand. No flags lists
+#    every line with its role and layout region; flags change them in the copy
+#    and the layout together and keep everything else in prompt.json.
+baker canvas copy spring-offer
+baker canvas copy spring-offer --headline "Nine days, not 31." --cta "Book your free survey" \
+  --line body="Scaffolding included" --line body="MCS certificate included" \
+  --line eyebrow@header="ROOFTOP SOLAR" --treatment cta=pill --remove caption --remove-logo
 ```
 
+`baker canvas copy <slug>` flags:
+
+| Flag | What it does |
+|---|---|
+| `--headline`, `--sub`, `--cta` | Shorthand for `--line headline=…`, `--line subheadline=…`, `--line cta=…` |
+| `--line <role>[@<region>]=<text>` | Repeatable. A role you name gets exactly the lines you give, in order; old extra ones are dropped. A new line goes to the region of its role's last line, or the region you name. Roles: `headline`, `subheadline`, `body`, `cta`, `caption`, `fine_print`, `eyebrow` |
+| `--remove <role>` | Repeatable. Drops every line of that role |
+| `--treatment <role>=<kind>` | `plain`, `underline`, `arrow`, `button`, `pill`, `sticker`, `highlight` |
+| `--color <role>=<#rrggbb>` | The ink of that role's lines |
+| `--remove-logo` | Draws the ad without a logo |
+| `--mechanism "<verbal\|visual\|structural>: <device>"` | Repeatable. Replaces the reference's winning mechanisms with ours |
+| `--alternate "<hook>"` | Repeatable. Records a hook alternate on the creative's `_definition.md` |
+| `--spec <file.json>` | The same fields as JSON, for long copy |
+| `--dry-run` | Prints the changes without writing |
+
+It refuses, before writing anything, a role it does not know, a region the layout does not have, a new
+line with no region to go to, and copy that says the same line twice. Replacing the headline that is
+the creative's recorded `hook` keeps the old one in `hookAlternates` and makes the new one the hook.
+The output lists each change, the resulting copy, what was recorded, and the next command
+(`baker canvas run <slug> --draft`).
+
 #### The brand, the ending and the cast are drawn, not generated
 
 `baker canvas scaffold-ad` renders everything with a known, fixed appearance locally,
@@ -5513,6 +5542,9 @@ Takes a creative's slug (`baker canvas run spring-offer`) or a canvas path, reso
 | `--remote-cache <on\|off>` | `on` (or `BAKER_CANVAS_REMOTE_CACHE`) | Company-scoped remote cache + durable asset persistence. |
 | `--max-credits <n>` | uncapped (or `BAKER_CANVAS_MAX_CREDITS`) | Credit ceiling: aborts before billing when the estimate exceeds it, and at layer boundaries once actual spend does. Completed nodes stay cached, so retrying with a higher cap loses nothing. |
 | `--no-record` | records | Skip posting the durable run-history record (and its live progress). |
+| `--draft` | off | A static ad only: render one picture at `high` quality with no judge, then draw and review every format exactly as the final does. Iterate on the copy and the layout with it, and run once without it for the final (three pictures at the best quality, judged). The canvas file is not changed. |
+
+`stats.total_credits` is what the credits ledger debits for the run: each node's charge as the backend billed it (an estimate only when it reported none), plus the review's own model calls. `validate`'s figure is an estimate.
 
 **Run history streams live.** The run posts its plan (every node + its dependency edges) the moment validation passes, then re-posts a progress snapshot as each node starts and settles — the dashboard's creative workflow graph shows nodes flipping pending → running → done in real time, with each node's outputs attached as they land. A failed run keeps its per-node trail (what completed, what died). All best-effort: an unreachable backend never changes the run's outcome.
 
@@ -5664,7 +5696,7 @@ baker canvas run spring-offer
 | `--layout-model <id>` | registry default (`~google/gemini-flash-latest`) | Override the global-layout `text_generate` model. |
 | `--gen-model <id>` | `openai/gpt-image-2.5-sunburst` | Override the plate model. |
 | `--takes <n>` | `3` | Plates rendered and judged (1-3); `1` skips the judge. A text-only ad renders none. |
-| `--text-only` | on when the reference pictures nothing but copy | Draw a typographic ad: no picture generated, the copy on the brand colours in its fonts. `--no-text-only` renders a picture anyway. |
+| `--text-only` | on when the reference pictures nothing but copy (a note, a letter, a comparison with no photo) | Draw a typographic ad: no picture generated; each line in the colour, weight and size prompt.json gives it, on the layout's background colour, with its cards, dividers, icons, tick and cross marks and app chrome. `--no-text-only` renders a picture anyway. |
 | `--platform <channel>` | `meta` | `_definition.md` channel **and** the default placement set the hero fans out to (`meta`\|`google`\|`linkedin`\|`tiktok`\|`youtube`\|`x`\|`other`; `x`/`other` fan out to nothing). Any other value is refused. |
 | `--placements <preset\|none>` | derived from `--platform` | Override the fan-out set: `meta_feed`\|`meta_feed_stories`\|`meta_all`\|`linkedin`\|`google_demandgen`\|`tiktok`\|`youtube`, or `none` for a single base ad. |
 | `--aspect <ratio>` | inferred from the image, else `9:16` | Force the lead format (it leads the placement set when the set has it): `1:1`, `4:5`, `9:16`, `16:9`, `4:3`, `3:4`, `2:3`, `3:2` or `21:9`. |

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

@@ -20,10 +20,18 @@
       .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; }
+      .fill { display: inline-block; line-height: 1.1; padding: 0.5em 1.2em; white-space: nowrap; }
       .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>
@@ -122,6 +130,8 @@
           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);
@@ -146,6 +156,91 @@
           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;
@@ -154,6 +249,11 @@
           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";
@@ -169,15 +269,29 @@
             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 {
-            el.textContent = text;
+            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.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)";
@@ -186,6 +300,7 @@
         }
 
         var drawCopy = FRAME.draw_copy !== false;
+        (hasPlate ? [] : AD.shapes || []).forEach(addShape);
         (drawCopy ? AD.copy || [] : []).forEach(addBlock);
         if (AD.logo) addLogo(AD.logo);
 
@@ -198,7 +313,9 @@
         // layout is written.
         function fit(el) {
           var max = Number(el.dataset.max);
-          var width = el.getBoundingClientRect().width;
+          // 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 scale = 1;
           for (var i = 0; i < 40; i++) {
             var tooTall = el.scrollHeight > max;
@@ -209,10 +326,42 @@
             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.
@@ -243,7 +392,9 @@
 
         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 the brand colours) with what the concept holds drawn on top",
+  "title": "Static ad: the picture (or, text-only, the layout drawn from prompt.json) 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,