@popcraft/kit 0.24.2 → 0.25.0

package/dist/chunks/chunk-GRL2GMU2.js

@@ -0,0 +1,109 @@
+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 {
+  logoBadge,
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  into,
+  playScenes,
+  sceneSheets
+} from "./chunk-3HDJLLZM.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/scenes/carousel-video.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var TIPS = [
+  { title: "Turn the thermostat down 1\xB0C", body: "Most homes stay just as comfortable at 19\u201320\xB0C.", save: 90 },
+  { title: "Draught-proof doors and windows", body: "Strips and a letterbox brush cost less than a takeaway.", save: 45 },
+  { title: "Four-minute showers", body: "A timer on the tile keeps everyone honest.", save: 50 },
+  { title: "Wash at 30\xB0C", body: "Today\u2019s detergents clean just as well cooler.", save: 25 },
+  { title: "Switch off standby", body: "One smart plug for the TV corner does most of it.", save: 55 }
+];
+var tipCues = () => [
+  { layer: "Number", preset: "pop-in", at: 100 },
+  { layer: "Tip title", preset: "words-in", at: 250, params: { duration: 550, amount: 60 } },
+  { layer: "Tip body", preset: "fade-in", at: 800 },
+  { layer: "Saving", preset: "rise-in", at: 900 }
+];
+var scenes = [
+  { sheet: "Cover", cues: [
+    { layer: "Logo", preset: "pop-in", at: 0 },
+    { layer: "Cover title", preset: "lines-in", at: 200, params: { duration: 650, amount: 220 } },
+    { layer: "Swipe", preset: "fade-in", at: 1200 }
+  ] },
+  ...TIPS.map((t, i) => ({
+    sheet: `Tip ${i + 1}`,
+    transition: into("PUSH_FROM_RIGHT", 450),
+    cues: tipCues(),
+    counts: [{ layer: "Saving figure", at: 900, duration: 900, counter: { from: 0, to: t.save, prefix: "\xA3" } }]
+  }))
+];
+var carousel_video_default = defineTemplate({
+  id: "motion-carousel-video",
+  meta: {
+    name: "Carousel to video",
+    description: "Six 4:5 carousel cards \u2014 five winter energy-saving habits with what each saves \u2014 that also play as one video: each card animates, and swipe-style pushes join them, about 11 seconds",
+    category: "animation",
+    tags: ["animation", "carousel", "video", "scenes", "tips", "energy", "home", "advice"],
+    platforms: ["instagram", "linkedin", "facebook"],
+    formats: ["carousel", "video", "portrait-post", "reel"],
+    useCases: ["tips", "education"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { scenes },
+  build() {
+    const k = new Kit("Carousel to video", preset("ig-portrait"));
+    k.brand(
+      { paper: "#FFF6E5", text: "#1E2A3A", onPaper: "#4F5B6B", primary: "#2A6FDB", onPrimary: "#FFFFFF", accent: "#2A6FDB", card: "#1E2A3A", onCard: "#FFD166", badge: "#2A6FDB" },
+      { name: "Warm Homes Advice", handle: "@warmhomesadvice" }
+    );
+    k.textStyle("Cover 110", { size: 110, fontWeight: 900, letterSpacing: -4, lineHeight: 114 });
+    k.textStyle("Number 150", { size: 150, fontWeight: 900, letterSpacing: -6, lineHeight: 150 });
+    k.textStyle("Tip 80", { size: 80, fontWeight: 900, letterSpacing: -2, lineHeight: 86 });
+    k.textStyle("Body 40", { size: 40, fontWeight: 500, lineHeight: 52 });
+    k.textStyle("Saving 64", { size: 64, fontWeight: 900, letterSpacing: -2, lineHeight: 70 });
+    k.textStyle("Saving label 30", { size: 30, fontWeight: 600, lineHeight: 38 });
+    k.textStyle("Swipe 34", { size: 34, fontWeight: 800, lineHeight: 42 });
+    pill(k, "Swipe chip", { fill: "primary", ink: "onPrimary", style: "Swipe 34", label: "Swipe for the five  \u2192", pad: [16, 36] });
+    const ids = sceneSheets(k, "ig-portrait", scenes.map((s) => s.sheet));
+    ids.forEach((id, i) => {
+      k.flowSheet(id, 36, 96, "paper", i === 0 ? "CENTER" : "SPACE_BETWEEN", "MIN");
+      k.timeline(id, { duration: i === 0 ? 2200 : 2200, fps: 30 });
+    });
+    logoBadge(k, ids[0], { fill: "badge", size: 80, name: "Logo" });
+    k.text(ids[0], "5 ways to cut\nyour energy bill\nthis winter", { style: "Cover 110", color: "text", name: "Cover title" });
+    k.instance(ids[0], "Swipe chip", { Label: "Swipe for the five  \u2192" }, { name: "Swipe" });
+    TIPS.forEach((t, i) => {
+      const id = ids[i + 1];
+      k.text(id, `0${i + 1}`, { style: "Number 150", color: "accent", name: "Number" });
+      const copy = k.stack(id, { gap: 24, name: "Copy" });
+      k.text(copy, t.title, { style: "Tip 80", color: "text", name: "Tip title" });
+      k.text(copy, t.body, { style: "Body 40", color: "onPaper", name: "Tip body" });
+      const saving = k.stack(id, { fill: "card", radius: 32, padding: { top: 24, right: 36, bottom: 28, left: 36 }, gap: 2, name: "Saving" });
+      k.text(saving, `\xA3${t.save}`, { style: "Saving 64", color: "onCard", name: "Saving figure" });
+      k.text(saving, "a year, roughly, for a typical home", { style: "Saving label 30", color: "onCard", name: "Saving label" });
+    });
+    playScenes(k, "comp-carousel", "Carousel to video", ids, scenes, "paper");
+    k.setCover(ids[0]);
+    return k.finish();
+  }
+});
+
+export {
+  carousel_video_default
+};

package/dist/chunks/chunk-GTRURIIB.js

@@ -0,0 +1,124 @@
+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 {
+  brand,
+  caption,
+  captionCues,
+  column,
+  glow,
+  rig,
+  sizes,
+  stage,
+  typeStep
+} from "./chunk-ZPQYHYFA.js";
+import {
+  PHONE,
+  deviceShadow,
+  devices
+} from "./chunk-SKMGZGNY.js";
+import {
+  appScreens
+} from "./chunk-7LNASDR7.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/motion3d/product-turntable.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 12e3;
+var FPS = 30;
+var SIZES = ["video-1080p", "video-square"];
+var DEPTH = 34;
+var FEATURES = [
+  ["Face ID lock", "Only you open your money."],
+  ["Bank-grade encryption", "256-bit, end to end."],
+  ["Home Screen widgets", "Your balance at a glance."],
+  ["Works offline", "Syncs the moment you\u2019re back."]
+];
+var CAPTION = { name: "Headline", title: "Built like a vault. Feels like magic." };
+var CUES = [
+  ...captionCues(CAPTION, 200),
+  { layer: FEATURES.map((_, i) => `Feature ${i + 1}`), preset: "rise-in", at: 1200, params: { duration: 700 }, stagger: { delay: 1400 } }
+];
+function build(k, sheet, s) {
+  k.nameSheet(sheet, `Product turntable \xB7 ${preset(s.preset).name}`);
+  glow(k, sheet, "primary", Math.round(1e3 * s.u), s.W / 2, s.H * 0.58, 0.45);
+  const fill = { id: "fill", type: "AMBIENT", name: "Fill", color: { r: 0.85, g: 0.92, b: 1, a: 1 }, intensity: 0.55, x: 0, y: 0, z: 0, targetX: 0, targetY: 0, targetZ: 0 };
+  const keyLight = { id: "key", type: "DIRECTIONAL", name: "Key", color: { r: 1, g: 0.97, b: 0.92, a: 1 }, intensity: 0.75, x: s.W * 0.2, y: s.H * 0.1, z: 1600, targetX: s.W / 2, targetY: s.H / 2, targetZ: 0 };
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2800 * s.u, lights: [fill, keyLight] });
+  const zoom = s.wide ? 0.9 : 0.62;
+  const cy = s.wide ? s.H * 0.53 : s.H * 0.6;
+  const table = rig(k, scene, s, "Turntable", 760, 760, s.W / 2, cy + PHONE.height / 2 * zoom);
+  k.patch(table, { scaleX: zoom, scaleY: zoom, rotateX: 78 });
+  k.ellipse(table, 760, "deviceEdge", { name: "Disc", opacity: 0.9 });
+  const turn = rig(k, scene, s, "Phone", PHONE.width, PHONE.height, s.W / 2, cy);
+  k.patch(turn, { scaleX: zoom, scaleY: zoom, rotateX: -6 });
+  const spin = k.group(turn, { x: 0, y: 0, width: PHONE.width, height: PHONE.height }, { name: "Spin" });
+  k.patch(spin, { rotateY: -28 });
+  k.behave(spin, "rotateY", [{ kind: "spin", rate: 360 / (DURATION / 1e3) }]);
+  const face = k.instance(spin, "Phone", { Screen: { swap: "Screen / Home" } }, { name: "Face" });
+  k.patch(face, { z: DEPTH / 2, effects: [deviceShadow(0.35, 30, 70)], material3d: { specular: 0.35, shininess: 60 } });
+  const back = k.instance(spin, "Phone back", {}, { name: "Back" });
+  k.patch(back, { z: -DEPTH / 2, rotateY: 180, material3d: { specular: 0.2, shininess: 30 } });
+  for (const side of [-1, 1]) {
+    const edge = k.rect(spin, DEPTH, PHONE.height - 2 * PHONE.radius + 40, "deviceEdge", { radius: DEPTH / 2, name: side < 0 ? "Left edge" : "Right edge" });
+    k.patch(edge, { x: side < 0 ? -DEPTH / 2 : PHONE.width - DEPTH / 2, y: PHONE.radius - 20, rotateY: side * 90 });
+  }
+  const col = column(s, 120);
+  caption(k, sheet, s, { ...CAPTION, step: s.wide ? "title" : "subtitle", width: col.width, align: "CENTER", at: { x: col.x, y: Math.round(64 * s.u) } });
+  const body = typeStep(k, s, "body");
+  const sideW = Math.round((s.wide ? 470 : 300) * s.u);
+  FEATURES.forEach(([t, b], i) => {
+    const left = i % 2 === 0, row = Math.floor(i / 2);
+    const box = k.stack(sheet, {
+      width: sideW,
+      gap: Math.round(8 * s.u),
+      align: left ? "MAX" : "MIN",
+      name: `Feature ${i + 1}`,
+      absolute: { x: left ? Math.round((s.wide ? 200 : 64) * s.u) : Math.round(s.W - (s.wide ? 200 : 64) * s.u - sideW), y: Math.round(cy + (row === 0 ? -170 : 60) * s.u) }
+    });
+    k.rect(box, Math.round(56 * s.u), 4, "accent", { radius: 2, name: "Rule" });
+    k.text(box, t, { style: typeStep(k, s, s.wide ? "subtitle" : "body"), color: "text", align: left ? "RIGHT" : "LEFT", name: "Feature" });
+    k.text(box, b, { style: body, color: "onBackground", align: left ? "RIGHT" : "LEFT", name: "Detail" });
+  });
+  k.cues(sheet, CUES);
+}
+var product_turntable_default = defineTemplate({
+  id: "motion-3d-product-turntable",
+  meta: {
+    name: "Product turntable",
+    description: "A phone turns a full circle on a lit 3D turntable \u2014 face, edge, back with your logo \u2014 while four feature callouts rise in either side. A seamless 12-second loop at 30 fps, 16:9 and square; swap the screen for your own",
+    category: "animation",
+    tags: ["animation", "3d", "product", "turntable", "phone", "device", "features", "callouts", "loop"],
+    platforms: ["youtube", "instagram", "linkedin", "x", "web"],
+    formats: ["video", "post", "ad"],
+    useCases: ["launch", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Product turntable", preset(SIZES[0]));
+    brand(k, "dark");
+    appScreens(k, ["Home", "Screenshot"]);
+    devices(k, ["Phone", "Phone back"]);
+    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  product_turntable_default
+};

package/dist/chunks/chunk-GXIBN73T.js

@@ -0,0 +1,109 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  OFFER,
+  blankCoupon,
+  burst,
+  couponBrand,
+  heroCoupon,
+  pinked,
+  rays,
+  scissors,
+  snip,
+  sticker,
+  two
+} from "./chunk-O7JDTUKF.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-O24FY473.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/email/black-friday-coupons-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 6e3;
+var cues = [
+  { layer: "Burst", preset: "pulse", at: 600, params: { duration: 700, amount: 0.08 } },
+  { layer: "Open button", preset: "wobble", at: 2400, params: { duration: 700 } },
+  { layer: "Burst", preset: "pulse", at: 4200, params: { duration: 700, amount: 0.08 } }
+];
+var counts = [];
+var NAME = "Black Friday coupon sale email header";
+var black_friday_coupons_header_default = defineTemplate({
+  id: "email-black-friday-coupons-header",
+  meta: {
+    name: `${NAME} (animated GIF)`,
+    description: "A 600 \xD7 300 animated header for a SaaS Black Friday email, drawn as a supermarket coupon circular: the offer, the code, the deadline, the button and a clip-out coupon with the half price are all on the first frame (for Outlook), then scissors snip along the cut line and walk back, the time left sits on a yellow price sticker and a starburst swells. A 6-second GIF",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "black friday", "cyber monday", "sale", "saas", "coupon", "voucher", "promo code", "flyer", "countdown"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["sale", "countdown"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, HEADER);
+    k.quantizeGeometry = true;
+    couponBrand(k, { name: OFFER.product, code: OFFER.code, offer: "CLIP IT. HALF OFF.", when: `Code ${OFFER.code} takes ${OFFER.off}% off every annual plan. Ends ${OFFER.ends}.` });
+    k.textStyle("Mast 12", { ...MONO, size: 12, fontWeight: 800, letterSpacing: 0.8, lineHeight: 16 });
+    k.textStyle("Offer 40", { size: 40, fontWeight: 900, letterSpacing: -2, lineHeight: 38 });
+    k.textStyle("When 14", { size: 14, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Button 15", { size: 15, fontWeight: 800, lineHeight: 18 });
+    k.textStyle("Band 12", { ...MONO, size: 12, fontWeight: 800, letterSpacing: 0.6, lineHeight: 16 });
+    k.textStyle("Figure 54", { size: 54, fontWeight: 900, letterSpacing: -2.6, lineHeight: 52, fontFeatures: { tnum: 1 } });
+    k.textStyle("Side 12", { ...MONO, size: 12, fontWeight: 800, lineHeight: 16 });
+    k.textStyle("Code 16", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 0.4, lineHeight: 20 });
+    k.textStyle("Burst 30", { size: 30, fontWeight: 900, letterSpacing: -1.4, lineHeight: 28 });
+    k.textStyle("Burst 12", { size: 12, fontWeight: 900, letterSpacing: 1, lineHeight: 14 });
+    k.textStyle("Sticker 12", { ...MONO, size: 12, fontWeight: 800, letterSpacing: 0.8, lineHeight: 14 });
+    k.textStyle("Sticker 18", { ...MONO, size: 18, fontWeight: 800, lineHeight: 22, fontFeatures: { tnum: 1 } });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 15", label: "Clip the coupon", pad: [9, 18], radius: 5 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 22, right: 14, bottom: 8, left: 26 }, "paper", "MIN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    rays(k, sheet, 600, 300, { fx: 0.72, fy: 0.5, opacity: 0.4 });
+    pinked(k, sheet, 600, 14, { tooth: 12 });
+    const main = k.stack(sheet, { direction: "HORIZONTAL", height: "FILL", gap: 14, align: "CENTER", name: "Main" });
+    const copy = k.stack(main, { gap: 9, name: "Copy" });
+    k.text(copy, "{{brand.name}} WEEKLY SAVER", { style: "Mast 12", color: "onPaper", name: "Edition" });
+    k.text(copy, "{{brand.offer}}", { style: "Offer 40", color: "text", name: "Offer" });
+    k.text(copy, "{{brand.when}}", { style: "When 14", color: "onPaper", name: "When" });
+    k.instance(copy, "Button", { Label: "Clip the coupon" }, { name: "Open button" });
+    const art = k.stack(main, { width: 330, height: 262, name: "Art" });
+    blankCoupon(k, art, { x: 40, y: 158, width: 290, height: 120, rotation: 6, u: 0.4, seed: 9, kraft: true, name: "Fan back" });
+    const hc = heroCoupon(k, art, { width: 318, u: 0.42, pad: 10, gap: 2, absolute: { x: 6, y: 62 }, stub: 84, bars: 34, priceGap: 6, pitch: null, small: "VALID 27\u201330 NOV", band: "STARTER \xB7 ANNUAL", styles: { band: "Band 12", figure: "Figure 54", side: "Side 12", fine: "Side 12", code: "Code 16" } });
+    const cutter = scissors(k, hc.cut, 64, { absolute: { x: -18, y: -18 } });
+    burst(k, art, 86, [[`${OFFER.off}%`, "Burst 30"], ["OFF", "Burst 12"]], { rotation: 9, absolute: { x: 246, y: -6 } });
+    sticker(k, art, [["ENDS IN", "Sticker 12"], [`${OFFER.days}D ${two(OFFER.hours)}:${two(OFFER.minutes)}:${OFFER.seconds}`, "Sticker 18", "Time left"]], { rotation: -4, pad: [5, 12], u: 0.5, absolute: { x: 150, y: 208 } });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    snip(k, cutter, { at: 500, steps: 8, every: 500, distance: 200, back: DURATION - 300, backOver: 1e3 });
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_coupons_header_default
+};

package/dist/chunks/chunk-GYXGO45B.js

@@ -0,0 +1,97 @@
+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 {
+  KITTY,
+  billCard,
+  evenBadge,
+  fitSoftGround,
+  lockup,
+  mochi,
+  pastelBrand,
+  pastelButton,
+  softGround,
+  ts
+} from "./chunk-I7FRR6IU.js";
+import {
+  put,
+  restyle
+} from "./chunk-QLV6445V.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/style-pastel-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Pastel SaaS link preview";
+var GROUND = { seed: 37, sparkles: 5, scale: 0.4, still: true };
+var style_pastel_link_preview_default = defineTemplate({
+  id: "social-saas-style-pastel-link-preview",
+  meta: {
+    name: NAME,
+    description: "A link preview in the pastel soft UI look: the promise in chunky ink type on a milk ground with chalky pastel blobs, one line on what the app is, and two pillowy product cards beside it (a bill split down the middle over a savings jar) with a round cat mascot peeking over. 1200 \xD7 630, with a 1280 \xD7 640 GitHub social preview and a 1600 \xD7 900 X post",
+    category: "social",
+    tags: ["link preview", "open graph", "og image", "github", "saas", "pastel", "soft ui", "playful", "mascot", "fintech", "consumer app", "couples", "product", "launch"],
+    platforms: ["web", "x", "linkedin", "facebook", "github"],
+    formats: ["og-image", "post"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("og-image"));
+    k.quantizeGeometry = true;
+    pastelBrand(k, { tagline: KITTY.tagline });
+    pastelButton(k, "Tag", { style: ts(k, "title", 22), label: "Start your kitty", pad: [12, 22], d: 0.7 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 50, right: 50, bottom: 50, left: 68 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    softGround(k, sheet, 1200, 630, GROUND);
+    for (const n of k.named(sheet, "Blob 1")) k.patch(n, { x: -260, y: -300 });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", name: "Row" });
+    const copy = k.stack(row, { gap: 22, name: "Copy" });
+    lockup(k, copy, { size: 30, style: ts(k, "title", 30), name: "Lockup" });
+    k.text(copy, "{{brand.tagline}}", { style: ts(k, "display", 92), color: "text", name: "Headline" });
+    k.text(copy, "One shared kitty for rent, groceries and the trip you keep talking about.", { style: ts(k, "body", 26), color: "onPaper", name: "Sub" });
+    const foot = k.stack(copy, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Foot" });
+    k.instance(foot, "Tag", { Label: "Start your kitty" }, { name: "Call" });
+    k.text(foot, "{{brand.site}}", { style: ts(k, "soft", 22), color: "onPaper", autoWidth: true, name: "Site" });
+    const art = k.stack(row, { width: 500, gap: 16, align: "MAX", padding: { top: 96, right: 0, bottom: 0, left: 0 }, name: "Art" });
+    billCard(k, art, 1.1, { width: "FILL" });
+    evenBadge(k, art, 1.1);
+    mochi(k, art, 110, { absolute: { x: 40, y: 0 } });
+    k.variants(sheet, [
+      { preset: "github-social", adjust: (kit, id) => {
+        fitSoftGround(kit, id, GROUND);
+        for (const n of kit.named(id, "Blob 1")) kit.patch(n, { x: -260, y: -300 });
+      } },
+      { preset: "x-post", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 80, right: 80, bottom: 80, left: 96 } });
+        fitSoftGround(kit, id, GROUND);
+        for (const n of kit.named(id, "Blob 1")) kit.patch(n, { x: -300, y: -340 });
+        for (const n of kit.named(id, "Row")) kit.patch(n, { itemSpacing: 64 });
+        for (const n of kit.named(id, "Art")) kit.patch(n, { width: 700, itemSpacing: 22, padding: { top: 130, right: 0, bottom: 0, left: 0 } });
+        put(kit, id, "Mochi", 70, 0);
+        for (const n of kit.named(id, "Mochi")) kit.patch(n, { scaleX: 1.3, scaleY: 1.3 });
+        restyle(kit, id, "Headline", ts(kit, "display", 120));
+        restyle(kit, id, "Sub", ts(kit, "body", 32));
+      } }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  style_pastel_link_preview_default
+};

package/dist/chunks/chunk-H35YLZV2.js

@@ -0,0 +1,102 @@
+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 {
+  diwaliBrand,
+  diyas,
+  hangings,
+  rangoli,
+  reburst,
+  sky
+} from "./chunk-3SRWECFL.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-O24FY473.js";
+import {
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/email/diwali-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4800;
+var cues = [
+  { layer: "Rangoli heart", preset: "pulse", at: 1200, params: { duration: 800, amount: 0.15 } },
+  { layer: "Button", preset: "pulse", at: 3e3, params: { duration: 800, amount: 0.06 } }
+];
+var diwali_header_default = defineTemplate({
+  id: "email-diwali-header",
+  meta: {
+    name: "Diwali email header (animated GIF)",
+    description: "A 600 \xD7 300 animated header for a Diwali email: the greeting, the gift, the code and the button are all on the first frame (for Outlook), beside a festival night where a rangoli lies behind burning clay lamps under rooftops hung with lights; then the flames flicker, a paper lantern sways and fireworks burst again \u2014 a seamless 4.8-second GIF loop",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "diwali", "deepavali", "festival of lights", "diya", "rangoli", "fireworks", "offer", "saas", "seasonal"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["sale", "newsletter", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Diwali email header", HEADER);
+    k.quantizeGeometry = true;
+    diwaliBrand(k, { offer: "A gift for the new year\u2019s books." });
+    k.textStyle("Eyebrow 12", { size: 12, fontWeight: 700, letterSpacing: 2.4, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Offer 30", { ...SERIF, size: 30, fontWeight: 900, letterSpacing: -0.9, lineHeight: 33 });
+    k.textStyle("Account 14", { size: 14, fontWeight: 500, lineHeight: 21 });
+    k.textStyle("Button 14", { size: 14, fontWeight: 800, lineHeight: 20 });
+    pill(k, "Button pill", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "Open a new book", pad: [9, 20], radius: 6 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 9, { top: 34, right: 306, bottom: 20, left: 30 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    const W = 270, H = 272;
+    const s = {
+      w: W,
+      h: H,
+      u: 0.42,
+      loopMs: DURATION,
+      dust: { top: 30, bottom: 110 },
+      fireworks: [{ x: 62, y: 84, r: 40 }, { x: 204, y: 74, r: 44 }],
+      roofs: { y: 132, rise: 56 },
+      rangoli: { x: 135, y: 186, r: 62 },
+      garlands: [],
+      lanterns: [{ x: 244, drop: 44, size: 30 }],
+      diyas: [{ x: 135, y: 268, size: 38 }, { x: 56, y: 262, size: 32 }, { x: 214, y: 262, size: 32 }, { x: 24, y: 214, size: 20 }, { x: 246, y: 214, size: 20 }]
+    };
+    const box = k.stack(sheet, { width: W, height: H, fill: "card", radius: 14, clip: true, name: "Night", absolute: { x: 316, y: 14 } });
+    sky(k, box, s);
+    rangoli(k, box, s.rangoli, s.u);
+    diyas(k, box, s);
+    hangings(k, box, s);
+    k.named(sheet, "Firework").forEach((f, i) => reburst(k, f, [1500, 2900][i], s.u));
+    k.text(sheet, "Happy Diwali from {{brand.name}}", { style: "Eyebrow 12", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "{{brand.offer}}", { style: "Offer 30", color: "text", name: "Offer" });
+    k.text(sheet, "25% off every annual plan with code DIYA25, through the five days of the festival.", { style: "Account 14", color: "onPaper", name: "Account" });
+    k.instance(sheet, "Button pill", { Label: "Open a new book" }, { name: "Button" });
+    hangings(k, sheet, { ...s, w: 600, lanterns: [], garlands: [{ y: 8, sag: 26, swags: 2, flower: 20, toran: true }] });
+    k.cues(sheet, cues);
+    return k.finish();
+  }
+});
+
+export {
+  diwali_header_default
+};