@dloizides/poster-render 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.2.0
+
+- Layouts `arch`, `phone-clock-safe`, `phone-arch`, `desktop-safe`, `desktop-arch` (FLIER-1 D4 "Keep all layouts"); `LAYOUT_CATALOGUE` + `defaultLayoutFor`.
+- Critic r2 nits: arch prices moved up beside the arch top, lighter arch fill, phone arch top at 63% height, desktop arch 40 px right, logo top on the title cap top.
+- Includes block uses one size for every line; `RenderReport.backdrop`; `Palette.arch`.
+
 ## 0.1.0
 
 - FlierDoc schema + validator, render, exportPng, 4 layouts, 5 formats, palettes, font sets, Kizomba example.

package/README.md

@@ -7,6 +7,7 @@ One JSON document (`FlierDoc`) in, one poster out. Used by Flier Studio (FLIER-1
 - `render(doc, assets, canvas)`: validates first (throws `FlierDocError` before touching the canvas), resizes the canvas to the format, draws, returns a `RenderReport` (picture rect, text and card boxes).
 - `exportPng(canvas)`: PNG `Blob` of the canvas size.
 - Formats: story 1080x1920, post 1080x1350, square 1080x1080, phone 1170x2532, desktop 2560x1440.
-- Layouts: `picture-right`, `picture-left`, `picture-bottom`, `list`. Palettes: `sand`, `night`, `sea`, `rose`. Font sets: `classic`, `modern`, `elegant` (the app loads the web fonts).
+- Layouts: `picture-right` (E-A), `picture-left` (E-B), `arch` (E-C), `picture-bottom`, `list`, `phone-clock-safe` (P-A, top kept clear for the lock-screen clock), `phone-arch` (P-B), `desktop-safe` (D-A, text clear of desktop icons and the taskbar), `desktop-arch` (D-B). `LAYOUT_CATALOGUE` lists id, design id, label, description and designed formats (for the app picker and the LLM prompt); `defaultLayoutFor(format)` gives E-A / P-A / D-A.
+- Arch layouts paint a soft arch (palette `arch`, about 4% off the ground) behind the picture only, inside the picture region; prices sit large on either side. The includes block is set at one size for every line. Palettes: `sand`, `night`, `sea`, `rose`. Font sets: `classic`, `modern`, `elegant` (the app loads the web fonts).
 - The picture is placed contain + anchor in its own region: never cropped, never faded, drawn last, and no text or card is laid out in its region. Text shrinks to fit, never overflows.
 - Example: `kizombaWorkshopDocs` (3 workshops + list flier), `kizombaWorkshop` (the list flier).

package/dist/index.d.mts

@@ -21,7 +21,12 @@ declare enum LayoutId {
     PictureRight = "picture-right",
     PictureLeft = "picture-left",
     PictureBottom = "picture-bottom",
-    List = "list"
+    List = "list",
+    Arch = "arch",
+    PhoneClockSafe = "phone-clock-safe",
+    PhoneArch = "phone-arch",
+    DesktopSafe = "desktop-safe",
+    DesktopArch = "desktop-arch"
 }
 
 declare enum PaletteId {
@@ -135,6 +140,7 @@ interface RenderReport {
     pictureRegion: Rect;
     textBoxes: Rect[];
     cardBoxes: Rect[];
+    backdrop: Rect | null;
 }
 interface Palette {
     background: string;
@@ -144,6 +150,7 @@ interface Palette {
     ink: string;
     soft: string;
     card: string;
+    arch: string;
 }
 interface FontSet {
     display: string;
@@ -200,7 +207,18 @@ interface DataUrlCanvas {
 /** Encodes the canvas as a PNG Blob of the canvas's exact pixel size. */
 declare function exportPng(canvas: DataUrlCanvas): Blob;
 
+interface LayoutCatalogueEntry {
+    id: LayoutId;
+    designId: string;
+    label: string;
+    description: string;
+    formats: readonly FormatId[];
+}
+declare const LAYOUT_CATALOGUE: readonly LayoutCatalogueEntry[];
+/** The default layout for a format (D4: E-A for posters, P-A for phone, D-A for desktop). */
+declare function defaultLayoutFor(format: FormatId): LayoutId;
+
 declare const kizombaWorkshop: FlierDoc;
 declare const kizombaWorkshopDocs: FlierDoc[];
 
-export { BackgroundStyle, type DataUrlCanvas, FONT_SETS, FORMAT_SIZES, type FlierBlocks, type FlierDoc, FlierDocError, type FlierDocResult, type FontSet, FontSetId, FormatId, type FormatSize, type IncludesBlock, type JsonSchema, LayoutId, type ListItem, type LogoSlot, PALETTES, type Palette, PaletteId, PictureAnchor, type PictureSlot, type PosterAssets, type PosterCanvas, type PosterContext, type PosterImage, type PriceRow, type Rect, type RenderReport, type ScheduleRow, type TextMetricsLike, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };
+export { BackgroundStyle, type DataUrlCanvas, FONT_SETS, FORMAT_SIZES, type FlierBlocks, type FlierDoc, FlierDocError, type FlierDocResult, type FontSet, FontSetId, FormatId, type FormatSize, type IncludesBlock, type JsonSchema, LAYOUT_CATALOGUE, type LayoutCatalogueEntry, LayoutId, type ListItem, type LogoSlot, PALETTES, type Palette, PaletteId, PictureAnchor, type PictureSlot, type PosterAssets, type PosterCanvas, type PosterContext, type PosterImage, type PriceRow, type Rect, type RenderReport, type ScheduleRow, type TextMetricsLike, defaultLayoutFor, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };

package/dist/index.d.ts

@@ -21,7 +21,12 @@ declare enum LayoutId {
     PictureRight = "picture-right",
     PictureLeft = "picture-left",
     PictureBottom = "picture-bottom",
-    List = "list"
+    List = "list",
+    Arch = "arch",
+    PhoneClockSafe = "phone-clock-safe",
+    PhoneArch = "phone-arch",
+    DesktopSafe = "desktop-safe",
+    DesktopArch = "desktop-arch"
 }
 
 declare enum PaletteId {
@@ -135,6 +140,7 @@ interface RenderReport {
     pictureRegion: Rect;
     textBoxes: Rect[];
     cardBoxes: Rect[];
+    backdrop: Rect | null;
 }
 interface Palette {
     background: string;
@@ -144,6 +150,7 @@ interface Palette {
     ink: string;
     soft: string;
     card: string;
+    arch: string;
 }
 interface FontSet {
     display: string;
@@ -200,7 +207,18 @@ interface DataUrlCanvas {
 /** Encodes the canvas as a PNG Blob of the canvas's exact pixel size. */
 declare function exportPng(canvas: DataUrlCanvas): Blob;
 
+interface LayoutCatalogueEntry {
+    id: LayoutId;
+    designId: string;
+    label: string;
+    description: string;
+    formats: readonly FormatId[];
+}
+declare const LAYOUT_CATALOGUE: readonly LayoutCatalogueEntry[];
+/** The default layout for a format (D4: E-A for posters, P-A for phone, D-A for desktop). */
+declare function defaultLayoutFor(format: FormatId): LayoutId;
+
 declare const kizombaWorkshop: FlierDoc;
 declare const kizombaWorkshopDocs: FlierDoc[];
 
-export { BackgroundStyle, type DataUrlCanvas, FONT_SETS, FORMAT_SIZES, type FlierBlocks, type FlierDoc, FlierDocError, type FlierDocResult, type FontSet, FontSetId, FormatId, type FormatSize, type IncludesBlock, type JsonSchema, LayoutId, type ListItem, type LogoSlot, PALETTES, type Palette, PaletteId, PictureAnchor, type PictureSlot, type PosterAssets, type PosterCanvas, type PosterContext, type PosterImage, type PriceRow, type Rect, type RenderReport, type ScheduleRow, type TextMetricsLike, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };
+export { BackgroundStyle, type DataUrlCanvas, FONT_SETS, FORMAT_SIZES, type FlierBlocks, type FlierDoc, FlierDocError, type FlierDocResult, type FontSet, FontSetId, FormatId, type FormatSize, type IncludesBlock, type JsonSchema, LAYOUT_CATALOGUE, type LayoutCatalogueEntry, LayoutId, type ListItem, type LogoSlot, PALETTES, type Palette, PaletteId, PictureAnchor, type PictureSlot, type PosterAssets, type PosterCanvas, type PosterContext, type PosterImage, type PriceRow, type Rect, type RenderReport, type ScheduleRow, type TextMetricsLike, defaultLayoutFor, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };

package/dist/index.js

@@ -31,6 +31,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 || {});
 
@@ -62,10 +67,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
@@ -316,11 +321,11 @@ function itemGroup(item, l, u) {
   }
   return { lines, gapAfter: 26 * 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 }));
+  (withPrices ? b.prices : void 0)?.forEach((row) => groups.push({ lines: [l.strong?.(row.amount, 66), l.accent?.(row.label, 52)], gapAfter: 30 * u }));
   return groups;
 }
 function listGroups(doc, l, u) {
@@ -331,7 +336,11 @@ 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 = [];
@@ -339,10 +348,10 @@ function bodyGroups(doc, p, u) {
   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(...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, card: { color: p.card, pad: 28 * u }, uniform: true });
   }
   if (b.footer) {
     groups.push({ lines: [l.soft?.(b.footer, 34)], gapAfter: 0 });
@@ -350,6 +359,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 }
+  },
+  ["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.88, 0.04, 0.09, 0.14], 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;
@@ -362,12 +416,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 },
@@ -375,19 +429,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 },
@@ -395,8 +449,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);
   }
@@ -433,6 +502,12 @@ 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 placeGroup(m, k, col, y0, out) {
   const { group } = m;
   let y = y0;
@@ -443,11 +518,12 @@ function placeGroup(m, k, col, y0, out) {
   const pad = group.card ? group.card.pad * k : 0;
   const top = y;
   y += pad;
+  const ratio = groupRatio(m, k, col.w - 2 * pad);
   group.lines.forEach((line, i) => {
-    const size = lineSize(line, m.widths[i] ?? 1, k, col.w - 2 * pad);
+    const size = ratio === null ? lineSize(line, m.widths[i] ?? 1, k, col.w - 2 * pad) : line.size * ratio;
     const indent = line.bullet ? line.size * k * BULLET_INDENT : 0;
-    const x = col.x + pad + indent;
     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 });
@@ -526,21 +602,22 @@ 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;
+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;
@@ -571,6 +648,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 } };
@@ -593,20 +694,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 r3 = placeContain(logoImage, capAligned(zones.logo, head), "top" /* Top */, 1, 1);
+    ctx.drawImage(logoImage, r3.x, r3.y, r3.w, r3.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);
@@ -616,8 +722,9 @@ 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),
+    backdrop
   };
 }
 
@@ -636,6 +743,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" },
@@ -693,10 +824,12 @@ exports.FORMAT_SIZES = FORMAT_SIZES;
 exports.FlierDocError = FlierDocError;
 exports.FontSetId = FontSetId;
 exports.FormatId = FormatId;
+exports.LAYOUT_CATALOGUE = LAYOUT_CATALOGUE;
 exports.LayoutId = LayoutId;
 exports.PALETTES = PALETTES;
 exports.PaletteId = PaletteId;
 exports.PictureAnchor = PictureAnchor;
+exports.defaultLayoutFor = defaultLayoutFor;
 exports.exportPng = exportPng;
 exports.flierDocSchema = flierDocSchema;
 exports.kizombaWorkshop = kizombaWorkshop;