@popcraft/kit 0.24.3 → 0.26.0

package/dist/chunks/chunk-BHV6LKWO.js

@@ -0,0 +1,229 @@
+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 {
+  BUNKER,
+  COIN_FACE,
+  INVADER,
+  OCTO,
+  SHIP,
+  SQUID,
+  TROPHY,
+  arcadeBrand,
+  backdrop,
+  hardShadow,
+  march,
+  overlay,
+  refit,
+  sprite,
+  spriteInks
+} from "./chunk-SHBMEL5W.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  BREAKPOINTS,
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-YKXCPYWJ.js";
+import {
+  blink,
+  cutOn
+} from "./chunk-PMVMC75G.js";
+import {
+  bloom
+} from "./chunk-HVK5T4I5.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/arcade-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SCORES = [
+  ["1ST", "LOOPCAST", "$2.1M BILLED"],
+  ["2ND", "TIDEWATER", "1.2B API CALLS"],
+  ["3RD", "MAPLEFORMS", "48K SEATS"],
+  ["4TH", "BRIGHTDESK", "310K MINUTES"],
+  ["5TH", "YOUR NAME HERE", "INSERT COIN"]
+];
+var CABINET = 520;
+var BEZEL = 14;
+var counts = [
+  { layer: "Screen score", at: 400, duration: 1600, counter: { from: 0, to: 4800, prefix: "MRR $", separator: "," }, tick: 100 }
+];
+var cues = [
+  { layer: "Eyebrow text", preset: "typewriter", at: 100, params: { duration: 600 } },
+  cutOn("Headline", 500),
+  cutOn("Lead", 700),
+  cutOn(["CTA primary", "CTA quiet"], 900, 150),
+  cutOn("Proof", 1300),
+  cutOn("Score", 1500, 120),
+  blink("Coin prompt", 2200, 1e3),
+  blink("Coin prompt", 3200, 800)
+];
+var arcade_landing_default = defineTemplate({
+  id: "web-arcade-landing",
+  meta: {
+    name: "Arcade landing page",
+    description: "A SaaS landing page as an arcade cabinet: hero copy that cuts on beside a cabinet whose swarm marches over a starfield, whose MRR ticks like a score and whose INSERT COIN blinks; a parade of invaders, a HIGH SCORES table of customers on a pixel shadow and a closing coin band. Desktop, laptop, tablet and phone",
+    category: "web",
+    tags: ["arcade", "8-bit", "pixel art", "retro", "landing page", "hero", "saas", "animation", "leaderboard", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("Arcade landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    arcadeBrand(k);
+    k.textStyle("Nav 15", { size: 15, fontWeight: 600, letterSpacing: 1, lineHeight: 24, textCase: "UPPER", ...MONO });
+    k.textStyle("Brand 20", { size: 20, fontWeight: 800, lineHeight: 28, textCase: "UPPER", ...MONO });
+    k.textStyle("Button 15", { size: 15, fontWeight: 800, letterSpacing: 1, lineHeight: 24, textCase: "UPPER", ...MONO });
+    k.textStyle("Eyebrow 14", { size: 14, fontWeight: 800, letterSpacing: 2, lineHeight: 20, ...MONO });
+    k.textStyle("Display 64", { size: 64, fontWeight: 800, letterSpacing: -3, lineHeight: 68, ...MONO });
+    k.textStyle("Display 52", { size: 52, fontWeight: 800, letterSpacing: -2.4, lineHeight: 56, ...MONO });
+    k.textStyle("Display 36", { size: 36, fontWeight: 800, letterSpacing: -1.5, lineHeight: 40, ...MONO });
+    k.textStyle("Lead 19", { size: 19, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Proof 14", { size: 14, fontWeight: 600, letterSpacing: 1, lineHeight: 20, textCase: "UPPER", ...MONO });
+    k.textStyle("Screen 15", { size: 15, fontWeight: 800, letterSpacing: 1, lineHeight: 20, textCase: "UPPER", ...MONO });
+    k.textStyle("Screen 26", { size: 26, fontWeight: 800, letterSpacing: 3, lineHeight: 32, textAlign: "CENTER", ...MONO });
+    k.textStyle("Screen 13", { size: 13, fontWeight: 700, letterSpacing: 1, lineHeight: 18, textAlign: "CENTER", ...MONO });
+    k.textStyle("Section 44", { size: 44, fontWeight: 800, letterSpacing: -1.5, lineHeight: 50, ...MONO });
+    k.textStyle("Section 28", { size: 28, fontWeight: 800, letterSpacing: -0.5, lineHeight: 34, ...MONO });
+    k.textStyle("Row 20", { size: 20, fontWeight: 700, letterSpacing: 1, lineHeight: 28, ...MONO });
+    k.textStyle("Row 14", { size: 14, fontWeight: 700, lineHeight: 20, ...MONO });
+    buttons(k, { style: "Button 15", pad: [14, 22], radius: 0 });
+    k.component("Button on band", { direction: "HORIZONTAL", width: "HUG", fill: "onPrimary", align: "CENTER", padding: { top: 16, right: 26, bottom: 16, left: 26 }, props: { Label: "Start free" } }, (id) => {
+      k.propText(id, "Label", { style: "Button 15", color: "primary", autoWidth: true });
+    });
+    k.variantSet("Score row", "Size", ["Large", "Small"], {
+      direction: "HORIZONTAL",
+      width: 1e3,
+      align: "CENTER",
+      props: { Rank: "1ST", Name: "LOOPCAST", Score: "$2.1M BILLED" },
+      description: "One line of a high-score table: rank, name and score."
+    }, (size, id) => {
+      const style = size === "Large" ? "Row 20" : "Row 14";
+      k.propText(id, "Rank", { style, color: "onCard", width: size === "Large" ? 80 : 32 });
+      k.propText(id, "Name", { style, color: "onCard", width: "FILL" });
+      k.propText(id, "Score", size === "Large" ? { style, color: "onCard", width: "FILL" } : { style, color: "onCard", autoWidth: true });
+    }, (size) => size === "Large" ? { gap: 24, padding: { top: 16, right: 28, bottom: 16, left: 28 } } : { gap: 8, padding: { top: 10, right: 10, bottom: 10, left: 10 } });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 72, top: 32 });
+    k.timeline(sheet, { duration: 4e3, fps: 30 });
+    nav(k, sheet, { links: ["Metering", "Invoices", "Docs", "Pricing"], cta: "Start free", style: "Nav 15", brandStyle: "Brand 20" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 24, name: "Copy" });
+    const eyebrow = k.stack(copy, { direction: "HORIZONTAL", width: "HUG", fill: "primary", padding: { top: 6, right: 12, bottom: 6, left: 12 }, name: "Eyebrow" });
+    k.text(eyebrow, "PLAYER 1 \xB7 USAGE BILLING API", { style: "Eyebrow 14", color: "onPrimary", autoWidth: true, name: "Eyebrow text" });
+    k.text(copy, "Bill by the request, the seat or the second.", { style: "Display 64", color: "text", name: "Headline", effects: [hardShadow(k, "accent", 3)] });
+    k.text(copy, "Send {{brand.name}} one event per thing your customer uses. It meters, prorates, taxes and invoices, and tells them before the bill surprises them. Most teams ship it in an afternoon.", { style: "Lead 19", color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Insert coin: start free" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Read the docs" }, { name: "CTA quiet" });
+    k.text(copy, "Free until you have billed $10,000 \xB7 No card", { style: "Proof 14", color: "onPaper", name: "Proof" });
+    const cabinet = k.stack(hero, { width: CABINET, gap: 0, fill: "card", stroke: { color: "text", width: 4, align: "INSIDE", join: "MITER" }, effects: [hardShadow(k, "accent", 16)], padding: BEZEL, name: "Cabinet" });
+    const marquee = k.stack(cabinet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", fill: "primary", padding: { top: 10, right: 14, bottom: 10, left: 14 }, name: "Marquee" });
+    k.text(marquee, "{{brand.name}}", { style: "Screen 15", color: "onPrimary", name: "Marquee name" });
+    const credits = k.stack(marquee, { direction: "HORIZONTAL", width: "HUG", gap: 6, name: "Credits" });
+    for (let i = 0; i < 3; i++) spriteInks(k, credits, COIN_FACE, 3, { "#": "onPrimary", o: "primary" }, { name: "Credit" });
+    const tube = k.stack(cabinet, { width: CABINET - 2 * BEZEL, height: 480, fill: "paper", justify: "SPACE_BETWEEN", align: "CENTER", clip: true, name: "Tube" });
+    backdrop(k, tube, { top: "accent", bottom: "secondary" });
+    const hud = k.stack(tube, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", fill: "paper", padding: { top: 10, right: 16, bottom: 10, left: 16 }, name: "Screen HUD" });
+    k.text(hud, "MRR $4,800", { style: "Screen 15", color: "text", autoWidth: true, name: "Screen score" });
+    k.text(hud, "HI $128,000", { style: "Screen 15", color: "text", autoWidth: true, name: "Screen high" });
+    const field = k.stack(tube, { width: "HUG", gap: 16, align: "CENTER", name: "Field" });
+    const swarm = k.stack(field, { width: "HUG", gap: 12, align: "CENTER", name: "Swarm" });
+    for (const kind of [{ rows: SQUID, color: "text" }, { rows: INVADER, color: "accent" }, { rows: OCTO, color: "lit" }]) {
+      const row = k.stack(swarm, { direction: "HORIZONTAL", width: "HUG", gap: 76 - kind.rows[0].length * 5, name: "Swarm row" });
+      for (let i = 0; i < 6; i++) sprite(k, row, kind.rows, 5, kind.color, { name: i < 4 ? "Invader" : "Invader wing" });
+    }
+    const bunkers = k.stack(field, { direction: "HORIZONTAL", width: "HUG", gap: 64, padding: { top: 26, right: 0, bottom: 0, left: 0 }, name: "Bunkers" });
+    for (let i = 0; i < 3; i++) sprite(k, bunkers, BUNKER, 5, "lit", { name: i < 2 ? "Bunker" : "Bunker wing" });
+    const cannon = k.stack(field, { width: "HUG", gap: 8, align: "CENTER", name: "Cannon" });
+    k.rect(cannon, 6, 22, "accent", { name: "Bolt", effects: [bloom(k, "accent", 12, 0.9)] });
+    sprite(k, cannon, SHIP, 6, "text", { name: "Ship" });
+    const prompt = k.stack(tube, { gap: 4, fill: "paper", padding: { top: 10, right: 12, bottom: 12, left: 12 }, name: "Prompt" });
+    k.text(prompt, "INSERT COIN", { style: "Screen 26", color: "text", name: "Coin prompt" });
+    k.text(prompt, "1 COIN = 1 EVENT METERED", { style: "Screen 13", color: "text", name: "Coin rate" });
+    overlay(k, tube, { scan: 0.16, vignette: 0.3 });
+    const deck = k.stack(cabinet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 14, right: 18, bottom: 4, left: 18 }, name: "Deck" });
+    const stick = k.stack(deck, { width: "HUG", align: "CENTER", name: "Stick" });
+    k.ellipse(stick, 22, "accent", { name: "Stick knob" });
+    k.rect(stick, 6, 12, "onCard", { name: "Stick shaft" });
+    k.rect(stick, 40, 6, "onCard", { name: "Stick base" });
+    const pads = k.stack(deck, { direction: "HORIZONTAL", width: "HUG", gap: 14, name: "Pads" });
+    for (const color of ["secondary", "accent", "primary"]) k.ellipse(pads, 26, color, { name: "Pad", stroke: { color: "onCard", width: 3 } });
+    const parade = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Parade" });
+    for (let i = 0; i < 14; i++) sprite(k, parade, [SQUID, INVADER, OCTO][i % 3], 4, ["text", "accent", "lit"][i % 3], { name: i < 5 ? "Marcher" : i < 8 ? "Marcher tablet" : "Marcher wide" });
+    const scores = k.stack(sheet, { gap: 20, name: "Scores" });
+    const title = k.stack(scores, { direction: "HORIZONTAL", gap: 18, align: "CENTER", name: "Scores head" });
+    sprite(k, title, TROPHY, 4, "text", { name: "Trophy" });
+    k.text(title, "HIGH SCORES", { style: "Section 44", color: "text", name: "Scores title" });
+    k.text(scores, "What teams have billed through {{brand.name}} in the last 90 days.", { style: "Lead 19", color: "onPaper", name: "Scores lead" });
+    const board = k.stack(scores, { fill: "card", stroke: { color: "text", width: 4, align: "INSIDE", join: "MITER" }, effects: [hardShadow(k, "secondary", 14)], padding: 8, name: "Board" });
+    for (const [rank, name, score] of SCORES) k.instance(board, "Score row/Large", { Rank: rank, Name: name, Score: score }, { width: "FILL", name: "Score" });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 32, align: "CENTER", fill: "primary", effects: [hardShadow(k, "accent", 14)], padding: 44, name: "Coin band" });
+    spriteInks(k, band, COIN_FACE, 10, { "#": "onPrimary", o: "primary" }, { name: "Band coin" });
+    const pitch = k.stack(band, { gap: 8, name: "Band copy" });
+    k.text(pitch, "INSERT COIN TO CONTINUE", { style: "Section 44", color: "onPrimary", name: "Band title" });
+    k.text(pitch, "Your first $10,000 billed is on the house. After that, 0.6% of what you invoice.", { style: "Lead 19", color: "onPrimary", name: "Band lead" });
+    k.instance(band, "Button on band", { Label: "Start free" }, { name: "Band button" });
+    k.text(sheet, "\xA9 2026 {{brand.name}} Billing, Inc. \xB7 Status \xB7 Docs \xB7 Changelog \xB7 Security", { style: "Proof 14", color: "onPaper", name: "Footer" });
+    march(k, swarm, { from: 300, until: 3900, step: 400, dx: 12 });
+    march(k, cannon, { from: 500, until: 3700, step: 400, dx: 60 });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Coin band"],
+      restyle: { "Display 64": { laptop: "Display 52", tablet: "Display 52", mobile: "Display 36" }, "Lead 19": { mobile: "Lead 17" }, "Section 44": { mobile: "Section 28" } },
+      hide: { tablet: ["Marcher wide"], mobile: ["Nav links", "Invader wing", "Bunker wing", "Marcher wide", "Marcher tablet", "Band coin"] },
+      gap: { tablet: 56, mobile: 48 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 56 });
+        if (size === "tablet") {
+          for (const n of kit.named(id, "Nav links")) kit.patch(n, { itemSpacing: 16 });
+          for (const n of kit.named(id, "Nav right")) kit.patch(n, { itemSpacing: 20 });
+        }
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
+          for (const n of kit.named(id, "Coin band")) kit.patch(n, { counterAxisAlignItems: "MIN" });
+        }
+        const wide = size === "mobile" ? kit.node(id).width - 2 * BREAKPOINTS.mobile.side : CABINET;
+        for (const n of kit.named(id, "Cabinet")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: wide });
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Headline")) kit.patch(n, { effects: [hardShadow(kit, "accent", 2)] });
+          for (const n of kit.named(id, "Tube")) {
+            kit.patch(n, { width: wide - 2 * BEZEL });
+            refit(kit, n);
+          }
+          for (const n of kit.named(id, "Coin band")) kit.patch(n, { padding: { top: 24, right: 20, bottom: 24, left: 20 }, itemSpacing: 20 });
+          for (const n of kit.named(id, "Score")) kit.patch(n, { mainComponentId: kit.componentIdOf("Score row/Small") });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  arcade_landing_default
+};

