@popcraft/kit 0.29.0 → 0.31.0

package/src/templates/print/comic-modern-issue.ts

@@ -0,0 +1,71 @@
+// "The Long Night" no. 1, the whole issue: a front cover, interior pages round a centrefold, a closing page and a
+// back cover, in reading order, so the file prints as a comic and reads as one.
+//
+// Harbour City's lights go out block by block (page 1). Ada and her brother Teo find the one light left, at the top
+// of the old harbour radio tower (2), climb it through a gust that nearly takes Teo (3, 4), and meet the
+// Lamplighter, who switches the city off one hour a year so it can see its own sky (5, 6). The sky (the
+// centrefold, 7–8). The lights come back at dawn (9), and the two of them walk home (10).
+
+import { Kit, preset } from '../kit'
+import { defineTemplate } from '../build'
+import { bleedFrame, caption, comicMeta, comicSetup, pageGrid, panel, rectFrame, rows, say, SIZE, tier, tierBox } from '../themes/comic-modern'
+import { coverPage } from './comic-modern-cover-pulp'
+import { splashPage } from './comic-modern-splash'
+import { blackoutPage } from './comic-modern-page-classic'
+import { climbPage } from './comic-modern-nine-grid'
+import { flashbackPage } from './comic-modern-flashback'
+import { skySpread } from './comic-modern-spread'
+import { gustPage } from './comic-modern-action-slant'
+import { lamplighterPage } from './comic-modern-radial'
+import { dawnPage } from './comic-modern-polyptych'
+
+/** Page 10: the walk home, and the last beat at Teo's window. */
+function epiloguePage(k: Kit, sheet: string) {
+  const g = 12, { W, H } = pageGrid(k, sheet, 36, g)
+  const [h1, h2] = rows(H, g, [55, 45])
+  const t1 = tierBox(k, sheet, W, h1, 'Tier 1')
+  panel(k, t1, rectFrame(0, 0, W, h1), { art: 'end1', focus: [0.55, 0.45] }, { ground: 'g1', name: 'The walk home' })
+  caption(k, t1, 'He gave Teo a lantern of his own. “For next year,” he said.', { x: 10, y: 10, width: 210 })
+  say(k, t1, 'Do you think anyone else noticed?', { x: W * 0.62, y: h1 * 0.08, width: 128, to: { x: W * 0.74, y: h1 * 0.36 } })
+  const t2 = tierBox(k, sheet, W, h2, 'Tier 2')
+  const [a, b] = tier(W, h2, [3, 2], g)
+  panel(k, t2, a, { art: 'end2', focus: [0.4, 0.45] }, { ground: 'g2', name: 'Lights out' })
+  panel(k, t2, b, { art: 'rad-sky', focus: [0.6, 0.3] }, { ground: 'g3', name: 'The sky again' })
+  say(k, t2, 'Night, Ada. Leave it off a minute.', { x: 12, y: 12, width: 128, to: { x: a.width * 0.32, y: h2 * 0.36 } })
+  caption(k, t2, 'The end.', { x: b.x + b.width - 180, y: h2 - 90, width: 100, name: 'The end' })
+}
+
+/** The back cover: the sky again, and what is next. */
+function backCover(k: Kit, sheet: string) {
+  const { w: W, h: H } = SIZE.page
+  k.flowSheet(sheet, 0, 0)
+  const t = tierBox(k, sheet, W, H, 'Back')
+  panel(k, t, bleedFrame(k, W, H), { art: 'spread', focus: [0.6, 0.4] }, { ground: 'g1', name: 'Back art', edge: false })
+  caption(k, t, '{{brand.series}} · {{brand.issue}}', { x: 48, y: 52, width: 210 })
+  caption(k, t, 'Next issue: The Long Morning. Somebody else saw the stars.', { x: 48, y: H - 120, width: 250, name: 'Next issue' })
+}
+
+export default defineTemplate({
+  id: 'comic-book',
+  meta: comicMeta('Whole comic issue', '"The Long Night" no. 1, a complete short comic in modern painted comic art: the front cover, ten interior pages round a centrefold of the sky, and the back cover. Ada and her brother Teo climb the harbour radio tower on the night the city goes dark', ['book', 'issue', 'spread', 'story']),
+  sequence: true,
+  stableNumbers: true,
+  build() {
+    const k = new Kit('Whole comic issue', preset('comic-cover'))
+    comicSetup(k)
+    k.doc = { ...k.doc, settings: { ...k.doc.settings, facingPages: true } }
+    const front = k.sheet
+    k.nameSheet(front, 'Front cover')
+    coverPage(k, front)
+    k.setCover(front)
+    const pages: [string, (k: Kit, s: string) => void][] = [
+      ['Page 1', blackoutPage], ['Page 2', splashPage], ['Page 3', gustPage], ['Page 4', climbPage], ['Page 5', lamplighterPage], ['Page 6', flashbackPage],
+    ]
+    for (const [name, draw] of pages) draw(k, k.addSheet(preset('comic-page'), name))
+    skySpread(k, k.addSheet(preset('comic-spread'), 'Centrefold (pages 7–8)'))
+    const after: [string, (k: Kit, s: string) => void][] = [['Page 9', dawnPage], ['Page 10', epiloguePage]]
+    for (const [name, draw] of after) draw(k, k.addSheet(preset('comic-page'), name))
+    backCover(k, k.addSheet(preset('comic-page'), 'Back cover'))
+    return k.finish()
+  },
+})

