@koda-sl/baker-cli 0.403.0 → 0.404.0

package/README.md

@@ -4049,6 +4049,21 @@ baker canvas validate my-canvas.json
 #    Where `hyperframes` is installed, a static ad's composition is laid out with the copy and
 #    fonts the run will draw, over a stand-in picture: two lines of copy that collide are refused
 #    as `layout/content_overlap` before any picture is paid for.
+#    At render, each static format reads the picture it is drawn on: a line that would sit on
+#    the subject, a device or the seam of two painted panels moves to the nearest calm room
+#    (never past another line, never more than a few of its own heights), takes white or
+#    near-black when its own colour does not read (WCAG 3:1, display type), or gets a frosted
+#    surface when no room is calm. A region's card or pill is drawn with its words; when the
+#    picture painted that shape anyway, the drawn panel is laid over it (a creative scaffolded
+#    before this draws a panel only there, so its plates stay cached). Copy never shrinks
+#    below 72% of its size. The static-ad template in each creative's `layout-*/` folders is
+#    refreshed on every validate and run.
+#    Before the pictures are painted, the scene's subjects are read (Jev, OpenRouter) for
+#    shapes made to hold copy, each matched to a shape the composition draws (or none); the
+#    plate leaves out only the matched ones, and is told which shapes the designer draws
+#    (`drawn_by_designer` in prompt.plate.json); each answer is kept in
+#    `prompt.compose.json` (`scene_reads`), and one Jev could not give is kept as part of the
+#    picture, so the plate spec does not change between runs.
 
 # 2. Run (executes nodes, writes files to ./canvas/<run_id>/)
 baker canvas run my-canvas.json

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

@@ -24,6 +24,8 @@
       .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; }
+      .group.panel { box-sizing: border-box; }
+      .backing { position: absolute; pointer-events: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
     </style>
   </head>
   <body>
@@ -49,7 +51,8 @@
 
         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" };
+        // Title case is left as written: `capitalize` also raised "and", "of" and "de".
+        var CASE = { upper: "uppercase", title: "none", sentence: "none" };
         var MAX_SHARE = { top: 0.44, middle: 0.3, bottom: 0.36 };
         var RADIUS = { pill: "999px", rounded: "0.35em", square: "0" };
 
@@ -69,13 +72,300 @@
           root.style.background = ground.color;
         }
 