package/dist/chunks/chunk-BI3M4RUH.js

@@ -0,0 +1,48 @@
+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 {
+  saas_mail_seed_pitch_default
+} from "./chunk-RKGHMFRL.js";
+import {
+  saas_mail_investor_update_default
+} from "./chunk-4UXEXYYZ.js";
+import {
+  saas_mail_launch_default
+} from "./chunk-7N7GWTB5.js";
+import {
+  saas_mail_payment_failed_default
+} from "./chunk-UI2O3BNM.js";
+import {
+  saas_mail_sign_in_code_default
+} from "./chunk-4YFMC6OS.js";
+import {
+  saas_mail_trial_ending_default
+} from "./chunk-ON4PFGF6.js";
+import {
+  saas_mail_waitlist_default
+} from "./chunk-AZKFF4A7.js";
+import {
+  saas_mail_changelog_default
+} from "./chunk-4N72M4CD.js";
+import {
+  saas_mail_day_one_default
+} from "./chunk-5KHX4PDB.js";
+import {
+  saas_mail_day_three_default
+} from "./chunk-2VSWD2HJ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/saas/email-decks.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pack = [saas_mail_waitlist_default, saas_mail_launch_default, saas_mail_day_one_default, saas_mail_day_three_default, saas_mail_trial_ending_default, saas_mail_payment_failed_default, saas_mail_sign_in_code_default, saas_mail_changelog_default, saas_mail_seed_pitch_default, saas_mail_investor_update_default];
+var email_decks_default = pack;
+
+export {
+  email_decks_default
+};