package/src/templates/print/comic-modern-nine-grid.ts

@@ -0,0 +1,56 @@
+// "The Long Night", page 4: the climb. A nine-panel grid.
+//
+// The grid's argument is rhythm: nine even beats, one rung after another, from Ada's hand on the first rung to the
+// hatch at the top and the man waiting there. Close-ups and long views alternate so the height keeps growing.
+
+import { Kit, preset } from '../kit'
+import { defineTemplate } from '../build'
+import type { ComicArtId } from '../themes/comic-art'
+import { caption, comicMeta, comicSetup, pageGrid, panel, rows, say, sfx, tier, tierBox, type Ground } from '../themes/comic-modern'
+
+export function climbPage(k: Kit, sheet: string) {
+  const g = 10, { W, H } = pageGrid(k, sheet, 36, g)
+  const hs = rows(H, g, [1, 1, 1])
+  const beats: [ComicArtId, [number, number], string][] = [
+    ['g1', [0.45, 0.5], 'First rung'], ['g2', [0.6, 0.45], 'Teo climbs'], ['g3', [0.4, 0.5], 'The gull'],
+    ['g4', [0.6, 0.45], 'Looking down'], ['g5', [0.5, 0.4], 'Light above'], ['g6', [0.45, 0.4], 'The gantry'],
+    ['g7', [0.5, 0.45], 'The hatch'], ['g8', [0.45, 0.5], 'Up through'], ['g9', [0.45, 0.5], 'The man at the lever'],
+  ]
+  const grounds: Ground[] = ['g1', 'g2', 'g3']
+  const cw = Math.round((W - g * 2) / 3)
+  for (let r = 0; r < 3; r++) {
+    const t = tierBox(k, sheet, W, hs[r], `Tier ${r + 1}`)
+    tier(W, hs[r], [1, 1, 1], g).forEach((f, i) => {
+      const [art, focus, name] = beats[r * 3 + i]
+      panel(k, t, f, { art, focus }, { ground: grounds[(i + r) % 3], name: `Panel ${r * 3 + i + 1}: ${name}` })
+    })
+    const x = (i: number) => i * (cw + g)
+    if (r === 0) {
+      caption(k, t, '10:31. Two hundred and twelve feet of ladder.', { x: 8, y: 8, width: 150 })
+      say(k, t, 'Don’t look down. Don’t look down.', { x: x(1) + 26, y: 8, width: 128, to: { x: x(1) + cw * 0.62, y: hs[0] * 0.3 }, thought: true })
+      sfx(k, t, 'Skree', { x: x(2) + 14, y: 14, w: 150, h: 70, deg: -6, seed: 2 })
+    }
+    if (r === 1) {
+      say(k, t, 'Keep going! Hand, foot, hand.', { x: x(0) + 8, y: hs[1] - 82, width: 128, to: { x: x(0) + cw * 0.62, y: hs[1] * 0.38 } })
+      caption(k, t, 'Then, above us: light.', { x: x(1) + 8, y: 8, width: 150 })
+      say(k, t, 'Almost there.', { x: x(2) + 70, y: hs[1] - 66, width: 96, to: { x: x(2) + cw * 0.5, y: hs[1] * 0.4 } })
+    }
+    if (r === 2) {
+      sfx(k, t, 'Creeak', { x: x(0) + 6, y: hs[2] - 84, w: 170, h: 74, deg: 6, seed: 8 })
+      say(k, t, 'Gotcha. Up you come.', { x: x(1) + 8, y: 8, width: 110, to: { x: x(1) + cw * 0.36, y: hs[2] * 0.3 } })
+      caption(k, t, 'And there he was.', { x: x(2) + 8, y: hs[2] - 46, width: 150 })
+    }
+  }
+}
+
+export default defineTemplate({
+  id: 'comic-nine-grid',
+  meta: comicMeta('Nine-panel grid', 'Page four of "The Long Night", nine even beats in modern painted comic art: Ada and Teo climb the harbour radio tower rung by rung, past a gull and a lighted hatch, to the man waiting at the top', ['grid', 'nine-panel', 'rhythm']),
+  stableNumbers: true,
+  build() {
+    const k = new Kit('Nine-panel grid', preset('comic-page'))
+    comicSetup(k)
+    climbPage(k, k.sheet)
+    return k.finish()
+  },
+})

