@popcraft/kit 0.44.0 → 0.45.0

package/dist/chunks/chunk-4HBU6TFK.js

@@ -0,0 +1,317 @@
+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 {
+  SALE,
+  chat,
+  clock,
+  drain,
+  lift,
+  liveBadge,
+  liveBrand,
+  nightPill,
+  numerals,
+  pinned,
+  reactions,
+  room
+} from "./chunk-5CKIBZLE.js";
+import {
+  MONO
+} from "./chunk-5OTEBTMU.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-IPGCJWVL.js";
+import {
+  pill
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/web/singles-day-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var LOOP = 1e4;
+var TICKS = 8;
+var W = 480;
+var H = 680;
+var BEZEL = 10;
+var ROOM = {
+  w: W,
+  h: H,
+  u: 0.56,
+  cx: 262,
+  headY: 292,
+  deskY: 468,
+  hand: "left",
+  loopMs: LOOP,
+  bunting: 16,
+  radius: 36,
+  ring: { x: 262, y: 284, r: 124 },
+  balloons: { x: 344, y: 124, h: 140 },
+  parcels: [{ x: 372, w: 150, h: 120, label: true }, { x: 396, w: 96, h: 70, on: 120 }]
+};
+var pct = (l) => Math.round((l.was - l.now) / l.was * 100);
+var money = (n) => `$${n.toLocaleString("en-US")}`;
+var LOTS = [
+  { id: "Month", tag: "LOT 01 \xB7 PINNED", title: "Solo, first month", pitch: "The whole back office for one person. Then $29 a month, and cancelling takes two clicks.", was: SALE.was, now: SALE.now, total: SALE.seats, left: SALE.left, label: "SELLING FAST", includes: ["Invoices chased until they are paid", "Support inbox answered in your voice", "Books closed on the 1st"], cta: "Grab a seat for $11" },
+  { id: "Year", tag: "LOT 02", title: "Solo, a whole year", pitch: "Twelve months of somebody else doing the invoices. Year two renews at the list price.", was: SALE.yearWas, now: SALE.yearNow, total: SALE.seats, left: 57, label: "GOING", includes: ["Everything in the first lot", "A quarterly tax pack for your accountant", "Priority queue"], cta: "Take the year for $111" },
+  { id: "Life", tag: "LOT 03 \xB7 11 ONLY", title: "Solo, for life", pitch: "Pay once and never read a renewal email again. Priced against five years of Solo at the list price.", was: 1740, now: SALE.lifetime, total: SALE.lifetimeSeats, left: 4, label: "NEARLY GONE", includes: ["Every update, for as long as Tandem runs", "A direct line to the founder", "No renewal, ever"], cta: "Claim one of eleven" }
+];
+var ASKED = [
+  ["kai_ships", "heart", "Do I need a code?", "No. The $11 is already on the pinned lot. At 22:11 UTC it goes back to $29, whether or not anyone is watching."],
+  ["ops_of_one", "kraft", "What does it actually do?", "Chases unpaid invoices until they are paid, answers the easy support mail in your voice, and closes the month\u2019s books on the 1st. You approve; it does the typing."],
+  ["marta.dev", "accent", "What if my team of one becomes two?", "Congratulations. Add a seat at the list price whenever you like. Your own first month stays $11."],
+  ["solo_sam", "foilShade", "And when the seats run out?", "Then they are out: 111 first months, 111 years, 11 lifetimes. There is no second batch and no \u201Cextended by popular demand\u201D."]
+];
+var cues = [
+  { layer: "Offer bar", preset: "drop-in", at: 0, params: { duration: 500 } },
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Eyebrow", preset: "rise-in", at: 100 },
+  { layer: "Headline", preset: "rise-in", at: 200, params: { duration: 700 } },
+  { layer: "Lead", preset: "rise-in", at: 350 },
+  { layer: "Ends", preset: "rise-in", at: 500 },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 650, stagger: { delay: 100 } },
+  { layer: "Note", preset: "fade-in", at: 900, params: { duration: 500 } },
+  { layer: "Visual", preset: "pop-in", at: 200, params: { duration: 600, amount: 0.92 } },
+  { layer: "Hero deal", preset: "rise-in", at: 700, params: { duration: 500 } },
+  { layer: "Hero was strike", preset: "wipe-in", at: 1300, params: { duration: 300 } },
+  { layer: "Hero off chip", preset: "pop-in", at: 2200, params: { duration: 350 } },
+  { layer: "Hero price figure", preset: "pulse", at: 2200, params: { duration: 500, amount: 0.1 } },
+  { layer: "Chat 1", preset: "pop-in", at: 2600, params: { duration: 300 } },
+  { layer: "Chat 2", preset: "pop-in", at: 4200, params: { duration: 300 } }
+];
+var counts = [
+  { layer: "Watching figure", at: 300, duration: 2600, counter: { from: 1011, to: 1111, suffix: " watching" } },
+  { layer: "Hero price figure", at: 1300, duration: 900, counter: { from: SALE.was, to: SALE.now, prefix: "$" } },
+  // The flash clock: the seconds tick down once a second for as long as the hero plays.
+  { layer: "Seconds figure", at: 1e3, duration: TICKS * 1e3, tick: 1e3, counter: { from: SALE.seconds, to: SALE.seconds - TICKS } },
+  { layer: "Hero stock figure", at: 1600, duration: 8e3, ease: ease.linear, counter: { from: SALE.left + 26, to: SALE.left, suffix: ` of ${SALE.seats} left` } },
+  ...LOTS.map((l, i) => ({ layer: `${l.id} price figure`, at: 1400 + i * 200, duration: 1400, counter: { from: l.was, to: l.now, prefix: "$" } })),
+  ...LOTS.map((l, i) => ({ layer: `${l.id} stock figure`, at: 1800 + i * 200, duration: 3200, ease: ease.linear, counter: { from: l.total, to: l.left, suffix: ` of ${l.total} left` } }))
+];
+var singles_day_landing_default = defineTemplate({
+  id: "web-singles-day-landing",
+  meta: {
+    name: "Singles Day flash sale landing page",
+    description: "An 11.11 landing page for a SaaS sold to solo founders, run as a live-shopping stream: beside the offer and a flash clock that ticks, a phone shows the stream with the founder as host, a viewer count, floating hearts, chat and a pinned deal whose price counts from $29 to $11 while its \u201Cselling fast\u201D bar runs down. Three lots ($11, $111 and $1,111) with their own stock, and the chat\u2019s questions answered. Desktop to phone",
+    category: "web",
+    tags: ["singles day", "11.11", "double eleven", "flash sale", "landing page", "live shopping", "countdown", "stock", "pricing", "solo founder", "saas", "animation", "website", "responsive", "seasonal"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["sale", "pricing", "countdown"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("Singles Day flash sale landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    liveBrand(k);
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Bar 14", { ...MONO, size: 14, fontWeight: 700, letterSpacing: 0.4, lineHeight: 20, textAlign: "CENTER" });
+    k.textStyle("Eyebrow 14", { ...MONO, size: 14, fontWeight: 700, letterSpacing: 0.8, lineHeight: 20 });
+    k.textStyle("Display 88", { size: 88, fontWeight: 900, letterSpacing: -3.6, lineHeight: 86 });
+    k.textStyle("Display 72", { size: 72, fontWeight: 900, letterSpacing: -2.8, lineHeight: 72 });
+    k.textStyle("Display 60", { size: 60, fontWeight: 900, letterSpacing: -2.2, lineHeight: 62 });
+    k.textStyle("Display 42", { size: 42, fontWeight: 900, letterSpacing: -1.4, lineHeight: 44 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 31 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Ends 13", { ...MONO, size: 13, fontWeight: 700, letterSpacing: 1.2, lineHeight: 18 });
+    k.textStyle("Clock 44", { ...MONO, size: 44, fontWeight: 800, letterSpacing: -1, lineHeight: 48, fontFeatures: { tnum: 1 } });
+    k.textStyle("Clock 30", { ...MONO, size: 30, fontWeight: 800, lineHeight: 34, fontFeatures: { tnum: 1 } });
+    k.textStyle("Unit 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.2, lineHeight: 16 });
+    k.textStyle("Note 15", { size: 15, fontWeight: 400, lineHeight: 22 });
+    k.textStyle("Section 40", { size: 40, fontWeight: 900, letterSpacing: -1.4, lineHeight: 44 });
+    k.textStyle("Section 30", { size: 30, fontWeight: 900, letterSpacing: -1, lineHeight: 34 });
+    k.textStyle("Section lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Body 15", { size: 15, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Include 14", { size: 14, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Asker 13", { ...MONO, size: 13, fontWeight: 700, lineHeight: 18 });
+    k.textStyle("Ask 18", { size: 18, fontWeight: 700, lineHeight: 26 });
+    k.textStyle("Answer 16", { size: 16, fontWeight: 400, lineHeight: 25 });
+    k.textStyle("Footer 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Live 13", { ...MONO, size: 13, fontWeight: 800, letterSpacing: 1.2, lineHeight: 16 });
+    k.textStyle("Watching 13", { ...MONO, size: 13, fontWeight: 700, lineHeight: 16, fontFeatures: { tnum: 1 } });
+    k.textStyle("Chat 14", { size: 14, fontWeight: 600, lineHeight: 18 });
+    k.textStyle("Chat who 12", { ...MONO, size: 12, fontWeight: 700, lineHeight: 18 });
+    k.textStyle("Lot 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 0.6, lineHeight: 16 });
+    k.textStyle("Title 17", { size: 17, fontWeight: 800, letterSpacing: -0.3, lineHeight: 22 });
+    k.textStyle("Price 56", { size: 56, fontWeight: 900, letterSpacing: -2.6, lineHeight: 56, fontFeatures: { tnum: 1 } });
+    k.textStyle("Was 24", { size: 24, fontWeight: 700, letterSpacing: -0.6, lineHeight: 28 });
+    k.textStyle("Stock 12", { ...MONO, size: 12, fontWeight: 800, letterSpacing: 0.4, lineHeight: 16, fontFeatures: { tnum: 1 } });
+    k.textStyle("Chip 14", { ...MONO, size: 14, fontWeight: 800, lineHeight: 18 });
+    k.textStyle("Lot 13", { ...MONO, size: 13, fontWeight: 700, letterSpacing: 1, lineHeight: 18 });
+    k.textStyle("Title 24", { size: 24, fontWeight: 800, letterSpacing: -0.6, lineHeight: 30 });
+    k.textStyle("Price 64", { size: 64, fontWeight: 900, letterSpacing: -3, lineHeight: 66, fontFeatures: { tnum: 1 } });
+    k.textStyle("Stock 13", { ...MONO, size: 13, fontWeight: 800, letterSpacing: 0.4, lineHeight: 18, fontFeatures: { tnum: 1 } });
+    buttons(k, { style: "Button 16", pad: [14, 24], radius: 999 });
+    pill(k, "Marker", { fill: "accent", ink: "onAccent", style: "Eyebrow 14", label: "SINGLES\u2019 DAY \xB7 11.11", pad: [6, 14] });
+    pill(k, "Chip", { fill: "accent", ink: "onAccent", style: "Chip 14", label: "\u221262%", pad: [3, 8], radius: 6 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 56, top: 24 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    const offer = k.stack(sheet, { fill: "primary", radius: 999, padding: { top: 10, right: 20, bottom: 10, left: 20 }, align: "CENTER", name: "Offer bar" });
+    k.text(offer, `LIVE NOW \xB7 Singles\u2019 Day, 11.11 \xB7 Solo\u2019s first month is $${SALE.now} for the first ${SALE.seats} founders \xB7 ends ${SALE.closes}`, { style: "Bar 14", color: "onPrimary", name: "Offer bar text" });
+    nav(k, sheet, { links: ["The stream", "The lots", "The chat", "Sign in"], cta: "Grab a seat", style: "Nav 16", brandStyle: "Brand 20" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", padding: { top: 8, right: 0, bottom: 16, left: 0 }, name: "Hero" });
+    const copy = k.stack(hero, { gap: 24, name: "Copy" });
+    k.instance(copy, "Marker", { Label: "SINGLES\u2019 DAY \xB7 11.11 \xB7 LIVE NOW" }, { name: "Eyebrow" });
+    k.text(copy, "A sale for the team of one.", { style: "Display 88", color: "text", name: "Headline" });
+    k.text(copy, `{{brand.name}} is the back office for a company of one: it chases your invoices, answers the support inbox and closes the month\u2019s books. For eleven hours the Solo plan\u2019s first month is $${SALE.now}, not $${SALE.was}, for the first ${SALE.seats} founders. Treat yourself. Nobody else is going to expense it.`, { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const ends = k.stack(copy, { gap: 8, name: "Ends" });
+    k.text(ends, "THE FLASH DEAL ENDS IN", { style: "Ends 13", color: "onPaper", name: "Ends label" });
+    clock(k, ends, { style: "Clock 44", unit: "Unit 12", seconds: SALE.seconds - TICKS, gap: 10, pad: [12, 0], radius: 14, tile: 104 });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: `Grab a seat for $${SALE.now}` }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "See what it takes off your desk" }, { name: "CTA quiet" });
+    k.text(copy, `Then $${SALE.was} a month. No code to paste, no card until the eleven hours are up, and cancelling takes two clicks.`, { style: "Note 15", color: "onPaper", name: "Note" });
+    const visual = k.stack(hero, { width: W + BEZEL * 2, height: H + BEZEL * 2, name: "Visual" });
+    const phone = k.frame(visual, { x: 0, y: 0, width: W + BEZEL * 2, height: H + BEZEL * 2 }, { name: "Phone", fill: "night", radius: 36 + BEZEL, effects: lift(k, 1.4, 0.34) });
+    const stream = k.frame(phone, { x: BEZEL, y: BEZEL, width: W, height: H }, { name: "Stream" });
+    room(k, stream, ROOM);
+    reactions(k, stream, { w: 76, h: 300, n: 8, u: 0.6, loopMs: LOOP, from: 1800, absolute: { x: 392, y: 150 } });
+    const over = k.stack(stream, { width: W - 36, height: H - 36, justify: "SPACE_BETWEEN", absolute: { x: 18, y: 18 }, name: "Overlay" });
+    const bar = k.stack(over, { direction: "HORIZONTAL", gap: 8, align: "CENTER", name: "Stream bar" });
+    liveBadge(k, bar, { style: "Live 13", dot: 9, pad: [5, 12], loopMs: LOOP });
+    nightPill(k, bar, "1,111 watching", { style: "Watching 13", name: "Watching", pad: [5, 12] });
+    const under = k.stack(over, { gap: 8, name: "Stream foot" });
+    chat(k, under, "lena", "no team? sold.", { style: "Chat 14", whoStyle: "Chat who 12", face: "heart", dot: 20, pad: [6, 12], shadow: 0.3, name: "Chat 1" });
+    chat(k, under, "", "Seat 74 of 111 just went", { style: "Chat 14", whoStyle: "Chat who 12", face: "primary", dot: 20, pad: [6, 12], shadow: 0.3, system: true, name: "Chat 2" });
+    pinned(k, under, {
+      prefix: "Hero",
+      lot: "PINNED \xB7 LOT 01 \xB7 FLASH DEAL",
+      title: "Solo, first month",
+      price: `$${SALE.now}`,
+      was: `$${SALE.was}`,
+      chip: "Chip",
+      saving: `\u2212${SALE.off}%`,
+      left: SALE.left,
+      total: SALE.seats,
+      suffix: ` of ${SALE.seats} left`,
+      styles: { lot: "Lot 12", title: "Title 17", price: "Price 56", was: "Was 24", stock: "Stock 12" },
+      pad: { top: 14, right: 16, bottom: 16, left: 16 },
+      gap: 8,
+      radius: 20,
+      bar: 12,
+      shadow: 0.5,
+      priceGap: 10
+    });
+    const band = k.stack(sheet, { fill: "primary", radius: 28, padding: { top: 48, right: 48, bottom: 52, left: 48 }, gap: 32, name: "Lots band" });
+    const title = k.stack(band, { gap: 8, name: "Lots head" });
+    k.text(title, "Three lots on the shelf. All of them elevens.", { style: "Section 40", color: "onPrimary", name: "Lots title" });
+    k.text(title, "Pick one. The price is already marked down, the bars are real, and the list price comes back when the stream ends.", { style: "Section lead 17", color: "onPrimary", name: "Lots lead" });
+    const lots = k.stack(band, { direction: "HORIZONTAL", gap: 24, name: "Lots" });
+    for (const l of LOTS) {
+      const card = pinned(k, lots, {
+        prefix: l.id,
+        name: "Lot card",
+        lot: l.tag,
+        title: l.title,
+        pitch: l.pitch,
+        price: money(l.now),
+        was: money(l.was),
+        chip: "Chip",
+        saving: l.now < 1e3 ? `\u2212${pct(l)}%` : "",
+        left: l.left,
+        total: l.total,
+        suffix: ` of ${l.total} left`,
+        stockLabel: l.label,
+        styles: { lot: "Lot 13", title: "Title 24", pitch: "Body 15", price: "Price 64", was: "Was 24", stock: "Stock 13" },
+        pad: { top: 26, right: 26, bottom: 26, left: 26 },
+        gap: 14,
+        radius: 24,
+        bar: 14,
+        shadow: 0.7,
+        priceGap: 12
+      });
+      const inc = k.stack(card, { gap: 8, padding: { top: 4, right: 0, bottom: 4, left: 0 }, name: "Includes" });
+      for (const line of l.includes) {
+        const row = k.stack(inc, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Include" });
+        k.ellipse(row, 8, "primary", { name: "Include dot" });
+        k.text(row, line, { style: "Include 14", color: "onCard", name: "Include text" });
+      }
+      k.instance(card, "Button", { Label: l.cta }, { name: "Lot button" });
+    }
+    const asked = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "Asked" });
+    const askedHead = k.stack(asked, { width: 380, gap: 12, name: "Asked head" });
+    k.text(askedHead, "The chat asked. The host answered.", { style: "Section 40", color: "text", name: "Asked title" });
+    k.text(askedHead, "The small print, read out loud. If yours is not here, the support inbox is answered by the product you are about to buy.", { style: "Section lead 17", color: "onPaper", name: "Asked lead" });
+    const date = k.stack(askedHead, { width: 380, height: 150, padding: { top: 16, right: 0, bottom: 0, left: 0 }, name: "Date" });
+    numerals(k, date, { h: 112, absolute: { x: 0, y: 24 }, depth: 12 });
+    const thread = k.stack(asked, { gap: 14, name: "Thread" });
+    for (const [who, face, q, a] of ASKED) {
+      const ask = k.stack(thread, { padding: { top: 0, right: 96, bottom: 0, left: 0 }, name: "Ask row" });
+      const bubble = k.stack(ask, { direction: "HORIZONTAL", gap: 12, align: "CENTER", fill: "card", radius: 22, padding: { top: 12, right: 20, bottom: 12, left: 14 }, effects: lift(k, 0.4, 0.16), name: "Ask" });
+      k.ellipse(bubble, 32, face, { name: "Ask face" });
+      const words = k.stack(bubble, { name: "Ask words" });
+      k.text(words, who, { style: "Asker 13", color: "cardMuted", name: "Asker" });
+      k.text(words, q, { style: "Ask 18", color: "onCard", name: "Question" });
+      const reply = k.stack(thread, { padding: { top: 0, right: 0, bottom: 6, left: 96 }, name: "Answer row" });
+      const said = k.stack(reply, { fill: "night", radius: 22, padding: { top: 14, right: 20, bottom: 16, left: 20 }, gap: 2, name: "Answer" });
+      k.text(said, "HOST", { style: "Asker 13", color: "nightMuted", name: "Host" });
+      k.text(said, a, { style: "Answer 16", color: "nightInk", name: "Answer text" });
+    }
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 16, padding: { top: 8, right: 0, bottom: 0, left: 0 }, name: "Footer" });
+    k.text(foot, "Prices in US dollars, before sales tax. The first month is $11 once per account; monthly and annual plans renew at the list price unless you cancel. Lifetime seats never renew.", { style: "Footer 14", color: "onPaper", name: "Legal" });
+    k.text(foot, "hello@{{brand.site}}", { style: "Footer 14", color: "onPaper", autoWidth: true, name: "Email" });
+    drain(k, sheet, { name: "Hero stock", from: (SALE.left + 26) / SALE.seats, to: SALE.left / SALE.seats, at: 1600, duration: 8e3 });
+    LOTS.forEach((l, i) => drain(k, sheet, { name: `${l.id} stock`, from: 1, to: l.left / l.total, at: 1800 + i * 200, duration: 3200 }));
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Lots", "Asked", "Footer"],
+      restyle: { "Display 88": { laptop: "Display 72", tablet: "Display 60", mobile: "Display 42" }, "Lead 20": { mobile: "Lead 17" }, "Clock 44": { mobile: "Clock 30" }, "Section 40": { mobile: "Section 30" } },
+      gap: { mobile: 40 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
+          for (const n of kit.named(id, "Lots band")) kit.patch(n, { padding: { top: 40, right: 32, bottom: 44, left: 32 } });
+          for (const n of kit.named(id, "Lots")) kit.patch(n, { itemSpacing: 18 });
+          for (const n of kit.named(id, "Asked")) kit.patch(n, { itemSpacing: 48 });
+        }
+        const narrow = size === "tablet" || size === "mobile";
+        if (narrow) {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 40, counterAxisAlignItems: "CENTER" });
+          for (const n of kit.named(id, "Asked")) kit.patch(n, { itemSpacing: 28 });
+          for (const n of kit.named(id, "Asked head")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        }
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Offer bar")) kit.patch(n, { cornerRadius: 18 });
+          for (const n of kit.named(id, "Lots band")) kit.patch(n, { padding: { top: 28, right: 12, bottom: 28, left: 12 }, itemSpacing: 22, cornerRadius: 22 });
+          for (const n of kit.named(id, "Lot card")) kit.patch(n, { padding: { top: 22, right: 20, bottom: 22, left: 20 } });
+          for (const n of kit.named(id, "Ask row")) kit.patch(n, { padding: { top: 0, right: 24, bottom: 0, left: 0 } });
+          for (const n of kit.named(id, "Answer row")) kit.patch(n, { padding: { top: 0, right: 0, bottom: 6, left: 24 } });
+          for (const n of kit.named(id, "Clock tile")) kit.patch(n, { width: 88 });
+        }
+        const pw = W + BEZEL * 2, ph = H + BEZEL * 2, s = size === "mobile" ? 335 / pw : 1;
+        for (const box of kit.named(id, "Visual")) kit.patch(box, { layoutSizingHorizontal: "FIXED", width: Math.round(pw * s), height: Math.round(ph * s) });
+        for (const st of kit.named(id, "Phone")) kit.patch(st, { layoutPositioning: "ABSOLUTE", width: pw, height: ph, x: Math.round(-pw / 2 * (1 - s)), y: Math.round(-ph / 2 * (1 - s)), scaleX: s, scaleY: s });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  singles_day_landing_default
+};

package/dist/chunks/chunk-4IHYMYF4.js

@@ -0,0 +1,163 @@
+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 {
+  NOTE_SHADOW,
+  PLOTLINE,
+  board,
+  desk,
+  dots,
+  draw,
+  hand,
+  marker,
+  pen,
+  redots,
+  refitBoard,
+  refitWindow,
+  sans,
+  sketchBrand,
+  sketchWindow,
+  tidyKeys,
+  underline
+} from "./chunk-VEOFIFBM.js";
+import {
+  clicks,
+  glide
+} from "./chunk-EWHVD52F.js";
+import {
+  place
+} from "./chunk-T3XFQJUI.js";
+import {
+  logoBadge,
+  pill,
+  postVariants
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/social/style-sketch-announcement.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Sketch SaaS announcement post";
+var DURATION = 7e3;
+var TAP = 1800;
+var TIDY = 2e3;
+var UNTIDY = 5400;
+var TIMING = { tidyAt: TIDY, untidyAt: UNTIDY, spread: 45, fly: 600 };
+var WIN = { w: 936, h: 520 };
+var GEO = { noteH: 96, headH: 44, rowGap: 12 };
+var BAR = 74;
+var cues = [
+  { layer: "Kicker", preset: "wobble", at: TIDY + 200, params: { duration: 800, amount: 6 } },
+  { layer: "Tidy button", preset: "pulse", at: TAP, params: { duration: 400, amount: 0.08 } }
+];
+var style_sketch_announcement_default = defineTemplate({
+  id: "motion-saas-style-sketch-announcement",
+  meta: {
+    name: NAME,
+    description: 'An animated release post drawn with a marker in a dotted notebook: "Tidy up is here." over a planning whiteboard where sticky notes lie in a heap; a red underline draws itself, a marker pen taps Tidy up and the notes fly into three columns with a person and a date each, then slide back into the heap and the marks rub out, so it loops. Seven seconds, square with 4:5 and 9:16 cuts',
+    category: "animation",
+    tags: ["animation", "saas", "sketch", "hand-drawn", "whiteboard", "sticky notes", "doodle", "planning", "productivity", "announcement", "release", "changelog", "feature", "post", "loop"],
+    platforms: ["instagram", "x", "linkedin", "threads", "facebook"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["announcement", "changelog", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    sketchBrand(k, { headline: "Tidy up is here." });
+    hand(k, "Brand 32", 32);
+    sans(k, "Label 24", 24, { weight: 600 });
+    hand(k, "Headline 104", 104, { lead: 1.02, spacing: -0.04 });
+    sans(k, "Sub 30", 30, { weight: 500, lead: 1.3 });
+    sans(k, "Note 22", 22, { weight: 700, lead: 1.2 });
+    sans(k, "Meta 18", 18, { weight: 700, lead: 1.2 });
+    hand(k, "Head 24", 24, { lead: 1.15 });
+    sans(k, "Ui 22", 22, { weight: 600, lead: 1.2 });
+    hand(k, "Button 22", 22, { lead: 1.15, spacing: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 26, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    dots(k, sheet);
+    desk(k, sheet, { w: 1080, h: 400, absolute: { x: 0, y: 1500 }, sway: 2 / 7, seed: 6 });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    const brand = k.stack(top, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", name: "Lockup" });
+    logoBadge(k, brand, { fill: "primary", size: 30, pad: 7, radius: 10 });
+    k.text(brand, "{{brand.name}}", { style: "Brand 32", color: "text", autoWidth: true, name: "Brand name" });
+    pill(k, "Release sticky", { fill: "sticky", ink: "stickyInk", style: "Label 24", label: `New in ${PLOTLINE.version}`, pad: [12, 22], radius: 0 });
+    const kick = k.instance(top, "Release sticky", {}, { name: "Kicker" });
+    k.patch(kick, { rotation: 3, effects: [NOTE_SHADOW] });
+    const words = k.stack(sheet, { gap: 24, name: "Words" });
+    const headBox = k.stack(words, { name: "Headline box" });
+    k.text(headBox, "{{brand.headline}}", { style: "Headline 104", color: "text", name: "Headline" });
+    const line = marker(k, headBox, 330, 24, underline(330, 24, { seed: 3 }), { name: "Headline line", color: "red", width: 8, absolute: { x: 0, y: 100 } });
+    k.text(words, "Plotline 2.0 sorts a wall of sticky notes into a plan, with a person and a date on every one.", { style: "Sub 30", color: "onPaper", name: "Sub" });
+    const w = sketchWindow(k, sheet, { w: WIN.w, h: WIN.h, title: "Retro, Monday", style: "Ui 22", button: PLOTLINE.feature, buttonStyle: "Button 22", seed: 7 });
+    const b = board(k, w.body, { w: WIN.w, h: WIN.h - w.bar, noteStyle: "Note 22", metaStyle: "Meta 18", headStyle: "Head 24", geo: GEO });
+    const p = pen(k, w.win, { x: WIN.w - 80, y: WIN.h - 70, size: 110 });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Foot" });
+    k.text(foot, `${PLOTLINE.site}/2.0`, { style: "Label 24", color: "text", autoWidth: true, name: "Link" });
+    k.text(foot, PLOTLINE.trial, { style: "Label 24", color: "onPaper", autoWidth: true, name: "Trial" });
+    k.cues(sheet, cues);
+    draw(k, line, 300, 600, { out: 6300, outDuration: 500 });
+    loop(k, w.win, b.notes, b.geo, p, WIN.w, WIN.h);
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        redots(kit, id);
+        kit.patch(id, { primaryAxisAlignItems: "MIN", itemSpacing: 34 });
+        place(kit, id, "Desk", 243, 1112, 0.55);
+      },
+      vertical: (kit, id) => {
+        redots(kit, id);
+        kit.patch(id, { primaryAxisAlignItems: "MIN", itemSpacing: 34 });
+        refitWindow(kit, id, "Window", 800, 560, 7);
+        refitBoard(kit, id, "Board", 800, 560 - BAR, { ...GEO, noteH: 104 }, TIMING);
+        for (const win of kit.named(id, "Window")) penHome(kit, win, 800, 560);
+        for (const n of kit.named(id, "Foot")) kit.patch(n, { layoutMode: "VERTICAL", itemSpacing: 8 });
+      }
+    }));
+    return k.finish();
+  }
+});
+function loop(k, win, notes, g, p, w, h) {
+  tidyKeys(k, notes, g, TIMING);
+  for (const id of k.named(win, "Column line")) draw(k, id, TIDY + 400, 400, { out: UNTIDY - 300, outDuration: 300 });
+  const shown = (id, on) => k.animate(id, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: on, v: 0, ease: ease.linear }, { t: on + 200, v: 1, ease: ease.hold }, { t: UNTIDY - 200, v: 1, ease: ease.linear }, { t: UNTIDY, v: 0 }]);
+  for (const id of k.named(win, "Column head")) shown(id, TIDY + 300);
+  for (const id of k.named(win, "Note meta")) shown(id, TIDY + 700);
+  void p;
+  penHome(k, win, w, h);
+}
+function penHome(k, win, w, h) {
+  const pid = k.named(win, "Pen")[0], ring = k.named(win, "Tap ring")[0];
+  const rest = { x: w - 80, y: h - 70 };
+  k.patch(pid, { x: rest.x, y: rest.y });
+  const r = k.node(ring);
+  k.patch(ring, { x: rest.x - r.width / 2, y: rest.y - r.height / 2 });
+  const d = { dx: w - 76 - rest.x, dy: 34 - rest.y };
+  const pp = { arrow: pid, ring };
+  glide(k, pp, [{ t: 0, dx: 0, dy: 0 }, { t: 500, dx: 0, dy: 0 }, { t: TAP - 100, ...d }, { t: TIDY + 300, ...d }, { t: TIDY + 1200, dx: 0, dy: 0 }]);
+  clicks(k, pp, [TAP]);
+}
+
+export {
+  style_sketch_announcement_default
+};

package/dist/chunks/chunk-4IK5X6QI.js

@@ -0,0 +1,104 @@
+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 {
+  E,
+  lottieTemplate,
+  roundRect
+} from "./chunk-AWFYNHZP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/lottie/food.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var FOOD = { paper: "#FFF7ED", ink: "#2B1A0E", accent: "#E94F37", yellow: "#FFC23C", green: "#2FA84F", soft: "#FFE3C4", road: "#E8D5BF", white: "#FFFFFF", steam: "#D9C6B0" };
+function wheel(l, parent, cx, cy, r, turns) {
+  const w = l.box(parent, cx - r, cy - r, r * 2, r * 2, "Wheel");
+  l.ring(w, r, r, r - 7, "ink", 14, { name: "Tyre" });
+  l.circle(w, r, r, r * 0.3, "ink", { name: "Hub" });
+  l.line(w, [[r, 12], [r, r * 2 - 12]], "ink", 6, { name: "Spoke" });
+  l.line(w, [[12, r], [r * 2 - 12, r]], "ink", 6, { name: "Spoke" });
+  l.spin(w, turns);
+  return w;
+}
+var foodScooter = lottieTemplate({
+  slug: "courier-on-the-way",
+  sector: "food",
+  role: "loader",
+  size: "spot",
+  duration: 1200,
+  loop: true,
+  name: "Courier on the way",
+  description: "The order-tracking animation for a delivery app: a courier rides a scooter with the food box on the back, wheels turning and the road rushing past \u2014 a 1.2-second seamless loop, 800\xD7600",
+  colors: FOOD,
+  useCases: ["menu"],
+  tags: ["delivery", "scooter", "courier", "order tracking"],
+  build(l) {
+    l.circle(l.sheet, 400, 300, 250, "soft", { name: "Backdrop" });
+    const dashes = l.box(l.sheet, -120, 470, 1080, 12, "Road");
+    for (let i = 0; i < 9; i++) l.rect(dashes, i * 120, 0, 70, 12, "road", { radius: 6, name: "Dash" });
+    l.keys(dashes, "translateX", [[0, 0, E.linear], [1200, -120]]);
+    for (const [y, w, t] of [[250, 90, 0], [300, 130, 400], [350, 70, 800]]) {
+      const s = l.rect(l.sheet, 110, y, w, 10, "road", { radius: 5, name: "Speed line" });
+      l.keys(s, "translateX", [[0, 40, E.hold], [t, 40, E.linear], [t + 400, -60, E.hold], [1200, 40]]);
+      l.opacity(s, [[0, 0, E.hold], [t, 0, E.out], [t + 120, 1, E.in], [t + 400, 0, E.hold], [1200, 0]]);
+    }
+    const bike = l.box(l.sheet, 230, 180, 360, 300, "Scooter");
+    l.vector(bike, [{ pts: roundRect(20, 90, 110, 100, 16), closed: true }], "accent", { name: "Food box" });
+    l.rect(bike, 38, 118, 74, 12, "yellow", { radius: 6, name: "Box stripe" });
+    l.circle(bike, 200, 40, 34, "ink", { name: "Helmet" });
+    l.rect(bike, 176, 38, 40, 14, "yellow", { radius: 7, name: "Visor" });
+    l.shape(bike, [[150, 80], [230, 80], [250, 190], [150, 190]], "green", { name: "Rider" });
+    l.shape(bike, [[60, 200], [300, 200], [330, 250], [40, 250]], "accent", { name: "Body" });
+    l.line(bike, [[290, 200], [320, 110], [350, 110]], "ink", 14, { name: "Handlebar" });
+    l.keys(bike, "translateY", [[0, 0, E.inOut], [300, -6, E.inOut], [600, 0, E.inOut], [900, -6, E.inOut], [1200, 0]]);
+    wheel(l, l.sheet, 290, 440, 44, 2);
+    wheel(l, l.sheet, 540, 440, 44, 2);
+  }
+});
+var foodPreparing = lottieTemplate({
+  slug: "preparing",
+  sector: "food",
+  role: "loader",
+  size: "icon",
+  duration: 2400,
+  loop: true,
+  name: "Preparing your order",
+  description: 'The "preparing" state of a food order: a pot on the flame, its lid rattling and steam curling up \u2014 a 2.4-second seamless loop, 512\xD7512',
+  colors: FOOD,
+  tags: ["cooking", "kitchen", "order status", "loader"],
+  build(l) {
+    for (const [x, t] of [[196, 0], [256, 800], [316, 1600]]) {
+      const s = l.line(l.sheet, [{ x, y: 190 }, { x: x - 18, y: 160, handleIn: { x: x - 18, y: 176 }, handleOut: { x: x - 18, y: 144 } }, { x, y: 130, handleIn: { x, y: 138 }, handleOut: { x, y: 122 } }, { x: x + 18, y: 100, handleIn: { x: x + 18, y: 114 } }], "steam", 14, { name: "Steam" });
+      const late = (2400 - t) / 2400, mid = 0.9 * Math.max(0, 1 - Math.max(0, 2400 - t - 600) / 1400);
+      l.keys(s, "translateY", t === 0 ? [[0, 0, E.linear], [2400, -60]] : [[0, -60 * late, E.linear], [t, -60, E.hold], [t + 1, 0, E.linear], [2400, -60 * late]]);
+      l.opacity(s, t === 0 ? [[0, 0, E.out], [600, 0.9, E.inOut], [2e3, 0, E.hold], [2400, 0]] : [[0, mid, E.inOut], [t - 400, 0, E.hold], [t, 0, E.out], [t + 600, 0.9, E.inOut], [2400, mid]]);
+    }
+    for (const [x, h, t] of [[216, 50, 0], [256, 70, 150], [296, 50, 300]]) {
+      const f = l.shape(l.sheet, [{ x, y: 470 - h }, { x: x + 18, y: 470, handleIn: { x: x + 20, y: 470 - h * 0.4 } }, { x: x - 18, y: 470, handleOut: { x: x - 20, y: 470 - h * 0.4 } }], t === 150 ? "accent" : "yellow", { name: "Flame" });
+      l.pivot(f, 0.5, 1);
+      l.keys(f, "scaleY", [[0, 1, E.inOut], [300 + t, 0.75, E.inOut], [900 + t, 1.1, E.inOut], [1500 + t, 0.8, E.inOut], [2400, 1]]);
+    }
+    l.vector(l.sheet, [{ pts: roundRect(126, 250, 260, 170, 40), closed: true }], "accent", { name: "Pot" });
+    l.rect(l.sheet, 96, 280, 50, 22, "ink", { radius: 11, name: "Handle" });
+    l.rect(l.sheet, 366, 280, 50, 22, "ink", { radius: 11, name: "Handle" });
+    l.rect(l.sheet, 126, 330, 260, 16, "yellow", { name: "Band", opacity: 0.8 });
+    const lid = l.box(l.sheet, 116, 212, 280, 44, "Lid");
+    l.vector(lid, [{ pts: roundRect(0, 16, 280, 28, 14), closed: true }], "ink", { name: "Lid plate" });
+    l.rect(lid, 118, 0, 44, 22, "ink", { radius: 11, name: "Lid knob" });
+    l.pivot(lid, 0.5, 1);
+    l.keys(lid, "rotation", [[0, 0, E.inOut], [150, -4, E.inOut], [300, 3, E.inOut], [450, 0, E.hold], [1200, 0, E.inOut], [1350, -4, E.inOut], [1500, 3, E.inOut], [1650, 0, E.hold], [2400, 0]]);
+    l.keys(lid, "translateY", [[0, 0, E.out], [150, -10, E.in], [300, 0, E.hold], [1200, 0, E.out], [1350, -10, E.in], [1500, 0, E.hold], [2400, 0]]);
+  }
+});
+var FOOD_PACK = [foodScooter, foodPreparing];
+
+export {
+  foodScooter,
+  foodPreparing,
+  FOOD_PACK
+};

package/dist/chunks/chunk-4IX76COZ.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_investor_update_default
+} from "./chunk-6YM4APRA.js";
+import {
+  saas_mail_seed_pitch_default
+} from "./chunk-NFFBT5EF.js";
+import {
+  saas_mail_launch_default
+} from "./chunk-GF5WW7V4.js";
+import {
+  saas_mail_payment_failed_default
+} from "./chunk-SLCHXBBZ.js";
+import {
+  saas_mail_sign_in_code_default
+} from "./chunk-N6N3GAGV.js";
+import {
+  saas_mail_trial_ending_default
+} from "./chunk-XXR6GX6P.js";
+import {
+  saas_mail_waitlist_default
+} from "./chunk-XCROOTYS.js";
+import {
+  saas_mail_changelog_default
+} from "./chunk-HCSTJGEN.js";
+import {
+  saas_mail_day_one_default
+} from "./chunk-SNLAX3A3.js";
+import {
+  saas_mail_day_three_default
+} from "./chunk-2WMMG2PP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.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
+};