@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-26EMRZID.js

@@ -0,0 +1,84 @@
+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 {
+  bullet,
+  mapPaper,
+  metroBrand,
+  nameplate,
+  network,
+  ride
+} from "./chunk-OMO2MNSS.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-6EL7PK63.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/email/transit-map-service-update.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 5e3;
+var cues = [
+  { layer: "Line bullet", preset: "pulse", at: 400, params: { duration: 800, amount: 0.14 } },
+  { layer: "Button", preset: "pulse", at: 3300, params: { duration: 800, amount: 0.06 } }
+];
+var U = 28;
+var transit_map_service_update_default = defineTemplate({
+  id: "email-transit-map-service-update",
+  meta: {
+    name: "Transit map service update email header (animated GIF)",
+    description: "A 600 \xD7 300 animated header for a changelog or launch email, drawn as a metro map: the nameplate, \u201CLine 4 is open.\u201D, one sentence and the button are all on the first frame (for Outlook), beside a four-line network on a folded pocket map; then a train rides the new line from end to end and the button swells once \u2014 a five-second GIF loop in map red, blue, green and yellow on cream",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "transit map", "metro", "subway", "underground", "tube map", "changelog", "release notes", "service update", "integrations", "saas"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["changelog", "announcement", "newsletter", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Transit map service update email header", HEADER);
+    k.quantizeGeometry = true;
+    metroBrand(k, { offer: "Line 4\nis open." });
+    k.textStyle("Plate 12", { size: 12, fontWeight: 800, letterSpacing: 0.4, lineHeight: 16 });
+    k.textStyle("Offer 46", { size: 46, fontWeight: 800, letterSpacing: -2.2, lineHeight: 44 });
+    k.textStyle("Account 14", { size: 14, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Button 14", { size: 14, fontWeight: 800, lineHeight: 20 });
+    k.textStyle("Bullet 16", { size: 16, fontWeight: 800, lineHeight: 20 });
+    pill(k, "Button pill", { fill: "primary", ink: "onPrimary", style: "Button 14", label: "See the new stations", pad: [9, 18], radius: 6 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 10, { top: 24, right: 304, bottom: 24, left: 28 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    mapPaper(k, sheet, 600, 300, { folds: [3, 1] });
+    const net = network(k, sheet, { u: U, label: "Account 14", hub: "Account 14", bare: true, trainOn: 3, at: { x: 306, y: 24 }, west: -0.6 });
+    bullet(k, net.id, 3, 30, "Bullet 16", { name: "Line bullet", absolute: { x: Math.round(6.4 * U), y: Math.round(7.75 * U) } });
+    nameplate(k, sheet, "Service update \xB7 October", { style: "Plate 12", line: 3, pad: [5, 9], name: "Eyebrow" });
+    k.text(sheet, "{{brand.offer}}", { style: "Offer 46", color: "text", name: "Offer" });
+    k.text(sheet, "Product events now reach your CRM and your dashboards in real time. Six new stations.", { style: "Account 14", color: "onPaper", name: "Account" });
+    k.instance(sheet, "Button pill", { Label: "See the new stations" }, { name: "Button" });
+    k.cues(sheet, cues);
+    ride(k, net, 3, 500, 3600, 300);
+    return k.finish();
+  }
+});
+
+export {
+  transit_map_service_update_default
+};

package/dist/chunks/chunk-27XAXJH5.js

@@ -0,0 +1,282 @@
+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 {
+  defineLibrary
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  contrastRatio
+} from "./chunk-U4LTVSLE.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/libraries/motion-essentials.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var INK = hex("#101828");
+var PAPER = hex("#F5F7FB");
+var ACCENT = hex("#2F6BFF");
+var SUCCESS = hex("#12B76A");
+var PRESSED = hex("#2358D6");
+var onInk = (surface) => [hex("#FFFFFF"), INK, PAPER, hex("#000000")].find((c) => contrastRatio(c, surface) >= 4.5) ?? hex("#000000");
+var FPS = 60;
+var marks = (shown, out, end) => [{ id: "in", t: 0, label: "In" }, { id: "shown", t: shown, label: "Shown" }, { id: "out", t: out, label: "Out" }, { id: "end", t: end, label: "End" }];
+var motion_essentials_default = defineLibrary({
+  id: "lib-motion-essentials",
+  version: 1,
+  meta: {
+    name: "Motion essentials",
+    description: "A library of nine motion components \u2014 animated button states, lower third, stat counter, progress ring, loader, toast, badge pop, subscribe CTA and social handle \u2014 with text, number and colour inputs and per-instance timing.",
+    tags: ["animation", "motion", "components", "library", "video", "social"],
+    created: "2026-09-28",
+    updated: "2026-09-29",
+    aliases: ["kit-motion-essentials"]
+  },
+  build() {
+    const k = new Kit("Motion essentials", preset("web-desktop"));
+    k.patch(k.pageId, { name: "Motion essentials" });
+    k.brand({
+      // `text` and `onPaper` are the showcase's inks on the paper: a kit's text, and the muted grey where it still reads.
+      primary: INK,
+      text: INK,
+      onPaper: "#667085",
+      accent: ACCENT,
+      paper: PAPER,
+      card: "#FFFFFF",
+      muted: "#667085",
+      track: "#E4E7EC",
+      success: SUCCESS,
+      // The pressed button's own fill: a role of its own, so its paint binds to what it shows.
+      accentPressed: PRESSED,
+      onAccent: onInk(ACCENT),
+      onSuccess: onInk(SUCCESS),
+      onAccentPressed: onInk(PRESSED)
+    }, { handle: "@popcraft" });
+    k.textStyle("Display 40", { size: 40, fontWeight: 800, lineHeight: 48, letterSpacing: -1 });
+    k.textStyle("Stat 44", { size: 44, fontWeight: 800, lineHeight: 52, letterSpacing: -1 });
+    k.textStyle("Title 18", { size: 18, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Label 15", { size: 15, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Body 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Caption 12", { size: 12, fontWeight: 700, lineHeight: 16, letterSpacing: 0.6 });
+    const shadow = (blur, y, a = 0.14) => ({ id: "e1", type: "DROP_SHADOW", color: { ...INK, a }, offset: { x: 0, y }, blur, spread: 0, visible: true });
+    const hug = { width: "HUG", align: "CENTER" };
+    const label = (parent, prop, style, color) => k.propText(parent, prop, { style, color, autoWidth: true });
+    const glyph = (parent, chars, color, name) => k.text(parent, chars, { style: "Label 15", color, align: "CENTER", autoWidth: true, name });
+    const badge = (parent, size, fill, name) => k.stack(parent, { direction: "HORIZONTAL", width: size, height: size, justify: "CENTER", align: "CENTER", fill, radius: size / 2, name });
+    k.variantSet("Button", "State", ["Idle", "Hover", "Pressed"], {
+      direction: "HORIZONTAL",
+      ...hug,
+      description: "A call to action with idle, hover and pressed states that animate between each other.",
+      props: { Label: "Get started", "Plays on": { motion: "trigger", value: "manual" } }
+    }, (state, id) => {
+      const bg = k.stack(id, {
+        direction: "HORIZONTAL",
+        ...hug,
+        justify: "CENTER",
+        fill: state === "Pressed" ? "accentPressed" : "accent",
+        radius: 12,
+        padding: { top: 14, right: 28, bottom: 14, left: 28 },
+        effects: [shadow(state === "Hover" ? 22 : 10, state === "Hover" ? 10 : 4, state === "Pressed" ? 0.08 : 0.16)],
+        name: "Background"
+      });
+      const text = label(bg, "Label", "Label 15", state === "Pressed" ? "onAccentPressed" : "onAccent");
+      if (state === "Hover") {
+        k.animate(bg, "translateY", [{ t: 0, v: 0, ease: ease.out("cubic") }, { t: 220, v: -3 }]);
+        k.animate(bg, "effects[@e1].blur", [{ t: 0, v: 10, ease: ease.out("expo") }, { t: 600, v: 22 }]);
+        k.animate(text, "translateX", [{ t: 0, v: 0, ease: ease.back(1.9) }, { t: 320, v: 2 }]);
+      }
+      if (state === "Pressed") for (const axis of ["scaleX", "scaleY"]) k.animate(bg, axis, [{ t: 0, v: 1, ease: ease.out("quad") }, { t: 90, v: 0.97 }]);
+    }, (state) => ({ timeline: { duration: state === "Hover" ? 600 : 400, fps: FPS } }));
+    k.changeTo("Button/Idle", "ON_HOVER", "Button/Hover", 180);
+    k.changeTo("Button/Hover", "ON_PRESS", "Button/Pressed", 90);
+    k.component("Lower third", {
+      direction: "HORIZONTAL",
+      ...hug,
+      timeline: { duration: 4e3, fps: FPS, markers: marks(700, 3300, 4e3) },
+      description: "A name and title for video: slides in, holds, slides out. Play a range (In, Out) to use just one part.",
+      props: { Name: "Ada Lovelace", Title: "Head of Research", "Plays on": { motion: "trigger", value: "load" } }
+    }, (id) => {
+      const bar = k.stack(id, { direction: "HORIZONTAL", ...hug, gap: 14, fill: "card", radius: 10, padding: { top: 12, right: 22, bottom: 12, left: 12 }, effects: [shadow(24, 8)], name: "Bar" });
+      const accent = k.rect(bar, 6, 52, "accent", { radius: 3, name: "Accent" });
+      k.patch(accent, { anchorX: 0.5, anchorY: 1 });
+      const copy = k.stack(bar, { width: "HUG", gap: 2, name: "Copy" });
+      const name = label(copy, "Name", "Title 18", "primary"), title = label(copy, "Title", "Body 14", "muted");
+      k.animate(bar, "translateX", [{ t: 0, v: -48, ease: ease.out("expo") }, { t: 600, v: 0, ease: ease.named("cubic", "in") }, { t: 3300, v: 0 }, { t: 3900, v: -48 }]);
+      k.animate(bar, "opacity", [{ t: 0, v: 0, ease: ease.out("quad") }, { t: 300, v: 1 }, { t: 3600, v: 1 }, { t: 3950, v: 0 }]);
+      k.animate(accent, "scaleY", [{ t: 100, v: 0, ease: ease.back(1.9) }, { t: 560, v: 1 }]);
+      k.animate(name, "opacity", [{ t: 180, v: 0, ease: ease.out("cubic") }, { t: 520, v: 1 }]);
+      k.animate(title, "opacity", [{ t: 300, v: 0, ease: ease.out("cubic") }, { t: 660, v: 1 }]);
+      k.animate(title, "translateY", [{ t: 300, v: 6, ease: ease.out("cubic") }, { t: 660, v: 0 }]);
+    });
+    k.component("Stat counter", {
+      ...hug,
+      timeline: { duration: 1400, fps: FPS },
+      description: "A figure with its label and a bar that fills to Percent (0\u2013100). The figure is text: counting up waits for text animators.",
+      props: { Value: "72%", Label: "Weekly active users", Percent: { number: 72, min: 0, max: 100, step: 1 } }
+    }, (id) => {
+      const card = k.stack(id, { width: "HUG", gap: 8, fill: "card", radius: 16, padding: { top: 20, right: 24, bottom: 24, left: 24 }, effects: [shadow(24, 8, 0.1)], name: "Card" });
+      const value = label(card, "Value", "Stat 44", "primary"), caption = label(card, "Label", "Body 14", "muted");
+      const track = k.stack(card, { direction: "HORIZONTAL", width: 240, height: 8, align: "CENTER", fill: "track", radius: 4, name: "Track" });
+      const fill = k.rect(track, 172.8, 8, "accent", { radius: 4, name: "Fill" });
+      k.animate(value, "translateY", [{ t: 0, v: 16, ease: ease.out("expo") }, { t: 700, v: 0 }]);
+      k.animate(value, "opacity", [{ t: 0, v: 0, ease: ease.out("quad") }, { t: 300, v: 1 }]);
+      k.animate(caption, "opacity", [{ t: 150, v: 0, ease: ease.out("quad") }, { t: 500, v: 1 }]);
+      k.animate(fill, "width", [{ t: 200, v: 0, ease: ease.out("expo") }, { t: 1300, v: 172.8 }]);
+      k.bindKey(fill, "width", 1300, { prop: "Percent", mul: 2.4 });
+    });
+    const D = 132, W = 12;
+    k.component("Progress ring", {
+      ...hug,
+      timeline: { duration: 1200, fps: FPS },
+      description: "A ring that fills clockwise to Percent (0\u2013100), with a caption and a label.",
+      props: { Percent: { number: 72, min: 0, max: 100, step: 1 }, Caption: "72%", Label: "Storage used" }
+    }, (id) => {
+      const card = k.stack(id, { ...hug, gap: 12, fill: "card", radius: 16, padding: { top: 20, right: 28, bottom: 20, left: 28 }, effects: [shadow(24, 8, 0.1)], name: "Card" });
+      const dial = k.stack(card, { direction: "HORIZONTAL", width: D, height: D, align: "CENTER", name: "Dial" });
+      const ring = (parent, color, name) => k.ellipse(parent, D, [], { stroke: { color, width: W, align: "INSIDE", cap: "NONE", join: "MITER" }, absolute: { x: 0, y: 0 }, name });
+      const half = (parent, x, name) => k.stack(parent, { direction: "HORIZONTAL", width: D / 2, height: D, align: "CENTER", clip: true, absolute: { x, y: 0 }, name });
+      ring(dial, "track", "Track");
+      const arcB = half(half(dial, 0, "Left half"), 0, "Arc B");
+      ring(arcB, "accent", "Ring B");
+      const arcA = half(half(dial, D / 2, "Right half"), -D / 2, "Arc A");
+      ring(arcA, "accent", "Ring A");
+      k.patch(arcA, { anchorX: 1, anchorY: 0.5, rotation: 180 });
+      k.patch(arcB, { anchorX: 1, anchorY: 0.5, rotation: -100.8 });
+      const caption = k.propText(dial, "Caption", { style: "Title 18", color: "primary", width: D, align: "CENTER", absolute: { x: 0, y: D / 2 - 12 } });
+      label(card, "Label", "Body 14", "muted");
+      k.animate(arcA, "rotation", [{ t: 0, v: 0, ease: ease.out("cubic") }, { t: 1100, v: 259.2 }]);
+      k.bindKey(arcA, "rotation", 1100, { prop: "Percent", mul: 3.6 });
+      k.behave(arcA, "rotation", [{ kind: "clamp", min: 0, max: 180 }]);
+      k.animate(arcB, "rotation", [{ t: 0, v: -360, ease: ease.out("cubic") }, { t: 1100, v: -100.8 }]);
+      k.bindKey(arcB, "rotation", 1100, { prop: "Percent", mul: 3.6, add: -360 });
+      k.behave(arcB, "rotation", [{ kind: "clamp", min: -180, max: 0 }]);
+      k.animate(caption, "opacity", [{ t: 300, v: 0, ease: ease.out("quad") }, { t: 700, v: 1 }]);
+    });
+    k.component("Loader", {
+      direction: "HORIZONTAL",
+      ...hug,
+      timeline: { duration: 900, fps: FPS },
+      description: "Three dots that bounce in turn, for as long as something loads.",
+      props: { Loop: { motion: "loop", value: "loop" }, Speed: { motion: "speed", value: 1 }, Start: { motion: "start", value: 0 } }
+    }, (id) => {
+      const row2 = k.stack(id, { direction: "HORIZONTAL", ...hug, gap: 8, padding: { top: 14, right: 4, bottom: 4, left: 4 }, name: "Dots" });
+      for (const i of [1, 2, 3]) {
+        const dot = k.ellipse(row2, 12, "accent", { name: `Dot ${i}` });
+        k.animate(dot, "translateY", [{ t: 0, v: 0, ease: ease.out("quad") }, { t: 220, v: -12, ease: ease.named("quad", "in") }, { t: 440, v: 0 }]);
+        k.animate(dot, "opacity", [{ t: 0, v: 0.45, ease: ease.out("quad") }, { t: 220, v: 1, ease: ease.named("quad", "in") }, { t: 440, v: 0.45 }]);
+      }
+      k.stagger(row2, 140);
+    });
+    k.component("Toast", {
+      ...hug,
+      timeline: { duration: 3400, fps: FPS, markers: marks(500, 2800, 3400) },
+      description: "A notification that rises in, stays, and leaves. Play In \u2192 Shown to leave it up.",
+      props: { Title: "Changes saved", Message: "Everyone on the file sees the new version.", "Plays on": { motion: "trigger", value: "load" } }
+    }, (id) => {
+      const card = k.stack(id, { direction: "HORIZONTAL", ...hug, gap: 12, fill: "card", radius: 12, padding: { top: 14, right: 20, bottom: 14, left: 14 }, effects: [shadow(28, 12, 0.16)], name: "Card" });
+      const icon = badge(card, 28, "success", "Icon");
+      glyph(icon, "\u2713", "onSuccess", "Check");
+      const copy = k.stack(card, { width: "HUG", gap: 2, name: "Copy" });
+      label(copy, "Title", "Label 15", "primary");
+      label(copy, "Message", "Body 14", "muted");
+      k.animate(card, "translateY", [{ t: 0, v: 28, ease: ease.back(1.9) }, { t: 480, v: 0, ease: ease.named("cubic", "in") }, { t: 2800, v: 0 }, { t: 3300, v: 20 }]);
+      k.animate(card, "opacity", [{ t: 0, v: 0, ease: ease.out("quad") }, { t: 220, v: 1 }, { t: 3e3, v: 1 }, { t: 3300, v: 0 }]);
+      for (const axis of ["scaleX", "scaleY"]) k.animate(icon, axis, [{ t: 160, v: 0, ease: ease.back(2.2) }, { t: 520, v: 1 }]);
+    });
+    k.component("Badge pop", {
+      direction: "HORIZONTAL",
+      ...hug,
+      padding: 12,
+      timeline: { duration: 900, fps: FPS },
+      description: "A label that pops in with overshoot and a spreading glow. Color sets the badge.",
+      props: { Label: "NEW", Color: { color: "accent" } }
+    }, (id) => {
+      const pill = k.stack(id, { direction: "HORIZONTAL", ...hug, fill: "accent", radius: 999, padding: { top: 6, right: 12, bottom: 6, left: 12 }, effects: [shadow(0, 0, 0)], name: "Badge" });
+      k.bindPath(pill, "fills[#0].color", "Color");
+      label(pill, "Label", "Caption 12", "onAccent");
+      for (const axis of ["scaleX", "scaleY"]) k.animate(pill, axis, [{ t: 0, v: 0, ease: ease.back(2.4) }, { t: 450, v: 1 }]);
+      k.animate(pill, "effects[@e1].spread", [{ t: 150, v: 0, ease: ease.out("expo") }, { t: 850, v: 10 }]);
+      k.animate(pill, "effects[@e1].blur", [{ t: 150, v: 0, ease: ease.out("expo") }, { t: 850, v: 12 }]);
+      k.animate(pill, "effects[@e1].color", [{ t: 150, v: { ...INK, a: 0.3 }, ease: ease.out("quad") }, { t: 850, v: { ...INK, a: 0 } }]);
+    });
+    k.component("Subscribe CTA", {
+      direction: "HORIZONTAL",
+      ...hug,
+      timeline: { duration: 1e3, fps: FPS },
+      description: "A subscribe button: its badge wiggles and the pill swells when it plays (on hover by default).",
+      props: { Label: "Subscribe", Count: "12.4K", Accent: { color: "accent" }, "Plays on": { motion: "trigger", value: "hover" } }
+    }, (id) => {
+      const pill = k.stack(id, { direction: "HORIZONTAL", ...hug, gap: 10, fill: "accent", radius: 999, padding: { top: 12, right: 22, bottom: 12, left: 18 }, effects: [shadow(18, 6, 0.18)], name: "Pill" });
+      k.bindPath(pill, "fills[#0].color", "Accent");
+      const bell = badge(pill, 22, "card", "Icon");
+      glyph(bell, "+", "primary", "Plus");
+      label(pill, "Label", "Label 15", "onAccent");
+      const count = label(pill, "Count", "Caption 12", "onAccent");
+      const wiggle = [0, 18, -14, 9, -5];
+      k.animate(bell, "rotation", [...wiggle.map((v, i) => ({ t: [0, 120, 260, 400, 540][i], v, ease: ease.inOut("sine") })), { t: 680, v: 0 }]);
+      for (const axis of ["scaleX", "scaleY"]) k.animate(pill, axis, [{ t: 0, v: 1, ease: ease.out("cubic") }, { t: 180, v: 1.06, ease: ease.inOut("cubic") }, { t: 520, v: 1 }]);
+      k.animate(count, "translateY", [{ t: 200, v: -6, ease: ease.back(1.9) }, { t: 560, v: 0 }]);
+    });
+    k.component("Social handle", {
+      direction: "HORIZONTAL",
+      ...hug,
+      timeline: { duration: 1100, fps: FPS },
+      description: "Your handle as a tag: the @ drops in and the name unrolls, when it comes into view.",
+      props: { Handle: "{{brand.handle}}", "Plays on": { motion: "trigger", value: "inView" } }
+    }, (id) => {
+      const tag = k.stack(id, { direction: "HORIZONTAL", ...hug, gap: 10, fill: "card", radius: 999, padding: { top: 6, right: 18, bottom: 6, left: 6 }, effects: [shadow(16, 6, 0.12)], name: "Tag" });
+      k.patch(tag, { anchorX: 0, anchorY: 0.5 });
+      const mark = badge(tag, 30, "accent", "Mark");
+      glyph(mark, "@", "onAccent", "At");
+      const handle = label(tag, "Handle", "Label 15", "primary");
+      k.animate(tag, "scaleX", [{ t: 0, v: 0.2, ease: ease.out("expo") }, { t: 700, v: 1 }]);
+      k.animate(tag, "opacity", [{ t: 0, v: 0, ease: ease.out("quad") }, { t: 200, v: 1 }]);
+      k.animate(mark, "translateY", [{ t: 100, v: -24, ease: ease.named("bounce", "out") }, { t: 700, v: 0 }]);
+      k.animate(handle, "opacity", [{ t: 350, v: 0, ease: ease.out("cubic") }, { t: 800, v: 1 }]);
+      k.animate(handle, "translateX", [{ t: 350, v: -8, ease: ease.out("cubic") }, { t: 800, v: 0 }]);
+    });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Motion essentials");
+    k.flowSheet(sheet, 40, { top: 72, right: 80, bottom: 80, left: 80 }, "paper", "MIN", "MIN");
+    k.patch(sheet, { width: 1440, height: 880 });
+    k.timeline(sheet, { duration: 4e3, fps: FPS });
+    k.text(sheet, "Motion essentials", { style: "Display 40", color: "text", autoWidth: true, name: "Title" });
+    k.text(sheet, "Nine motion components. Each instance plays its own timeline \u2014 its own start, speed, loop and trigger \u2014 with its own words, numbers and colours.", { style: "Body 14", color: "onPaper", name: "Intro" });
+    const row = (name) => k.stack(sheet, { direction: "HORIZONTAL", ...hug, gap: 32, name });
+    const buttons = row("Buttons");
+    k.instance(buttons, "Button", { Label: "Get started" });
+    k.instance(buttons, "Subscribe CTA", { Label: "Subscribe", Count: "12.4K", Accent: hex("#E5484D") });
+    k.instance(buttons, "Subscribe CTA", { Label: "Follow", Count: "3.1K" }, { playback: { trigger: "load", start: 900 } });
+    k.instance(buttons, "Badge pop", { Label: "NEW" }, { playback: { start: 300 } });
+    k.instance(buttons, "Badge pop", { Label: "LIVE", Color: hex("#E5484D") }, { playback: { start: 700 } });
+    k.instance(buttons, "Social handle", { Handle: "{{brand.handle}}" });
+    const video = row("Video");
+    k.instance(video, "Lower third", { Name: "Ada Lovelace", Title: "Head of Research" }, { playback: { range: ["in", "shown"] } });
+    k.instance(video, "Toast", {}, { playback: { start: 400 } });
+    const data = row("Data");
+    k.instance(data, "Stat counter", { Value: "72%", Label: "Weekly active users", Percent: 72 });
+    k.instance(data, "Stat counter", { Value: "38%", Label: "Trial conversion", Percent: 38 }, { playback: { start: 250 } });
+    k.instance(data, "Progress ring", { Percent: 72, Caption: "72%", Label: "Storage used" });
+    k.instance(data, "Progress ring", { Percent: 45, Caption: "45%", Label: "Course progress" }, { playback: { start: 300, speed: 0.7 } });
+    const loading = row("Loading");
+    k.instance(loading, "Loader");
+    k.instance(loading, "Loader", {}, { playback: { speed: 1.6 } });
+    k.instance(loading, "Loader", {}, { playback: { start: 450, loop: "pingpong" } });
+    return k.finish();
+  }
+});
+
+export {
+  motion_essentials_default
+};

package/dist/chunks/chunk-2AOG3QJA.js

@@ -0,0 +1,139 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  ARIAL,
+  MAIL_W,
+  callToAction,
+  finishMail,
+  mailButton,
+  mailFooter,
+  mailHeader,
+  mailRow,
+  mailSheet,
+  section,
+  swell
+} from "./chunk-V3LQLKM6.js";
+import {
+  burstPath,
+  dotPaths,
+  tick
+} from "./chunk-YNOCYFZ4.js";
+import {
+  hardShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/email/saas-mail-launch.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 5e3;
+var HEADER_H = 420;
+var TEETH = 18;
+var cues = [
+  { layer: "Draft flag", preset: "pulse", at: 900, params: { duration: 700, amount: 0.08 } },
+  { layer: "Sticker words", preset: "wobble", at: 2600, params: { duration: 800 } }
+];
+var THINGS = [
+  ["LISTENS", "Joins the call, or reads the recording", "Zoom, Meet and Teams. If you would rather have no bot in the room, upload the recording afterwards."],
+  ["DRAFTS", "Writes the follow-up before you stand up", "Decisions, owners and dates, in your own tone, waiting in Gmail or Outlook for you to edit and send."],
+  ["CHASES", "Nudges an owner when a date slips", "One quiet reminder on the due day. Nothing at all if the task is already ticked."]
+];
+var saas_mail_launch_default = defineTemplate({
+  id: "email-saas-mail-launch",
+  meta: {
+    name: "SaaS lifecycle email: launch announcement",
+    description: `A whole 600 px launch email in a neo-brutalist look: "It's live." on a yellow field with a turning sticker and the product's one hero in a hard-shadowed window, then the three things it does and a single button. The header loops for five seconds (export it as a GIF); the body is table-safe type`,
+    category: "email",
+    tags: ["email", "saas", "lifecycle", "launch", "announcement", "product launch", "neo-brutalist", "animated", "gif", "html"],
+    platforms: ["email"],
+    formats: ["email"],
+    useCases: ["launch", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("SaaS lifecycle email: launch announcement", preset("email-body"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FFFDF4", text: "#111111", onPaper: "#3F3B33", primary: "#FFD21F", onPrimary: "#111111", accent: "#FF5C8A", onAccent: "#111111" },
+      { company: "Minutely", address: "18 Shoreditch High St, London E1 6JE" }
+    );
+    k.palette({ edge: "#111111", onEdge: "#FFFDF4", card: "#FFFFFF", onCard: "#111111", soft: "#55524A", wash: "#F3EFE2", mint: "#8DE8C2" });
+    k.textStyle("Live 108", { size: 108, fontWeight: 900, letterSpacing: -6, lineHeight: 100 });
+    k.textStyle("Kicker 13", { size: 13, fontWeight: 800, letterSpacing: 1.5, lineHeight: 16 });
+    k.textStyle("Sticker 20", { size: 20, fontWeight: 900, letterSpacing: -0.5, lineHeight: 20, textAlign: "CENTER" });
+    k.textStyle("UI title 15", { size: 15, fontWeight: 800, lineHeight: 20 });
+    k.textStyle("UI 13", { size: 13, fontWeight: 500, lineHeight: 19 });
+    k.textStyle("UI label 12", { size: 12, fontWeight: 800, letterSpacing: 1, lineHeight: 14 });
+    k.textStyle("Heading 28", { ...ARIAL, size: 28, fontWeight: 700, lineHeight: 34 });
+    k.textStyle("Body 16", { ...ARIAL, size: 16, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Verb 13", { ...ARIAL, size: 13, fontWeight: 700, letterSpacing: 1.5, lineHeight: 16 });
+    k.textStyle("Thing 18", { ...ARIAL, size: 18, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Small 15", { ...ARIAL, size: 15, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Button 17", { ...ARIAL, size: 17, fontWeight: 700, lineHeight: 22 });
+    k.textStyle("Fine 13", { ...ARIAL, size: 13, fontWeight: 400, lineHeight: 19 });
+    mailButton(k, "Mail button", { fill: "accent", ink: "onAccent", style: "Button 17", label: "Try it on your next meeting", width: 320, height: 56 });
+    const sheet = mailSheet(k, { paper: "paper", duration: DURATION });
+    const head = mailHeader(k, sheet, HEADER_H, "primary");
+    k.vector(head, MAIL_W, HEADER_H, dotPaths(MAIL_W, HEADER_H, 20, 3), "edge", { name: "Dots", absolute: { x: 0, y: 0 }, opacity: 0.16 });
+    const kicker = k.stack(head, { direction: "HORIZONTAL", width: "HUG", fill: "edge", padding: { top: 6, right: 12, bottom: 6, left: 12 }, name: "Kicker", absolute: { x: 36, y: 34 } });
+    k.text(kicker, "{{brand.company}} 1.0 \xB7 2 OCTOBER 2026", { style: "Kicker 13", color: "onEdge", autoWidth: true, name: "Kicker words" });
+    k.text(head, "It\u2019s live.", { style: "Live 108", color: "onPrimary", width: 520, name: "Live", absolute: { x: 30, y: 66 } });
+    const sticker = k.stack(head, { width: 132, height: 132, align: "CENTER", justify: "CENTER", name: "Sticker", absolute: { x: 438, y: 26 } });
+    const teeth = k.vector(sticker, 132, 132, [burstPath(132, TEETH, 0.13)], "accent", { name: "Sticker teeth", stroke: { color: "edge", width: 3, align: "CENTER" }, effects: [hardShadow(k, "edge", 5, 5)], absolute: { x: 0, y: 0 } });
+    k.behave(teeth, "rotation", [{ kind: "spin", rate: 360 / TEETH * 1e3 / DURATION }]);
+    k.text(sticker, "OPEN\nTO ALL", { style: "Sticker 20", color: "onAccent", name: "Sticker words" });
+    const win = k.stack(head, { width: 528, fill: "card", stroke: { color: "edge", width: 3, align: "INSIDE" }, effects: [hardShadow(k, "edge", 9, 9)], name: "Window", absolute: { x: 36, y: 196 } });
+    const bar = k.stack(win, { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", fill: "edge", padding: { top: 10, right: 14, bottom: 10, left: 14 }, name: "Window bar" });
+    k.text(bar, "Design review \xB7 Thu 1 Oct \xB7 32 min", { style: "UI label 12", color: "onEdge", autoWidth: true, name: "Meeting" });
+    const flag = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 6, align: "CENTER", fill: "mint", padding: { top: 4, right: 9, bottom: 4, left: 8 }, name: "Draft flag" });
+    tick(k, flag, 12, "edge");
+    k.text(flag, "DRAFT READY", { style: "UI label 12", color: "onCard", autoWidth: true, name: "Flag words" });
+    const mail = k.stack(win, { padding: { top: 16, right: 20, bottom: 40, left: 20 }, gap: 8, name: "Draft" });
+    k.text(mail, "To: Priya, Marcus, Jun     Subject: What we decided on checkout", { style: "UI 13", color: "soft", name: "To" });
+    k.rect(mail, "FILL", 2, "edge", { name: "Draft rule" });
+    k.text(mail, "Three decisions from today:", { style: "UI title 15", color: "onCard", name: "Draft opening" });
+    for (const [who, what] of [["Priya", "ships the one-page checkout to 10% of traffic by Friday 9 Oct"], ["Marcus", "pulls refund reasons for September before Tuesday"], ["Jun", "books the pricing review for the week of the 12th"]]) {
+      const row = k.stack(mail, { direction: "HORIZONTAL", gap: 10, align: "MIN", name: "Draft line" });
+      const tagBox = k.stack(row, { direction: "HORIZONTAL", width: 64, justify: "CENTER", fill: "wash", padding: { top: 2, right: 0, bottom: 2, left: 0 }, stroke: { color: "edge", width: 1.5, align: "INSIDE" }, name: "Owner" });
+      k.text(tagBox, who, { style: "UI label 12", color: "onCard", autoWidth: true, name: "Owner name" });
+      k.text(row, what, { style: "UI 13", color: "onCard", name: "Decision" });
+    }
+    swell(k, win, "translateY", { amp: 4, loopMs: DURATION, cycles: 1 });
+    const intro = section(k, sheet, { name: "Intro", pad: [40, 40, 12, 40], gap: 12 });
+    k.text(intro, "{{brand.company}} is open to everyone today.", { style: "Heading 28", color: "text", name: "Heading" });
+    k.text(intro, "For eight months, 340 beta teams have left meetings with the follow-up already written. From today there is no waitlist: connect a calendar and it starts with your next call.", { style: "Body 16", color: "onPaper", name: "Intro words" });
+    const things = section(k, sheet, { name: "What it does", pad: [16, 40, 12, 40], gap: 20 });
+    for (const [verb, title, note] of THINGS) {
+      const row = mailRow(k, things, { name: "Thing", gap: 18 });
+      const cell = k.stack(row, { width: 104, name: "Verb cell" });
+      const block = k.stack(cell, { fill: "primary", padding: { top: 10, right: 0, bottom: 10, left: 0 }, name: "Verb block" });
+      k.text(block, verb, { style: "Verb 13", color: "onPrimary", align: "CENTER", name: "Verb" });
+      const words = k.stack(row, { width: "FILL", gap: 4, name: "Thing words" });
+      k.text(words, title, { style: "Thing 18", color: "text", name: "Thing title" });
+      k.text(words, note, { style: "Small 15", color: "onPaper", name: "Thing note" });
+    }
+    callToAction(k, sheet, { button: "Mail button", label: "Try it on your next meeting", pad: [28, 40, 36, 40], note: "Free for ten meetings a month. No card, and nothing is sent without you pressing send.", noteStyle: "Small 15", noteInk: "onPaper" });
+    mailFooter(k, sheet, { style: "Fine 13", ink: "onPaper", rule: "text", why: "You are getting this because you asked to hear when {{brand.company}} launched." });
+    k.cues(sheet, cues);
+    return finishMail(k, sheet);
+  }
+});
+
+export {
+  saas_mail_launch_default
+};