package/src/templates/print/comic-modern-page-classic.ts

@@ -0,0 +1,48 @@
+// "The Long Night", page 1: the blackout. A six-beat page in three tiers.
+//
+// Tier 1 is the establishing shot: Harbour City from above at dusk, its lights going out block by block. Tier 2
+// cuts to the street on a slanted gutter (everyone looking up) and into the apartment, where Teo is at the window.
+// Tier 3 is the close-up: the two of them in the dark with one torch, and an inset of the only light left in the
+// city, at the top of the old harbour radio tower.
+
+import { Kit, preset } from '../kit'
+import { defineTemplate } from '../build'
+import { caption, comicMeta, comicSetup, pageGrid, panel, rectFrame, rows, say, sfx, slantTier, tierBox } from '../themes/comic-modern'
+
+/** The page, drawn on `sheet` (also a leaf of the whole issue). */
+export function blackoutPage(k: Kit, sheet: string) {
+  const g = 12, { W, H } = pageGrid(k, sheet, 36, g)
+  const [h1, h2, h3] = rows(H, g, [30, 32, 38])
+
+  const t1 = tierBox(k, sheet, W, h1, 'Tier 1')
+  panel(k, t1, rectFrame(0, 0, W, h1), { art: 'p1-city', focus: [0.55, 0.45] }, { ground: 'g1', name: 'Establishing' })
+  caption(k, t1, 'It started with the lights going out, block by block.', { x: 10, y: 10, width: 210 })
+
+  const t2 = tierBox(k, sheet, W, h2, 'Tier 2')
+  const [a, b] = slantTier(W, h2, [5, 4], 22, g)
+  panel(k, t2, a, { art: 'p1-blackout', focus: [0.45, 0.4] }, { ground: 'g2', name: 'The street' })
+  panel(k, t2, b, { art: 'p1-window', focus: [0.4, 0.45] }, { ground: 'g3', name: 'Teo at the window' })
+  caption(k, t2, '10:00 p.m. Every street in the city, all at once.', { x: 10, y: h2 - 58, width: 150 })
+  say(k, t2, 'Tell me you saw that.', { x: b.x + 14, y: 10, width: 150, to: { x: b.x + b.width * 0.24, y: h2 * 0.36 } })
+  say(k, t2, 'Saw what? I can’t see anything.', { x: b.x + b.width - 140, y: h2 * 0.42, width: 128, to: { x: b.x + b.width * 0.62, y: h2 * 0.58 } })
+
+  const t3 = tierBox(k, sheet, W, h3, 'Tier 3')
+  panel(k, t3, rectFrame(0, 0, W, h3), { art: 'p1-close', focus: [0.5, 0.42] }, { ground: 'g4', name: 'Close-up' })
+  const inset = rectFrame(W - 168, h3 - 182, 152, 166)
+  panel(k, t3, inset, { art: 'g5', focus: [0.5, 0.35] }, { ground: 'g5', name: 'Inset: the tower', keyline: 6 })
+  say(k, t3, 'Not everything is out. Look. The old radio tower.', { x: 14, y: 14, width: 150, to: { x: W * 0.3, y: h3 * 0.36 } })
+  say(k, t3, 'Somebody’s up there.', { x: W * 0.52, y: 14, width: 110, to: { x: W * 0.66, y: h3 * 0.46 } })
+  sfx(k, t3, 'Click', { x: 18, y: h3 - 92, w: 150, h: 76, deg: -8, seed: 4 })
+}
+
+export default defineTemplate({
+  id: 'comic-page-classic',
+  meta: comicMeta('Comic page (six panel)', 'Page one of "The Long Night", in modern painted comic art: Harbour City going dark from above, the street looking up, Teo at the window, and a torch-lit close-up with an inset of the one light left on', ['panels', 'grid', 'establishing shot']),
+  stableNumbers: true,
+  build() {
+    const k = new Kit('Comic page (six panel)', preset('comic-page'))
+    comicSetup(k)
+    blackoutPage(k, k.sheet)
+    return k.finish()
+  },
+})

