@popcraft/kit 0.30.0 → 0.31.0

package/src/templates/themes/comic-indie-art.ts

@@ -0,0 +1,73 @@
+// "Last Summer on Alder Street"'s art: one picture a panel, made for these pages with an image model (GPT Image 2,
+// through the Vercel AI Gateway) from one style line and one fixed sentence per character, so the cast stays on model
+// from page to page. Shipped as the portfolios' art is (../web/portfolio-art.ts): JPEG under the media store's
+// content hash in public/templates/media. Made for these templates: free to use with them.
+
+export const INDIE_ART = {
+  'gag-1': { hash: '7278309005e257083761d335f87c1ea2', width: 1280, height: 853, subject: "Wide shot of a cluttered sunny flat kitchen in the morning: Theo carries a stack of empty cardboard boxes past Juno, who sits at the table with a coffee mug, not looking up." },
+  'gag-2': { hash: '74c096aec779b8b2d3dd47dd0d02d93b', width: 1280, height: 853, subject: "Same kitchen, same framing: Theo carries an even taller stack of cardboard boxes past Juno, who now peers over her mug at him." },
+  'gag-3': { hash: 'a8dbddf1dd83322ed04c2ab535638359', width: 1280, height: 853, subject: "Same kitchen: the boxes are stacked to the ceiling, Juno stands up, arms folded, eyebrow raised at Theo who freezes guiltily." },
+  'gag-4': { hash: '01fa53b2ac15ff9dfc7b533e9ac1df57', width: 1280, height: 853, subject: "Close medium shot: Theo sheepishly offers Juno a single roll of packing tape like a gift, Juno deadpan." },
+  'strip-1': { hash: '703aed5d82aa21a0a7cab51feab13bee', width: 1280, height: 853, subject: "Juno opens the flat's front door to find Mrs Okafor holding a huge leggy tomato plant in a pot, warm hallway light." },
+  'strip-2': { hash: '23a1d00f97b7e08e75eaf84714d789c3', width: 1280, height: 853, subject: "Mrs Okafor pushes the tomato plant into Juno's arms, smiling knowingly; Juno awkward, leaves in her face." },
+  'strip-3': { hash: 'd7492163159c81911b0e81776946286c', width: 1280, height: 853, subject: "Juno alone in the hallway hugging the giant tomato plant, looking toward a half-packed box in the background, a little lost." },
+  'talk-1': { hash: 'b9ea25bab982909e9883639ba12f0a86', width: 1280, height: 853, subject: "Two-shot: Juno and Theo sit at opposite ends of a worn green sofa in a small living room at dusk, lamp light, boxes behind them." },
+  'talk-2': { hash: '87f0dba9b035f0c3464211cb208ae348', width: 853, height: 1280, subject: "Close-up profile of Theo facing right, eyes down, rubbing the back of his neck, warm lamp light." },
+  'talk-3': { hash: 'c81ce1b77f0e3a030e56cc8753b633d5', width: 853, height: 1280, subject: "Close-up profile of Juno facing left, jaw set, glasses catching lamp light." },
+  'talk-4': { hash: 'a85bb81ceb51c2571a75de40f4fa7369', width: 853, height: 1280, subject: "Close-up of Theo turning to face us, earnest, a small apologetic smile." },
+  'talk-5': { hash: 'd71d59b54e57edcd73744e754fd9e1a2', width: 853, height: 1280, subject: "Close-up of Juno looking away out a window, sunset colours on her face, eyes wet but not crying." },
+  'talk-6': { hash: '23f5f1d9ed62e4a581b6d100da88ca7b', width: 1280, height: 853, subject: "Two-shot from behind the sofa: Juno and Theo now sitting closer, both looking at the window, shoulders almost touching." },
+  'silent-1': { hash: 'c720a8acf2f8d1327884e800a82b8fbb', width: 1280, height: 853, subject: "Juno walks out of a red-brick terraced house onto a quiet tree-lined street at golden hour, hands in cardigan pockets." },
+  'silent-2': { hash: '9512d89de474ecc6993d23db349b7bc7', width: 1024, height: 1024, subject: "Juno passes a corner shop with crates of fruit outside, glancing at a cafe where two chairs sit empty." },
+  'silent-3': { hash: '3c96304d31faebcf83fabf1139bae4b5', width: 1024, height: 1024, subject: "Close-up of Juno's hand brushing along a chain-link fence covered in morning glories." },
+  'silent-4': { hash: 'f6000b487b383f1f80659128b5f2e918', width: 1024, height: 1024, subject: "Juno stops on a small footbridge over a canal, leaning on the rail, sunset reflecting in the water." },
+  'silent-5': { hash: '11a48aed6ac5a63ee1f2453ed9158310', width: 1024, height: 1024, subject: "A narrowboat drifts under the footbridge on a golden canal, ducks in its wake, no people visible." },
+  'silent-6': { hash: '49f8e54dd649900ebf68d781355dc68d', width: 1280, height: 853, subject: "Juno, small in the frame, sits on a bench by the canal under a huge orange evening sky." },
+  'neg-1': { hash: 'a4e2acb20644b2676056e5a77cbe2c54', width: 853, height: 1280, subject: "Juno sits alone on the worn wooden stairs of an old apartment stairwell, knees hugged, single warm light from above, lots of dark shadow." },
+  'neg-2': { hash: '91581bb8ab834a4f3726fe7b67c2454c', width: 1024, height: 1024, subject: "Mrs Okafor lowers herself to sit beside Juno on the stairs, offering her a small paper bag of plums." },
+  'neg-3': { hash: 'add60674b9245b03ff9f05a695da729b', width: 1280, height: 853, subject: "Juno and Mrs Okafor seen small from the top of the stairwell, sitting side by side eating plums, deep shadows around them." },
+  'riso-1': { hash: '885801e1cd1c8e6afd5413c22f3a0423', width: 1280, height: 853, subject: "Flashback, years earlier: younger Juno and Theo struggle to carry a green sofa up a narrow staircase, laughing." },
+  'riso-2': { hash: '3f1f03442ea4c3f235e1677bc29baf8e', width: 1024, height: 1024, subject: "Flashback: Juno and Theo sitting on the floor of an empty flat eating takeaway noodles from cartons by candlelight." },
+  'riso-3': { hash: '7f28cf9edf034e02648cecc863dfddac', width: 1024, height: 1024, subject: "Flashback: Theo painting a wall of the empty flat a warm terracotta colour, paint on his nose." },
+  'riso-4': { hash: 'd3215f1687917d6c093c326b766b98c2', width: 1024, height: 1024, subject: "Flashback: younger Mrs Okafor in her doorway hands Juno a spare key on a red string." },
+  'riso-5': { hash: 'f842fdebf33c9e05df871ef7ff94a65e', width: 1024, height: 1024, subject: "Flashback: Juno putting a small tomato seedling in a pot on a windowsill." },
+  'riso-6': { hash: 'd5d1426f40a95fd777cc85feefec496d', width: 1280, height: 853, subject: "Flashback: Juno and Theo asleep on the green sofa in the unpacked flat, morning sun pouring in." },
+  'zine-1': { hash: '5d076bd8c3c6a0e13dd3bfa6e365d96c', width: 1024, height: 1024, subject: "Juno and Theo sprawled on the living-room floor drawing a party flyer with markers, scissors and glue around them." },
+  'zine-2': { hash: 'a9481090802497624cb73a623e5eb2b7', width: 1024, height: 1024, subject: "Theo cutting out a paper sun shape with scissors, tongue poking out in concentration." },
+  'zine-3': { hash: '57fa82febd9a935169d62325a0e1e4c6', width: 1024, height: 1024, subject: "Juno feeding a sheet into an old photocopier in a tiny print shop lit pink." },
+  'zine-4': { hash: 'db42a2bb05dd170319d2f69ee7381ecf', width: 1024, height: 1024, subject: "Juno and Theo holding up warm fresh photocopies, grinning, in the print shop." },
+  'zine-5': { hash: 'aadef44e85bd40011e22b2b6fa96a92e', width: 1024, height: 1024, subject: "Juno taping a flyer to a lamp post on the street at evening." },
+  'zine-6': { hash: 'fc15cc0a1d2b05148bd79042c9094378', width: 1024, height: 1024, subject: "Mrs Okafor reading a flyer slid under her door, smiling, reading glasses on her nose." },
+  'web-1': { hash: 'c3d34559e732a1489f6f38746fd0b1b5', width: 1280, height: 853, subject: "Juno and Theo climb a ladder through a hatch onto a flat tar rooftop carrying a tangle of string lights." },
+  'web-2': { hash: '6a4e270e1205bcf3d96fabed6c73f32f', width: 1280, height: 853, subject: "Theo balancing on an upturned crate hanging string lights between two chimneys, sky turning orange." },
+  'web-3': { hash: 'c59a21c74bf19a77966eb9f5d1855d23', width: 1280, height: 853, subject: "Juno arranging mismatched chairs and potted plants on the rooftop, the tomato plant in pride of place." },
+  'web-4': { hash: 'f74227b40602a67fee78ff5716a59f15', width: 1280, height: 853, subject: "Close-up of string lights flickering on against a deep orange and violet sky over rooftops." },
+  'web-5': { hash: '1b5867887ae2ef854abacce4265074ab', width: 1280, height: 853, subject: "Wide shot: the finished rooftop with glowing lights, Juno and Theo standing back admiring it, city skyline at dusk." },
+  'manga-1': { hash: '26bc139ef62bce888d2c74f9ed2cd3b2', width: 1280, height: 853, subject: "Lively rooftop party at dusk: friends dancing under string lights, Mrs Okafor holding a plate of food, Juno and Theo laughing in the middle." },
+  'manga-2': { hash: '38042d09bd02f9a1705ac3c5d762aaa5', width: 853, height: 1280, subject: "Mrs Okafor dancing with surprising energy, arms raised, under the string lights." },
+  'manga-3': { hash: '7293bb7864906a4ca7e032fcec439e22', width: 1024, height: 1024, subject: "Close-up: a fat raindrop splashes onto a paper plate of jollof rice on the rooftop." },
+  'manga-4': { hash: '20905e8fc620309c95b8e0791f5106eb', width: 1280, height: 853, subject: "Sudden heavy summer rain on the rooftop, Juno and Theo scrambling to cover the record player with a jacket, both soaked and laughing." },
+  'manga-5': { hash: 'e25acbb7127fa8477f3883c00de13b57', width: 1024, height: 1024, subject: "Mrs Okafor calmly opening a huge golf umbrella in the rain." },
+  'manga-6': { hash: '86c6caef7d63da6bd2de241dc797f929', width: 1280, height: 853, subject: "Juno, Theo and Mrs Okafor squeezed together under one big umbrella on the wet rooftop, lights reflecting in puddles." },
+  'icon-1': { hash: '1356a79a188f5eef8fe728b918b7f557', width: 900, height: 900, subject: "Two mismatched coffee mugs side by side on a sunlit kitchen windowsill, still life." },
+  'icon-2': { hash: '389c17f33c4caa20ebce699d7c54193d', width: 900, height: 900, subject: "A ring of keys on a red string hanging on a hook by a door, still life." },
+  'icon-3': { hash: 'fed8cc1df96978caa384a1145334c228', width: 900, height: 900, subject: "A potted tomato plant heavy with red tomatoes on a windowsill, still life." },
+  'icon-4': { hash: '470f93f1619abe9669fec1f8380868ca', width: 900, height: 900, subject: "A stack of vinyl records leaning against a green sofa, still life." },
+  'icon-5': { hash: '5d7e780cb6c9885df54232c4557a2992', width: 900, height: 900, subject: "A taped cardboard box with a bicycle helmet on top, still life." },
+  'icon-6': { hash: 'dfc999e2f0c13dd3d7831a5cb7199650', width: 900, height: 900, subject: "A wall with a terracotta-painted patch and pencil height marks, still life." },
+  'icon-7': { hash: '658b68e0fdd56fe3463d06db380e82d9', width: 900, height: 900, subject: "Two toothbrushes in one cup in a small tiled bathroom, still life." },
+  'icon-8': { hash: '419e000f9e5f13053a2bdb5def981789', width: 900, height: 900, subject: "A rumpled blanket on an empty green sofa in evening light, still life." },
+  'icon-9': { hash: 'd923966ad48dda7a1ca0ab4bed402661', width: 900, height: 900, subject: "An open window with a curtain blowing, a sunset sky outside, still life." },
+  'hour-1': { hash: 'a3d065213622660994c37684a5b576a1', width: 1280, height: 853, subject: "Wide shot: Juno and Theo sit on the edge of the rooftop at sunset, legs dangling, the city spread below." },
+  'hour-2': { hash: '3d8f4de451b45e44fc2f985c40c1a76c', width: 1280, height: 853, subject: "Medium shot: Theo hands Juno one of the red-string spare keys, Juno looks at it." },
+  'hour-3': { hash: '199e5d72656c0a6201fc3660cd5ef6e7', width: 1024, height: 1024, subject: "Extreme close-up of Juno's hand closing around a key on a red string, sunset light." },
+  'hour-4': { hash: '58726efa52734b9f560123c086b44ded', width: 1280, height: 853, subject: "Juno rests her head on Theo's shoulder, both looking at the sunset, back view." },
+  'hour-5': { hash: '823c59f93e221b37145a2e6fb346d1d3', width: 1280, height: 853, subject: "Very wide shot: two tiny silhouettes on the rooftop against an enormous orange and pink sunset sky." },
+  'back-1': { hash: 'be8e16cc738e2a3c6c15a426534885ba', width: 900, height: 900, subject: "Theo waving from the window of a departing train, a duffel bag beside him, morning light." },
+  'back-2': { hash: '76cabed26da043b88bb115fb65bf45a7', width: 900, height: 900, subject: "Juno and Mrs Okafor watering the tomato plant together on a sunny windowsill, smiling." },
+} as const
+
+export type IndieArtId = keyof typeof INDIE_ART
+
+/** A panel's picture address in a design: the media store's, by its hash. */
+export const indieArt = (id: IndieArtId): string => `media://${INDIE_ART[id].hash}`

