@popcraft/kit 0.29.0 → 0.30.0

package/src/templates/print/comic-modern-action-slant.ts

@@ -0,0 +1,44 @@
+// "The Long Night", page 3: the gust. Slanted gutters and a tilted tier.
+//
+// Slanted gutters and a tilted frame are how a page says "this is moving". Halfway up, the wind takes Teo off the
+// gantry (the tilted wide frame, the one hit the page is built round), Ada catches his wrist (an extreme close-up
+// on a slanted gutter), somebody above swings a light out, and the last tier lets the reader breathe with them.
+
+import { Kit, preset } from '../kit'
+import { defineTemplate } from '../build'
+import { caption, comicMeta, comicSetup, pageGrid, panel, rectFrame, rows, say, sfx, slantTier, tierBox, tilted } from '../themes/comic-modern'
+
+export function gustPage(k: Kit, sheet: string) {
+  const g = 12, { W, H } = pageGrid(k, sheet, 36, g)
+  const [h1, h2, h3] = rows(H, g, [38, 30, 32])
+
+  const t1 = tierBox(k, sheet, W, h1, 'Tier 1')
+  panel(k, t1, tilted(0, 0, W, h1, 28, -28), { art: 'act1', focus: [0.5, 0.5] }, { ground: 'g1', name: 'The slip' })
+  caption(k, t1, 'Halfway up, the wind found us.', { x: 10, y: 34, width: 150 })
+  sfx(k, t1, 'Whooom', { x: W - 290, y: 38, w: 210, h: 90, deg: -10, big: true, seed: 5 })
+  say(k, t1, 'Ada!', { x: W * 0.62, y: h1 * 0.56, width: 70, to: { x: W * 0.58, y: h1 * 0.72 } })
+
+  const t2 = tierBox(k, sheet, W, h2, 'Tier 2')
+  const [a, b] = slantTier(W, h2, [1, 1], -24, g)
+  panel(k, t2, a, { art: 'act2', focus: [0.5, 0.45] }, { ground: 'g2', name: 'The catch' })
+  panel(k, t2, b, { art: 'act3', focus: [0.5, 0.4] }, { ground: 'g3', name: 'The light' })
+  say(k, t2, 'Got you. I’ve got you.', { x: 12, y: 10, width: 110, to: { x: a.width * 0.5, y: h2 * 0.5 } })
+  caption(k, t2, 'Then, from above, somebody swung a light out.', { x: b.x + b.width - 160, y: h2 - 62, width: 150 })
+
+  const t3 = tierBox(k, sheet, W, h3, 'Tier 3')
+  panel(k, t3, rectFrame(0, 0, W, h3), { art: 'act4', focus: [0.5, 0.55] }, { ground: 'g4', name: 'Breathe' })
+  say(k, t3, 'My cap! It’s gone!', { x: W * 0.56, y: 12, width: 110, to: { x: W * 0.62, y: h3 * 0.5 } })
+  say(k, t3, 'Forget the cap. Keep climbing.', { x: 14, y: 12, width: 128, to: { x: W * 0.36, y: h3 * 0.5 } })
+}
+
+export default defineTemplate({
+  id: 'comic-action-slant',
+  meta: comicMeta('Action page (slanted)', 'Page three of "The Long Night", in modern painted comic art on slanted gutters: the wind takes Teo off the tower gantry across a tilted wide frame, Ada catches him, a light swings out above, and they breathe', ['action', 'slanted', 'impact', 'sound effect']),
+  stableNumbers: true,
+  build() {
+    const k = new Kit('Action page (slanted)', preset('comic-page'))
+    comicSetup(k)
+    gustPage(k, k.sheet)
+    return k.finish()
+  },
+})

package/src/templates/print/comic-modern-cover-pulp.ts