package/src/templates/print/comic-modern-polyptych.ts

@@ -0,0 +1,37 @@
+// "The Long Night", page 9: the lights come back. A polyptych.
+//
+// One view cut into four tall frames: dawn coming up over the city as the lights return block by block, and the
+// three of them seen from behind at the rail. A polyptych reads as one moment held, not four moments. Then two
+// close-ups close the scene.
+
+import { Kit, preset } from '../kit'
+import { defineTemplate } from '../build'
+import { caption, comicMeta, comicSetup, pageGrid, panel, rows, say, tier, tierBox, type Ground } from '../themes/comic-modern'
+
+export function dawnPage(k: Kit, sheet: string) {
+  const g = 10, { W, H } = pageGrid(k, sheet, 36, g)
+  const [h1, h2] = rows(H, g, [64, 36])
+  const t1 = tierBox(k, sheet, W, h1, 'The lights')
+  const grounds: Ground[] = ['g1', 'g3', 'g1', 'g3']
+  tier(W, h1, [1, 1, 1, 1], g).forEach((f, i) => panel(k, t1, f, { art: 'poly', world: { x: 0, y: 0, w: W, h: h1 } }, { ground: grounds[i], name: `Dawn ${i + 1}` }))
+  caption(k, t1, 'At midnight he pushed the lever back, and the city came home, block by block.', { x: 12, y: 12, width: 210 })
+
+  const t2 = tierBox(k, sheet, W, h2, 'Close-ups')
+  const [a, b] = tier(W, h2, [1, 1], g)
+  panel(k, t2, a, { art: 'rad-teo', focus: [0.6, 0.6] }, { ground: 'g2', name: 'Teo' })
+  panel(k, t2, b, { art: 'rad-lamp', focus: [0.55, 0.4] }, { ground: 'g4', name: 'The Lamplighter' })
+  say(k, t2, 'Can we come back next year?', { x: 12, y: 10, width: 120, to: { x: a.width * 0.66, y: h2 * 0.5 } })
+  say(k, t2, 'Same time next year. Bring a flask.', { x: b.x + b.width - 140, y: h2 - 84, width: 128, to: { x: b.x + b.width * 0.5, y: h2 * 0.5 } })
+}
+
+export default defineTemplate({
+  id: 'comic-polyptych',
+  meta: comicMeta('Polyptych page', 'Page nine of "The Long Night", in modern painted comic art: dawn over Harbour City as its lights return, one view cut into four tall frames with Ada, Teo and the Lamplighter at the rail, then two close-ups', ['polyptych', 'dawn']),
+  stableNumbers: true,
+  build() {
+    const k = new Kit('Polyptych page', preset('comic-page'))
+    comicSetup(k)
+    dawnPage(k, k.sheet)
+    return k.finish()
+  },
+})

package/src/templates/print/comic-modern-radial.ts

