@popcraft/kit 0.25.0 → 0.26.1

package/dist/chunks/chunk-ZK6HTKYA.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-BTUNDBNF.js";
+import {
+  form,
+  repeats,
+  says,
+  userVariables,
+  visitorCollection
+} from "./chunk-3QTC5C65.js";
+import {
+  field,
+  formStyles,
+  select,
+  submit
+} from "./chunk-67AKXLTZ.js";
+import {
+  buttons
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.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-ZKGCYB6R.js

@@ -0,0 +1,301 @@
+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-BTUNDBNF.js";
+import {
+  form,
+  repeats,
+  says,
+  userVariables,
+  visitorCollection
+} from "./chunk-3QTC5C65.js";
+import {
+  field,
+  formStyles,
+  select,
+  submit
+} from "./chunk-67AKXLTZ.js";
+import {
+  buttons
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/kindling-app.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var WHEN = ["Morning", "Afternoon", "Evening", "Any time"];
+var HABITS = [
+  { name: "Read 20 pages", when: "Evening", why: "Back to being someone who finishes books." },
+  { name: "Walk before work", when: "Morning", why: "Daylight first, screens second." },
+  { name: "No phone at dinner", when: "Evening", why: "Actually talk to each other." },
+  { name: "Stretch for ten minutes", when: "Any time", why: "My back will thank me at forty." }
+];
+var CHECKS = [{ habit: "Walk before work" }, { habit: "Read 20 pages" }];
+var DAYS = 7;
+var kindling_app_default = defineTemplate({
+  id: "web-kindling-app",
+  meta: {
+    name: "Kindling \u2014 a habit tracker with accounts",
+    description: "A working habit tracker: visitors sign up, name the habits they are building and tap Done each day. Every card keeps its streak, its last seven days as a row of marks and its count this week, all worked out from the check-ins; today\u2019s list undoes a tap made by mistake. Each visitor keeps their own habits in the database. Landing, sign-up, sign-in, password reset, today and account pages that fold from desktop to phone",
+    category: "web",
+    tags: ["app", "accounts", "sign in", "database", "habits", "habit tracker", "streaks", "routine", "daily", "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("Kindling", preset("web-desktop"));
+    k.brand(
+      { paper: "#F2F4EC", text: "#16231C", onPaper: "#57635B", primary: "#1D6B4F", onPrimary: "#FFFFFF", card: "#FFFFFF", onCard: "#16231C", cardMuted: "#5E6B63", field: "#F7F9F3", onField: "#5E6B63", line: "#DCE3D4", danger: "#B3261E", onDanger: "#FFFFFF" },
+      { name: "Kindling" }
+    );
+    k.palette({ ember: "#E8590C", flame: "#FFB238", ash: "#E4E9DD", moss: "#9CC5A1", dusk: "#26402F", light: "#FFF6E0" });
+    k.textStyle("Brand 20", { size: 20, fontWeight: 800, 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, fontWeight: 800, letterSpacing: -2.4, lineHeight: 66 });
+    k.textStyle("Title 36", { size: 36, fontWeight: 800, letterSpacing: -1, lineHeight: 42 });
+    k.textStyle("Habit 22", { size: 22, fontWeight: 750, letterSpacing: -0.4, lineHeight: 28 });
+    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 40", { size: 40, fontWeight: 850, letterSpacing: -1.4, lineHeight: 42 });
+    formStyles(k, { thanks: false });
+    buttons(k, { style: "Button 16", radius: 14 });
+    const user = userVariables(k, { name: "Ana", email: "ana@example.com" });
+    const habits = visitorCollection(k, "Habits", [
+      { name: "Name", type: "TEXT" },
+      { name: "When", type: "OPTION", options: [...WHEN] },
+      { name: "Why", type: "TEXT" }
+    ], HABITS);
+    const checks = visitorCollection(k, "Checks", [{ name: "Habit", type: "TEXT" }], CHECKS);
+    const app = appPages(k, { brand: "Kindling", width: 1120, gap: 24 });
+    const mark = (parent) => {
+      const m = k.stack(parent, { width: 30, height: 30, radius: 9, fill: "primary", clip: true, name: "Mark" });
+      k.ellipse(m, 14, "flame", { name: "Flame", absolute: { x: 8, y: 6 } });
+      k.ellipse(m, 8, "ember", { name: "Core", absolute: { x: 11, y: 12 } });
+      k.rect(m, 20, 4, "light", { radius: 2, name: "Log", absolute: { x: 5, y: 22 } });
+      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 LIT = [1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1];
+    const ember = (parent) => {
+      const art = k.stack(parent, { width: 460, gap: 18, radius: 32, fill: "dusk", padding: 30, name: "Embers" });
+      const head = k.stack(art, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "MAX", name: "Embers head" });
+      const words = k.stack(head, { width: "HUG", gap: 2, name: "Embers words" });
+      k.text(words, "WALK BEFORE WORK", { style: "Code 12", color: "moss", autoWidth: true, name: "Embers habit" });
+      const streak2 = k.stack(words, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "MAX", name: "Embers streak" });
+      k.text(streak2, "8", { style: "Display 64", color: "light", autoWidth: true, name: "Embers number" });
+      k.text(streak2, "DAYS IN\nA ROW", { style: "Code 12", color: "flame", autoWidth: true, name: "Embers unit" });
+      k.ellipse(head, 70, "flame", { name: "Embers flame" });
+      const grid2 = k.stack(art, { direction: "HORIZONTAL", gap: 10, wrap: true, name: "Embers grid" });
+      LIT.forEach((lit, i) => k.ellipse(grid2, 42, lit ? i > 19 ? "ember" : "flame" : "dusk", { name: "Embers day", ...lit ? {} : { stroke: { color: "moss", width: 1.5 } } }));
+      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, "SMALL THINGS, EVERY DAY", "Code 12");
+    k.text(lead, "Keep the little fires going.", { style: "Display 64", color: "text", name: "Headline" });
+    k.text(lead, "Name the few habits you are building and tap Done when you have done one. Kindling keeps the streak, the week and the reasons you started.", { 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 habits" }, { name: "Create account" }), "Sign up");
+    app.link(k.instance(ctas, "Button quiet", { Label: "I have an account" }, { name: "Have account" }), "Sign in");
+    const heroArt = k.stack(hero, { align: "CENTER", name: "Art" });
+    pane(k, heroArt, 320);
+    ember(heroArt);
+    const closer = k.stack(welcome.column, { gap: 18, name: "Body" });
+    const points = panes(k, closer, { gap: 16, name: "Points" });
+    for (const [what, why] of [["One tap a day", "Done is a button. No timers, no journaling, no score to keep up."], ["Streaks that forgive", "Today is still open until midnight: a streak counts to yesterday until you tap."], ["The reason, kept", "Each habit carries the line you wrote when you started. It shows up on the hard days."]]) {
+      const tile = k.stack(points, { gap: 8, fill: "card", radius: 22, stroke: { color: "line", width: 1 }, padding: 24, name: "Point" });
+      pane(k, tile, 250);
+      k.text(tile, what, { style: "Card title 18", color: "onCard", name: "Point title" });
+      k.text(tile, why, { style: "Note 15", color: "cardMuted", name: "Point body" });
+    }
+    closing(k, app, closer, { title: "Pick one habit. Start today.", style: "Title 36", button: "Start your habits" });
+    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" });
+        ember(p);
+      },
+      copy: {
+        "Sign up": { title: "Start your habits", body: "A name, an email and a password. Your habits are yours alone.", button: "Create account", namePlaceholder: "Ana" },
+        "Sign in": { title: "Welcome back", body: "Your streaks are waiting.", button: "Sign in" }
+      }
+    });
+    const today = app.page("Today", "/today", "signedIn");
+    topBar(today.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, "flame", { name: "Face" });
+      says(k, k.text(who, "Ana", { style: "Link 15", color: "onCard", autoWidth: true, name: "Account name" }), "name");
+      app.link(who, "Account", "up");
+    });
+    const banner = k.stack(today.column, { gap: 20, fill: "text", radius: 30, padding: { top: 32, right: 34, bottom: 30, left: 34 }, clip: true, name: "Lead" });
+    k.ellipse(banner, 300, "ember", { name: "Banner glow", absolute: { x: 880, y: 40 }, opacity: 0.85 });
+    k.ellipse(banner, 180, "flame", { name: "Banner flame", absolute: { x: 900, y: -40 } });
+    const hello = k.stack(banner, { width: 640, gap: 6, name: "Greeting block" });
+    k.bindExpression(k.text(hello, "FRIDAY 2 OCTOBER", { style: "Code 12", color: "paper", name: "Eyebrow" }), "characters", "upper(today())");
+    const helloRow = k.stack(hello, { direction: "HORIZONTAL", gap: 10, wrap: true, name: "Greeting" });
+    k.text(helloRow, "Keep it going,", { style: "Title 36", color: "paper", autoWidth: true, name: "Greeting words" });
+    says(k, k.text(helloRow, "Ana", { style: "Title 36", color: "paper", autoWidth: true, name: "Greeting name" }), "name");
+    const bannerRow = k.stack(banner, { direction: "HORIZONTAL", gap: 18, wrap: true, align: "CENTER", name: "Banner row" });
+    const adder = opener(k, bannerRow, { word: "addingHabit", label: "New habit", style: "Button 16", fill: "paper", color: "text", dot: "primary", onDot: "onPrimary" });
+    const done = k.stack(bannerRow, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "Done today" });
+    k.bindExpression(k.text(done, "2", { style: "Stat 40", color: "paper", autoWidth: true, name: "Done number" }), "characters", 'countSince("Checks", 0)');
+    const of = k.stack(done, { direction: "HORIZONTAL", width: "HUG", gap: 4, align: "CENTER", name: "Done of" });
+    k.text(of, "of", { style: "Small 13", color: "paper", autoWidth: true, name: "Done of word" });
+    k.bindExpression(k.text(of, "4", { style: "Small 13", color: "paper", autoWidth: true, name: "Done total" }), "characters", habits.word);
+    k.text(of, "done today", { style: "Small 13", color: "paper", autoWidth: true, name: "Done words" });
+    const sheet = k.stack(today.column, { gap: 18, fill: "card", radius: 26, stroke: { color: "line", width: 1 }, padding: 26, name: "Art" });
+    k.text(sheet, "A NEW HABIT", { style: "Code 12", color: "cardMuted", name: "Sheet label" });
+    const add = k.stack(sheet, { gap: 18, name: "Habit form" });
+    field(k, add, { card: true, label: "The habit", name: "name", placeholder: "Read 20 pages", required: true });
+    choice(k, add, { card: true, label: "When", name: "when", word: "habitWhen", options: WHEN, style: "Chip 14" });
+    field(k, add, { card: true, label: "Why you are starting", name: "why", placeholder: "The reason that will matter on a hard day" });
+    errorLine(k, add, "Error 14");
+    submit(k, add, "Start it");
+    form(k, add, { collectionId: habits.id, onSubmit: adder.close });
+    adder.opens(sheet);
+    const stats = panes(k, today.column, { gap: 12, name: "Stats" });
+    for (const [label, expression, sample] of [["Habits", habits.word, "4"], ["Check-ins this week", 'countSince("Checks", 6)', "17"], ["Check-ins all time", checks.word, "86"]]) stat(k, stats, { label, expression, sample, figure: "Stat 40", caption: "Meta 14", min: 200 });
+    const body = k.stack(today.column, { gap: 26, name: "Body" });
+    const empty = k.stack(body, { gap: 6, align: "CENTER", padding: 30, radius: 22, stroke: { color: "line", width: 1 }, name: "Empty habits" });
+    k.text(empty, "No habits yet", { style: "Habit 22", color: "text", align: "CENTER", name: "Empty title" });
+    k.text(empty, "Start with one small enough to do on your worst day.", { style: "Note 15", color: "onPaper", align: "CENTER", name: "Empty body" });
+    k.bindExpression(empty, "visible", `${habits.word} == 0`);
+    k.patch(empty, { visible: false });
+    const grid = panes(k, body, { gap: 16, name: "Habits grid" });
+    repeats(k, grid, habits.id, { limit: 60 });
+    const card = k.stack(grid, { gap: 16, fill: "card", radius: 24, stroke: { color: "line", width: 1 }, padding: 22, name: "Habit" });
+    pane(k, card, 300);
+    k.patch(card, { maxWidth: 560 });
+    const view = k.stack(card, { gap: 16, name: "Habit view" });
+    const top = k.stack(view, { direction: "HORIZONTAL", gap: 16, align: "MIN", justify: "SPACE_BETWEEN", name: "Habit top" });
+    const names = k.stack(top, { gap: 4, name: "Habit names" });
+    k.text(names, "{{item.when}}", { style: "Code 12", color: "cardMuted", name: "Habit when" });
+    k.text(names, "{{item.name}}", { style: "Habit 22", color: "onCard", name: "Habit name" });
+    k.text(names, "{{item.why}}", { style: "Note 15", color: "cardMuted", name: "Habit why" });
+    const streak = k.stack(top, { width: "HUG", gap: 2, align: "CENTER", name: "Streak" });
+    for (const [name, ground, holds] of [["Lit", "flame", "> 0"], ["Out", "ash", "== 0"]]) {
+      const flame = k.stack(streak, { width: 54, height: 54, radius: 27, fill: ground, align: "CENTER", justify: "CENTER", name: `${name} flame` });
+      k.bindExpression(k.text(flame, "3", { style: "Card title 18", color: "dusk", autoWidth: true, name: "Streak number" }), "characters", 'streak("Checks", "habit", item_name)');
+      k.bindExpression(flame, "visible", `streak("Checks", "habit", item_name) ${holds}`);
+      if (name === "Out") k.patch(flame, { visible: false });
+    }
+    k.text(streak, "IN A ROW", { style: "Code 12", color: "cardMuted", autoWidth: true, name: "Streak words" });
+    const week = k.stack(view, { gap: 8, name: "Week" });
+    const marks = k.stack(week, { direction: "HORIZONTAL", gap: 6, name: "Week marks" });
+    for (let d = DAYS - 1; d >= 0; d--) {
+      const day = k.stack(marks, { width: 30, height: 30, radius: 8, name: d === 0 ? "Today mark" : "Day mark" });
+      const on = k.rect(day, 30, 30, d === 0 ? "ember" : "primary", { radius: 8, name: "Done mark", absolute: { x: 0, y: 0 } });
+      k.bindExpression(on, "visible", `countOn("Checks", ${d}, "habit", item_name) > 0`);
+      const off = k.rect(day, 30, 30, "ash", { radius: 8, name: "Missed mark", absolute: { x: 0, y: 0 } });
+      k.bindExpression(off, "visible", `countOn("Checks", ${d}, "habit", item_name) == 0`);
+      k.patch(d === 0 || d > 3 ? off : on, { visible: false });
+    }
+    const weekLine = k.stack(week, { direction: "HORIZONTAL", gap: 4, name: "Week line" });
+    k.bindExpression(k.text(weekLine, "5", { style: "Small 13", color: "onCard", autoWidth: true, name: "Week count" }), "characters", 'countSince("Checks", 6, "habit", item_name)');
+    k.text(weekLine, "of the last 7 days", { style: "Small 13", color: "cardMuted", autoWidth: true, name: "Week words" });
+    const actions = k.stack(view, { direction: "HORIZONTAL", gap: 8, wrap: true, align: "CENTER", name: "Habit actions" });
+    const doneForm = k.stack(actions, { direction: "HORIZONTAL", width: "HUG", name: "Done form" });
+    const doneButton = k.stack(doneForm, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", radius: 999, fill: "primary", padding: { top: 10, right: 18, bottom: 10, left: 14 }, name: "Done button" });
+    k.ellipse(doneButton, 14, "flame", { name: "Done dot" });
+    k.text(doneButton, "Done today", { style: "Button 16", color: "onPrimary", autoWidth: true, name: "Done label" });
+    k.patch(doneButton, { control: { kind: "BUTTON", buttonType: "submit", name: "habit", value: "{{item.name}}" } });
+    form(k, doneForm, { collectionId: checks.id });
+    k.bindExpression(doneForm, "visible", 'countSince("Checks", 0, "habit", item_name) == 0');
+    const doneBadge = k.stack(actions, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", radius: 999, stroke: { color: "primary", width: 1.5 }, padding: { top: 9, right: 16, bottom: 9, left: 12 }, name: "Done badge" });
+    k.ellipse(doneBadge, 14, "ember", { name: "Badge dot" });
+    k.text(doneBadge, "Done for today", { style: "Button 16", color: "onCard", autoWidth: true, name: "Badge label" });
+    k.bindExpression(doneBadge, "visible", 'countSince("Checks", 0, "habit", item_name) > 0');
+    k.patch(doneBadge, { visible: false });
+    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: "editingHabit", view, parent: card, trigger: edit, style: "Small 13", build: (f) => {
+      const pre = (id, name) => k.patch(id, { control: { ...k.node(id).control, value: `{{item.${name}}}` } });
+      pre(select(k, f, { card: true, label: "When", name: "when", options: WHEN }), "when");
+      pre(field(k, f, { card: true, label: "Why you started", name: "why", placeholder: "The reason that matters" }), "why");
+    } });
+    const log = k.stack(body, { gap: 12, name: "Today log" });
+    const logHead = k.stack(log, { direction: "HORIZONTAL", gap: 10, align: "MAX", name: "Log head" });
+    k.text(logHead, "Done today", { style: "Card title 18", color: "text", autoWidth: true, name: "Log title" });
+    k.text(logHead, "Tapped one by mistake? Undo it here.", { style: "Meta 14", color: "onPaper", autoWidth: true, name: "Log blurb" });
+    const list = k.stack(log, { direction: "HORIZONTAL", gap: 10, wrap: true, name: "Today list" });
+    repeats(k, list, checks.id, { limit: 60 });
+    k.patch(list, { repeat: { collectionId: checks.id, limit: 60, filter: "item_age == 0" } });
+    const chip = k.stack(list, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", radius: 999, fill: "card", stroke: { color: "line", width: 1 }, padding: { top: 6, right: 6, bottom: 6, left: 14 }, name: "Check" });
+    k.ellipse(chip, 10, "ember", { name: "Check dot" });
+    k.text(chip, "{{item.habit}}", { style: "Small 13", color: "onCard", autoWidth: true, name: "Check habit" });
+    recordButton(k, chip, "Undo", { style: "Small 13", color: "onCard", line: "line" });
+    const out2 = accountPage(k, app, {
+      user,
+      home: "Today",
+      back: "Back to today",
+      sample: { name: "Ana", email: "ana@example.com" },
+      styles: { eyebrow: "Code 12", title: "Title 36", label: "Meta 14", value: "Card title 18", stat: "Stat 40", link: "Link 15", meta: "Meta 14", error: "Error 14", button: "Button 16" },
+      count: { label: "Check-ins kept", word: checks.word, sample: "86" },
+      top: (column, right) => {
+        topBar(column, right);
+      },
+      art: (p) => {
+        ember(p);
+      }
+    });
+    app.finish("Welcome");
+    accounts.leads("Today");
+    out2.leads();
+    return k.finish();
+  }
+});
+
+export {
+  kindling_app_default
+};