@popcraft/kit 0.44.1 → 0.46.0

package/dist/chunks/chunk-VPLOSEZB.js

@@ -0,0 +1,119 @@
+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 {
+  showcase,
+  showcaseStyles,
+  specimenRow
+} from "./chunk-C4IFWFC6.js";
+import {
+  defineLibrary
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/libraries/toasts.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var TOAST = [
+  { layer: "Card", preset: "rise-in", at: 0, params: { duration: 500 } },
+  { layer: "Icon", preset: "pop-in", at: 150, params: { duration: 400 } },
+  { layer: "Card", preset: "fade-out", at: 3300, params: { duration: 400 } }
+];
+var UNDO = [
+  { layer: "Card", preset: "slide-in", at: 0, params: { direction: "up", duration: 500 } },
+  { layer: "Timer", preset: "wipe-out", at: 500, params: { duration: 4500, ease: { kind: "linear" } } },
+  { layer: "Card", preset: "fade-out", at: 5100, params: { duration: 400 } }
+];
+var marks = (inAt, shown, out, end) => [
+  { id: "in", t: inAt, label: "In" },
+  { id: "shown", t: shown, label: "Shown" },
+  { id: "out", t: out, label: "Out" },
+  { id: "end", t: end, label: "End" }
+];
+var lift = { type: "DROP_SHADOW", color: hex("#0F172A", 0.16), offset: { x: 0, y: 10 }, blur: 28, spread: 0, visible: true };
+var toasts_default = defineLibrary({
+  id: "lib-toasts",
+  version: 1,
+  meta: {
+    name: "Toast notifications",
+    description: "Animated toasts as motion components \u2014 success, error and info toasts that rise in and fade away, and an undo toast with a running timer \u2014 with text, icon and colour inputs",
+    tags: ["animation", "toast", "notification", "snackbar", "undo", "alert", "components"],
+    created: "2026-09-29",
+    updated: "2026-09-29",
+    aliases: ["web-kit-toasts"]
+  },
+  motion: { components: [{ component: "Toast", cues: TOAST }, { component: "Undo toast", cues: UNDO }] },
+  build() {
+    const k = new Kit("Toast notifications", preset("web-desktop"));
+    k.brand({ paper: "#F5F6F8", text: "#172033", onPaper: "#5B6474", card: "#FFFFFF", onCard: "#172033", cardMuted: "#5B6474", success: "#15803D", onSuccess: "#FFFFFF", ink: "#172033", onInk: "#F5F6F8", timer: "#8FB4FF", line: "#E1E4EA", primary: "#2F55D4", onPrimary: "#FFFFFF" }, { name: "Brightline" });
+    showcaseStyles(k);
+    k.textStyle("Toast title 15", { size: 15, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Toast body 14", { size: 14, fontWeight: 400, lineHeight: 20 });
+    k.textStyle("Icon 14", { size: 14, fontWeight: 800, lineHeight: 16, textAlign: "CENTER" });
+    k.textStyle("Action 14", { size: 14, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("App title 24", { size: 24, fontWeight: 800, letterSpacing: -0.4, lineHeight: 32 });
+    k.textStyle("Cell 14", { size: 14, fontWeight: 500, lineHeight: 20 });
+    k.component("Toast", {
+      width: "HUG",
+      timeline: { duration: 3800, markers: marks(0, 600, 3300, 3800) },
+      description: "A notice that rises in with its icon popping, stays, and fades. Play In \u2192 Shown to leave it up. Title, Message, Icon and Accent are inputs.",
+      props: { Title: "Invoice sent", Message: "Harbour Studio will get it in a minute.", Icon: "\u2714", Accent: { color: "success" }, "Plays on": { motion: "trigger", value: "load" } }
+    }, (id) => {
+      const card = k.stack(id, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", fill: "card", radius: 12, padding: { top: 14, right: 20, bottom: 14, left: 14 }, effects: [lift], name: "Card" });
+      const icon = k.stack(card, { direction: "HORIZONTAL", width: 28, height: 28, radius: 14, align: "CENTER", justify: "CENTER", fill: "success", name: "Icon" });
+      k.bindPath(icon, "fills[#0].color", "Accent");
+      k.propText(icon, "Icon", { style: "Icon 14", color: "onSuccess", autoWidth: true, name: "Glyph" });
+      const copy = k.stack(card, { width: "HUG", gap: 2, name: "Copy" });
+      k.propText(copy, "Title", { style: "Toast title 15", color: "onCard", autoWidth: true });
+      k.propText(copy, "Message", { style: "Toast body 14", color: "cardMuted", autoWidth: true });
+    });
+    k.component("Undo toast", {
+      width: "HUG",
+      timeline: { duration: 5500, markers: marks(0, 500, 5100, 5500) },
+      description: "An action that can be taken back: the notice slides up with an Undo, and its timer bar runs down while the undo still works. Message and Action are inputs.",
+      props: { Message: "Invoice #1042 archived", Action: "Undo" }
+    }, (id) => {
+      const card = k.stack(id, { width: 360, fill: "ink", radius: 12, clip: true, effects: [lift], name: "Card" });
+      const row = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 14, right: 18, bottom: 12, left: 18 }, name: "Row" });
+      k.propText(row, "Message", { style: "Toast body 14", color: "onInk", autoWidth: true });
+      k.propText(row, "Action", { style: "Action 14", color: "onInk", autoWidth: true });
+      k.stack(card, { height: 3, fill: "timer", name: "Timer" });
+    });
+    k.cues(k.componentIdOf("Toast"), TOAST);
+    k.cues(k.componentIdOf("Undo toast"), UNDO);
+    const sheet = k.sheet;
+    showcase(k, sheet, { title: "Toast notifications", intro: "Each toast plays on its own clock: set when it starts, or play only its In range so it stays up. The title, message, icon and accent colour are inputs.", duration: 6e3 });
+    const kinds = specimenRow(k, sheet, "Kinds", { gap: 24, align: "MIN" });
+    k.instance(kinds, "Toast", { Title: "Invoice sent", Message: "Harbour Studio will get it in a minute." }, { name: "Toast success", playback: { range: ["in", "shown"] } });
+    k.instance(kinds, "Toast", { Title: "Payment failed", Message: "The card ending 4417 was declined.", Icon: "!", Accent: hex("#B42318") }, { name: "Toast error", playback: { range: ["in", "shown"], start: 300 } });
+    k.instance(kinds, "Toast", { Title: "Reminder scheduled", Message: "We\u2019ll nudge them again on Friday.", Icon: "i", Accent: hex("#1D4ED8") }, { name: "Toast info", playback: { range: ["in", "shown"], start: 600 } });
+    const undo = specimenRow(k, sheet, "Undo", { gap: 24 });
+    k.instance(undo, "Undo toast", { Message: "Invoice #1042 archived", Action: "Undo" }, { name: "Undo toast", playback: { start: 400 } });
+    const app = k.stack(sheet, { direction: "HORIZONTAL", gap: 32, radius: 16, stroke: { color: "line", width: 1 }, padding: 28, align: "MAX", name: "App" });
+    const list = k.stack(app, { gap: 10, name: "Invoices" });
+    k.text(list, "Invoices", { style: "App title 24", color: "text", name: "App title" });
+    for (const [who, amount, state] of [["Harbour Studio", "$4,200.00", "Sent"], ["Northwind Coffee", "$1,180.00", "Paid"], ["Fernhill Bakery", "$640.00", "Overdue"], ["Ledger & Pine", "$2,975.00", "Draft"]]) {
+      const r = k.stack(list, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", padding: { top: 12, right: 0, bottom: 12, left: 0 }, name: "Invoice row" });
+      k.text(r, who, { style: "Cell 14", color: "text", autoWidth: true, name: "Client" });
+      k.text(r, `${amount} \xB7 ${state}`, { style: "Cell 14", color: "onPaper", autoWidth: true, name: "Amount" });
+    }
+    const stack = k.stack(app, { width: "HUG", gap: 12, align: "MAX", name: "Toast stack" });
+    k.instance(stack, "Toast", { Title: "Invoice sent", Message: "Harbour Studio will get it in a minute." }, { name: "Stacked toast", playback: { start: 0 } });
+    k.instance(stack, "Toast", { Title: "Payment received", Message: "Northwind Coffee paid $1,180.00." }, { name: "Stacked toast", playback: { start: 900 } });
+    k.instance(stack, "Toast", { Title: "Reminder scheduled", Message: "Fernhill Bakery gets a nudge on Friday.", Icon: "i", Accent: hex("#1D4ED8") }, { name: "Stacked toast", playback: { start: 1800 } });
+    return k.finish();
+  }
+});
+
+export {
+  toasts_default
+};

package/dist/chunks/chunk-VQBB23AJ.js

@@ -0,0 +1,194 @@
+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 {
+  showcase,
+  showcaseStyles,
+  specimenRow
+} from "./chunk-C4IFWFC6.js";
+import {
+  defineLibrary
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/libraries/loaders.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DOTS = 8;
+var DIAL = 32;
+var loaders_default = defineLibrary({
+  id: "lib-loaders",
+  version: 1,
+  meta: {
+    name: "Loaders & skeletons",
+    description: "Looping loading states as motion components: a spinner, progress bars, a typing indicator, and skeleton cards with a shimmer \u2014 colours, labels and the percentage are inputs",
+    tags: ["animation", "loader", "spinner", "skeleton", "shimmer", "progress", "loading state", "components"],
+    created: "2026-09-29",
+    updated: "2026-09-29",
+    aliases: ["web-kit-loaders"]
+  },
+  build() {
+    const k = new Kit("Loaders & skeletons", preset("web-desktop"));
+    k.brand({ paper: "#F7F7F4", text: "#1D1F1A", onPaper: "#5E6259", primary: "#3F6F4E", onPrimary: "#FFFFFF", track: "#E2E4DD", bone: "#E6E7E1", sheen: "#FFFFFF", bubble: "#E9EBE4", onBubble: "#1D1F1A", dot: "#7D8277", card: "#FFFFFF" }, { name: "Lumen Photo" });
+    showcaseStyles(k);
+    k.textStyle("Label 15", { size: 15, fontWeight: 500, lineHeight: 20 });
+    k.textStyle("Caption 13", { size: 13, fontWeight: 500, lineHeight: 18 });
+    k.textStyle("Figure 15", { size: 15, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Chat 15", { size: 15, fontWeight: 400, lineHeight: 22 });
+    const dial = (parent) => {
+      const d = k.stack(parent, { direction: "HORIZONTAL", width: DIAL, height: DIAL, name: "Dial" });
+      for (let i = 0; i < DOTS; i++) {
+        const a = i / DOTS * Math.PI * 2, r = DIAL / 2 - 4;
+        const dot = k.ellipse(d, 6, "primary", { name: `Dot ${i + 1}`, opacity: Math.round((0.15 + 0.85 * (i + 1) / DOTS) * 100) / 100, absolute: { x: DIAL / 2 + Math.sin(a) * r - 3, y: DIAL / 2 - Math.cos(a) * r - 3 } });
+        k.bindPath(dot, "fills[#0].color", "Color");
+      }
+      k.animate(d, "rotation", [{ t: 0, v: 0, ease: ease.linear }, { t: 1e3, v: 360 }]);
+    };
+    k.component("Spinner", {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      padding: 4,
+      timeline: { duration: 1e3 },
+      description: "Eight dots turning once a second, for as long as something loads. Color sets the dots; Speed and Loop are playback inputs.",
+      props: { Color: { color: "primary" }, Speed: { motion: "speed", value: 1 }, Loop: { motion: "loop", value: "loop" } }
+    }, (id) => dial(id));
+    k.component("Loading label", {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 10,
+      align: "CENTER",
+      timeline: { duration: 1e3 },
+      description: "A spinner beside what is loading. Label and Color are inputs.",
+      props: { Label: "Loading your library\u2026", Color: { color: "primary" }, Loop: { motion: "loop", value: "loop" } }
+    }, (id) => {
+      dial(id);
+      k.propText(id, "Label", { style: "Label 15", color: "text", autoWidth: true });
+    });
+    const BAR_W = 320, SEG = 96;
+    k.component("Progress sweep", {
+      width: BAR_W,
+      gap: 8,
+      timeline: { duration: 2e3 },
+      description: "An indeterminate progress bar: a segment sweeps along the track while the length of the job is unknown. Label is an input.",
+      props: { Label: "Importing 2,480 contacts\u2026", Loop: { motion: "loop", value: "loop" } }
+    }, (id) => {
+      k.propText(id, "Label", { style: "Caption 13", color: "onPaper" });
+      const track = k.stack(id, { direction: "HORIZONTAL", width: BAR_W, height: 6, radius: 3, fill: "track", clip: true, name: "Track" });
+      const seg = k.rect(track, SEG, 6, "primary", { radius: 3, name: "Segment", absolute: { x: 0, y: 0 } });
+      k.animate(seg, "translateX", [{ t: 0, v: -SEG, ease: ease.inOut("cubic") }, { t: 2e3, v: BAR_W }]);
+    });
+    k.component("Upload progress", {
+      width: BAR_W,
+      gap: 8,
+      timeline: { duration: 2e3 },
+      description: "A progress bar that fills to Percent (0\u2013100), with the file name and the percentage as text inputs.",
+      props: { File: "coast-shoot-final.zip", Figure: "64%", Percent: { number: 64, min: 0, max: 100, step: 1 } }
+    }, (id) => {
+      const row = k.stack(id, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Row" });
+      k.propText(row, "File", { style: "Caption 13", color: "text", autoWidth: true });
+      k.propText(row, "Figure", { style: "Figure 15", color: "text", autoWidth: true });
+      const track = k.stack(id, { direction: "HORIZONTAL", width: BAR_W, height: 6, radius: 3, fill: "track", clip: true, name: "Track" });
+      const fill = k.rect(track, BAR_W * 0.64, 6, "primary", { radius: 3, name: "Fill" });
+      k.animate(fill, "width", [{ t: 0, v: 0, ease: ease.out("expo") }, { t: 1600, v: BAR_W * 0.64 }]);
+      k.bindKey(fill, "width", 1600, { prop: "Percent", mul: BAR_W / 100 });
+    });
+    k.component("Typing indicator", {
+      direction: "HORIZONTAL",
+      width: "HUG",
+      gap: 5,
+      fill: "bubble",
+      radius: 18,
+      align: "CENTER",
+      padding: { top: 14, right: 16, bottom: 14, left: 16 },
+      timeline: { duration: 1e3 },
+      description: "Someone is typing: three dots rise in turn inside a chat bubble.",
+      props: { Loop: { motion: "loop", value: "loop" } }
+    }, (id) => {
+      for (let i = 0; i < 3; i++) {
+        const d = k.ellipse(id, 8, "dot", { name: `Dot ${i + 1}` });
+        const t0 = i * 140;
+        k.animate(d, "translateY", [{ t: t0, v: 0, ease: ease.out("quad") }, { t: t0 + 180, v: -5, ease: ease.named("quad", "in") }, { t: t0 + 360, v: 0 }]);
+        k.animate(d, "opacity", [{ t: t0, v: 0.5, ease: ease.out("quad") }, { t: t0 + 180, v: 1, ease: ease.named("quad", "in") }, { t: t0 + 360, v: 0.5 }]);
+      }
+    });
+    const CARD = 260;
+    k.component("Skeleton card", {
+      width: CARD,
+      gap: 12,
+      fill: "card",
+      radius: 14,
+      padding: 14,
+      clip: true,
+      timeline: { duration: 2e3 },
+      description: "A placeholder card while a picture and its words load: grey bones with a sheen sweeping across.",
+      props: { Loop: { motion: "loop", value: "loop" } }
+    }, (id) => {
+      k.rect(id, "FILL", 150, "bone", { radius: 10, name: "Picture" });
+      k.rect(id, 180, 14, "bone", { radius: 7, name: "Title bone" });
+      k.rect(id, "FILL", 10, "bone", { radius: 5, name: "Line bone" });
+      k.rect(id, 150, 10, "bone", { radius: 5, name: "Line bone" });
+      const sheen = {
+        type: "GRADIENT_LINEAR",
+        visible: true,
+        opacity: 1,
+        gradientStops: [{ position: 0, color: { ...k.color("sheen"), a: 0 } }, { position: 0.5, color: { ...k.color("sheen"), a: 0.7 } }, { position: 1, color: { ...k.color("sheen"), a: 0 } }],
+        gradientHandlePositions: [{ x: 0, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0, y: 1 }]
+      };
+      const band = k.rect(id, 120, 320, [sheen], { name: "Sheen", absolute: { x: 0, y: -10 } });
+      k.patch(band, { rotation: 12 });
+      k.animate(band, "translateX", [{ t: 0, v: -160, ease: ease.inOut("sine") }, { t: 1400, v: CARD + 40 }]);
+    });
+    k.component("Skeleton row", {
+      direction: "HORIZONTAL",
+      width: 360,
+      gap: 14,
+      align: "CENTER",
+      padding: { top: 10, right: 0, bottom: 10, left: 0 },
+      timeline: { duration: 2e3 },
+      description: "A placeholder list row \u2014 an avatar and two lines \u2014 that breathes while the list loads.",
+      props: { Loop: { motion: "loop", value: "loop" } }
+    }, (id) => {
+      k.ellipse(id, 40, "bone", { name: "Avatar bone" });
+      const lines = k.stack(id, { gap: 8, name: "Lines" });
+      k.rect(lines, 180, 12, "bone", { radius: 6, name: "Title bone" });
+      k.rect(lines, "FILL", 10, "bone", { radius: 5, name: "Line bone" });
+      for (const n of [...k.named(id, "Avatar bone"), lines]) k.animate(n, "opacity", [{ t: 0, v: 1, ease: ease.inOut("sine") }, { t: 1e3, v: 0.45, ease: ease.inOut("sine") }, { t: 2e3, v: 1 }]);
+    });
+    const sheet = k.sheet;
+    showcase(k, sheet, { title: "Loaders & skeletons", intro: "Loading states that loop on their own clocks \u2014 drop one wherever a screen waits. The spinner\u2019s colour, the labels and the upload percentage are inputs; Speed and Loop set how each instance plays.", duration: 4e3 });
+    const load = specimenRow(k, sheet, "Spinners and bars", { gap: 48 });
+    k.instance(load, "Spinner", {}, { name: "Spinner" });
+    k.instance(load, "Spinner", { Color: hex("#B5542B") }, { name: "Spinner", playback: { speed: 0.5 } });
+    k.instance(load, "Loading label", { Label: "Syncing 1,204 photos from the shoot\u2026" }, { name: "Loading label" });
+    k.instance(load, "Progress sweep", { Label: "Importing client contacts\u2026" }, { name: "Progress sweep" });
+    const up = specimenRow(k, sheet, "Uploads", { gap: 48 });
+    k.instance(up, "Upload progress", { File: "coast-shoot-final.zip", Figure: "64%", Percent: 64 }, { name: "Upload" });
+    k.instance(up, "Upload progress", { File: "wedding-selects-2026.zip", Figure: "28%", Percent: 28 }, { name: "Upload", playback: { start: 250 } });
+    k.instance(up, "Upload progress", { File: "portfolio-covers.zip", Figure: "100%", Percent: 100 }, { name: "Upload", playback: { start: 500 } });
+    const chat = specimenRow(k, sheet, "Typing", { gap: 16 });
+    const said = k.stack(chat, { direction: "HORIZONTAL", width: "HUG", fill: "bubble", radius: 18, padding: { top: 12, right: 16, bottom: 12, left: 16 }, name: "Message" });
+    k.text(said, "Can you send the full-resolution files for the harbour set?", { style: "Chat 15", color: "onBubble", autoWidth: true, name: "Message text" });
+    k.instance(chat, "Typing indicator", {}, { name: "Typing indicator" });
+    const cards = specimenRow(k, sheet, "Skeletons", { gap: 24, align: "MIN" });
+    for (let i = 0; i < 3; i++) k.instance(cards, "Skeleton card", {}, { name: "Skeleton card", playback: { start: i * 150 } });
+    const rows = k.stack(cards, { width: "HUG", gap: 4, name: "Skeleton list" });
+    for (let i = 0; i < 4; i++) k.instance(rows, "Skeleton row", {}, { name: "Skeleton row", playback: { start: i * 120 } });
+    return k.finish();
+  }
+});
+
+export {
+  loaders_default
+};

package/dist/chunks/chunk-VQEMXVCZ.js

@@ -0,0 +1,311 @@
+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 {
+  caret,
+  faceSlot
+} from "./chunk-Y6DFTJFC.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-5OTEBTMU.js";
+import {
+  compactNav,
+  footer,
+  respond,
+  rule,
+  soft,
+  typeScale
+} from "./chunk-QSBEDW52.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-IPGCJWVL.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/web/saas-ai-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var PROMPT = "Six-week brand refresh for Kiln & Co. Around $18k, starting 3 March. They liked the Ostra case study.";
+var FEES = [["Discovery and audit", "Weeks 1\u20132", "$4,200"], ["Identity and guidelines", "Weeks 3\u20135", "$9,800"], ["Rollout and handover", "Week 6", "$3,600"]];
+var INDEX = [
+  ["Proposals", "Scope, timeline, fee table and terms, in the order a client reads them.", "40 sec"],
+  ["Statements of work", "Deliverables and sign-off points lifted from the proposal they said yes to.", "25 sec"],
+  ["Follow-ups", "The nudge on day four, written so it does not read like a nudge.", "8 sec"],
+  ["Change requests", "What was asked for, what it adds, and the new date, on one page.", "20 sec"],
+  ["Case studies", "The finished job as a story, with the numbers the client approved.", "90 sec"]
+];
+var NOTES = ["kiln & co \u2014 brand refresh??", "6 wks, start 3 mar", '~18k (they said "under 20")', "logo stays. type + colour + packaging", "mention ostra \u2014 31% repeat orders", "half up front"];
+var VOICE = [
+  ["Twelve past proposals", "Drop in what you have already sent. It keeps your structure and the way you open."],
+  ["Your rate card", "Day rates, minimums and what you never discount. Fee tables add up the way yours do."],
+  ["How you sign off", "\u201CSpeak soon\u201D, not \u201CBest regards\u201D. It does not put words in your mouth that you would not say."]
+];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Dateline", preset: "fade-in", at: 100, params: { duration: 600 } },
+  { layer: "Headline", preset: "words-in", at: 200, params: { duration: 600 } },
+  { layer: "Lead", preset: "rise-in", at: 600 },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 750, stagger: { delay: 100 } },
+  { layer: "Proof", preset: "fade-in", at: 1e3, params: { duration: 500 } },
+  { layer: "Desk", preset: "rise-in", at: 400, params: { duration: 800 } },
+  { layer: "Prompt text", preset: "typewriter", at: 1e3, params: { duration: 1600 } },
+  { layer: "Send", preset: "pulse", at: 2650, params: { duration: 500, amount: 0.18 } },
+  { layer: "Draft", preset: "rise-in", at: 2900, params: { duration: 500 } },
+  { layer: "Draft title", preset: "words-in", at: 3050, params: { duration: 500 } },
+  { layer: "Draft opening", preset: "words-in", at: 3250, params: { duration: 300, amount: 20 } },
+  { layer: "Fee row", preset: "fade-in", at: 4400, params: { duration: 250 }, stagger: { delay: 150 } },
+  { layer: "Fee total row", preset: "fade-in", at: 4850, params: { duration: 250 } },
+  { layer: "Highlight", preset: "wipe-in", at: 5400, params: { duration: 250 } },
+  { layer: "Margin note", preset: "pop-in", at: 5500, params: { duration: 400 } }
+];
+var counts = [{ layer: "Fee total", at: 4850, duration: 550, counter: { from: 0, to: 17600, prefix: "$" } }];
+var saas_ai_landing_default = defineTemplate({
+  id: "web-saas-ai-landing",
+  meta: {
+    name: "SaaS AI tool landing page",
+    description: "A landing page for an AI writing tool, set like a broadsheet: the hero is a prompt box that types a brief and streams a finished proposal under it, fee table and all. Then an index of what it drafts, notes beside the result, how it learns a voice, a reader\u2019s letter and the price. Warm serif editorial, desktop to phone",
+    category: "web",
+    tags: ["saas", "ai", "landing page", "prompt box", "hero", "editorial", "serif", "typewriter", "website", "animation", "responsive", "startup"],
+    platforms: ["web"],
+    formats: ["page", "demo"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("SaaS AI tool landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F1ECE1", text: "#1B1916", onPaper: "#575147", primary: "#7A1F2B", onPrimary: "#FFF8EC", accent: "#F2C14E", card: "#FFFDF8", onCard: "#1B1916", cardMuted: "#6B6458", panel: "#211D19", onPanel: "#F4EEE2", panelMuted: "#B9B0A0", hairline: "#CFC6B4" },
+      { name: "Longhand" }
+    );
+    const s = typeScale(k, {
+      "Nav 16": { size: 16, fontWeight: 500, lineHeight: 24 },
+      "Brand 22": { ...SERIF, size: 22, fontWeight: 700, letterSpacing: -0.3, lineHeight: 28 },
+      "Button 16": { size: 16, fontWeight: 600, lineHeight: 24 },
+      "Dateline 13": { ...MONO, size: 13, fontWeight: 500, letterSpacing: 1.2, lineHeight: 20, textCase: "UPPER" },
+      "Display 104": { ...SERIF, size: 104, fontWeight: 600, letterSpacing: -3.6, lineHeight: 104 },
+      "Display 88": { ...SERIF, size: 88, fontWeight: 600, letterSpacing: -3, lineHeight: 90 },
+      "Display 60": { ...SERIF, size: 60, fontWeight: 600, letterSpacing: -1.8, lineHeight: 64 },
+      "Display 42": { ...SERIF, size: 42, fontWeight: 600, letterSpacing: -1.1, lineHeight: 46 },
+      "Lead 20": { size: 20, fontWeight: 400, lineHeight: 31 },
+      "Lead 17": { size: 17, fontWeight: 400, lineHeight: 27 },
+      "Proof 14": { size: 14, fontWeight: 500, lineHeight: 22 },
+      "Prompt 19": { ...SERIF, size: 19, fontWeight: 400, lineHeight: 29 },
+      "Prompt 16": { ...SERIF, size: 16, fontWeight: 400, lineHeight: 25 },
+      "Label 12": { ...MONO, size: 12, fontWeight: 600, letterSpacing: 1.1, lineHeight: 16, textCase: "UPPER" },
+      "Draft title 30": { ...SERIF, size: 30, fontWeight: 700, letterSpacing: -0.6, lineHeight: 36 },
+      "Draft title 22": { ...SERIF, size: 22, fontWeight: 700, letterSpacing: -0.3, lineHeight: 28 },
+      "Draft 16": { ...SERIF, size: 16, fontWeight: 400, lineHeight: 26 },
+      "Fee 15": { size: 15, fontWeight: 500, lineHeight: 22, fontFeatures: { tnum: 1 } },
+      "Fee total 26": { ...SERIF, size: 26, fontWeight: 700, lineHeight: 32, fontFeatures: { tnum: 1 } },
+      "Aside 22": { ...SERIF, size: 22, fontWeight: 400, fontStyle: "italic", lineHeight: 31 },
+      "Note 14": { ...SERIF, size: 14, fontWeight: 600, fontStyle: "italic", lineHeight: 20 },
+      "Section 52": { ...SERIF, size: 52, fontWeight: 600, letterSpacing: -1.6, lineHeight: 56 },
+      "Section 34": { ...SERIF, size: 34, fontWeight: 600, letterSpacing: -0.8, lineHeight: 40 },
+      "Entry 30": { ...SERIF, size: 30, fontWeight: 500, fontStyle: "italic", letterSpacing: -0.4, lineHeight: 36 },
+      "Body 17": { size: 17, fontWeight: 400, lineHeight: 27 },
+      "Time 14": { ...MONO, size: 14, fontWeight: 500, lineHeight: 27 },
+      "Scrawl 16": { ...MONO, size: 16, fontWeight: 400, lineHeight: 30 },
+      "Quote 44": { ...SERIF, size: 44, fontWeight: 400, fontStyle: "italic", letterSpacing: -0.9, lineHeight: 56 },
+      "Quote 26": { ...SERIF, size: 26, fontWeight: 400, fontStyle: "italic", letterSpacing: -0.3, lineHeight: 36 },
+      "Initial 132": { ...SERIF, size: 132, fontWeight: 700, lineHeight: 112 },
+      "Initial 84": { ...SERIF, size: 84, fontWeight: 700, lineHeight: 76 },
+      "Voice 22": { ...SERIF, size: 22, fontWeight: 700, lineHeight: 28 },
+      "Small 14": { size: 14, fontWeight: 400, lineHeight: 22 },
+      "Foot head 14": { size: 14, fontWeight: 700, lineHeight: 22 }
+    });
+    buttons(k, { style: s("Button 16"), pad: [15, 26], radius: 2 });
+    k.component("Button paper", { direction: "HORIZONTAL", width: "HUG", radius: 2, align: "CENTER", fill: "card", padding: { top: 15, right: 26, bottom: 15, left: 26 }, props: { Label: "Start writing" } }, (id) => {
+      k.propText(id, "Label", { style: s("Button 16"), color: "onCard", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 88, top: 32 });
+    k.timeline(sheet, { duration: 6e3, fps: 30 });
+    nav(k, sheet, { links: ["What it writes", "Your voice", "Pricing", "Sign in"], cta: "Start writing", style: s("Nav 16"), brandStyle: s("Brand 22") });
+    const hero = k.stack(sheet, { gap: 36, name: "Hero" });
+    const dateline = k.stack(hero, { gap: 10, name: "Dateline" });
+    rule(k, dateline, "text", { weight: 3 });
+    const line = k.stack(dateline, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 16, name: "Dateline row" });
+    k.text(line, "Vol. 3 \xB7 The proposal issue", { style: s("Dateline 13"), color: "text", autoWidth: true, name: "Issue" });
+    k.text(line, "For designers, writers and studios of one", { style: s("Dateline 13"), color: "onPaper", autoWidth: true, name: "Readers" });
+    k.text(line, "Free for three documents a month", { style: s("Dateline 13"), color: "onPaper", autoWidth: true, name: "Offer" });
+    rule(k, dateline, "text");
+    k.text(hero, "Say what the job is. Longhand writes the proposal.", { style: s("Display 104"), color: "text", name: "Headline" });
+    const row = k.stack(hero, { direction: "HORIZONTAL", gap: 64, name: "Hero row" });
+    const copy = k.stack(row, { width: 400, gap: 24, name: "Copy" });
+    k.text(copy, "Type one line about the work, or say it into your phone on the walk home. Forty seconds later there is a proposal in your own voice, with a fee table that adds up and terms you have used before.", { style: s("Lead 20"), color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Write your first one" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Read a sample" }, { name: "CTA quiet" });
+    k.text(copy, "61,400 proposals sent since January. 38% were signed within a week.", { style: s("Proof 14"), color: "onPaper", name: "Proof" });
+    const aside = k.stack(copy, { gap: 10, padding: { top: 28, right: 0, bottom: 0, left: 0 }, name: "Aside" });
+    rule(k, aside, "text");
+    k.text(aside, "Overheard", { style: s("Label 12"), color: "onPaper", name: "Aside label" });
+    k.text(aside, "\u201CShe replied in nine minutes with a yes and a start date. I had not finished my coffee.\u201D", { style: s("Aside 22"), color: "text", name: "Aside quote" });
+    k.text(aside, "Tom\xE1s Reyes, copywriter", { style: s("Proof 14"), color: "onPaper", name: "Aside name" });
+    const desk = k.stack(row, { gap: 0, fill: "card", radius: 4, stroke: { color: "text", width: 1.5 }, effects: [soft(0.16, 24, 48)], name: "Desk" });
+    const ask = k.stack(desk, { gap: 12, padding: { top: 24, right: 28, bottom: 24, left: 28 }, name: "Prompt" });
+    k.text(ask, "What is the job?", { style: s("Label 12"), color: "cardMuted", name: "Prompt label" });
+    const field = k.stack(ask, { direction: "HORIZONTAL", gap: 16, align: "MAX", name: "Prompt field" });
+    const typed = k.stack(field, { direction: "HORIZONTAL", gap: 4, align: "MAX", name: "Typed" });
+    k.text(typed, PROMPT, { style: s("Prompt 19"), color: "onCard", name: "Prompt text" });
+    caret(k, typed, 2, 26, "primary", { absolute: { x: 0, y: 0 } });
+    const send = k.stack(field, { width: 44, height: 44, radius: 22, fill: "primary", align: "CENTER", justify: "CENTER", name: "Send" });
+    k.vector(send, 18, 18, [{ closed: false, points: [{ x: 9, y: 16 }, { x: 9, y: 2 }] }, { closed: false, points: [{ x: 3, y: 8 }, { x: 9, y: 2 }, { x: 15, y: 8 }] }], "onPrimary", { name: "Arrow", strokeWidth: 2.4 });
+    rule(k, desk, "text", { weight: 1.5 });
+    const draft = k.stack(desk, { gap: 16, padding: { top: 28, right: 28, bottom: 30, left: 28 }, name: "Draft" });
+    k.text(draft, "Proposal \xB7 drafted for Kiln & Co.", { style: s("Label 12"), color: "cardMuted", name: "Draft label" });
+    k.text(draft, "A sharper Kiln, on every shelf by mid-April", { style: s("Draft title 30"), color: "onCard", name: "Draft title" });
+    k.text(draft, "Kiln\u2019s pots have outgrown the brand they launched with. Over six weeks from 3 March I will rework the type, colour and packaging around the mark you already own, the way we did for Ostra, where repeat orders rose 31% in a season.", { style: s("Draft 16"), color: "onCard", name: "Draft opening" });
+    const fees = k.stack(draft, { gap: 0, name: "Fees" });
+    for (const [what, when, fee] of FEES) {
+      const r = k.stack(fees, { name: "Fee row" });
+      rule(k, r, "hairline");
+      const cells = k.stack(r, { direction: "HORIZONTAL", gap: 16, padding: { top: 9, right: 0, bottom: 9, left: 0 }, name: "Fee cells" });
+      k.text(cells, what, { style: s("Fee 15"), color: "onCard", name: "Fee item" });
+      k.text(cells, when, { style: s("Fee 15"), color: "cardMuted", width: 104, name: "Fee weeks" });
+      k.text(cells, fee, { style: s("Fee 15"), color: "onCard", width: 64, align: "RIGHT", name: "Fee amount" });
+    }
+    const total = k.stack(fees, { name: "Fee total row" });
+    rule(k, total, "onCard", { weight: 1.5 });
+    const sum = k.stack(total, { direction: "HORIZONTAL", gap: 16, align: "CENTER", padding: { top: 12, right: 0, bottom: 0, left: 0 }, name: "Fee sum" });
+    k.text(sum, "Total, half on signing", { style: s("Fee 15"), color: "onCard", name: "Total label" });
+    const figure = k.stack(sum, { direction: "HORIZONTAL", width: "HUG", padding: { top: 0, right: 8, bottom: 0, left: 8 }, name: "Figure" });
+    k.rect(figure, 112, 16, "accent", { name: "Highlight", absolute: { x: 0, y: 13 } });
+    k.text(figure, "$17,600", { style: s("Fee total 26"), color: "onCard", autoWidth: true, name: "Fee total" });
+    const note = k.stack(desk, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", fill: "accent", radius: 2, padding: { top: 8, right: 14, bottom: 8, left: 14 }, effects: [soft(0.18, 6, 14)], name: "Margin note", absolute: { x: 560, y: -20 } });
+    k.text(note, "Drafted in 41 seconds", { style: s("Note 14"), color: "onCard", autoWidth: true, name: "Note words" });
+    k.patch(note, { rotation: -3 });
+    const index = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "Index" });
+    const head = k.stack(index, { width: 372, gap: 16, name: "Index head" });
+    k.text(head, "Contents", { style: s("Label 12"), color: "onPaper", name: "Index label" });
+    k.text(head, "The whole paper trail of a job.", { style: s("Section 52"), color: "text", name: "Index title" });
+    k.text(head, "Each document starts from the one before it, so the invoice agrees with the proposal and the case study agrees with both.", { style: s("Body 17"), color: "onPaper", name: "Index lead" });
+    const list = k.stack(index, { name: "Index list" });
+    for (const [name, what, time] of INDEX) {
+      rule(k, list, "text");
+      const r = k.stack(list, { direction: "HORIZONTAL", gap: 24, padding: { top: 20, right: 0, bottom: 22, left: 0 }, name: "Entry" });
+      k.text(r, name, { style: s("Entry 30"), color: "text", width: 270, name: "Entry name" });
+      k.text(r, what, { style: s("Body 17"), color: "onPaper", name: "Entry text" });
+      k.text(r, time, { style: s("Time 14"), color: "text", width: 64, align: "RIGHT", name: "Entry time" });
+    }
+    rule(k, list, "text");
+    const compare = k.stack(sheet, { gap: 32, name: "Compare" });
+    k.text(compare, "It starts from the notes you already take.", { style: s("Section 52"), color: "text", width: 760, name: "Compare title" });
+    const pair = k.stack(compare, { direction: "HORIZONTAL", gap: 0, name: "Pair" });
+    const blotter = k.stack(pair, { gap: 14, fill: "panel", padding: 40, name: "Notes" });
+    k.text(blotter, "Your notes, 4:52 pm", { style: s("Label 12"), color: "panelMuted", name: "Notes label" });
+    const scrawl = k.stack(blotter, { name: "Scrawl" });
+    for (const n of NOTES) k.text(scrawl, n, { style: s("Scrawl 16"), color: "onPanel", name: "Note line" });
+    const out = k.stack(pair, { gap: 14, fill: "card", stroke: { color: "text", width: 1.5 }, padding: 40, name: "Sent" });
+    k.text(out, "What Kiln & Co. read, 4:53 pm", { style: s("Label 12"), color: "cardMuted", name: "Sent label" });
+    k.text(out, "Terms", { style: s("Voice 22"), color: "onCard", name: "Sent title" });
+    k.text(out, "The fee is $17,600, with half due on signing and half at handover in the week of 14 April. The mark itself is out of scope and stays as it is. Two rounds of revisions are included at each stage; a third is billed at my day rate of $880.", { style: s("Draft 16"), color: "onCard", name: "Sent text" });
+    k.text(out, "Speak soon, In\xE9s", { style: s("Note 14"), color: "cardMuted", name: "Sign-off" });
+    const voice = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, name: "Voice" });
+    const opener = k.stack(voice, { direction: "HORIZONTAL", gap: 20, name: "Opener" });
+    k.text(opener, "I", { style: s("Initial 132"), color: "text", autoWidth: true, name: "Initial" });
+    k.text(opener, "t sounds like you because it has read you. Nothing leaves your account, and nothing you write trains a model anyone else uses.", { style: s("Section 52"), color: "text", name: "Opener text" });
+    const reads = k.stack(voice, { width: 420, name: "Reads" });
+    for (const [name, what] of VOICE) {
+      rule(k, reads, "text");
+      const item = k.stack(reads, { gap: 6, padding: { top: 16, right: 0, bottom: 22, left: 0 }, name: "Read" });
+      k.text(item, name, { style: s("Voice 22"), color: "text", name: "Read name" });
+      k.text(item, what, { style: s("Body 17"), color: "onPaper", name: "Read text" });
+    }
+    const letter = k.stack(sheet, { gap: 28, name: "Letter" });
+    rule(k, letter, "text", { weight: 3 });
+    k.text(letter, "Letters", { style: s("Label 12"), color: "onPaper", name: "Letter label" });
+    k.text(letter, "\u201CI used to lose a Sunday to every proposal. Last month I sent nine, from the train, and seven came back signed. The fee tables are the part clients mention.\u201D", { style: s("Quote 44"), color: "text", name: "Quote" });
+    const by = k.stack(letter, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Byline" });
+    faceSlot(k, k.photo(by, 52, 52, { radius: 26, ground: "hairline", name: "Portrait" }), 52, 52, "onPaper");
+    k.text(by, "In\xE9s Carvalho, brand designer, Porto", { style: s("Proof 14"), color: "onPaper", name: "Writer" });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 48, align: "CENTER", fill: "primary", padding: 56, name: "Band" });
+    const pitch = k.stack(band, { gap: 12, name: "Band copy" });
+    k.text(pitch, "Three documents a month, free. $19 a month when the work picks up.", { style: s("Section 52"), color: "onPrimary", name: "Band title" });
+    k.text(pitch, "No seats, no credits, no word limits. Cancel from the same page you signed up on.", { style: s("Body 17"), color: "onPrimary", name: "Band text" });
+    k.instance(band, "Button paper", { Label: "Write your first one" }, { name: "Band button" });
+    footer(k, sheet, {
+      about: "Proposals, statements of work and follow-ups for people who would rather be doing the work.",
+      columns: [["Product", ["What it writes", "Your voice", "Pricing", "Changelog"]], ["Read", ["Sample proposal", "Fee table guide", "Letters"]], ["Company", ["About", "Privacy", "Contact"]]],
+      legal: "\xA9 2026 Longhand Writing Co. Set in Source Serif and Inter.",
+      brandStyle: s("Brand 22"),
+      headStyle: s("Foot head 14"),
+      linkStyle: s("Small 14"),
+      ruleColor: "text"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    respond(k, sheet, s, {
+      stack: ["Hero row", "Index", "Pair", "Voice", "Band", "Footer columns"],
+      stackMobile: ["Entry", "Dateline row"],
+      restyle: {
+        "Display 104": { laptop: "Display 88", tablet: "Display 60", mobile: "Display 42" },
+        "Section 52": { tablet: "Section 34", mobile: "Section 34" },
+        "Quote 44": { tablet: "Quote 26", mobile: "Quote 26" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Initial 132": { tablet: "Initial 84", mobile: "Initial 84" },
+        "Prompt 19": { mobile: "Prompt 16" },
+        "Draft title 30": { mobile: "Draft title 22" }
+      },
+      hide: { tablet: ["Readers"] },
+      typing: [{ text: "Prompt text", caret: "Caret", at: 1e3, duration: 1600 }],
+      gap: { tablet: 64, mobile: 56 },
+      tweak: (kit, id, size) => {
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        if (size === "laptop") {
+          each("Hero row", { itemSpacing: 48 });
+          each("Entry name", { width: 240 });
+          each("Margin note", { x: 470 });
+        }
+        if (size === "tablet") compactNav(kit, id, ["Your voice"]);
+        if (size === "tablet" || size === "mobile") {
+          each("Hero row", { itemSpacing: 40 });
+          each("Index", { itemSpacing: 28 });
+          each("Voice", { itemSpacing: 32 });
+          each("Band", { itemSpacing: 28, padding: { top: 36, right: 24, bottom: 36, left: 24 } });
+          each("Compare title", { layoutSizingHorizontal: "FILL" });
+          each("Margin note", { x: size === "tablet" ? 470 : 150 });
+        }
+        if (size === "mobile") {
+          each("Entry", { itemSpacing: 6 });
+          each("Entry time", { textAlign: "LEFT" });
+          each("Dateline row", { itemSpacing: 2 });
+          each("Prompt", { padding: { top: 20, right: 18, bottom: 20, left: 18 } });
+          each("Draft", { padding: { top: 22, right: 18, bottom: 24, left: 18 } });
+          each("Notes", { padding: { top: 24, right: 24, bottom: 24, left: 24 } });
+          each("Sent", { padding: { top: 24, right: 24, bottom: 24, left: 24 } });
+          each("Fee weeks", { visible: false });
+          each("Readers", { visible: false });
+          each("Aside", { padding: { top: 8, right: 0, bottom: 0, left: 0 } });
+          each("Opener", { itemSpacing: 12 });
+          each("Footer lists", { itemSpacing: 16 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  saas_ai_landing_default
+};