@@ -0,0 +1,43 @@
+// "The Long Night", page 5: the Lamplighter. A radial page.
+//
+// Everything at the top of the tower turns round the lantern, so the page does too: the lantern in a round frame
+// at the centre, and six slices of the page around it, read clockwise from the top left like a clock face. He is at
+// the lever, he turns, the sky he keeps, Teo, Ada on the gantry, Ada's face as she understands.
+
+import { Kit, preset } from '../kit'
+import { defineTemplate } from '../build'
+import type { ComicArtId } from '../themes/comic-art'
+import { caption, comicMeta, comicSetup, disc, pageGrid, panel, radialSlice, say, tierBox, type Ground } from '../themes/comic-modern'
+
+export function lamplighterPage(k: Kit, sheet: string) {
+  const g = 12, { W, H } = pageGrid(k, sheet, 36, g)
+  const t = tierBox(k, sheet, W, H, 'Clock face')
+  const cx = W / 2, cy = H * 0.5, hub = 104
+  const slices: [number, number, ComicArtId, [number, number], Ground, string][] = [
+    [-150, -90, 'g9', [0.4, 0.4], 'g1', 'At the lever'],
+    [-90, -30, 'rad-lamp', [0.5, 0.35], 'g2', 'He turns'],
+    [-30, 30, 'rad-sky', [0.6, 0.4], 'g3', 'His sky'],
+    [30, 90, 'rad-teo', [0.7, 0.5], 'g4', 'Teo'],
+    [90, 150, 'g6', [0.4, 0.45], 'g5', 'Ada on the gantry'],
+    [150, 210, 'rad-ada', [0.3, 0.4], 'g2', 'Ada understands'],
+  ]
+  for (const [from, to, art, focus, ground, name] of slices) panel(k, t, radialSlice(cx, cy, hub + g, from, to, g, W, H), { art, focus }, { ground, name })
+  panel(k, t, disc(cx, cy, hub), { art: 'rad-center', focus: [0.5, 0.5] }, { ground: 'g1', name: 'The lantern', keyline: 6 })
+  caption(k, t, '10:52. The top of the harbour tower.', { x: 10, y: 10, width: 150 })
+  say(k, t, 'You climbed all this way for an old man and his lamp?', { x: W - 196, y: 18, width: 164, to: { x: W * 0.62, y: H * 0.2 } })
+  say(k, t, 'You switched the whole city off.', { x: 10, y: H * 0.33, width: 120, to: { x: W * 0.1, y: H * 0.47 } })
+  say(k, t, 'One hour a year. So it can see its own sky.', { x: W - 190, y: H * 0.42, width: 150, to: { x: W * 0.92, y: H * 0.3 } })
+  say(k, t, 'Whoa.', { x: W - 112, y: H - 64, width: 70, to: { x: W * 0.8, y: H * 0.86 } })
+}
+
+export default defineTemplate({
+  id: 'comic-radial',
+  meta: comicMeta('Radial page', 'Page five of "The Long Night", in modern painted comic art: the Lamplighter\'s lantern in a round frame at the centre, and six slices of the page turning round it like a clock face as Ada and Teo meet him at the top of the tower', ['radial', 'clock face']),
+  stableNumbers: true,
+  build() {
+    const k = new Kit('Radial page', preset('comic-page'))
+    comicSetup(k)
+    lamplighterPage(k, k.sheet)
+    return k.finish()
+  },
+})

package/src/templates/print/comic-modern-splash.ts