-        function luma(hex) {
+        // <plate-layout>
+        // Where the copy can go, read off the picture this format actually shows. The layout
+        // placed each line where the REFERENCE had room; the picture model does not always
+        // leave that room, and an extended format moves it. So each line group is checked
+        // against the picture under it and, when it sits on something (a subject, a device,
+        // a painted edge), moved to the nearest calm room clear of the other lines, or given
+        // a surface to sit on when no such room exists. Pure: a grid of cells in, a plan out.
+        // Calibrated on production plates: the grain of a generated picture reads 0.1-0.25,
+        // a faint icon pattern up to ~0.4, a device, a product or a photo of shelves 0.5-1.
+        var BUSY_CELL = 0.4;
+        // The share of any one line that may sit on busy cells before it moves: a tenth, since an
+        // edge through the foot of a line already reads as the line crossing the object.
+        var OK_CLUTTER = 0.1;
+        // Mean-luma step between neighbouring cells that marks the edge of a painted panel.
+        var SEAM_LUMA = 28;
+
+        // Per cell of `cell` pixels: how much edge detail it holds (0 calm .. 1 cluttered) and
+        // its mean luma. `px` is RGBA, `w`x`h` pixels, drawn at `scale` page px per pixel.
+        function busyMap(px, w, h, cell, scale) {
+          var cols = Math.ceil(w / cell);
+          var rows = Math.ceil(h / cell);
+          var L = new Float32Array(w * h);
+          for (var i = 0; i < w * h; i++) L[i] = 0.2126 * px[i * 4] + 0.7152 * px[i * 4 + 1] + 0.0722 * px[i * 4 + 2];
+          var busy = [];
+          var luma = [];
+          var rgb = [];
+          for (var r = 0; r < rows; r++) {
+            for (var c = 0; c < cols; c++) {
+              var g = 0;
+              var sum = 0;
+              var n = 0;
+              var cr = 0;
+              var cg = 0;
+              var cb = 0;
+              for (var y = r * cell; y < Math.min(h, (r + 1) * cell); y++) {
+                for (var x = c * cell; x < Math.min(w, (c + 1) * cell); x++) {
+                  var v = L[y * w + x];
+                  sum += v;
+                  cr += px[(y * w + x) * 4];
+                  cg += px[(y * w + x) * 4 + 1];
+                  cb += px[(y * w + x) * 4 + 2];
+                  if (x + 1 < w) g += Math.abs(L[y * w + x + 1] - v);
+                  if (y + 1 < h) g += Math.abs(L[(y + 1) * w + x] - v);
+                  n++;
+                }
+              }
+              busy.push(n ? Math.min(1, g / n / 40) : 0);
+              luma.push(n ? sum / n : 0);
+              rgb.push(n ? [cr / n, cg / n, cb / n] : [0, 0, 0]);
+            }
+          }
+          return { cols: cols, rows: rows, cellW: cell * scale, cellH: cell * scale, busy: busy, luma: luma, rgb: rgb };
+        }
+
+        // The cells a rect covers, each with the share of the rect's area it holds.
+        function coverage(map, rect) {
+          var out = [];
+          var area = Math.max(1, rect.w * rect.h);
+          var c0 = Math.max(0, Math.floor(rect.x / map.cellW));
+          var c1 = Math.min(map.cols - 1, Math.floor((rect.x + rect.w - 0.001) / map.cellW));
+          var r0 = Math.max(0, Math.floor(rect.y / map.cellH));
+          var r1 = Math.min(map.rows - 1, Math.floor((rect.y + rect.h - 0.001) / map.cellH));
+          for (var r = r0; r <= r1; r++) {
+            for (var c = c0; c <= c1; c++) {
+              var ox = Math.min(rect.x + rect.w, (c + 1) * map.cellW) - Math.max(rect.x, c * map.cellW);
+              var oy = Math.min(rect.y + rect.h, (r + 1) * map.cellH) - Math.max(rect.y, r * map.cellH);
+              if (ox > 0 && oy > 0) out.push({ i: r * map.cols + c, share: (ox * oy) / area });
+            }
+          }
+          return out;
+        }
+
+        // The share of a rect that sits on cluttered picture.
+        function clutter(map, rect) {
+          return coverage(map, rect).reduce(function (acc, k) {
+            return acc + (map.busy[k.i] > BUSY_CELL ? k.share : 0);
+          }, 0);
+        }
+
+        // Whether a rect straddles a seam: two neighbouring flat cells under it whose grounds
+        // differ sharply (the edge of a painted panel). A smooth gradient never does, and a
+        // photograph's light and shade is not flat, so neither counts.
+        function seam(map, rect) {
+          var cells = {};
+          coverage(map, rect).forEach(function (k) {
+            cells[k.i] = true;
+          });
+          return Object.keys(cells).some(function (key) {
+            var i = Number(key);
+            var right = (i + 1) % map.cols !== 0 && cells[i + 1] ? i + 1 : -1;
+            var down = cells[i + map.cols] ? i + map.cols : -1;
+            return [right, down].some(function (j) {
+              if (j < 0 || map.busy[i] >= FLAT_CELL || map.busy[j] >= FLAT_CELL) return false;
+              return Math.abs(map.luma[i] - map.luma[j]) > SEAM_LUMA;
+            });
+          });
+        }
+
+        // The worst line of an item moved by `dy`: a group reads only if every line does.
+        function worst(map, parts, dy) {
+          return parts.reduce(function (acc, p) {
+            var r = { x: p.x, y: p.y + dy, w: p.w, h: p.h };
+            return Math.max(acc, seam(map, r) ? 1 : clutter(map, r));
+          }, 0);
+        }
+
+        function overlaps(a, b, gap) {
+          return a.x < b.x + b.w + gap && b.x < a.x + a.w + gap && a.y < b.y + b.h + gap && b.y < a.y + a.h + gap;
+        }
+
+        function inside(r, safe) {
+          return r.y >= safe.y - 0.5 && r.y + r.h <= safe.y + safe.h + 0.5;
+        }
+
+        // Whether `cand` keeps its place in the reading order: every group sharing its column
+        // stays on the same side of it as before, a unit clear.
+        function keepsOrder(cand, from, other, gap) {
+          if (cand.x >= other.x + other.w || other.x >= cand.x + cand.w) return !overlaps(cand, other, gap);
+          return other.y >= from.y ? cand.y + cand.h + gap <= other.y : cand.y >= other.y + other.h + gap;
+        }
+
+        // One plan per item, in order: stay, move (dy) to the nearest calm room inside the safe
+        // area that keeps the reading order, or stay with a surface behind it. Each item is
+        // judged by its lines (`parts`), not the region box around them. A panel or a button is
+        // its own surface, so it may move but is never given a second one; a pinned item (a
+        // logo alone in its corner) never moves and gets a surface instead.
+        function placeGroups(map, frame, items) {
+          var rects = items.map(function (it) {
+            return { x: it.rect.x, y: it.rect.y, w: it.rect.w, h: it.rect.h };
+          });
+          return items.map(function (it, i) {
+            var here = rects[i];
+            var parts = it.parts && it.parts.length ? it.parts : [it.rect];
+            if (worst(map, parts, 0) <= OK_CLUTTER) return { id: it.id, dx: 0, dy: 0, backing: false };
+            if (it.pinned) return { id: it.id, dx: 0, dy: 0, backing: !it.panel };
+            // Moved further than a few of its own heights, a line leaves what it names (a label
+            // under a plate ended up beside the headline): past that it stays, on a surface.
+            var step = Math.max(1, frame.U);
+            var reach = Math.ceil(Math.max(3 * here.h, 0.06 * frame.H) / step);
+            for (var d = 1; d <= reach; d++) {
+              for (var s = -1; s <= 1; s += 2) {
+                var dy = s * d * step;
+                var cand = { x: here.x, y: here.y + dy, w: here.w, h: here.h };
+                if (!inside(cand, frame.safe)) continue;
+                var clear = rects.every(function (other, j) {
+                  return j === i || keepsOrder(cand, here, other, frame.U);
+                });
+                if (!clear || worst(map, parts, dy) > OK_CLUTTER) continue;
+                rects[i] = cand;
+                return { id: it.id, dx: 0, dy: dy, backing: false };
+              }
+            }
+            return { id: it.id, dx: 0, dy: 0, backing: !it.panel };
+          });
+        }
+
+        function hexLuma(hex) {
           var m = /^#?([0-9a-f]{6})$/i.exec(hex || "");
           if (!m) return null;
           var v = parseInt(m[1], 16);
           return 0.2126 * ((v >> 16) & 255) + 0.7152 * ((v >> 8) & 255) + 0.0722 * (v & 255);
         }
 
+        // WCAG relative luminance of a colour, from its own channels.
+        function luminance(hex) {
+          var m = /^#?([0-9a-f]{6})$/i.exec(hex || "");
+          if (!m) return null;
+          var v = parseInt(m[1], 16);
+          var lin = function (c) {
+            var x = c / 255;
+            return x <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
+          };
+          return 0.2126 * lin((v >> 16) & 255) + 0.7152 * lin((v >> 8) & 255) + 0.0722 * lin(v & 255);
+        }
+
+        function contrast(x, y) {
+          return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+        }
+
+        // The ink a line should take on the picture under it: its own colour when it reads as
+        // display type (WCAG 3:1 for large text, against the mean of what is under it), else
+        // whichever of white and near-black reads better. A flat ground always has one.
+        function inkOn(map, rect, ink) {
+          var under = coverage(map, rect).reduce(function (acc, k) {
+            return acc + Math.pow(map.luma[k.i] / 255, 2.2) * k.share;
+          }, 0);
+          var own = luminance(ink);
+          if (own !== null && contrast(own, under) >= 3) return ink;
+          return contrast(1, under) >= contrast(luminance("#111111"), under) ? "#ffffff" : "#111111";
+        }
+        // A cell flat enough to be part of a painted shape, and how close two colours are.
+        var FLAT_CELL = 0.15;
+        var SAME_COLOUR = 36;
+        // How far a painted shape may be from its panel's colour and still be taken for it.
+        var PANEL_COLOUR = 90;
+
+        function hexRgb(hex) {
+          var m = /^#?([0-9a-f]{6})$/i.exec(hex || "");
+          if (!m) return null;
+          var v = parseInt(m[1], 16);
+          return [(v >> 16) & 255, (v >> 8) & 255, v & 255];
+        }
+
+        function colourGap(a, b) {
+          return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2) + Math.pow(a[2] - b[2], 2));
+        }
+
+        // The flat region of one colour grown from `seed`, as a box in page px with a key (its
+        // first cell); null once it outgrows `limit` cells, which only the page's ground does.
+        function flatComponent(map, seed, limit, seen) {
+          var colour = map.rgb[seed];
+          var queue = [seed];
+          var mine = {};
+          mine[seed] = true;
+          seen[seed] = true;
+          var c0 = map.cols;
+          var c1 = -1;
+          var r0 = map.rows;
+          var r1 = -1;
+          var count = 0;
+          var key = seed;
+          while (queue.length) {
+            var i = queue.shift();
+            var c = i % map.cols;
+            var r = Math.floor(i / map.cols);
+            count++;
+            key = Math.min(key, i);
+            c0 = Math.min(c0, c);
+            c1 = Math.max(c1, c);
+            r0 = Math.min(r0, r);
+            r1 = Math.max(r1, r);
+            [c > 0 ? i - 1 : -1, c < map.cols - 1 ? i + 1 : -1, i - map.cols, i + map.cols].forEach(function (j) {
+              if (j < 0 || j >= map.cols * map.rows || mine[j]) return;
+              if (map.busy[j] >= FLAT_CELL || colourGap(map.rgb[j], colour) >= SAME_COLOUR) return;
+              mine[j] = true;
+              seen[j] = true;
+              queue.push(j);
+            });
+          }
+          if (count > limit) return null;
+          return {
+            key: String(key),
+            box: { x: c0 * map.cellW, y: r0 * map.cellH, w: (c1 - c0 + 1) * map.cellW, h: (r1 - r0 + 1) * map.cellH },
+          };
+        }
+
+        // The flat shape the picture painted for a panel (the reference's bar, card or pill,
+        // which the picture model copies however it is told not to, and places its own way):
+        // the nearest one near the panel's place of a comparable size that no other panel has
+        // `claimed`, or null when the picture painted none. The picture copies the reference's
+        // shape in the reference's colour, which the panel carries too, so a shape far from the
+        // panel's `colour` (a calm patch of the page) is refused, as is the page's own ground
+        // for being far larger than any panel, and any shape under another group's words (`avoid`).
+        function snapPanel(map, rect, claimed, colour, avoid) {
+          if (!map.rgb) return null;
+          claimed = claimed || {};
+          var want = colour ? hexRgb(colour) : null;
+          var near = { x: rect.x - rect.w * 0.3, y: rect.y - rect.h * 2, w: rect.w * 1.6, h: rect.h * 5 };
+          var limit = Math.ceil((3 * rect.w * rect.h) / (map.cellW * map.cellH));
+          var seen = {};
+          var best = null;
+          coverage(map, near).forEach(function (k) {
+            if (seen[k.i] || map.busy[k.i] >= FLAT_CELL) return;
+            var comp = flatComponent(map, k.i, limit, seen);
+            if (!comp || claimed[comp.key]) return;
+            if (want && colourGap(map.rgb[k.i], want) > PANEL_COLOUR) return;
+            var b = comp.box;
+            var ratio = (b.w * b.h) / (rect.w * rect.h);
+            // Only a shape's flat interior is found (its edges are not flat), and the panel's box
+            // has already grown with its copy: size is a loose check, width the telling one.
+            if (b.w < rect.w * 0.4 || ratio < 0.15 || ratio > 3) return;
+            var covers = (avoid || []).some(function (a) {
+              return overlaps(b, a, 0);
+            });
+            if (covers) return;
+            var dist = Math.abs(b.y + b.h / 2 - (rect.y + rect.h / 2)) + 0.5 * Math.abs(b.x + b.w / 2 - (rect.x + rect.w / 2));
+            if (!best || dist < best.dist) best = { dist: dist, comp: comp };
+          });
+          if (!best) return null;
+          claimed[best.comp.key] = true;
+          return best.comp.box;
+        }
+        // Whether copy that does not fit its room shrinks another step. It stops at MIN_SCALE
+        // when it is only taller than its region (it grows past it into free room), and goes
+        // on to FLOOR_SCALE when it would be clipped at its width or run into another group:
+        // small is better than cut off or overlapping.
+        var MIN_SCALE = 0.72;
+        var FLOOR_SCALE = 0.45;
+        function keepShrinking(scale, room) {
+          if (room.wide || room.collides) return scale >= FLOOR_SCALE;
+          return Boolean(room.tall) && scale >= MIN_SCALE;
+        }
+        // </plate-layout>
+
         function alignSelf(align) {
           return align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
         }