package/src/templates/themes/comic-indie-page.ts

@@ -0,0 +1,182 @@
+// The indie comic pages' kit: "Last Summer on Alder Street", one slice-of-life story told across the comic formats.
+// The art is generated (comic-indie-art.ts); everything a person reads is lettering they can edit. A page is a sheet
+// laid out as a vertical stack of tiers, and each panel is a mask group of [frame shape as mask, its ground, the art,
+// the ink edge], so the art is clipped to the frame and a person can drop their own picture into it. Lettering sits
+// in the tier, over the frames, along the reading path.
+
+import type { Kit } from '../kit'
+import type { Effect, VectorPath } from '@/lib/document/types'
+import { indieArt, type IndieArtId } from './comic-indie-art'
+
+export interface Pt { x: number; y: number }
+export interface Frame { x: number; y: number; width: number; height: number; points: Pt[] }
+
+const COLORS = {
+  paper: '#FBF1E4', text: '#2A1E1A', onPaper: '#4A3A35',
+  primary: '#D9603B', onPrimary: '#FFF8EE',
+  accent: '#F6C66B', onAccent: '#2A1E1A',
+  card: '#FFF8EE', onCard: '#2A1E1A',
+} as const
+
+/** The panels' grounds (what shows while art loads, or if a person removes it) and the ink. */
+const GROUNDS = { g1: '#F2A65A', g2: '#C8553D', g3: '#6E4B6B', g4: '#F7D9A8', ink: '#2A1E1A' } as const
+
+export const STORY = { title: 'Last Summer on Alder Street', series: 'Alder Street', issue: 'No. 1' } as const
+
+/** A page's brand, palette, type and lettering components. */
+export function indieSetup(k: Kit) {
+  k.quantizeGeometry = true
+  k.brand({ ...COLORS }, { title: STORY.title, series: STORY.series, issue: STORY.issue })
+  k.palette({ ...GROUNDS })
+  k.textStyle('Lettering', { size: 12, fontWeight: 700, lineHeight: 14, letterSpacing: 0, textAlign: 'CENTER' })
+  k.textStyle('Caption', { size: 11, fontWeight: 600, lineHeight: 14, letterSpacing: 0 })
+  for (const [suffix, bw] of BALLOON_WIDTHS) {
+    k.component(`Speech balloon${suffix}`, { width: bw, padding: { top: 10, right: 13, bottom: 12, left: 13 }, radius: 22, fill: 'card', stroke: { color: 'onCard', width: 2, align: 'INSIDE' }, align: 'CENTER', props: { Text: 'Say something.' } }, id => {
+      k.propText(id, 'Text', { style: 'Lettering', color: 'onCard', align: 'CENTER', width: 'FILL' })
+    })
+  }
+}
+
+const DISPLAY = {
+  'SFX': { size: 26, fontWeight: 900, fontStyle: 'italic' as const, lineHeight: 26, letterSpacing: -1, textAlign: 'CENTER' as const },
+  'Title': { size: 26, fontWeight: 900, lineHeight: 28, letterSpacing: -0.5 },
+  'Masthead': { size: 40, fontWeight: 900, lineHeight: 40, letterSpacing: -1.5 },
+  'Body': { size: 11, fontWeight: 400, lineHeight: 16, letterSpacing: 0 },
+  'Credit': { size: 9, fontWeight: 700, lineHeight: 12, letterSpacing: 1 },
+}
+const made = new WeakMap<Kit, Set<string>>()
+/** One of the display styles, made on first use. */
+export function display(k: Kit, name: keyof typeof DISPLAY): string {
+  const set = made.get(k) ?? new Set<string>()
+  made.set(k, set)
+  if (!set.has(name)) { k.textStyle(name, DISPLAY[name]); set.add(name) }
+  return name
+}
+
+const BALLOON_WIDTHS: [string, number][] = [[' (small)', 96], ['', 128], [' (wide)', 168]]
+const balloonFor = (w: number): [string, number] => BALLOON_WIDTHS.find(([, bw]) => w <= bw) ?? BALLOON_WIDTHS[BALLOON_WIDTHS.length - 1]
+
+// ─── Geometry ─────────────────────────────────────────────────────────────────────────────────────────────────────
+
+export const rectFrame = (x: number, y: number, width: number, height: number): Frame =>
+  ({ x, y, width, height, points: [{ x: 0, y: 0 }, { x: width, y: 0 }, { x: width, y: height }, { x: 0, y: height }] })
+
+/** A frame from corners in tier space. */
+export function frameOf(corners: Pt[]): Frame {
+  const xs = corners.map(p => p.x), ys = corners.map(p => p.y)
+  const x = Math.min(...xs), y = Math.min(...ys)
+  return { x: Math.round(x), y: Math.round(y), width: Math.round(Math.max(...xs) - x), height: Math.round(Math.max(...ys) - y), points: corners.map(p => ({ x: Math.round(p.x - x), y: Math.round(p.y - y) })) }
+}
+
+export function shares(total: number, gutter: number, parts: number[]): number[] {
+  const sum = parts.reduce((a, b) => a + b, 0), free = total - gutter * (parts.length - 1)
+  const out = parts.map(p => Math.floor((free * p) / sum))
+  out[out.length - 1] = free - out.slice(0, -1).reduce((a, b) => a + b, 0)
+  return out
+}
+
+/** Rectangles side by side. */
+export function tier(width: number, height: number, parts: number[], gutter = 10): Frame[] {
+  let x = 0
+  return shares(width, gutter, parts).map(w => { const f = rectFrame(x, 0, w, height); x += w + gutter; return f })
+}
+
+/** Frames side by side on gutters that lean `lean` px. */
+export function slantTier(width: number, height: number, parts: number[], lean = 16, gutter = 10): Frame[] {
+  const widths = shares(width, gutter, parts), edges: number[] = [0]
+  widths.forEach((w, i) => edges.push(edges[i] + w + (i < widths.length - 1 ? gutter : 0)))
+  return widths.map((_, i) => {
+    const first = i === 0, last = i === widths.length - 1
+    const lTop = first ? 0 : edges[i] + lean, lBot = first ? 0 : edges[i] - lean
+    const rTop = last ? width : edges[i + 1] - gutter + lean, rBot = last ? width : edges[i + 1] - gutter - lean
+    return frameOf([{ x: lTop, y: 0 }, { x: rTop, y: 0 }, { x: rBot, y: height }, { x: lBot, y: height }])
+  })
+}
+
+/** A sheet as a column of tiers. Returns the live area. */
+export function pageGrid(k: Kit, sheet: string, margin: number, gutter: number): { W: number; H: number } {
+  k.flowSheet(sheet, gutter, margin)
+  const n = k.node(sheet)
+  return { W: n.width - margin * 2, H: n.height - margin * 2 - FOLIO - gutter }
+}
+
+/** The folio line under the page's last tier: the series and the page's own title, on the paper. */
+const FOLIO = 14
+export function folio(k: Kit, sheet: string, label: string) {
+  const row = k.stack(sheet, { width: 'FILL', height: FOLIO, direction: 'HORIZONTAL', justify: 'SPACE_BETWEEN', align: 'CENTER', name: 'Folio' })
+  k.text(row, STORY.title, { style: display(k, 'Credit'), color: 'text', name: 'Folio title' })
+  k.text(row, label, { style: display(k, 'Credit'), color: 'onPaper', name: 'Folio label' })
+}
+
+export const tierBox = (k: Kit, sheet: string, W: number, h: number, name: string, fill?: string) =>
+  k.stack(sheet, { width: W, height: h, name, ...(fill ? { fill } : {}) })
+
+export const rows = (H: number, gutter: number, parts: number[]) => shares(H, gutter, parts)
+
+/** A Ben-Day screen: the one flashback page's second plate. */
+const TONE: Effect[] = [{ id: 'e1', type: 'HALFTONE', angle: 45, dotSize: 7, contrast: 0.5, colorMode: 'SOURCE', shape: 'CIRCLE', layout: 'UNIFORM', toneSource: 'LINEAR_GRADIENT', gradientAngle: 90, center: { x: 0.5, y: 0.5 }, visible: true } as Effect]
+
+/** A panel at frame `f`: a mask group of [shape as mask, ground, art, (tone), ink edge]. */
+export function panel(k: Kit, tierId: string, f: Frame, art: IndieArtId, o: { ground: keyof typeof GROUNDS; name: string; tone?: boolean; keyline?: boolean }): string {
+  if (o.keyline) k.rect(tierId, f.width + 12, f.height + 12, 'paper', { name: 'Keyline', absolute: { x: f.x - 6, y: f.y - 6 } })
+  const id = k.group(tierId, { x: f.x, y: f.y, width: f.width, height: f.height }, { name: o.name, absolute: true })
+  k.patch(id, { isMaskGroup: true, isPhotoFrame: true })
+  const shape: VectorPath = { closed: true, points: f.points.map(p => ({ x: p.x, y: p.y })) }
+  k.vector(id, f.width, f.height, [shape], 'paper', { name: 'Panel mask', mask: true })
+  k.rect(id, f.width, f.height, o.ground, { name: 'Ground' })
+  k.image(id, indieArt(art), f.width, f.height, { name: `${o.name} art` })
+  if (o.tone) { const t = k.rect(id, f.width, f.height, 'g3', { name: 'Ben-Day screen', effects: TONE, opacity: 0.35 }); k.patch(t, { blendMode: 'MULTIPLY' }) }
+  k.vector(id, f.width, f.height, [shape], [], { name: 'Panel edge', stroke: { color: 'ink', width: 2.5, join: 'ROUND' } })
+  return id
+}
+
+// ─── Lettering ────────────────────────────────────────────────────────────────────────────────────────────────────
+
+/** A speech balloon at (x, y) in the tier, its tail pointing toward `to` (the speaker, in tier space). */
+export function say(k: Kit, tierId: string, words: string, o: { x: number; y: number; width?: number; to?: Pt; name?: string }) {
+  const [suffix, w] = balloonFor(o.width ?? 128)
+  if (o.to) {
+    const root = { x: o.x + w * 0.5 + (o.to.x > o.x + w / 2 ? w * 0.12 : -w * 0.12), y: o.y + 16 }
+    const lines = Math.ceil((words.length * 6.2) / (w - 26)), foot = o.y + 22 + lines * 14
+    const dist = Math.hypot(o.to.x - root.x, o.to.y - root.y) || 1, reach = Math.min(dist, Math.max(foot - root.y + 22, 30))
+    const to = { x: root.x + ((o.to.x - root.x) * reach) / dist, y: root.y + ((o.to.y - root.y) * reach) / dist }
+    const dx = to.x - root.x, dy = to.y - root.y, len = Math.hypot(dx, dy) || 1, nx = -dy / len, ny = dx / len, half = 8
+    const pts = [{ x: root.x + nx * half, y: root.y + ny * half }, to, { x: root.x - nx * half, y: root.y - ny * half }]
+    const x0 = Math.min(...pts.map(p => p.x)), y0 = Math.min(...pts.map(p => p.y))
+    k.vector(tierId, Math.max(1, Math.max(...pts.map(p => p.x)) - x0), Math.max(1, Math.max(...pts.map(p => p.y)) - y0),
+      [{ closed: true, points: pts.map(p => ({ x: p.x - x0, y: p.y - y0 })) }], 'card', { name: 'Balloon tail', stroke: { color: 'onCard', width: 2, join: 'ROUND' }, absolute: { x: x0, y: y0 } })
+  }
+  return k.instance(tierId, `Speech balloon${suffix}`, { Text: words }, { absolute: { x: Math.round(o.x), y: Math.round(o.y) }, name: o.name ?? 'Balloon' })
+}
+
+/** A caption box: the narrator. */
+export function caption(k: Kit, tierId: string, words: string, o: { x: number; y: number; width?: number; name?: string }) {
+  const id = k.stack(tierId, { width: o.width ?? 200, padding: { top: 6, right: 9, bottom: 7, left: 9 }, fill: 'accent', stroke: { color: 'onAccent', width: 1.5, align: 'INSIDE' }, name: o.name ?? 'Caption box', absolute: { x: Math.round(o.x), y: Math.round(o.y) } })
+  k.text(id, words, { style: 'Caption', color: 'onAccent', width: 'FILL', name: 'Caption words' })
+  return id
+}
+
+/** A small sound effect on a soft impact star. */
+export function sfx(k: Kit, tierId: string, words: string, o: { x: number; y: number; w: number; h: number; deg?: number; seed?: number; name?: string }) {
+  const id = k.stack(tierId, { width: o.w, height: o.h, align: 'CENTER', justify: 'CENTER', name: o.name ?? 'Sound effect', absolute: { x: Math.round(o.x), y: Math.round(o.y) } })
+  const n = 11, pts: Pt[] = []
+  let s = (o.seed ?? 7) >>> 0
+  const r = () => { s = (Math.imul(s, 1664525) + 1013904223) >>> 0; return s / 2 ** 32 }
+  for (let i = 0; i < n * 2; i++) {
+    const a = (i * Math.PI) / n - Math.PI / 2, rad = i % 2 ? 0.7 + r() * 0.06 : 0.92 + r() * 0.08
+    pts.push({ x: o.w / 2 + (o.w / 2) * rad * Math.cos(a), y: o.h / 2 + (o.h / 2) * rad * Math.sin(a) })
+  }
+  k.vector(id, o.w, o.h, [{ closed: true, points: pts }], 'accent', { name: 'Impact star', stroke: { color: 'onAccent', width: 2, join: 'ROUND' }, absolute: { x: 0, y: 0 } })
+  k.text(id, words, { style: display(k, 'SFX'), color: 'onAccent', align: 'CENTER', name: 'Sound effect words', autoWidth: true })
+  if (o.deg) k.patch(id, { rotation: o.deg })
+  return id
+}
+
+/** The meta every page of the story shares. */
+export function indieMeta(name: string, description: string, tags: string[]) {
+  return {
+    name, description, category: 'comic', tags: ['comic', 'print', 'alder street', 'slice of life', 'indie', ...tags],
+    platforms: ['print' as const], formats: ['page' as const], useCases: ['comic' as const],
+    created: '2026-09-22', updated: '2026-10-10',
+  }
+}

