@popcraft/kit 0.53.4 → 0.53.5

package/dist/chunks/chunk-BCZ4O4LH.js

@@ -0,0 +1,298 @@
+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,
+  pane,
+  panes,
+  recordButton,
+  stat
+} from "./chunk-N76TBBCV.js";
+import {
+  form,
+  repeats,
+  says,
+  userVariables,
+  visitorCollection
+} from "./chunk-4FRZC66Z.js";
+import {
+  field,
+  formStyles,
+  select,
+  submit
+} from "./chunk-KKSAY7EB.js";
+import {
+  buttons
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/tempo-app.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var KINDS = ["Run", "Ride", "Lift", "Swim", "Yoga", "Walk"];
+var KIND_ROLE = { Run: "run", Ride: "ride", Lift: "lift", Swim: "swim", Yoga: "yoga", Walk: "walk" };
+var EFFORTS = ["Easy", "Steady", "Hard"];
+var SAMPLES = [
+  { kind: "Run", minutes: 42, effort: "Steady", note: "River loop. Negative split on the way back.", best: "No", day: "Fri 2 Oct" },
+  { kind: "Lift", minutes: 55, effort: "Hard", note: "Squat 5\xD75. Last set moved well.", best: "Yes", day: "Thu 1 Oct" },
+  { kind: "Yoga", minutes: 25, effort: "Easy", note: "Hips and hamstrings before bed.", best: "No", day: "Wed 30 Sep" },
+  { kind: "Ride", minutes: 95, effort: "Steady", note: "Out to the reservoir with the Saturday group.", best: "Yes", day: "Sat 26 Sep" },
+  { kind: "Swim", minutes: 30, effort: "Hard", note: "10\xD7100 on two minutes.", best: "No", day: "Fri 25 Sep" }
+];
+var WEEK = [["M", 42, "Run"], ["T", 55, "Lift"], ["W", 25, "Yoga"], ["T", 0, "Walk"], ["F", 30, "Swim"], ["S", 95, "Ride"], ["S", 38, "Walk"]];
+var tempo_app_default = defineTemplate({
+  id: "web-tempo-app",
+  meta: {
+    name: "Tempo \u2014 a training log with accounts",
+    description: "A working workout log: visitors sign up and log a session in three taps and a number \u2014 what, how long, how hard. Each session is a bar as long as its minutes, coloured by what it was, and a tap marks it as a best and lifts it to the top. A dark, numbers-first design; every visitor keeps their own log in the database. Landing, sign-up, sign-in, log and account pages that fold from desktop to phone",
+    category: "web",
+    tags: ["app", "accounts", "sign in", "database", "fitness", "workout", "training", "log", "tracker", "dark", "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("Tempo", preset("web-desktop"));
+    k.brand(
+      { paper: "#0B0C0F", text: "#F4F6EE", onPaper: "#9CA2AB", primary: "#C8FF3D", onPrimary: "#0B0C0F", card: "#15171C", onCard: "#F4F6EE", cardMuted: "#8F959F", field: "#1D2026", onField: "#AEB4BD", line: "#2A2E37", danger: "#FF7A6B", onDanger: "#0B0C0F" },
+      { name: "Tempo" }
+    );
+    k.palette({ run: "#C8FF3D", ride: "#3DD6FF", lift: "#FF6B3D", swim: "#4D7CFF", yoga: "#C77DFF", walk: "#FFD23D" });
+    const mono = { fontFamily: "JetBrains Mono" };
+    k.textStyle("Brand 20", { size: 20, fontWeight: 900, letterSpacing: -0.4, lineHeight: 28 });
+    k.textStyle("Link 15", { size: 15, fontWeight: 600, lineHeight: 22 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 800, lineHeight: 24 });
+    k.textStyle("Code 12", { size: 12, ...mono, fontWeight: 700, letterSpacing: 1.4, lineHeight: 16 });
+    k.textStyle("Display 76", { size: 76, fontWeight: 900, letterSpacing: -3.4, lineHeight: 72 });
+    k.textStyle("Title 36", { size: 36, fontWeight: 900, letterSpacing: -1.2, lineHeight: 40 });
+    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: 800, lineHeight: 24 });
+    k.textStyle("Meta 14", { size: 14, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Chip 14", { size: 14, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Small 13", { size: 13, fontWeight: 700, lineHeight: 18 });
+    k.textStyle("Error 14", { size: 14, fontWeight: 600, lineHeight: 20 });
+    k.textStyle("Minutes 40", { size: 40, ...mono, fontWeight: 800, letterSpacing: -1.6, lineHeight: 40 });
+    k.textStyle("Stat 64", { size: 64, ...mono, fontWeight: 800, letterSpacing: -3, lineHeight: 64 });
+    formStyles(k, { thanks: false });
+    buttons(k, { style: "Button 16", radius: 14 });
+    const user = userVariables(k, { name: "Sam", email: "sam@example.com" });
+    const sessions = visitorCollection(k, "Sessions", [
+      { name: "Kind", type: "OPTION", options: [...KINDS] },
+      { name: "Minutes", type: "NUMBER" },
+      { name: "Effort", type: "OPTION", options: [...EFFORTS] },
+      { name: "Note", type: "TEXT" },
+      { name: "Best", type: "OPTION", options: ["No", "Yes"] },
+      { name: "Day", type: "DATE" }
+    ], SAMPLES);
+    const app = appPages(k, { brand: "Tempo", width: 1120, gap: 24 });
+    const mark = (parent) => {
+      const m = k.stack(parent, { direction: "HORIZONTAL", width: 30, height: 30, gap: 3, radius: 9, fill: "primary", align: "MAX", justify: "CENTER", padding: { top: 7, right: 0, bottom: 7, left: 0 }, name: "Mark" });
+      for (const h of [8, 16, 11]) k.rect(m, 4, h, "onPrimary", { radius: 2, name: "Beat" });
+      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 20", color: "text", autoWidth: true, name: "Brand name" });
+      right?.(row);
+      return brand;
+    };
+    const week = (parent) => {
+      const card = k.stack(parent, { width: 460, gap: 22, fill: "card", radius: 30, stroke: { color: "line", width: 1 }, padding: 28, name: "Week card" });
+      const top = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "MAX", name: "Week head" });
+      const total = k.stack(top, { width: "HUG", gap: 2, name: "Week total" });
+      k.text(total, "THIS WEEK", { style: "Code 12", color: "cardMuted", autoWidth: true, name: "Week label" });
+      const figure = k.stack(total, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "MAX", name: "Week figure" });
+      k.text(figure, "285", { style: "Stat 64", color: "onCard", autoWidth: true, name: "Week minutes" });
+      k.text(figure, "MIN", { style: "Code 12", color: "cardMuted", autoWidth: true, name: "Week unit" });
+      const streak = k.stack(top, { direction: "HORIZONTAL", width: "HUG", radius: 999, fill: "primary", padding: { top: 6, right: 12, bottom: 6, left: 12 }, name: "Week badge" });
+      k.text(streak, "6 SESSIONS", { style: "Code 12", color: "onPrimary", autoWidth: true, name: "Week badge label" });
+      const bars = k.stack(card, { direction: "HORIZONTAL", height: 190, gap: 12, align: "MAX", justify: "SPACE_BETWEEN", name: "Week bars" });
+      for (const [day, minutes, kind] of WEEK) {
+        const col = k.stack(bars, { width: 44, gap: 10, align: "CENTER", name: "Day" });
+        k.rect(col, 44, Math.max(6, Math.round(minutes * 1.6)), minutes ? KIND_ROLE[kind] : "field", { radius: 10, name: "Day bar" });
+        k.text(col, day, { style: "Code 12", color: "cardMuted", align: "CENTER", name: "Day letter" });
+      }
+      return card;
+    };
+    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: 22, name: "Lead" });
+    pane(k, lead, 320);
+    eyebrow(k, lead, "A TRAINING LOG, NOTHING ELSE", "Code 12");
+    k.text(lead, "Show up.\nWrite it down.", { style: "Display 76", color: "text", name: "Headline" });
+    k.text(lead, "Three taps and a number: what you did, how long, how hard. Tempo keeps the log and shows you the shape of your weeks.", { 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 log" }, { 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);
+    week(heroArt);
+    const closer = k.stack(welcome.column, { gap: 18, name: "Body" });
+    const strip = panes(k, closer, { gap: 16, name: "Points" });
+    for (const [figure, unit, what] of [["10", "SEC", "to log a session. No timers to start, no watch to pair."], ["6", "KINDS", "Run, ride, lift, swim, yoga, walk. Each has its own colour."], ["1", "TAP", "marks a best, and keeps it at the top where you can see it."]]) {
+      const tile = k.stack(strip, { gap: 10, fill: "card", radius: 22, stroke: { color: "line", width: 1 }, padding: 24, name: "Fact" });
+      pane(k, tile, 250);
+      const f = k.stack(tile, { direction: "HORIZONTAL", gap: 8, align: "MAX", name: "Fact figure" });
+      k.text(f, figure, { style: "Minutes 40", color: "onCard", autoWidth: true, name: "Fact number" });
+      k.text(f, unit, { style: "Code 12", color: "cardMuted", autoWidth: true, name: "Fact unit" });
+      k.text(tile, what, { style: "Note 15", color: "cardMuted", name: "Fact body" });
+    }
+    closing(k, app, closer, { title: "Your first session is ten seconds away.", style: "Title 36", button: "Start your log", radius: 22 });
+    const accounts = accountPages(k, app, {
+      styles: { title: "Title 36", 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" });
+        week(p);
+      },
+      copy: {
+        "Sign up": { title: "Start your log", body: "A name, an email and a password. Your sessions are yours alone.", button: "Create account", namePlaceholder: "Sam" },
+        "Sign in": { title: "Back at it", body: "Your log is where you left it.", button: "Sign in" }
+      }
+    });
+    const log = app.page("Log", "/log", "signedIn");
+    topBar(log.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, "Sam", { style: "Link 15", color: "onCard", autoWidth: true, name: "Account name" }), "name");
+      app.link(who, "Account", "up");
+    });
+    const banner = panes(k, log.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 LOG", "Code 12");
+    const helloRow = k.stack(hello, { direction: "HORIZONTAL", gap: 10, wrap: true, name: "Greeting" });
+    k.text(helloRow, "What did you do,", { style: "Title 36", color: "text", autoWidth: true, name: "Greeting words" });
+    says(k, k.text(helloRow, "Sam", { style: "Title 36", color: "text", autoWidth: true, name: "Greeting name" }), "name");
+    const tally = k.stack(banner, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "MAX", name: "Tally" });
+    k.bindExpression(k.text(tally, "5", { style: "Stat 64", color: "text", autoWidth: true, name: "Tally number" }), "characters", sessions.word);
+    k.text(tally, "SESSIONS\nLOGGED", { style: "Code 12", color: "onPaper", autoWidth: true, name: "Tally words" });
+    const stats = panes(k, log.column, { gap: 12, name: "Stats" });
+    for (const [label, expression, sample, unit] of [
+      ["Minutes this week", 'sumSince("Sessions", "minutes", 6)', "247", "MIN"],
+      ["Sessions this week", 'countSince("Sessions", 6)', "5", ""],
+      ["Longest session", 'best("Sessions", "minutes")', "95", "MIN"],
+      ["Days in a row", 'streak("Sessions")', "3", "DAYS"]
+    ]) stat(k, stats, { label, expression, sample, figure: "Minutes 40", caption: "Code 12", unit: unit || void 0, min: 200 });
+    const work = panes(k, log.column, { gap: 24, name: "Work" });
+    const composer = k.stack(work, { gap: 18, fill: "card", radius: 26, stroke: { color: "line", width: 1 }, padding: 26, name: "Art" });
+    pane(k, composer, 320);
+    k.text(composer, "LOG A SESSION", { style: "Code 12", color: "cardMuted", name: "Composer label" });
+    const add = k.stack(composer, { gap: 18, name: "Log form" });
+    choice(k, add, { card: true, label: "What", name: "kind", word: "sessionKind", options: KINDS, style: "Chip 14" });
+    field(k, add, { card: true, label: "Minutes", name: "minutes", placeholder: "45", type: "number", required: true });
+    choice(k, add, { card: true, label: "How hard", name: "effort", word: "sessionEffort", options: EFFORTS, style: "Chip 14" });
+    field(k, add, { card: true, label: "One line about it", name: "note", placeholder: "How it went" });
+    errorLine(k, add, "Error 14");
+    k.patch(submit(k, add, "Log it", { name: "Log button" }), { control: { kind: "BUTTON", buttonType: "submit", name: "best", value: "No" } });
+    form(k, add, { collectionId: sessions.id });
+    const feed = k.stack(work, { gap: 22, name: "Body" });
+    pane(k, feed, 340);
+    const empty = k.stack(feed, { gap: 6, padding: 28, radius: 22, stroke: { color: "line", width: 1 }, name: "Empty log" });
+    k.text(empty, "Nothing logged yet", { style: "Card title 18", color: "text", name: "Empty title" });
+    k.text(empty, "Your first session shows up here as a bar. Go and earn it.", { style: "Note 15", color: "onPaper", name: "Empty body" });
+    k.bindExpression(empty, "visible", `${sessions.word} == 0`);
+    k.patch(empty, { visible: false });
+    const session = (list, best) => {
+      const row = k.stack(list, { gap: 12, fill: "card", radius: 20, stroke: { color: "line", width: 1 }, padding: 18, name: "Session" });
+      const top = k.stack(row, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Session top" });
+      const figure = k.stack(top, { direction: "HORIZONTAL", width: "HUG", gap: 6, align: "MAX", name: "Session minutes" });
+      k.text(figure, "{{item.minutes}}", { style: "Minutes 40", color: "onCard", autoWidth: true, name: "Minutes number" });
+      k.text(figure, "MIN", { style: "Code 12", color: "cardMuted", autoWidth: true, name: "Minutes unit" });
+      const what = k.stack(top, { gap: 0, name: "Session what" });
+      k.text(what, "{{item.kind}}", { style: "Card title 18", color: "onCard", name: "Session kind" });
+      k.text(what, "{{item.effort}} \xB7 {{item.day}}", { style: "Meta 14", color: "cardMuted", name: "Session when" });
+      const track = k.stack(row, { direction: "HORIZONTAL", height: 10, radius: 5, fill: "field", clip: true, name: "Track" });
+      for (const kind of KINDS) {
+        const bar = k.rect(track, 168, 10, KIND_ROLE[kind], { radius: 5, name: `${kind} bar` });
+        k.bindExpression(bar, "width", "item_minutes * 4");
+        k.bindExpression(bar, "visible", `item_kind == "${kind}"`);
+        if (kind !== KINDS[0]) k.patch(bar, { visible: false });
+      }
+      const view = k.stack(row, { gap: 12, name: "Session view" });
+      k.text(view, "{{item.note}}", { style: "Note 15", color: "onCard", name: "Session note" });
+      const actions = k.stack(view, { direction: "HORIZONTAL", gap: 6, wrap: true, align: "CENTER", name: "Session actions" });
+      if (best) recordButton(k, actions, "Not a best", { set: ["best", "No"], style: "Small 13", line: "line", color: "onCard" });
+      else {
+        const mark2 = recordButton(k, actions, "Mark as a best", { set: ["best", "Yes"], style: "Small 13", fill: "primary", color: "onPrimary" });
+        k.bindExpression(mark2, "visible", 'item_best != "Yes"');
+        const marked = k.stack(actions, { direction: "HORIZONTAL", width: "HUG", radius: 999, stroke: { color: "primary", width: 1 }, padding: { top: 6, right: 12, bottom: 6, left: 12 }, name: "Best badge" });
+        k.text(marked, "A best", { style: "Small 13", color: "onCard", autoWidth: true, name: "Best badge label" });
+        k.bindExpression(marked, "visible", 'item_best == "Yes"');
+      }
+      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, actions, "Remove", { style: "Small 13", color: "cardMuted" });
+      editInPlace(k, { word: "editingSession", view, parent: row, trigger: edit, style: "Small 13", build: (f) => {
+        const minutes = field(k, f, { card: true, label: "Minutes", name: "minutes", placeholder: "45", type: "number", required: true });
+        k.patch(minutes, { control: { ...k.node(minutes).control, value: "{{item.minutes}}" } });
+        const effort = select(k, f, { card: true, label: "How hard", name: "effort", options: EFFORTS });
+        k.patch(effort, { control: { ...k.node(effort).control, value: "{{item.effort}}" } });
+        const note = field(k, f, { card: true, label: "Note", name: "note", placeholder: "How it went" });
+        k.patch(note, { control: { ...k.node(note).control, value: "{{item.note}}" } });
+      } });
+    };
+    const section = (title, blurb, filter, best) => {
+      const s = k.stack(feed, { gap: 12, name: `${title} section` });
+      const head = k.stack(s, { direction: "HORIZONTAL", gap: 10, align: "MAX", name: "Section head" });
+      k.text(head, title, { style: "Card title 18", color: "text", autoWidth: true, name: "Section title" });
+      k.text(head, blurb, { style: "Meta 14", color: "onPaper", autoWidth: true, name: "Section blurb" });
+      const list = k.stack(s, { gap: 12, name: `${title} list` });
+      repeats(k, list, sessions.id, { limit: 60 });
+      if (filter) k.patch(list, { repeat: { collectionId: sessions.id, limit: 60, filter } });
+      session(list, best);
+    };
+    section("Bests", "The ones to beat", 'item_best == "Yes"', true);
+    section("Every session", "Newest first", null, false);
+    const out = accountPage(k, app, {
+      user,
+      home: "Log",
+      back: "Back to the log",
+      sample: { name: "Sam", email: "sam@example.com" },
+      styles: { eyebrow: "Code 12", title: "Title 36", label: "Meta 14", value: "Card title 18", stat: "Stat 64", link: "Link 15" },
+      count: { label: "Sessions logged", word: sessions.word, sample: "5" },
+      top: (column, right) => {
+        topBar(column, right);
+      },
+      art: (p) => {
+        week(p);
+      }
+    });
+    app.finish("Welcome");
+    accounts.leads("Log");
+    out.leads();
+    return k.finish();
+  }
+});
+
+export {
+  tempo_app_default
+};