@@ -0,0 +1,35 @@
+// "The Long Night" no. 1, the front cover, full bleed.
+//
+// A cover sells one moment: Ada, Teo and the Lamplighter at the top of the harbour radio tower, his lantern raised,
+// the dark city below and the whole sky above. The masthead sits across the sky, the issue box in its corner, and
+// the cover line runs along the foot, where a shelf would leave it showing.
+
+import { Kit, preset } from '../kit'
+import { defineTemplate } from '../build'
+import { bleedFrame, caption, comicMeta, comicSetup, display, panel, say, SIZE, tierBox } from '../themes/comic-modern'
+
+export function coverPage(k: Kit, sheet: string) {
+  const { w: W, h: H } = SIZE.cover
+  k.flowSheet(sheet, 0, 0)
+  const t = tierBox(k, sheet, W, H, 'Cover')
+  panel(k, t, bleedFrame(k, W, H), { art: 'cover', focus: [0.5, 0.6] }, { ground: 'g1', name: 'Cover art', edge: false })
+  const band = k.stack(t, { direction: 'HORIZONTAL', align: 'CENTER', gap: 14, width: W - 64, padding: { top: 10, right: 16, bottom: 10, left: 16 }, fill: 'primary', name: 'Masthead band', absolute: { x: 32, y: 34 } })
+  const box = k.stack(band, { width: 74, align: 'CENTER', fill: 'card', padding: { top: 6, right: 6, bottom: 6, left: 6 }, name: 'Issue box' })
+  k.text(box, '{{brand.issue}}', { style: display(k, 'Credit'), color: 'onCard', align: 'CENTER', width: 'FILL', name: 'Issue number' })
+  k.text(box, 'OCT', { style: display(k, 'Credit'), color: 'onCard', align: 'CENTER', width: 'FILL', name: 'Month' })
+  k.text(band, '{{brand.title}}', { style: display(k, 'Masthead'), color: 'onPrimary', width: 'FILL', name: 'Masthead' })
+  say(k, t, 'One hour a year, the city gets its sky back.', { x: W - 200, y: H * 0.3, width: 150, to: { x: W * 0.52, y: H * 0.38 } })
+  caption(k, t, 'The night Harbour City went dark, one light stayed on.', { x: 32, y: H - 104, width: 270, name: 'Cover line' })
+}
+
+export default defineTemplate({
+  id: 'comic-cover-pulp',
+  meta: comicMeta('Comic cover (pulp)', 'The front cover of "The Long Night" no. 1, in modern painted comic art: a red masthead with the issue box, and Ada, Teo and the Lamplighter at the top of the harbour radio tower under a sky full of stars', ['cover', 'masthead', 'full bleed']),
+  stableNumbers: true,
+  build() {
+    const k = new Kit('Comic cover (pulp)', preset('comic-cover'))
+    comicSetup(k)
+    coverPage(k, k.sheet)
+    return k.finish()
+  },
+})

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

@@ -0,0 +1,40 @@
+// "The Long Night", page 6: the flashback. Sepia, with a dot screen on the memory.
+//
+// A memory is printed differently from the present, so a reader knows where they are without being told: the
+// Lamplighter's past years are warm sepia, and half of the frames carry a halftone screen (never more). The last
+// tier comes back to tonight, in full colour, his hand on the lever.
+
+import { Kit, preset } from '../kit'
+import { defineTemplate } from '../build'
+import { caption, comicMeta, comicSetup, pageGrid, panel, rectFrame, rows, say, tier, tierBox } from '../themes/comic-modern'
+
+export function flashbackPage(k: Kit, sheet: string) {
+  const g = 12, { W, H } = pageGrid(k, sheet, 36, g)
+  const [h1, h2, h3] = rows(H, g, [34, 30, 36])
+  const t1 = tierBox(k, sheet, W, h1, 'Tier 1')
+  panel(k, t1, rectFrame(0, 0, W, h1), { art: 'fb1', focus: [0.5, 0.4], tone: true }, { ground: 'g4', name: 'Forty years ago' })
+  caption(k, t1, 'Forty years ago, the harbour board gave me the keys to this tower.', { x: 10, y: 10, width: 210 })
+
+  const t2 = tierBox(k, sheet, W, h2, 'Tier 2')
+  const [a, b] = tier(W, h2, [1, 1], g)
+  panel(k, t2, a, { art: 'fb2', focus: [0.4, 0.5] }, { ground: 'g1', name: 'Alone with the sky' })
+  panel(k, t2, b, { art: 'fb3', focus: [0.5, 0.5], tone: true }, { ground: 'g2', name: 'The lantern' })
+  caption(k, t2, 'One night a year, I pulled the lever, and sat up here alone.', { x: 10, y: h2 - 76, width: 150 })
+  caption(k, t2, 'Nobody ever came up to see it with me.', { x: b.x + b.width - 160, y: 10, width: 150 })
+
+  const t3 = tierBox(k, sheet, W, h3, 'Tier 3')
+  panel(k, t3, rectFrame(0, 0, W, h3), { art: 'rad-lamp', focus: [0.5, 0.32] }, { ground: 'g3', name: 'Tonight' })
+  say(k, t3, 'Until tonight. Ready?', { x: W * 0.6, y: 16, width: 110, to: { x: W * 0.54, y: h3 * 0.42 } })
+}
+
+export default defineTemplate({
+  id: 'comic-flashback',
+  meta: comicMeta('Flashback page', 'Page six of "The Long Night": the Lamplighter\'s past years in warm sepia with a halftone screen on the memory, alone at the top of the tower with his lantern and the stars, then back to tonight in full colour', ['flashback', 'sepia', 'halftone']),
+  stableNumbers: true,
+  build() {
+    const k = new Kit('Flashback page', preset('comic-page'))
+    comicSetup(k)
+    flashbackPage(k, k.sheet)
+    return k.finish()
+  },
+})

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