package/src/templates/themes/comic-indie.ts

@@ -1,5 +1,238 @@
-// Comic indie pack: one warm slice-of-life series (generated art, editable lettering). Registered empty so its pack PR never edits index.ts; every source in it, in gallery order.
+// Comic indie pack: "Last Summer on Alder Street", one warm slice-of-life story told across twelve comic formats
+// (generated art, editable lettering). Juno and Theo have shared a flat on Alder Street for four years; Theo is
+// moving away at the end of the summer. The boxes appear, the neighbour brings a tomato plant, they talk, Juno walks
+// it off, they remember moving in, throw a rooftop party that gets rained on, and say goodbye at sunset. The letters
+// page closes the issue. Every source in it, in gallery order.
 import type { TemplateSource } from '../build'
+import { defineTemplate } from '../build'
+import { Kit, preset } from '../kit'
+import type { IndieArtId } from './comic-indie-art'
+import { caption, folio, display, frameOf, indieMeta, indieSetup, pageGrid, panel, rectFrame, rows, say, sfx, slantTier, tier, tierBox } from './comic-indie-page'
 
-const pack: readonly TemplateSource[] = []
+const page = (id: string, name: string, description: string, tags: string[], size: string, draw: (k: Kit) => void) => defineTemplate({
+  id, meta: indieMeta(name, description, tags), stableNumbers: true,
+  build() { const k = new Kit(name, preset(size)); indieSetup(k); draw(k); folio(k, k.sheet, name); return k.finish() },
+})
+
+/** A strip's title bar: the series name, left, and the strip's own title. */
+function stripTitle(k: Kit, sheet: string, W: number, title: string) {
+  const t = k.stack(sheet, { width: W, height: 30, direction: 'HORIZONTAL', align: 'CENTER', gap: 12, name: 'Title bar' })
+  k.text(t, 'Alder Street', { style: display(k, 'Title'), color: 'text', name: 'Series' })
+  k.text(t, title, { style: display(k, 'Credit'), color: 'text', name: 'Strip title' })
+}
+
+const gagFour = page('comic-gag-four', 'Four-panel gag', 'Four shots of one kitchen and one thing that changes: Theo carries in more and more boxes until Juno notices, and he offers her the tape', ['strip', 'gag', 'four-panel'], 'comic-strip', k => {
+  const g = 10, { W, H } = pageGrid(k, k.sheet, 20, g)
+  stripTitle(k, k.sheet, W, 'Boxes')
+  const h = H - 30 - g, t = tierBox(k, k.sheet, W, h, 'Strip')
+  const [a, b, c, d] = slantTier(W, h, [1, 1, 1, 1], 10, g)
+  panel(k, t, a, 'gag-1', { ground: 'g1', name: 'Setup' })
+  panel(k, t, b, 'gag-2', { ground: 'g2', name: 'Setup again' })
+  panel(k, t, c, 'gag-3', { ground: 'g3', name: 'Turn' })
+  panel(k, t, d, 'gag-4', { ground: 'g4', name: 'Punchline' })
+  say(k, t, 'Morning!', { x: a.x + 160, y: 10, width: 90, to: { x: a.x + a.width * 0.62, y: 70 } })
+  say(k, t, 'Just a few more.', { x: b.x + 150, y: 10, width: 110, to: { x: b.x + b.width * 0.6, y: 80 } })
+  say(k, t, 'Theo. How many is "a few"?', { x: c.x + 10, y: 10, width: 128, to: { x: c.x + c.width * 0.6, y: 90 } })
+  caption(k, t, 'Monday.', { x: 8, y: h - 34, width: 70 })
+  say(k, t, 'I got you your own tape?', { x: d.x + 16, y: 10, width: 128, to: { x: d.x + d.width * 0.55, y: 110 } })
+})
+
+const stripDaily = page('comic-strip-daily', 'Daily strip', 'A three-beat strip: Mrs Okafor from downstairs arrives with a huge tomato plant, hands it over, and leaves Juno holding it', ['strip', 'gag', 'daily'], 'comic-strip', k => {
+  const g = 10, { W, H } = pageGrid(k, k.sheet, 20, g)
+  stripTitle(k, k.sheet, W, 'The plant')
+  const h = H - 30 - g, t = tierBox(k, k.sheet, W, h, 'Strip')
+  const [a, b, c] = tier(W, h, [1, 1, 1], g)
+  panel(k, t, a, 'strip-1', { ground: 'g1', name: 'The knock' })
+  panel(k, t, b, 'strip-2', { ground: 'g3', name: 'The handover' })
+  panel(k, t, c, 'strip-3', { ground: 'g2', name: 'Holding it' })
+  say(k, t, 'He says you will need someone to look after.', { x: a.x + a.width - 180, y: 12, width: 168, to: { x: a.x + a.width * 0.7, y: 120 } })
+  say(k, t, 'Mrs Okafor, I can barely keep a cactus alive.', { x: b.x + 12, y: 12, width: 168, to: { x: b.x + b.width * 0.3, y: 140 } })
+  say(k, t, 'Water it. Talk to it. You will learn.', { x: b.x + b.width - 140, y: h - 80, width: 128, to: { x: b.x + b.width * 0.72, y: 120 } })
+  caption(k, t, 'Three weeks until he goes.', { x: c.x + 12, y: h - 40, width: 170 })
+})
+
+const talkingHeads = page('comic-talking-heads', 'Talking heads page', 'The conversation on the sofa: a two-shot, then Juno and Theo in alternating closeups across slanted gutters, and the two-shot again with them closer', ['dialogue', 'restraint'], 'comic-page', k => {
+  const g = 12, { W, H } = pageGrid(k, k.sheet, 36, g)
+  const [h1, h2, h3, h4] = rows(H, g, [24, 27, 27, 22])
+  const t1 = tierBox(k, k.sheet, W, h1, 'Tier 1')
+  panel(k, t1, rectFrame(0, 0, W, h1), 'talk-1', { ground: 'g1', name: 'Two-shot' })
+  caption(k, t1, 'The night the boxes came, we finally talked about it.', { x: 12, y: 12, width: 220 })
+  const t2 = tierBox(k, k.sheet, W, h2, 'Tier 2')
+  const [a, b] = slantTier(W, h2, [1, 1], 18, g)
+  panel(k, t2, a, 'talk-2', { ground: 'g2', name: 'Theo' })
+  panel(k, t2, b, 'talk-3', { ground: 'g4', name: 'Juno' })
+  say(k, t2, 'It is a good job, Ju. I would be stupid not to.', { x: 12, y: 12, width: 168, to: { x: a.width * 0.55, y: h2 * 0.45 } })
+  say(k, t2, 'I know.', { x: W - 108, y: 14, width: 90, to: { x: b.x + b.width * 0.4, y: h2 * 0.5 } })
+  const t3 = tierBox(k, k.sheet, W, h3, 'Tier 3')
+  const [c, d] = slantTier(W, h3, [1, 1], -18, g)
+  panel(k, t3, c, 'talk-4', { ground: 'g3', name: 'Theo turns' })
+  panel(k, t3, d, 'talk-5', { ground: 'g1', name: 'Juno looks away' })
+  say(k, t3, 'You could say you will miss me.', { x: 14, y: 12, width: 128, to: { x: c.width * 0.5, y: h3 * 0.5 } })
+  say(k, t3, 'I am saying it. Quietly.', { x: W - 140, y: h3 - 74, width: 128, to: { x: d.x + d.width * 0.4, y: h3 * 0.45 } })
+  const t4 = tierBox(k, k.sheet, W, h4, 'Tier 4')
+  panel(k, t4, rectFrame(0, 0, W, h4), 'talk-6', { ground: 'g2', name: 'Closer' })
+  say(k, t4, 'Rooftop party. Before you go.', { x: W - 186, y: 12, width: 168, to: { x: W * 0.55, y: h4 * 0.6 } })
+})
+
+const silent = page('comic-silent', 'Silent page', 'Juno walks it off: down Alder Street, past the corner shop, along the canal to a bench under an orange sky, carried by the pictures alone', ['grid', 'silent', 'wordless'], 'comic-page', k => {
+  const g = 12, { W, H } = pageGrid(k, k.sheet, 36, g)
+  const [h1, h2, h3, h4] = rows(H, g, [26, 23, 23, 28])
+  const t1 = tierBox(k, k.sheet, W, h1, 'Tier 1')
+  panel(k, t1, rectFrame(0, 0, W, h1), 'silent-1', { ground: 'g1', name: 'Out the door' })
+  caption(k, t1, 'Alder Street, 7:42 pm.', { x: 12, y: 12, width: 150 })
+  const t2 = tierBox(k, k.sheet, W, h2, 'Tier 2')
+  const [a, b] = tier(W, h2, [3, 2], g)
+  panel(k, t2, a, 'silent-2', { ground: 'g2', name: 'Corner shop' })
+  panel(k, t2, b, 'silent-3', { ground: 'g4', name: 'The fence' })
+  const t3 = tierBox(k, k.sheet, W, h3, 'Tier 3')
+  const [c, d] = tier(W, h3, [2, 3], g)
+  panel(k, t3, c, 'silent-4', { ground: 'g3', name: 'The bridge' })
+  panel(k, t3, d, 'silent-5', { ground: 'g1', name: 'The boat' })
+  say(k, t3, 'Hi, ducks.', { x: d.x + 14, y: 12, width: 90, to: { x: c.x + c.width * 0.5, y: h3 * 0.5 } })
+  sfx(k, t3, 'quack', { x: W - 104, y: h3 - 62, w: 92, h: 52, deg: -6, seed: 3 })
+  const t4 = tierBox(k, k.sheet, W, h4, 'Tier 4')
+  panel(k, t4, rectFrame(0, 0, W, h4), 'silent-6', { ground: 'g2', name: 'The bench' })
+})
+
+const negativeSpace = page('comic-negative-space', 'Negative space page', 'Three small frames in a dark stairwell: Juno alone on the stairs, Mrs Okafor sitting down beside her with plums, the two of them seen from above', ['minimal', 'quiet'], 'comic-page', k => {
+  const g = 0, { W, H } = pageGrid(k, k.sheet, 36, g)
+  const [h1, h2, h3] = rows(H, g, [40, 26, 34])
+  const t1 = tierBox(k, k.sheet, W, h1, 'Tier 1')
+  const f1 = rectFrame(36, 40, 200, h1 - 80)
+  panel(k, t1, f1, 'neg-1', { ground: 'g3', name: 'Alone' })
+  caption(k, t1, 'Some things you cannot walk off.', { x: 260, y: h1 - 90, width: 180 })
+  const t2 = tierBox(k, k.sheet, W, h2, 'Black band', 'text')
+  const f2 = rectFrame(W - 236, 24, 200, h2 - 48)
+  panel(k, t2, f2, 'neg-2', { ground: 'g1', name: 'Plums', keyline: true })
+  say(k, t2, 'Sit. Eat a plum. Tell me.', { x: 120, y: 40, width: 128, to: { x: f2.x + 60, y: f2.y + 50 } })
+  const t3 = tierBox(k, k.sheet, W, h3, 'Tier 3')
+  const f3 = rectFrame(0, 50, W, h3 - 100)
+  panel(k, t3, f3, 'neg-3', { ground: 'g4', name: 'From above' })
+  say(k, t3, 'He is leaving, and I keep acting like he is already gone.', { x: 18, y: 4, width: 168, to: { x: W * 0.45, y: h3 * 0.6 } })
+})
+
+const riso = page('comic-riso', 'Risograph page', 'The flashback in two inks and a screen: four summers ago, the sofa up the stairs, noodles by candlelight, the terracotta wall, the spare key and the first seedling', ['riso', 'zine', 'flashback', 'duotone'], 'comic-page', k => {
+  const g = 12, { W, H } = pageGrid(k, k.sheet, 36, g)
+  const [h1, h2, h3] = rows(H, g, [34, 30, 36])
+  const t1 = tierBox(k, k.sheet, W, h1, 'Tier 1')
+  panel(k, t1, rectFrame(0, 0, W, h1), 'riso-1', { ground: 'g2', name: 'The sofa' })
+  caption(k, t1, 'Four summers ago.', { x: 12, y: 12, width: 130 })
+  say(k, t1, 'Pivot! PIVOT!', { x: W - 112, y: 16, width: 96, to: { x: W * 0.6, y: h1 * 0.4 } })
+  const t2 = tierBox(k, k.sheet, W, h2, 'Tier 2')
+  const [a, b, c] = tier(W, h2, [1, 1, 1], g)
+  panel(k, t2, a, 'riso-2', { ground: 'g1', name: 'Noodles', tone: true })
+  panel(k, t2, b, 'riso-3', { ground: 'g3', name: 'The wall' })
+  panel(k, t2, c, 'riso-4', { ground: 'g4', name: 'The key' })
+  say(k, t2, 'For emergencies. And sugar.', { x: c.x + 10, y: 10, width: 96, to: { x: c.x + c.width * 0.3, y: h2 * 0.3 } })
+  const t3 = tierBox(k, k.sheet, W, h3, 'Tier 3')
+  const [d, e] = tier(W, h3, [1, 2], g)
+  panel(k, t3, d, 'riso-5', { ground: 'g2', name: 'The seedling', tone: true })
+  panel(k, t3, e, 'riso-6', { ground: 'g1', name: 'First morning' })
+  caption(k, t3, 'We did not own a bed yet. We owned a sofa.', { x: e.x + 12, y: h3 - 48, width: 220 })
+})
+
+const zine = page('comic-zine', 'Quarter-fold zine', 'Making the party flyer: drawing it on the floor, cutting out the sun, the pink print shop, warm copies, a lamp post and Mrs Okafor reading hers', ['zine', 'mini-comic', 'diy'], 'comic-page', k => {
+  const g = 12, { W, H } = pageGrid(k, k.sheet, 36, g)
+  const hs = rows(H, g, [1, 1, 1])
+  const pairs: [string, string][] = [['zine-1', 'zine-2'], ['zine-3', 'zine-4'], ['zine-5', 'zine-6']]
+  const words = ['Rooftop. Saturday. Bring a chair.', 'Make it hot pink.', 'Everyone is invited. Even you, Mrs O.']
+  pairs.forEach(([l, r], i) => {
+    const t = tierBox(k, k.sheet, W, hs[i], `Mini pages ${i * 2 + 1}–${i * 2 + 2}`)
+    const [a, b] = tier(W, hs[i], [1, 1], g)
+    panel(k, t, a, l as IndieArtId, { ground: i % 2 ? 'g3' : 'g1', name: `Page ${i * 2 + 1}` })
+    panel(k, t, b, r as IndieArtId, { ground: i % 2 ? 'g4' : 'g2', name: `Page ${i * 2 + 2}` })
+    if (i === 1) say(k, t, words[i], { x: 12, y: 12, width: 110, to: { x: a.width * 0.5, y: hs[i] * 0.5 } })
+    else caption(k, t, words[i], { x: i ? b.x + 12 : 12, y: 12, width: 160 })
+  })
+})
+
+const webtoon = page('comic-webtoon', 'Vertical scroll (webtoon)', 'Up to the roof in one column of full-width beats: through the hatch, the string lights, the chairs and the plant, the lights coming on, and the finished roof', ['webtoon', 'vertical', 'scroll', 'digital'], 'comic-page', k => {
+  const g = 26, { W, H } = pageGrid(k, k.sheet, 36, g)
+  const hs = rows(H, g, [22, 17, 17, 12, 32])
+  const beats = [['web-1', 'Through the hatch', 'g1'], ['web-2', 'Lights up', 'g2'], ['web-3', 'Chairs', 'g4'], ['web-4', 'On', 'g3'], ['web-5', 'Ready', 'g1']] as const
+  beats.forEach(([art, name, ground], i) => {
+    const t = tierBox(k, k.sheet, W, hs[i], `Beat ${i + 1}`)
+    panel(k, t, rectFrame(0, 0, W, hs[i]), art, { ground, name })
+    if (i === 0) say(k, t, 'Mind the tar, it is still warm.', { x: W - 150, y: 12, width: 128, to: { x: W * 0.45, y: hs[i] * 0.5 } })
+    if (i === 1) say(k, t, 'Higher. No, the other higher.', { x: 14, y: 12, width: 128, to: { x: W * 0.5, y: hs[i] * 0.5 } })
+    if (i === 4) caption(k, t, 'It looked like somewhere you would want to stay.', { x: 12, y: hs[i] - 46, width: 230 })
+  })
+})
+
+const manga = page('comic-manga-page', 'Manga page', 'The party, read right to left: dancing under the lights, Mrs Okafor out-dancing everyone, the first raindrop, the scramble, one big umbrella', ['manga', 'panels', 'right-to-left'], 'manga-page', k => {
+  const g = 8, { W, H } = pageGrid(k, k.sheet, 36, g)
+  const [h1, h2, h3] = rows(H, g, [30, 34, 36])
+  const t1 = tierBox(k, k.sheet, W, h1, 'Tier 1')
+  panel(k, t1, rectFrame(0, 0, W, h1), 'manga-1', { ground: 'g1', name: 'The party' })
+  caption(k, t1, 'Saturday. Everyone came.', { x: 12, y: 12, width: 150 })
+  say(k, t1, 'You call that dancing? Watch.', { x: W - 150, y: 12, width: 128, to: { x: W * 0.62, y: h1 * 0.55 } })
+  const t2 = tierBox(k, k.sheet, W, h2, 'Tier 2')
+  const [left, right] = slantTier(W, h2, [2, 3], 22, g)
+  panel(k, t2, right, 'manga-2', { ground: 'g2', name: 'Mrs Okafor dances' })
+  panel(k, t2, left, 'manga-3', { ground: 'g4', name: 'First drop' })
+  sfx(k, t2, 'plip', { x: 20, y: h2 - 72, w: 96, h: 56, deg: 8, seed: 5 })
+  const t3 = tierBox(k, k.sheet, W, h3, 'Tier 3')
+  const [l3, r3] = slantTier(W, h3, [3, 2], -22, g)
+  panel(k, t3, r3, 'manga-5', { ground: 'g3', name: 'The umbrella' })
+  panel(k, t3, l3, 'manga-4', { ground: 'g1', name: 'Scramble' })
+  sfx(k, t3, 'fwump', { x: r3.x + 30, y: 14, w: 110, h: 60, deg: -8, seed: 9 })
+  say(k, t3, 'The records! Save the records!', { x: 14, y: h3 - 76, width: 128, to: { x: l3.width * 0.5, y: h3 * 0.4 } })
+})
+
+const iconGrid = page('comic-icon-grid', 'Modular page', 'A fine grid of the flat as it was: two mugs, the spare key, the tomatoes, the records, a packed box, the painted wall, two toothbrushes, the empty sofa, an open window', ['modular', 'grid', 'still life'], 'comic-page', k => {
+  const g = 10, { W, H } = pageGrid(k, k.sheet, 36, g)
+  const cell = Math.floor((W - 2 * g) / 3)
+  const head = 56, foot = H - head - 3 * cell - 4 * g
+  const t0 = tierBox(k, k.sheet, W, head, 'Heading')
+  caption(k, t0, 'Everything that was ours, the week before he left.', { x: 0, y: 10, width: 300 })
+  const grounds = ['g1', 'g2', 'g3'] as const
+  for (let r = 0; r < 3; r++) {
+    const t = tierBox(k, k.sheet, W, cell, `Row ${r + 1}`)
+    tier(W, cell, [1, 1, 1], g).forEach((f, c) => panel(k, t, f, `icon-${r * 3 + c + 1}` as IndieArtId, { ground: grounds[(c + r) % 3], name: `Object ${r * 3 + c + 1}` }))
+    if (r === 2) say(k, t, 'You are keeping the sofa.', { x: W - 140, y: 10, width: 128, to: { x: W - 100, y: cell * 0.7 } })
+  }
+  tierBox(k, k.sheet, W, foot, 'Footer')
+})
+
+const hourglass = page('comic-hourglass', 'Symbol page (hourglass)', 'The goodbye at sunset, in frames that make an hourglass: the roof edge, the spare key, a hand closing round it at the waist, her head on his shoulder, two silhouettes against the sky', ['symbol', 'architecture', 'sunset'], 'comic-page', k => {
+  const g = 10, { W, H } = pageGrid(k, k.sheet, 36, g)
+  const [h1, h2, h3, h4, h5] = rows(H, g, [22, 18, 16, 18, 26])
+  const inset = W * 0.22, waist = W * 0.32
+  const t1 = tierBox(k, k.sheet, W, h1, 'Top')
+  panel(k, t1, rectFrame(0, 0, W, h1), 'hour-1', { ground: 'g1', name: 'The edge' })
+  caption(k, t1, 'The last night.', { x: 12, y: 12, width: 120 })
+  const t2 = tierBox(k, k.sheet, W, h2, 'Narrowing')
+  panel(k, t2, frameOf([{ x: 0, y: 0 }, { x: W, y: 0 }, { x: W - inset, y: h2 }, { x: inset, y: h2 }]), 'hour-2', { ground: 'g2', name: 'The key' })
+  say(k, t2, 'So the place still has someone with a spare.', { x: W - 180, y: 6, width: 168, to: { x: W * 0.5, y: h2 * 0.6 } })
+  const t3 = tierBox(k, k.sheet, W, h3, 'Waist')
+  panel(k, t3, rectFrame(Math.round((W - waist) / 2), 0, Math.round(waist), h3), 'hour-3', { ground: 'g3', name: 'Her hand' })
+  const t4 = tierBox(k, k.sheet, W, h4, 'Widening')
+  panel(k, t4, frameOf([{ x: inset, y: 0 }, { x: W - inset, y: 0 }, { x: W, y: h4 }, { x: 0, y: h4 }]), 'hour-4', { ground: 'g4', name: 'Her head on his shoulder' })
+  const t5 = tierBox(k, k.sheet, W, h5, 'Bottom')
+  panel(k, t5, rectFrame(0, 0, W, h5), 'hour-5', { ground: 'g2', name: 'Two silhouettes' })
+  say(k, t5, 'Same time next summer?', { x: W * 0.5 - 64, y: 14, width: 128, to: { x: W * 0.5, y: h5 * 0.7 } })
+})
+
+const backmatter = page('comic-backmatter', 'Back matter (letters page)', 'The letters page that closes the issue: a masthead, a reader\'s letter, two small panels of what came after, the reply and the indicia', ['back-matter', 'letters'], 'comic-page', k => {
+  const g = 14, { W, H } = pageGrid(k, k.sheet, 36, g)
+  const t0 = tierBox(k, k.sheet, W, 56, 'Masthead')
+  k.text(t0, 'Letters to Alder Street', { style: display(k, 'Masthead'), color: 'text', name: 'Masthead', width: 'FILL' })
+  const letter = k.stack(k.sheet, { width: W, gap: 6, name: 'Letter' })
+  k.text(letter, 'Dear Alder Street,', { style: display(k, 'Credit'), color: 'text', name: 'Salutation' })
+  k.text(letter, 'I shared a flat with my best friend for five years, and when she moved for work I did exactly what Juno did: packed nothing, said nothing, and walked a long way round the block. Reading this issue on the bus, I had to put it down twice. Is there going to be a next summer? Please say yes. And please tell me the tomato plant made it.', { style: display(k, 'Body'), color: 'text', width: 'FILL', name: 'Letter body' })
+  k.text(letter, '— A reader in a flat that is too quiet now', { style: display(k, 'Credit'), color: 'onPaper', name: 'Signature' })
+  const ph = 190, t = tierBox(k, k.sheet, W, ph, 'After')
+  const [a, b] = tier(W, ph, [1, 1], g)
+  panel(k, t, a, 'back-1', { ground: 'g1', name: 'The train' })
+  panel(k, t, b, 'back-2', { ground: 'g3', name: 'Watering' })
+  caption(k, t, 'After.', { x: 10, y: ph - 36, width: 70 })
+  say(k, t, 'It made it.', { x: b.x + b.width - 108, y: 10, width: 96, to: { x: b.x + b.width * 0.4, y: ph * 0.5 } })
+  const reply = k.stack(k.sheet, { width: W, gap: 6, name: 'Reply' })
+  k.text(reply, 'We say yes. The plant had forty-one tomatoes, Mrs Okafor counted. Theo sends a postcard every month and the spare key still hangs by the door. Next summer starts in issue two. Write to us, and tell us about the people you shared a kitchen with.', { style: display(k, 'Body'), color: 'text', width: 'FILL', name: 'Reply body' })
+  const used = 56 + ph + 4 * g + 270
+  const ind = k.stack(k.sheet, { width: W, height: Math.max(40, H - used), justify: 'MAX', name: 'Indicia' })
+  k.text(ind, 'LAST SUMMER ON ALDER STREET No. 1. Story, art and letters by the Alder Street team. Printed on recycled stock.', { style: display(k, 'Credit'), color: 'onPaper', width: 'FILL', name: 'Indicia text' })
+})
+
+const pack: readonly TemplateSource[] = [gagFour, stripDaily, talkingHeads, silent, negativeSpace, riso, zine, webtoon, manga, iconGrid, hourglass, backmatter]
 export default pack