@popcraft/kit 0.44.0 → 0.45.0

package/dist/chunks/chunk-PSUNHGMY.js

@@ -0,0 +1,249 @@
+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 {
+  cased,
+  st
+} from "./chunk-5AMU423D.js";
+import {
+  buntingPaths,
+  disc,
+  shape,
+  sway,
+  turn
+} from "./chunk-CH5XNXQX.js";
+import {
+  burstPath
+} from "./chunk-Y6DFTJFC.js";
+import {
+  hardShadow
+} from "./chunk-PCZTQVV6.js";
+import {
+  box,
+  curve3,
+  line,
+  poly,
+  pt3,
+  rng,
+  smooth
+} from "./chunk-YKX2GS6X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/themes/festival-presale-family-kit.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var W = 3e3;
+var mover = (k, still) => (id, path, amp, cycles = 1, phase = 0) => {
+  if (!still) sway(k, id, path, amp, cycles, phase);
+};
+function flags(k, f, still, o) {
+  const b = buntingPaths(o.x1, o.y1, o.x2, o.y2, o.sag, o.n, o.size);
+  shape(k, f, [b.line], "navy", { name: `${o.name} line`, strokeWidth: 3 });
+  ["tomato", "sunflower", "violet", "pink"].forEach((c, ci) => {
+    const id = shape(k, f, b.flags.filter((_, i) => i % 4 === ci), c, { name: o.name });
+    if (!still) sway(k, id, "translateY", 3, 2, ci / 4);
+  });
+}
+function wood(k, f, r, boxes, s = 1) {
+  const trees = [], shade = [], trunks = [];
+  for (const [x0, y0, w, h, n] of boxes) for (let i = 0; i < n; i++) {
+    const x = x0 + r() * w, y = y0 + r() * h, rr = (24 + r() * 18) * s;
+    trunks.push(box(x - 4 * s, y + rr - 6, 8 * s, 18 * s));
+    trees.push(disc(x, y, rr));
+    shade.push(disc(x + rr * 0.25, y + rr * 0.2, rr * 0.6));
+  }
+  shape(k, f, trunks, "wood", { name: "Trunks" });
+  shape(k, f, trees, "tree", { name: "Trees" });
+  shape(k, f, shade, "treeDark", { name: "Tree shade", opacity: 0.6 });
+}
+function pins(k, f, at) {
+  shape(k, f, at.map(([x, y]) => disc(x + 3, y + 8, 22)), "navy", { name: "Pin shadows", opacity: 0.25 });
+  shape(k, f, at.map(([x, y]) => disc(x, y, 22)), "navy", { name: "Pins", stroke: { color: "white", width: 5 } });
+  shape(k, f, at.map(([x, y]) => disc(x, y, 8)), "sunflower", { name: "Pin hearts" });
+}
+function meadow(k, f) {
+  const r = rng(12);
+  const patch = (cx, cy, rx, ry, role) => shape(k, f, [smooth(Array.from({ length: 9 }, (_, i) => {
+    const a = i / 9 * Math.PI * 2, w = 0.82 + r() * 0.36;
+    return { x: cx + rx * w * Math.cos(a), y: cy + ry * w * Math.sin(a) };
+  }), 0.28)], role, { name: "Meadow" });
+  for (let i = 0; i < 16; i++) patch(r() * W, r() * 3e3, 240 + r() * 260, 150 + r() * 160, i % 3 ? "grass" : "grassDark");
+  const ways = [
+    curve3([{ x: -40, y: 900 }, { x: 600, y: 760 }, { x: 1100, y: 1020 }, { x: 1500, y: 880 }, { x: 2100, y: 1100 }, { x: 3040, y: 940 }], 0.3),
+    curve3([{ x: -40, y: 2100 }, { x: 700, y: 2240 }, { x: 1300, y: 1980 }, { x: 1900, y: 2200 }, { x: 3040, y: 2020 }], 0.3),
+    curve3([{ x: 400, y: -40 }, { x: 520, y: 700 }, { x: 380, y: 1500 }, { x: 560, y: 2300 }, { x: 420, y: 3040 }], 0.3),
+    curve3([{ x: 2600, y: -40 }, { x: 2480, y: 800 }, { x: 2640, y: 1600 }, { x: 2500, y: 3040 }], 0.3)
+  ];
+  shape(k, f, ways, "path", { name: "Paths", strokeWidth: 34 });
+  shape(k, f, ways, "white", { name: "Path dashes", stroke: { color: "white", width: 4, dash: [12, 14] } });
+  wood(k, f, r, [[60, 1200, 260, 600, 7], [2700, 1250, 260, 600, 7], [700, 1500, 160, 300, 3], [2180, 1500, 160, 300, 3]]);
+  const dots = [], dots2 = [];
+  for (let i = 0; i < 140; i++) (i % 2 ? dots : dots2).push(disc(r() * W, r() * 3e3, 5));
+  shape(k, f, dots, "white", { name: "Daisies", opacity: 0.8 });
+  shape(k, f, dots2, "sunflower", { name: "Buttercups", opacity: 0.8 });
+  shape(k, f, [line(1e3, 0, 1e3, 3e3), line(2e3, 0, 2e3, 3e3), line(0, 1500, W, 1500)], "navy", { name: "Map folds", strokeWidth: 3, opacity: 0.08 });
+}
+function hilltop(k, f, still) {
+  const move = mover(k, still);
+  const r = rng(7);
+  wood(k, f, r, [[0, 30, 900, 120, 16], [2100, 30, 900, 120, 16], [900, 0, 1200, 60, 10]]);
+  const sx = 1560, sy = 280;
+  shape(k, f, [{ closed: true, points: [pt3(sx - 130, sy), { ...pt3(sx, sy - 150), handleIn: pt3(sx - 130, sy - 130), handleOut: pt3(sx + 130, sy - 130) }, pt3(sx + 130, sy)] }], "navy", { name: "Stage shell" });
+  const glow = shape(k, f, [{ closed: true, points: [pt3(sx - 102, sy), { ...pt3(sx, sy - 118), handleIn: pt3(sx - 100, sy - 96), handleOut: pt3(sx + 100, sy - 96) }, pt3(sx + 102, sy)] }], "sunflower", { name: "Stage glow" });
+  move(glow, "opacity", 0.25, 6);
+  shape(k, f, [box(sx - 150, sy, 300, 18), box(sx - 160, sy - 50, 20, 50), box(sx + 140, sy - 50, 20, 50)], "navy", { name: "Stage deck" });
+  const bx = 1180, by = 330, bw = 280;
+  shape(k, f, [poly([[bx - bw / 2, by], [bx + bw / 2, by], [bx + bw * 0.42, by - 86], [bx - bw * 0.42, by - 86]])], "white", { name: "Big Top wall", stroke: { color: "navy", width: 3 } });
+  shape(k, f, [0, 2, 4].map((i) => {
+    const x0 = bx - bw / 2 + i * bw / 5, t0 = bx - bw * 0.42 + i * bw * 0.84 / 5;
+    return poly([[x0, by], [x0 + bw / 5, by], [t0 + bw * 0.84 / 5, by - 86], [t0, by - 86]]);
+  }), "tomato", { name: "Big Top stripes" });
+  shape(k, f, [poly([[bx - bw * 0.52, by - 84], [bx, by - 220], [bx + bw * 0.52, by - 84]])], "tomato", { name: "Big Top roof", stroke: { color: "navy", width: 3 } });
+  shape(k, f, [-0.3, 0.1].map((q) => poly([[bx + bw * q, by - 84], [bx, by - 220], [bx + bw * (q + 0.2), by - 84]])), "white", { name: "Roof stripes" });
+  shape(k, f, [poly([[bx - 24, by], [bx, by - 56], [bx + 24, by]])], "navy", { name: "Big Top door" });
+  shape(k, f, [line(bx, by - 220, bx, by - 270)], "navy", { name: "Flag pole", strokeWidth: 4 });
+  const flag = shape(k, f, [poly([[bx, by - 270], [bx + 50, by - 256], [bx, by - 242]])], "sunflower", { name: "Flag" });
+  k.patch(flag, { anchorX: 0 });
+  move(flag, "scaleX", 0.25, 4);
+  flags(k, f, still, { x1: 900, y1: 360, x2: 1420, y2: 360, sag: 40, n: 12, size: 26, name: "Bunting" });
+  flags(k, f, still, { x1: 1700, y1: 330, x2: 2100, y2: 350, sag: 34, n: 10, size: 26, name: "Bunting" });
+  const balloon = k.frame(f, { x: 1880, y: 40, width: 120, height: 180 }, { name: "Balloon" });
+  shape(k, balloon, [disc(60, 60, 56, 60)], "tomato", { name: "Envelope", stroke: { color: "navy", width: 3 } });
+  shape(k, balloon, [disc(60, 60, 22, 60)], "sunflower", { name: "Envelope stripe" });
+  shape(k, balloon, [line(32, 110, 46, 146), line(88, 110, 74, 146)], "navy", { name: "Ropes", strokeWidth: 3 });
+  shape(k, balloon, [box(42, 146, 36, 24)], "wood", { name: "Basket" });
+  move(balloon, "translateY", 12, 1);
+  move(balloon, "translateX", 16, 1, 0.25);
+  [[980, 120, "violet", 0], [2300, 200, "pink", 0.4], [700, 220, "sunflower", 0.7]].forEach(([x, y, role, ph]) => {
+    const kite = shape(k, f, [poly([[x, y - 32], [x + 24, y], [x, y + 38], [x - 24, y]])], role, { name: "Kite", stroke: { color: "navy", width: 3 } });
+    shape(k, f, [curve3([{ x, y: y + 38 }, { x: x - 20, y: y + 80 }, { x: x + 10, y: y + 120 }, { x: x - 10, y: y + 160 }], 0.3)], "navy", { name: "Kite tail", strokeWidth: 2 });
+    move(kite, "translateY", 10, 2, ph);
+    move(kite, "rotation", 8, 2, ph + 0.2);
+  });
+  pins(k, f, [[bx + 150, by - 120], [sx + 170, sy - 110]]);
+}
+function lakeside(k, f, still) {
+  const move = mover(k, still);
+  const r = rng(21);
+  shape(k, f, [smooth([{ x: 1e3, y: 260 }, { x: 1140, y: 170 }, { x: 1380, y: 180 }, { x: 1560, y: 250 }, { x: 1520, y: 380 }, { x: 1300, y: 430 }, { x: 1080, y: 400 }], 0.3)], "lake", { name: "Lake", stroke: { color: "white", width: 6 } });
+  const ripples = shape(k, f, [[1120, 270, 70], [1300, 330, 90], [1220, 220, 50], [1400, 260, 60]].map(([x, y, w]) => curve3([{ x, y }, { x: x + w / 2, y: y - 8 }, { x: x + w, y }], 0.3)), "white", { name: "Ripples", strokeWidth: 4, opacity: 0.8 });
+  move(ripples, "translateX", 10, 2);
+  const boat = shape(k, f, [poly([[1340, 280], [1410, 280], [1394, 302], [1356, 302]]), poly([[1376, 274], [1376, 220], [1410, 270]])], "tomato", { name: "Boat" });
+  move(boat, "translateY", 4, 3);
+  move(boat, "rotation", 4, 3, 0.25);
+  const wx = 1700, wy = 190, wr = 110;
+  shape(k, f, [poly([[wx - 60, wy + 150], [wx, wy], [wx + 60, wy + 150]], false)], "navy", { name: "Wheel legs", strokeWidth: 7 });
+  const spokes = [disc(wr + 14, wr + 14, wr)];
+  for (let i = 0; i < 4; i++) {
+    const a = i / 8 * Math.PI * 2;
+    spokes.push(line(wr + 14 + wr * Math.cos(a), wr + 14 + wr * Math.sin(a), wr + 14 - wr * Math.cos(a), wr + 14 - wr * Math.sin(a)));
+  }
+  const wheel = k.vector(f, wr * 2 + 28, wr * 2 + 28, spokes, "navy", { name: "Wheel", strokeWidth: 5, absolute: { x: wx - wr - 14, y: wy - wr - 14 } });
+  const cabins = k.vector(f, wr * 2 + 28, wr * 2 + 28, Array.from({ length: 8 }, (_, i) => {
+    const a = i / 8 * Math.PI * 2;
+    return disc(wr + 14 + wr * Math.cos(a), wr + 14 + wr * Math.sin(a), 15);
+  }), "sunflower", { name: "Cabins", stroke: { color: "navy", width: 3 }, absolute: { x: wx - wr - 14, y: wy - wr - 14 } });
+  if (!still) for (const id of [wheel, cabins]) turn(k, id, 1 / 8);
+  const dx = 1950, dy = 380;
+  shape(k, f, [{ closed: true, points: [pt3(dx - 100, dy), { ...pt3(dx, dy - 104), handleIn: pt3(dx - 100, dy - 80), handleOut: pt3(dx + 100, dy - 80) }, pt3(dx + 100, dy)] }], "violet", { name: "Dome", stroke: { color: "navy", width: 3 } });
+  shape(k, f, [line(dx, dy - 102, dx, dy), curve3([{ x: dx - 66, y: dy }, { x: dx - 46, y: dy - 66 }, { x: dx, y: dy - 102 }], 0.3), curve3([{ x: dx + 66, y: dy }, { x: dx + 46, y: dy - 66 }, { x: dx, y: dy - 102 }], 0.3), line(dx - 92, dy - 38, dx + 92, dy - 38)], "white", { name: "Dome ribs", strokeWidth: 3, opacity: 0.75 });
+  shape(k, f, [box(880, 470, 160, 16), box(900, 510, 160, 16), box(1080, 490, 120, 16)], "wood", { name: "Tables" });
+  flags(k, f, still, { x1: 860, y1: 420, x2: 1220, y2: 430, sag: 24, n: 10, size: 24, name: "Feast bunting" });
+  const tents = { tomato: [], sunflower: [], violet: [], white: [] };
+  const roles = Object.keys(tents);
+  const field = (x0, n) => {
+    for (let row = 0; row < 3; row++) for (let i = 0; i < n; i++) {
+      const x = x0 + i * 60 + row % 2 * 28, y = 420 + row * 50;
+      tents[roles[(i + row * 2) % 4]].push(poly([[x - 22, y], [x, y - 36], [x + 22, y]]));
+    }
+  };
+  field(1360, 10);
+  field(2160, 12);
+  field(100, 12);
+  for (const [role, paths] of Object.entries(tents)) shape(k, f, paths, role, { name: "Tents", stroke: { color: "navy", width: 2.5 } });
+  wood(k, f, r, [[0, 120, 800, 200, 14], [2200, 120, 800, 200, 14]]);
+  pins(k, f, [[1290, 160], [wx + 140, wy - 70], [dx + 110, dy - 110], [1e3, 400]]);
+}
+function rosette(k, parent, o) {
+  const s = o.size;
+  const id = k.stack(parent, { width: s, height: s, align: "CENTER", justify: "CENTER", gap: 0, name: o.name, ...o.absolute ? { absolute: o.absolute } : {} });
+  const burst = k.vector(id, s, s, [burstPath(s, 14, 0.14)], "sunflower", { name: `${o.name} burst`, stroke: { color: "navy", width: 3 }, absolute: { x: 0, y: 0 }, effects: [hardShadow(k, "navy", 4, 5, 1)] });
+  if (!o.still) turn(k, burst, 1 / 14);
+  const size = Math.max(16, Math.round(s * 0.14));
+  k.text(id, cased(FAMILY, "Sticker", `${o.lines[0]}
+${o.lines[1]}`), { style: st(k, FAMILY, "Sticker", size, "CENTER"), color: "navy", align: "CENTER", name: `${o.name} words` });
+  return id;
+}
+var FAMILY = {
+  slug: "family",
+  // The lake and the stalls rise to meet the button in the stories.
+  storyFoot: 1.3,
+  name: "Pippin Hill",
+  brand: (k) => {
+    k.brand(
+      { paper: "#FFF8E8", text: "#1F2A5C", onPaper: "#4A5380", primary: "#F0544F", onPrimary: "#200807", accent: "#7A5CF0", onAccent: "#FFFFFF", card: "#FFFFFF", onCard: "#1F2A5C", cardMuted: "#4A5380", panel: "#1F2A5C", onPanel: "#FFF8E8", panelMuted: "#C7CDEC", chip: "#FFE9A8", onChip: "#1F2A5C", stage: "#CFEDB4", onStage: "#1F2A5C", stageMuted: "#33406F" },
+      { name: "Pippin Hill" }
+    );
+    k.palette({ grass: "#B4E08F", grassDark: "#9AD27A", lake: "#7CCBF2", path: "#FBE7AE", white: "#FFFFFF", navy: "#1F2A5C", ink: "#14183A", tomato: "#F0544F", sunflower: "#FFC83D", violet: "#7A5CF0", pink: "#FF8FB1", tree: "#3FA36B", treeDark: "#2E8556", wood: "#B9824F", leafTile: "#7BC96F" });
+  },
+  type: {
+    Name: { fontWeight: 900, ls: -0.048, lh: 0.94 },
+    Head: { fontWeight: 900, ls: -0.035, lh: 1.04 },
+    Act: { fontWeight: 700, ls: -0.012, lh: 1.35 },
+    More: { fontWeight: 800, ls: 0.08, lh: 1.55, upper: true },
+    Kicker: { fontWeight: 800, ls: 0.16, lh: 1.35, upper: true },
+    Clock: { fontWeight: 900, ls: -0.04, lh: 1.04, tnum: true },
+    Unit: { fontWeight: 800, ls: 0.1, lh: 1.3, upper: true },
+    Body: { fontWeight: 500, ls: 0, lh: 1.45 },
+    Button: { fontWeight: 800, ls: 0, lh: 1.3 },
+    Caption: { fontWeight: 900, ls: -0.015, lh: 1.2 },
+    Price: { fontWeight: 900, ls: -0.045, lh: 1, tnum: true },
+    Sticker: { fontWeight: 900, ls: 0.04, lh: 1.1, upper: true }
+  },
+  look: {
+    plate: { fill: "card", ink: "onCard", muted: "cardMuted", radius: 28, stroke: { color: "navy", width: 4, align: "INSIDE" }, effects: (k) => [hardShadow(k, "navy", 9, 10)] },
+    tiles: [["tomato", "ink"], ["sunflower", "ink"], ["violet", "white"], ["leafTile", "ink"]],
+    tileRadius: 18,
+    button: 999,
+    chip: 999,
+    nameOn: "plate",
+    enter: "pop-in",
+    sep: "\xB7"
+  },
+  parts: [
+    { name: "Meadow", w: 3e3, h: 3e3, anchor: "cover", draw: meadow },
+    { name: "Hilltop", w: 3e3, h: 440, anchor: "top", draw: hilltop, loose: true },
+    { name: "Lakeside", w: 3e3, h: 560, anchor: "foot", draw: lakeside, loose: true }
+  ],
+  sticker: rosette,
+  dates: "29 July \u2013 1 August 2027",
+  place: "Pippin Hill Park, Northdale",
+  kicker: "Four days, for every age",
+  billLabel: "First on the programme",
+  heads: ["The Marmalade Skies", "Circus Fandango", "Orla Finch"],
+  acts: ["Captain Calypso\u2019s Brass Band", "The Paper Moon Puppet Company", "Professor Fizz\u2019s Explosive Hour", "The Flying Okonkwos"],
+  more: ["Tiny Disco with DJ Pom-Pom", "The Wobble Brothers", "Madame Zuzu\u2019s Hoops"],
+  tba: "Over a hundred more shows on 1 May",
+  presale: { by: "Sun 28 Feb", code: "Tue 2 March", opens: "Thu 4 March, 09:00", short: "4 March, 9am", queue: "08:30", limit: "two family tickets" },
+  clock: { days: "14", hours: "11", minutes: "36", from: 44, to: 38 },
+  tier: { tag: "Tier one", name: "Family weekend, with camping", price: "\xA3279", was: "\xA3245", wasTag: "Early bird", next: "\xA3305", nextTag: "Tier two", sold: "Early bird all gone", note: "On sale now to returning families. What is left opens to presale codes on 4 March.", stock: { label: "Going fast", from: 1480, left: 1452, total: 6e3 } },
+  seal: ["Presale", "4 March"],
+  code: "PH27-PRE-3TB8",
+  gate: "Meadow gate",
+  holder: "Hannah Lindqvist",
+  pass: "Family weekend",
+  track: "bigBand",
+  beats: 32,
+  step: 2,
+  captions: ["Four days, for every age.", "Presale opens Thursday 4 March.", "Sign up by 28 February.", "Sign up for a code."],
+  picture: "the map of the site: the Big Top with its flag, the Hilltop stage, a drifting balloon and kites, the lake with a boat, a big wheel that turns, the science dome, bunting and rows of tents",
+  tags: ["family", "children", "camping", "circus", "map", "playful", "illustration"]
+};
+
+export {
+  FAMILY
+};

