@popcraft/kit 0.53.15 → 0.53.17

package/dist/chunks/chunk-OOV5YIEH.js

@@ -0,0 +1,197 @@
+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 {
+  OFFER,
+  blankCoupon,
+  burst,
+  couponBrand,
+  fitPinked,
+  fitRays,
+  heroCoupon,
+  masthead,
+  pinked,
+  rays,
+  scissors,
+  smallCoupons,
+  snip,
+  stamp,
+  sticker
+} from "./chunk-VXKLD3UX.js";
+import {
+  MONO
+} from "./chunk-MPRWXHPJ.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-KYVOSUC6.js";
+import {
+  bed
+} from "./chunk-FFTCIDXB.js";
+import {
+  cutOff
+} from "./chunk-OBBNV6XI.js";
+import {
+  hide,
+  put,
+  restyle
+} from "./chunk-T43CHLBH.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-FYXK7W3C.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/motion/black-friday-coupons-deal-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var { beat, duration: DURATION, audio: music } = bed("tension", 28);
+var cues = [
+  { layer: "Headline", preset: "drop-in", at: beat(0), params: { duration: 350 } },
+  { layer: "Hero coupon", preset: "drop-in", at: beat(0), params: { duration: 400 } },
+  // The drop: the coupon is cut free.
+  { layer: "Hero coupon", preset: "shake", at: beat(4), params: { duration: 400, distance: 16 } },
+  { layer: "Burst", preset: "pop-in", at: beat(4), params: { duration: 350 } },
+  cutOff("Scissors", beat(4.75)),
+  { layer: "Sticker", preset: "pop-in", at: beat(5), params: { duration: 300 } },
+  { layer: "Shop coupon", preset: "drop-in", at: beat(6), params: { duration: 320 } },
+  { layer: "Setup coupon", preset: "drop-in", at: beat(7), params: { duration: 320 } },
+  { layer: "Stub code", preset: "pulse", at: beat(12), params: { duration: 500, amount: 0.12 } },
+  { layer: "Button", preset: "pop-in", at: beat(14), params: { duration: 400 } },
+  { layer: "Stamp", preset: "pop-in", at: beat(18), params: { duration: 260 } },
+  { layer: "Burst", preset: "pulse", at: beat(20), params: { duration: 500, amount: 0.08 } },
+  { layer: "Button", preset: "pulse", at: beat(24), params: { duration: 500, amount: 0.06 } }
+];
+var counts = [
+  // The price falls over two beats and lands on the third.
+  { layer: "Hero figure", at: beat(4), duration: beat(2), counter: { from: OFFER.starterWas, to: OFFER.starterNow, prefix: "$" } }
+];
+var swaps = [captionSwap(["Black Friday: clip this coupon.", "Every annual plan, half off.", `Paste ${OFFER.code} at the checkout.`, "Valid until midnight on Monday."], 0, DURATION, { stagger: 60, in: 300, out: 250, rise: 30 })];
+var NAME = "Black Friday coupon deal reel";
+var black_friday_coupons_deal_reel_default = defineTemplate({
+  id: "motion-black-friday-coupons-deal-reel",
+  meta: {
+    name: NAME,
+    description: "A 14-second vertical sale video drawn as a supermarket coupon circular: scissors snip a clip-out coupon free on the beat, its annual price counts down 50%, a starburst and a price-gun sticker slap on, two more coupons are dealt and a REDEEMED stamp lands, on newsprint in flyer red and yellow. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "black friday", "cyber monday", "sale", "saas", "coupon", "voucher", "promo code", "flyer", "circular", "scissors", "price drop", "counter", "audio", "music", "captions", "reel"],
+    platforms: ["instagram", "tiktok", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "video", "ad"],
+    useCases: ["sale", "pricing"],
+    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;
+    couponBrand(k, { name: OFFER.product, site: OFFER.site, code: OFFER.code });
+    k.textStyle("Mast 22", { ...MONO, size: 22, fontWeight: 800, letterSpacing: 1.6, lineHeight: 28 });
+    k.textStyle("Headline 128", { size: 128, fontWeight: 900, letterSpacing: -6, lineHeight: 112 });
+    k.textStyle("Headline 100", { size: 100, fontWeight: 900, letterSpacing: -4.6, lineHeight: 88 });
+    k.textStyle("Headline 168", { size: 168, fontWeight: 900, letterSpacing: -8, lineHeight: 146 });
+    k.textStyle("Band 22", { ...MONO, size: 22, fontWeight: 800, letterSpacing: 1.4, lineHeight: 28 });
+    k.textStyle("Band 18", { ...MONO, size: 18, fontWeight: 800, letterSpacing: 1, lineHeight: 24 });
+    k.textStyle("Plan 28", { size: 28, fontWeight: 700, letterSpacing: -0.4, lineHeight: 34 });
+    k.textStyle("Figure 136", { size: 136, fontWeight: 900, letterSpacing: -6, lineHeight: 126, fontFeatures: { tnum: 1 } });
+    k.textStyle("Figure 88", { size: 88, fontWeight: 900, letterSpacing: -4, lineHeight: 84, fontFeatures: { tnum: 1 } });
+    k.textStyle("Side 26", { ...MONO, size: 26, fontWeight: 800, lineHeight: 32 });
+    k.textStyle("Side 20", { ...MONO, size: 20, fontWeight: 800, lineHeight: 26 });
+    k.textStyle("Fine 18", { ...MONO, size: 18, fontWeight: 600, letterSpacing: 0.4, lineHeight: 24 });
+    k.textStyle("Code 34", { ...MONO, size: 34, fontWeight: 800, letterSpacing: 1, lineHeight: 40 });
+    k.textStyle("Burst 84", { size: 84, fontWeight: 900, letterSpacing: -4, lineHeight: 78 });
+    k.textStyle("Burst 34", { size: 34, fontWeight: 900, letterSpacing: 2, lineHeight: 36 });
+    k.textStyle("Sticker 20", { ...MONO, size: 20, fontWeight: 800, letterSpacing: 1.4, lineHeight: 24 });
+    k.textStyle("Sticker 54", { ...MONO, size: 54, fontWeight: 800, letterSpacing: -2, lineHeight: 56 });
+    k.textStyle("Stamp 36", { ...MONO, size: 36, fontWeight: 800, letterSpacing: 3, lineHeight: 40 });
+    k.textStyle("Caption 38", { size: 38, fontWeight: 800, letterSpacing: -0.6, lineHeight: 46, textAlign: "CENTER" });
+    k.textStyle("Button 34", { size: 34, fontWeight: 800, lineHeight: 42 });
+    pill(k, "Clip button", { fill: "primary", ink: "onPrimary", style: "Button 34", label: `Clip it at ${OFFER.link}`, pad: [22, 44], radius: 10 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 22, verticalPadding(), "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: music });
+    rays(k, sheet, 1080, 1920, { fy: 0.26 });
+    pinked(k, sheet, 1080, 170, { tooth: 40 });
+    blankCoupon(k, sheet, { x: -150, y: 1500, width: 700, height: 360, rotation: -9, name: "Fan left", seed: 3 });
+    blankCoupon(k, sheet, { x: 520, y: 1470, width: 700, height: 360, rotation: 11, name: "Fan right", seed: 9, kraft: true });
+    blankCoupon(k, sheet, { x: 170, y: 1600, width: 740, height: 380, rotation: 2, name: "Fan middle", seed: 14 });
+    const top = k.stack(sheet, { gap: 22, name: "Top" });
+    const copy = k.stack(top, { gap: 16, name: "Copy" });
+    masthead(k, copy, { style: "Mast 22" });
+    k.text(copy, "CLIP IT\n& SAVE.", { style: "Headline 128", color: "text", name: "Headline" });
+    burst(k, copy, 256, [[`${OFFER.off}%`, "Burst 84"], ["OFF", "Burst 34"]], { rotation: 9, absolute: { x: 520, y: 22 } });
+    const coupons = k.stack(top, { gap: 20, name: "Coupons" });
+    const hero = heroCoupon(k, coupons, { pad: 24, gap: 8, stub: 216, bars: 92, figureWidth: 352, styles: { band: "Band 22", pitch: "Plan 28", figure: "Figure 136", side: "Side 26", fine: "Fine 18", code: "Code 34" } });
+    const cutter = scissors(k, hero.cut, 170, { absolute: { x: -40, y: -48 } });
+    stamp(k, hero.cut, "REDEEMED", { style: "Stamp 36", pad: [6, 16], rotation: -13, absolute: { x: 528, y: 196 } });
+    smallCoupons(k, coupons, { gap: 20, pad: 18, styles: { band: "Band 18", figure: "Figure 88", side: "Side 20", fine: "Fine 18" } });
+    sticker(k, coupons, [["YOU SAVE", "Sticker 20"], [`$${OFFER.starterWas - OFFER.starterNow}`, "Sticker 54"]], { rotation: -8, pad: [10, 22], absolute: { x: 610, y: -44 } });
+    const close = k.stack(sheet, { gap: 22, align: "CENTER", name: "Close" });
+    captionStrip(k, close, swaps[0].words[0], { style: "Caption 38", fill: "text", ink: "paper", radius: 6, pad: [14, 24] });
+    k.instance(close, "Clip button", { Label: `Clip it at ${OFFER.link}` }, { name: "Button" });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    snip(k, cutter, { at: beat(0.5), steps: 7, every: beat(0.5), distance: 660 });
+    const feed = (kit, id, w, h, band) => {
+      fitRays(kit, id, 0.5, 0.26);
+      fitPinked(kit, id, w, band, 0, { tooth: 40 });
+      hide(kit, id, ["Fan left", "Fan right", "Fan middle"]);
+      void h;
+    };
+    k.variants(sheet, [
+      ...feedVariants({ post: 48, portrait: 72 }, {
+        // The square: every coupon and the sticker, under a shorter headline.
+        post: (kit, id) => {
+          feed(kit, id, 1080, 1080, 44);
+          kit.patch(id, { padding: { top: 64, right: 56, bottom: 28, left: 56 }, itemSpacing: 14 });
+          restyle(kit, id, "Headline", "Headline 100");
+          for (const name of ["Top", "Coupons", "Close"]) for (const n of kit.named(id, name)) kit.patch(n, { itemSpacing: 14 });
+          for (const n of kit.named(id, "Copy")) kit.patch(n, { itemSpacing: 10 });
+          put(kit, id, "Burst", 560, 30);
+          put(kit, id, "Sticker", 770, -40);
+        },
+        portrait: (kit, id) => {
+          feed(kit, id, 1080, 1350, 56);
+          kit.patch(id, { padding: { top: 92, right: 72, bottom: 48, left: 72 }, itemSpacing: 20 });
+          put(kit, id, "Burst", 600, 30);
+          put(kit, id, "Sticker", 740, -44);
+        }
+      }),
+      {
+        // 16:9: the words on the left, the coupons beside them, the caption and the button along the foot.
+        preset: "video-1080p",
+        adjust: (kit, id) => {
+          feed(kit, id, 1920, 1080, 56);
+          kit.patch(id, { padding: { top: 96, right: 110, bottom: 60, left: 110 }, itemSpacing: 28 });
+          for (const n of kit.named(id, "Top")) kit.patch(n, { layoutMode: "HORIZONTAL", itemSpacing: 70, counterAxisAlignItems: "CENTER" });
+          for (const n of kit.named(id, "Coupons")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 860 });
+          for (const n of kit.named(id, "Close")) kit.patch(n, { layoutMode: "HORIZONTAL", itemSpacing: 28, counterAxisAlignItems: "CENTER" });
+          restyle(kit, id, "Headline", "Headline 168");
+          for (const n of kit.named(id, "Burst")) kit.patch(n, { layoutPositioning: "AUTO" });
+          for (const n of kit.named(id, "Copy")) kit.patch(n, { itemSpacing: 20 });
+          put(kit, id, "Sticker", 670, -44);
+        }
+      }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_coupons_deal_reel_default
+};

package/dist/chunks/chunk-OS3ZECTM.js

@@ -0,0 +1,89 @@
+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 {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  ease
+} from "./chunk-UNF7OQKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/motion/instagram-promo.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var back = ease.back(1.9);
+var CUES = [
+  { layer: "Kicker", preset: "fade-in", at: 0 },
+  { layer: "Headline", preset: "rise-in", at: 100, params: { duration: 700 } },
+  { layer: "Products", preset: "drift", at: 0, params: { duration: 5200, distance: 18, amount: 0.02 } },
+  { layer: "Product card", preset: "pop-in", at: 600, params: { duration: 600, ease: back, amount: 0.6 }, stagger: { delay: 140 } },
+  { layer: "Shop button", preset: "pop-in", at: 1300, params: { duration: 500, ease: back, amount: 0 } },
+  { layer: "Handle", preset: "fade-in", at: 1700 },
+  { layer: "Shop button", preset: "pulse", at: 2400, params: { duration: 900, amount: 0.06 } },
+  { layer: "Kicker", preset: "rise-out", at: 4300, params: { duration: 450, distance: 60 } },
+  { layer: "Headline", preset: "rise-out", at: 4360, params: { duration: 450, distance: 60 } },
+  { layer: "Product card", preset: "drop-out", at: 4200, params: { duration: 450, distance: 90 }, stagger: { delay: 80, order: "reverse" } },
+  { layer: "Shop button", preset: "pop-out", at: 4450, params: { duration: 350 } },
+  { layer: "Handle", preset: "fade-out", at: 4500, params: { duration: 300 } }
+];
+var instagram_promo_default = defineTemplate({
+  id: "motion-instagram-promo",
+  meta: {
+    name: "Instagram promo",
+    description: "A five-second product post built from motion presets: the headline rises, three product cards pop in on a stagger, the button pulses, then everything leaves \u2014 1080\xD71350 at 30 fps",
+    category: "animation",
+    tags: ["animation", "instagram", "product", "promo", "presets"],
+    platforms: ["instagram", "facebook"],
+    formats: ["portrait-post", "ad"],
+    useCases: ["launch", "sale"],
+    created: "2026-09-28",
+    updated: "2026-09-29"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Instagram promo", preset("ig-portrait"));
+    k.brand({ primary: "#1F1A17", accent: "#E2572B", paper: "#F6F1EA", sand: "#DCC9AE", sage: "#A9B69A", clay: "#C98B6B", muted: "#6F665E", text: "#1F1A17", onPrimary: "#F6F1EA" }, { handle: "@northwind.studio" });
+    k.textStyle("Kicker 28", { size: 28, fontWeight: 700, lineHeight: 36, letterSpacing: 4 });
+    k.textStyle("Headline 92", { size: 92, fontWeight: 800, lineHeight: 96, letterSpacing: -2 });
+    k.textStyle("Price 26", { size: 26, fontWeight: 500, lineHeight: 32 });
+    k.textStyle("Product 30", { size: 30, fontWeight: 600, lineHeight: 38 });
+    k.textStyle("Button 32", { size: 32, fontWeight: 700, lineHeight: 40 });
+    const lift = { type: "DROP_SHADOW", color: { r: 0.12, g: 0.1, b: 0.09, a: 0.12 }, offset: { x: 0, y: 12 }, blur: 32, spread: 0, visible: true };
+    k.component("Product card", { width: 280, gap: 14, fill: "paper", radius: 28, effects: [lift], padding: { top: 14, right: 14, bottom: 22, left: 14 }, props: { Name: "Linen shirt", Price: "$68" } }, (id) => {
+      k.rect(id, "FILL", 300, "sand", { radius: 18, name: "Swatch" });
+      k.propText(id, "Name", { style: "Product 30", color: "text" });
+      k.propText(id, "Price", { style: "Price 26", color: "muted" });
+    });
+    k.component("Button", { direction: "HORIZONTAL", width: "HUG", justify: "CENTER", align: "CENTER", fill: "primary", radius: 999, padding: { top: 24, right: 56, bottom: 24, left: 56 }, props: { Label: "Shop the drop \u2192" } }, (id) => {
+      k.propText(id, "Label", { style: "Button 32", color: "onPrimary", align: "CENTER", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 36, { top: 96, right: 72, bottom: 96, left: 72 }, "paper", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 5200, fps: 30 });
+    k.text(sheet, "SUMMER DROP \xB7 03", { style: "Kicker 28", color: "accent", align: "CENTER", name: "Kicker" });
+    k.text(sheet, "Linen, for the long days", { style: "Headline 92", color: "text", width: 820, align: "CENTER", name: "Headline" });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 24, name: "Products" });
+    const swatch = k.named(k.componentIdOf("Product card"), "Swatch")[0];
+    for (const [name, price, tone] of [["Linen shirt", "$68", "sand"], ["Wide trousers", "$84", "sage"], ["Market tote", "$32", "clay"]]) {
+      const card = k.instance(row, "Product card", { Name: name, Price: price });
+      k.patch(card, { overrides: { [swatch]: { fills: k.paint(tone) } } });
+    }
+    k.instance(sheet, "Button", { Label: "Shop the drop \u2192" }, { name: "Shop button" });
+    k.text(sheet, "{{brand.handle}}", { style: "Price 26", color: "muted", align: "CENTER", name: "Handle" });
+    k.cues(sheet, CUES);
+    return k.finish();
+  }
+});
+
+export {
+  instagram_promo_default
+};

package/dist/chunks/chunk-OV4AWFQ3.js

@@ -0,0 +1,146 @@
+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 {
+  ARIAL,
+  GEORGIA,
+  callToAction,
+  drop,
+  finishMail,
+  mailButton,
+  mailFooter,
+  mailHeader,
+  mailRow,
+  mailSheet,
+  section
+} from "./chunk-KZ76VO6Q.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-MPRWXHPJ.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  ease
+} from "./chunk-UNF7OQKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/email/saas-mail-day-three.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 6e3;
+var HEADER_H = 400;
+var RULE = { step: 96, moves: [1500, 3300, 5100], move: 450 };
+var STOPS = [["3 days before", "11 Oct"], ["On the day", "14 Oct"], ["7 days late", "21 Oct"]];
+var cues = [
+  { layer: "Stop 1", preset: "pulse", at: 300, params: { duration: 700, amount: 0.12 } },
+  { layer: "Stop 2", preset: "pulse", at: 2100, params: { duration: 700, amount: 0.12 } },
+  { layer: "Stop 3", preset: "pulse", at: 3900, params: { duration: 700, amount: 0.12 } }
+];
+var saas_mail_day_three_default = defineTemplate({
+  id: "email-saas-mail-day-three",
+  meta: {
+    name: "SaaS lifecycle email: onboarding day 3",
+    description: "A whole 600 px day-three onboarding email in a warm editorial serif look: one tip the customer has not tried, shown on an invoice whose reminders are marked along a rule, then how to switch it on, a customer quote and a single button. The header loops for six seconds (export it as a GIF); the body is table-safe Georgia",
+    category: "email",
+    tags: ["email", "saas", "lifecycle", "onboarding", "tip", "day three", "social proof", "testimonial", "editorial", "serif", "animated", "gif", "html"],
+    platforms: ["email"],
+    formats: ["email"],
+    useCases: ["onboarding", "tips", "testimonial"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("SaaS lifecycle email: onboarding day 3", preset("email-body"));
+    k.brand(
+      { paper: "#FBF8F1", text: "#1A2138", onPaper: "#4A4F5E", primary: "#1A2138", onPrimary: "#FBF8F1", accent: "#D9A21B", onAccent: "#1A2138", tint: "#F1EBDC", onTint: "#1A2138" },
+      { company: "Foliot", address: "Keizersgracht 241, 1016 EA Amsterdam" }
+    );
+    k.palette({ page: "#EFE7D4", onPage: "#1A2138", pageSoft: "#474B58", card: "#FFFEFA", onCard: "#1A2138", soft: "#585C69", line: "#D8CFB8", paid: "#2F6B4F" });
+    k.textStyle("Folio 12", { ...MONO, size: 12, fontWeight: 600, letterSpacing: 1.6, lineHeight: 14 });
+    k.textStyle("Column 40", { ...SERIF, size: 35, fontWeight: 700, letterSpacing: -1, lineHeight: 38 });
+    k.textStyle("Standfirst 15", { ...SERIF, size: 15, fontWeight: 400, fontStyle: "italic", lineHeight: 21 });
+    k.textStyle("Invoice 12", { ...MONO, size: 12, fontWeight: 600, lineHeight: 16 });
+    k.textStyle("Invoice label 12", { ...MONO, size: 12, fontWeight: 600, letterSpacing: 1.2, lineHeight: 15 });
+    k.textStyle("Amount 30", { ...SERIF, size: 30, fontWeight: 700, letterSpacing: -0.8, lineHeight: 34 });
+    k.textStyle("Stop 12", { size: 12, fontWeight: 700, lineHeight: 15, textAlign: "CENTER" });
+    k.textStyle("Stop date 12", { ...MONO, size: 12, fontWeight: 500, lineHeight: 15, textAlign: "CENTER" });
+    k.textStyle("Heading 27", { ...GEORGIA, size: 27, fontWeight: 700, lineHeight: 34 });
+    k.textStyle("Body 17", { ...GEORGIA, size: 17, fontWeight: 400, lineHeight: 28 });
+    k.textStyle("Quote 20", { ...GEORGIA, size: 20, fontWeight: 400, fontStyle: "italic", lineHeight: 30 });
+    k.textStyle("By 13", { ...ARIAL, size: 13, fontWeight: 700, lineHeight: 18 });
+    k.textStyle("Small 15", { ...ARIAL, size: 15, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Label 12", { ...ARIAL, size: 12, fontWeight: 700, letterSpacing: 1.4, lineHeight: 16 });
+    k.textStyle("Button 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Fine 13", { ...ARIAL, size: 13, fontWeight: 400, lineHeight: 19 });
+    mailButton(k, "Mail button", { fill: "primary", ink: "onPrimary", style: "Button 16", label: "Turn on reminders", width: 240, height: 50 });
+    const sheet = mailSheet(k, { paper: "paper", duration: DURATION });
+    const head = mailHeader(k, sheet, HEADER_H, "page");
+    k.rect(head, 528, 3, "onPage", { name: "Top rule", absolute: { x: 36, y: 30 } });
+    k.rect(head, 528, 1, "onPage", { name: "Second rule", absolute: { x: 36, y: 37 } });
+    k.text(head, "THE {{brand.company}} LETTER", { style: "Folio 12", color: "onPage", width: 300, name: "Folio", absolute: { x: 36, y: 50 } });
+    k.text(head, "DAY THREE \xB7 A TIP", { style: "Folio 12", color: "onPage", width: 228, align: "RIGHT", name: "Folio day", absolute: { x: 336, y: 50 } });
+    k.text(head, "The reminder you haven\u2019t switched on.", { style: "Column 40", color: "onPage", width: 222, name: "Column", absolute: { x: 36, y: 92 } });
+    k.rect(head, 44, 4, "accent", { name: "Column mark", absolute: { x: 36, y: 276 } });
+    k.text(head, "Two minutes now, and you never chase a late invoice by hand again.", { style: "Standfirst 15", color: "pageSoft", width: 214, name: "Standfirst", absolute: { x: 36, y: 294 } });
+    const inv = k.stack(head, { width: 308, fill: "card", radius: 6, padding: { top: 20, right: 22, bottom: 22, left: 22 }, gap: 10, effects: [drop(0.16, 14, 34)], name: "Invoice", absolute: { x: 266, y: 86 } });
+    const invTop = k.stack(inv, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Invoice top" });
+    k.text(invTop, "INVOICE 0042", { style: "Invoice label 12", color: "soft", autoWidth: true, name: "Invoice number" });
+    const due = k.stack(invTop, { direction: "HORIZONTAL", width: "HUG", fill: "accent", padding: { top: 3, right: 8, bottom: 3, left: 8 }, name: "Due chip" });
+    k.text(due, "DUE 14 OCT", { style: "Invoice label 12", color: "onAccent", autoWidth: true, name: "Due" });
+    k.text(inv, "Harrow & Finch Studio", { style: "Invoice 12", color: "onCard", name: "Client" });
+    k.text(inv, "\u20AC2,400.00", { style: "Amount 30", color: "onCard", name: "Amount" });
+    for (const [what, sum] of [["Brand illustrations \xD7 6", "\u20AC1,800"], ["Two rounds of changes", "\u20AC600"]]) {
+      const line = k.stack(inv, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Invoice line" });
+      k.text(line, what, { style: "Invoice 12", color: "soft", autoWidth: true, name: "Line item" });
+      k.text(line, sum, { style: "Invoice 12", color: "soft", autoWidth: true, name: "Line sum" });
+    }
+    k.rect(inv, "FILL", 1, "line", { name: "Invoice rule" });
+    k.text(inv, "REMINDERS \xB7 POLITE", { style: "Invoice label 12", color: "onCard", name: "Reminders label" });
+    const W = RULE.step * 2 + 72;
+    const track = k.stack(inv, { width: W, height: 66, name: "Reminder rule" });
+    k.rect(track, RULE.step * 2, 2, "line", { name: "Track", absolute: { x: 36, y: 11 } });
+    const marker = k.ellipse(track, 24, "accent", { name: "Marker", opacity: 0.45, absolute: { x: 24, y: 0 } });
+    STOPS.forEach(([label, date], i) => {
+      k.ellipse(track, 12, "onCard", { name: `Stop ${i + 1}`, absolute: { x: 30 + i * RULE.step, y: 6 } });
+      k.text(track, label, { style: "Stop 12", color: "onCard", width: 96, name: "Stop label", absolute: { x: i * RULE.step - 12, y: 30 } });
+      k.text(track, date, { style: "Stop date 12", color: "soft", width: 96, name: "Stop date", absolute: { x: i * RULE.step - 12, y: 48 } });
+    });
+    const stops = [RULE.step, 2 * RULE.step, 0];
+    k.animate(marker, "translateX", [{ t: 0, v: 0, ease: ease.hold }, ...RULE.moves.flatMap((t, i) => [{ t, v: i === 0 ? 0 : stops[i - 1], ease: ease.inOut("cubic") }, { t: t + RULE.move, v: stops[i], ease: ease.hold }])]);
+    const intro = section(k, sheet, { name: "Intro", pad: [40, 44, 8, 44], gap: 14 });
+    k.text(intro, "Invoices with reminders get paid nine days sooner.", { style: "Heading 27", color: "text", name: "Heading" });
+    k.text(intro, "Hello Jo. You have sent four invoices with {{brand.company}} this week, and none of them has a reminder schedule yet. It is the setting our longest-standing customers switch on first, and the one they say they would miss most.", { style: "Body 17", color: "onPaper", name: "Intro words" });
+    k.text(intro, "Open any invoice, choose Reminders and pick Polite. {{brand.company}} writes three short notes: one before the due date, one on it and one a week after. You approve the wording once; it stops the moment the invoice is paid.", { style: "Body 17", color: "onPaper", name: "How" });
+    const proof = section(k, sheet, { name: "Proof", pad: [20, 44, 8, 44] });
+    const quote = mailRow(k, proof, { name: "Quote row", gap: 20, fill: "tint" });
+    k.rect(quote, 5, 10, "accent", { name: "Quote mark" });
+    const said = k.stack(quote, { width: "FILL", gap: 12, padding: { top: 24, right: 26, bottom: 24, left: 0 }, name: "Quote words" });
+    k.text(said, "\u201CI used to spend Friday afternoons chasing. Now I find out an invoice was late when the money lands.\u201D", { style: "Quote 20", color: "onTint", name: "Quote" });
+    k.text(said, "Mireille Okafor, illustrator \xB7 with {{brand.company}} since 2023", { style: "By 13", color: "onTint", name: "By" });
+    const fact = section(k, sheet, { name: "Fact", pad: [16, 44, 0, 44], gap: 4 });
+    k.text(fact, "FROM LAST YEAR\u2019S NUMBERS", { style: "Label 12", color: "text", name: "Fact label" });
+    k.text(fact, "4,200 freelancers sent \u20AC61 million of invoices through {{brand.company}}. Those with a reminder schedule waited 12 days for payment on average; those without waited 21.", { style: "Small 15", color: "onPaper", name: "Fact words" });
+    callToAction(k, sheet, { button: "Mail button", label: "Turn on reminders", pad: [28, 44, 32, 44], note: "It applies to the four invoices you have already sent, too.", noteStyle: "Small 15", noteInk: "onPaper" });
+    mailFooter(k, sheet, { style: "Fine 13", ink: "onPaper", rule: "tint", pad: [8, 44, 32, 44], why: "You are getting this because you opened a {{brand.company}} account on 29 September. This is the second of three notes." });
+    k.cues(sheet, cues);
+    k.finish();
+    for (const id of k.named(sheet, "Quote mark")) k.patch(id, { height: k.node(k.named(sheet, "Quote words")[0]).height });
+    return finishMail(k, sheet);
+  }
+});
+
+export {
+  saas_mail_day_three_default
+};

package/dist/chunks/chunk-OZIWTCKD.js

@@ -0,0 +1,195 @@
+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 {
+  GRAIN,
+  folio,
+  folioPlan,
+  gild,
+  growVine,
+  manicule,
+  manuscriptBrand,
+  seal,
+  shadow,
+  vine
+} from "./chunk-4E2RUPKJ.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-MPRWXHPJ.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-KLAIZ7BD.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  Kit,
+  preset
+} from "./chunk-YN7EORVO.js";
+import {
+  ease
+} from "./chunk-UNF7OQKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/web/manuscript-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var ENTRIES = [
+  ["1 Oct", "Chapter VII: sources in the margin", "Every sentence Quire writes now cites the thread, pull request or call it came from, beside the line."],
+  ["17 Sep", "A faster scribe", "A page is written in under nine seconds, down from forty. Long calls no longer wait in a queue."],
+  ["2 Sep", "Stale pages confess", "When a source changes, the page marks itself out of date and offers a rewrite for you to sign."],
+  ["19 Aug", "The Slack hand", "Ask in any channel. Quire answers with the page, its folio and the line you were looking for."]
+];
+var GLOSSES = ["#deploys \xB7 14 Mar", "PR 2118 \xB7 merged", "Tue stand-up call"];
+var FOLIO = { w: 560, h: 700, initialSize: 132, title: 62, margin: 168 };
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 700 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 150, params: { duration: 800 } },
+  { layer: "Headline", preset: "blur-in", at: 250, params: { duration: 1e3, amount: 22 } },
+  { layer: "Folio", preset: "fade-in", at: 200, params: { duration: 900 } },
+  { layer: "Lead", preset: "rise-in", at: 800, params: { duration: 800 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1150, params: { duration: 700 }, stagger: { delay: 140 } },
+  // The leaf is illuminated: gold laid, the letter set, the page written, its sources pointed out, the seal pressed.
+  { layer: "Gold leaf", preset: "wipe-in", at: 700, params: { duration: 700 } },
+  { layer: "Field", preset: "fade-in", at: 1e3, params: { duration: 400 } },
+  { layer: "Initial letter", preset: "pop-in", at: 1200, params: { duration: 450 } },
+  { layer: "Boss", preset: "pop-in", at: 1400, params: { duration: 300 }, stagger: { delay: 80 } },
+  { layer: "Folio title", preset: "fade-in", at: 1300, params: { duration: 600 } },
+  { layer: "Script line", preset: "wipe-in", at: 1600, params: { duration: 380, ease: ease.linear }, stagger: { delay: 190 } },
+  { layer: "Versal", preset: "pop-in", at: 2500, params: { duration: 300 } },
+  { layer: "Proof", preset: "fade-in", at: 1800, params: { duration: 800 } },
+  { layer: "Manicule", preset: "slide-in", at: 2600, params: { duration: 400, direction: "right", distance: 40 }, stagger: { delay: 300 } },
+  { layer: "Gloss", preset: "fade-in", at: 2700, params: { duration: 400 }, stagger: { delay: 300 } },
+  { layer: "Seal", preset: "pop-in", at: 4100, params: { duration: 420, amount: 0.3 } }
+];
+var manuscript_landing_default = defineTemplate({
+  id: "web-manuscript-landing",
+  meta: {
+    name: "Manuscript landing page",
+    description: "A landing page set as an illuminated manuscript for a docs, wiki or writing product: a hero where a vellum leaf is gilded, grows an ivy border and writes itself in ink beside a heavy serif headline, a changelog kept as a chronicle of ruled entries, and a free-plan leaf with a wax seal \u2014 at desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["manuscript", "illuminated", "medieval", "vellum", "drop cap", "gold leaf", "wax seal", "landing page", "hero", "website", "wiki", "docs", "changelog", "saas", "animation", "serif", "responsive", "light"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "brand-intro", "changelog"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Manuscript landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    manuscriptBrand(k);
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 22", { ...SERIF, size: 22, fontWeight: 900, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Rubric 20", { ...SERIF, size: 20, fontWeight: 700, letterSpacing: 2.5, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("Display 68", { ...SERIF, size: 68, fontWeight: 900, letterSpacing: -2.2, lineHeight: 72 });
+    k.textStyle("Display 60", { ...SERIF, size: 60, fontWeight: 900, letterSpacing: -1.9, lineHeight: 64 });
+    k.textStyle("Display 38", { ...SERIF, size: 38, fontWeight: 900, letterSpacing: -1.2, lineHeight: 42 });
+    k.textStyle("Lead 20", { ...SERIF, size: 20, fontWeight: 400, lineHeight: 32 });
+    k.textStyle("Lead 17", { ...SERIF, size: 17, fontWeight: 400, lineHeight: 27 });
+    k.textStyle("Proof 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Initial 92", { ...SERIF, size: 92, fontWeight: 900, lineHeight: 92, textAlign: "CENTER" });
+    k.textStyle("Seal 44", { ...SERIF, size: 44, fontWeight: 900, lineHeight: 44, textAlign: "CENTER" });
+    k.textStyle("Folio title 23", { ...SERIF, size: 23, fontWeight: 900, letterSpacing: -0.4, lineHeight: 27 });
+    k.textStyle("Gloss 12", { ...MONO, size: 12, fontWeight: 500, lineHeight: 16 });
+    k.textStyle("Section 44", { ...SERIF, size: 44, fontWeight: 900, letterSpacing: -1.2, lineHeight: 50 });
+    k.textStyle("Section 32", { ...SERIF, size: 32, fontWeight: 900, letterSpacing: -0.8, lineHeight: 38 });
+    k.textStyle("Date 20", { ...SERIF, size: 20, fontWeight: 700, letterSpacing: 1.5, lineHeight: 30, textCase: "UPPER" });
+    k.textStyle("Entry 26", { ...SERIF, size: 26, fontWeight: 700, fontStyle: "italic", lineHeight: 32 });
+    k.textStyle("Body 18", { ...SERIF, size: 18, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 22 });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 4 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 72, top: 32 });
+    k.patch(sheet, { effects: GRAIN });
+    k.timeline(sheet, { duration: 5e3, fps: 30 });
+    nav(k, sheet, { links: ["How it writes", "Sources", "Pricing", "Chronicle"], cta: "Open the book", style: "Nav 16", brandStyle: "Brand 22" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 26, name: "Copy" });
+    k.text(copy, "Incipit \xB7 the team wiki, est. MMXXVI", { style: "Rubric 20", color: "accent", name: "Eyebrow" });
+    k.text(copy, "The last wiki you\nwill ever copy out\nby hand.", { style: "Display 68", color: "text", name: "Headline" });
+    k.text(copy, "Quire reads the threads, pull requests and calls your team already has, and writes the page: dated, signed, with its sources in the margin. When a source changes, the page says so.", { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Open the book" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Read a sample page" }, { name: "CTA quiet" });
+    k.text(copy, "41,208 pages written \xB7 0 copied out by hand", { style: "Proof 15", color: "onPaper", name: "Proof" });
+    const visual = k.stack(hero, { width: FOLIO.w, height: FOLIO.h, name: "Visual" });
+    const leaf = folio(k, visual, FOLIO.w, FOLIO.h, { letter: "H", initialStyle: "Initial 92", sealStyle: "Seal 44", initialSize: FOLIO.initialSize, title: FOLIO.title, margin: FOLIO.margin, seed: 41 });
+    const g = folioPlan(FOLIO.w, FOLIO.h, FOLIO);
+    k.text(leaf.id, "ow we ship on Fridays", { style: "Folio title 23", color: "onCard", width: g.left + g.textW - g.besideX, absolute: { x: g.besideX, y: g.top + 2 }, name: "Folio title" });
+    GLOSSES.forEach((source, i) => {
+      const y = g.belowY + i * 2 * g.pitch;
+      manicule(k, leaf.id, 34, { absolute: { x: g.glossX, y: y - 12 } });
+      k.text(leaf.id, source, { style: "Gloss 12", color: "onCard", width: FOLIO.margin - 40, absolute: { x: g.glossX, y: y + 8 }, name: "Gloss" });
+    });
+    const divide = k.stack(sheet, { height: 96, clip: true, name: "Ivy strip" });
+    const strip = vine(k, divide, { x: 0, y: 48, length: 1200, dir: "right", amp: 12, waves: 9.5, u: 0.6 });
+    const chronicle = k.stack(sheet, { gap: 0, name: "Chronicle" });
+    k.text(chronicle, "The chronicle", { style: "Section 44", color: "text", name: "Chronicle title" });
+    k.stack(chronicle, { height: 12, name: "Gap" });
+    k.text(chronicle, "What was added to the book, and when. Kept by hand, the one thing here that is.", { style: "Lead 20", color: "onPaper", name: "Chronicle lead" });
+    k.stack(chronicle, { height: 32, name: "Gap" });
+    for (const [date, name, what] of ENTRIES) {
+      k.rect(chronicle, "FILL", 2, "rule", { name: "Rule" });
+      const row = k.stack(chronicle, { direction: "HORIZONTAL", gap: 32, padding: { top: 24, right: 0, bottom: 24, left: 0 }, name: "Entry" });
+      k.text(row, date, { style: "Date 20", color: "accent", width: 110, name: "Entry date" });
+      k.text(row, name, { style: "Entry 26", color: "text", width: 330, name: "Entry name" });
+      k.text(row, what, { style: "Body 18", color: "onPaper", name: "Entry account" });
+    }
+    k.rect(chronicle, "FILL", 2, "rule", { name: "Rule" });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 36, align: "CENTER", fill: "card", radius: 4, stroke: { color: "rule", width: 1.5 }, padding: { top: 44, right: 48, bottom: 44, left: 48 }, effects: shadow(k, 40, 16, 0.4), name: "Band" });
+    seal(k, band, 104, "Q", "Seal 44", { name: "Band seal", ribbons: false });
+    const pitch = k.stack(band, { gap: 10, name: "Band copy" });
+    k.text(pitch, "Three scribes free, for as long as you write.", { style: "Section 32", color: "onCard", name: "Band title" });
+    k.text(pitch, "No card. Slack and GitHub connected in two minutes, and your first hundred pages on us.", { style: "Body 18", color: "onCard", name: "Band text" });
+    k.instance(band, "Button", { Label: "Open the book" }, { name: "Band button" });
+    k.text(sheet, "Explicit. \xA9 MMXXVI Quire Labs \xB7 Security \xB7 Status \xB7 The colophon", { style: "Small 14", color: "onPaper", name: "Footer" });
+    k.cues(sheet, cues);
+    growVine(k, leaf.vine, 600, 2600);
+    growVine(k, strip, 400, 3200);
+    gild(k, sheet, 1700);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Band", "Entry"],
+      restyle: {
+        "Display 68": { laptop: "Display 60", tablet: "Display 60", mobile: "Display 38" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Section 44": { mobile: "Section 32" }
+      },
+      hide: { tablet: ["Nav links"] },
+      gap: { tablet: 56, mobile: 48 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 44 });
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48, counterAxisAlignItems: size === "tablet" ? "CENTER" : "MIN" });
+          for (const n of kit.named(id, "Entry")) kit.patch(n, { itemSpacing: 6 });
+          for (const n of kit.named(id, "Band")) kit.patch(n, { itemSpacing: 24, counterAxisAlignItems: "MIN", padding: { top: 32, right: 24, bottom: 32, left: 24 } });
+          for (const n of kit.named(id, "Band seal")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 104 });
+        }
+        const s = size === "mobile" ? 335 / FOLIO.w : 1;
+        for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: Math.round(FOLIO.w * s), height: Math.round(FOLIO.h * s) });
+        for (const n of kit.named(id, "Folio")) kit.patch(n, { x: 0, y: 0, scaleX: s, scaleY: s, anchorX: 0, anchorY: 0 });
+        for (const n of kit.named(id, "Stem")) {
+          const p = kit.node(n).parentId;
+          if (p && kit.node(p).name === "Ivy strip") kit.patch(p, { layoutSizingHorizontal: "FILL" });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  manuscript_landing_default
+};