@popcraft/kit 0.31.0 → 0.32.1

package/dist/chunks/chunk-UQTMOCVG.js

@@ -0,0 +1,93 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  broadsheetBrand,
+  captioned,
+  columnRule,
+  flash,
+  grain,
+  masthead
+} from "./chunk-T3LW4MQI.js";
+import {
+  background,
+  refill
+} from "./chunk-HAK2G6YB.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/broadsheet-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var broadsheet_link_preview_default = defineTemplate({
+  id: "social-broadsheet-link-preview",
+  meta: {
+    name: "Broadsheet front-page link preview",
+    description: 'A link preview set as the top of a newspaper front page: a nameplate between two ears and a dateline, an "EXTRA! EXTRA!" flash over a banner headline in a heavy serif, an italic deck, and a halftone press photograph of a newsboy shouting the edition over a skyline. Black ink and one spot red on newsprint. 1200 \xD7 630, with a 1280 \xD7 640 GitHub social preview',
+    category: "social",
+    tags: ["broadsheet", "newspaper", "front page", "headline", "extra extra", "halftone", "newsprint", "serif", "editorial", "link preview", "open graph", "og image", "github", "launch", "saas"],
+    platforms: ["web", "x", "linkedin", "facebook", "github"],
+    formats: ["og-image"],
+    useCases: ["launch", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Broadsheet front-page link preview", preset("og-image"));
+    k.quantizeGeometry = true;
+    broadsheetBrand(k, { headline: "RELEASE NOTES NOW WRITE THEMSELVES" });
+    k.textStyle("Plate 62", { ...SERIF, size: 62, fontWeight: 900, letterSpacing: -1.6, lineHeight: 66 });
+    k.textStyle("Ear 12", { ...SERIF, size: 16, fontWeight: 700, fontStyle: "italic", lineHeight: 19, textAlign: "CENTER" });
+    k.textStyle("Dateline 12", { ...MONO, size: 16, fontWeight: 700, letterSpacing: 1.4, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Flash 20", { size: 20, fontWeight: 900, letterSpacing: 2.5, lineHeight: 24, textCase: "UPPER" });
+    k.textStyle("Banner 80", { ...SERIF, size: 80, fontWeight: 900, letterSpacing: -2.2, lineHeight: 74 });
+    k.textStyle("Deck 23", { ...SERIF, size: 23, fontWeight: 500, fontStyle: "italic", lineHeight: 30 });
+    k.textStyle("Byline 12", { ...MONO, size: 16, fontWeight: 700, letterSpacing: 1, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Caption 13", { ...SERIF, size: 16, fontWeight: 500, fontStyle: "italic", lineHeight: 20 });
+    k.textStyle("Index 14", { ...MONO, size: 16, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Label 16", { size: 16, fontWeight: 800, lineHeight: 20 });
+    pill(k, "Label", { fill: "primary", ink: "onPrimary", style: "Label 16", label: "Read the first edition", pad: [5, 12], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 14, { top: 24, right: 44, bottom: 22, left: 44 }, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    background(k, sheet, "paper", { effects: grain(0.09, 2) });
+    masthead(k, sheet, { plate: "Plate 62", dateline: "Dateline 12", ear: "Ear 12", ears: ["Forecast:\nclear to ship", "All the news\nfit to merge"] });
+    const fold = k.stack(sheet, { direction: "HORIZONTAL", gap: 22, name: "Fold" });
+    const lead = k.stack(fold, { gap: 12, name: "Lead" });
+    flash(k, lead, "Extra! Extra!", { style: "Flash 20", star: 16, pad: [6, 14] });
+    k.text(lead, "{{brand.headline}}", { style: "Banner 80", color: "text", name: "Banner" });
+    k.text(lead, "{{brand.name}} reads every merged pull request and files the changelog before stand-up. Engineers are said to be relieved.", { style: "Deck 23", color: "text", name: "Deck" });
+    k.text(lead, "By our shipping correspondent", { style: "Byline 12", color: "onPaper", name: "Byline" });
+    columnRule(k, fold);
+    captioned(k, fold, 400, 300, { caption: "A newsboy cries the 9 a.m. edition. Photograph: staff.", style: "Caption 13" });
+    const index = k.stack(sheet, { direction: "HORIZONTAL", gap: 18, align: "CENTER", padding: { top: 6, right: 14, bottom: 6, left: 6 }, fill: "text", name: "Index" });
+    k.instance(index, "Label", { Label: "Read the first edition" }, { name: "Label" });
+    k.text(index, "INSIDE: Markets, teams up 212, A2 \xB7 What shipped this week, A4 \xB7 Help wanted, B6", { style: "Index 14", color: "paper", name: "Index words" });
+    k.variants(sheet, [{ preset: "github-social", adjust: (kit, id) => {
+      refill(kit, id);
+    } }]);
+    return k.finish();
+  }
+});
+
+export {
+  broadsheet_link_preview_default
+};

package/dist/chunks/chunk-USBLIOAV.js

@@ -0,0 +1,217 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  QUIRE,
+  SCREEN,
+  editorialBrand,
+  editorialType,
+  fitGround,
+  inkButton,
+  lockup,
+  maskedLines,
+  middleOf,
+  pageBelow,
+  paperGround,
+  readersScreen,
+  riseLines
+} from "./chunk-HRJWTNX2.js";
+import {
+  camera,
+  float,
+  reelCuts,
+  reelSheet,
+  section,
+  seenAt,
+  wideCut
+} from "./chunk-3TT3MCP7.js";
+import {
+  clicks,
+  glide,
+  pointer
+} from "./chunk-56H4QHNQ.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-ERLSOXU6.js";
+import {
+  hide,
+  restyle
+} from "./chunk-YHBAWSDX.js";
+import {
+  blackShadow
+} from "./chunk-M6VTXO6F.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  ease
+} from "./chunk-AY2VBUGS.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/style-editorial-feature-demo.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("acoustic", 0, 6);
+var { beat } = S;
+var NAME = "Editorial SaaS feature demo short";
+var STEP = [0, 6, 12, 18];
+var BEFORE = 3030;
+var COLS = [140, 407, 673, 940];
+var W = SCREEN;
+var REST = { x: 470, y: 128 };
+var WALL = { w: 560, h: 300, x: 120, y: 140 };
+var SHOTS = [
+  { t: beat(1), duration: 900, zoom: 1.7, x: 330, y: 510 },
+  { t: beat(STEP[1]), duration: 900, zoom: 1.7, x: 660, y: 510 },
+  { t: beat(STEP[2]), duration: 800, zoom: 1 },
+  { t: beat(STEP[3]), duration: 1e3, zoom: 1.2, x: 480, y: 240 },
+  { t: beat(22), duration: 1e3, zoom: 1 }
+];
+var CLICKS = [beat(3), beat(8), beat(10), beat(15.5)];
+var cues = [
+  { layer: "Running head rule", preset: "wipe-in", at: 0, params: { duration: 800 } },
+  { layer: "Running head words", preset: "fade-in", at: 100, params: { duration: 500 } },
+  { layer: "Stage", preset: "rise-in", at: 150, params: { duration: 900, distance: 90 } },
+  { layer: "Figure caption", preset: "fade-in", at: 500, params: { duration: 500 } },
+  { layer: "Call row", preset: "fade-in", at: 600, params: { duration: 500 } },
+  ...STEP.map((b, i) => ({ layer: `Progress fill ${i + 1}`, preset: "wipe-in", at: beat(b), params: { duration: beat(6), ease: ease.linear } })),
+  // One: the meter goes on, and its week is ruled into the chart.
+  { layer: "Switch on", preset: "fade-in", at: CLICKS[0], params: { duration: 300 } },
+  { layer: "Marker", preset: "wipe-in", at: CLICKS[0] + 300, params: { duration: 700, direction: "down" } },
+  // Four: the line has climbed.
+  { layer: "Readers area", preset: "fade-in", at: beat(21) - 200, params: { duration: 700 } },
+  { layer: "Readers dot", preset: "scale-in", at: beat(21), params: { duration: 400 } },
+  { layer: "Status", preset: "fade-in", at: beat(21), params: { duration: 500 } },
+  { layer: "Button", preset: "pulse", at: beat(22), params: { duration: 800, amount: 0.03 } }
+];
+var counts = [
+  // Two: five free articles, then four, then three, a step at each click.
+  { layer: "Meter figure", at: beat(6), duration: 2500, tick: 1250, counter: { from: 5, to: QUIRE.free } },
+  { layer: "Readers figure", at: beat(STEP[3]), duration: beat(3), ease: ease.inOut("cubic"), counter: { from: BEFORE, to: QUIRE.readers } },
+  { layer: "Convert figure", at: beat(STEP[3]), duration: beat(3), counter: { from: QUIRE.before, to: QUIRE.convert, decimals: 1, suffix: "%" } },
+  { layer: "Revenue figure", at: beat(STEP[3]), duration: beat(3), counter: { from: BEFORE * 8, to: QUIRE.revenue, prefix: "$" } }
+];
+var swaps = [captionSwap(["Switch the meter on once.", "Give three free reads monthly.", "The fourth one asks kindly.", "Paid readers up thirty-nine percent."], 0, S.duration - 30, { stagger: 70, in: 400, out: 260, rise: 22 })];
+var style_editorial_feature_demo_default = defineTemplate({
+  id: "motion-saas-style-editorial-feature-demo",
+  meta: {
+    name: NAME,
+    description: "A 15-second feature demo in the warm editorial look: a pointer works a product screen set like a magazine figure while a slow camera follows each click. A paywall meter switches on, steps down from five free articles to three, a subscribe card slides up over the page, and the readers, revenue and conversion count up as a chart climbs, with a rule per step and burned-in captions. Acoustic music, 9:16 with square and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "editorial", "serif", "magazine", "paper", "demo", "feature", "zoom", "cursor", "counter", "chart", "paywall", "newsletter", "publishing", "captions", "music", "audio"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "demo", "video"],
+    useCases: ["launch", "education", "onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    editorialBrand(k, { hook1: "A paywall", hook2: "with manners." });
+    const t = editorialType(k);
+    t.display(88);
+    t.display(96);
+    inkButton(k, "Call", { style: t.strong(30), label: `Set your meter at ${QUIRE.site}`, pad: [20, 28], arrow: 26 });
+    const sheet = reelSheet(k, S, { name: "Feature demo", gap: 26 });
+    paperGround(k, sheet, 1920, COLS);
+    pageBelow(k, sheet, { x: 140, y: 1490, width: 800, height: 440 });
+    const head = k.stack(sheet, { gap: 14, name: "Running head" });
+    k.rect(head, "FILL", 3, "text", { name: "Running head rule" });
+    const headRow = k.stack(head, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Running head words" });
+    lockup(k, headRow, { size: 30, style: t.serif(34) });
+    k.text(headRow, "THE METER \xB7 HOW IT WORKS", { style: t.label(20), color: "onPaper", autoWidth: true, name: "Section" });
+    maskedLines(k, sheet, ["{{brand.hook1}}", "{{brand.hook2}}"], { style: t.display(120), name: "Hook" });
+    const figure = k.stack(sheet, { gap: 14, name: "Figure" });
+    const stage = k.stack(figure, { width: W.width, height: W.height, clip: true, radius: 6, effects: [blackShadow(0.18, 28, 60)], name: "Stage" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: W.width, height: W.height }, { name: "Camera" });
+    const win = readersScreen(k, cam, { absolute: { x: 0, y: 0 }, shadow: false });
+    const wallMask = k.frame(stage, { x: WALL.x - 40, y: WALL.y - 20, width: WALL.w + 80, height: 1 }, { name: "Wall mask", clip: true });
+    const wall = k.stack(wallMask, { width: WALL.w, fill: "card", padding: 32, gap: 18, stroke: { color: "onCard", width: 1.5, align: "INSIDE" }, effects: [blackShadow(0.28, 24, 60)], name: "Wall" });
+    k.patch(wall, { x: 40, y: 20 });
+    k.text(wall, QUIRE.paper.toUpperCase(), { style: t.label(16), color: "cardMuted", name: "Wall paper" });
+    k.text(wall, "You have read your three free articles this month.", { style: t.serif(34), color: "onCard", name: "Wall words" });
+    k.rect(wall, "FILL", 1, "cardRule", { name: "Wall rule" });
+    const wallRow = k.stack(wall, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Wall row" });
+    const sub = k.stack(wallRow, { direction: "HORIZONTAL", width: "HUG", fill: "mark", radius: 2, padding: { top: 12, right: 20, bottom: 12, left: 20 }, name: "Wall button" });
+    k.text(sub, "Subscribe \xB7 $8 a month", { style: t.strong(20), color: "markInk", autoWidth: true, name: "Wall button label" });
+    k.text(wallRow, "or back in November", { style: t.sans(16), color: "cardMuted", name: "Wall or" });
+    const p = pointer(k, stage, { ...REST, size: 92, fill: "onCard", edge: "card", ring: "mark" });
+    k.text(figure, "FIG. 2 \xB7 THE METER, SET FOR THE TIDEWATER REVIEW", { style: t.label(17), color: "onPaper", name: "Figure caption" });
+    const bars = k.stack(sheet, { direction: "HORIZONTAL", gap: 10, name: "Progress" });
+    for (let i = 1; i <= 4; i++) {
+      const track = k.stack(bars, { height: 4, fill: k.tint("text", 0.16), clip: true, name: "Progress track" });
+      k.rect(track, "FILL", 4, "text", { name: `Progress fill ${i}` });
+    }
+    captionStrip(k, sheet, swaps[0].words[0], { style: t.strong(38), fill: "card", ink: "onCard", radius: 2, pad: [16, 26], stroke: { color: "cardRule", width: 1, align: "INSIDE" } });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call row" });
+    k.instance(row, "Call", { Label: "Set your meter at {{brand.site}}" }, { name: "Button" });
+    k.text(row, "FREE", { style: t.label(20), color: "onPaper", autoWidth: true, name: "Terms" });
+    k.finish();
+    const targets = [middleOf(k, win.win, "Meter switch"), middleOf(k, win.win, "Fewer")];
+    const subAt = middleOf(k, stage, "Wall button"), open = k.node(wall).height + 90;
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    riseLines(k, sheet, "Hook", 0, { gap: 130, duration: 800 });
+    k.animate(win.chart.line, "trim.end", [{ t: 0, v: win.chart.turn, ease: ease.hold }, { t: beat(STEP[3]), v: win.chart.turn, ease: ease.inOut("cubic") }, { t: beat(21), v: 1 }]);
+    k.animate(win.knob, "translateX", [{ t: CLICKS[0], v: -20, ease: ease.inOut("cubic") }, { t: CLICKS[0] + 450, v: 0 }]);
+    win.spare.forEach((id, i) => {
+      const at = CLICKS[2 - i];
+      k.animate(id, "opacity", [{ t: 0, v: 1, ease: ease.hold }, { t: at, v: 1, ease: ease.out("cubic") }, { t: at + 350, v: 0 }]);
+    });
+    const up = beat(STEP[2]) + 400, away = CLICKS[3] + 500;
+    k.animate(wallMask, "height", [{ t: up, v: 1, ease: ease.out("quart") }, { t: up + 900, v: open, ease: ease.hold }, { t: away, v: open, ease: ease.named("cubic", "in") }, { t: away + 500, v: 1 }]);
+    k.animate(wall, "translateY", [{ t: up, v: -60, ease: ease.out("quart") }, { t: up + 900, v: 0, ease: ease.hold }, { t: away, v: 0, ease: ease.named("cubic", "in") }, { t: away + 500, v: -60 }]);
+    camera(k, cam, W.width, W.height, SHOTS);
+    const to = (i) => {
+      const at = seenAt(W.width, W.height, SHOTS[i], targets[i]);
+      return { dx: at.x - REST.x + 6, dy: at.y - REST.y + 8 };
+    };
+    const onSub = { dx: subAt.x - REST.x - 20, dy: subAt.y - REST.y - 14 };
+    glide(k, p, [
+      { t: beat(1), dx: 0, dy: 0 },
+      { t: beat(2.6), ...to(0) },
+      { t: beat(STEP[1]), ...to(0) },
+      { t: beat(STEP[1] + 1.5), ...to(1) },
+      { t: beat(STEP[2] + 1), ...to(1) },
+      { t: beat(15), ...onSub },
+      { t: beat(16.5), ...onSub },
+      { t: beat(19.5), dx: 160, dy: 520 }
+    ]);
+    clicks(k, p, CLICKS);
+    k.variants(sheet, [...reelCuts({ post: 40, portrait: 70 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 16, counterAxisSpacing: 16, padding: { top: 36, right: 140, bottom: 36, left: 140 } });
+        fitGround(kit, id, COLS);
+        hide(kit, id, ["Running head", "Page below", "Figure caption"]);
+        restyle(kit, id, "Hook line", "Display 88");
+      }
+    }).slice(0, 1), wideCut(640, (kit, id, right) => {
+      const scale = right.width / W.width, top = right.y + Math.round((right.height - W.height * scale - 80) / 2);
+      fitGround(kit, id, [110, 750, right.x, right.x + right.width]);
+      float(kit, id, "Figure", right.x, top, { scale, width: W.width });
+      float(kit, id, "Progress", right.x, top + Math.round((W.height + 54) * scale) + 16, { width: right.width });
+      restyle(kit, id, "Hook line", "Display 96");
+      kit.patch(id, { primaryAxisAlignItems: "MIN" });
+      for (const n of kit.named(id, "Page below")) kit.patch(n, { x: 110, y: 700, width: 640, height: 300, clipsContent: true });
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_editorial_feature_demo_default
+};

package/dist/chunks/chunk-USOLP5YM.js

@@ -0,0 +1,86 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  blindsWindow,
+  castLight,
+  noirBrand,
+  stamp
+} from "./chunk-FCWZQK3J.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-62LBY7TV.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/email/noir-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4800;
+var cues = [
+  { layer: "Figure", preset: "pulse", at: 900, params: { duration: 900, amount: 0.04 } },
+  { layer: "Stamp", preset: "pulse", at: 2e3, params: { duration: 700, amount: 0.08 } },
+  { layer: "Button", preset: "pulse", at: 3100, params: { duration: 800, amount: 0.06 } }
+];
+var noir_header_default = defineTemplate({
+  id: "email-noir-header",
+  meta: {
+    name: "Noir email header (animated GIF)",
+    description: "A 600 \xD7 300 animated header for a weekly report or digest email, as a film-noir case file: the recovered figure, the account of the week and the button are all on the first frame (for Outlook), then rain runs down a window behind venetian blinds and the figure swells \u2014 a seamless 4.8-second GIF loop",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "noir", "film noir", "detective", "rain", "report", "digest", "saas", "serif"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["report", "newsletter", "stats"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Noir email header", HEADER);
+    k.quantizeGeometry = true;
+    noirBrand(k);
+    k.textStyle("Eyebrow 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.6, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Figure 46", { ...SERIF, size: 46, fontWeight: 900, letterSpacing: -1.6, lineHeight: 46 });
+    k.textStyle("Account 15", { ...SERIF, size: 15, fontWeight: 400, lineHeight: 22 });
+    k.textStyle("Button 14", { size: 14, fontWeight: 800, lineHeight: 20 });
+    k.textStyle("Stamp 13", { size: 13, fontWeight: 900, letterSpacing: 1.5, lineHeight: 16, textCase: "UPPER" });
+    pill(k, "Button pill", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "Open this week\u2019s file", pad: [9, 20], radius: 3 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 10, { top: 28, right: 268, bottom: 28, left: 32 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    castLight(k, sheet, 600, 300, { bars: 7, opacity: 0.08, rise: 70 });
+    const win = blindsWindow(k, sheet, 216, 244, { absolute: { x: 356, y: 28 }, rate: 200, slats: 9, figure: 0.74 });
+    stamp(k, win, "3 leaks found", { style: "Stamp 13", solid: true, turn: -7, pad: [3, 8], absolute: { x: 12, y: 150 } });
+    k.text(sheet, "The weekly case report \xB7 no. 31", { style: "Eyebrow 12", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "$8,410 recovered", { style: "Figure 46", color: "text", name: "Figure" });
+    k.text(sheet, "Three leaks found, two closed, one suspect still at large. The evidence is inside.", { style: "Account 15", color: "onPaper", name: "Account" });
+    k.stack(sheet, { height: 2, name: "Gap" });
+    k.instance(sheet, "Button pill", { Label: "Open this week\u2019s file" }, { name: "Button" });
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  noir_header_default
+};

package/dist/chunks/chunk-USSKVG6Z.js

@@ -0,0 +1,251 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  dots
+} from "./chunk-CXVKBMZ6.js";
+import {
+  poly,
+  pt
+} from "./chunk-6RCDZU4R.js";
+import {
+  curve,
+  ellipsePts,
+  rng
+} from "./chunk-LJRPY6UH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/comic-book-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var COMIC = { product: "Backstop", site: "backstop.example", issue: 12, seconds: 9 };
+var COLORS = {
+  paper: "#F7ECD0",
+  text: "#17141F",
+  onPaper: "#3D3747",
+  primary: "#E2252D",
+  onPrimary: "#FFFFFF",
+  accent: "#FFD21E",
+  onAccent: "#17141F",
+  card: "#FFFDF5",
+  onCard: "#17141F"
+};
+var ART = { ink: "#17141F", sky: "#2C7BE5", skyDeep: "#1B56B3", slime: "#3DBE6C", slimeDeep: "#1F8A4A", night: "#2A2148", nightDeep: "#1B1533", dot: "#FFFFFF" };
+function comicBrand(k, fields = {}) {
+  k.brand(COLORS, { name: COMIC.product, site: COMIC.site, ...fields });
+  k.palette(ART);
+}
+var caps = (words) => words.split(/(\{\{.*?\}\})/).map((part, i) => i % 2 ? part : part.toUpperCase()).join("");
+var inkShadow = (k, d = 8, role = "ink") => [{ type: "DROP_SHADOW", color: k.color(role, 1), offset: { x: d, y: d }, blur: 0, spread: 0, visible: true, showBehindTransparent: true }];
+var open = (pts) => ({ closed: false, points: pts.map(([x, y]) => pt(x, y)) });
+var oval = (cx, cy, rx, ry) => ({ closed: true, points: curve(ellipsePts(cx, cy, rx, ry, 12)) });
+var at = (x, y) => ({ absolute: { x, y } });
+function clipTo(pts, w, h) {
+  const edges = [
+    [(p) => p[0] >= 0, (a, b) => [0, a[1] + (b[1] - a[1]) * (0 - a[0]) / (b[0] - a[0])]],
+    [(p) => p[0] <= w, (a, b) => [w, a[1] + (b[1] - a[1]) * (w - a[0]) / (b[0] - a[0])]],
+    [(p) => p[1] >= 0, (a, b) => [a[0] + (b[0] - a[0]) * (0 - a[1]) / (b[1] - a[1]), 0]],
+    [(p) => p[1] <= h, (a, b) => [a[0] + (b[0] - a[0]) * (h - a[1]) / (b[1] - a[1]), h]]
+  ];
+  let out = pts;
+  for (const [inside, cross] of edges) {
+    const src = out;
+    out = [];
+    for (let i = 0; i < src.length; i++) {
+      const a = src[i], b = src[(i + 1) % src.length];
+      if (inside(a)) {
+        out.push(a);
+        if (!inside(b)) out.push(cross(a, b));
+      } else if (inside(b)) out.push(cross(a, b));
+    }
+    if (!out.length) return out;
+  }
+  return out;
+}
+function rays(k, parent, w, h, o) {
+  const r = rng(o.seed ?? 3), n = o.n ?? 28, R = Math.hypot(w, h) * 1.1;
+  const paths = [];
+  for (let i = 0; i < n; i++) {
+    const a = (i + r() * 0.6) * Math.PI * 2 / n, half = Math.PI / n * (0.2 + r() * 0.32) * (o.thick ?? 1), r0 = (o.inner ?? 0) * (0.8 + r() * 0.5);
+    const wedge = clipTo([[o.cx + r0 * Math.cos(a), o.cy + r0 * Math.sin(a)], [o.cx + R * Math.cos(a - half), o.cy + R * Math.sin(a - half)], [o.cx + R * Math.cos(a + half), o.cy + R * Math.sin(a + half)]], w, h);
+    if (wedge.length > 2) paths.push(poly(wedge));
+  }
+  return k.vector(parent, w, h, paths, o.role, { name: o.name ?? "Focus lines", ...o.opacity !== void 0 ? { opacity: o.opacity } : {}, ...at(o.x ?? 0, o.y ?? 0) });
+}
+function streaks(k, parent, w, h, o) {
+  const r = rng(o.seed ?? 5), paths = [];
+  for (let i = 0; i < (o.n ?? 16); i++) {
+    const y = (i + r()) * h / (o.n ?? 16), len = w * (0.3 + r() * 0.6), x0 = r() * (w - len), t = 2 + r() * 7;
+    paths.push(o.dir === -1 ? poly([[x0 + len, y], [x0, y - t], [x0, y + t]]) : poly([[x0, y], [x0 + len, y - t], [x0 + len, y + t]]));
+  }
+  return k.vector(parent, w, h, paths, o.role, { name: o.name ?? "Speed lines", ...o.opacity !== void 0 ? { opacity: o.opacity } : {}, ...at(o.x ?? 0, o.y ?? 0) });
+}
+function benday(k, parent, w, h, o) {
+  const id = dots(k, parent, { size: w, height: h, square: !o.disc, role: o.role, dot: o.dot ?? 16, screen: 45, angle: o.angle ?? 90, from: o.from ?? 0.1, to: o.to ?? 0.6, name: o.name ?? "Ben-Day dots", over: false, ...at(o.x ?? 0, o.y ?? 0) });
+  if (o.opacity !== void 0) k.patch(id, { opacity: o.opacity });
+  return id;
+}
+function splash(w, h, n, seed, depth) {
+  const r = rng(seed);
+  return poly(Array.from({ length: n * 2 }, (_, i) => {
+    const a = i * Math.PI / n - Math.PI / 2 + (r() - 0.5) * 0.1, rad = i % 2 ? (1 - depth) * (0.92 + r() * 0.12) : 0.8 + r() * 0.2;
+    return [w / 2 + w / 2 * rad * Math.cos(a), h / 2 + h / 2 * rad * Math.sin(a)];
+  }));
+}
+function impact(k, parent, w, h, words, o) {
+  const name = o.name ?? "Impact", d = o.shadow ?? 10;
+  const id = k.stack(parent, { width: w, height: h, align: "CENTER", justify: "CENTER", padding: { top: 0, right: Math.round(w * 0.15), bottom: 0, left: Math.round(w * 0.15) }, name, ...o.absolute ? { absolute: o.absolute } : {} });
+  const path = splash(w, h, o.points ?? 14, o.seed ?? 11, o.depth ?? 0.3);
+  k.vector(id, w, h, [path], "ink", { name: "Burst shadow", ...at(d, d) });
+  k.vector(id, w, h, [path], o.fill ?? "accent", { name: "Burst", stroke: { color: "ink", width: o.line ?? 6, join: "MITER" }, ...at(0, 0) });
+  k.text(id, caps(words), { style: o.style, color: o.ink ?? "onAccent", align: "CENTER", name: `${name} words` });
+  if (o.deg) k.patch(id, { rotation: o.deg });
+  return id;
+}
+function balloon(k, parent, words, o) {
+  const name = o.name ?? "Balloon", line = o.line ?? 5, tail = o.tail ?? "left", [v, h] = o.pad ?? [18, 30];
+  const id = k.stack(parent, { width: "HUG", gap: -line, align: tail === "right" ? "MAX" : "MIN", name, ...o.absolute ? { absolute: o.absolute } : {} });
+  const body = k.stack(id, { width: o.width ?? "HUG", fill: "card", radius: 40, stroke: { color: "ink", width: line, align: "INSIDE" }, padding: { top: v, right: h, bottom: v + 2, left: h }, align: "CENTER", name: "Balloon body" });
+  k.text(body, caps(words), { style: o.style, color: "onCard", align: "CENTER", name: `${name} words`, ...o.width ? {} : { autoWidth: true } });
+  if (tail === "none") return id;
+  const tw = 64, th = 46, tip = tail === "left" ? 6 : tw - 6;
+  const row = k.stack(id, { direction: "HORIZONTAL", width: "HUG", padding: { top: 0, right: 44, bottom: 0, left: 44 }, name: "Tail row" });
+  const t = k.stack(row, { width: tw, height: th, name: "Tail" });
+  k.vector(t, tw, th, [poly([[10, 0], [tw - 10, 0], [tip, th - 4]])], "card", { name: "Tail fill", ...at(0, 0) });
+  k.vector(t, tw, th, [open([[10, line / 2], [tip, th - 4], [tw - 10, line / 2]])], "ink", { name: "Tail line", strokeWidth: line, ...at(0, 0) });
+  return id;
+}
+function captionBox(k, parent, words, o) {
+  const [v, h] = o.pad ?? [10, 18], name = o.name ?? "Caption box";
+  const id = k.stack(parent, { direction: "HORIZONTAL", width: o.width ?? "HUG", fill: o.fill ?? "accent", stroke: { color: "ink", width: 4, align: "INSIDE", join: "MITER" }, padding: { top: v, right: h, bottom: v, left: h }, effects: inkShadow(k, o.shadow ?? 6), name, ...o.absolute ? { absolute: o.absolute } : {} });
+  k.text(id, o.plain ? words : caps(words), { style: o.style, color: o.ink ?? "onAccent", name: `${name} words`, ...o.width ? {} : { autoWidth: true } });
+  if (o.deg) k.patch(id, { rotation: o.deg });
+  return id;
+}
+function panel(k, parent, box, fill, draw, o = {}) {
+  const d = o.shadow ?? 10, line = o.line ?? 8;
+  const id = k.frame(parent, { x: box.x, y: box.y, width: box.w, height: box.h }, { name: o.name ?? "Panel" });
+  k.rect(id, box.w, box.h, "ink", { name: "Panel shadow", ...at(d, d) });
+  const art = k.frame(id, { x: 0, y: 0, width: box.w, height: box.h }, { name: "Panel art", fill, clip: true });
+  draw(art);
+  k.rect(id, box.w, box.h, [], { name: "Panel border", stroke: { color: "ink", width: line, align: "INSIDE", join: "MITER" }, ...at(0, 0) });
+  return id;
+}
+function figure(k, parent, size, parts, o) {
+  const u = size / 400;
+  const fit = (p) => ({ ...p, points: p.points.map((q) => {
+    const m = (v) => ({ x: (o.flip ? 400 - v.x : v.x) * u, y: v.y * u });
+    return { ...m(q), ...q.handleIn ? { handleIn: m(q.handleIn) } : {}, ...q.handleOut ? { handleOut: m(q.handleOut) } : {} };
+  }) });
+  const id = k.stack(parent, { width: size, height: size, name: o.name, ...o.absolute ? { absolute: o.absolute } : {} });
+  for (const part of parts) {
+    const paths = part.paths.map(fit), w = Math.max(2, (part.line ?? 6) * u), name = `${o.name} ${part.name.toLowerCase()}`;
+    if (part.stroke) k.vector(id, size, size, paths, part.fill ?? "ink", { name, strokeWidth: w, ...at(0, 0) });
+    else k.vector(id, size, size, paths, part.fill ?? "ink", { name, ...part.line === 0 ? {} : { stroke: { color: "ink", width: w } }, ...at(0, 0) });
+  }
+  if (o.deg) k.patch(id, { rotation: o.deg });
+  return id;
+}
+var flipX = (pts) => pts.map(([x, y]) => [400 - x, y]);
+function hero(k, parent, size, o = {}) {
+  const torso = { closed: true, points: curve([[126, 148], [274, 148], [276, 232], [200, 314], [124, 232]], true, [0, 1, 3]) };
+  return figure(k, parent, size, [
+    { name: "Cape", fill: "primary", paths: [poly([[132, 150], [268, 150], [324, 296], [344, 376], [294, 342], [262, 384], [214, 348], [176, 386], [140, 346], [90, 376], [76, 300]])] },
+    { name: "Cape fold", stroke: true, line: 4, paths: [open([[150, 200], [120, 330]]), open([[258, 250], [286, 334]])] },
+    { name: "Legs", fill: "sky", paths: [poly([[160, 286], [197, 286], [195, 358], [162, 358]]), poly([[203, 286], [240, 286], [238, 358], [205, 358]])] },
+    { name: "Boots", fill: "primary", paths: [poly([[156, 352], [198, 352], [198, 382], [144, 382]]), poly([[202, 352], [244, 352], [256, 382], [202, 382]])] },
+    { name: "Arm on hip", fill: "sky", paths: [poly([[140, 156], [114, 176], [92, 234], [120, 248], [148, 202]])] },
+    { name: "Glove on hip", fill: "card", paths: [oval(108, 246, 21, 20)] },
+    { name: "Body", fill: "sky", paths: [torso] },
+    { name: "Body shade", fill: "skyDeep", line: 0, paths: [poly([[250, 160], [266, 160], [267, 230], [206, 298], [226, 250]])] },
+    { name: "Belt", fill: "accent", line: 4, paths: [poly([[150, 262], [250, 262], [240, 278], [160, 278]])] },
+    { name: "Emblem", fill: "accent", line: 5, paths: [oval(200, 208, 36, 36)] },
+    { name: "Rewind", fill: "ink", line: 0, paths: [poly([[200, 190], [200, 226], [176, 208]]), poly([[226, 190], [226, 226], [202, 208]])] },
+    { name: "Raised arm", fill: "sky", paths: [poly([[250, 150], [278, 180], [338, 118], [312, 92]])] },
+    { name: "Fist", fill: "card", paths: [oval(334, 92, 27, 26)] },
+    { name: "Knuckles", stroke: true, line: 4, paths: [open([[322, 82], [330, 96]]), open([[334, 78], [342, 92]])] },
+    { name: "Head", fill: "card", paths: [oval(200, 98, 54, 52)] },
+    { name: "Mask", fill: "primary", line: 5, paths: [poly([[146, 84], [254, 84], [252, 112], [216, 118], [200, 108], [184, 118], [148, 112]])] },
+    { name: "Eyes", fill: "card", line: 3, paths: [oval(178, 100, 12, 7), oval(222, 100, 12, 7)] },
+    { name: "Grin", stroke: true, line: 5, paths: [open([[180, 128], [198, 137], [222, 124]])] },
+    { name: "Crest", fill: "accent", line: 5, paths: [poly([[184, 54], [216, 54], [200, 22]])] }
+  ], { ...o, name: o.name ?? "Hero" });
+}
+function villain(k, parent, size, o = {}) {
+  const legs = [[[118, 205], [60, 168], [34, 198]], [[106, 248], [46, 248], [22, 284]], [[122, 292], [70, 328], [58, 370]]];
+  const feeler = [[172, 84], [150, 36], [116, 30]];
+  const brow = [[138, 94], [196, 120], [198, 104], [146, 80]];
+  return figure(k, parent, size, [
+    { name: "Legs", stroke: true, line: 12, paths: [...legs.map((l) => open(l)), ...legs.map((l) => open(flipX(l)))] },
+    { name: "Feelers", stroke: true, line: 8, paths: [open(feeler), open(flipX(feeler))] },
+    { name: "Feeler tips", fill: "slime", line: 5, paths: [oval(114, 30, 11, 11), oval(286, 30, 11, 11)] },
+    { name: "Shell", fill: "slime", paths: [oval(200, 246, 106, 114)] },
+    { name: "Shell shade", fill: "slimeDeep", line: 0, paths: [poly([[262, 170], [300, 230], [296, 290], [250, 344], [276, 270]])] },
+    { name: "Spots", fill: "slimeDeep", line: 4, paths: [oval(158, 272, 18, 22), oval(238, 296, 20, 16), oval(150, 214, 11, 11)] },
+    { name: "Seam", stroke: true, line: 5, paths: [open([[200, 176], [200, 358]])] },
+    { name: "Head", fill: "slimeDeep", paths: [oval(200, 128, 78, 60)] },
+    { name: "Eyes", fill: "accent", line: 5, paths: [oval(168, 122, 23, 18), oval(232, 122, 23, 18)] },
+    { name: "Pupils", fill: "ink", line: 0, paths: [oval(175, 127, 7, 7), oval(225, 127, 7, 7)] },
+    { name: "Brows", fill: "ink", line: 0, paths: [poly(brow), poly(flipX(brow))] },
+    { name: "Teeth", fill: "card", line: 4, paths: [poly([[150, 156], [250, 156], [240, 182], [228, 162], [214, 184], [200, 162], [186, 184], [172, 162], [160, 182]])] }
+  ], { ...o, name: o.name ?? "Bug" });
+}
+function windowCard(k, parent, w, title, draw, o) {
+  const id = k.stack(parent, { width: w, fill: o.fill ?? "card", stroke: { color: "ink", width: 5, align: "INSIDE", join: "MITER" }, effects: inkShadow(k, 8), name: o.name ?? "Window", ...o.absolute ? { absolute: o.absolute } : {} });
+  const bar = k.stack(id, { direction: "HORIZONTAL", gap: 8, align: "CENTER", padding: { top: 12, right: 16, bottom: 12, left: 16 }, name: "Window bar" });
+  for (const role of ["primary", "accent", "slime"]) k.ellipse(bar, 14, role, { name: "Window light", stroke: { color: "ink", width: 3 } });
+  k.text(bar, title, { style: o.style, color: o.ink ?? "onCard", autoWidth: true, name: "Window title" });
+  k.rect(id, "FILL", 5, "ink", { name: "Window rule" });
+  const body = k.stack(id, { gap: o.gap ?? 8, padding: o.pad ?? 18, name: "Window body" });
+  draw(body);
+  if (o.deg) k.patch(id, { rotation: o.deg });
+  return id;
+}
+function stage(k, parent, w, h, o = {}) {
+  const s = k.stack(parent, { width: w, height: h, name: o.name ?? "Stage", ...o.clip ? { clip: true } : {}, ...o.fill ? { fill: o.fill } : {}, ...o.stroke ? { stroke: o.stroke } : {}, ...o.effects ? { effects: o.effects } : {} });
+  const art = k.frame(s, { x: 0, y: 0, width: w, height: h }, { name: "Art" });
+  return { stage: s, art };
+}
+function restage(k, root, w, h, scale, name = "Stage") {
+  for (const s of k.named(root, name)) {
+    k.patch(s, { width: Math.round(w * scale), height: Math.round(h * scale), layoutSizingHorizontal: "FIXED", layoutSizingVertical: "FIXED" });
+    for (const c of k.node(s).childIds) if (k.node(c).name === "Art") k.patch(c, { x: Math.round(-w / 2 * (1 - scale)), y: Math.round(-h / 2 * (1 - scale)), scaleX: scale, scaleY: scale });
+  }
+}
+function issueBox(k, parent, o) {
+  const id = k.stack(parent, { width: o.width ?? "HUG", align: "CENTER", fill: "card", stroke: { color: "ink", width: 4, align: "INSIDE", join: "MITER" }, padding: { top: 8, right: 14, bottom: 8, left: 14 }, name: o.name ?? "Issue box", ...o.absolute ? { absolute: o.absolute } : {} });
+  k.text(id, `No. ${COMIC.issue}`, { style: o.number, color: "onCard", autoWidth: true, name: "Issue number" });
+  k.text(id, o.price, { style: o.small, color: "onCard", autoWidth: true, name: "Issue price" });
+  return id;
+}
+function bandDots(k, root, name, box) {
+  for (const id of k.named(root, name)) {
+    k.patch(id, { x: box.x, y: box.y, width: box.w, height: box.h });
+    for (const c of k.node(id).childIds) k.patch(c, { width: box.w, height: box.h });
+  }
+}
+
+export {
+  COMIC,
+  comicBrand,
+  caps,
+  inkShadow,
+  rays,
+  streaks,
+  benday,
+  impact,
+  balloon,
+  captionBox,
+  panel,
+  hero,
+  villain,
+  windowCard,
+  stage,
+  restage,
+  issueBox,
+  bandDots
+};