package/dist/chunks/chunk-BKCV2KLZ.js

@@ -0,0 +1,133 @@
+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,
+  MARQUEE,
+  fitShopfront,
+  marquee,
+  neonBrand,
+  puddle,
+  shopfront
+} from "./chunk-GBUMWUHN.js";
+import {
+  rainPaths
+} from "./chunk-57PXFTSD.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  board,
+  patchAll,
+  put,
+  reboard,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/black-friday-neon-ads.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Black Friday neon display ad set";
+var SCALE = 0.62;
+var black_friday_neon_ads_default = defineTemplate({
+  id: "social-black-friday-neon-display-ads",
+  meta: {
+    name: NAME,
+    description: "Display ads for a SaaS Black Friday sale, drawn as a shopfront at night: a fully lit neon SALE sign with the discount in amber and an arrow of bulbs on a rainy brick wall, its reflection in the wet street, the offer, the code behind glass and a button. 1200 \xD7 628 and 1200 \xD7 1200, with 4:5 and LinkedIn cuts",
+    category: "social",
+    tags: ["black friday", "cyber monday", "sale", "ad", "display ad", "google ads", "saas", "neon", "neon sign", "shopfront", "night", "pricing", "annual plan", "discount code"],
+    platforms: ["web", "facebook", "linkedin", "instagram"],
+    formats: ["ad", "banner", "post", "portrait-post"],
+    useCases: ["sale", "pricing"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("ad-landscape"));
+    k.quantizeGeometry = true;
+    neonBrand(k, { name: DEAL.product, offer: "Lights on.\nPrices down.", pitch: `Every annual plan ${DEAL.off}% off until Monday midnight. ${DEAL.pitch}` }, ["paper", "text", "onPaper", "primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
+    k.textStyle("Tag 16", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 1, lineHeight: 22 });
+    k.textStyle("Display 64", { size: 64, fontWeight: 900, letterSpacing: -2.4, lineHeight: 64 });
+    k.textStyle("Display 104", { size: 104, fontWeight: 900, letterSpacing: -4, lineHeight: 102, textAlign: "CENTER" });
+    k.textStyle("Pitch 20", { size: 20, fontWeight: 500, lineHeight: 28 });
+    k.textStyle("Pitch 28", { size: 28, fontWeight: 500, lineHeight: 38, textAlign: "CENTER" });
+    k.textStyle("Code 22", { ...MONO, size: 22, fontWeight: 800, letterSpacing: 1, lineHeight: 28 });
+    k.textStyle("Code 32", { ...MONO, size: 32, fontWeight: 800, letterSpacing: 1, lineHeight: 40 });
+    k.textStyle("Button 22", { size: 22, fontWeight: 800, lineHeight: 28 });
+    pill(k, "Tag", { fill: "accent", ink: "onAccent", style: "Tag 16", label: "BLACK FRIDAY \xB7 ENDS MON 30 NOV", pad: [6, 12], radius: 4 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 22", label: `Get ${DEAL.off}% off`, pad: [16, 28], radius: 10 });
+    k.textStyle("Tag 24", { ...MONO, size: 24, fontWeight: 800, letterSpacing: 1.4, lineHeight: 30 });
+    k.textStyle("Button 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+    pill(k, "Tag large", { fill: "accent", ink: "onAccent", style: "Tag 24", label: "BLACK FRIDAY \xB7 ENDS MON 30 NOV", pad: [9, 18], radius: 5 });
+    pill(k, "Button large", { fill: "primary", ink: "onPrimary", style: "Button 32", label: `Get ${DEAL.off}% off`, pad: [22, 40], radius: 12 });
+    const sheet = k.sheet;
+    const STREET = 560;
+    k.flowSheet(sheet, 0, { top: 40, right: 56, bottom: 628 - STREET + 20, left: 48 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    shopfront(k, sheet, { street: STREET, u: 0.7 });
+    k.vector(sheet, 1200, 628, rainPaths(1200, 628, 6, 20, 60, 0.22), "ice", { name: "Rain", strokeWidth: 2, opacity: 0.12, absolute: { x: 0, y: 0 } });
+    const ad = k.stack(sheet, { direction: "HORIZONTAL", gap: 44, align: "CENTER", name: "Ad" });
+    const sign = marquee(k, board(k, ad, MARQUEE.w, MARQUEE.h, SCALE, "Sign board"), {});
+    const copy = k.stack(ad, { gap: 16, name: "Copy" });
+    k.instance(copy, "Tag", { Label: "BLACK FRIDAY \xB7 ENDS MON 30 NOV" }, { name: "Dates" });
+    k.text(copy, "{{brand.offer}}", { style: "Display 64", color: "text", name: "Offer" });
+    k.text(copy, "{{brand.pitch}}", { style: "Pitch 20", color: "onPaper", name: "Pitch" });
+    const act = k.stack(copy, { direction: "HORIZONTAL", gap: 14, align: "CENTER", wrap: true, name: "Act" });
+    const code = k.stack(act, { direction: "HORIZONTAL", width: "HUG", fill: "card", radius: 10, padding: { top: 14, right: 20, bottom: 14, left: 20 }, stroke: { color: "steelEdge", width: 3, align: "INSIDE" }, name: "Code plate" });
+    k.text(code, `CODE ${DEAL.code}`, { style: "Code 22", color: "amber", autoWidth: true, name: "Code" });
+    k.instance(act, "Button", { Label: `Get ${DEAL.off}% off` }, { name: "Buy button" });
+    const at = (x0, s) => Math.round(x0 + k.node(sign.sale.frame).x * s);
+    const pool = puddle(k, sheet, sign.sale.w, sign.sale.h, sign.sale.paths, "red", { t: 19, name: "Sale puddle", absolute: { x: at(48, SCALE), y: STREET + 8 }, squash: 0.5, opacity: 0.5, blur: 8 });
+    k.patch(pool, { scaleX: SCALE, scaleY: SCALE, anchorX: 0, anchorY: 0 });
+    const tall = (kit, id, w, h, street, s) => {
+      fitShopfront(kit, id, { street, u: 0.9 });
+      patchAll(kit, id, "Rain", { x: 0, y: 0, width: w, height: h, paths: rainPaths(w, h, 6, 30, 80, 0.22) });
+      patchAll(kit, id, "Ad", { layoutMode: "VERTICAL", itemSpacing: 36, counterAxisAlignItems: "CENTER" });
+      patchAll(kit, id, "Copy", { layoutSizingHorizontal: "FILL", counterAxisAlignItems: "CENTER", itemSpacing: 22 });
+      patchAll(kit, id, "Act", { primaryAxisAlignItems: "CENTER" });
+      reboard(kit, id, "Sign board", s);
+      restyle(kit, id, "Offer", "Display 104");
+      restyle(kit, id, "Pitch", "Pitch 28");
+      restyle(kit, id, "Code", "Code 32");
+      for (const [name, comp] of [["Dates", "Tag large"], ["Buy button", "Button large"]]) for (const n of kit.named(id, name)) kit.patch(n, { mainComponentId: kit.componentIdOf(comp) });
+      patchAll(kit, id, "Code plate", { padding: { top: 20, right: 28, bottom: 20, left: 28 } });
+      const sx = Math.round((w - MARQUEE.w * s) / 2);
+      put(kit, id, "Sale puddle", Math.round(sx + k.node(sign.sale.frame).x * s), street + 12, { scaleX: s, scaleY: s * 0.8 });
+    };
+    k.variants(sheet, [
+      { preset: "ad-square", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 64, right: 72, bottom: 150, left: 72 }, primaryAxisAlignItems: "CENTER" });
+        tall(kit, id, 1200, 1200, 1076, 1.08);
+      } },
+      { preset: "ig-portrait", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 64, right: 64, bottom: 150, left: 64 }, primaryAxisAlignItems: "CENTER" });
+        tall(kit, id, 1080, 1350, 1226, 1.1);
+      } },
+      { preset: "linkedin-post", adjust: (kit, id) => {
+        fitShopfront(kit, id, { street: STREET - 1, u: 0.7 });
+        put(kit, id, "Rain", 0, 0, { width: 1200, height: 627 });
+      } }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_neon_ads_default
+};

package/dist/chunks/chunk-BLRRMMWM.js

@@ -0,0 +1,33 @@
+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 {
+  earth_day_landing_default
+} from "./chunk-P3VJIMYS.js";
+import {
+  earth_day_link_preview_default
+} from "./chunk-3N5NAHPY.js";
+import {
+  earth_day_footprint_reel_default
+} from "./chunk-G3UWLHYD.js";
+import {
+  earth_day_pledge_post_default
+} from "./chunk-CFQF557I.js";
+import {
+  earth_day_header_default
+} from "./chunk-OZZDETOU.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/themes/earth-day.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pack = [earth_day_footprint_reel_default, earth_day_landing_default, earth_day_pledge_post_default, earth_day_header_default, earth_day_link_preview_default];
+var earth_day_default = pack;
+
+export {
+  earth_day_default
+};

package/dist/chunks/chunk-BNEFANT2.js

@@ -0,0 +1,134 @@
+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 {
+  bauble,
+  disc,
+  draw,
+  holly,
+  polyP,
+  printVariant,
+  snowflake,
+  specksIn,
+  starPath
+} from "./chunk-AISWLDDO.js";
+import {
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/print/holidays-christmas-gift-tags.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Christmas gift tags sticker sheet";
+var PAD = { top: 54, right: 60, bottom: 40, left: 60 };
+var D = 196;
+var MOTIFS = ["Tree", "Bauble", "Snowflake", "Holly"];
+var LOOK = {
+  Tree: { ground: "tagGreen", ink: "cream", art: "pineLight", art2: "gold", words: "cream" },
+  Bauble: { ground: "tagRed", ink: "cream", art: "gold", art2: "cream", words: "cream" },
+  Snowflake: { ground: "tagCream", ink: "red", art: "red", art2: "green", words: "red" },
+  Holly: { ground: "tagCream", ink: "green", art: "green", art2: "red", words: "green" }
+};
+function motif(m, cx, cy) {
+  const L = LOOK[m];
+  if (m === "Tree") {
+    const tiers = [0, 1, 2].map((i) => polyP([{ x: cx, y: cy - 38 + i * 17 }, { x: cx + 22 + i * 10, y: cy - 8 + i * 19 }, { x: cx - 22 - i * 10, y: cy - 8 + i * 19 }]));
+    return [
+      { name: "Tree", paths: tiers, color: L.art },
+      { name: "Trunk", paths: [polyP([{ x: cx - 5, y: cy + 30 }, { x: cx + 5, y: cy + 30 }, { x: cx + 5, y: cy + 40 }, { x: cx - 5, y: cy + 40 }])], color: "bark" },
+      { name: "Top star", paths: [starPath(cx, cy - 40, 9, 3.8)], color: L.art2 },
+      { name: "Lights", paths: [[-8, -18], [9, -10], [-16, 2], [8, 8], [-4, 20], [20, 24], [-24, 26], [2, -2]].map(([x, y]) => disc(cx + x, cy + y, 2.8)), color: L.art2 },
+      { name: "Garland", paths: [[-14, -4, 16, -12], [-22, 14, 26, 6], [-30, 34, 32, 26]].map(([a, b, c, d]) => ({ closed: false, points: [{ x: cx + a, y: cy + b }, { x: cx + c, y: cy + d, handleIn: { x: cx + (a + c) / 2, y: cy + (b + d) / 2 + 7 } }] })), color: L.ink, o: { strokeWidth: 1.2, opacity: 0.8 } }
+    ];
+  }
+  if (m === "Bauble") {
+    const b = bauble(cx, cy - 48, 34, { string: 2 });
+    return [
+      { name: "Bauble", paths: b.body, color: L.art },
+      { name: "Bauble shade", paths: b.shade, color: "goldDeep", o: { opacity: 0.5 } },
+      { name: "Bauble bands", paths: b.band, color: L.art2, o: { strokeWidth: 2 } },
+      { name: "Bauble cap", paths: b.cap, color: "goldDeep" },
+      { name: "Bauble shine", paths: b.shine, color: L.art2, o: { opacity: 0.7 } }
+    ];
+  }
+  if (m === "Snowflake") return [
+    { name: "Snowflake", paths: snowflake(cx, cy, 40), color: L.art, o: { strokeWidth: 3.2 } },
+    { name: "Snow dots", paths: [0, 1, 2, 3, 4, 5].map((i) => disc(cx + Math.cos(i * Math.PI / 3 + Math.PI / 6) * 30, cy + Math.sin(i * Math.PI / 3 + Math.PI / 6) * 30, 2.6)), color: L.art2 },
+    { name: "Snowflake heart", paths: [disc(cx, cy, 5)], color: L.art2 }
+  ];
+  return [
+    { name: "Holly", paths: [holly({ x: cx - 4, y: cy + 4 }, 48, Math.PI + 0.45), holly({ x: cx + 4, y: cy + 4 }, 48, -0.45), holly({ x: cx, y: cy + 6 }, 34, Math.PI / 2 + 0.1)], color: L.art },
+    { name: "Berries", paths: [disc(cx - 7, cy - 2, 7), disc(cx + 7, cy - 3, 7), disc(cx, cy + 9, 7)], color: L.art2 }
+  ];
+}
+function paper(w, h) {
+  const B = 12;
+  return [0, 1, 2, 3].map((i) => {
+    const band = { x: -B, y: -B + (h + 2 * B) * i / 4, w: w + 2 * B, h: (h + 2 * B) / 4 };
+    return { name: "Fibre", paths: specksIn(band, 260, 21 + i, 2.2), color: "fibre", o: { opacity: 0.45 } };
+  });
+}
+var holidays_christmas_gift_tags_default = defineTemplate({
+  id: "print-holidays-christmas-gift-tags",
+  meta: {
+    name: NAME,
+    description: "Twelve round Christmas gift tags on one sheet, to print on sticker paper or card and cut out: a layered pine tree, a striped bauble, a snowflake and a sprig of holly in red, green and cream, each with a stitched ring and \u201CTo\u201D and \u201CFrom\u201D lines. One component set, so a colour change reaches every tag. US Letter on kraft paper with bleed, and an A4 copy",
+    category: "sticker",
+    tags: ["christmas", "gift tags", "labels", "stickers", "sticker sheet", "presents", "wrapping", "printable", "holly", "snowflake", "kraft", "diy", "print"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["greeting"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("us-letter"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#E6D6BC", text: "#4A2B1E", onPaper: "#7A2E25", primary: "#A3312A", onPrimary: "#FFF6E8" },
+      { name: "From the Lindqvist house" }
+    );
+    k.palette({ tagRed: "#A3312A", tagGreen: "#2F5A43", tagCream: "#FBF4E6", red: "#A3312A", green: "#2F5A43", cream: "#FBF4E6", gold: "#D9B356", goldDeep: "#8E6C25", pineLight: "#7FAE86", bark: "#6B4A33", fibre: "#9C7F57" });
+    k.textStyle("Head 30", { ...SERIF, size: 30, fontWeight: 600, fontStyle: "italic", letterSpacing: -0.4, lineHeight: 34 });
+    k.textStyle("Note 11", { size: 11, fontWeight: 500, letterSpacing: 0.4, lineHeight: 16 });
+    k.textStyle("Tag 13", { ...SERIF, size: 13, fontWeight: 600, fontStyle: "italic", lineHeight: 17 });
+    k.textStyle("Tag word 9", { size: 9, fontWeight: 700, letterSpacing: 2.2, lineHeight: 12 });
+    k.variantSet("Gift tag", "Design", MOTIFS, { width: D, height: D, radius: D / 2, padding: { top: 110, right: 30, bottom: 18, left: 30 }, gap: 4, align: "CENTER", props: { Greeting: "Merry Christmas", To: "To: ____________", From: "From: __________" } }, (m, id) => {
+      const L = LOOK[m];
+      k.vector(id, D - 16, D - 16, [disc((D - 16) / 2, (D - 16) / 2, (D - 16) / 2)], [], { name: "Stitch", absolute: { x: 8, y: 8 }, stroke: { color: L.words, width: 1.4, dash: [5, 4] }, opacity: 0.8 });
+      draw(k, id, motif(m, D / 2, 64));
+      k.propText(id, "Greeting", { style: "Tag 13", color: L.words, align: "CENTER", width: "FILL", name: "Greeting" });
+      k.propText(id, "To", { style: "Tag word 9", color: L.words, align: "CENTER", width: "FILL", name: "To" });
+      k.propText(id, "From", { style: "Tag word 9", color: L.words, align: "CENTER", width: "FILL", name: "From" });
+    }, (m) => ({ fill: LOOK[m].ground }));
+    const sheet = k.sheet;
+    const { width: W, height: H } = k.node(sheet);
+    k.flowSheet(sheet, 18, PAD, "paper", "MIN", "CENTER");
+    draw(k, sheet, paper(W, H));
+    k.text(sheet, "Merry & bright gift tags", { style: "Head 30", color: "text", align: "CENTER", width: "FILL", name: "Title" });
+    const grid = k.stack(sheet, { direction: "HORIZONTAL", wrap: true, gap: 22, width: "FILL", justify: "CENTER", name: "Tags" });
+    k.patch(grid, { counterAxisSpacing: 22 });
+    const greet = ["Merry Christmas", "Joy to you", "Ho ho ho", "Season\u2019s greetings", "Peace & joy", "Merry Christmas", "With love", "Don\u2019t peek!", "Happy holidays", "Be merry", "Noel", "For you, with love"];
+    greet.forEach((g, i) => k.instance(grid, `Gift tag/${MOTIFS[i % 4]}`, { Greeting: g }, { name: "Gift tag" }));
+    k.text(sheet, "Print on full-sheet sticker paper or card and cut round the stitched ring \xB7 {{brand.name}}", { style: "Note 11", color: "text", align: "CENTER", width: "FILL", name: "Note" });
+    k.variants(sheet, [printVariant("a4", { art: paper, pad: PAD, masterWidth: W })]);
+    return k.finish();
+  }
+});
+
+export {
+  holidays_christmas_gift_tags_default
+};