@@ -121,6 +411,15 @@
           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";
+          // The region's own card or pill, drawn here so it stays with its words.
+          if (g.card) el.dataset.card = g.card;
+          if (g.panel) {
+            el.dataset.panel = g.panel.background;
+            el.dataset.shape = g.panel.shape;
+            // An older creative's panel is drawn only over the shape its picture painted.
+            if (g.panel.if_painted) el.classList.add("panel-candidate");
+            else paintPanel(el);
+          }
           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.
@@ -146,6 +445,21 @@
           else el.insertBefore(img, el.firstChild);
         }
 
+        function paintPanel(el) {
+          el.classList.remove("panel-candidate");
+          el.classList.add("panel");
+          el.style.background = el.dataset.panel;
+          el.style.borderRadius = RADIUS[el.dataset.shape] || RADIUS.rounded;
+          el.style.padding = 1.4 * U + "px " + 2.2 * U + "px";
+        }
+
+        // A soft shadow on the side away from the ink, so a line keeps its edge on the picture.
+        function shade(el) {
+          var dark = (hexLuma(el.dataset.ink) || 255) < 110;
+          el.dataset.dark = dark ? "1" : "0";
+          el.style.textShadow = dark ? "0 1px 10px rgba(255,255,255,0.35)" : "0 2px 14px rgba(0,0,0,0.45)";
+        }
+
         function addBlock(b) {
           var el = document.createElement("div");
           el.className = "block " + b.role;
@@ -178,14 +492,33 @@
               el.style.textDecorationThickness = "0.08em";
               el.style.textUnderlineOffset = "0.18em";
             }