@@ -0,0 +1,36 @@
+// "The Long Night", page 2: the splash. One picture, full bleed.
+//
+// The whole page for the tower: Ada and Teo small at its chained gate, looking up the lattice to the one lantern
+// burning at the top. The title sits in the sky; the caption opens the scene in the top-left corner, where the eye
+// lands; the two balloons follow the reading path down to the two of them.
+
+import { Kit, preset } from '../kit'
+import { defineTemplate } from '../build'
+import { bleedFrame, caption, comicMeta, comicSetup, display, panel, say, sfx, SIZE, tierBox } from '../themes/comic-modern'
+
+export function splashPage(k: Kit, sheet: string) {
+  const { w: W, h: H } = SIZE.page
+  k.flowSheet(sheet, 0, 0)
+  const t = tierBox(k, sheet, W, H, 'Splash')
+  panel(k, t, bleedFrame(k, W, H), { art: 'splash', focus: [0.5, 0.5] }, { ground: 'g1', name: 'Splash art', edge: false })
+  const title = k.stack(t, { padding: { top: 8, right: 16, bottom: 10, left: 16 }, fill: 'primary', width: 'HUG', name: 'Title plate', absolute: { x: 40, y: 48 } })
+  k.text(title, '{{brand.title}}', { style: display(k, 'Title'), color: 'onPrimary', autoWidth: true, name: 'Title' })
+  k.text(title, 'PART ONE: THE TOWER', { style: display(k, 'Credit'), color: 'onPrimary', autoWidth: true, name: 'Chapter' })
+  caption(k, t, '10:20 p.m. Pier Nine. The last light in Harbour City.', { x: 40, y: 150, width: 200 })
+  sfx(k, t, 'Clank', { x: W * 0.6, y: H * 0.62, w: 150, h: 80, deg: 8, seed: 3 })
+  say(k, t, 'It’s chained, Ada.', { x: W * 0.08, y: H * 0.58, width: 100, to: { x: W * 0.36, y: H * 0.74 } })
+  say(k, t, 'Since when has that ever stopped us?', { x: W * 0.12, y: H * 0.47, width: 150, to: { x: W * 0.3, y: H * 0.68 } })
+  caption(k, t, '{{brand.series}} · {{brand.issue}}', { x: 40, y: H - 76, width: 210, name: 'Credits' })
+}
+
+export default defineTemplate({
+  id: 'comic-splash',
+  meta: comicMeta('Splash page', 'Page two of "The Long Night", one full-bleed picture in modern painted comic art: Ada and Teo at the chained gate of the harbour radio tower, looking up at the one lantern burning at the top', ['splash', 'full bleed']),
+  stableNumbers: true,
+  build() {
+    const k = new Kit('Splash page', preset('comic-page'))
+    comicSetup(k)
+    splashPage(k, k.sheet)
+    return k.finish()
+  },
+})

package/src/templates/print/comic-modern-spread.ts

@@ -0,0 +1,42 @@
+// "The Long Night", pages 7–8: the centrefold. One sky across the fold.
+//
+// The only two pages printed on one sheet, so the one picture that needs the width goes here: the whole dark city
+// under the whole sky. The top band is four frames cut from ONE picture (a polyptych), the art running through the
+// gutters; below, three close-ups of the three of them looking up, at the pace of breath.
+
+import { Kit, preset } from '../kit'
+import { defineTemplate } from '../build'
+import { caption, comicMeta, comicSetup, panel, rows, say, sfx, SIZE, tier, tierBox, type Ground } from '../themes/comic-modern'
+
+export function skySpread(k: Kit, sheet: string) {
+  const g = 12, m = 36, W = SIZE.spread.w - m * 2, H = SIZE.spread.h - m * 2
+  k.flowSheet(sheet, g, m)
+  const [h1, h2] = rows(H, g, [64, 36])
+  const t1 = tierBox(k, sheet, W, h1, 'The sky')
+  const grounds: Ground[] = ['g1', 'g2', 'g3', 'g5']
+  tier(W, h1, [3, 2, 2, 3], g).forEach((f, i) => panel(k, t1, f, { art: 'spread', world: { x: 0, y: 0, w: W, h: h1 } }, { ground: grounds[i], name: `Sky ${i + 1}` }))
+  caption(k, t1, '11:00 p.m. He pulled the lever, and the last light went out.', { x: 12, y: 12, width: 210 })
+  sfx(k, t1, 'Klunk', { x: 230, y: 20, w: 150, h: 80, deg: -8, seed: 6 })
+  caption(k, t1, 'And there it was. The whole sky the city had been hiding.', { x: W - 282, y: h1 - 70, width: 270 })
+
+  const t2 = tierBox(k, sheet, W, h2, 'Close-ups')
+  const [a, b, c] = tier(W, h2, [2, 2, 3], g)
+  panel(k, t2, a, { art: 'rad-ada', focus: [0.3, 0.3] }, { ground: 'g4', name: 'Ada' })
+  panel(k, t2, b, { art: 'rad-teo', focus: [0.65, 0.55] }, { ground: 'g1', name: 'Teo' })
+  panel(k, t2, c, { art: 'rad-sky', focus: [0.5, 0.35] }, { ground: 'g3', name: 'A shooting star' })
+  say(k, t2, 'I never knew there were so many.', { x: a.width - 140, y: 12, width: 128, to: { x: a.width * 0.32, y: h2 * 0.4 } })
+  say(k, t2, 'Make a wish, Ada. Quick!', { x: b.x + b.width - 120, y: 12, width: 110, to: { x: b.x + b.width * 0.6, y: h2 * 0.56 } })
+}
+
+export default defineTemplate({
+  id: 'comic-spread',
+  meta: comicMeta('Two-page spread', 'The centrefold of "The Long Night", in modern painted comic art: the whole dark city under the Milky Way, one picture cut into four frames across the fold, then three close-ups of Ada, Teo and a shooting star', ['spread', 'centrefold', 'polyptych']),
+  stableNumbers: true,
+  build() {
+    const k = new Kit('Two-page spread', preset('comic-spread'))
+    comicSetup(k)
+    k.nameSheet(k.sheet, 'Pages 7–8')
+    skySpread(k, k.sheet)
+    return k.finish()
+  },
+})

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

