@popcraft/kit 0.53.4 → 0.53.5

package/dist/chunks/chunk-N66KJT2M.js

@@ -0,0 +1,157 @@
+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 {
+  HERO_BEATS
+} from "./chunk-5MORZN5M.js";
+import {
+  CLIP
+} from "./chunk-3ZIPMDW4.js";
+import {
+  EXPO,
+  HOLD,
+  OUT,
+  SCENE_BUILDERS,
+  cursor,
+  popIn,
+  shadow,
+  travel
+} from "./chunk-M665OREL.js";
+import {
+  DURATION,
+  buildTemplateWall
+} from "./chunk-TOLP5EU7.js";
+import {
+  COLLABORATORS,
+  COLORS,
+  SCENES,
+  hexColor
+} from "./chunk-EBYVBYT2.js";
+import {
+  trailerType
+} from "./chunk-IU6CBWJJ.js";
+import {
+  key
+} from "./chunk-LAPZ2X3J.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease,
+  sceneSequence
+} from "./chunk-PLZLKHOI.js";
+import {
+  sequenceClips
+} from "./chunk-HUYCKP2F.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/landing-hero/index.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SCENE_D_MS = SCENES.find((sc) => sc.key === "sD").ms;
+var FPS = 30;
+var CARD = { x: 120, y: 60, width: 1640, height: 920 };
+var onCard = (x, y) => ({ x: Math.round(CARD.x + x * CARD.width / 1240), y: Math.round(CARD.y + y * CARD.height / 775) });
+var BEATS = HERO_BEATS;
+function footageBeat(k, s, b) {
+  const back = k.rect(s, CARD.width, CARD.height, "popInk", { name: "Hard shadow", radius: 30, absolute: { x: CARD.x + 34, y: CARD.y + 34 } });
+  const win = k.stack(s, { name: "Window", width: CARD.width, height: CARD.height, fill: "popInk", radius: 30, clip: true, stroke: { color: "popInk", width: 10 }, absolute: { x: CARD.x, y: CARD.y }, effects: [shadow("#000000", 0.25, 30, 80)] });
+  const z = b.zoom ?? 1, [fx, fy] = b.focus ?? [0.5, 0.5];
+  const vw = CARD.width * z, vh = CARD.height * z;
+  const at = { x: Math.round(Math.min(0, Math.max(CARD.width - vw, CARD.width / 2 - fx * vw))), y: Math.round(Math.min(0, Math.max(CARD.height - vh, CARD.height / 2 - fy * vh))) };
+  k.video(win, CLIP[b.clip], Math.round(vw), Math.round(vh), { name: "Footage", speed: b.speed, absolute: at });
+  for (const id of [win, back]) {
+    key(k, id, "translateX", [[0, 420, EXPO], [550, 0]]);
+    key(k, id, "rotation", [[0, 6, EXPO], [550, -1]]);
+    key(k, id, "opacity", [[0, 0, OUT], [200, 1]]);
+  }
+  const word = k.text(s, b.word, { style: "Beat 150", color: b.ink, autoWidth: true, name: "Word", absolute: { x: 60, y: 24 } });
+  popIn(k, word, 60, { from: 0.5, turn: -4 });
+}
+function teammates(k, s, ms) {
+  const at = (t) => Math.round(t * Math.min(1, ms / 3600));
+  const [maya, leo] = COLLABORATORS;
+  const a = cursor(k, s, maya, onCard(240, 520));
+  travel(k, a, [[at(300), onCard(240, 520).x, onCard(240, 520).y], [at(1300), onCard(620, 330).x, onCard(620, 330).y], [at(2400), onCard(520, 600).x, onCard(520, 600).y], [at(3500), onCard(760, 470).x, onCard(760, 470).y]]);
+  popIn(k, a, at(300), { from: 0.2 });
+  const b = cursor(k, s, leo, onCard(1e3, 640));
+  travel(k, b, [[at(700), onCard(1e3, 640).x, onCard(1e3, 640).y], [at(1800), onCard(880, 360).x, onCard(880, 360).y], [at(2900), onCard(1060, 300).x, onCard(1060, 300).y]]);
+  popIn(k, b, at(700), { from: 0.2 });
+}
+var CLI_LINES = [
+  ["popcraft new launch.popcraft --name Launch", "\u2713 launch.popcraft"],
+  ["popcraft run launch.popcraft write_design --size ig-post --script @post.js", "\u2713 14 layers on Page 1"],
+  ["popcraft run launch.popcraft export.nodes --format PNG --out post.png", "\u2713 post.png  1080 \xD7 1080"]
+];
+function cliBeat(k, s, ms) {
+  const win = k.stack(s, { name: "Terminal", width: 1500, height: 640, fill: "popInk", radius: 28, clip: true, stroke: { color: "popInk", width: 10 }, absolute: { x: 210, y: 220 }, effects: [shadow("#000000", 0.3, 30, 80)] });
+  const bar = k.stack(win, { name: "Title bar", direction: "HORIZONTAL", height: 56, fill: "chromeBar", gap: 12, padding: { top: 0, right: 0, bottom: 0, left: 24 }, align: "CENTER" });
+  for (const c of ["lightRed", "lightAmber", "lightGreen"]) k.ellipse(bar, 18, c, { name: "Light" });
+  k.text(bar, "zsh \u2014 popcraft", { style: "Mono 26", color: "chromeTitle", autoWidth: true, name: "Title" });
+  key(k, win, "translateY", [[0, 80, EXPO], [450, 0]]);
+  key(k, win, "opacity", [[0, 0, OUT], [200, 1]]);
+  const per = (ms - 500) / CLI_LINES.length;
+  CLI_LINES.forEach(([cmd, out], i) => {
+    const t0 = 300 + i * per, typed = per * 0.6;
+    const line = k.text(win, `$ ${cmd}`, { style: "Mono 30", color: "white", width: 1440, name: `Command ${i + 1}`, absolute: { x: 36, y: 96 + i * 170 } });
+    const steps = 14;
+    k.animate(line, "text.content", [{ t: 0, v: "$ ", ease: ease.hold }, ...Array.from({ length: steps }, (_, n) => ({ t: Math.round(t0 + typed * (n + 1) / steps), v: `$ ${cmd.slice(0, Math.ceil(cmd.length * (n + 1) / steps))}`, ease: ease.hold }))]);
+    const answer = k.text(win, out, { style: "Mono 30", color: "mint", autoWidth: true, name: `Answer ${i + 1}`, absolute: { x: 36, y: 96 + i * 170 + 52 } });
+    key(k, answer, "opacity", [[0, 0, HOLD], [Math.round(t0 + typed + 60), 1]]);
+  });
+}
+var landing_hero_default = defineTemplate({
+  id: "motion-landing-hero",
+  meta: {
+    name: "PopCraft landing hero",
+    description: "The 37-second loop in the hero of popcraft.app at 1920\xD71080, one run of work in the real editor: an animated app designed, animated, talked over and shipped; a sprite drawn, animated and made the hero of a pixel-art game; templates remixed \u2014 a title, a Lottie, a GIF card; the agent, image, music and video generation and the CLI; then so much more \u2014 eighteen sheets in one composition",
+    category: "animation",
+    tags: ["animation", "hero", "landing", "loop", "product", "game", "pixel art", "scenes", "composition", "popcraft"],
+    platforms: ["web", "x", "linkedin"],
+    formats: ["video", "ad"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-06",
+    updated: "2026-10-06"
+  },
+  sequence: true,
+  build() {
+    const k = new Kit("Landing hero", preset("video-1080p"));
+    k.brand({ ...COLORS });
+    k.textStyle("Beat 150", { size: 130, fontWeight: 900, letterSpacing: -0.045 * 130, lineHeight: 0.92 * 130 });
+    trailerType(k, ["Card 46", "Card note 26", "Head 170", "Label 26", "Tag 20"]);
+    k.textStyle("Mono 30", { fontFamily: "JetBrains Mono", size: 30, fontWeight: 600, lineHeight: 40 });
+    k.textStyle("Mono 26", { fontFamily: "JetBrains Mono", size: 26, fontWeight: 600, lineHeight: 30 });
+    const sheets = [];
+    for (const [i, b] of BEATS.entries()) {
+      const id = i === 0 ? k.sheet : k.addSheet(void 0, b.name);
+      k.nameSheet(id, b.name);
+      const wall = b.scene === "wall";
+      k.flowSheet(id, 0, 0, b.ground, wall ? "CENTER" : "MIN", wall ? "CENTER" : "MIN");
+      k.timeline(id, { duration: b.scene === "wall" ? DURATION : b.scene === "more" ? SCENE_D_MS : b.ms, fps: FPS });
+      if (wall) buildTemplateWall(k, id, { pill: "popInk", onPill: "pop", caption: "caption", card: "white", headline: "Tons of templates" });
+      else if (b.scene === "cli") cliBeat(k, id, b.ms);
+      else if (b.scene === "more") SCENE_BUILDERS.sD(k, id);
+      else footageBeat(k, id, b);
+      if (b.team) teammates(k, id, b.ms);
+      sheets.push(id);
+    }
+    k.setCover(sheets[0]);
+    const doc = k.finish();
+    const full = sceneSequence(doc.nodes, { id: "comp-landing-hero", name: "Landing hero", frames: sheets, fps: FPS, background: hexColor(COLORS.popInk) });
+    const comp = { ...full, clips: sequenceClips(full.clips.map((c, i) => ({ ...c, out: c.in + BEATS[i].ms }))) };
+    const markers = comp.clips.map((c, i) => ({ id: `beat-${i + 1}`, t: c.start, label: BEATS[i].name }));
+    return { ...doc, compositions: { [comp.id]: { ...comp, markers } } };
+  }
+});
+
+export {
+  landing_hero_default
+};

package/dist/chunks/chunk-N6ROVGBO.js

@@ -0,0 +1,73 @@
+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 {
+  FOLIO,
+  caption,
+  comicMeta,
+  comicSetup,
+  folio,
+  pageGrid,
+  panel,
+  rows,
+  say,
+  sfx,
+  slantTier,
+  tier,
+  tierBox
+} from "./chunk-AGL7MNPF.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/print/comic-hero-chase.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var comic_hero_chase_default = defineTemplate({
+  id: "comic-chase",
+  meta: comicMeta("Chase page", 'Page two of "Nightstar: Blackout": Voltrix tears open a substation, Nightstar watches from a gargoyle, and the chase runs across the rooftops on slanted gutters to a lightning bolt and an exploding water tower', ["chase", "slanted", "rooftops", "sound effects"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Chase page", preset("comic-page"));
+    comicSetup(k);
+    drawPage(k);
+    return k.finish();
+  }
+});
+function drawPage(k) {
+  const g = 12, { W, H } = pageGrid(k, k.sheet, 36, g);
+  const [h1, h2, h3] = rows(H - FOLIO, g, [30, 34, 36]);
+  const t1 = tierBox(k, k.sheet, W, h1, "Tier 1");
+  const [a] = tier(W, h1, [1], g);
+  panel(k, t1, a, "chase-1", { ground: "heroG1", name: "The substation" });
+  caption(k, t1, "Midnight. The Eastside substation.", { x: 10, y: 10, width: 200 });
+  say(k, t1, "The whole grid. All of it. Mine.", { x: W - 180, y: 12, width: 160, to: { x: W * 0.5, y: h1 * 0.36 } });
+  const t2 = tierBox(k, k.sheet, W, h2, "Tier 2");
+  const [b, c] = slantTier(W, h2, [2, 3], 22, g);
+  panel(k, t2, b, "chase-2", { ground: "heroG2", name: "On the ledge" });
+  panel(k, t2, c, "chase-3", { ground: "heroG3", name: "Through the wall" });
+  say(k, t2, "Not tonight, Voltrix.", { x: 12, y: 12, width: 110, to: { x: b.width * 0.45, y: h2 * 0.3 }, thought: true });
+  sfx(k, t2, "Krakk!", { x: W - 210, y: h2 - 110, w: 190, h: 96, deg: -8, seed: 4 });
+  const t3 = tierBox(k, k.sheet, W, h3, "Tier 3");
+  const [d, e, f] = slantTier(W, h3, [3, 2, 3], -20, g);
+  panel(k, t3, d, "chase-4", { ground: "heroG1", name: "The leap" });
+  panel(k, t3, e, "chase-5", { ground: "heroG2", name: "Voltrix looks back" });
+  panel(k, t3, f, "chase-6", { ground: "heroG3", name: "The bolt" });
+  say(k, t3, "Keep up, hero!", { x: e.x + 4, y: 12, width: 96, to: { x: e.x + e.width * 0.5, y: h3 * 0.4 } });
+  sfx(k, t3, "Zzrakk!", { x: f.x + 10, y: h3 - 100, w: 200, h: 90, deg: 6, fill: "primary", seed: 11 });
+  folio(k, k.sheet, "Nightstar: Blackout \u2014 page 2");
+}
+
+export {
+  comic_hero_chase_default,
+  drawPage
+};

