@dloizides/poster-render 0.1.0 → 0.2.1

package/dist/index.mjs

@@ -29,6 +29,11 @@ var LayoutId = /* @__PURE__ */ ((LayoutId2) => {
   LayoutId2["PictureLeft"] = "picture-left";
   LayoutId2["PictureBottom"] = "picture-bottom";
   LayoutId2["List"] = "list";
+  LayoutId2["Arch"] = "arch";
+  LayoutId2["PhoneClockSafe"] = "phone-clock-safe";
+  LayoutId2["PhoneArch"] = "phone-arch";
+  LayoutId2["DesktopSafe"] = "desktop-safe";
+  LayoutId2["DesktopArch"] = "desktop-arch";
   return LayoutId2;
 })(LayoutId || {});
 
@@ -60,10 +65,10 @@ var FORMAT_SIZES = {
 
 // src/palettes.ts
 var PALETTES = {
-  ["sand" /* Sand */]: { background: "#f5f4f2", tint: "#ece8e3", title: "#958a80", accent: "#e9b47f", ink: "#5f564f", soft: "#b3a89e", card: "#ffffff" },
-  ["night" /* Night */]: { background: "#1c1a17", tint: "#25221e", title: "#e8dccb", accent: "#e9b47f", ink: "#f4efe8", soft: "#9c9284", card: "#2c2824" },
-  ["sea" /* Sea */]: { background: "#eef4f3", tint: "#e1ecea", title: "#4f7d7a", accent: "#e07a5f", ink: "#2f3e46", soft: "#8aa3a1", card: "#ffffff" },
-  ["rose" /* Rose */]: { background: "#f8efec", tint: "#f1e2dd", title: "#9b6b63", accent: "#c9846f", ink: "#4a3934", soft: "#b39a92", card: "#ffffff" }
+  ["sand" /* Sand */]: { background: "#f5f4f2", tint: "#ece8e3", title: "#958a80", accent: "#e9b47f", ink: "#5f564f", soft: "#b3a89e", card: "#ffffff", arch: "#ede8e2" },
+  ["night" /* Night */]: { background: "#1c1a17", tint: "#25221e", title: "#e8dccb", accent: "#e9b47f", ink: "#f4efe8", soft: "#9c9284", card: "#2c2824", arch: "#25221f" },
+  ["sea" /* Sea */]: { background: "#eef4f3", tint: "#e1ecea", title: "#4f7d7a", accent: "#e07a5f", ink: "#2f3e46", soft: "#8aa3a1", card: "#ffffff", arch: "#e4ecea" },
+  ["rose" /* Rose */]: { background: "#f8efec", tint: "#f1e2dd", title: "#9b6b63", accent: "#c9846f", ink: "#4a3934", soft: "#b39a92", card: "#ffffff", arch: "#f1e5e1" }
 };
 
 // src/fontSets.ts
@@ -307,18 +312,19 @@ function headerGroups(doc, p, u) {
   return [{ lines: lines.filter((x) => x !== void 0), gapAfter: 0 }];
 }
 function itemGroup(item, l, u) {
-  const lines = [l.script?.(item.date, 96)];
+  const lines = [l.script?.(item.date, 67)];
   item.schedule.forEach((row) => lines.push(l.strong?.(`${row.label}  ${row.time}`, 42)));
   if (item.price) {
     lines.push(l.accent?.(item.price, 42));
   }
-  return { lines, gapAfter: 26 * u };
+  return { lines, gapAfter: 48 * u };
 }
-function eventGroups(doc, l, u) {
+function eventGroups(doc, l, u, withPrices) {
   const b = doc.blocks;
   const groups = [];
   b.schedule?.forEach((row) => groups.push({ lines: [l.strong?.(row.label, 66), l.accent?.(row.time, 60)], gapAfter: 30 * u }));
-  b.prices?.forEach((row) => groups.push({ lines: [l.strong?.(row.amount, 66), l.accent?.(row.label, 52)], gapAfter: 30 * u }));
+  const prices = (withPrices ? b.prices : void 0) ?? [];
+  prices.forEach((row, i) => groups.push({ lines: [l.strong?.(row.amount, 66), l.accent?.(row.label, 52)], gapAfter: 30 * u, keepWithNext: i < prices.length - 1 }));
   return groups;
 }
 function listGroups(doc, l, u) {
@@ -329,18 +335,22 @@ function listGroups(doc, l, u) {
   }
   return groups;
 }
-function bodyGroups(doc, p, u) {
+function flankPriceGroups(doc, p, u) {
+  const l = makers(p, u);
+  return (doc.blocks.prices ?? []).map((row) => ({ lines: [l.strong?.(row.amount, 110), l.accent?.(row.label, 48)], gapAfter: 30 * u }));
+}
+function bodyGroups(doc, p, u, withPrices = true) {
   const l = makers(p, u);
   const b = doc.blocks;
   const groups = [];
   const isList = doc.layout === "list" /* List */;
   if (b.venue) {
-    groups.push({ lines: b.venue.map((v) => l.venue?.(v, isList ? 48 : 58)), gapAfter: 40 * u, rule: { color: p.accent, height: 8 * u } });
+    groups.push({ lines: b.venue.map((v) => l.venue?.(v, isList ? 48 : 58)), gapAfter: 40 * u, rule: { color: p.accent, height: 8 * u }, icon: { color: p.accent, glyph: p.background } });
   }
-  groups.push(...isList ? listGroups(doc, l, u) : eventGroups(doc, l, u));
+  groups.push(...isList ? listGroups(doc, l, u) : eventGroups(doc, l, u, withPrices));
   if (b.includes) {
-    const lines = [l.accent?.(b.includes.heading, 36), ...b.includes.items.map((i) => l.item?.(i, 40))];
-    groups.push({ lines, gapAfter: 24 * u, card: { color: p.card, pad: 28 * u } });
+    const lines = [l.accent?.(b.includes.heading, 38), ...b.includes.items.map((i) => l.item?.(i, 38))];
+    groups.push({ lines, gapAfter: 24 * u, uniform: true });
   }
   if (b.footer) {
     groups.push({ lines: [l.soft?.(b.footer, 34)], gapAfter: 0 });
@@ -348,6 +358,51 @@ function bodyGroups(doc, p, u) {
   return groups;
 }
 
+// src/layout/layoutSpecs.ts
+var flanksBeside = (pic, top, bottom2, m) => [
+  [m, top, pic[0] - 2 * m, bottom2 - top],
+  [pic[0] + pic[2] + m, top, 1 - pic[0] - pic[2] - 2 * m, bottom2 - top]
+];
+var ARCH_PIC = [0.22, 0.42, 0.56, 0.58];
+var PHONE_ARCH_PIC = [0.2, 0.6, 0.6, 0.4];
+var DESK_ARCH_PIC = [0.355, 0.07, 0.32, 0.93];
+var ARCH_LANDSCAPE = {
+  header: [0.04, 0.06, 0.3, 0.5],
+  body: [0.04, 0.58, 0.3, 0.36],
+  picture: [0.36, 0.08, 0.3, 0.92],
+  alignX: 0.5,
+  flanks: [[0.68, 0.08, 0.28, 0.42], [0.68, 0.52, 0.28, 0.42]],
+  arch: 0.06
+};
+var LAYOUT_SPECS = {
+  ["arch" /* Arch */]: {
+    portrait: { header: [0.045, 0.025, 0.91, 0.18], body: [0.045, 0.215, 0.91, 0.19], picture: ARCH_PIC, alignX: 0.5, flanks: flanksBeside(ARCH_PIC, 0.44, 0.97, 0.03), arch: 0.04 },
+    landscape: ARCH_LANDSCAPE
+  },
+  ["phone-clock-safe" /* PhoneClockSafe */]: {
+    portrait: { header: [0.045, 0.28, 0.91, 0.2], body: [0.045, 0.5, 0.42, 0.44], picture: [0.48, 0.5, 0.52, 0.5], alignX: 1 },
+    landscape: { header: [0.04, 0.2, 0.52, 0.3], body: [0.04, 0.52, 0.52, 0.42], picture: [0.6, 0.12, 0.4, 0.88], alignX: 1 }
+  },
+  ["phone-arch" /* PhoneArch */]: {
+    portrait: { header: [0.045, 0.3, 0.91, 0.13], body: [0.045, 0.44, 0.91, 0.14], picture: PHONE_ARCH_PIC, alignX: 0.5, flanks: flanksBeside(PHONE_ARCH_PIC, 0.63, 0.94, 0.03), arch: 0.08 },
+    landscape: { ...ARCH_LANDSCAPE, header: [0.04, 0.16, 0.3, 0.42], picture: [0.36, 0.16, 0.3, 0.84] }
+  },
+  ["desktop-safe" /* DesktopSafe */]: {
+    portrait: { header: [0.08, 0.06, 0.84, 0.24], body: [0.08, 0.31, 0.46, 0.58], picture: [0.56, 0.36, 0.44, 0.64], alignX: 1 },
+    landscape: { header: [0.0625, 0.05, 0.58, 0.44], body: [0.0625, 0.5, 0.58, 0.38], picture: [0.67, 0.0972, 0.29, 0.9028], alignX: 1, logo: [0.4, 0.045, 0.09, 0.17] }
+  },
+  ["desktop-arch" /* DesktopArch */]: {
+    portrait: { header: [0.08, 0.06, 0.84, 0.2], body: [0.08, 0.27, 0.84, 0.2], picture: [0.14, 0.48, 0.72, 0.52], alignX: 0.5, arch: 0.05 },
+    landscape: { header: [0.07, 0.3, 0.26, 0.45], body: [0.7, 0.25, 0.27, 0.65], picture: DESK_ARCH_PIC, alignX: 0.5, logo: [0.86, 0.03, 0.11, 0.18], arch: 0.05 }
+  }
+};
+var r = Math.round;
+var toRect = (f, w, h) => {
+  const x = r(f[0] * w);
+  const y = r(f[1] * h);
+  return { x, y, w: r((f[0] + f[2]) * w) - x, h: r((f[1] + f[3]) * h) - y };
+};
+
 // src/layout/geometry.ts
 var MARGIN = 0.045;
 var HEADER_PORTRAIT = 0.3;
@@ -360,12 +415,12 @@ var PICTURE_SIDE = {
   ["list" /* List */]: [0.5, 0.36]
 };
 var ANCHOR_Y = { ["top" /* Top */]: 0, ["center" /* Center */]: 0.5, ["bottom" /* Bottom */]: 1 };
-var r = Math.round;
+var r2 = Math.round;
 function side(w, h, fraction) {
-  const m = r(Math.min(w, h) * MARGIN);
+  const m = r2(Math.min(w, h) * MARGIN);
   if (h >= w) {
-    const split2 = r(w * (1 - fraction[0]));
-    const top2 = r(h * HEADER_PORTRAIT);
+    const split2 = r2(w * (1 - fraction[0]));
+    const top2 = r2(h * HEADER_PORTRAIT);
     return {
       header: { x: m, y: m, w: w - 2 * m, h: top2 - 2 * m },
       picture: { x: split2, y: top2, w: w - split2, h: h - top2 },
@@ -373,19 +428,19 @@ function side(w, h, fraction) {
       alignX: 1
     };
   }
-  const split = r(w * (1 - fraction[1]));
-  const top = r(h * HEADER_LANDSCAPE);
+  const split = r2(w * (1 - fraction[1]));
+  const top = r2(h * HEADER_LANDSCAPE);
   return {
     header: { x: m, y: m, w: split - 2 * m, h: top - m },
     picture: { x: split, y: 0, w: w - split, h },
-    body: { x: m, y: top + r(m / 2), w: split - 2 * m, h: h - top - r(m / 2) - m },
+    body: { x: m, y: top + r2(m / 2), w: split - 2 * m, h: h - top - r2(m / 2) - m },
     alignX: 1
   };
 }
 function bottom(w, h) {
-  const m = r(Math.min(w, h) * MARGIN);
-  const top = r(h * BOTTOM_HEADER);
-  const pic = r(h * BOTTOM_PICTURE);
+  const m = r2(Math.min(w, h) * MARGIN);
+  const top = r2(h * BOTTOM_HEADER);
+  const pic = r2(h * BOTTOM_PICTURE);
   return {
     header: { x: m, y: m, w: w - 2 * m, h: top - 2 * m },
     body: { x: m, y: top, w: w - 2 * m, h: pic - top - m },
@@ -393,8 +448,23 @@ function bottom(w, h) {
     alignX: 0.5
   };
 }
+function fromSpec(spec, w, h) {
+  return {
+    header: toRect(spec.header, w, h),
+    body: toRect(spec.body, w, h),
+    picture: toRect(spec.picture, w, h),
+    alignX: spec.alignX,
+    flanks: spec.flanks?.map((f) => toRect(f, w, h)),
+    logo: spec.logo ? toRect(spec.logo, w, h) : void 0,
+    arch: spec.arch
+  };
+}
 var mirror = (rect, w) => ({ ...rect, x: w - rect.x - rect.w });
 function geometry(layout, w, h) {
+  const oriented = LAYOUT_SPECS[layout];
+  if (oriented) {
+    return fromSpec(h >= w ? oriented.portrait : oriented.landscape, w, h);
+  }
   if (layout === "picture-bottom" /* PictureBottom */) {
     return bottom(w, h);
   }
@@ -425,12 +495,32 @@ var RULE_WIDTH = 0.9;
 var WIDE = 1.6;
 var MIN_K = 0.02;
 var STEPS = 22;
+var ICON_SCALE = 1.6;
+var ICON_GAP = 0.35;
 var fontOf = (line, size, fonts) => `${line.weight} ${size}px ${fonts[line.role]}`;
-var emptyFlow = () => ({ texts: [], cards: [], rules: [], bullets: [] });
+var emptyFlow = () => ({ texts: [], cards: [], rules: [], bullets: [], icons: [] });
+var iconSize = (group, k) => {
+  const first = group.lines[0];
+  return group.icon && first ? first.size * k * LINE_HEIGHT * ICON_SCALE : 0;
+};
 function lineSize(line, width, k, avail) {
   const indent = line.bullet ? line.size * k * BULLET_INDENT : 0;
   return Math.max(0, Math.min(line.size * k, line.size * (avail - indent) / Math.max(width, 1)));
 }
+function groupRatio(m, k, avail) {
+  if (!m.group.uniform) {
+    return null;
+  }
+  return Math.min(...m.group.lines.map((line, i) => lineSize(line, m.widths[i] ?? 1, k, avail) / line.size));
+}
+function placeIcon(group, d, x, textTop, textBottom, out) {
+  if (!group.icon || d <= 0) {
+    return textBottom;
+  }
+  const textH = textBottom - textTop;
+  out?.icons.push({ rect: { x, y: textTop + Math.max(0, (textH - d) / 2), w: d, h: d }, color: group.icon.color, glyph: group.icon.glyph });
+  return textTop + Math.max(textH, d);
+}
 function placeGroup(m, k, col, y0, out) {
   const { group } = m;
   let y = y0;
@@ -441,17 +531,22 @@ function placeGroup(m, k, col, y0, out) {
   const pad = group.card ? group.card.pad * k : 0;
   const top = y;
   y += pad;
+  const d = iconSize(group, k);
+  const iconIndent = d > 0 ? d * (1 + ICON_GAP) : 0;
+  const avail = col.w - 2 * pad - iconIndent;
+  const ratio = groupRatio(m, k, avail);
   group.lines.forEach((line, i) => {
-    const size = lineSize(line, m.widths[i] ?? 1, k, col.w - 2 * pad);
-    const indent = line.bullet ? line.size * k * BULLET_INDENT : 0;
-    const x = col.x + pad + indent;
+    const size = ratio === null ? lineSize(line, m.widths[i] ?? 1, k, avail) : line.size * ratio;
+    const indent = (line.bullet ? line.size * k * BULLET_INDENT : 0) + iconIndent;
     const w = (m.widths[i] ?? 0) * size / line.size;
+    const x = col.right ? col.x + col.w - pad - w : col.x + pad + indent;
     out?.texts.push({ text: line.text, font: "", color: line.color, box: { x, y, w, h: size * LINE_HEIGHT } });
     if (line.bullet && out) {
       out.bullets.push({ x: col.x + pad + size * BULLET_RADIUS, y: y + size * LINE_HEIGHT / 2, r: size * BULLET_RADIUS, color: line.bullet });
     }
     y += size * LINE_HEIGHT;
   });
+  y = placeIcon(group, d, col.x + pad, top + pad, y, out);
   y += pad;
   if (group.card) {
     out?.cards.unshift({ rect: { x: col.x, y: top, w: col.w, h: y - top }, color: group.card.color });
@@ -465,6 +560,27 @@ function placeColumn(groups, k, col, out) {
   }
   return h;
 }
+var tallest = (heights, cut) => {
+  const left = heights.slice(0, cut).reduce((a, b) => a + b, 0);
+  const right = heights.slice(cut).reduce((a, b) => a + b, 0);
+  return Math.max(left, right);
+};
+function keepTogether(groups, heights, cut) {
+  const breaks = (c) => groups[c - 1]?.group.keepWithNext === true;
+  let back = cut;
+  while (back > 1 && breaks(back)) {
+    back--;
+  }
+  let fwd = cut;
+  while (fwd < groups.length - 1 && breaks(fwd)) {
+    fwd++;
+  }
+  const candidates = [back, fwd].filter((c) => !breaks(c));
+  if (candidates.length === 0) {
+    return cut;
+  }
+  return candidates.reduce((best, c) => tallest(heights, c) < tallest(heights, best) ? c : best);
+}
 function splitColumns(groups, zone) {
   if (zone.w / Math.max(zone.h, 1) <= WIDE || groups.length < 2) {
     return [{ col: zone, groups }];
@@ -479,7 +595,7 @@ function splitColumns(groups, zone) {
     }
     acc += h;
   });
-  cut = Math.min(cut, groups.length - 1);
+  cut = keepTogether(groups, heights, Math.min(cut, groups.length - 1));
   const gap = Math.round(zone.w * 0.04);
   const w = (zone.w - gap) / 2;
   return [
@@ -524,21 +640,48 @@ function flow(ctx, groups, zone, fonts) {
 var BASE = 1080;
 var LOGO_SHARE = 0.26;
 var CARD_RADIUS = 0.035;
-function roundRect(ctx, r2, radius) {
-  const rad = Math.min(radius, r2.w / 2, r2.h / 2);
+var CAP_TOP = 0.15;
+var PIN_HEAD_Y = 0.08;
+var PIN_HEAD_R = 0.19;
+var PIN_TIP_Y = 0.28;
+var PIN_HOLE = 0.42;
+var ARC_START = 0.75;
+var ARC_END = 2.25;
+function drawPin(ctx, r3, color, glyph) {
+  const cx = r3.x + r3.w / 2;
+  const cy = r3.y + r3.h / 2;
+  const hy = cy - r3.w * PIN_HEAD_Y;
+  const rad = r3.w * PIN_HEAD_R;
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.arc(cx, cy, r3.w / 2, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.fillStyle = glyph;
+  ctx.beginPath();
+  ctx.moveTo(cx, cy + r3.w * PIN_TIP_Y);
+  ctx.arc(cx, hy, rad, Math.PI * ARC_START, Math.PI * ARC_END);
+  ctx.closePath();
+  ctx.fill();
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.arc(cx, hy, rad * PIN_HOLE, 0, Math.PI * 2);
+  ctx.fill();
+}
+function roundRect(ctx, r3, radius) {
+  const rad = Math.min(radius, r3.w / 2, r3.h / 2);
   ctx.beginPath();
-  ctx.moveTo(r2.x + rad, r2.y);
-  ctx.arcTo(r2.x + r2.w, r2.y, r2.x + r2.w, r2.y + r2.h, rad);
-  ctx.arcTo(r2.x + r2.w, r2.y + r2.h, r2.x, r2.y + r2.h, rad);
-  ctx.arcTo(r2.x, r2.y + r2.h, r2.x, r2.y, rad);
-  ctx.arcTo(r2.x, r2.y, r2.x + r2.w, r2.y, rad);
+  ctx.moveTo(r3.x + rad, r3.y);
+  ctx.arcTo(r3.x + r3.w, r3.y, r3.x + r3.w, r3.y + r3.h, rad);
+  ctx.arcTo(r3.x + r3.w, r3.y + r3.h, r3.x, r3.y + r3.h, rad);
+  ctx.arcTo(r3.x, r3.y + r3.h, r3.x, r3.y, rad);
+  ctx.arcTo(r3.x, r3.y, r3.x + r3.w, r3.y, rad);
   ctx.closePath();
   ctx.fill();
 }
 function drawFlow(ctx, f, radius) {
-  f.rules.forEach((r2) => {
-    ctx.fillStyle = r2.color;
-    ctx.fillRect(r2.rect.x, r2.rect.y, r2.rect.w, r2.rect.h);
+  f.rules.forEach((r3) => {
+    ctx.fillStyle = r3.color;
+    ctx.fillRect(r3.rect.x, r3.rect.y, r3.rect.w, r3.rect.h);
   });
   f.cards.forEach((c) => {
     ctx.fillStyle = c.color;
@@ -550,6 +693,7 @@ function drawFlow(ctx, f, radius) {
     ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
     ctx.fill();
   });
+  f.icons.forEach((i) => drawPin(ctx, i.rect, i.color, i.glyph));
   ctx.textAlign = "left";
   ctx.textBaseline = "top";
   f.texts.forEach((t) => {
@@ -569,6 +713,30 @@ function checked(input, assets) {
   }
   return result.doc;
 }
+function archRect(geo) {
+  if (geo.arch === void 0) {
+    return null;
+  }
+  const top = geo.picture.y + Math.round(geo.picture.h * geo.arch);
+  return { x: geo.picture.x, y: top, w: geo.picture.w, h: geo.picture.y + geo.picture.h - top };
+}
+function drawArch(ctx, r3, color) {
+  const rad = r3.w / 2;
+  ctx.fillStyle = color;
+  ctx.fillRect(r3.x, r3.y + rad, r3.w, r3.h - rad);
+  ctx.beginPath();
+  ctx.arc(r3.x + rad, r3.y + rad, rad, Math.PI, Math.PI * 2);
+  ctx.fill();
+}
+function flankFlows(ctx, groups, flanks, fonts) {
+  const half = Math.ceil(groups.length / 2);
+  return flanks.map((zone, i) => i === 0 ? flow(ctx, groups.slice(0, half), zone, fonts) : flow(ctx, groups.slice(half), { ...zone, right: true }, fonts));
+}
+function capAligned(zone, head) {
+  const first = head.texts[0]?.box;
+  const shift = first ? Math.min(Math.max(0, Math.round(first.y + first.h * CAP_TOP) - zone.y), Math.round(zone.h / 2)) : 0;
+  return { ...zone, y: zone.y + shift, h: zone.h - shift };
+}
 function splitHeader(header, hasLogo) {
   const logoW = hasLogo ? Math.round(header.w * LOGO_SHARE) : 0;
   return { text: { ...header, w: header.w - logoW * 1.1 }, logo: { ...header, x: header.x + header.w - logoW, w: logoW } };
@@ -591,20 +759,25 @@ function render(input, assets, canvas) {
   ctx.fillRect(0, 0, width, height);
   if (doc.background === "tint" /* Tint */) {
     ctx.fillStyle = palette.tint;
-    [geo.header, geo.body].forEach((r2) => ctx.fillRect(r2.x, r2.y, r2.w, r2.h));
+    [geo.header, geo.body].forEach((r3) => ctx.fillRect(r3.x, r3.y, r3.w, r3.h));
   }
-  const zones = splitHeader(geo.header, doc.logo !== void 0);
+  const zones = geo.logo ? { text: geo.header, logo: geo.logo } : splitHeader(geo.header, doc.logo !== void 0);
   const head = flow(ctx, headerGroups(doc, palette, u), zones.text, fonts);
-  const body = flow(ctx, bodyGroups(doc, palette, u), geo.body, fonts);
+  const flanks = geo.flanks ?? [];
+  const body = flow(ctx, bodyGroups(doc, palette, u, flanks.length === 0), geo.body, fonts);
+  const sides = flanks.length > 0 ? flankFlows(ctx, flankPriceGroups(doc, palette, u), flanks, fonts) : [emptyFlow()];
   const radius = Math.min(width, height) * CARD_RADIUS;
-  drawFlow(ctx, head, radius);
-  drawFlow(ctx, body, radius);
+  [head, body, ...sides].forEach((f) => drawFlow(ctx, f, radius));
   const logoImage = doc.logo ? assets[doc.logo.imageId] : void 0;
-  if (logoImage) {
-    const r2 = placeContain(logoImage, zones.logo, "top" /* Top */, 1, 1);
-    ctx.drawImage(logoImage, r2.x, r2.y, r2.w, r2.h);
+  const logo = logoImage ? placeContain(logoImage, geo.logo ? zones.logo : capAligned(zones.logo, head), "top" /* Top */, 1, 1) : null;
+  if (logoImage && logo) {
+    ctx.drawImage(logoImage, logo.x, logo.y, logo.w, logo.h);
   }
   const image = doc.picture ? assets[doc.picture.imageId] : void 0;
+  const backdrop = image ? archRect(geo) : null;
+  if (backdrop) {
+    drawArch(ctx, backdrop, palette.arch);
+  }
   const picture = image && doc.picture ? placeContain(image, geo.picture, doc.picture.anchor, geo.alignX, doc.picture.scale) : null;
   if (image && picture) {
     ctx.drawImage(image, picture.x, picture.y, picture.w, picture.h);
@@ -614,8 +787,11 @@ function render(input, assets, canvas) {
     height,
     picture,
     pictureRegion: geo.picture,
-    textBoxes: [...head.texts, ...body.texts].map((t) => t.box),
-    cardBoxes: body.cards.map((c) => c.rect)
+    textBoxes: [head, body, ...sides].flatMap((f) => f.texts.map((t) => t.box)),
+    cardBoxes: body.cards.map((c) => c.rect),
+    iconBoxes: [head, body, ...sides].flatMap((f) => f.icons.map((i) => i.rect)),
+    logo,
+    backdrop
   };
 }
 
@@ -634,6 +810,30 @@ function exportPng(canvas) {
   return new Blob([bytes], { type: "image/png" });
 }
 
+// src/layoutCatalogue.ts
+var POSTERS = ["story" /* Story */, "post" /* Post */, "square" /* Square */];
+var LAYOUT_CATALOGUE = [
+  { id: "picture-right" /* PictureRight */, designId: "E-A", label: "Picture right", description: "Titles across the top, details on the left, the picture on the right standing on the bottom edge.", formats: POSTERS },
+  { id: "picture-left" /* PictureLeft */, designId: "E-B", label: "Picture left", description: "Titles across the top, the picture on the left standing on the bottom edge, details on the right.", formats: POSTERS },
+  { id: "arch" /* Arch */, designId: "E-C", label: "Arch", description: "Titles and details on top, the picture centred in a soft arch at the bottom, prices either side.", formats: POSTERS },
+  { id: "picture-bottom" /* PictureBottom */, designId: "picture-bottom", label: "Picture bottom", description: "Titles and details on top, the picture across the bottom half.", formats: POSTERS },
+  { id: "list" /* List */, designId: "list", label: "Upcoming list", description: "Several dated events as a list beside the picture.", formats: POSTERS },
+  { id: "phone-clock-safe" /* PhoneClockSafe */, designId: "P-A", label: "Phone, clock clear", description: "Lock-screen wallpaper: top kept clear for the clock, details on the left, picture on the right.", formats: ["phone" /* Phone */] },
+  { id: "phone-arch" /* PhoneArch */, designId: "P-B", label: "Phone arch", description: "Lock-screen wallpaper: top kept clear for the clock, details in the middle, the picture in an arch at the bottom.", formats: ["phone" /* Phone */] },
+  { id: "desktop-safe" /* DesktopSafe */, designId: "D-A", label: "Desktop, icons clear", description: "Desktop wallpaper: text on the left clear of desktop icons and the taskbar, the picture on the right.", formats: ["desktop" /* Desktop */] },
+  { id: "desktop-arch" /* DesktopArch */, designId: "D-B", label: "Desktop arch", description: "Desktop wallpaper: titles left, the picture in a centred arch, details right.", formats: ["desktop" /* Desktop */] }
+];
+var DEFAULTS = {
+  ["story" /* Story */]: "picture-right" /* PictureRight */,
+  ["post" /* Post */]: "picture-right" /* PictureRight */,
+  ["square" /* Square */]: "picture-right" /* PictureRight */,
+  ["phone" /* Phone */]: "phone-clock-safe" /* PhoneClockSafe */,
+  ["desktop" /* Desktop */]: "desktop-safe" /* DesktopSafe */
+};
+function defaultLayoutFor(format) {
+  return DEFAULTS[format];
+}
+
 // src/examples/kizombaWorkshop.ts
 var WORKSHOPS = [
   { script: "Saturday 31 October", date: "Sat 31 Oct", first: "20:00 - 21:00", second: "21:00 - 22:00", party: "20\u20AC" },
@@ -685,6 +885,6 @@ var kizombaWorkshop = {
 };
 var kizombaWorkshopDocs = [...WORKSHOPS.map(workshopDoc), kizombaWorkshop];
 
-export { BackgroundStyle, FONT_SETS, FORMAT_SIZES, FlierDocError, FontSetId, FormatId, LayoutId, PALETTES, PaletteId, PictureAnchor, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };
+export { BackgroundStyle, FONT_SETS, FORMAT_SIZES, FlierDocError, FontSetId, FormatId, LAYOUT_CATALOGUE, LayoutId, PALETTES, PaletteId, PictureAnchor, defaultLayoutFor, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map