@popcraft/kit 0.53.6 → 0.53.8

package/dist/chunks/chunk-OAKLST3I.js

@@ -0,0 +1,320 @@
+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 {
+  APP_CUES,
+  accountPage,
+  accountPages,
+  appPages,
+  choice,
+  closing,
+  editInPlace,
+  errorLine,
+  eyebrow,
+  opener,
+  pane,
+  panes,
+  recordButton,
+  stat
+} from "./chunk-3XZGH2C7.js";
+import {
+  form,
+  repeats,
+  says,
+  userVariables,
+  visitorCollection
+} from "./chunk-4FRZC66Z.js";
+import {
+  field,
+  formStyles,
+  submit
+} from "./chunk-IVANHZYG.js";
+import {
+  buttons
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/marginalia-app.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var COVERS = ["Oxblood", "Ink", "Moss", "Plum", "Slate"];
+var COVER_ROLE = { Oxblood: "oxblood", Ink: "ink", Moss: "moss", Plum: "plum", Slate: "slate" };
+var STATUSES = ["Reading", "To read", "Finished"];
+var SAMPLES = [
+  { title: "Middlemarch", author: "George Eliot", cover: "Oxblood", status: "Reading", rating: 0, thought: "Chapter 20. Dorothea in Rome is the best thing I have read all year." },
+  { title: "The Left Hand of Darkness", author: "Ursula K. Le Guin", cover: "Ink", status: "To read", rating: 0, thought: "Priya would not stop talking about it." },
+  { title: "Pilgrim at Tinker Creek", author: "Annie Dillard", cover: "Moss", status: "To read", rating: 0, thought: "For the cabin in August." },
+  { title: "Giovanni\u2019s Room", author: "James Baldwin", cover: "Plum", status: "Finished", rating: 5, thought: "Read it in one sitting and then sat there." },
+  { title: "The Remains of the Day", author: "Kazuo Ishiguro", cover: "Slate", status: "Finished", rating: 4, thought: "The scene with the book. That is all." },
+  { title: "A Month in the Country", author: "J. L. Carr", cover: "Moss", status: "Finished", rating: 5, thought: "Short, and I have not stopped thinking about that summer." }
+];
+var marginalia_app_default = defineTemplate({
+  id: "web-marginalia-app",
+  meta: {
+    name: "Marginalia \u2014 a reading shelf with accounts",
+    description: "A working reading tracker: visitors sign up and keep their books as covers on three shelves \u2014 on the nightstand, to read, finished. A tap moves a book along, a finished one is rated by tapping a number and the marks on its cover follow, and each book keeps the one thought worth writing down. A quiet, bookish design; every reader keeps their own shelves in the database. Landing, sign-up, sign-in, shelves and account pages that fold from desktop to phone",
+    category: "web",
+    tags: ["app", "accounts", "sign in", "database", "books", "reading", "library", "tracker", "ratings", "website"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["planning", "onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  breakpoints: true,
+  motion: { cues: APP_CUES },
+  build() {
+    const k = new Kit("Marginalia", preset("web-desktop"));
+    k.brand(
+      { paper: "#F2ECE0", text: "#1C1A17", onPaper: "#635C50", primary: "#7A1F2B", onPrimary: "#FFFFFF", card: "#FFFDF8", onCard: "#1C1A17", cardMuted: "#746C5F", field: "#FBF7EE", onField: "#746C5F", line: "#DCD1BC", danger: "#B3261E", onDanger: "#FFFFFF" },
+      { name: "Marginalia" }
+    );
+    k.palette({ oxblood: "#7A1F2B", ink: "#1F2A44", moss: "#43563A", plum: "#553455", slate: "#3F4A52", gilt: "#EBCF86", page: "#F6ECD6", wood: "#8A6A47" });
+    const serif = { fontFamily: "Source Serif 4" };
+    k.textStyle("Brand 22", { size: 22, ...serif, fontWeight: 700, fontStyle: "italic", letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Link 15", { size: 15, fontWeight: 600, lineHeight: 22 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Code 12", { size: 12, fontFamily: "JetBrains Mono", fontWeight: 700, letterSpacing: 1.2, lineHeight: 16 });
+    k.textStyle("Display 64", { size: 64, ...serif, fontWeight: 600, letterSpacing: -1.8, lineHeight: 66 });
+    k.textStyle("Title 38", { size: 38, ...serif, fontWeight: 600, letterSpacing: -0.9, lineHeight: 44 });
+    k.textStyle("Shelf 26", { size: 26, ...serif, fontWeight: 600, letterSpacing: -0.4, lineHeight: 32 });
+    k.textStyle("Cover 17", { size: 17, ...serif, fontWeight: 700, letterSpacing: -0.2, lineHeight: 20 });
+    k.textStyle("Cover author 12", { size: 12, fontWeight: 600, letterSpacing: 0.2, lineHeight: 15 });
+    k.textStyle("Thought 17", { size: 17, ...serif, fontWeight: 400, fontStyle: "italic", lineHeight: 26 });
+    k.textStyle("Body 17", { size: 17, fontWeight: 400, lineHeight: 27 });
+    k.textStyle("Note 15", { size: 15, fontWeight: 400, lineHeight: 22 });
+    k.textStyle("Card title 18", { size: 18, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Meta 14", { size: 14, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Chip 14", { size: 14, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Small 13", { size: 13, fontWeight: 600, lineHeight: 18 });
+    k.textStyle("Error 14", { size: 14, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Stat 48", { size: 48, ...serif, fontWeight: 600, letterSpacing: -1.4, lineHeight: 50 });
+    formStyles(k, { thanks: false });
+    buttons(k, { style: "Button 16", radius: 10 });
+    const user = userVariables(k, { name: "Iris", email: "iris@example.com" });
+    const books = visitorCollection(k, "Books", [
+      { name: "Title", type: "TEXT" },
+      { name: "Author", type: "TEXT" },
+      { name: "Cover", type: "OPTION", options: [...COVERS] },
+      { name: "Status", type: "OPTION", options: [...STATUSES] },
+      { name: "Rating", type: "NUMBER" },
+      { name: "Thought", type: "TEXT" }
+    ], SAMPLES);
+    const app = appPages(k, { brand: "Marginalia", width: 1120, gap: 26 });
+    const mark = (parent) => {
+      const m = k.stack(parent, { width: 26, height: 32, radius: 4, fill: "primary", name: "Mark", clip: true });
+      k.rect(m, 5, 18, "gilt", { name: "Ribbon", absolute: { x: 15, y: 0 } });
+      return m;
+    };
+    const topBar = (column, right) => {
+      const row = k.stack(column, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top bar" });
+      const brand = k.stack(row, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "Brand" });
+      mark(brand);
+      k.text(brand, "{{brand.name}}", { style: "Brand 22", color: "text", autoWidth: true, name: "Brand name" });
+      right?.(row);
+      return brand;
+    };
+    const drawn = (parent, o) => {
+      const c = k.stack(parent, { width: 132, height: o.height ?? 196, radius: 6, fill: COVER_ROLE[o.cover], padding: { top: 16, right: 12, bottom: 14, left: 14 }, justify: "SPACE_BETWEEN", name: `${o.title} cover` });
+      k.text(c, o.title, { style: "Cover 17", color: "page", name: "Cover title" });
+      k.text(c, o.author.toUpperCase(), { style: "Cover author 12", color: "gilt", name: "Cover author" });
+      return c;
+    };
+    const bookcase = (parent) => {
+      const art = k.stack(parent, { width: 460, gap: 0, radius: 28, fill: "page", padding: { top: 30, right: 26, bottom: 0, left: 26 }, clip: true, name: "Bookcase" });
+      for (const shelf of [[["Oxblood", "Middlemarch", "George Eliot", 196], ["Ink", "The Left Hand of Darkness", "Ursula K. Le Guin", 176], ["Moss", "Pilgrim at Tinker Creek", "Annie Dillard", 188]], [["Plum", "Giovanni\u2019s Room", "James Baldwin", 172], ["Slate", "The Remains of the Day", "Kazuo Ishiguro", 192], ["Oxblood", "Beloved", "Toni Morrison", 180]]]) {
+        const row = k.stack(art, { direction: "HORIZONTAL", gap: 6, align: "MAX", justify: "CENTER", name: "Drawn shelf" });
+        for (const [cover2, title, author, height] of shelf) drawn(row, { cover: cover2, title, author, height });
+        k.rect(art, "FILL", 12, "wood", { radius: 3, name: "Board" });
+        k.rect(art, "FILL", 26, "page", { name: "Shelf gap" });
+      }
+      return art;
+    };
+    const welcome = app.page("Welcome", "/", "signedOut");
+    topBar(welcome.column, (row) => app.link(k.text(row, "Sign in", { style: "Link 15", color: "text", autoWidth: true, name: "Sign in link" }), "Sign in"));
+    const hero = panes(k, welcome.column, { gap: 40, align: "CENTER", name: "Hero" });
+    const lead = k.stack(hero, { gap: 20, name: "Lead" });
+    pane(k, lead, 320);
+    eyebrow(k, lead, "A SHELF OF YOUR OWN", "Code 12");
+    k.text(lead, "Remember what you read, and what you thought.", { style: "Display 64", color: "text", name: "Headline" });
+    k.text(lead, "Three shelves: on the nightstand, to read, finished. One line in the margin for each book. No feed, no followers, no yearly challenge.", { style: "Body 17", color: "onPaper", name: "Lead text" });
+    const ctas = k.stack(lead, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "Calls to action" });
+    app.link(k.instance(ctas, "Button", { Label: "Start your shelf" }, { name: "Create account" }), "Sign up");
+    app.link(k.instance(ctas, "Button quiet", { Label: "I have one" }, { name: "Have account" }), "Sign in");
+    const heroArt = k.stack(hero, { align: "CENTER", name: "Art" });
+    pane(k, heroArt, 320);
+    bookcase(heroArt);
+    const closer = k.stack(welcome.column, { gap: 18, name: "Body" });
+    const strip = panes(k, closer, { gap: 16, name: "Points" });
+    for (const [what, why] of [["A tap moves a book", "Start it, finish it, put it back. The shelves rearrange themselves around what you are doing."], ["A rating you set yourself", "Tap a number on a finished book and its cover wears the marks."], ["One thought per book", "The line you would write in the margin, kept with the cover it belongs to."]]) {
+      const tile = k.stack(strip, { gap: 8, padding: { top: 20, right: 0, bottom: 0, left: 0 }, stroke: { color: "line", width: 1 }, name: "Point" });
+      pane(k, tile, 250);
+      k.patch(tile, { strokes: [], padding: { top: 0, right: 0, bottom: 0, left: 0 } });
+      k.rect(tile, "FILL", 2, "text", { name: "Point rule" });
+      k.text(tile, what, { style: "Shelf 26", color: "text", name: "Point title" });
+      k.text(tile, why, { style: "Note 15", color: "onPaper", name: "Point body" });
+    }
+    closing(k, app, closer, { title: "Start with the book on your nightstand.", style: "Title 38", button: "Start your shelf", radius: 14 });
+    const accounts = accountPages(k, app, {
+      styles: { title: "Title 38", body: "Body 17", meta: "Meta 14", link: "Link 15", error: "Error 14" },
+      top: (column, back) => back(topBar(column)),
+      art: (p) => {
+        k.patch(p, { counterAxisAlignItems: "CENTER" });
+        bookcase(p);
+      },
+      cardRadius: 14,
+      copy: {
+        "Sign up": { title: "Start your shelf", body: "A name, an email and a password. Your books are yours alone.", button: "Create account", namePlaceholder: "Iris" },
+        "Sign in": { title: "Welcome back", body: "Your bookmark is where you left it.", button: "Sign in" }
+      }
+    });
+    const shelves = app.page("Shelves", "/shelves", "signedIn");
+    topBar(shelves.column, (row) => {
+      const who = k.stack(row, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", radius: 999, fill: "card", stroke: { color: "line", width: 1 }, padding: { top: 6, right: 14, bottom: 6, left: 6 }, name: "Account link" });
+      k.ellipse(who, 26, "primary", { name: "Face" });
+      says(k, k.text(who, "Iris", { style: "Link 15", color: "onCard", autoWidth: true, name: "Account name" }), "name");
+      app.link(who, "Account", "up");
+    });
+    const banner = panes(k, shelves.column, { gap: 24, align: "MAX", name: "Lead" });
+    const hello = k.stack(banner, { gap: 6, name: "Greeting block" });
+    pane(k, hello, 300);
+    eyebrow(k, hello, "YOUR SHELVES", "Code 12");
+    const helloRow = k.stack(hello, { direction: "HORIZONTAL", gap: 10, wrap: true, name: "Greeting" });
+    k.text(helloRow, "What are you reading,", { style: "Title 38", color: "text", autoWidth: true, name: "Greeting words" });
+    says(k, k.text(helloRow, "Iris", { style: "Title 38", color: "text", autoWidth: true, name: "Greeting name" }), "name");
+    const bannerRow = k.stack(banner, { direction: "HORIZONTAL", width: "HUG", gap: 18, align: "CENTER", name: "Banner row" });
+    const tally = k.stack(bannerRow, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "Tally" });
+    k.bindExpression(k.text(tally, "6", { style: "Stat 48", color: "text", autoWidth: true, name: "Tally number" }), "characters", books.word);
+    k.text(tally, "books on\nyour shelves", { style: "Small 13", color: "onPaper", autoWidth: true, name: "Tally words" });
+    const adder = opener(k, bannerRow, { word: "addingBook", label: "Add a book", style: "Button 16", fill: "text", color: "paper", dot: "primary", onDot: "onPrimary" });
+    const slip = k.stack(shelves.column, { gap: 18, fill: "card", radius: 16, stroke: { color: "line", width: 1 }, padding: 26, name: "Art" });
+    k.text(slip, "A NEW BOOK", { style: "Code 12", color: "cardMuted", name: "Slip label" });
+    const add = k.stack(slip, { gap: 18, name: "Book form" });
+    const names = panes(k, add, { gap: 14, name: "Title and author" });
+    for (const [label, name, placeholder] of [["Title", "title", "Middlemarch"], ["Author", "author", "George Eliot"]]) {
+      const w = k.stack(names, { name: `${label} pane` });
+      pane(k, w, 220);
+      field(k, w, { card: true, label, name, placeholder, required: name === "title" });
+    }
+    choice(k, add, { card: true, label: "Which shelf", name: "status", word: "bookShelf", options: STATUSES, style: "Chip 14", radius: 8 });
+    choice(k, add, { card: true, label: "Cover", name: "cover", word: "bookCover", options: COVERS, style: "Chip 14", radius: 8, on: ["text", "paper"] });
+    field(k, add, { card: true, label: "One thought", name: "thought", placeholder: "What you would write in the margin" });
+    errorLine(k, add, "Error 14");
+    const addRow = k.stack(add, { direction: "HORIZONTAL", name: "Add row" });
+    k.patch(submit(k, addRow, "Shelve it", { name: "Shelve button" }), { control: { kind: "BUTTON", buttonType: "submit", name: "rating", value: "0" } });
+    form(k, add, { collectionId: books.id, onSubmit: adder.close });
+    adder.opens(slip);
+    const stats = panes(k, shelves.column, { gap: 12, name: "Stats" });
+    for (const [label, expression, sample] of [["Finished", `count("Books", "status", "Finished")`, "3"], ["On the nightstand", `count("Books", "status", "Reading")`, "1"], ["Waiting to be read", `count("Books", "status", "To read")`, "2"], ["Average rating", `round(sum("Books", "rating", "status", "Finished") / max(1, count("Books", "status", "Finished")), 1)`, "4.7"]]) stat(k, stats, { label, expression, sample, figure: "Stat 48", caption: "Meta 14", min: 200 });
+    const body = k.stack(shelves.column, { gap: 34, name: "Body" });
+    const empty = k.stack(body, { gap: 6, align: "CENTER", padding: 30, radius: 16, stroke: { color: "line", width: 1 }, name: "Empty shelves" });
+    k.text(empty, "Bare shelves", { style: "Shelf 26", color: "text", align: "CENTER", name: "Empty title" });
+    k.text(empty, "Start with the book that is open on your nightstand right now.", { style: "Note 15", color: "onPaper", align: "CENTER", name: "Empty body" });
+    k.bindExpression(empty, "visible", `${books.word} == 0`);
+    k.patch(empty, { visible: false });
+    const cover = (parent, stars) => {
+      const c = k.stack(parent, { direction: "HORIZONTAL", width: 132, height: 196, radius: 6, clip: true, name: "Cover" });
+      for (const name of COVERS) {
+        const face = k.stack(c, { height: "FILL", fill: COVER_ROLE[name], padding: { top: 16, right: 12, bottom: 14, left: 14 }, justify: "SPACE_BETWEEN", name: `${name} cover` });
+        k.text(face, "{{item.title}}", { style: "Cover 17", color: "page", name: "Cover title" });
+        const foot = k.stack(face, { gap: 8, name: "Cover foot" });
+        if (stars) {
+          const row = k.stack(foot, { direction: "HORIZONTAL", gap: 4, height: 10, name: "Rating" });
+          for (let n = 1; n <= 5; n++) k.bindExpression(k.ellipse(row, 10, "gilt", { name: `Mark ${n}` }), "visible", `item_rating >= ${n}`);
+        }
+        k.text(foot, "{{item.author}}", { style: "Cover author 12", color: "gilt", name: "Cover author" });
+        k.bindExpression(face, "visible", `item_cover == "${name}"`);
+        if (name !== COVERS[0]) k.patch(face, { visible: false });
+      }
+      return c;
+    };
+    const shelfHead = (parent, title, blurb) => {
+      const head = k.stack(parent, { direction: "HORIZONTAL", gap: 12, align: "MAX", wrap: true, name: "Shelf head" });
+      k.text(head, title, { style: "Shelf 26", color: "text", autoWidth: true, name: "Shelf title" });
+      k.text(head, blurb, { style: "Meta 14", color: "onPaper", autoWidth: true, name: "Shelf blurb" });
+    };
+    const listOf = (parent, status, o) => {
+      const list = o.row ? panes(k, parent, { gap: o.gap, name: `${status} list` }) : k.stack(parent, { gap: o.gap, name: `${status} list` });
+      repeats(k, list, books.id, { limit: 90 });
+      k.patch(list, { repeat: { collectionId: books.id, limit: 90, filter: `item_status == "${status}"` } });
+      return list;
+    };
+    const quiet = { style: "Small 13", line: "line", color: "onCard", radius: 8 };
+    const strong = { style: "Small 13", fill: "text", color: "paper", radius: 8 };
+    const now = k.stack(body, { gap: 14, name: "Nightstand" });
+    shelfHead(now, "On the nightstand", "What you are in the middle of");
+    const nowList = listOf(now, "Reading", { gap: 14, row: true });
+    const open = k.stack(nowList, { direction: "HORIZONTAL", gap: 20, fill: "card", radius: 16, stroke: { color: "line", width: 1 }, padding: 20, name: "Open book" });
+    pane(k, open, 300);
+    k.patch(open, { maxWidth: 560 });
+    cover(open, false);
+    const openSide = k.stack(open, { gap: 10, name: "Open side" });
+    k.patch(openSide, { minWidth: 120 });
+    const openView = k.stack(openSide, { gap: 10, name: "Open view" });
+    k.text(openView, "IN THE MARGIN", { style: "Code 12", color: "cardMuted", name: "Margin label" });
+    k.text(openView, "{{item.thought}}", { style: "Thought 17", color: "onCard", name: "Thought" });
+    const openActions = k.stack(openView, { direction: "HORIZONTAL", gap: 6, wrap: true, name: "Book actions" });
+    recordButton(k, openActions, "Finished it", { set: ["status", "Finished"], ...strong });
+    recordButton(k, openActions, "Put it back", { set: ["status", "To read"], ...quiet });
+    const actions = openActions;
+    const edit = k.stack(actions, { direction: "HORIZONTAL", width: "HUG", padding: { top: 6, right: 8, bottom: 6, left: 8 }, name: "Edit" });
+    k.text(edit, "Edit", { style: "Small 13", color: "cardMuted", autoWidth: true, name: "Edit label" });
+    k.patch(edit, { control: { kind: "BUTTON", buttonType: "button" } });
+    recordButton(k, openActions, "Remove", { style: "Small 13", color: "cardMuted" });
+    editInPlace(k, { word: "editingBook", view: openView, parent: openSide, trigger: edit, style: "Small 13", build: (f) => {
+      const pre = (id, field2) => k.patch(id, { control: { ...k.node(id).control, value: `{{item.${field2}}}` } });
+      pre(field(k, f, { card: true, label: "Title", name: "title", placeholder: "Middlemarch", required: true }), "title");
+      pre(field(k, f, { card: true, label: "Author", name: "author", placeholder: "George Eliot" }), "author");
+      pre(field(k, f, { card: true, label: "In the margin", name: "thought", placeholder: "What you would write there", multiline: true }), "thought");
+    } });
+    const standing = (status, title, blurb) => {
+      const s = k.stack(body, { gap: 14, name: `${status} shelf` });
+      shelfHead(s, title, blurb);
+      const onBoard = k.stack(s, { gap: 0, name: "Shelf" });
+      const list = listOf(onBoard, status, { gap: 18, row: true });
+      k.patch(list, { counterAxisAlignItems: "MAX" });
+      const book = k.stack(list, { width: 132, gap: 8, padding: { top: 0, right: 0, bottom: 12, left: 0 }, name: "Book" });
+      cover(book, status === "Finished");
+      const actions2 = k.stack(book, { direction: "HORIZONTAL", gap: 3, wrap: true, name: "Book actions" });
+      if (status === "To read") recordButton(k, actions2, "Start it", { set: ["status", "Reading"], ...strong });
+      else for (let n = 1; n <= 5; n++) recordButton(k, actions2, String(n), { set: ["rating", String(n)], style: "Small 13", line: "line", color: "text", radius: 6, pad: [3, 6], name: `Rate ${n}` });
+      recordButton(k, actions2, "Remove", { style: "Small 13", color: "onPaper", pad: [3, 6] });
+      k.rect(onBoard, "FILL", 10, "wood", { radius: 3, name: "Board" });
+    };
+    standing("To read", "To read", "Waiting their turn");
+    standing("Finished", "Finished", "Tap a number to rate one");
+    const out = accountPage(k, app, {
+      user,
+      home: "Shelves",
+      back: "Back to the shelves",
+      sample: { name: "Iris", email: "iris@example.com" },
+      styles: { eyebrow: "Code 12", title: "Title 38", label: "Meta 14", value: "Card title 18", stat: "Stat 48", link: "Link 15" },
+      count: { label: "Books on your shelves", word: books.word, sample: "6" },
+      top: (column, right) => {
+        topBar(column, right);
+      },
+      art: (p) => {
+        bookcase(p);
+      }
+    });
+    app.finish("Welcome");
+    accounts.leads("Shelves");
+    out.leads();
+    return k.finish();
+  }
+});
+
+export {
+  marginalia_app_default
+};

package/dist/chunks/chunk-OBP6RMQW.js

@@ -0,0 +1,81 @@
+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 {
+  restyleAll,
+  storyCut,
+  titleSafe
+} from "./chunk-3YBY6VW3.js";
+import {
+  logoBadge,
+  outro,
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/kinetic/letters.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cues = [
+  { layer: "Logo", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 150, params: { duration: 500 } },
+  { layer: "Title", preset: "letters-in", at: 400, params: { duration: 700, amount: 45 } },
+  { layer: "Byline", preset: "rise-in", at: 1300 },
+  { layer: "Dates", preset: "pop-in", at: 1650 },
+  { layer: "Title", preset: "letters-out", at: 5e3, params: { duration: 450, amount: 30 } },
+  outro(["Logo", "Eyebrow", "Byline", "Dates"], 5300)
+];
+var letters_default = defineTemplate({
+  id: "motion-kinetic-letters",
+  meta: {
+    name: "Letter-by-letter title",
+    description: "An exhibition title that arrives one letter at a time over its eyebrow, with the byline rising and the dates chip popping in \u2014 7 seconds, 16:9 with a 9:16 story cut",
+    category: "animation",
+    tags: ["animation", "kinetic type", "letters", "title", "exhibition", "gallery", "event"],
+    platforms: ["youtube", "instagram", "linkedin", "slides"],
+    formats: ["title-card", "video", "story", "reel"],
+    useCases: ["event", "title", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Letter-by-letter title", preset("video-1080p"));
+    k.brand(
+      { paper: "#0E1A24", text: "#F3F6F4", onPaper: "#A7C4BC", accent: "#7FE0C4", onAccent: "#0E1A24", card: "#1B2C38" },
+      { eyebrow: "Photography exhibition", byline: "Forty winters of Arctic skies by Ingrid Solberg" }
+    );
+    k.textStyle("Eyebrow 34", { size: 34, fontWeight: 700, letterSpacing: 8, lineHeight: 42, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Title 220", { size: 220, fontWeight: 900, letterSpacing: -6, lineHeight: 220, textAlign: "CENTER" });
+    k.textStyle("Title 150", { size: 150, fontWeight: 900, letterSpacing: -4, lineHeight: 150, textAlign: "CENTER" });
+    k.textStyle("Byline 48", { size: 48, fontWeight: 500, lineHeight: 60, textAlign: "CENTER" });
+    k.textStyle("Dates 32", { size: 32, fontWeight: 700, lineHeight: 40 });
+    pill(k, "Chip", { fill: "accent", ink: "onAccent", style: "Dates 32", label: "Oct 18 \u2013 Jan 11 \xB7 Harbour Gallery", pad: [14, 32] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 36, titleSafe(), "paper", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 7e3, fps: 30 });
+    logoBadge(k, sheet, { fill: "card", size: 64, name: "Logo" });
+    k.text(sheet, "{{brand.eyebrow}}", { style: "Eyebrow 34", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "Northern Light", { style: "Title 220", color: "text", name: "Title" });
+    k.text(sheet, "{{brand.byline}}", { style: "Byline 48", color: "onPaper", name: "Byline" });
+    k.instance(sheet, "Chip", { Label: "Oct 18 \u2013 Jan 11 \xB7 Harbour Gallery" }, { name: "Dates" });
+    k.cues(sheet, cues);
+    k.variants(sheet, storyCut((kit, id) => restyleAll(kit, id, ["Title"], "Title 150")));
+    return k.finish();
+  }
+});
+
+export {
+  letters_default
+};

package/dist/chunks/chunk-OC65B7BW.js

@@ -0,0 +1,234 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  KITTY,
+  billCard,
+  blink,
+  chip,
+  coin,
+  confetti,
+  couple,
+  evenBadge,
+  fillJar,
+  fitSoftGround,
+  hop,
+  jarCard,
+  lockup,
+  mochi,
+  pastelBrand,
+  pastelButton,
+  pillowCard,
+  popUp,
+  softGround,
+  springIn,
+  ts,
+  wave
+} from "./chunk-V2AZYMQW.js";
+import {
+  float,
+  reelCuts,
+  reelSheet,
+  wideCut
+} from "./chunk-YXFPVZM3.js";
+import {
+  clicks,
+  glide,
+  touch
+} from "./chunk-PT7RVGFZ.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-3YQOE5KZ.js";
+import {
+  bed
+} from "./chunk-KHGNV7UQ.js";
+import {
+  hide,
+  put,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  defineTemplate
+} from "./chunk-RCJYCZMT.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PN2PTI35.js";
+import {
+  ease
+} from "./chunk-ZGIMZ6SP.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/style-pastel-launch-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Pastel SaaS launch reel";
+var BEATS = 28;
+var B = bed("indie", BEATS);
+var beat = B.beat;
+var S = { ...B, beats: BEATS };
+var STAGE = { w: 800, h: 580 };
+var U = 1.75;
+var BEFORE = 0.42;
+var TAP = beat(17);
+var HOOKS = ["Who paid for dinner?", "Saving up for Lisbon?", "Square up in seconds.", "Money, but for two."];
+var swaps = [
+  { layer: "Hook", words: HOOKS, at: 0, hold: beat(7) - 360 - 300 - 6 * 70, stagger: 70, in: 360, out: 300, unit: "word", rise: 40 },
+  captionSwap(["Every bill, split without arguing.", "Round-ups fill your trip jar.", "Settle up with one tap.", "Free to start. Plus $6/month."], 0, B.duration - 30, { stagger: 60, in: 280, out: 200, rise: 22 })
+];
+var cues = [
+  { layer: "Brand row", preset: "fade-in", at: 0, params: { duration: 300 } },
+  springIn("Call row", beat(1)),
+  // The bill.
+  springIn("Bill card", beat(0.5), { from: 0.5 }),
+  springIn("Share", beat(3), { stagger: beat(0.5) }),
+  springIn("Owes", beat(4)),
+  { layer: "Bill card", preset: "pop-out", at: beat(6.4), params: { duration: 340 } },
+  // The jar.
+  { layer: "Jar card", preset: "slide-in", at: beat(7), params: { duration: 700, direction: "right", distance: 900, ease: ease.back(1.4) } },
+  springIn("Round-up", beat(11)),
+  { layer: "Jar card", preset: "pop-out", at: beat(13.4), params: { duration: 340 } },
+  // Settling up.
+  springIn("Big couple", beat(14), { from: 0.3 }),
+  springIn("Settle button", beat(14.5)),
+  { layer: "Settle button", preset: "pop-out", at: TAP + 260, params: { duration: 240 } },
+  springIn("Even badge", TAP + 380, { from: 0.2, duration: 700 }),
+  { layer: ["Big couple", "Even badge"], preset: "pop-out", at: beat(20.4), params: { duration: 340 }, stagger: { delay: 60 } },
+  // The close: the couple's kitty.
+  springIn("Kitty card", beat(21), { from: 0.5 }),
+  springIn("Kitty row", beat(22), { stagger: beat(0.5) }),
+  { layer: "Button", preset: "pulse", at: beat(24), params: { duration: beat(2), amount: 0.07 } },
+  { layer: "Button", preset: "pulse", at: beat(26), params: { duration: beat(1.5), amount: 0.05 } }
+];
+var counts = [
+  { layer: "Owes figure", at: beat(4), duration: 1e3, ease: ease.out("cubic"), counter: { from: 0, to: KITTY.bill.half, decimals: 2, prefix: "$" } },
+  { layer: "Jar figure", at: beat(8.5), duration: 1800, ease: ease.out("cubic"), counter: { from: KITTY.jar.before, to: KITTY.jar.saved, prefix: "$" } },
+  { layer: "Jar percent", at: beat(8.5), duration: 1800, ease: ease.out("cubic"), counter: { from: 42, to: KITTY.jar.percent, suffix: "%" } },
+  { layer: "Kitty balance", at: beat(21.5), duration: 1400, ease: ease.out("cubic"), counter: { from: 2800, to: 3214.5, decimals: 2, prefix: "$" } }
+];
+var style_pastel_launch_reel_default = defineTemplate({
+  id: "motion-saas-style-pastel-launch-reel",
+  meta: {
+    name: NAME,
+    description: "A 15-second launch video in the pastel soft UI look for a couples\u2019 money app: four questions on the beat, each answered by a pillowy product card that moves (a bill that splits itself, a trip jar that fills on a spring as coins tumble in, a tap that bursts into confetti), with a round apricot cat mascot who pops up, waves, blinks and hops. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "pastel", "soft ui", "playful", "mascot", "launch", "reel", "fintech", "consumer app", "couples", "counter", "confetti", "captions", "music", "audio", "tiktok", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "video"],
+    useCases: ["launch", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    pastelBrand(k);
+    const hookStyle = ts(k, "display", 112);
+    pastelButton(k, "Call", { style: ts(k, "title", 34), label: "Try {{brand.name}} free", pad: [24, 40], d: 1.4 });
+    pastelButton(k, "Settle", { style: ts(k, "title", 40), label: `Settle up \xB7 $${KITTY.bill.half.toFixed(2)}`, pad: [30, 48], d: 1.6 });
+    const sheet = reelSheet(k, S, { name: "Launch reel", gap: 28 });
+    softGround(k, sheet, 1080, 1920, { loop: B.duration, seed: 4 });
+    const pile = k.frame(sheet, { x: 120, y: 1640, width: 300, height: 200 }, { name: "Coin pile" });
+    [[0, 90], [70, 110], [140, 96], [40, 30], [110, 40], [76, -26]].forEach(([x, y], i) => coin(k, pile, 92, { name: "Pile coin", absolute: { x, y: y + (i > 2 ? 10 : 0) } }));
+    const cushion = k.ellipse(sheet, 520, "peach", { name: "Cushion", absolute: { x: 500, y: 1790 } });
+    k.patch(cushion, { height: 150 });
+    const m = mochi(k, sheet, 340, { absolute: { x: 590, y: 1490 } });
+    lockup(k, sheet, { size: 40, style: ts(k, "title", 40) });
+    const hook = k.text(sheet, HOOKS[0], { style: hookStyle, color: "text", name: "Hook" });
+    void hook;
+    const stage = k.stack(sheet, { width: STAGE.w, height: STAGE.h, name: "Stage" });
+    const bill = billCard(k, stage, U, { width: 800, absolute: { x: 0, y: 40 } });
+    k.patch(bill.samFill, { scaleX: 0.5 });
+    const jc = jarCard(k, stage, 2.05, { width: 800, absolute: { x: 0, y: 70 }, level: KITTY.jar.percent / 100, loop: B.duration });
+    const jarX = 57, jarTop = 127;
+    const drops = [0, 1, 2].map((i) => coin(k, stage, 64, { name: "Drop coin", absolute: { x: jarX + 30 + i * 20, y: jarTop + 120 } }));
+    couple(k, stage, 190, { name: "Big couple" });
+    put(k, stage, "Big couple", 400 - 162, 40, { layoutPositioning: "ABSOLUTE" });
+    const settle = k.instance(stage, "Settle", { Label: `Settle up \xB7 $${KITTY.bill.half.toFixed(2)}` }, { name: "Settle button", absolute: { x: 110, y: 330 } });
+    void settle;
+    evenBadge(k, stage, 1.9, { absolute: { x: 40, y: 300 } });
+    const tp = touch(k, stage, { x: 560, y: 390, size: 96, fill: "ink", ring: "ink" });
+    const burst = confetti(k, stage, { cx: 400, cy: 360, at: TAP + 380, n: 22, spread: 380, size: 26, seed: 5 });
+    void burst;
+    const kc = pillowCard(k, stage, { width: 800, height: 550, justify: "CENTER", padding: 48, gap: 30, radius: 56, depth: 1.6, name: "Kitty card", absolute: { x: 0, y: 25 } });
+    const top = k.stack(kc, { direction: "HORIZONTAL", gap: 22, align: "CENTER", name: "Kitty head" });
+    couple(k, top, 84, { name: "Kitty couple" });
+    const who = k.stack(top, { gap: 2, name: "Kitty who" });
+    k.text(who, `${KITTY.a} & ${KITTY.b}\u2019s kitty`, { style: ts(k, "title", 36), color: "onCard", name: "Kitty title" });
+    k.text(who, "Rent, groceries, Lisbon", { style: ts(k, "body", 24), color: "cardMuted", name: "Kitty sub" });
+    k.text(kc, "$3,214.50", { style: ts(k, "figure", 104), color: "onCard", width: 600, name: "Kitty balance" });
+    const rows = k.stack(kc, { direction: "HORIZONTAL", gap: 14, wrap: true, name: "Kitty rows" });
+    chip(k, rows, `Lisbon ${KITTY.jar.percent}%`, { style: ts(k, "soft", 26), fill: "mint", name: "Kitty row", pad: [12, 24] });
+    chip(k, rows, "Rent split 55/45", { style: ts(k, "soft", 26), fill: "sky", name: "Kitty row", pad: [12, 24] });
+    chip(k, rows, "You\u2019re even", { style: ts(k, "soft", 26), fill: "butter", name: "Kitty row", pad: [12, 24] });
+    captionStrip(k, sheet, swaps[1].words[0], { style: ts(k, "title", 40), fill: "card", ink: "onCard", radius: 32, pad: [22, 32], effects: [{ type: "DROP_SHADOW", color: { r: 0.12, g: 0.165, b: 0.235, a: 0.08 }, offset: { x: 0, y: 12 }, blur: 30, spread: 0, visible: true }] });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Call row" });
+    k.instance(row, "Call", { Label: "Try {{brand.name}} free" }, { name: "Button" });
+    const site = k.stack(row, { direction: "HORIZONTAL", width: "HUG", fill: "card", radius: 999, padding: { top: 16, right: 26, bottom: 16, left: 26 }, name: "Site pill" });
+    k.text(site, "{{brand.site}}", { style: ts(k, "soft", 30), color: "onCard", autoWidth: true, name: "Site" });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.animate(bill.samFill, "scaleX", [{ t: beat(2), v: 0, ease: ease.spring(160, 13) }, { t: beat(3.4), v: 0.5 }]);
+    drops.forEach((id, i) => {
+      const t = beat(8 + i * 0.5);
+      k.animate(id, "translateY", [{ t: 0, v: -520, ease: ease.hold }, { t, v: -520, ease: ease.out("bounce") }, { t: t + 520, v: 0 }]);
+      k.animate(id, "opacity", [{ t: t - 1, v: 0, ease: ease.hold }, { t, v: 1, ease: ease.hold }, { t: t + 560, v: 1, ease: ease.linear }, { t: t + 700, v: 0 }]);
+      k.animate(id, "rotation", [{ t, v: -40 + i * 30, ease: ease.out("cubic") }, { t: t + 520, v: 0 }]);
+    });
+    fillJar(k, jc.jar, beat(8.5), 1800, BEFORE, KITTY.jar.percent / 100);
+    k.animate(k.named(jc.card, "Jar progress")[0], "scaleX", [{ t: beat(8.5), v: BEFORE, ease: ease.out("cubic") }, { t: beat(8.5) + 1800, v: KITTY.jar.percent / 100 }]);
+    glide(k, tp, [{ t: beat(15.5), dx: 260, dy: 360 }, { t: TAP - 60, dx: 0, dy: 0 }, { t: TAP + 700, dx: 0, dy: 0 }, { t: TAP + 1100, dx: 300, dy: 420 }]);
+    clicks(k, tp, [TAP]);
+    k.animate(tp.arrow, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: beat(15.5), v: 0, ease: ease.linear }, { t: beat(15.5) + 200, v: 1, ease: ease.hold }, { t: TAP + 800, v: 1, ease: ease.linear }, { t: TAP + 1100, v: 0 }]);
+    popUp(k, m, beat(1));
+    wave(k, m, beat(2.5), 3);
+    blink(k, m, [beat(6), beat(10.5), beat(13), beat(20), beat(24.5)]);
+    hop(k, m, [TAP + 380, TAP + 1100], 90);
+    wave(k, m, beat(23), 4);
+    const copies = k.variants(sheet, [...reelCuts({ post: 56, portrait: 70 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 18, counterAxisSpacing: 18, padding: { top: 56, right: 140, bottom: 56, left: 140 } });
+        fitSoftGround(kit, id, { loop: B.duration, seed: 4 });
+        hide(kit, id, ["Brand row", "Call row", "Coin pile", "Cushion"]);
+        restyle(kit, id, "Hook", ts(kit, "display", 88));
+        for (const n of kit.named(id, "Stage")) kit.patch(n, { scaleX: 0.86, scaleY: 0.86, anchorX: 0.5, anchorY: 0, height: 520 });
+        put(kit, id, "Mochi", 840, 760);
+        for (const n of kit.named(id, "Mochi")) kit.patch(n, { scaleX: 0.6, scaleY: 0.6 });
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 22, counterAxisSpacing: 22, padding: { top: 64, right: 140, bottom: 64, left: 140 } });
+        fitSoftGround(kit, id, { loop: B.duration, seed: 4 });
+        hide(kit, id, ["Coin pile", "Cushion"]);
+        restyle(kit, id, "Hook", ts(kit, "display", 96));
+        for (const n of kit.named(id, "Stage")) kit.patch(n, { scaleX: 0.9, scaleY: 0.9, anchorX: 0.5, anchorY: 0, height: 540 });
+        put(kit, id, "Mochi", 850, 1010);
+        for (const n of kit.named(id, "Mochi")) kit.patch(n, { scaleX: 0.6, scaleY: 0.6 });
+      }
+    }), wideCut(640, (kit, id, right) => {
+      const scale = Math.min(right.width / STAGE.w, right.height / STAGE.h) * 0.96;
+      fitSoftGround(kit, id, { loop: B.duration, seed: 4 });
+      restyle(kit, id, "Hook", ts(kit, "display", 96));
+      float(kit, id, "Stage", right.x + (right.width - STAGE.w * scale) / 2, right.y + (right.height - STAGE.h * scale) / 2, { scale });
+      hide(kit, id, ["Coin pile", "Cushion"]);
+      kit.patch(id, { primaryAxisAlignItems: "MIN" });
+      hide(kit, id, ["Cushion"]);
+      put(kit, id, "Mochi", 150, 690);
+      for (const n of kit.named(id, "Mochi")) kit.patch(n, { scaleX: 0.8, scaleY: 0.8 });
+    })]);
+    void copies;
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_pastel_launch_reel_default
+};