-            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)";
+            el.dataset.ink = ink;
           }
-          containerFor(b.group, b.band).appendChild(el);
+          var container = containerFor(b.group, b.band);
+          if (hasPlate && el.dataset.ink && !container.classList.contains("panel") && !container.dataset.card) shade(el);
+          container.appendChild(el);
+        }
+
+        // A card that several regions of copy sit on (a testimonial's), drawn where the layout
+        // put it, under the copy, so it can never drift from its words or be left empty.
+        function addCard(card) {
+          var at = (card.at && card.at[FRAME.format]) || card.box;
+          var el = document.createElement("div");
+          el.className = "card";
+          el.style.position = "absolute";
+          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.height = ((at.y[1] - at.y[0]) / 100) * H + "px";
+          el.style.background = card.background;
+          // Not RADIUS: a card holds several lines (a quote and its name), and a full pill radius
+          // on a block that tall reads as a stadium. "pill" rounds it more, never into one.
+          el.style.borderRadius = card.shape === "pill" ? 4 * U + "px" : card.shape === "square" ? "0" : 2 * U + "px";
+          root.appendChild(el);
         }
 
         var drawCopy = FRAME.draw_copy !== false;
+        if (drawCopy) (AD.cards || []).forEach(addCard);
         (drawCopy ? AD.copy || [] : []).forEach(addBlock);
         if (AD.logo) addLogo(AD.logo);
 
