@popcraft/kit 0.32.0 → 0.32.1

package/dist/chunks/chunk-EHKPUAOJ.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-CASOFXSS.js";
+import {
+  form,
+  repeats,
+  says,
+  userVariables,
+  visitorCollection
+} from "./chunk-CDWTNBW2.js";
+import {
+  field,
+  formStyles,
+  select,
+  submit
+} from "./chunk-M6XFQILQ.js";
+import {
+  buttons
+} from "./chunk-TF2MO3UA.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.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-EJTYIUA5.js

@@ -0,0 +1,142 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  ARIAL,
+  COURIER,
+  MAIL_W,
+  callToAction,
+  finishMail,
+  mailButton,
+  mailFooter,
+  mailHeader,
+  mailRow,
+  mailSheet,
+  section,
+  swell
+} from "./chunk-3GWXJYDO.js";
+import {
+  dotPaths,
+  tick
+} from "./chunk-UDE42EDS.js";
+import {
+  MONO
+} from "./chunk-PFCHOCEN.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/email/saas-mail-sign-in-code.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4e3;
+var HEADER_H = 148;
+var DIAL = { size: 92, r: 38, ticks: 10 };
+var cues = [
+  { layer: "Minutes", preset: "pulse", at: 600, params: { duration: 700, amount: 0.08 } }
+];
+var ASKED = [
+  ["When", "Friday 2 October 2026, 14:02 UTC"],
+  ["Where", "Chrome on macOS, near Lisbon, Portugal"],
+  ["For", "mara@haldenstudio.example"]
+];
+function dialTicks(from, to) {
+  const c = DIAL.size / 2;
+  return Array.from({ length: to - from }, (_, i) => {
+    const a = (from + i) / DIAL.ticks * Math.PI * 2;
+    const sx = Math.sin(a), sy = -Math.cos(a);
+    return { closed: false, points: [{ x: c + sx * (DIAL.r - 9), y: c + sy * (DIAL.r - 9) }, { x: c + sx * DIAL.r, y: c + sy * DIAL.r }] };
+  });
+}
+var saas_mail_sign_in_code_default = defineTemplate({
+  id: "email-saas-mail-sign-in-code",
+  meta: {
+    name: "SaaS lifecycle email: password reset and sign-in code",
+    description: "A whole 600 px password reset or magic-link email, plain and fast to read: a thin brand strip with a ten-minute dial, then the six-digit code as large live text with its expiry, the same code as a one-click button, and who asked and from where, with what to do if it was not you. The strip loops for four seconds (export it as a GIF); the body is table-safe type",
+    category: "email",
+    tags: ["email", "saas", "lifecycle", "password reset", "magic link", "sign in", "verification code", "one-time code", "security", "transactional", "monochrome", "animated", "gif", "html"],
+    platforms: ["email"],
+    formats: ["email"],
+    useCases: ["onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("SaaS lifecycle email: password reset and sign-in code", preset("email-body"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FFFFFF", text: "#0E0F0C", onPaper: "#43463F", primary: "#0E0F0C", onPrimary: "#FFFFFF", accent: "#1F8A54", onAccent: "#FFFFFF", tint: "#F1F2EC", onTint: "#0E0F0C" },
+      { company: "Ferry", address: "Rua da Boavista 73, 1200-066 Lisboa", code: "418 207" }
+    );
+    k.palette({ strip: "#0E0F0C", onStrip: "#FFFFFF", stripSoft: "#B9BDB1", dot: "#FFFFFF", spent: "#3A3D36", safe: "#4FD08D" });
+    k.textStyle("Brand 26", { size: 26, fontWeight: 800, letterSpacing: -0.8, lineHeight: 30 });
+    k.textStyle("Strip 12", { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1.6, lineHeight: 16 });
+    k.textStyle("Minutes 26", { ...MONO, size: 26, fontWeight: 800, letterSpacing: -1, lineHeight: 28, textAlign: "CENTER" });
+    k.textStyle("Heading 26", { ...ARIAL, size: 26, fontWeight: 700, lineHeight: 32 });
+    k.textStyle("Body 16", { ...ARIAL, size: 16, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Label 12", { ...COURIER, size: 12, fontWeight: 700, letterSpacing: 1.5, lineHeight: 16 });
+    k.textStyle("Code 56", { ...COURIER, size: 56, fontWeight: 700, letterSpacing: 4, lineHeight: 64 });
+    k.textStyle("Strong 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Small 15", { ...ARIAL, size: 15, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Button 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Fine 13", { ...ARIAL, size: 13, fontWeight: 400, lineHeight: 19 });
+    mailButton(k, "Mail button", { fill: "primary", ink: "onPrimary", style: "Button 16", label: "Sign in with one click", width: 280, height: 52 });
+    const sheet = mailSheet(k, { paper: "paper", duration: DURATION });
+    const head = mailHeader(k, sheet, HEADER_H, "strip");
+    k.vector(head, MAIL_W, HEADER_H, dotPaths(MAIL_W, HEADER_H, 16, 2), "dot", { name: "Dots", opacity: 0.1, absolute: { x: 0, y: 0 } });
+    k.text(head, "{{brand.company}}", { style: "Brand 26", color: "onStrip", width: 380, name: "Brand", absolute: { x: 40, y: 44 } });
+    const line = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "What this is", absolute: { x: 40, y: 84 } });
+    tick(k, line, 13, "safe");
+    k.text(line, "SIGN-IN CODE \xB7 WORKS ONCE", { style: "Strip 12", color: "stripSoft", autoWidth: true, name: "What" });
+    const dial = k.stack(head, { width: DIAL.size, height: DIAL.size, align: "CENTER", justify: "CENTER", name: "Dial", absolute: { x: MAIL_W - 40 - DIAL.size, y: (HEADER_H - DIAL.size) / 2 } });
+    k.vector(dial, DIAL.size, DIAL.size, dialTicks(1, DIAL.ticks), "spent", { name: "Minutes left", strokeWidth: 4, absolute: { x: 0, y: 0 } });
+    const lit = k.vector(dial, DIAL.size, DIAL.size, dialTicks(0, 1), "safe", { name: "This minute", strokeWidth: 4, absolute: { x: 0, y: 0 } });
+    swell(k, lit, "opacity", { amp: 0.3, loopMs: DURATION, cycles: 2 });
+    k.patch(lit, { opacity: 0.7 });
+    const hand = k.stack(dial, { width: DIAL.size, height: DIAL.size, name: "Hand", absolute: { x: 0, y: 0 } });
+    k.ellipse(hand, 7, "safe", { name: "Hand tip", absolute: { x: DIAL.size / 2 - 3.5, y: DIAL.size / 2 - DIAL.r - 14 } });
+    k.behave(hand, "rotation", [{ kind: "spin", rate: 36e4 / DURATION }]);
+    k.text(dial, "10", { style: "Minutes 26", color: "onStrip", name: "Minutes" });
+    k.text(dial, "MIN", { style: "Strip 12", color: "stripSoft", align: "CENTER", name: "Minutes label" });
+    const intro = section(k, sheet, { name: "Intro", pad: [36, 40, 16, 40], gap: 10 });
+    k.text(intro, "Your sign-in code", { style: "Heading 26", color: "text", name: "Heading" });
+    k.text(intro, "Type it into the page you just left. It signs you in, and you can choose a new password from there.", { style: "Body 16", color: "onPaper", name: "Intro words" });
+    const code = section(k, sheet, { name: "Code", pad: [4, 40, 8, 40] });
+    const box = k.stack(code, { fill: "tint", padding: { top: 22, right: 28, bottom: 24, left: 28 }, gap: 6, name: "Code box" });
+    k.text(box, "CODE", { style: "Label 12", color: "onTint", name: "Code label" });
+    k.text(box, "{{brand.code}}", { style: "Code 56", color: "onTint", name: "Code figure" });
+    k.text(box, "Expires at 14:12 UTC, ten minutes after you asked.", { style: "Strong 16", color: "onTint", name: "Expiry" });
+    callToAction(k, sheet, { button: "Mail button", label: "Sign in with one click", pad: [24, 40, 28, 40], note: "The button carries the same code and expires at the same time.", noteStyle: "Small 15", noteInk: "onPaper" });
+    const asked = section(k, sheet, { name: "Who asked", pad: [4, 40, 8, 40] });
+    for (const [label, value] of ASKED) {
+      k.rect(asked, "FILL", 1, "tint", { name: "Asked rule" });
+      const row = mailRow(k, asked, { name: "Asked row", gap: 16, padding: { top: 12, right: 0, bottom: 12, left: 0 } });
+      const left = k.stack(row, { width: 72, name: "Asked cell" });
+      k.text(left, label.toUpperCase(), { style: "Label 12", color: "text", name: "Asked label" });
+      const right = k.stack(row, { width: "FILL", name: "Asked value cell" });
+      k.text(right, value, { style: "Small 15", color: "onPaper", name: "Asked value" });
+    }
+    k.rect(asked, "FILL", 1, "tint", { name: "Asked rule" });
+    const safe = section(k, sheet, { name: "Not you", pad: [20, 40, 28, 40], gap: 4 });
+    k.text(safe, "Didn\u2019t ask for this?", { style: "Strong 16", color: "text", name: "Not you heading" });
+    k.text(safe, "Ignore this email and nothing changes: the code is useless without the page that asked for it. Nobody at {{brand.company}} will ever ask you to read it out, by phone, chat or email.", { style: "Small 15", color: "onPaper", name: "Not you words" });
+    mailFooter(k, sheet, { style: "Fine 13", ink: "onPaper", rule: "tint", pad: [8, 40, 32, 40], why: "You are getting this because someone asked to sign in to {{brand.company}} with this address.", links: "Security emails are part of your account and cannot be switched off." });
+    k.cues(sheet, cues);
+    return finishMail(k, sheet);
+  }
+});
+
+export {
+  saas_mail_sign_in_code_default
+};

package/dist/chunks/chunk-EK5H5XFO.js

@@ -0,0 +1,68 @@
+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 {
+  getWorldRenderBounds,
+  init_scene_graph
+} from "./chunk-HOC36BAJ.js";
+import {
+  init_dist_node,
+  v4_default
+} from "./chunk-VBAS5IB5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// lib/editor/prototype-connect.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_dist_node();
+init_scene_graph();
+function canConnectFrom(node) {
+  return !!node && node.type !== "PAGE";
+}
+function isDestination(node) {
+  return !!node && (node.type === "FRAME" || node.type === "COMPONENT");
+}
+function destinationAt(doc, point, excludeSourceId) {
+  let found = null;
+  for (const id of Object.keys(doc.nodes)) {
+    const node = doc.nodes[id];
+    if (!isDestination(node)) continue;
+    if (id === excludeSourceId) continue;
+    const b = getWorldRenderBounds(doc, id);
+    if (!b) continue;
+    if (point.x < b.minX || point.x > b.maxX || point.y < b.minY || point.y > b.maxY) continue;
+    const parent = node.parentId ? doc.nodes[node.parentId] : void 0;
+    if (!parent || !isDestination(parent)) return id;
+    found = found ?? id;
+  }
+  return found;
+}
+function interactionFor(destinationId, id = v4_default(), o = {}) {
+  return {
+    id,
+    trigger: o.trigger ?? "ON_CLICK",
+    ...o.delay !== void 0 ? { triggerDelay: o.delay } : {},
+    action: {
+      navigationType: o.navigation ?? "NAVIGATE",
+      destinationId,
+      transition: o.transition ?? { type: "SMART_ANIMATE", duration: 300, easing: "EASE_IN_OUT" },
+      ...o.action
+    }
+  };
+}
+function alreadyLinked(doc, sourceId, destinationId) {
+  const node = doc.nodes[sourceId];
+  return !!node?.interactions?.some((ix) => ix.action.navigationType === "NAVIGATE" && ix.action.destinationId === destinationId);
+}
+
+export {
+  canConnectFrom,
+  isDestination,
+  destinationAt,
+  interactionFor,
+  alreadyLinked
+};

package/dist/chunks/chunk-EL23YNT3.js

@@ -0,0 +1,123 @@
+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 {
+  keyEverySize,
+  sourceLine
+} from "./chunk-VYN2LXUO.js";
+import {
+  titleSafe
+} from "./chunk-ZQ3NVLO2.js";
+import {
+  donutSlice
+} from "./chunk-HNO2LIAH.js";
+import {
+  logoBadge,
+  outro
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/data/donut.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SHARES = [
+  { name: "Meals", label: "Food on the table", pct: 64, color: "s1" },
+  { name: "Delivery", label: "Van runs to 38 pantries", pct: 17, color: "s2" },
+  { name: "Kitchen", label: "Community kitchen", pct: 11, color: "s3" },
+  { name: "Running", label: "Rent, fuel and admin", pct: 8, color: "s4" }
+];
+var D = 600;
+var SOURCE = "Harbor Food Bank annual accounts, 2025\u201326";
+var SLICE_AT = 500;
+var SLICE_GAP = 220;
+var counts = SHARES.map((s, i) => ({ layer: `${s.name} share`, at: SLICE_AT + 150 + i * SLICE_GAP, duration: 900, counter: { from: 0, to: s.pct, suffix: "%" } }));
+var cues = [
+  { layer: "Logo", preset: "pop-in", at: 0 },
+  { layer: "Title", preset: "words-in", at: 100, params: { duration: 600, amount: 70 } },
+  { layer: "Slice", preset: "pop-in", at: SLICE_AT, params: { duration: 650, amount: 0.4 }, stagger: { delay: SLICE_GAP } },
+  { layer: "Centre", preset: "fade-in", at: SLICE_AT + 300 },
+  { layer: "Row", preset: "slide-in", at: SLICE_AT + 150, params: { direction: "right", distance: 80 }, stagger: { delay: SLICE_GAP } },
+  { layer: "Source", preset: "fade-in", at: 2400 },
+  outro(["Logo", "Title", "Slice", "Centre", "Row", "Source"], 7400)
+];
+var donut_default = defineTemplate({
+  id: "motion-chart-donut",
+  meta: {
+    name: "Animated donut chart",
+    description: "Where a food bank\u2019s \xA310 goes: four slices burst out from the centre in turn while the legend slides in and each share counts to its percentage \u2014 8.5 seconds, 16:9 with a 4:5 cut",
+    category: "animation",
+    tags: ["animation", "data", "chart", "donut chart", "pie", "nonprofit", "counter"],
+    platforms: ["linkedin", "instagram", "facebook", "slides"],
+    formats: ["video", "portrait-post", "slide-deck"],
+    useCases: ["stats", "report"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Animated donut chart", preset("video-1080p"));
+    k.brand(
+      { paper: "#F3F7F4", text: "#10302A", onPaper: "#48625B", s1: "#1F7A5C", s2: "#F2B134", s3: "#E4572E", s4: "#6C8EAD", card: "#FFFFFF", onCard: "#10302A", badge: "#1F7A5C" },
+      { title: "Where your \xA310 goes" }
+    );
+    k.textStyle("Title 80", { size: 80, fontWeight: 900, letterSpacing: -2, lineHeight: 88 });
+    k.textStyle("Centre 96", { size: 96, fontWeight: 900, letterSpacing: -3, lineHeight: 100, textAlign: "CENTER" });
+    k.textStyle("Centre label 28", { size: 28, fontWeight: 600, lineHeight: 34, textAlign: "CENTER" });
+    k.textStyle("Share 56", { size: 56, fontWeight: 900, letterSpacing: -1, lineHeight: 64 });
+    k.textStyle("Row label 34", { size: 34, fontWeight: 600, lineHeight: 42 });
+    k.textStyle("Source 24", { size: 24, fontWeight: 500, lineHeight: 30 });
+    sourceLine(k, { dot: "s1", ink: "onPaper", style: "Source 24", text: SOURCE });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 48, titleSafe(), "paper", "SPACE_BETWEEN", "MIN");
+    k.timeline(sheet, { duration: 8500, fps: 30 });
+    const head = k.stack(sheet, { direction: "HORIZONTAL", gap: 28, align: "CENTER", name: "Header" });
+    logoBadge(k, head, { fill: "badge", size: 56, name: "Logo" });
+    k.text(head, "{{brand.title}}", { style: "Title 80", color: "text", name: "Title", width: "FILL" });
+    const body = k.stack(sheet, { direction: "HORIZONTAL", gap: 120, align: "CENTER", justify: "CENTER", name: "Body" });
+    const donut = k.stack(body, { width: D, height: D, justify: "CENTER", align: "CENTER", name: "Donut" });
+    const slices = k.stack(donut, { width: D, height: D, name: "Slices", absolute: { x: 0, y: 0 } });
+    let from = 0;
+    for (const s of SHARES) {
+      const to = from + s.pct / 100;
+      k.vector(slices, D, D, [donutSlice(D, from, to)], s.color, { name: "Slice", absolute: { x: 0, y: 0 } });
+      from = to;
+    }
+    const centre = k.stack(donut, { width: 340, height: 340, radius: 170, fill: "paper", gap: 4, align: "CENTER", justify: "CENTER", name: "Centre" });
+    k.text(centre, "\xA310", { style: "Centre 96", color: "text", name: "Gift" });
+    k.text(centre, "every gift", { style: "Centre label 28", color: "onPaper", name: "Gift label" });
+    const legend = k.stack(body, { width: 760, gap: 20, name: "Legend" });
+    for (const s of SHARES) {
+      const row = k.stack(legend, { direction: "HORIZONTAL", gap: 24, align: "CENTER", fill: "card", radius: 24, padding: { top: 18, right: 28, bottom: 18, left: 28 }, name: "Row" });
+      k.rect(row, 28, 28, s.color, { radius: 8, name: "Swatch" });
+      k.text(row, `${s.pct}%`, { style: "Share 56", color: "onCard", name: `${s.name} share`, width: 150 });
+      k.text(row, s.label, { style: "Row label 34", color: "onCard", name: `${s.name} label`, width: "FILL" });
+    }
+    k.instance(sheet, "Source line", { Source: SOURCE }, { name: "Source" });
+    keyEverySize(k, sheet, [{
+      preset: "ig-portrait",
+      adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 80, right: 72, bottom: 80, left: 72 }, primaryAxisAlignItems: "CENTER", itemSpacing: 40, counterAxisSpacing: 40 });
+        for (const b of kit.named(id, "Body")) kit.patch(b, { layoutMode: "VERTICAL", itemSpacing: 40, counterAxisSpacing: 40 });
+        for (const l of kit.named(id, "Legend")) kit.patch(l, { width: 936, itemSpacing: 12 });
+        for (const r of kit.named(id, "Row")) kit.patch(r, { padding: { top: 10, right: 24, bottom: 10, left: 24 } });
+        for (const d of kit.named(id, "Donut")) kit.patch(d, { scaleX: 1, scaleY: 1 });
+      }
+    }], cues, counts);
+    return k.finish();
+  }
+});
+
+export {
+  donut_default
+};