@@ -0,0 +1,45 @@
+// The comic pages' own art (./comic-modern.ts): one picture a panel for "The Long Night", made with an image model
+// (gpt-image-2, through the Vercel AI Gateway) in a modern comic style (digital inks, painted colour, cinematic
+// light), from a written script, with the same fixed description of Ada, Teo and the Lamplighter in every prompt so
+// they stay on model. No lettering is in the art: balloons, captions and sound effects are live text on the page.
+// Shipped as the portfolio art is (../web/portfolio-art.ts): JPEG (quality 80, at most 1600 px on the long side)
+// under the media store's content hash in public/templates/media. Made for these templates: free to use with them.
+
+export const ART = {
+  'cover': { hash: '187b2658a20b03f8652bd1490f8a343b', width: 1024, height: 1536, subject: "Ada, Teo and the Lamplighter on the tower gantry under the Milky Way, the city dark below" },
+  'p1-city': { hash: '1cac7ccd73ad53dd6fd346a8de354c1e', width: 1536, height: 1024, subject: "Harbour City at dusk from above, its lights going out block by block" },
+  'p1-window': { hash: '3bc69aa46cbf897cd26828bc3a9cc5cb', width: 1024, height: 1024, subject: "Teo at the apartment window pointing at the city, Ada turning from her desk" },
+  'p1-blackout': { hash: '06fa3bdb35b69a6b29caa59d80e648ef', width: 1536, height: 1024, subject: "a harbour street just after the blackout, people looking up" },
+  'p1-close': { hash: '1748406286dbe79f734c838483e7eb4d', width: 1024, height: 1024, subject: "Ada and Teo lit by one torch in the dark" },
+  'splash': { hash: 'fa50167d4419dac70335b5067b268a82', width: 1024, height: 1536, subject: "Ada and Teo at the chained gate of the harbour radio tower, a lantern at the top" },
+  'g1': { hash: 'da7d578b18eca458a596389203a4d05d', width: 1024, height: 1024, subject: "Ada's hand on a rusty rung" },
+  'g2': { hash: 'f5eeeb72d5730d8e3c92d3e724ab2a11', width: 1024, height: 1024, subject: "Teo climbing inside the lattice" },
+  'g3': { hash: '2fd0e6d0760761b002b7ff9748b1966a', width: 1024, height: 1024, subject: "a gull on a girder above the dark city" },
+  'g4': { hash: '67fdd85947341b77781ac143998f7c26', width: 1024, height: 1024, subject: "looking down the tower at Ada and Teo climbing" },
+  'g5': { hash: 'be5443de95ef13e81d79ac9d68b002f0', width: 1024, height: 1024, subject: "lantern light spilling down through the mast" },
+  'g6': { hash: '90b7905fc57ae69849559a727c8f8256', width: 1024, height: 1024, subject: "Ada on a high gantry, her red coat in the wind" },
+  'g7': { hash: '902906b0c72f750f69f54631efb35786', width: 1024, height: 1024, subject: "a rusty hatch with light leaking round it" },
+  'g8': { hash: '946b39f1c2f4a55b6b59c5fb65f9980b', width: 1024, height: 1024, subject: "Ada pulling Teo up through the hatch" },
+  'g9': { hash: '9fdf8c8188e1bf4867c84382f01bff99', width: 1024, height: 1024, subject: "the Lamplighter at the brass lever above the city" },
+  'fb1': { hash: '1096d69dbb0fee2b18098e2cbfd7dfe8', width: 1536, height: 1024, subject: "the Lamplighter years ago at the lever in the machine room, sepia" },
+  'fb2': { hash: '9f2dbf79a151cd66fea9ec83fb21583c', width: 1024, height: 1024, subject: "the Lamplighter alone on the platform under the stars, sepia" },
+  'fb3': { hash: '8635684fb5785a831e18714cd34a510a', width: 1024, height: 1024, subject: "the Lamplighter's hands round his lantern, sepia" },
+  'spread': { hash: 'cf580fc645124d0d9954587b463ee5fe', width: 1536, height: 1024, subject: "the dark city under the Milky Way, the three of them small on the tower" },
+  'act1': { hash: '526ab2ca36ace731a95dfa71755bfb8a', width: 1536, height: 1024, subject: "a gust takes Teo off the gantry as Ada lunges, his cap flying" },
+  'act2': { hash: '48c2908ee50e04ad3471e40b97cf64d2', width: 1024, height: 1024, subject: "Ada catching Teo's wrist over the drop" },
+  'act3': { hash: '8c2aed61e532f4d532868a2706e50bb2', width: 1024, height: 1024, subject: "the Lamplighter swinging his lantern out on a hook" },
+  'act4': { hash: 'bf3192f0a07cf7253a964b404b3b6fe3', width: 1536, height: 1024, subject: "Ada and Teo sprawled on the platform, laughing with relief" },
+  'rad-center': { hash: '6969d8c91138348e50336bb8f2df4c33', width: 1024, height: 1024, subject: "the brass lantern blazing in the dark" },
+  'rad-ada': { hash: 'd03210fa3a8b9440c1a1db413e43bbf5', width: 1024, height: 1024, subject: "Ada looking up at the stars in awe" },
+  'rad-teo': { hash: '58f0ec99559c832304fdf1430aca65a1', width: 1024, height: 1024, subject: "Teo grinning up at the stars" },
+  'rad-lamp': { hash: '1c18af1a3b3feec9ed816bef0e8423d2', width: 1024, height: 1024, subject: "the Lamplighter smiling, lantern raised" },
+  'rad-sky': { hash: '1eccf12a4e54ef6c357030df67e690ca', width: 1024, height: 1024, subject: "a shooting star over the dark skyline" },
+  'poly': { hash: 'f28569344f83f76af5f77ddb4f695742', width: 1536, height: 1024, subject: "dawn from the tower top as the city's lights come back, the three of them at the rail" },
+  'end1': { hash: '8d07212100a1eb549138a9f9855080f8', width: 1536, height: 1024, subject: "Ada and Teo walking home along the harbour at sunrise, Teo with a lantern" },
+  'end2': { hash: 'b39acfcafcb713726bac9566bc8787b1', width: 1024, height: 1024, subject: "Teo at his window at night, lamp off, looking at the stars" },
+} as const
+
+export type ComicArtId = keyof typeof ART
+
+/** A picture's address in a design: the media store's, by its hash. */
+export const artUrl = (id: ComicArtId): string => `media://${ART[id].hash}`

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

