@popcraft/kit 0.27.0 → 0.28.0

package/dist/chunks/chunk-SC7XIHBW.js

@@ -0,0 +1,311 @@
+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 {
+  caret,
+  faceSlot
+} from "./chunk-YNOCYFZ4.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  compactNav,
+  footer,
+  respond,
+  rule,
+  soft,
+  typeScale
+} from "./chunk-NRSNYFX3.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-WBZ6O2YF.js";
+import {
+  Kit,
+  preset
+} from "./chunk-MTD3UAQT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/saas-ai-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var PROMPT = "Six-week brand refresh for Kiln & Co. Around $18k, starting 3 March. They liked the Ostra case study.";
+var FEES = [["Discovery and audit", "Weeks 1\u20132", "$4,200"], ["Identity and guidelines", "Weeks 3\u20135", "$9,800"], ["Rollout and handover", "Week 6", "$3,600"]];
+var INDEX = [
+  ["Proposals", "Scope, timeline, fee table and terms, in the order a client reads them.", "40 sec"],
+  ["Statements of work", "Deliverables and sign-off points lifted from the proposal they said yes to.", "25 sec"],
+  ["Follow-ups", "The nudge on day four, written so it does not read like a nudge.", "8 sec"],
+  ["Change requests", "What was asked for, what it adds, and the new date, on one page.", "20 sec"],
+  ["Case studies", "The finished job as a story, with the numbers the client approved.", "90 sec"]
+];
+var NOTES = ["kiln & co \u2014 brand refresh??", "6 wks, start 3 mar", '~18k (they said "under 20")', "logo stays. type + colour + packaging", "mention ostra \u2014 31% repeat orders", "half up front"];
+var VOICE = [
+  ["Twelve past proposals", "Drop in what you have already sent. It keeps your structure and the way you open."],
+  ["Your rate card", "Day rates, minimums and what you never discount. Fee tables add up the way yours do."],
+  ["How you sign off", "\u201CSpeak soon\u201D, not \u201CBest regards\u201D. It does not put words in your mouth that you would not say."]
+];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Dateline", preset: "fade-in", at: 100, params: { duration: 600 } },
+  { layer: "Headline", preset: "words-in", at: 200, params: { duration: 600 } },
+  { layer: "Lead", preset: "rise-in", at: 600 },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 750, stagger: { delay: 100 } },
+  { layer: "Proof", preset: "fade-in", at: 1e3, params: { duration: 500 } },
+  { layer: "Desk", preset: "rise-in", at: 400, params: { duration: 800 } },
+  { layer: "Prompt text", preset: "typewriter", at: 1e3, params: { duration: 1600 } },
+  { layer: "Send", preset: "pulse", at: 2650, params: { duration: 500, amount: 0.18 } },
+  { layer: "Draft", preset: "rise-in", at: 2900, params: { duration: 500 } },
+  { layer: "Draft title", preset: "words-in", at: 3050, params: { duration: 500 } },
+  { layer: "Draft opening", preset: "words-in", at: 3250, params: { duration: 300, amount: 20 } },
+  { layer: "Fee row", preset: "fade-in", at: 4400, params: { duration: 250 }, stagger: { delay: 150 } },
+  { layer: "Fee total row", preset: "fade-in", at: 4850, params: { duration: 250 } },
+  { layer: "Highlight", preset: "wipe-in", at: 5400, params: { duration: 250 } },
+  { layer: "Margin note", preset: "pop-in", at: 5500, params: { duration: 400 } }
+];
+var counts = [{ layer: "Fee total", at: 4850, duration: 550, counter: { from: 0, to: 17600, prefix: "$" } }];
+var saas_ai_landing_default = defineTemplate({
+  id: "web-saas-ai-landing",
+  meta: {
+    name: "SaaS AI tool landing page",
+    description: "A landing page for an AI writing tool, set like a broadsheet: the hero is a prompt box that types a brief and streams a finished proposal under it, fee table and all. Then an index of what it drafts, notes beside the result, how it learns a voice, a reader\u2019s letter and the price. Warm serif editorial, desktop to phone",
+    category: "web",
+    tags: ["saas", "ai", "landing page", "prompt box", "hero", "editorial", "serif", "typewriter", "website", "animation", "responsive", "startup"],
+    platforms: ["web"],
+    formats: ["page", "demo"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("SaaS AI tool landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F1ECE1", text: "#1B1916", onPaper: "#575147", primary: "#7A1F2B", onPrimary: "#FFF8EC", accent: "#F2C14E", card: "#FFFDF8", onCard: "#1B1916", cardMuted: "#6B6458", panel: "#211D19", onPanel: "#F4EEE2", panelMuted: "#B9B0A0", hairline: "#CFC6B4" },
+      { name: "Longhand" }
+    );
+    const s = typeScale(k, {
+      "Nav 16": { size: 16, fontWeight: 500, lineHeight: 24 },
+      "Brand 22": { ...SERIF, size: 22, fontWeight: 700, letterSpacing: -0.3, lineHeight: 28 },
+      "Button 16": { size: 16, fontWeight: 600, lineHeight: 24 },
+      "Dateline 13": { ...MONO, size: 13, fontWeight: 500, letterSpacing: 1.2, lineHeight: 20, textCase: "UPPER" },
+      "Display 104": { ...SERIF, size: 104, fontWeight: 600, letterSpacing: -3.6, lineHeight: 104 },
+      "Display 88": { ...SERIF, size: 88, fontWeight: 600, letterSpacing: -3, lineHeight: 90 },
+      "Display 60": { ...SERIF, size: 60, fontWeight: 600, letterSpacing: -1.8, lineHeight: 64 },
+      "Display 42": { ...SERIF, size: 42, fontWeight: 600, letterSpacing: -1.1, lineHeight: 46 },
+      "Lead 20": { size: 20, fontWeight: 400, lineHeight: 31 },
+      "Lead 17": { size: 17, fontWeight: 400, lineHeight: 27 },
+      "Proof 14": { size: 14, fontWeight: 500, lineHeight: 22 },
+      "Prompt 19": { ...SERIF, size: 19, fontWeight: 400, lineHeight: 29 },
+      "Prompt 16": { ...SERIF, size: 16, fontWeight: 400, lineHeight: 25 },
+      "Label 12": { ...MONO, size: 12, fontWeight: 600, letterSpacing: 1.1, lineHeight: 16, textCase: "UPPER" },
+      "Draft title 30": { ...SERIF, size: 30, fontWeight: 700, letterSpacing: -0.6, lineHeight: 36 },
+      "Draft title 22": { ...SERIF, size: 22, fontWeight: 700, letterSpacing: -0.3, lineHeight: 28 },
+      "Draft 16": { ...SERIF, size: 16, fontWeight: 400, lineHeight: 26 },
+      "Fee 15": { size: 15, fontWeight: 500, lineHeight: 22, fontFeatures: { tnum: 1 } },
+      "Fee total 26": { ...SERIF, size: 26, fontWeight: 700, lineHeight: 32, fontFeatures: { tnum: 1 } },
+      "Aside 22": { ...SERIF, size: 22, fontWeight: 400, fontStyle: "italic", lineHeight: 31 },
+      "Note 14": { ...SERIF, size: 14, fontWeight: 600, fontStyle: "italic", lineHeight: 20 },
+      "Section 52": { ...SERIF, size: 52, fontWeight: 600, letterSpacing: -1.6, lineHeight: 56 },
+      "Section 34": { ...SERIF, size: 34, fontWeight: 600, letterSpacing: -0.8, lineHeight: 40 },
+      "Entry 30": { ...SERIF, size: 30, fontWeight: 500, fontStyle: "italic", letterSpacing: -0.4, lineHeight: 36 },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 27 },
+      "Time 14": { ...MONO, size: 14, fontWeight: 500, lineHeight: 27 },
+      "Scrawl 16": { ...MONO, size: 16, fontWeight: 400, lineHeight: 30 },
+      "Quote 44": { ...SERIF, size: 44, fontWeight: 400, fontStyle: "italic", letterSpacing: -0.9, lineHeight: 56 },
+      "Quote 26": { ...SERIF, size: 26, fontWeight: 400, fontStyle: "italic", letterSpacing: -0.3, lineHeight: 36 },
+      "Initial 132": { ...SERIF, size: 132, fontWeight: 700, lineHeight: 112 },
+      "Initial 84": { ...SERIF, size: 84, fontWeight: 700, lineHeight: 76 },
+      "Voice 22": { ...SERIF, size: 22, fontWeight: 700, lineHeight: 28 },
+      "Small 14": { size: 14, fontWeight: 400, lineHeight: 22 },
+      "Foot head 14": { size: 14, fontWeight: 700, lineHeight: 22 }
+    });
+    buttons(k, { style: s("Button 16"), pad: [15, 26], radius: 2 });
+    k.component("Button paper", { direction: "HORIZONTAL", width: "HUG", radius: 2, align: "CENTER", fill: "card", padding: { top: 15, right: 26, bottom: 15, left: 26 }, props: { Label: "Start writing" } }, (id) => {
+      k.propText(id, "Label", { style: s("Button 16"), color: "onCard", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 88, top: 32 });
+    k.timeline(sheet, { duration: 6e3, fps: 30 });
+    nav(k, sheet, { links: ["What it writes", "Your voice", "Pricing", "Sign in"], cta: "Start writing", style: s("Nav 16"), brandStyle: s("Brand 22") });
+    const hero = k.stack(sheet, { gap: 36, name: "Hero" });
+    const dateline = k.stack(hero, { gap: 10, name: "Dateline" });
+    rule(k, dateline, "text", { weight: 3 });
+    const line = k.stack(dateline, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 16, name: "Dateline row" });
+    k.text(line, "Vol. 3 \xB7 The proposal issue", { style: s("Dateline 13"), color: "text", autoWidth: true, name: "Issue" });
+    k.text(line, "For designers, writers and studios of one", { style: s("Dateline 13"), color: "onPaper", autoWidth: true, name: "Readers" });
+    k.text(line, "Free for three documents a month", { style: s("Dateline 13"), color: "onPaper", autoWidth: true, name: "Offer" });
+    rule(k, dateline, "text");
+    k.text(hero, "Say what the job is. Longhand writes the proposal.", { style: s("Display 104"), color: "text", name: "Headline" });
+    const row = k.stack(hero, { direction: "HORIZONTAL", gap: 64, name: "Hero row" });
+    const copy = k.stack(row, { width: 400, gap: 24, name: "Copy" });
+    k.text(copy, "Type one line about the work, or say it into your phone on the walk home. Forty seconds later there is a proposal in your own voice, with a fee table that adds up and terms you have used before.", { style: s("Lead 20"), color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Write your first one" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Read a sample" }, { name: "CTA quiet" });
+    k.text(copy, "61,400 proposals sent since January. 38% were signed within a week.", { style: s("Proof 14"), color: "onPaper", name: "Proof" });
+    const aside = k.stack(copy, { gap: 10, padding: { top: 28, right: 0, bottom: 0, left: 0 }, name: "Aside" });
+    rule(k, aside, "text");
+    k.text(aside, "Overheard", { style: s("Label 12"), color: "onPaper", name: "Aside label" });
+    k.text(aside, "\u201CShe replied in nine minutes with a yes and a start date. I had not finished my coffee.\u201D", { style: s("Aside 22"), color: "text", name: "Aside quote" });
+    k.text(aside, "Tom\xE1s Reyes, copywriter", { style: s("Proof 14"), color: "onPaper", name: "Aside name" });
+    const desk = k.stack(row, { gap: 0, fill: "card", radius: 4, stroke: { color: "text", width: 1.5 }, effects: [soft(0.16, 24, 48)], name: "Desk" });
+    const ask = k.stack(desk, { gap: 12, padding: { top: 24, right: 28, bottom: 24, left: 28 }, name: "Prompt" });
+    k.text(ask, "What is the job?", { style: s("Label 12"), color: "cardMuted", name: "Prompt label" });
+    const field = k.stack(ask, { direction: "HORIZONTAL", gap: 16, align: "MAX", name: "Prompt field" });
+    const typed = k.stack(field, { direction: "HORIZONTAL", gap: 4, align: "MAX", name: "Typed" });
+    k.text(typed, PROMPT, { style: s("Prompt 19"), color: "onCard", name: "Prompt text" });
+    caret(k, typed, 2, 26, "primary", { absolute: { x: 0, y: 0 } });
+    const send = k.stack(field, { width: 44, height: 44, radius: 22, fill: "primary", align: "CENTER", justify: "CENTER", name: "Send" });
+    k.vector(send, 18, 18, [{ closed: false, points: [{ x: 9, y: 16 }, { x: 9, y: 2 }] }, { closed: false, points: [{ x: 3, y: 8 }, { x: 9, y: 2 }, { x: 15, y: 8 }] }], "onPrimary", { name: "Arrow", strokeWidth: 2.4 });
+    rule(k, desk, "text", { weight: 1.5 });
+    const draft = k.stack(desk, { gap: 16, padding: { top: 28, right: 28, bottom: 30, left: 28 }, name: "Draft" });
+    k.text(draft, "Proposal \xB7 drafted for Kiln & Co.", { style: s("Label 12"), color: "cardMuted", name: "Draft label" });
+    k.text(draft, "A sharper Kiln, on every shelf by mid-April", { style: s("Draft title 30"), color: "onCard", name: "Draft title" });
+    k.text(draft, "Kiln\u2019s pots have outgrown the brand they launched with. Over six weeks from 3 March I will rework the type, colour and packaging around the mark you already own, the way we did for Ostra, where repeat orders rose 31% in a season.", { style: s("Draft 16"), color: "onCard", name: "Draft opening" });
+    const fees = k.stack(draft, { gap: 0, name: "Fees" });
+    for (const [what, when, fee] of FEES) {
+      const r = k.stack(fees, { name: "Fee row" });
+      rule(k, r, "hairline");
+      const cells = k.stack(r, { direction: "HORIZONTAL", gap: 16, padding: { top: 9, right: 0, bottom: 9, left: 0 }, name: "Fee cells" });
+      k.text(cells, what, { style: s("Fee 15"), color: "onCard", name: "Fee item" });
+      k.text(cells, when, { style: s("Fee 15"), color: "cardMuted", width: 104, name: "Fee weeks" });
+      k.text(cells, fee, { style: s("Fee 15"), color: "onCard", width: 64, align: "RIGHT", name: "Fee amount" });
+    }
+    const total = k.stack(fees, { name: "Fee total row" });
+    rule(k, total, "onCard", { weight: 1.5 });
+    const sum = k.stack(total, { direction: "HORIZONTAL", gap: 16, align: "CENTER", padding: { top: 12, right: 0, bottom: 0, left: 0 }, name: "Fee sum" });
+    k.text(sum, "Total, half on signing", { style: s("Fee 15"), color: "onCard", name: "Total label" });
+    const figure = k.stack(sum, { direction: "HORIZONTAL", width: "HUG", padding: { top: 0, right: 8, bottom: 0, left: 8 }, name: "Figure" });
+    k.rect(figure, 112, 16, "accent", { name: "Highlight", absolute: { x: 0, y: 13 } });
+    k.text(figure, "$17,600", { style: s("Fee total 26"), color: "onCard", autoWidth: true, name: "Fee total" });
+    const note = k.stack(desk, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", fill: "accent", radius: 2, padding: { top: 8, right: 14, bottom: 8, left: 14 }, effects: [soft(0.18, 6, 14)], name: "Margin note", absolute: { x: 560, y: -20 } });
+    k.text(note, "Drafted in 41 seconds", { style: s("Note 14"), color: "onCard", autoWidth: true, name: "Note words" });
+    k.patch(note, { rotation: -3 });
+    const index = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "Index" });
+    const head = k.stack(index, { width: 372, gap: 16, name: "Index head" });
+    k.text(head, "Contents", { style: s("Label 12"), color: "onPaper", name: "Index label" });
+    k.text(head, "The whole paper trail of a job.", { style: s("Section 52"), color: "text", name: "Index title" });
+    k.text(head, "Each document starts from the one before it, so the invoice agrees with the proposal and the case study agrees with both.", { style: s("Body 17"), color: "onPaper", name: "Index lead" });
+    const list = k.stack(index, { name: "Index list" });
+    for (const [name, what, time] of INDEX) {
+      rule(k, list, "text");
+      const r = k.stack(list, { direction: "HORIZONTAL", gap: 24, padding: { top: 20, right: 0, bottom: 22, left: 0 }, name: "Entry" });
+      k.text(r, name, { style: s("Entry 30"), color: "text", width: 270, name: "Entry name" });
+      k.text(r, what, { style: s("Body 17"), color: "onPaper", name: "Entry text" });
+      k.text(r, time, { style: s("Time 14"), color: "text", width: 64, align: "RIGHT", name: "Entry time" });
+    }
+    rule(k, list, "text");
+    const compare = k.stack(sheet, { gap: 32, name: "Compare" });
+    k.text(compare, "It starts from the notes you already take.", { style: s("Section 52"), color: "text", width: 760, name: "Compare title" });
+    const pair = k.stack(compare, { direction: "HORIZONTAL", gap: 0, name: "Pair" });
+    const blotter = k.stack(pair, { gap: 14, fill: "panel", padding: 40, name: "Notes" });
+    k.text(blotter, "Your notes, 4:52 pm", { style: s("Label 12"), color: "panelMuted", name: "Notes label" });
+    const scrawl = k.stack(blotter, { name: "Scrawl" });
+    for (const n of NOTES) k.text(scrawl, n, { style: s("Scrawl 16"), color: "onPanel", name: "Note line" });
+    const out = k.stack(pair, { gap: 14, fill: "card", stroke: { color: "text", width: 1.5 }, padding: 40, name: "Sent" });
+    k.text(out, "What Kiln & Co. read, 4:53 pm", { style: s("Label 12"), color: "cardMuted", name: "Sent label" });
+    k.text(out, "Terms", { style: s("Voice 22"), color: "onCard", name: "Sent title" });
+    k.text(out, "The fee is $17,600, with half due on signing and half at handover in the week of 14 April. The mark itself is out of scope and stays as it is. Two rounds of revisions are included at each stage; a third is billed at my day rate of $880.", { style: s("Draft 16"), color: "onCard", name: "Sent text" });
+    k.text(out, "Speak soon, In\xE9s", { style: s("Note 14"), color: "cardMuted", name: "Sign-off" });
+    const voice = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "Voice" });
+    const opener = k.stack(voice, { direction: "HORIZONTAL", gap: 20, name: "Opener" });
+    k.text(opener, "I", { style: s("Initial 132"), color: "text", autoWidth: true, name: "Initial" });
+    k.text(opener, "t sounds like you because it has read you. Nothing leaves your account, and nothing you write trains a model anyone else uses.", { style: s("Section 52"), color: "text", name: "Opener text" });
+    const reads = k.stack(voice, { width: 420, name: "Reads" });
+    for (const [name, what] of VOICE) {
+      rule(k, reads, "text");
+      const item = k.stack(reads, { gap: 6, padding: { top: 16, right: 0, bottom: 22, left: 0 }, name: "Read" });
+      k.text(item, name, { style: s("Voice 22"), color: "text", name: "Read name" });
+      k.text(item, what, { style: s("Body 17"), color: "onPaper", name: "Read text" });
+    }
+    const letter = k.stack(sheet, { gap: 28, name: "Letter" });
+    rule(k, letter, "text", { weight: 3 });
+    k.text(letter, "Letters", { style: s("Label 12"), color: "onPaper", name: "Letter label" });
+    k.text(letter, "\u201CI used to lose a Sunday to every proposal. Last month I sent nine, from the train, and seven came back signed. The fee tables are the part clients mention.\u201D", { style: s("Quote 44"), color: "text", name: "Quote" });
+    const by = k.stack(letter, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Byline" });
+    faceSlot(k, k.photo(by, 52, 52, { radius: 26, ground: "hairline", name: "Portrait" }), 52, 52, "onPaper");
+    k.text(by, "In\xE9s Carvalho, brand designer, Porto", { style: s("Proof 14"), color: "onPaper", name: "Writer" });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 48, align: "CENTER", fill: "primary", padding: 56, name: "Band" });
+    const pitch = k.stack(band, { gap: 12, name: "Band copy" });
+    k.text(pitch, "Three documents a month, free. $19 a month when the work picks up.", { style: s("Section 52"), color: "onPrimary", name: "Band title" });
+    k.text(pitch, "No seats, no credits, no word limits. Cancel from the same page you signed up on.", { style: s("Body 17"), color: "onPrimary", name: "Band text" });
+    k.instance(band, "Button paper", { Label: "Write your first one" }, { name: "Band button" });
+    footer(k, sheet, {
+      about: "Proposals, statements of work and follow-ups for people who would rather be doing the work.",
+      columns: [["Product", ["What it writes", "Your voice", "Pricing", "Changelog"]], ["Read", ["Sample proposal", "Fee table guide", "Letters"]], ["Company", ["About", "Privacy", "Contact"]]],
+      legal: "\xA9 2026 Longhand Writing Co. Set in Source Serif and Inter.",
+      brandStyle: s("Brand 22"),
+      headStyle: s("Foot head 14"),
+      linkStyle: s("Small 14"),
+      ruleColor: "text"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    respond(k, sheet, s, {
+      stack: ["Hero row", "Index", "Pair", "Voice", "Band", "Footer columns"],
+      stackMobile: ["Entry", "Dateline row"],
+      restyle: {
+        "Display 104": { laptop: "Display 88", tablet: "Display 60", mobile: "Display 42" },
+        "Section 52": { tablet: "Section 34", mobile: "Section 34" },
+        "Quote 44": { tablet: "Quote 26", mobile: "Quote 26" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Initial 132": { tablet: "Initial 84", mobile: "Initial 84" },
+        "Prompt 19": { mobile: "Prompt 16" },
+        "Draft title 30": { mobile: "Draft title 22" }
+      },
+      hide: { tablet: ["Readers"] },
+      typing: [{ text: "Prompt text", caret: "Caret", at: 1e3, duration: 1600 }],
+      gap: { tablet: 64, mobile: 56 },
+      tweak: (kit, id, size) => {
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        if (size === "laptop") {
+          each("Hero row", { itemSpacing: 48 });
+          each("Entry name", { width: 240 });
+          each("Margin note", { x: 470 });
+        }
+        if (size === "tablet") compactNav(kit, id, ["Your voice"]);
+        if (size === "tablet" || size === "mobile") {
+          each("Hero row", { itemSpacing: 40 });
+          each("Index", { itemSpacing: 28 });
+          each("Voice", { itemSpacing: 32 });
+          each("Band", { itemSpacing: 28, padding: { top: 36, right: 24, bottom: 36, left: 24 } });
+          each("Compare title", { layoutSizingHorizontal: "FILL" });
+          each("Margin note", { x: size === "tablet" ? 470 : 150 });
+        }
+        if (size === "mobile") {
+          each("Entry", { itemSpacing: 6 });
+          each("Entry time", { textAlign: "LEFT" });
+          each("Dateline row", { itemSpacing: 2 });
+          each("Prompt", { padding: { top: 20, right: 18, bottom: 20, left: 18 } });
+          each("Draft", { padding: { top: 22, right: 18, bottom: 24, left: 18 } });
+          each("Notes", { padding: { top: 24, right: 24, bottom: 24, left: 24 } });
+          each("Sent", { padding: { top: 24, right: 24, bottom: 24, left: 24 } });
+          each("Fee weeks", { visible: false });
+          each("Readers", { visible: false });
+          each("Aside", { padding: { top: 8, right: 0, bottom: 0, left: 0 } });
+          each("Opener", { itemSpacing: 12 });
+          each("Footer lists", { itemSpacing: 16 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  saas_ai_landing_default
+};

package/dist/chunks/chunk-SD7KY4QP.js

@@ -0,0 +1,146 @@
+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 {
+  KONTOR,
+  drawLine,
+  extend,
+  fitGrid,
+  fitRoute,
+  grot,
+  lockup,
+  routeMap,
+  rule,
+  swissBrand,
+  swissGrid
+} from "./chunk-KYXVOPWA.js";
+import {
+  postVariants
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-WBZ6O2YF.js";
+import {
+  Kit,
+  preset
+} from "./chunk-MTD3UAQT.js";
+import {
+  ease
+} from "./chunk-37IU3FCE.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/style-swiss-announcement.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Swiss SaaS announcement post";
+var DURATION = 7e3;
+var OUT = 5800;
+var GRID = { cols: 6, margin: 72, gutter: 24, row: 108, top: 72 };
+var LEAVE = ["Brand row", "Tag", "Headline", "Giant", "Side", "Station", "Flag"];
+var cues = [
+  { layer: "Brand row", preset: "slide-in", at: 150, params: { direction: "down", duration: 400 } },
+  { layer: "Giant", preset: "slide-in", at: 250, params: { direction: "left", duration: 600 } },
+  { layer: "Tag", preset: "wipe-in", at: 500, params: { direction: "right", duration: 360 } },
+  { layer: "Headline", preset: "words-in", at: 650, params: { duration: 800 } },
+  { layer: "Station", preset: "fade-in", at: 1100, stagger: { delay: 110, order: "selection" }, params: { duration: 200 } },
+  { layer: "Flag", preset: "slide-in", at: 2900, params: { direction: "left", duration: 380 } },
+  { layer: "Side", preset: "slide-in", at: 3600, params: { direction: "up", duration: 450 } },
+  { layer: LEAVE, preset: "slide-out", at: OUT, stagger: { delay: 70, order: "selection" }, params: { direction: "left", duration: 380 } }
+];
+var style_swiss_announcement_default = defineTemplate({
+  id: "motion-saas-style-swiss-announcement",
+  meta: {
+    name: NAME,
+    description: "An animated release post in the Swiss typographic style: on a visible grid a rule extends, a giant 3.0 slides into the first columns, the headline arrives word by word and a transit-style route diagram draws itself, its late stretch turning red with a flag and a rail reroute in dashes. Everything wipes off along the grid back to the bare grid, so it loops. Seven seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "swiss", "international typographic style", "grid", "minimal", "b2b", "logistics", "announcement", "release", "changelog", "feature", "diagram", "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;
+    swissBrand(k, { headline: "Late shipments,\nflagged 48 hours\nearly." });
+    grot(k, "Brand 32", 32, { weight: 700, lead: 1.1, spacing: -0.02 });
+    grot(k, "Label 24", 24, { weight: 600, lead: 1.3 });
+    grot(k, "Headline 70", 66, { weight: 700, lead: 1.02, spacing: -0.04 });
+    grot(k, "Giant 300", 380, { weight: 700, lead: 0.84, spacing: -0.07 });
+    grot(k, "Side 28", 28, { weight: 500, lead: 1.25, spacing: -0.01 });
+    grot(k, "Station 22", 22, { weight: 600, lead: 1.2 });
+    grot(k, "Flag 20", 20, { weight: 700, lead: 1.2 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 36, 72, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    swissGrid(k, sheet, GRID);
+    const top = k.stack(sheet, { gap: 14, name: "Top" });
+    const bar = k.stack(top, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, bar, { size: 32, style: "Brand 32" });
+    k.text(bar, "Release notes, October 2026", { style: "Label 24", color: "text", autoWidth: true, name: "Date" });
+    const topRule = rule(k, top, "FILL", { weight: 3, name: "Top rule" });
+    const mid = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, name: "Middle" });
+    const words = k.stack(mid, { width: 512, gap: 22, name: "Words" });
+    const tag = k.stack(words, { direction: "HORIZONTAL", width: "HUG", fill: "primary", padding: { top: 5, right: 12, bottom: 5, left: 12 }, name: "Tag" });
+    k.text(tag, `New: ${KONTOR.feature}`, { style: "Label 24", color: "onPrimary", autoWidth: true, name: "Tag words" });
+    k.text(words, "{{brand.headline}}", { style: "Headline 70", color: "text", name: "Headline" });
+    const map = routeMap(k, mid, { w: 400, h: 400, pad: 40, weight: 14, labels: "Station 22", ink: "text", late: "primary", ground: "paper", labelInk: "text", name: "Route" });
+    k.component("Route flag", { direction: "HORIZONTAL", width: "HUG", fill: "primary", padding: { top: 6, right: 10, bottom: 6, left: 10 }, props: { Label: `+${KONTOR.slip} h, rerouted` } }, (id) => {
+      k.propText(id, "Label", { style: "Flag 20", color: "onPrimary", autoWidth: true });
+    });
+    k.instance(map, "Route flag", {}, { name: "Flag", absolute: { x: 196, y: 100 } });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, align: "MAX", name: "Foot" });
+    k.text(foot, KONTOR.version, { style: "Giant 300", color: "text", autoWidth: true, name: "Giant" });
+    const side = k.stack(foot, { gap: 14, padding: { top: 0, right: 0, bottom: 22, left: 0 }, name: "Side" });
+    k.text(side, "Every lane forecast two days out. Reroute a late shipment in two clicks.", { style: "Side 28", color: "text", name: "Side words" });
+    k.text(side, "{{brand.site}}/3.0", { style: "Label 24", color: "text", name: "Link" });
+    k.cues(sheet, cues);
+    choreograph(k, sheet, topRule, map);
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      // The taller cut gives the route the room: the map goes under the words, across the width, and fills the band between the words and the figure.
+      portrait: (kit, id) => {
+        fitGrid(kit, id, GRID);
+        for (const n of kit.named(id, "Middle")) kit.patch(n, { layoutMode: "VERTICAL", itemSpacing: 28 });
+        for (const n of kit.named(id, "Words")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        fitRoute(kit, id, "Route", 900, 400, { pad: 40, weight: 16 });
+      },
+      vertical: (kit, id) => {
+        fitGrid(kit, id, { ...GRID, margin: 140, top: 250 });
+        kit.patch(id, { primaryAxisAlignItems: "MIN", itemSpacing: 30 });
+        for (const n of kit.named(id, "Middle")) kit.patch(n, { layoutMode: "VERTICAL", itemSpacing: 24 });
+        for (const n of kit.named(id, "Words")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        for (const n of kit.named(id, "Side")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        fitRoute(kit, id, "Route", 800, 440, { pad: 40, weight: 16 });
+        kit.rect(id, 1080, 400, "primary", { name: "Field", absolute: { x: 0, y: 1500 } });
+      }
+    }));
+    return k.finish();
+  }
+});
+function choreograph(k, sheet, topRule, map) {
+  extend(k, topRule, 0, 600);
+  k.animate(topRule, "scaleX", [{ t: OUT + 500, v: 1, ease: ease.named("expo", "in") }, { t: OUT + 1e3, v: 0 }]);
+  const line = (name) => k.named(map, name)[0];
+  const draw = (id, at, d) => {
+    drawLine(k, id, at, d);
+    k.animate(id, "trim.start", [{ t: OUT + 200, v: 0, ease: ease.named("quart", "in") }, { t: OUT + 800, v: 1 }]);
+  };
+  draw(line("Road"), 1e3, 1200);
+  draw(line("Late stretch"), 2500, 500);
+  draw(line("Rail"), 3300, 900);
+  const stops = line("Stops");
+  k.animate(stops, "opacity", [{ t: 1e3, v: 0, ease: ease.linear }, { t: 1300, v: 1, ease: ease.hold }, { t: OUT + 600, v: 1, ease: ease.linear }, { t: OUT + 800, v: 0 }]);
+  void sheet;
+}
+
+export {
+  style_swiss_announcement_default
+};

package/dist/chunks/chunk-SF6PPH43.js

@@ -0,0 +1,99 @@
+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 {
+  bar,
+  burst,
+  fadeAt,
+  ping,
+  popAt,
+  progress,
+  round,
+  saasUi,
+  tickMark
+} from "./chunk-7XBGAOHO.js";
+import {
+  E,
+  roundRect
+} from "./chunk-3OBWHBPC.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/lottie/saas-ui-file-upload.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var saas_ui_file_upload_default = saasUi({
+  slug: "file-upload",
+  role: "loader",
+  size: "spot",
+  duration: 4500,
+  loop: true,
+  title: "file upload",
+  description: "An upload from drop to done: a document lifts off and slips behind a cloud, the progress bar fills in uneven pushes the way a real upload does, and a green tick lands with a small burst before the next file comes up \u2014 a 4.5-second seamless loop, 800\xD7600",
+  tags: ["upload", "file", "cloud", "progress", "import"],
+  build(l) {
+    const IN = 1600, DONE = 2900, RESET = 3900;
+    l.circle(l.sheet, 400, 300, 258, "soft", { name: "Backdrop" });
+    for (const [x, turn, o] of [[286, -9, 0.55], [394, 8, 0.75]]) {
+      const w = l.box(l.sheet, x, 420, 118, 150, "Waiting file");
+      l.rect(w, 0, 0, 118, 150, "surface", { radius: 16, name: "Waiting page", opacity: o, stroke: { color: "line", width: 2 } });
+      bar(l, w, 20, 30, 62, 9, "line", { name: "Waiting line" });
+      bar(l, w, 20, 50, 44, 9, "line", { name: "Waiting line" });
+      l.k.patch(w, { rotation: turn });
+      l.keys(w, "translateY", [[0, 0, E.hold], [IN - 300, 0, E.out], [IN, -10, E.inOut], [IN + 500, 0, E.hold]]);
+    }
+    const doc = l.box(l.sheet, 338, 388, 124, 156, "Document");
+    l.rect(doc, 8, 14, 108, 150, "ink", { radius: 16, name: "Document shadow", opacity: 0.08 });
+    l.shape(doc, [...roundRect(0, 0, 124, 156, 16).slice(0, 1), { x: 88, y: 0 }, { x: 124, y: 36 }, ...roundRect(0, 0, 124, 156, 16).slice(3)], "surface", { name: "Page", stroke: { color: "line", width: 2 } });
+    l.shape(doc, [{ x: 88, y: 0 }, { x: 124, y: 36 }, { x: 100, y: 36, handleOut: { x: 92, y: 36 } }, { x: 88, y: 24, handleIn: { x: 88, y: 32 } }], "soft", { name: "Fold" });
+    l.rect(doc, 20, 26, 40, 40, "accent", { radius: 10, name: "File type" });
+    for (const [y, w] of [[84, 84], [104, 64], [124, 76]]) bar(l, doc, 20, y, w, 9, "line", { name: "Page line" });
+    l.opacity(doc, [[0, 0, E.hold], [80, 0, E.out], [420, 1, E.hold], [IN - 250, 1, E.in], [IN, 0, E.hold]]);
+    l.keys(doc, "translateY", [[0, 46, E.hold], [80, 46, E.out], [560, 0, E.inOut], [880, 16, E.in], [IN, -236, E.hold], [IN + 200, 46, E.hold]]);
+    l.scale(doc, [[0, 1, E.hold], [880, 1, E.in], [IN, 0.5, E.hold], [IN + 200, 1, E.hold]]);
+    l.keys(doc, "rotation", [[0, -5, E.hold], [80, -5, E.out], [560, 0, E.inOut], [880, 4, E.in], [IN, 0, E.hold], [IN + 200, -5, E.hold]]);
+    ping(l, l.sheet, 400, 194, 60, "success", DONE + 40, { to: 2.2, dur: 800 });
+    burst(l, l.sheet, 400, 194, { n: 10, r0: 70, r1: 190, t: DONE + 80, size: 9, start: 18, dur: 800 });
+    const cloud = l.box(l.sheet, 196, 72, 408, 264, "Cloud");
+    const outline = (dy) => [
+      { pts: roundRect(0, 116 + dy, 408, 148, 74), closed: true },
+      { pts: round(150, 124 + dy, 92), closed: true },
+      { pts: round(262, 108 + dy, 108), closed: true }
+    ];
+    l.vector(cloud, outline(16), "ink", { name: "Cloud shadow", opacity: 0.08 });
+    l.vector(cloud, outline(0), "surface", { name: "Cloud face" });
+    l.pivot(cloud, 0.5, 0.8);
+    l.keys(cloud, "scaleY", [[0, 1, E.hold], [IN - 120, 1, E.out], [IN + 60, 0.93, E.pop], [IN + 480, 1, E.hold], [DONE, 1, E.out], [DONE + 140, 1.04, E.inOut], [DONE + 560, 1, E.hold]]);
+    l.keys(cloud, "scaleX", [[0, 1, E.hold], [IN - 120, 1, E.out], [IN + 60, 1.05, E.pop], [IN + 480, 1, E.hold], [DONE, 1, E.out], [DONE + 140, 1.05, E.inOut], [DONE + 560, 1, E.hold]]);
+    l.keys(cloud, "translateY", [[0, 0, E.inOut], [1125, -7, E.inOut], [2250, 0, E.inOut], [3375, -7, E.inOut], [4500, 0]]);
+    const arrow = l.box(cloud, 174, 78, 60, 76, "Uploading");
+    l.line(arrow, [[30, 70], [30, 12]], "accent", 12, { name: "Arrow shaft" });
+    l.line(arrow, [[8, 30], [30, 8], [52, 30]], "accent", 12, { name: "Arrow head" });
+    l.k.patch(arrow, { scaleX: 0, scaleY: 0 });
+    l.scale(arrow, [[0, 1, E.hold], [DONE - 120, 1, E.in], [DONE + 60, 0, E.hold], [RESET + 150, 0, E.pop], [RESET + 500, 1, E.hold]]);
+    l.keys(arrow, "translateY", [[0, 0, E.hold], [IN, 0, E.out], [IN + 240, -14, E.inOut], [IN + 520, 0, E.out], [IN + 760, -14, E.inOut], [IN + 1040, 0, E.hold]]);
+    const ok = l.box(cloud, 152, 64, 104, 104, "Uploaded");
+    l.circle(ok, 52, 52, 52, "success", { name: "Uploaded disc" });
+    drawTick(tickMark(l, ok, 52, 52, 2.5, "white", 13));
+    popAt(l, ok, DONE, RESET - 100, 400);
+    const { track, fill } = progress(l, cloud, 94, 196, 220, 14, "accent");
+    const at = (f) => -220 * (1 - f);
+    l.keys(fill, "translateX", [[0, at(0), E.hold], [IN, at(0), E.out], [IN + 300, at(0.34), E.inOut], [IN + 560, at(0.42), E.out], [IN + 900, at(0.81), E.inOut], [DONE - 80, 0, E.hold], [RESET + 160, 0, E.in], [RESET + 480, at(0), E.hold]]);
+    fadeAt(l, bar(l, track, 0, 0, 220, 14, "success", { name: "Progress complete" }), DONE - 80, 240, 1, RESET - 100);
+    for (const [x, t] of [[372, IN - 500], [404, IN - 380], [432, IN - 260]]) {
+      const d = l.circle(l.sheet, x, 420, 6, "accent", { name: "Speck", opacity: 0 });
+      l.keys(d, "translateY", [[0, 0, E.hold], [t, 0, E.in], [t + 520, -110, E.hold]]);
+      l.opacity(d, [[0, 0, E.hold], [t, 0, E.out], [t + 120, 0.8, E.in], [t + 520, 0, E.hold]]);
+    }
+    function drawTick(id) {
+      l.keys(id, "trim.end", [[0, 0, E.hold], [DONE + 120, 0, E.out], [DONE + 440, 1, E.hold], [RESET + 200, 0, E.hold]]);
+    }
+  }
+});
+
+export {
+  saas_ui_file_upload_default
+};