@popcraft/kit 0.44.0 → 0.45.0

package/dist/chunks/chunk-HOCXXSOF.js

@@ -0,0 +1,161 @@
+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 {
+  body,
+  brandRow,
+  clear,
+  dress,
+  edge,
+  figure,
+  label,
+  redress,
+  shout,
+  shove,
+  slab,
+  slam,
+  spinSticker,
+  stamp,
+  sticker,
+  tag,
+  thump,
+  ticketStub,
+  tollBrand,
+  verticalPost
+} from "./chunk-HI7LV6FJ.js";
+import {
+  chart,
+  gridPaths
+} from "./chunk-Y6DFTJFC.js";
+import {
+  drawOn
+} from "./chunk-FUYBBHPV.js";
+import {
+  patchAll,
+  restyle
+} from "./chunk-T3XFQJUI.js";
+import {
+  pill,
+  postVariants
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/social/style-brutalist-milestone.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 7e3;
+var OUT = 6200;
+var TEETH = 16;
+var TOTAL = 1e5;
+var FRIDAYS = [1, 2.4, 4, 6.5, 10, 14, 19.5, 26, 34, 43, 54, 66, 81, 100];
+var PLOT = { width: 660, height: 300 };
+var LINE = chart(FRIDAYS, PLOT.width - 24, PLOT.height - 24, 104);
+var END = LINE.pts[LINE.pts.length - 1];
+var FACTS = ["1,912 SELLERS", "46 COUNTRIES", "$0 ON ADS"];
+var PARTS = ["Top row", "Label", "Figure", "Chart", "Sticker", "Foot"];
+var counts = [{ layer: "Figure", at: 300, duration: 2700, counter: { from: 0, to: TOTAL, prefix: "$", separator: "," }, ease: ease.inOut("cubic") }];
+var cues = [
+  shove("Top row", 0, "left", { duration: 260 }),
+  { layer: "Label", preset: "fade-in", at: 100, params: { duration: 100, ease: ease.hold } },
+  ...slam("Figure", 150, { distance: 300, shake: 14 }),
+  ...slam("Chart", 500, { distance: 260, shake: 10 }),
+  thump("Figure", 3e3, 0.06),
+  ...stamp("End mark", 3e3, { from: 2.4, rock: 12 }),
+  ...stamp("End tag", 3200, { rock: 8 }),
+  ...stamp("Fact", 3600, { gap: 260, from: 1.5, rock: 3 }),
+  ...stamp("Sticker", 4500, { from: 1.9, rock: 9 }),
+  shove("Foot", 4900, "left", { duration: 280 }),
+  clear(PARTS, OUT)
+];
+var style_brutalist_milestone_default = defineTemplate({
+  id: "motion-saas-style-brutalist-milestone",
+  meta: {
+    name: "Brutalist SaaS milestone post (animated)",
+    description: "A milestone that loops, in the neo-brutalist look: the figure slams on and counts up, a thick black line draws fourteen weeks across a ruled card and a marker and a tag are stamped where it ends, three plain facts are stamped down the side and a sticker last; then it all cuts off and starts again. Seven seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "milestone", "metric", "revenue", "build in public", "counter", "chart", "loop", "neo-brutalist", "brutalism", "bold", "post"],
+    platforms: ["x", "linkedin", "instagram", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["milestone", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Brutalist SaaS milestone post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    tollBrand(k, ["paper", "text", "onText", "primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
+    k.textStyle("Figure 196", figure(196));
+    k.textStyle("Figure 164", figure(164));
+    k.textStyle("Brand 40", shout(40, { leading: 1.1 }));
+    k.textStyle("Tag 22", label(22));
+    k.textStyle("Label 30", label(30));
+    k.textStyle("Fact 24", label(24));
+    k.textStyle("Axis 20", label(20));
+    k.textStyle("Sticker 52", shout(52, { center: true, leading: 0.95 }));
+    k.textStyle("Sticker 18", label(18, { center: true }));
+    k.textStyle("Foot 32", body(32, 700));
+    pill(k, "Fact", { fill: "text", ink: "onText", style: "Fact 24", label: FACTS[0], pad: [14, 14], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 18, { top: 104, right: 64, bottom: 110, left: 64 }, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    dress(k, sheet);
+    k.patch(ticketStub(k, sheet, { x: 190, y: 1540 }), { visible: false });
+    brandRow(k, sheet, { nameStyle: "Brand 40", tagStyle: "Tag 22", tag: "BUILT IN PUBLIC, WEEK 14" });
+    const head = k.stack(sheet, { gap: 0, name: "Head" });
+    k.text(head, "PAID OUT TO SELLERS", { style: "Label 30", color: "text", name: "Label" });
+    k.text(head, `$${TOTAL.toLocaleString("en-US")}`, { style: "Figure 196", color: "text", name: "Figure" });
+    const card = slab(k, sheet, { direction: "HORIZONTAL", fill: "card", shadow: 14, gap: 22, padding: 22, align: "CENTER", name: "Chart" });
+    const plot = k.stack(card, { width: PLOT.width, height: PLOT.height, fill: k.tint("accent", 0.22), stroke: edge(4), name: "Plot" });
+    k.vector(plot, PLOT.width, PLOT.height, gridPaths(PLOT.width, PLOT.height, 60, 2), "onCard", { name: "Plot grid", absolute: { x: 0, y: 0 }, opacity: 0.16 });
+    const line = k.vector(plot, PLOT.width - 24, PLOT.height - 24, [LINE.line], "onCard", { name: "Payout line", strokeWidth: 10, absolute: { x: 12, y: 12 } });
+    drawOn(k, line, 900, 2100);
+    k.rect(plot, 30, 30, "primary", { name: "End mark", stroke: edge(5), absolute: { x: 12 + END.x - 22, y: 12 + END.y - 6 } });
+    const endTag = tag(k, plot, "$19K LAST FRIDAY", { style: "Axis 20", fill: "primary", ink: "onPrimary", pad: [8, 12], rule: 4, shadow: 5, name: "End tag", absolute: { x: 360, y: 96 } });
+    k.patch(endTag, { rotation: -5 });
+    const facts = k.stack(card, { gap: 14, name: "Facts" });
+    for (const f of FACTS) k.instance(facts, "Fact", { Label: f }, { name: "Fact", width: "FILL" });
+    k.text(sheet, "Every Friday since July, straight to the people who made the files.", { style: "Foot 32", color: "text", name: "Foot" });
+    const badge = sticker(k, sheet, { size: 190, teeth: TEETH, fill: "primary", ink: "onPrimary", big: "ZERO\nADS", small: "ALL WORD OF MOUTH", bigStyle: "Sticker 52", smallStyle: "Sticker 18", tilt: 10, shadow: 9, absolute: { x: 104, y: 424 } });
+    spinSticker(k, badge, 2 * 360 / TEETH * 1e3 / DURATION);
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 64 }, {
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 130, right: 64, bottom: 136, left: 64 } });
+        patchAll(kit, id, "Sticker", { x: 104, y: 610 });
+        redress(kit, id);
+      },
+      vertical: (kit, id) => {
+        restyle(kit, id, "Figure", "Figure 164");
+        patchAll(kit, id, "Chart", { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN" });
+        patchAll(kit, id, "Facts", { layoutSizingHorizontal: "FILL" });
+        patchAll(kit, id, "Date tag", { visible: false });
+        verticalPost(kit, id, 36);
+        patchAll(kit, id, "Sticker", { x: 176, y: 640 });
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_brutalist_milestone_default
+};

package/dist/chunks/chunk-HOOSV2JI.js

@@ -0,0 +1,91 @@
+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 {
+  print,
+  seal,
+  ukiyoBrand
+} from "./chunk-M3SRMFET.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-5OTEBTMU.js";
+import {
+  pill
+} 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/social/ukiyo-e-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var PRINT = {
+  w: 1200,
+  h: 630,
+  horizon: 432,
+  front: 604,
+  u: 0.62,
+  loopMs: 6e3,
+  seed: 41,
+  still: true,
+  band: 78,
+  sun: { x: 662, y: 330, size: 118 },
+  mountain: { x: 680, w: 240, h: 100 },
+  mist: [{ x: 700, y: 352, w: 230 }, { x: 560, y: 392, w: 190 }, { x: 1010, y: 132, w: 260, tone: true }],
+  rows: 7,
+  behind: 3,
+  wave: { x: 690, y: 118, w: 640, flip: true },
+  boat: { x: 530, len: 220, flip: true },
+  birds: [{ x: 740, y: 160, size: 9 }, { x: 768, y: 144, size: 7 }, { x: 716, y: 138, size: 6 }],
+  pines: [{ x: 1210, y: -14, size: 300, flip: true }]
+};
+var ukiyo_e_link_preview_default = defineTemplate({
+  id: "social-ukiyo-e-link-preview",
+  meta: {
+    name: "Woodblock link preview",
+    description: "A 1200 \xD7 630 link preview drawn as a Japanese woodblock print, for a database, backup or calm-software product: the promise in a bold serif on bare paper under a wiped band of deep sky, the product in one mono line and the offer beside a vermilion seal, while a great wave breaks in claws of foam over a boat that keeps its line, the far mountain small under the curl",
+    category: "social",
+    tags: ["woodblock", "ukiyo-e", "japanese print", "great wave", "link preview", "open graph", "og image", "database", "backup", "reliability", "saas", "serif", "indigo"],
+    platforms: ["web", "x", "linkedin", "facebook"],
+    formats: ["og-image"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Woodblock link preview", preset("og-image"));
+    k.quantizeGeometry = true;
+    ukiyoBrand(k, { promise: "Steady in any sea." });
+    k.textStyle("Eyebrow 19", { size: 19, fontWeight: 700, letterSpacing: 3.6, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("Display 92", { ...SERIF, size: 92, fontWeight: 800, letterSpacing: -3.2, lineHeight: 88 });
+    k.textStyle("Facts 19", { ...MONO, size: 19, fontWeight: 500, lineHeight: 29 });
+    k.textStyle("Offer 20", { size: 20, fontWeight: 800, lineHeight: 26 });
+    pill(k, "Offer pill", { fill: "primary", ink: "onPrimary", style: "Offer 20", label: "Free until your first wave", pad: [13, 22], radius: 8 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 16, { top: 80, right: 600, bottom: 213, left: 68 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    print(k, sheet, PRINT);
+    k.text(sheet, "{{brand.name}} \xB7 managed Postgres", { style: "Eyebrow 19", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "{{brand.promise}}", { style: "Display 92", color: "text", name: "Headline" });
+    k.text(sheet, "Replicas before the crest. Writes kept twice.", { style: "Facts 19", color: "onPaper", name: "Facts" });
+    const offer = k.stack(sheet, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Offer" });
+    seal(k, offer, 52);
+    k.instance(offer, "Offer pill", { Label: "Free until your first wave" }, { name: "Offer label" });
+    return k.finish();
+  }
+});
+
+export {
+  ukiyo_e_link_preview_default
+};

package/dist/chunks/chunk-HORDRCZ2.js

@@ -0,0 +1,358 @@
+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 {
+  LOOP,
+  addOns,
+  artBand,
+  closing,
+  countdown,
+  disc,
+  drain,
+  faq,
+  features,
+  hero,
+  ladder,
+  legal,
+  lineup,
+  partners,
+  parts,
+  presaleResponsive,
+  shape,
+  signup,
+  steps,
+  stockCount,
+  sway,
+  ticking,
+  travel
+} from "./chunk-CH5XNXQX.js";
+import {
+  dots
+} from "./chunk-5M74IAAA.js";
+import {
+  burstPath
+} from "./chunk-Y6DFTJFC.js";
+import {
+  MONO
+} from "./chunk-5OTEBTMU.js";
+import {
+  typeScale
+} from "./chunk-QSBEDW52.js";
+import {
+  nav,
+  page
+} from "./chunk-IPGCJWVL.js";
+import {
+  grain,
+  hardShadow
+} from "./chunk-PCZTQVV6.js";
+import {
+  box,
+  poly,
+  r3
+} from "./chunk-YKX2GS6X.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/web/festival-presale-street.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Festival presale page: hip-hop and street culture";
+var CLOCK = { days: "06", hours: "19", minutes: "08", from: 54, to: 48 };
+var STOCK = { label: "Almost gone", from: 1206, left: 1170, total: 15e3 };
+var AW = 1200;
+var AH = 860;
+var HERO = {
+  artW: AW,
+  artH: AH,
+  h: { desktop: 860, laptop: 830, tablet: 720, mobile: 852 },
+  fit: { laptop: { s: 0.966, ax: 1200, ay: 860, hx: 1120, hy: 830 }, tablet: { s: 0.7, ax: 1200, ay: 860, hx: 680, hy: 760 }, mobile: { s: 0.4, ax: 955, ay: 860, hx: 200, hy: 852 } },
+  pad: { tablet: { top: 36, right: 32, bottom: 60, left: 32 }, mobile: { top: 22, right: 16, bottom: 270, left: 16 } }
+};
+var TAPE = "PRESALE OPENS 4 MARCH \xB7";
+var CELL = 256;
+var STEPS = [
+  ["By 1 March", "Register", "Drop your email by Monday 1 March, 23:59. One sign-up each. Costs nothing."],
+  ["3 March", "Get your code", "Wednesday 3 March: your own code lands in your inbox. One code, one order, up to four tickets."],
+  ["4 March \xB7 10:00", "Presale goes live", "Thursday 4 March at ten. The\xA0queue opens at 9:30 and your spot in it is picked at random."],
+  ["12 March", "General sale", "Anything left goes on general sale on Friday 12 March at ten, at whatever drop it has reached."]
+];
+var TIERS = [
+  { tag: "Day ones", name: "Weekend ticket", price: "\xA395", note: "6,000 tickets for everyone who came in 2026. Gone in under an hour.", status: "sold", chip: "Sold out" },
+  { tag: "Drop 1", name: "Weekend ticket", price: "\xA3115", note: "Live now for the mailing list. Whatever is left goes to presale codes on 4 March.", status: "selling", chip: "Live now" },
+  { tag: "Drop 2", name: "Weekend ticket", price: "\xA3135", note: "20,000 tickets held for the presale. Opens the second drop 1 is gone.", status: "next", chip: "Presale \xB7 4 March" },
+  { tag: "Drop 3", name: "Weekend ticket", price: "\xA3155", note: "The last 9,000, general sale only. Day tickets land with it, at \xA385.", status: "later", chip: "General \xB7 12 March" }
+];
+var EXTRAS = [
+  ["Backyard VIP", "+ \xA390", "A raised yard at the main stage with its own bars and loos, and a fast lane at the gate."],
+  ["Afterparty", "+ \xA322", "Both nights at The Boiler House, eleven till\xA0four. 2,000 wristbands and not one more."],
+  ["Locker + charge", "+ \xA314", "A locker with a charging point inside it, yours for the whole weekend."]
+];
+var BILLS = [
+  { label: "Sat 21 Aug", note: "Gates 12:00", heads: ["Mercy Lane", "K. Obi"], acts: ["Tunde Vex", "Asha Reign", "Northside Cartel", "Dozen Dialect"], more: ["DJ Halfcrown", "Pavement Poets", "Remi Staxx", "The 49 Bus Cypher", "Juno Blk"] },
+  { label: "Sun 22 Aug", note: "Gates 12:00", heads: ["Zadie Flex", "Brick City Trio"], acts: ["Mali Kane", "Echo Sway", "Quiet Lois", "Kwame Static"], more: ["Crate Diggers Union", "Young Halo", "Estate Sounds Choir", "DJ Mango Chutney"] }
+];
+var ON_SITE = [
+  ["Three stages", "The Gasholder, the Arches and the Loading Bay. Thirty-eight acts, and no two headliners at once."],
+  ["The cypher ring", "Open mic and battles all day in the round. Sign up at the ring; the crowd picks who stays."],
+  ["Wall of fame", "Two hundred metres of wall painted live over the weekend by forty writers. It stays up all year."],
+  ["Court and bowl", "A three-a-side tournament and a skate bowl with open sessions\xA0between the heats. Bring your deck."],
+  ["The food yard", "Fifty traders from the neighbourhood: jerk, suya, bao, patties, doubles. Free water everywhere."],
+  ["Access", "Raised platforms at all three stages, step-free routes, BSL at the Gasholder and a free PA ticket."]
+];
+var ROUTES = [
+  ["Train", "Eastmere Gasworks station is a four-minute walk from the gate. Extra trains run until 00:30 both nights.", "Every 6 minutes"],
+  ["Bus", "Routes 49, 86 and N86 stop at the yard. The\xA0N86 runs all night for the afterparty crowd.", "24 hours"],
+  ["Bike", "Eight hundred guarded spaces at the north gate, and a mechanic on site on both days.", "Free"],
+  ["Car", "Don\u2019t. There is nowhere to park and the roads round the yard are shut. Blue Badge bays can be booked.", "Book access bays ahead"]
+];
+var STAYS = [
+  ["Coach + ticket", "Return coaches from twelve cities that leave after the last act, sold with the ticket.", "From \xA324"],
+  ["Hostel beds", "Six hundred beds held at three hostels within two stops of the yard.", "From \xA329"],
+  ["Hotel rooms", "Festival rates at partner hotels in Eastmere until 1 June.", "From \xA379"]
+];
+var QUESTIONS = [
+  ["How many tickets can I get?", "Four with a presale code, six in the general\xA0sale. Every ticket has a name on it, and you can change the name for free until 1 August."],
+  ["Does a code mean a ticket?", "No. It gets you into the presale queue. More codes go out than there are tickets, so be there at ten."],
+  ["Can I sell my ticket?", "Only on the official resale, for what you paid. Tickets from anywhere else get cancelled and will not scan."],
+  ["How old do I have to be?", "Sixteen. If you are 16 or 17 you need someone over 21 with you. The afterparty is 18 and over. Bring ID."],
+  ["What if I cannot make it?", "You have 14 days from buying to get a full\xA0refund. After that, list it on the official resale."],
+  ["Is it accessible?", "Yes. Book what you need with your ticket: platforms, step-free entry, BSL and a free ticket for a PA."]
+];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Hero kicker", preset: "drop-in", at: 0, params: { duration: 400 } },
+  { layer: "Hero name", preset: "scale-in", at: 100, params: { duration: 500 } },
+  { layer: "Tape", preset: "wipe-in", at: 450, params: { duration: 500 } },
+  { layer: "Hero date", preset: "rise-in", at: 700, params: { duration: 500 } },
+  { layer: "Hero gate", preset: "rise-in", at: 850, params: { duration: 500 } },
+  { layer: "Sticker", preset: "pop-in", at: 1100, params: { duration: 350 }, stagger: { delay: 260 } },
+  { layer: "Step", preset: "rise-in", at: 1200, params: { duration: 450 }, stagger: { delay: 140 } },
+  { layer: "Act", preset: "rise-in", at: 1500, params: { duration: 400 }, stagger: { delay: 220 } }
+];
+var counts = [ticking("Hero", CLOCK), ticking("Band", CLOCK), stockCount("Tier stock", STOCK)];
+function yardArt(k, art, s) {
+  dots(k, art, { size: 620, role: "gold", dot: 15, screen: 30, angle: 110, from: 0.2, to: 0.95, name: "Halftone sun", absolute: { x: 610, y: 210 }, over: false });
+  const cab = (x, y, w, h, cones) => {
+    k.rect(art, w, h, "ink", { name: "Cabinet", radius: 12, stroke: { color: "white", width: 5, align: "OUTSIDE" }, effects: [hardShadow(k, "ink", 10, 10)], absolute: { x, y } });
+    shape(k, art, [box(x + 12, y + 12, w - 24, h - 24)], "steel", { name: "Face plate", opacity: 0.35 });
+    shape(k, art, [[x + 22, y + 22], [x + w - 22, y + 22], [x + 22, y + h - 22], [x + w - 22, y + h - 22]].map(([cx, cy]) => disc(cx, cy, 5)), "white", { name: "Screws", opacity: 0.8 });
+    cones.forEach(([cx, cy, r], i) => {
+      shape(k, art, [disc(x + cx, y + cy, r)], "steel", { name: "Cone ring" });
+      const cone = shape(k, art, [disc(x + cx, y + cy, r * 0.84)], "ink", { name: "Cone" });
+      const cap = shape(k, art, [disc(x + cx, y + cy, r * 0.36)], "red", { name: "Dust cap" });
+      for (const id of [cone, cap]) for (const axis of ["scaleX", "scaleY"]) sway(k, id, axis, id === cap ? 0.16 : 0.05, 12, i / 2);
+      shape(k, art, [{ closed: false, points: Array.from({ length: 9 }, (_, j) => {
+        const a = (200 + j * 9) * Math.PI / 180;
+        return { x: r3(x + cx + r * 0.62 * Math.cos(a)), y: r3(y + cy + r * 0.62 * Math.sin(a)) };
+      }) }], "white", { name: "Cone shine", strokeWidth: 4, opacity: 0.5 });
+    });
+  };
+  cab(770, 500, 370, 300, [[185, 150, 118]]);
+  cab(800, 322, 310, 172, [[86, 86, 62], [224, 86, 62]]);
+  cab(836, 214, 238, 102, [[60, 51, 30], [178, 51, 30]]);
+  [0, 1, 2].forEach((i) => {
+    const x = 730 - i * 34, id = shape(k, art, [{ closed: false, points: [{ x, y: 600 }, { x: x - 22, y: 650 }, { x, y: 700 }] }], "ink", { name: "Sound", strokeWidth: 9 });
+    sway(k, id, "opacity", 0.5, 6, -i / 3);
+    k.patch(id, { opacity: 0.5 });
+  });
+  const sticker = (x, y, w, h, rot, fill, radius, lines) => {
+    const id = k.stack(art, { width: w, height: h, align: "CENTER", justify: "CENTER", fill, radius, stroke: { color: "white", width: 6, align: "OUTSIDE" }, effects: [hardShadow(k, "ink", 5, 6, 0.9)], absolute: { x, y }, name: "Sticker" });
+    k.patch(id, { rotation: rot });
+    for (const [text, style, ink] of lines) k.text(id, text, { style: s(style), color: ink, align: "CENTER", name: "Sticker words" });
+    return id;
+  };
+  sticker(1010, 150, 150, 150, 10, "red", 75, [["50K", "Sticker 40", "ink"], ["A DAY", "Sticker 14", "ink"]]);
+  sticker(640, 760, 210, 58, -5, "white", 6, [["EASTMERE \xB7 EST. 2019", "Sticker 14", "ink"]]);
+  sticker(632, 372, 138, 84, -9, "blue", 14, [["2 DAYS", "Sticker 26", "white"], ["3 STAGES", "Sticker 14", "white"]]);
+  const star = k.stack(art, { width: 120, height: 120, align: "CENTER", justify: "CENTER", absolute: { x: 1086, y: 404 }, name: "Sticker" });
+  const burst = k.vector(star, 120, 120, [burstPath(120, 12, 0.24)], "white", { name: "Burst", absolute: { x: 0, y: 0 }, effects: [hardShadow(k, "ink", 4, 5, 0.9)] });
+  k.behave(burst, "rotation", [{ kind: "sine", amp: 8, freq: 1 / 3 }]);
+  k.text(star, "16+", { style: s("Sticker 26"), color: "ink", align: "CENTER", name: "Sticker words" });
+  const tape = k.rect(art, 150, 34, k.tint("white", 0.82), { name: "Masking tape", absolute: { x: 742, y: 300 } });
+  k.patch(tape, { rotation: -32 });
+  const stripes = [];
+  for (let x = -340; x < 1560; x += 56) stripes.push(poly([[x, AH], [x + 28, AH - 30], [x + 56, AH - 30], [x + 28, AH]]));
+  shape(k, art, [box(-340, AH - 30, 1900, 30)], "white", { name: "Hazard ground" });
+  shape(k, art, stripes, "ink", { name: "Hazard stripes" });
+  k.patch(art, { effects: grain(0.08, 2, 31) });
+}
+function cornerYard(k, panel) {
+  const f = k.frame(panel, { x: AW - 420, y: 0, width: 420, height: 420 }, { name: "Panel art right" });
+  dots(k, f, { size: 520, role: "gold", dot: 15, screen: 30, angle: 110, from: 0.2, to: 0.95, name: "Halftone sun", absolute: { x: 150, y: -230 }, over: false });
+  const g = k.frame(panel, { x: 0, y: 0, width: AW, height: 30 }, { name: "Panel art" });
+  const stripes = [];
+  for (let x = -340; x < 1560; x += 56) stripes.push(poly([[x, 30], [x + 28, 0], [x + 56, 0], [x + 28, 30]]));
+  shape(k, g, [box(-340, 0, 1900, 30)], "white", { name: "Hazard ground" });
+  shape(k, g, stripes, "ink", { name: "Hazard stripes" });
+}
+var festival_presale_street_default = defineTemplate({
+  id: "web-festival-presale-street",
+  meta: {
+    name: NAME,
+    description: "A ticket presale landing page for a large hip-hop and street culture festival. The hero is a fly poster on yellow: the name in black capitals the width of the sheet, a strip of black tape whose words run across it, a stack of speakers whose cones pump in front of a halftone sun, stickers that slap on and a hazard stripe, with a black gate that counts down to the presale (its seconds tick) and takes the registration. Then the presale in four steps, the drops as ticket stubs with the day-one tickets sold out and drop one almost gone, VIP, the afterparty and a payment plan, the bill in capitals by day, what is in the yard, travel and stay, the questions, partners and the legal lines. Yellow, black, white and red, desktop to phone",
+    category: "web",
+    tags: ["festival", "presale", "tickets", "hip-hop", "street", "grime", "stickers", "tape", "bold", "poster", "countdown", "sign-up", "ticket tiers", "line-up", "landing page", "website", "animation", "responsive", "event"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["presale", "event", "countdown", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F3F0E7", text: "#0D0D0D", onPaper: "#4A4A45", primary: "#FFD60A", onPrimary: "#0D0D0D", accent: "#FF3B1F", onAccent: "#0D0D0D", card: "#FFFFFF", onCard: "#0D0D0D", cardMuted: "#55554F", panel: "#0D0D0D", onPanel: "#F3F0E7", panelMuted: "#C4C1B5", chip: "#E6E2D5", onChip: "#0D0D0D", stage: "#FFD60A", onStage: "#0D0D0D", stageMuted: "#3A3200" },
+      { name: "KERBSIDE" }
+    );
+    k.palette({ ink: "#0D0D0D", white: "#FFFFFF", red: "#FF3B1F", blue: "#2447FF", gold: "#F0B400", steel: "#8D8D86", tapeInk: "#FFD60A" });
+    const up = { fontWeight: 900, textCase: "UPPER" };
+    const s = typeScale(k, {
+      Nav: { ...MONO, size: 13, fontWeight: 700, letterSpacing: 0.6, lineHeight: 20, textCase: "UPPER" },
+      Brand: { size: 22, ...up, letterSpacing: -0.6, lineHeight: 28 },
+      Button: { size: 15, ...up, letterSpacing: 0.4, lineHeight: 22 },
+      Kicker: { ...MONO, size: 13, fontWeight: 800, letterSpacing: 1.2, lineHeight: 18, textCase: "UPPER" },
+      Section: { size: 84, ...up, letterSpacing: -4, lineHeight: 78 },
+      "Section md": { size: 58, ...up, letterSpacing: -2.6, lineHeight: 56 },
+      "Section sm": { size: 40, ...up, letterSpacing: -1.6, lineHeight: 40 },
+      Aside: { size: 18, fontWeight: 500, lineHeight: 27 },
+      "Aside sm": { size: 16, fontWeight: 500, lineHeight: 25 },
+      Body: { size: 16, fontWeight: 400, lineHeight: 25 },
+      Small: { size: 14, fontWeight: 500, lineHeight: 21 },
+      Label: { ...MONO, size: 12, fontWeight: 800, letterSpacing: 1, lineHeight: 16, textCase: "UPPER" },
+      Legal: { size: 13, fontWeight: 400, lineHeight: 20 },
+      Clock: { size: 56, fontWeight: 900, letterSpacing: -2.4, lineHeight: 56, fontFeatures: { tnum: 1 } },
+      "Clock sm": { size: 36, fontWeight: 900, letterSpacing: -1.4, lineHeight: 38, fontFeatures: { tnum: 1 } },
+      Unit: { ...MONO, size: 12, fontWeight: 800, letterSpacing: 1, lineHeight: 16, textCase: "UPPER" },
+      Field: { size: 16, fontWeight: 600, lineHeight: 24 },
+      "Step no": { size: 60, ...up, letterSpacing: -3, lineHeight: 54 },
+      "Step title": { size: 22, ...up, letterSpacing: -0.6, lineHeight: 26 },
+      Tier: { size: 26, ...up, letterSpacing: -0.8, lineHeight: 30 },
+      Price: { size: 54, fontWeight: 900, letterSpacing: -2.4, lineHeight: 54, fontFeatures: { tnum: 1 } },
+      "Price sm": { size: 44, fontWeight: 900, letterSpacing: -1.8, lineHeight: 46, fontFeatures: { tnum: 1 } },
+      Status: { ...MONO, size: 12, fontWeight: 800, letterSpacing: 0.8, lineHeight: 16, textCase: "UPPER" },
+      "Act 1": { size: 112, ...up, letterSpacing: -5.6, lineHeight: 100 },
+      "Act 1 md": { size: 76, ...up, letterSpacing: -3.6, lineHeight: 70 },
+      "Act 1 sm": { size: 44, ...up, letterSpacing: -1.8, lineHeight: 44 },
+      "Act 2": { size: 34, ...up, letterSpacing: -1.2, lineHeight: 40 },
+      "Act 2 sm": { size: 22, ...up, letterSpacing: -0.6, lineHeight: 28 },
+      "Act 3": { ...MONO, size: 15, fontWeight: 700, lineHeight: 26, textCase: "UPPER" },
+      Q: { size: 20, fontWeight: 800, letterSpacing: -0.4, lineHeight: 26 },
+      Partner: { size: 16, ...up, letterSpacing: 0.2, lineHeight: 20 },
+      "Name 206": { size: 232, ...up, letterSpacing: -8, lineHeight: 196 },
+      "Name 190": { size: 214, ...up, letterSpacing: -7.5, lineHeight: 182 },
+      "Name 112": { size: 126, ...up, letterSpacing: -4.5, lineHeight: 108 },
+      "Name 60": { size: 62, ...up, letterSpacing: -2.2, lineHeight: 56 },
+      "Date 34": { size: 34, ...up, letterSpacing: -1.2, lineHeight: 38 },
+      "Date 22": { size: 22, ...up, letterSpacing: -0.6, lineHeight: 26 },
+      "Tape 16": { ...MONO, size: 15, fontWeight: 800, letterSpacing: 1, lineHeight: 22, textCase: "UPPER" },
+      "Sticker 40": { size: 44, ...up, letterSpacing: -2, lineHeight: 42 },
+      "Sticker 26": { size: 26, ...up, letterSpacing: -0.8, lineHeight: 28 },
+      "Sticker 14": { ...MONO, size: 13, fontWeight: 800, letterSpacing: 0.6, lineHeight: 16, textCase: "UPPER" }
+    });
+    const L = {
+      s,
+      upper: ["Kicker", "Section", "Label", "Unit", "Step title", "Tier", "Status", "Act 1", "Act 2", "Act 3", "Partner"],
+      radius: 0,
+      pad: 26,
+      rule: 3,
+      chipRadius: 0,
+      card: { stroke: { color: "text", width: 3, align: "INSIDE" }, effects: [hardShadow(k, "ink", 7, 7)] },
+      // A slab under every section head, like a strip of tape.
+      flourish: (kit, h2) => {
+        kit.rect(h2, 150, 16, "primary", { name: "Slab", stroke: { color: "text", width: 3, align: "INSIDE" } });
+      },
+      mark: (kit, f, i) => {
+        kit.vector(f, 40, 40, [burstPath(40, 8 + i % 3 * 4, 0.26)], ["accent", "primary", "panel"][i % 3], { name: "Feature mark", stroke: { color: "text", width: 2.5 } });
+      }
+    };
+    parts(k, L, { pad: [15, 22] });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 112, top: 28 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    nav(k, sheet, { links: ["Presale", "Tickets", "Line-up", "Get there"], cta: "GET A CODE", style: s("Nav"), brandStyle: s("Brand") });
+    const { hero: h, art } = hero(k, sheet, HERO, { gap: 16, padding: { top: 40, right: 48, bottom: 64, left: 48 }, stroke: { color: "ink", width: 4, align: "INSIDE" } });
+    yardArt(k, art, s);
+    const kick = k.stack(h, { direction: "HORIZONTAL", width: "HUG", fill: "ink", padding: { top: 6, right: 12, bottom: 6, left: 12 }, name: "Hero kicker" });
+    k.text(kick, "TWO DAYS OF HIP-HOP, GRIME AND STREET CULTURE", { style: s("Kicker"), color: "tapeInk", autoWidth: true, name: "Hero kicker text" });
+    k.text(h, "{{brand.name}}", { style: s("Name 206"), color: "onStage", name: "Hero name" });
+    const tape = k.stack(h, { direction: "HORIZONTAL", width: CELL * 4, height: 42, align: "CENTER", justify: "CENTER", fill: "ink", clip: true, name: "Tape" });
+    k.patch(tape, { rotation: -1.2 });
+    const run = k.stack(tape, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", name: "Tape run" });
+    for (let i = 0; i < 5; i++) {
+      const cell = k.stack(run, { direction: "HORIZONTAL", width: CELL, justify: "CENTER", name: "Tape cell" });
+      k.text(cell, TAPE, { style: s("Tape 16"), color: "tapeInk", autoWidth: true, name: "Tape words" });
+    }
+    k.patch(run, { translateX: -CELL / 2 });
+    k.behave(run, "translateX", [{ kind: "spin", rate: r3(-CELL * 1e3 / LOOP) }, { kind: "mod", period: CELL, offset: -CELL / 2 }]);
+    const copy = k.stack(h, { width: 560, gap: 16, padding: { top: 14, right: 0, bottom: 0, left: 0 }, name: "Hero copy" });
+    k.text(copy, "21 \u2013 22 AUGUST 2027 \xB7 GASWORKS YARD, EASTMERE", { style: s("Date 34"), color: "onStage", name: "Hero date" });
+    const gate = k.stack(copy, { gap: 12, fill: "panel", padding: 22, effects: [hardShadow(k, "white", 8, 8)], name: "Hero gate" });
+    k.text(gate, "PRESALE OPENS IN", { style: s("Kicker"), color: "panelMuted", name: "Gate label" });
+    countdown(k, gate, L, { prefix: "Hero", clock: CLOCK, fill: "card", ink: "onCard", muted: "cardMuted", gap: 8, pad: [10, 4] });
+    signup(k, gate, L, { name: "Hero signup", placeholder: "you@example.com", cta: "GET A CODE" });
+    k.text(gate, "Register by Monday 1 March. One code each, up to four tickets. No code, no presale.", { style: s("Small"), color: "panelMuted", name: "Gate note" });
+    steps(k, sheet, L, { kicker: "01 / The presale", title: "How it works", aside: "Four dates. Miss the first one and you are in the general sale with everybody else, two drops dearer.", items: STEPS, boxed: true });
+    const tix = ladder(k, sheet, L, { kicker: "02 / Tickets", title: "Four drops. Prices only go up.", aside: "Every drop is a fixed number of weekend tickets. When it is gone, the next one opens, at the next price.", tiers: TIERS, variant: "stubs", stock: STOCK });
+    addOns(k, tix, L, { items: EXTRAS, plan: ["Split it in three", "\xA335 today, then two payments on 1 May and 1 July. No interest, no fee. Miss a\xA0payment and the ticket goes back on sale.", "\xA335 down"] });
+    lineup(k, sheet, L, { kicker: "03 / Line-up, first wave", title: "Who is on", aside: "Second wave on 6 April, with the Arches and Loading Bay line-ups. Stage times in July.", bills: BILLS, variant: "poster", tba: "+ 20 more names on 6 April", sep: "/", panel: { radius: 0, pad: { top: 92, right: 56, bottom: 60, left: 56 }, stroke: { color: "ink", width: 4, align: "INSIDE" }, effects: [hardShadow(k, "ink", 10, 10)], label: "dead", art: cornerYard } });
+    artBand(k, sheet, { w: AW, h: 200, focus: 700, radius: 0, draw: (a) => yardArt(k, a, s) });
+    features(k, sheet, L, { kicker: "04 / In the yard", title: "More than a line-up", items: ON_SITE, boxed: true });
+    travel(k, sheet, L, { kicker: "05 / Get there", title: "Leave the car at home", aside: "The yard is in zone 2, four minutes from the station. Nobody has ever found a parking space.", routes: ROUTES, stays: STAYS });
+    artBand(k, sheet, { w: AW, h: 160, focus: 380, radius: 0, name: "Art band 2", draw: (a) => yardArt(k, a, s) });
+    faq(k, sheet, L, { kicker: "06 / Questions", title: "Before you register", items: QUESTIONS });
+    partners(k, sheet, L, { label: "Partners", names: ["Eastmere Council", "Static FM", "Hightop", "Gasworks Brewing", "Loop Transit", "Crate Records"] });
+    closing(k, sheet, L, { title: "No code, no drop two.", text: "Register by Monday 1 March, 23:59. Codes go out on the 3rd and the presale goes live on Thursday 4 March at ten.", clock: CLOCK, placeholder: "you@example.com", cta: "GET A CODE", note: "Free to register. One code each.", radius: 0, stroke: { color: "text", width: 4, align: "INSIDE" }, effects: [hardShadow(k, "ink", 10, 10)] });
+    legal(k, sheet, L, {
+      links: ["Ticket terms", "Official resale", "Access", "Privacy", "Contact"],
+      lines: ["\xA9 2026 Kerbside Festival Ltd, Eastmere. Tickets are sold under the ticket terms. Every ticket is named; bring ID that matches it. 16 and over.", "Resale is only valid through the official resale, at the price paid. Tickets bought anywhere else are cancelled. Line-up may change."]
+    });
+    drain(k, sheet, "Tier stock", STOCK);
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    presaleResponsive(k, sheet, L, HERO, {
+      restyle: { "Name 206": { laptop: "Name 190", tablet: "Name 112", mobile: "Name 60" }, "Date 34": { tablet: "Date 22", mobile: "Date 22" }, Clock: { tablet: "Clock sm", mobile: "Clock sm" } },
+      hide: { mobile: ["Gate note"] },
+      tweak: (kit, id, size) => {
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        const cells = size === "laptop" ? 4 : size === "tablet" ? 2 : 1;
+        each("Tape", { layoutSizingHorizontal: "FIXED", width: CELL * cells });
+        for (const run2 of kit.named(id, "Tape run")) kit.node(run2).childIds.forEach((c, i) => {
+          if (i > cells) kit.patch(c, { visible: false });
+        });
+        if (size === "tablet") each("Hero copy", { width: 380 });
+        if (size === "mobile") {
+          each("Hero copy", { layoutSizingHorizontal: "FILL", itemSpacing: 12, padding: { top: 6, right: 0, bottom: 0, left: 0 } });
+          each("Hero gate", { padding: { top: 16, right: 16, bottom: 16, left: 16 } });
+          each("Hero kicker", { layoutSizingHorizontal: "FILL" });
+          each("Hero kicker text", { layoutSizingHorizontal: "FILL", textAutoResize: "HEIGHT" });
+          for (const n of kit.named(id, "Sticker")) {
+            const q = kit.node(n);
+            if (q.x === 1010 && q.y === 150) kit.patch(n, { x: 548, y: 520 });
+          }
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  festival_presale_street_default
+};