@@ -196,16 +529,41 @@
         // 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.
+        // Whether a group's words, at their current size, overlap another group's words. Words,
+        // not boxes: neighbouring regions overlap in many layouts where no letter touches.
+        function collides(el) {
+          var mine = partsOf(el);
+          return containers().some(function (other) {
+            if (other === el) return false;
+            var theirs = partsOf(other);
+            return mine.some(function (a) {
+              return theirs.some(function (b) {
+                return overlaps(a, b, 0);
+              });
+            });
+          });
+        }
+
+        // Whether any of a group's words run past the frame's left or right edge, where they are cut.
+        function offFrame(el) {
+          return partsOf(el).some(function (p) {
+            return p.x < -1 || p.x + p.w > W + 1;
+          });
+        }
+
         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;
+            // Wider than its region is only room it grows into; past the frame's edge it is cut.
             var tooWide = Array.prototype.some.call(el.children, function (c) {
               return c.scrollWidth > width + 1;
             });
-            if ((!tooTall && !tooWide) || scale < 0.45) break;
+            var cut = tooWide && offFrame(el);
+            var grown = tooTall || tooWide;
+            if (!keepShrinking(scale, { tall: grown, wide: cut, collides: grown && collides(el) })) break;
             scale *= 0.94;
             Array.prototype.forEach.call(el.querySelectorAll(".block"), function (c) {
               c.style.fontSize = Number(c.dataset.base) * U * scale + "px";
@@ -241,11 +599,216 @@
         window.__timelines = window.__timelines || {};
         window.__timelines.main = tl;
 
+        // The picture as this format shows it (cover, centred, like `.plate`), reduced to a
+        // grid. Read through a blob so the canvas stays readable; the render opens the page
+        // with file access for exactly this. Where it cannot be read (a check that opens the
+        // page without that access), the copy stays where the layout put it.
+        function readPlate(done) {
+          if (!hasPlate) return done(null);
+          try {
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", "./plate.png");
+            xhr.responseType = "blob";
+            xhr.onerror = function () {
+              done(null);
+            };
+            xhr.onload = function () {
+              if (!xhr.response || !xhr.response.size) return done(null);
+              var img = new Image();
+              img.onerror = function () {
+                done(null);
+              };
+              img.onload = function () {
+                try {
+                  var scale = 4;
+                  var cw = Math.round(W / scale);
+                  var ch = Math.round(H / scale);
+                  var canvas = document.createElement("canvas");
+                  canvas.width = cw;
+                  canvas.height = ch;
+                  var cx = canvas.getContext("2d");
+                  var k = Math.max(cw / img.naturalWidth, ch / img.naturalHeight);
+                  var dw = img.naturalWidth * k;
+                  var dh = img.naturalHeight * k;
+                  cx.drawImage(img, (cw - dw) / 2, (ch - dh) / 2, dw, dh);
+                  done(busyMap(cx.getImageData(0, 0, cw, ch).data, cw, ch, 6, scale));
+                } catch (e) {
+                  done(null);
+                }
+              };
+              img.src = URL.createObjectURL(xhr.response);
+            };
+            xhr.send();
+          } catch (e) {
+            done(null);
+          }
+        }
+
+        function rectOf(el) {
+          var r = el.getBoundingClientRect();
+          var o = root.getBoundingClientRect();
+          return { x: r.left - o.left, y: r.top - o.top, w: r.width, h: r.height };
+        }
+
+        // A frosted surface behind a group that has nowhere calm to sit, tinted away from its
+        // ink. A logo has no ink to read: its surface follows the ground it was chosen for.
+        function addBacking(el, map) {
+          var r = rectOf(el);
+          var first = el.querySelector(".block[data-ink]");
+          var darkInk = first
+            ? (hexLuma(first.dataset.ink) || 255) < 110
+            : coverage(map, r).reduce(function (acc, k) {
+                return acc + map.luma[k.i] * k.share;
+              }, 0) > 128;
+          var pad = { x: 2 * U, y: 1.2 * U };
+          var b = document.createElement("div");
+          b.className = "backing";
+          b.style.left = Math.max(0, r.x - pad.x) + "px";
+          b.style.top = Math.max(0, r.y - pad.y) + "px";
+          b.style.width = Math.min(W, r.w + 2 * pad.x) + "px";
+          b.style.height = Math.min(H, r.h + 2 * pad.y) + "px";
+          b.style.borderRadius = 1.4 * U + "px";
+          b.style.background = darkInk ? "rgba(255,255,255,0.62)" : "rgba(0,0,0,0.5)";
+          // Under every group and card: a surface blurs what is behind it, and that must only
+          // ever be the picture, never another line (a button beside it went unreadable).
+          root.insertBefore(b, root.querySelector(".card, .group") || el);
+          Array.prototype.forEach.call(el.querySelectorAll(".block[data-ink]"), function (c) {
+            c.style.textShadow = "none";
+          });
+        }
+
+        // Move each group off what the picture shows, set each line in an ink that reads on
+        // what ends up under it, and give a surface to whatever still cannot read.
+        // Where the words (and the logo) of a group actually are, not the region box around them.
+        function partsOf(el) {
+          var parts = [];
+          Array.prototype.forEach.call(el.children, function (c) {
+            if (c.classList.contains("logo")) return parts.push(rectOf(c));
+            var fill = c.querySelector(".fill");
+            if (fill) return parts.push(rectOf(fill));
+            var range = document.createRange();
+            range.selectNodeContents(c);
+            Array.prototype.forEach.call(range.getClientRects(), function (r) {
+              var o = root.getBoundingClientRect();
+              if (r.width > 0 && r.height > 0) parts.push({ x: r.left - o.left, y: r.top - o.top, w: r.width, h: r.height });
+            });
+          });
+          return parts;
+        }
+
+        // A card, or a group whose every line is a button or a sticker, carries its own surface.
+        function surfaced(el) {
+          if (el.classList.contains("panel") || el.dataset.card) return true;
+          var blocks = el.querySelectorAll(".block");
+          return blocks.length > 0 && el.querySelectorAll(".block .fill").length === blocks.length;
+        }
+
+        function arrange(map) {
+          var els = containers();
+          var items = els.map(function (el, i) {
+            // A logo alone in its corner, or copy on a drawn card, stays where the layout put it.
+            var logoOnly = el.children.length === 1 && el.firstChild.classList.contains("logo");
+            // A drawn panel is an opaque surface in the layout's place: moving it off a busy spot
+            // only uncovered what it was drawn over.
+            var pinned = logoOnly || Boolean(el.dataset.card) || el.classList.contains("panel");
+            return { id: String(i), rect: rectOf(el), parts: partsOf(el), panel: surfaced(el), pinned: pinned };
+          });
+          var safeRect = { x: box.x, y: box.y, w: box.w, h: box.h };
+          var plans = placeGroups(map, { W: W, H: H, safe: safeRect, U: U }, items);
+          var report = [];
+          plans.forEach(function (plan, i) {
+            var el = els[i];
+            if (plan.dy) el.style.transform = (el.style.transform || "") + " translateY(" + plan.dy + "px)";
+            var backing = plan.backing;
+            if (!backing && !items[i].panel) {
+              Array.prototype.forEach.call(el.querySelectorAll(".block[data-ink]"), function (c) {
+                var ink = inkOn(map, rectOf(c), c.dataset.ink);
+                if (ink !== c.dataset.ink) {
+                  c.dataset.ink = ink;
+                  c.style.color = ink;
+                  shade(c);
+                }
+              });
+            }
+            if (backing) addBacking(el, map);
+            report.push({ group: el.className, dy: plan.dy, backing: backing });
+          });
+          window.__layout = { read: true, groups: report };
+        }
+
+        // A panel whose shape the picture painted anyway is laid over that shape, half a cell
+        // proud on every side so no painted edge shows past it; its copy then fits inside.
+        function snapPanels(map) {
+          var snapped = 0;
+          var claimed = {};
+          var words = containers()
+            .filter(function (el) {
+              return !el.dataset.panel;
+            })
+            .reduce(function (acc, el) {
+              return acc.concat(partsOf(el));
+            }, []);
+          containers().forEach(function (el) {
+            if (!el.dataset.panel) return;
+            var box = snapPanel(map, rectOf(el), claimed, el.dataset.panel, words);
+            if (!box) return;
+            if (el.classList.contains("panel-candidate")) {
+              paintPanel(el);
+              inkForPanel(el);
+            }
+            el.dataset.snapped = "1";
+            var pad = map.cellW / 2;
+            el.style.left = Math.max(0, box.x - pad) + "px";
+            el.style.top = Math.max(0, box.y - pad) + "px";
+            el.style.width = Math.min(W, box.w + 2 * pad) + "px";
+            el.style.minHeight = box.h + 2 * pad + "px";
+            el.style.height = box.h + 2 * pad + "px";
+            el.style.paddingTop = "0";
+            el.style.paddingBottom = "0";
+            el.dataset.max = String(box.h + 2 * pad);
+            snapped++;
+          });
+          return snapped;
+        }
+
+        // An older creative's line keeps its reference ink until its panel is drawn: then it takes
+        // an ink that reads on the panel (display type, 3:1) and drops its picture shadow.
+        function inkForPanel(el) {
+          var ground = luminance(el.dataset.panel);
+          Array.prototype.forEach.call(el.querySelectorAll(".block[data-ink]"), function (c) {
+            c.style.textShadow = "none";
+            var own = luminance(c.dataset.ink);
+            if (own !== null && ground !== null && contrast(own, ground) >= 3) return;
+            var ink = contrast(1, ground) >= contrast(luminance("#111111"), ground) ? "#ffffff" : "#111111";
+            c.dataset.ink = ink;
+            c.style.color = ink;
+          });
+        }
+
+        // A snapped panel is the painted shape's height; copy that still does not fit at the
+        // smallest size grows it (over the shape, never out of it) instead of spilling below.
+        function growSnapped() {
+          containers().forEach(function (el) {
+            if (el.dataset.snapped !== "1" || el.scrollHeight <= el.clientHeight + 1) return;
+            el.style.height = "auto";
+          });
+        }
+
         var ready = document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
         ready.then(function () {
-          containers().forEach(fit);
-          ["top", "bottom"].forEach(scrim);
-          root.setAttribute("data-ready", "1");
+          readPlate(function (map) {
+            var snapped = map ? snapPanels(map) : 0;
+            containers().forEach(fit);
+            growSnapped();
+            if (map) {
+              arrange(map);
+              window.__layout.snapped = snapped;
+            } else {
+              ["top", "bottom"].forEach(scrim);
+              window.__layout = { read: false };
+            }
+            root.setAttribute("data-ready", "1");
+          });
         });
       })();
     </script>