package/dist/chunks/chunk-BDN3NNRP.js

@@ -0,0 +1,92 @@
+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,
+  heart,
+  lottieTemplate,
+  roundRect
+} from "./chunk-UCGZ6DEK.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/lottie/realestate.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var HOME = { paper: "#F4F6F2", ink: "#1F2A24", accent: "#2E7D5B", roof: "#C2573B", soft: "#DDE8DF", window: "#FFD27A", wall: "#FFFFFF", dark: "#9FB3A6" };
+var homeSearch = lottieTemplate({
+  slug: "home-search",
+  sector: "realestate",
+  role: "icon",
+  size: "icon",
+  duration: 3e3,
+  loop: true,
+  name: "Home search",
+  description: "A property-search icon: a magnifier circles a house and each window lights up as the lens passes over it \u2014 a three-second seamless loop, 512\xD7512",
+  colors: HOME,
+  tags: ["house", "search", "property", "listing"],
+  build(l) {
+    l.circle(l.sheet, 256, 270, 200, "soft", { name: "Backdrop" });
+    l.shape(l.sheet, [[256, 110], [406, 236], [106, 236]], "roof", { name: "Roof" });
+    l.rect(l.sheet, 136, 226, 240, 170, "wall", { name: "Walls", stroke: { color: "ink", width: 12 } });
+    l.rect(l.sheet, 226, 306, 60, 90, "accent", { radius: 8, name: "Door" });
+    const windows = [[160, 256], [306, 256], [160, 320], [306, 320]];
+    windows.forEach(([x, y], i) => {
+      l.rect(l.sheet, x, y, 46, 40, "dark", { radius: 6, name: "Window" });
+      const w = l.rect(l.sheet, x, y, 46, 40, "window", { radius: 6, name: "Window light", opacity: 0 });
+      const t = 450 + i * 600;
+      l.opacity(w, [[0, 0, E.hold], [t, 0, E.out], [t + 200, 1, E.hold], [2600, 1, E.inOut], [2900, 0, E.hold], [3e3, 0]]);
+    });
+    const lens = l.box(l.sheet, 250, 250, 170, 170, "Magnifier");
+    l.circle(lens, 62, 62, 48, "wall", { name: "Glass", opacity: 0.35 });
+    l.ring(lens, 62, 62, 50, "ink", 16, { name: "Rim" });
+    l.line(lens, [[100, 100], [150, 150]], "ink", 22, { name: "Handle" });
+    const stops = [[0, 0], [-129, -36], [17, -36], [-129, 28], [17, 28], [0, 0]];
+    l.keys(lens, "translateX", stops.map(([x], i) => [i * 600, x, E.inOut]));
+    l.keys(lens, "translateY", stops.map(([, y], i) => [i * 600, y, E.inOut]));
+    l.keys(lens, "rotation", [[0, 0, E.inOut], [1500, -12, E.inOut], [3e3, 0]]);
+  }
+});
+var homeSaveListing = lottieTemplate({
+  slug: "save-listing",
+  sector: "realestate",
+  role: "micro-interaction",
+  size: "icon",
+  duration: 2400,
+  loop: true,
+  name: "Save listing",
+  description: "Saving a home to a shortlist: on the listing card the heart fills with a pop and a burst, holds, then clears \u2014 a 2.4-second seamless loop, 512\xD7512",
+  colors: HOME,
+  tags: ["favourite", "like", "shortlist", "listing"],
+  build(l) {
+    const card = l.box(l.sheet, 76, 66, 360, 380, "Listing", { fill: "wall", radius: 32, stroke: { color: "soft", width: 4 } });
+    l.vector(card, [{ pts: roundRect(20, 20, 320, 220, 20), closed: true }], "soft", { name: "Photo" });
+    l.shape(card, [[180, 70], [270, 146], [90, 146]], "roof", { name: "Roof" });
+    l.rect(card, 112, 140, 136, 84, "accent", { name: "House" });
+    l.rect(card, 162, 170, 36, 54, "window", { radius: 6, name: "Door" });
+    l.rect(card, 28, 266, 200, 22, "dark", { radius: 11, name: "Price" });
+    l.rect(card, 28, 306, 140, 16, "soft", { radius: 8, name: "Address" });
+    const btn = l.box(card, 262, 34, 64, 64, "Save", { fill: "wall", radius: 32 });
+    l.shape(btn, heart(32, 18, 34), [], { name: "Heart outline", stroke: { color: "roof", width: 5 } });
+    const full = l.shape(btn, heart(32, 18, 34), "roof", { name: "Heart" });
+    l.scale(full, [[0, 0, E.hold], [300, 0, E.pop], [600, 1, E.hold], [1900, 1, E.in], [2150, 0, E.hold], [2400, 0]]);
+    l.scale(btn, [[0, 1, E.hold], [300, 1, E.out], [420, 1.18, E.inOut], [650, 1, E.hold], [2400, 1]]);
+    for (let i = 0; i < 6; i++) {
+      const a = i * 60 * Math.PI / 180;
+      const d = l.circle(card, 294 + 36 * Math.sin(a), 66 - 36 * Math.cos(a), 5, i % 2 ? "window" : "roof", { name: "Burst", opacity: 0 });
+      l.keys(d, "translateX", [[0, 0, E.hold], [350, 0, E.out], [850, 22 * Math.sin(a), E.hold], [2400, 0]]);
+      l.keys(d, "translateY", [[0, 0, E.hold], [350, 0, E.out], [850, -22 * Math.cos(a), E.hold], [2400, 0]]);
+      l.opacity(d, [[0, 0, E.hold], [350, 0, E.out], [420, 1, E.in], [850, 0, E.hold], [2400, 0]]);
+    }
+  }
+});
+var REALESTATE_PACK = [homeSearch, homeSaveListing];
+
+export {
+  homeSearch,
+  homeSaveListing,
+  REALESTATE_PACK
+};