@@ -4,6 +4,20 @@ import comicIssueReel from '../motion/comic-book-issue-reel'
 import comicLanding from '../web/comic-book-landing'
 import comicStripPost from '../social/comic-book-strip-post'
 import comicCoverPreview from '../social/comic-book-cover-preview'
+// "The Long Night": the comic pages, in the issue's reading order, then the whole issue.
+import coverPulp from '../print/comic-modern-cover-pulp'
+import pageClassic from '../print/comic-modern-page-classic'
+import splash from '../print/comic-modern-splash'
+import actionSlant from '../print/comic-modern-action-slant'
+import nineGrid from '../print/comic-modern-nine-grid'
+import radial from '../print/comic-modern-radial'
+import flashback from '../print/comic-modern-flashback'
+import spread from '../print/comic-modern-spread'
+import polyptych from '../print/comic-modern-polyptych'
+import issue from '../print/comic-modern-issue'
 
-const pack: readonly TemplateSource[] = [comicIssueReel, comicLanding, comicStripPost, comicCoverPreview]
+const pack: readonly TemplateSource[] = [
+  comicIssueReel, comicLanding, comicStripPost, comicCoverPreview,
+  coverPulp, pageClassic, splash, actionSlant, nineGrid, radial, flashback, spread, polyptych, issue,
+]
 export default pack

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}`