package/dist/chunks/chunk-N76TBBCV.js

@@ -0,0 +1,331 @@
+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 {
+  form,
+  route,
+  says
+} from "./chunk-4FRZC66Z.js";
+import {
+  field,
+  submit
+} from "./chunk-KKSAY7EB.js";
+import {
+  Kit
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/app-ui.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var APP_CUES = [
+  { layer: "Top bar", preset: "fade-in", at: 0, params: { duration: 420 } },
+  { layer: "Lead", preset: "rise-in", at: 90, params: { duration: 560 } },
+  { layer: "Art", preset: "blur-in", at: 180, params: { duration: 700, amount: 14 } },
+  { layer: "Body", preset: "rise-in", at: 260, params: { duration: 640 } }
+];
+var MOVES = { forward: "PUSH_FROM_RIGHT", back: "PUSH_FROM_LEFT", up: "SLIDE_FROM_BOTTOM", down: "MOVE_OUT_TO_BOTTOM", fade: "DISSOLVE" };
+function appPages(k, o) {
+  const screens = {};
+  const links = [];
+  const cues = o.cues ?? APP_CUES;
+  let first = true;
+  return {
+    screens,
+    page(name, path, access, p = {}) {
+      const id = first ? k.sheet : k.addScreen(name);
+      first = false;
+      k.nameSheet(id, name);
+      k.flowSheet(id, 0, o.pad ?? { top: 28, right: 24, bottom: 72, left: 24 }, p.paper ?? o.paper ?? "paper", "MIN", "CENTER");
+      k.patch(id, { layoutSizingVertical: "HUG", minHeight: 900, clipsContent: true });
+      route(k, id, path, { access, title: `${name} \xB7 ${o.brand}` });
+      k.timeline(id, { duration: 4e3, fps: 30 });
+      screens[name] = id;
+      return { screen: id, column: k.stack(id, { width: p.width ?? o.width, gap: p.gap ?? o.gap ?? 32, name: "Column" }) };
+    },
+    link(from, to, move = "forward") {
+      links.push([from, to, move]);
+    },
+    finish(start) {
+      for (const [from, to, move] of links) k.link(from, screens[to], MOVES[move], { duration: move === "fade" ? 260 : 400 });
+      for (const id of Object.values(screens)) k.cues(id, cues);
+      k.flowStart(screens[start], o.brand);
+    }
+  };
+}
+function panes(k, parent, o = {}) {
+  return k.stack(parent, { direction: "HORIZONTAL", gap: o.gap ?? 24, wrap: true, align: o.align ?? "MIN", name: o.name ?? "Panes" });
+}
+function pane(k, id, min) {
+  k.patch(id, { layoutSizingHorizontal: "FILL", minWidth: min });
+}
+function choice(k, parent, o) {
+  const chosen = k.variable("Form", o.word, "STRING", o.options[0]);
+  const wrap = o.label ? k.stack(parent, { gap: 8, name: `${o.label} field` }) : parent;
+  if (o.label) k.text(wrap, o.label, { style: o.labelStyle ?? "Label 14", color: o.card ? "onCard" : "text", name: "Label" });
+  const row = k.stack(wrap, { direction: "HORIZONTAL", gap: 8, wrap: true, name: `${o.label ?? o.name} choices` });
+  const [v, h] = o.pad ?? [9, 15];
+  const box = { direction: "HORIZONTAL", width: "HUG", radius: o.radius ?? 999, padding: { top: v, right: h, bottom: v, left: h } };
+  const [onFill, onText] = o.on ?? ["primary", "onPrimary"];
+  const [offFill, offText, offLine] = o.off ?? ["field", "onField", "line"];
+  o.options.forEach((option, i) => {
+    const chip = k.stack(row, { direction: "HORIZONTAL", width: "HUG", name: `${option} choice` });
+    const off = k.stack(chip, { ...box, fill: offFill, stroke: { color: offLine, width: 1 }, name: "Not chosen" });
+    k.text(off, option, { style: o.style, color: offText, autoWidth: true, name: "Choice label" });
+    const on = k.stack(chip, { ...box, fill: onFill, stroke: { color: onFill, width: 1 }, name: "Chosen" });
+    k.text(on, option, { style: o.style, color: onText, autoWidth: true, name: "Chosen label" });
+    k.bindExpression(off, "visible", `${o.word} != "${option}"`);
+    k.bindExpression(on, "visible", `${o.word} == "${option}"`);
+    k.patch(i === 0 ? off : on, { visible: false });
+    k.patch(chip, { control: { kind: "RADIO", name: o.name, value: option, variableId: chosen, ...i === 0 ? { checked: true } : {} } });
+  });
+  return chosen;
+}
+function recordButton(k, parent, label, o) {
+  const name = o.name ?? label;
+  const f = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", name: `${name} form` });
+  const [v, h] = o.pad ?? [6, 12];
+  const b = k.stack(f, { direction: "HORIZONTAL", width: "HUG", radius: o.radius ?? 999, padding: { top: v, right: h, bottom: v, left: h }, ...o.fill ? { fill: o.fill } : {}, ...o.line ? { stroke: { color: o.line, width: 1 } } : {}, name: `${name} button` });
+  k.text(b, label, { style: o.style, color: o.color, autoWidth: true, name: `${name} label` });
+  k.patch(b, { control: { kind: "BUTTON", buttonType: "submit", ...o.set ? { name: o.set[0], value: o.set[1] } : {} } });
+  form(k, f, { formAction: o.set ? "updateRecord" : "deleteRecord" });
+  return f;
+}
+function closing(k, app, parent, o) {
+  const band = panes(k, parent, { gap: 20, align: "CENTER", name: "Closing" });
+  k.patch(band, { fills: k.paint("text"), cornerRadius: o.radius ?? 28, padding: { top: 30, right: 32, bottom: 30, left: 32 } });
+  const words = k.text(band, o.title, { style: o.style, color: "paper", name: "Closing line" });
+  pane(k, words, 260);
+  app.link(k.instance(band, "Button", { Label: o.button }, { name: "Closing button" }), "Sign up");
+  return band;
+}
+function eyebrow(k, parent, words, style) {
+  const pill = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", radius: 999, fill: "primary", padding: { top: 5, right: 12, bottom: 5, left: 12 }, name: "Eyebrow" });
+  k.text(pill, words, { style, color: "onPrimary", autoWidth: true, name: "Eyebrow label" });
+  return pill;
+}
+function errorLine(k, parent, style) {
+  const id = k.text(parent, "That email and password do not match.", { style, color: "danger", name: "Error" });
+  says(k, id, "error");
+  k.bindExpression(id, "visible", 'signInError != ""');
+  return id;
+}
+function accountPages(k, app, o) {
+  const made = {};
+  const resetDone = k.variable("Form", "passwordWasReset", "BOOLEAN", false);
+  const linkSent = k.variable("Form", "resetLinkSent", "BOOLEAN", false);
+  const pageOf = (name, path, art, title, body) => {
+    const { column } = app.page(name, path, "signedOut");
+    o.top(column, (id) => app.link(id, "Welcome", "back"));
+    const row = panes(k, column, { gap: 32, align: "CENTER", name: "Account panes" });
+    const pic = k.stack(row, { name: "Art" });
+    pane(k, pic, 320);
+    o.art(pic, art);
+    const side = k.stack(row, { gap: 24, name: "Account side" });
+    pane(k, side, 320);
+    const lead = k.stack(side, { gap: 8, name: "Lead" });
+    k.text(lead, title, { style: o.styles.title, color: "text", name: "Title" });
+    k.text(lead, body, { style: o.styles.body, color: "onPaper", name: "Subtitle" });
+    const holder = k.stack(side, { gap: 18, name: "Body" });
+    const card = k.stack(holder, { gap: 16, fill: "card", radius: o.cardRadius ?? 22, stroke: { color: "line", width: 1 }, padding: 26, name: `${name} card` });
+    return { holder, card };
+  };
+  for (const which of ["Sign up", "Sign in"]) {
+    const { holder, card } = pageOf(which, which === "Sign up" ? "/sign-up" : "/sign-in", which, o.copy[which].title, o.copy[which].body);
+    const f = k.stack(card, { gap: 16, name: `${which} form` });
+    if (which === "Sign in") {
+      const done = k.text(f, "Your password is changed. Sign in with the new one.", { style: o.styles.meta, color: "onCard", name: "Reset done" });
+      k.bindVariable(done, "visible", resetDone);
+      k.patch(done, { visible: false });
+    }
+    if (which === "Sign up") field(k, f, { card: true, label: "Your first name", name: "name", placeholder: o.copy[which].namePlaceholder ?? "Maya", required: true });
+    field(k, f, { card: true, label: "Email", name: "email", placeholder: "you@example.com", type: "email", required: true });
+    field(k, f, { card: true, label: "Password", name: "password", placeholder: which === "Sign up" ? "At least 8 characters" : "Your password", type: "password", required: true });
+    errorLine(k, f, o.styles.error);
+    const go = k.stack(f, { direction: "HORIZONTAL", gap: 16, align: "CENTER", wrap: true, name: "Send row" });
+    submit(k, go, o.copy[which].button);
+    if (which === "Sign in") app.link(k.text(go, "Forgot your password?", { style: o.styles.link, color: "onCard", autoWidth: true, name: "Forgot link" }), "Forgot password", "fade");
+    const other = k.stack(holder, { direction: "HORIZONTAL", gap: 6, justify: "CENTER", name: "Other way" });
+    k.text(other, which === "Sign up" ? "Already have an account?" : "New here?", { style: o.styles.meta, color: "onPaper", autoWidth: true, name: "Other question" });
+    app.link(k.text(other, which === "Sign up" ? "Sign in" : "Create an account", { style: o.styles.link, color: "text", autoWidth: true, name: "Other link" }), which === "Sign up" ? "Sign in" : "Sign up", "fade");
+    made[which] = f;
+  }
+  {
+    const { holder, card } = pageOf("Forgot password", "/forgot-password", "Sign in", "Forgot your password?", "Say the email you signed up with and we will send a link to choose a new one.");
+    const f = k.stack(card, { gap: 16, name: "Forgot form" });
+    field(k, f, { card: true, label: "Email", name: "email", placeholder: "you@example.com", type: "email", required: true });
+    errorLine(k, f, o.styles.error);
+    submit(k, f, "Email me a link");
+    form(k, f, { formAction: "forgotPassword", onSubmit: Kit.set(linkSent, { value: true }) });
+    k.bindExpression(f, "visible", "resetLinkSent == false");
+    const sent = k.stack(card, { gap: 6, name: "Link sent" });
+    k.text(sent, "Check your email", { style: o.styles.title, color: "onCard", name: "Sent title" });
+    k.text(sent, "If there is an account for that address, a link is on its way. It opens a page here where you choose a new password.", { style: o.styles.meta, color: "cardMuted", name: "Sent body" });
+    k.bindVariable(sent, "visible", linkSent);
+    k.patch(sent, { visible: false });
+    const back = k.stack(holder, { direction: "HORIZONTAL", gap: 6, justify: "CENTER", name: "Other way" });
+    app.link(k.text(back, "Back to sign in", { style: o.styles.link, color: "text", autoWidth: true, name: "Other link" }), "Sign in", "fade");
+  }
+  const reset = (() => {
+    const { holder, card } = pageOf("Reset password", "/reset-password", "Sign in", "Choose a new password", "At least 8 characters. You will sign in with it next.");
+    const f = k.stack(card, { gap: 16, name: "Reset form" });
+    field(k, f, { card: true, label: "New password", name: "new_password", placeholder: "At least 8 characters", type: "password", required: true });
+    errorLine(k, f, o.styles.error);
+    submit(k, f, "Set new password");
+    const back = k.stack(holder, { direction: "HORIZONTAL", gap: 6, justify: "CENTER", name: "Other way" });
+    app.link(k.text(back, "Back to sign in", { style: o.styles.link, color: "text", autoWidth: true, name: "Other link" }), "Sign in", "fade");
+    return f;
+  })();
+  return {
+    /** Signing up or in goes to the page named `home`; a new password, to signing in. */
+    leads(home) {
+      for (const which of ["Sign up", "Sign in"]) form(k, made[which], { formAction: which === "Sign up" ? "signUp" : "signIn", onSubmit: Kit.go(app.screens[home], "PUSH_FROM_RIGHT", { duration: 420 }) });
+      form(k, reset, { formAction: "resetPassword", onSubmit: Kit.when([{ then: [Kit.set(resetDone, { value: true }), Kit.go(app.screens["Sign in"], "DISSOLVE", { duration: 300 })] }]) });
+    }
+  };
+}
+function signOut(k, app, parent, to, button) {
+  const f = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", name: "Sign out form" });
+  k.patch(button(f), { control: { kind: "BUTTON", buttonType: "submit" } });
+  return { leads: () => form(k, f, { formAction: "signOut", onSubmit: Kit.go(app.screens[to], "PUSH_FROM_LEFT", { duration: 420 }) }) };
+}
+function opener(k, parent, o) {
+  const open = k.variable("Form", o.word, "BOOLEAN", false);
+  const b = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", radius: 999, fill: o.fill, padding: { top: 11, right: 20, bottom: 11, left: 12 }, name: "Add button" });
+  const plus = k.stack(b, { direction: "HORIZONTAL", width: 28, height: 28, radius: 14, fill: o.dot, align: "CENTER", justify: "CENTER", name: "Plus" });
+  k.text(plus, "+", { style: o.style, color: o.onDot, autoWidth: true, name: "Plus sign" });
+  k.text(b, o.label, { style: o.style, color: o.color, autoWidth: true, name: "Add label" });
+  k.on(b, Kit.set(open, { toggle: true }));
+  return {
+    variable: open,
+    /** `id` is shown only while it is open. */
+    opens(id) {
+      k.bindVariable(id, "visible", open);
+      k.patch(id, { visible: false });
+    },
+    /** What a form does once it is sent: close again. */
+    close: Kit.set(open, { value: false })
+  };
+}
+function accountPage(k, app, o) {
+  const meta = o.styles.meta ?? o.styles.label, error = o.styles.error ?? o.styles.label;
+  const saved = k.variable("Form", "accountSaved", "STRING", "");
+  const you = app.page("Account", "/account", "signedIn", { width: 960 });
+  o.top(you.column, (row2) => app.link(k.text(row2, o.back, { style: o.styles.link, color: "text", autoWidth: true, name: "Back link" }), o.home, "down"));
+  const row = panes(k, you.column, { gap: 32, align: "CENTER", name: "Account panes" });
+  const side = k.stack(row, { gap: 22, name: "Account side" });
+  pane(k, side, 320);
+  const lead = k.stack(side, { gap: 6, name: "Lead" });
+  eyebrow(k, lead, "YOUR ACCOUNT", o.styles.eyebrow);
+  says(k, k.text(lead, o.sample.name, { style: o.styles.title, color: "text", name: "Account name" }), "name");
+  const details = k.stack(side, { gap: 16, fill: "card", radius: 22, stroke: { color: "line", width: 1 }, padding: 24, name: "Account card" });
+  const mail = k.stack(details, { gap: 2, name: "Email row" });
+  k.text(mail, "Email", { style: o.styles.label, color: "cardMuted", name: "Detail label" });
+  says(k, k.text(mail, o.sample.email, { style: o.styles.value, color: "onCard", name: "Detail value" }), "email");
+  const kept = k.stack(details, { gap: 2, name: "Kept row" });
+  k.text(kept, o.count.label, { style: o.styles.label, color: "cardMuted", name: "Detail label" });
+  k.bindExpression(k.text(kept, o.count.sample, { style: o.styles.stat, color: "onCard", name: "Kept number" }), "characters", o.count.word);
+  const art = k.stack(row, { align: "CENTER", name: "Art" });
+  pane(k, art, 320);
+  o.art(art);
+  const body = k.stack(you.column, { gap: 18, name: "Body" });
+  const settings = panes(k, body, { gap: 18, name: "Settings" });
+  const card = (title, line, notice, build, action) => {
+    const c = k.stack(settings, { gap: 14, fill: "card", radius: 22, stroke: { color: "line", width: 1 }, padding: 24, name: `${title} card` });
+    pane(k, c, 300);
+    k.text(c, title, { style: o.styles.value, color: "onCard", name: "Setting title" });
+    k.text(c, line, { style: meta, color: "cardMuted", name: "Setting line" });
+    const f = k.stack(c, { gap: 14, name: `${title} form` });
+    build(f);
+    errorLine(k, f, error);
+    const go = k.stack(f, { direction: "HORIZONTAL", gap: 12, align: "CENTER", wrap: true, name: "Send row" });
+    submit(k, go, "Save");
+    const ok = k.text(go, notice, { style: meta, color: "onCard", autoWidth: true, name: "Saved" });
+    k.bindExpression(ok, "visible", `accountSaved == "${action}"`);
+    k.patch(ok, { visible: false });
+    form(k, f, { formAction: action, onSubmit: Kit.set(saved, { value: action }) });
+  };
+  card("Your name", "What the app calls you.", "Saved", (f) => {
+    const box = field(k, f, { card: true, label: "Name", name: "name", placeholder: o.sample.name, required: true });
+    k.patch(box, { control: { ...k.node(box).control, variableId: o.user.name } });
+  }, "updateAccount");
+  card("Password", "Other devices you are signed in on are signed out.", "Changed", (f) => {
+    field(k, f, { card: true, label: "Current password", name: "password", placeholder: "Your password now", type: "password", required: true });
+    field(k, f, { card: true, label: "New password", name: "new_password", placeholder: "At least 8 characters", type: "password", required: true });
+  }, "changePassword");
+  const ways = k.stack(body, { gap: 14, fill: "card", radius: 22, stroke: { color: "line", width: 1 }, padding: 24, name: "Leave card" });
+  const outRow = k.stack(ways, { direction: "HORIZONTAL", gap: 16, align: "CENTER", justify: "SPACE_BETWEEN", wrap: true, name: "Sign out row" });
+  k.text(outRow, "Done for now?", { style: o.styles.value, color: "onCard", autoWidth: true, name: "Leave title" });
+  const out = signOut(k, app, outRow, "Welcome", (f) => {
+    const b2 = k.stack(f, { direction: "HORIZONTAL", width: "HUG", radius: 12, stroke: { color: "onCard", width: 1.5 }, padding: { top: 12, right: 20, bottom: 12, left: 20 }, name: "Sign out button" });
+    k.text(b2, "Sign out", { style: o.styles.button ?? o.styles.link, color: "onCard", autoWidth: true, name: "Sign out label" });
+    return b2;
+  });
+  k.rect(ways, "FILL", 1, "line", { name: "Rule" });
+  k.text(ways, "Delete your account", { style: o.styles.value, color: "onCard", name: "Delete title" });
+  k.text(ways, "Your account and everything the app keeps for you are deleted, for good. Type your password to be sure.", { style: meta, color: "cardMuted", name: "Delete line" });
+  const del = k.stack(ways, { direction: "HORIZONTAL", gap: 12, align: "MAX", wrap: true, name: "Delete form" });
+  const pw = k.stack(del, { name: "Delete password" });
+  pane(k, pw, 220);
+  field(k, pw, { card: true, label: "Password", name: "password", placeholder: "Your password", type: "password", required: true });
+  const b = k.stack(del, { direction: "HORIZONTAL", width: "HUG", radius: 12, fill: "danger", padding: { top: 13, right: 20, bottom: 13, left: 20 }, name: "Delete button" });
+  k.text(b, "Delete my account", { style: o.styles.button ?? o.styles.link, color: "onDanger", autoWidth: true, name: "Delete label" });
+  k.patch(b, { control: { kind: "BUTTON", buttonType: "submit" } });
+  errorLine(k, ways, error);
+  return {
+    leads: () => {
+      out.leads();
+      form(k, del, { formAction: "deleteAccount", onSubmit: Kit.go(app.screens.Welcome, "DISSOLVE", { duration: 400 }) });
+    }
+  };
+}
+function editInPlace(k, o) {
+  const open = Object.values(k.doc.variables ?? {}).find((v) => v.name === `form/${o.word}`)?.id ?? k.variable("Form", o.word, "STRING", "");
+  k.on(o.trigger, Kit.set(open, { expression: "item_id" }));
+  k.bindExpression(o.view, "visible", `${o.word} != item_id`);
+  const f = k.stack(o.parent, { gap: 12, name: "Edit form" });
+  o.build(f);
+  errorLine(k, f, o.style);
+  const row = k.stack(f, { direction: "HORIZONTAL", gap: 8, align: "CENTER", name: "Edit actions" });
+  submit(k, row, "Save");
+  const cancel = k.stack(row, { direction: "HORIZONTAL", width: "HUG", padding: { top: 8, right: 10, bottom: 8, left: 10 }, name: "Cancel" });
+  k.text(cancel, "Cancel", { style: o.style, color: o.card === false ? "onPaper" : "cardMuted", autoWidth: true, name: "Cancel label" });
+  k.on(cancel, Kit.set(open, { value: "" }));
+  k.patch(cancel, { control: { kind: "BUTTON", buttonType: "button" } });
+  form(k, f, { formAction: "updateRecord", onSubmit: Kit.set(open, { value: "" }) });
+  k.bindExpression(f, "visible", `${o.word} == item_id`);
+  k.patch(f, { visible: false });
+  return f;
+}
+function stat(k, parent, o) {
+  const [figureColor, captionColor] = o.on ?? ["onCard", "cardMuted"];
+  const tile = k.stack(parent, { gap: 4, fill: o.fill ?? "card", radius: 20, stroke: o.fill ? void 0 : { color: "line", width: 1 }, padding: { top: 16, right: 18, bottom: 16, left: 18 }, name: "Stat" });
+  pane(k, tile, o.min ?? 140);
+  const row = k.stack(tile, { direction: "HORIZONTAL", gap: 6, align: "MAX", name: "Stat figure" });
+  k.bindExpression(k.text(row, o.sample, { style: o.figure, color: figureColor, autoWidth: true, name: "Stat number" }), "characters", o.expression);
+  if (o.unit) k.text(row, o.unit, { style: o.caption, color: captionColor, autoWidth: true, name: "Stat unit" });
+  k.text(tile, o.label, { style: o.caption, color: captionColor, name: "Stat label" });
+  return tile;
+}
+
+export {
+  APP_CUES,
+  appPages,
+  panes,
+  pane,
+  choice,
+  recordButton,
+  closing,
+  eyebrow,
+  errorLine,
+  accountPages,
+  signOut,
+  opener,
+  accountPage,
+  editInPlace,
+  stat
+};