package/dist/chunks/chunk-BGSZUBU2.js

@@ -0,0 +1,192 @@
+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 {
+  calendar,
+  calendarSize,
+  fitHills,
+  hills,
+  holidayBrand,
+  lights,
+  openDoor,
+  parcels
+} from "./chunk-UEMN4CF5.js";
+import {
+  fitSnow,
+  snow
+} from "./chunk-ZQS4FIVV.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  bed
+} from "./chunk-KHGNV7UQ.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset,
+  swapTimes
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/winter-holidays-advent-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MUSIC = bed("festive", 28);
+var beat = MUSIC.beat;
+var DURATION = MUSIC.duration;
+var FINALE = beat(20);
+var CALENDAR = {
+  cols: 4,
+  w: 178,
+  h: 192,
+  gap: 14,
+  pad: 16,
+  u: 1,
+  title: "Twelve days of {{brand.name}}",
+  styles: { num: "Door 44", title: "Board title 22" },
+  // At rest (the still) five doors stand open; the timeline starts them all shut.
+  open: [1, 4, 7, 9, 12],
+  doors: [
+    { n: 7, icon: "heart" },
+    { n: 2, icon: "star" },
+    { n: 11, icon: "candle" },
+    { n: 4, icon: "receipt" },
+    { n: 9, icon: "tree" },
+    { n: 1, icon: "envelope" },
+    { n: 6, icon: "mug" },
+    { n: 12, icon: "gift" },
+    { n: 3, icon: "star" },
+    { n: 10, icon: "mug" },
+    { n: 5, icon: "candle" },
+    { n: 8, icon: "heart" }
+  ]
+};
+var TOLD = [1, 4, 7, 9, 12];
+var LINES = [
+  "Twelve doors. Twelve things you own.",
+  "Door 1: invoices send themselves.",
+  "Door 4: receipts, read from a photo.",
+  "Door 7: polite late-payment nudges.",
+  "Door 9: tax set aside as you\u2019re paid.",
+  "Door 12: give a freelancer the year."
+];
+var CHAIN = { layer: "Caption", words: LINES, stagger: 30, in: 300, out: 200, unit: "word", rise: 26 };
+var lead = (hold) => swapTimes({ ...CHAIN, at: 0, hold })[5].enters;
+var HOLD = Math.floor((FINALE - 100 - lead(0)) / 5);
+var swaps = [{ ...CHAIN, hold: HOLD, at: FINALE - lead(HOLD) }];
+var SAID = swapTimes(swaps[0]);
+var opens = TOLD.map((_, i) => SAID[i + 1].enters);
+var REST = CALENDAR.doors.map((d) => d.n).filter((n) => !TOLD.includes(n));
+var cues = [
+  { layer: "Date pill", preset: "fade-in", at: 0, params: { duration: 250 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Headline", preset: "words-in", at: 0, params: { duration: 500 } },
+  { layer: "Calendar", preset: "rise-in", at: 100, params: { duration: 600 } },
+  { layer: "Bow", preset: "wobble", at: FINALE, params: { duration: 900 } },
+  { layer: "Call", preset: "rise-in", at: FINALE + beat(2), params: { duration: 500 } },
+  { layer: "Site", preset: "fade-in", at: FINALE + beat(3), params: { duration: 500 } },
+  { layer: "Call", preset: "pulse", at: FINALE + beat(6), params: { duration: 800, amount: 0.05 } }
+];
+var ground = (h, top, bare = false) => ({ w: 1080, h, top, u: 1, ...bare ? { firs: [0, 0] } : {} });
+var FAR = { w: 1080, h: 1920, n: 70, u: 1, depth: "far", loopMs: DURATION };
+var NEAR = { w: 1080, h: 1920, n: 30, u: 1, depth: "near", loopMs: DURATION };
+var winter_holidays_advent_reel_default = defineTemplate({
+  id: "motion-winter-holidays-advent-reel",
+  meta: {
+    name: "Holiday advent-calendar reel",
+    description: "A 16-second holiday reel for a SaaS, told as an advent calendar: twelve wrapped paper doors stand in the snow and swing open on the beat, each lighting a warm niche while a burned-in caption names the feature behind it; the last door is a gift offer (give someone a year of the product), every door left opens in a ripple and the button rises. Snow at two depths, a string of bulbs and parcels in the snow. Music-box track (made by PopCraft, CC0). 9:16 with 1:1 and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "holiday", "winter", "advent calendar", "december", "gift", "gift a plan", "snow", "doors", "tips", "features", "saas", "reel", "captions", "music", "audio", "seasonal"],
+    platforms: ["instagram", "tiktok", "youtube", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["tips", "sale", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, swaps },
+  build() {
+    const k = new Kit("Holiday advent-calendar reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    holidayBrand(k);
+    k.textStyle("Date 26", { ...MONO, size: 26, fontWeight: 800, lineHeight: 34 });
+    k.textStyle("Eyebrow 24", { size: 24, fontWeight: 700, letterSpacing: 3.5, lineHeight: 32, textCase: "UPPER" });
+    k.textStyle("Headline 66", { ...SERIF, size: 66, fontWeight: 900, letterSpacing: -2, lineHeight: 70 });
+    k.textStyle("Headline 44", { ...SERIF, size: 44, fontWeight: 900, letterSpacing: -1.1, lineHeight: 50 });
+    k.textStyle("Door 44", { ...SERIF, size: 44, fontWeight: 900, letterSpacing: -1, lineHeight: 48 });
+    k.textStyle("Board title 22", { size: 22, fontWeight: 700, letterSpacing: 4, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Caption 40", { size: 40, fontWeight: 700, letterSpacing: -0.5, lineHeight: 50, textAlign: "CENTER" });
+    k.textStyle("Caption 30", { size: 30, fontWeight: 700, letterSpacing: -0.3, lineHeight: 38, textAlign: "CENTER" });
+    k.textStyle("Button 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+    k.textStyle("Site 26", { size: 26, fontWeight: 600, letterSpacing: 0.5, lineHeight: 34, textAlign: "CENTER" });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Gift a year of Fennel: $96", pad: [22, 40], radius: 10 });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Advent reel");
+    k.flowSheet(sheet, 0, verticalPadding(), "paper", "SPACE_BETWEEN", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
+    lights(k, sheet, { w: 1080, y: 36, u: 1, swags: 3, loopMs: DURATION });
+    snow(k, sheet, FAR);
+    hills(k, sheet, ground(1920, 1650));
+    parcels(k, sheet, { x: 40, base: 1850, u: 1.15, name: "Parcels left" });
+    parcels(k, sheet, { x: 610, base: 1895, u: 0.95, name: "Parcels right", flip: true });
+    const top = k.stack(sheet, { gap: 16, name: "Top" });
+    const brow = k.stack(top, { direction: "HORIZONTAL", gap: 18, align: "CENTER", name: "Brow" });
+    const date = k.stack(brow, { width: "HUG", fill: "primary", radius: 8, padding: { top: 6, right: 14, bottom: 6, left: 14 }, name: "Date pill" });
+    k.text(date, "1\u201312 DEC", { style: "Date 26", color: "onPrimary", autoWidth: true, name: "Date" });
+    k.text(brow, "{{brand.name}} \xB7 Holiday advent", { style: "Eyebrow 24", color: "onPaper", name: "Eyebrow" });
+    k.text(top, "Twelve small gifts already hiding in {{brand.name}}.", { style: "Headline 66", color: "text", name: "Headline" });
+    const wall = calendar(k, sheet, CALENDAR);
+    const foot = k.stack(sheet, { gap: 20, align: "CENTER", name: "Foot" });
+    k.text(foot, LINES[0], { style: "Caption 40", color: "text", name: "Caption" });
+    k.instance(foot, "Button", { Label: "Gift a year of Fennel: $96" }, { name: "Call" });
+    k.text(foot, "Arrives by email on the day you pick \xB7 {{brand.site}}/gift", { style: "Site 26", color: "onPaper", name: "Site" });
+    snow(k, sheet, NEAR);
+    if (SAID.at(-1).gone > DURATION) throw new Error("holiday reel: the captions run past the music");
+    TOLD.forEach((n, i) => openDoor(k, wall, n, opens[i]));
+    REST.forEach((n, i) => openDoor(k, wall, n, FINALE + beat(1) + i * 110, 420));
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    const scenery = (kit, id, h, top2) => {
+      fitHills(kit, id, ground(h, top2, true));
+      fitSnow(kit, id, FAR);
+      fitSnow(kit, id, NEAR);
+      for (const name of ["Parcels left", "Parcels right"]) for (const n of kit.named(id, name)) kit.patch(n, { visible: false });
+    };
+    k.variants(sheet, feedVariants({ post: 44, portrait: 72 }, {
+      post: (kit, id) => {
+        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Headline 44");
+        for (const n of kit.named(id, "Top")) kit.patch(n, { itemSpacing: 6 });
+        for (const n of kit.named(id, "Caption")) kit.restyle(n, "Caption 30");
+        for (const n of kit.named(id, "Foot")) kit.patch(n, { itemSpacing: 10 });
+        for (const n of kit.named(id, "Site")) kit.patch(n, { visible: false });
+        for (const name of ["Wire", "Bulb", "Bulb cap"]) for (const n of kit.named(id, name)) kit.patch(n, { visible: false });
+        scenery(kit, id, 1080, 1100);
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 124, right: 72, bottom: 72, left: 72 } });
+        scenery(kit, id, 1350, 1390);
+      }
+    }));
+    k.setCover(sheet);
+    if (calendarSize(CALENDAR).h > 700) throw new Error("holiday reel: the calendar is taller than the square cut has room for");
+    return k.finish();
+  }
+});
+
+export {
+  winter_holidays_advent_reel_default
+};