package/dist/chunks/chunk-PTYIJ3EC.js

@@ -0,0 +1,182 @@
+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 {
+  DEAL,
+  bulbArrow,
+  fitShopfront,
+  lettering,
+  lightbox,
+  neonBrand,
+  neonWord,
+  puddle,
+  sheen,
+  shopfront,
+  shutter,
+  spark,
+  wash
+} from "./chunk-NDN2Z42J.js";
+import {
+  fitRain,
+  rain
+} from "./chunk-5M74IAAA.js";
+import {
+  MONO
+} from "./chunk-5OTEBTMU.js";
+import {
+  board,
+  patchAll,
+  put,
+  reboard,
+  restyle
+} from "./chunk-T3XFQJUI.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/motion/black-friday-neon-last-day.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 8e3;
+var TICKS = 8;
+var RAIN = { color: "ice", opacity: 0.13, rate: 960, seed: 14, count: 22, len: 90 };
+var SIGN = { w: 800, h: 610 };
+var WINDOW = { w: 800, h: 290, down: 104 };
+var cues = [
+  { layer: "Clock figure", preset: "pulse", at: 1e3, params: { duration: 500, amount: 0.04 } },
+  { layer: "Offer plate", preset: "pulse", at: 2600, params: { duration: 600, amount: 0.04 } },
+  { layer: "Button", preset: "pulse", at: 4400, params: { duration: 600, amount: 0.06 } }
+];
+var counts = [
+  // Rests at the figure it starts from: a still reads the time left as it was set.
+  { layer: "Clock figure", at: 0, duration: TICKS * 1e3, tick: 1e3, counter: { from: 48, to: 48 - TICKS, value: 48, prefix: "23:59:" } }
+];
+var NAME = "Black Friday neon last 24 hours story";
+var black_friday_neon_last_day_default = defineTemplate({
+  id: "motion-black-friday-neon-last-day",
+  meta: {
+    name: NAME,
+    description: "A final-day story for a SaaS Black Friday sale, drawn as a shop about to close: LAST 24 HOURS in red, white and amber neon on a wet brick wall, arrows of chasing bulbs, a roller shutter already part-way down and rattling over the shop window, and the time left lit on the glass with its seconds ticking. Rain, a tube that buzzes and relights. Eight seconds, looping, 9:16 with square and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "black friday", "cyber monday", "last chance", "last day", "countdown", "sale", "saas", "neon", "neon sign", "shopfront", "shutter", "night", "rain", "flicker", "story", "deadline", "discount code"],
+    platforms: ["instagram", "tiktok", "facebook", "snapchat"],
+    formats: ["story", "reel", "post", "portrait-post"],
+    useCases: ["countdown", "sale"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    neonBrand(k, { name: DEAL.product, site: DEAL.site });
+    k.textStyle("Headline 76", { size: 76, fontWeight: 900, letterSpacing: -2.8, lineHeight: 78, textAlign: "CENTER" });
+    k.textStyle("Headline 64", { size: 64, fontWeight: 900, letterSpacing: -2.2, lineHeight: 66 });
+    k.textStyle("Label 22", { ...MONO, size: 22, fontWeight: 700, letterSpacing: 2.4, lineHeight: 28 });
+    k.textStyle("Clock 104", { ...MONO, size: 104, fontWeight: 800, letterSpacing: -3, lineHeight: 108, fontFeatures: { tnum: 1 } });
+    k.textStyle("Offer 34", { size: 34, fontWeight: 800, letterSpacing: -0.5, lineHeight: 42, textAlign: "CENTER" });
+    k.textStyle("Clock 64", { ...MONO, size: 64, fontWeight: 800, letterSpacing: -2, lineHeight: 70, fontFeatures: { tnum: 1 } });
+    k.textStyle("Button 34", { size: 34, fontWeight: 800, lineHeight: 42 });
+    pill(k, "Buy button", { fill: "primary", ink: "onPrimary", style: "Button 34", label: DEAL.link, pad: [20, 44], radius: 12 });
+    const sheet = k.sheet;
+    const pad = verticalPadding();
+    k.flowSheet(sheet, 18, pad, "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    const STREET = 1492;
+    shopfront(k, sheet, { street: STREET, seed: 8 });
+    wash(k, sheet, "red", { x: 540, y: STREET + 150, w: 1100, h: 420, alpha: 0.3, name: "Road light" });
+    rain(k, sheet, 1080, 1920, RAIN);
+    const layout = k.stack(sheet, { gap: 18, align: "CENTER", name: "Layout" });
+    const top = k.stack(layout, { gap: 18, align: "CENTER", name: "Top" });
+    const sb = board(k, top, SIGN.w, SIGN.h, 0.84, "Sign board");
+    wash(k, sb, "red", { x: 400, y: 300, w: 1250, h: 900, alpha: 0.4, name: "Red wash" });
+    const centred = (text, cap, t, stretch = 1) => Math.round((SIGN.w - lettering(text, cap, { pad: Math.ceil(t), stretch }).w) / 2);
+    const last = neonWord(k, sb, "LAST", "ice", { cap: 104, t: 10, name: "Last", absolute: { x: centred("LAST", 104, 10), y: 0 }, strength: 0.8 });
+    const day = neonWord(k, sb, "24", "red", { cap: 292, t: 24, stretch: 1.34, name: "Day", absolute: { x: centred("24", 292, 24, 1.34), y: 136 } });
+    const hours = neonWord(k, sb, "HOURS", "amber", { cap: 96, t: 9, name: "Hours", absolute: { x: centred("HOURS", 96, 9), y: 496 } });
+    bulbArrow(k, sb, { w: 124, h: 104, dir: "right", bulb: 12, loopMs: DURATION, laps: 8, name: "Arrow left", absolute: { x: 0, y: 250 } });
+    bulbArrow(k, sb, { w: 124, h: 104, dir: "left", bulb: 12, loopMs: DURATION, laps: 8, name: "Arrow right", absolute: { x: SIGN.w - 124, y: 250 } });
+    const mid = k.stack(top, { gap: 18, align: "CENTER", name: "Mid" });
+    k.text(mid, "Half price ends\nat midnight.", { style: "Headline 76", color: "text", name: "Headline" });
+    const win = k.stack(mid, { height: WINDOW.h, fill: "card", radius: 10, clip: true, padding: { top: WINDOW.down + 18, right: 32, bottom: 18, left: 32 }, justify: "CENTER", stroke: { color: "steelEdge", width: 5, align: "INSIDE" }, name: "Window" });
+    const row = k.stack(win, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 16, name: "Clock row" });
+    const words = k.stack(row, { width: "HUG", gap: 4, name: "Clock words" });
+    k.text(words, "SHUTTER DROPS IN", { style: "Label 22", color: "cardMuted", autoWidth: true, name: "Clock label" });
+    k.text(words, `CODE ${DEAL.code}`, { style: "Label 22", color: "amber", autoWidth: true, name: "Code" });
+    k.text(row, "23:59:48", { style: "Clock 104", color: "amber", width: 500, align: "RIGHT", name: "Clock figure" });
+    sheen(k, win, WINDOW.w, WINDOW.h);
+    const roller = shutter(k, win, WINDOW.w, WINDOW.h);
+    k.patch(roller, { translateY: WINDOW.down - WINDOW.h });
+    const foot = k.stack(layout, { gap: 18, align: "CENTER", name: "Foot" });
+    const plate = lightbox(k, foot, { pad: [18, 24], radius: 10, width: "FILL", direction: "VERTICAL", name: "Offer plate", glow: 34 });
+    k.text(plate, `Every annual plan, ${DEAL.off}% off.`, { style: "Offer 34", color: "onAccent", name: "Offer" });
+    k.instance(foot, "Buy button", { Label: DEAL.link }, { name: "Button" });
+    const pool = puddle(k, sheet, day.w, day.h, day.paths, "red", { t: 24, name: "Day puddle", absolute: { x: Math.round(540 - day.w * 0.84 / 2), y: STREET + 40 }, squash: 0.62, opacity: 0.5, blur: 10 });
+    k.patch(pool, { scaleX: 0.84, scaleY: 0.84, anchorX: 0, anchorY: 0 });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    spark(k, [day.tubes[1]], [{ buzz: 3e3 }]);
+    last.tubes.forEach((id, i) => spark(k, [id], [{ buzz: 5600 + i * 140 }]));
+    spark(k, [hours.tubes[2]], [{ buzz: 1200 }]);
+    k.animate(pool, "opacity", [{ t: 0, v: 0.5 }, { t: 3050, v: 0.5 }, { t: 3200, v: 0.3 }, { t: 3900, v: 0.3 }, { t: 4050, v: 0.5 }]);
+    const up = WINDOW.down - WINDOW.h;
+    k.animate(roller, "translateY", [{ t: 0, v: up }, { t: 1900, v: up }, { t: 2e3, v: up + 14 }, { t: 2120, v: up + 4 }, { t: 2240, v: up + 10 }, { t: 2500, v: up + 10 }, { t: 6e3, v: up + 10 }, { t: 6600, v: up }]);
+    const night = (kit, id, street) => {
+      fitShopfront(kit, id, { street, seed: 8 });
+      fitRain(kit, id, { name: "Rain", seed: RAIN.seed, count: RAIN.count, len: RAIN.len });
+    };
+    const glaze = (kit, id, w) => {
+      patchAll(kit, id, "Window", { layoutSizingHorizontal: "FIXED", width: w });
+      patchAll(kit, id, "Sheen", { visible: false });
+      patchAll(kit, id, "Shutter", { x: 0, y: 0, scaleX: w / WINDOW.w, anchorX: 0 });
+    };
+    k.variants(sheet, feedVariants({ post: 44, portrait: 60 }, {
+      // The square: the sign beside the words and the window, the offer beside the button.
+      post: (kit, id) => {
+        night(kit, id, void 0);
+        patchAll(kit, id, "Street", { visible: false });
+        patchAll(kit, id, "Top", { layoutMode: "HORIZONTAL", itemSpacing: 28, counterAxisAlignItems: "CENTER" });
+        reboard(kit, id, "Sign board", 0.76);
+        patchAll(kit, id, "Mid", { itemSpacing: 28, counterAxisAlignItems: "MIN" });
+        restyle(kit, id, "Headline", "Headline 64");
+        glaze(kit, id, 396);
+        patchAll(kit, id, "Clock row", { layoutMode: "VERTICAL", itemSpacing: 6, counterAxisAlignItems: "MIN" });
+        restyle(kit, id, "Clock figure", "Clock 64");
+        patchAll(kit, id, "Clock figure", { width: 332, textAlign: "LEFT" });
+        patchAll(kit, id, "Code", { visible: false });
+        patchAll(kit, id, "Layout", { itemSpacing: 56 });
+        patchAll(kit, id, "Foot", { itemSpacing: 28 });
+        for (const n of ["Road light", "Day puddle"]) patchAll(kit, id, n, { visible: false });
+      },
+      portrait: (kit, id) => {
+        night(kit, id, 1262);
+        kit.patch(id, { padding: { top: 40, right: 60, bottom: 100, left: 60 } });
+        reboard(kit, id, "Sign board", 0.85);
+        glaze(kit, id, 960);
+        put(kit, id, "Road light", 540 - 550, 1262 - 60);
+        put(kit, id, "Day puddle", Math.round(540 - day.w * 0.84 / 2), 1276, { scaleY: 0.4 });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_neon_last_day_default
+};

package/dist/chunks/chunk-PU37DX65.js

@@ -0,0 +1,106 @@
+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,
+  WEEKS,
+  editorialBrand,
+  editorialType,
+  inkButton,
+  lockup,
+  paperGround
+} from "./chunk-3GMU2HH4.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-5SHX6DFE.js";
+import {
+  chart
+} from "./chunk-Y6DFTJFC.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/email/style-editorial-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Editorial SaaS email header";
+var DURATION = 6e3;
+var CARD = { w: 230, pad: 16 };
+var INNER = CARD.w - CARD.pad * 2;
+var CHART_H = 58;
+var cues = [
+  { layer: "Last point", preset: "pulse", at: 500, params: { duration: 600, amount: 0.5 } },
+  { layer: "Open button", preset: "pulse", at: 2400, params: { duration: 600, amount: 0.04 } },
+  { layer: "Last point", preset: "pulse", at: 3500, params: { duration: 600, amount: 0.5 } },
+  { layer: "Free figure", preset: "pulse", at: 4600, params: { duration: 600, amount: 0.05 } }
+];
+var style_editorial_header_default = defineTemplate({
+  id: "email-saas-style-editorial-header",
+  meta: {
+    name: `${NAME} (animated GIF)`,
+    description: "A 600 \xD7 300 animated header for a product-news email in the warm editorial look: a running head, the sender, a serif headline, the button and a small figure card of the feature are all on the first frame (for Outlook), then a glint runs along the meter, a scan crosses the chart and the button nudges, all returning to where they began. A seamless 6-second GIF",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "saas", "editorial", "serif", "magazine", "paper", "announcement", "feature", "newsletter", "publishing", "loop"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["announcement", "newsletter", "changelog"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues },
+  build() {
+    const k = new Kit(NAME, HEADER);
+    k.quantizeGeometry = true;
+    editorialBrand(k, { offer: "The meter\nis here.", when: "Three free articles, then a polite door. Publications that turned it on gained 39% more paid readers." });
+    const t = editorialType(k);
+    inkButton(k, "Button", { style: t.strong(14), label: "Turn it on", pad: [9, 14], arrow: 12 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 14, { top: 22, right: 26, bottom: 22, left: 30 }, "paper", "MIN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    paperGround(k, sheet, 300, [30, 314, 344, 574], { tooth: 0.035 });
+    const head = k.stack(sheet, { gap: 6, name: "Running head" });
+    k.rect(head, "FILL", 2, "text", { name: "Running head rule" });
+    const hr = k.stack(head, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Running head words" });
+    lockup(k, hr, { size: 14, style: t.serif(16) });
+    k.text(hr, `VERSION ${QUIRE.version} \xB7 ${QUIRE.season.toUpperCase()}`, { style: t.label(12), color: "onPaper", autoWidth: true, name: "Issue" });
+    const main = k.stack(sheet, { direction: "HORIZONTAL", gap: 30, align: "CENTER", name: "Main" });
+    const copy = k.stack(main, { gap: 10, name: "Copy" });
+    k.text(copy, "{{brand.offer}}", { style: t.display(40), color: "text", name: "Offer" });
+    k.text(copy, "{{brand.when}}", { style: t.serif(14), color: "text", name: "When" });
+    k.instance(copy, "Button", { Label: "Turn it on" }, { name: "Open button" });
+    const card = k.stack(main, { width: CARD.w, fill: "card", padding: CARD.pad, gap: 10, stroke: { color: "cardRule", width: 1, align: "INSIDE" }, effects: [{ type: "DROP_SHADOW", color: { r: 0, g: 0, b: 0, a: 0.12 }, offset: { x: 0, y: 10 }, blur: 24, spread: 0, visible: true }], name: "Card" });
+    k.text(card, "FIG. 1 \xB7 THE METER", { style: t.label(12), color: "cardMuted", name: "Card label" });
+    const row = k.stack(card, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Free row" });
+    k.text(row, String(QUIRE.free), { style: t.figure(46), color: "onCard", autoWidth: true, name: "Free figure" });
+    k.text(row, "free articles\na month", { style: t.serif(14), color: "onCard", name: "Free words" });
+    const pips = k.stack(card, { direction: "HORIZONTAL", width: INNER, height: 6, gap: 4, clip: true, name: "Pips" });
+    for (let i = 0; i < 5; i++) k.rect(pips, (INNER - 16) / 5, 6, i < QUIRE.free ? "mark" : "cardRule", { name: "Pip" });
+    const glint = k.rect(pips, 22, 6, "card", { name: "Glint", opacity: 0.8, absolute: { x: -22, y: 0 } });
+    k.behave(glint, "translateX", [{ kind: "spin", rate: (INNER + 22) * 2 / (DURATION / 1e3) }, { kind: "mod", period: INNER + 22 }]);
+    const well = k.stack(card, { width: INNER, height: CHART_H, fill: "well", clip: true, stroke: { color: "cardRule", width: 1, align: "INSIDE" }, name: "Chart" });
+    const c = chart(WEEKS.map((v) => v - 2300), INNER - 8, CHART_H, 2200);
+    k.vector(well, INNER - 8, CHART_H, [c.area], k.tint("mark", 0.12), { name: "Rate area", absolute: { x: 0, y: 0 } });
+    k.vector(well, INNER - 8, CHART_H, [c.line], [], { name: "Rate line", stroke: { color: "mark", width: 2, join: "ROUND" }, absolute: { x: 0, y: 0 } });
+    const end = c.pts[c.pts.length - 1];
+    k.ellipse(well, 8, "mark", { name: "Last point", absolute: { x: end.x - 4, y: end.y - 4 } });
+    const scan = k.rect(well, 1, CHART_H, "onCard", { name: "Scan", opacity: 0.3, absolute: { x: -1, y: 0 } });
+    k.behave(scan, "translateX", [{ kind: "spin", rate: (INNER + 1) * 2 / (DURATION / 1e3) }, { kind: "mod", period: INNER + 1 }]);
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  style_editorial_header_default
+};