@popcraft/kit 0.29.0 → 0.31.0

package/dist/chunks/chunk-I6SREAEO.js

@@ -0,0 +1,282 @@
+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 {
+  KONTOR,
+  WEB_STEPS,
+  WEB_TYPE,
+  drawLine,
+  extend,
+  fitGrid,
+  fitRoute,
+  kontorWindow,
+  laneTable,
+  marquee,
+  routeMap,
+  rule,
+  swissBrand,
+  swissGrid,
+  weekLevels,
+  weekLine
+} from "./chunk-LTD3JYZQ.js";
+import {
+  portraitSlot
+} from "./chunk-UA7OECXL.js";
+import {
+  CONTENT,
+  compactNav,
+  footer,
+  respond,
+  typeScale
+} from "./chunk-DAF5SK5X.js";
+import {
+  buttons,
+  nav
+} from "./chunk-TF2MO3UA.js";
+import {
+  cutOn
+} from "./chunk-WV6ZTKE7.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-PVWIQ6SQ.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/style-swiss-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Swiss SaaS landing page";
+var DURATION = 6e3;
+var FLAG = 2400;
+var REROUTE = 3600;
+var GRID = { cols: 12, margin: 120, gutter: 24 };
+var GRIDS = { desktop: GRID, laptop: { cols: 12, margin: 80, gutter: 20 }, tablet: { cols: 8, margin: 48, gutter: 16 }, mobile: { cols: 4, margin: 20, gutter: 12 } };
+var SHIPPERS = ["Halde Outdoor", "Brenner Foods", "Vossberg K\xFChltechnik", "Lumen Pharma", "Atelier Rive", "Nordkap Textil"];
+var CHART = { h: 260 };
+var PLANS = [
+  ["Starter", "1 seat, 300 shipments a month", "Forecasts on 5 lanes", "$0"],
+  ["Team", "Up to 25 seats", "Every lane, rerouting, Slack alerts", `$${KONTOR.team} a seat`],
+  ["Network", "Unlimited seats", "Carrier API, SSO, audit log", `$${KONTOR.network} a seat`]
+];
+var cues = [
+  { layer: "Headline", preset: "words-in", at: 200, params: { duration: 700 } },
+  { layer: "Giant", preset: "slide-in", at: 0, params: { direction: "left", duration: 600 } },
+  cutOn("Station", 900, 120),
+  { layer: "Flag", preset: "slide-in", at: FLAG + 300, params: { direction: "left", duration: 360 } },
+  { layer: ["Lane head", "Late row", "Lane row"], preset: "slide-in", at: 500, stagger: { delay: 90, order: "selection" }, params: { direction: "left", duration: 360 } },
+  { layer: "Proof", preset: "slide-in", at: 900, stagger: { delay: 120, order: "selection" }, params: { direction: "up", duration: 420 } }
+];
+var counts = [
+  { layer: "Result figure", at: 1200, duration: 2400, counter: { from: KONTOR.before, to: KONTOR.after, decimals: 1, suffix: "%" } },
+  { layer: "Hero rate", at: REROUTE + 400, duration: 1200, counter: { from: 91.3, to: 98.4, decimals: 1, suffix: "%" } }
+];
+var style_swiss_landing_default = defineTemplate({
+  id: "web-saas-style-swiss-landing",
+  meta: {
+    name: NAME,
+    description: "A full landing page in the Swiss typographic style: a visible twelve-column grid, flush-left grotesque type with a giant 48h, numbered sections under black rules, white and one signal red. The hero plays the product on the page timeline (a route diagram drawing itself, the late stretch flagged in red, a rail reroute in dashes); under it a running band of customers, the route drawn large, a chart that draws with a counting figure, a ruled lane table, a customer quote with a photo slot, a plans table, a giant closing line and a footer. Desktop to phone",
+    category: "web",
+    tags: ["landing page", "saas", "swiss", "international typographic style", "grid", "minimal", "b2b", "analytics", "logistics", "hero", "diagram", "chart", "counter", "marquee", "testimonial", "pricing", "animation", "website", "responsive"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    swissBrand(k, { tagline: "Know which shipments will be late. Two days early." });
+    const s = typeScale(k, { ...WEB_TYPE });
+    buttons(k, { style: s("Button 16"), pad: [14, 22], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 120, { top: 28, right: 120, bottom: 56, left: 120 }, "paper", "MIN", "MIN");
+    k.patch(sheet, { layoutSizingVertical: "HUG", minHeight: 1024, clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    k.patch(sheet, { height: 7e3 });
+    swissGrid(k, sheet, GRID, { opacity: 0.08 });
+    const top = k.stack(sheet, { gap: 28, name: "Top" });
+    nav(k, top, { links: ["Product", "Pricing", "Customers", "Docs", "Sign in"], cta: "Start free", style: s("Nav 15"), brandStyle: s("Brand 20") });
+    const topRule = rule(k, top, "FILL", { weight: 3, name: "Top rule" });
+    const hero = k.stack(top, { direction: "HORIZONTAL", gap: 24, padding: { top: 36, right: 0, bottom: 0, left: 0 }, name: "Hero" });
+    const copy = k.stack(hero, { width: 488, gap: 28, name: "Copy" });
+    k.text(copy, "48h", { style: s("Giant 240"), color: "text", name: "Giant" });
+    const tag = k.stack(copy, { direction: "HORIZONTAL", width: "HUG", fill: "primary", padding: { top: 5, right: 10, bottom: 5, left: 10 }, name: "Tag" });
+    k.text(tag, `New in ${KONTOR.version}: ${KONTOR.feature}`, { style: s("Label 13"), color: "onPrimary", autoWidth: true, name: "Tag words" });
+    k.text(copy, "{{brand.tagline}}", { style: s("Display 52"), color: "text", name: "Headline" });
+    k.text(copy, "Kontor reads every carrier feed you already have and forecasts each shipment's arrival. When a lane is about to slip, you see it in time to reroute.", { style: s("Lead 20"), color: "onPaper", name: "Lead" });
+    const ctas = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "Ctas" });
+    k.instance(ctas, "Button", { Label: "Start free for 14 days" }, { name: "CTA primary" });
+    k.instance(ctas, "Button quiet", { Label: "Book a demo" }, { name: "CTA quiet" });
+    k.text(copy, KONTOR.trial, { style: s("Small 13"), color: "onPaper", name: "Terms" });
+    const w = kontorWindow(k, hero, { w: 688, h: 548, title: "Lanes, week 40", right: "Forecast 48 h", style: s("Ui 13"), bar: 48, pad: 24, gap: 18, name: "Hero window" });
+    k.patch(w.win, { layoutSizingHorizontal: "FILL" });
+    const kpis = k.stack(w.body, { direction: "HORIZONTAL", gap: 24, name: "Kpis" });
+    for (const [label, value, name] of [["Lane on time", "98.4%", "Hero rate"], ["Lanes", "1,240", "Lanes figure"], ["Flagged today", "3", "Flagged figure"]]) {
+      const c = k.stack(kpis, { gap: 4, width: "FILL", name: name === "Flagged figure" ? "Kpi flagged" : "Kpi" });
+      k.text(c, label, { style: s("Ui 13"), color: "cardMuted", name: "Kpi label" });
+      k.text(c, value, { style: s("Figure 40"), color: "onCard", name });
+    }
+    k.rect(w.body, "FILL", 2, "onCard", { name: "Kpi rule" });
+    const split = k.stack(w.body, { direction: "HORIZONTAL", gap: 24, name: "Split" });
+    const mapBox = k.stack(split, { width: 280, height: 300, name: "Map box" });
+    const map = routeMap(k, mapBox, { w: 280, h: 300, pad: 22, weight: 7, labels: s("Ui 13"), name: "Route", absolute: { x: 0, y: 0 } });
+    const flag = k.stack(mapBox, { direction: "HORIZONTAL", width: "HUG", fill: "late", padding: { top: 4, right: 8, bottom: 4, left: 8 }, name: "Flag", absolute: { x: 132, y: 44 } });
+    const flagWords = k.text(flag, `${KONTOR.shipment} +${KONTOR.slip} h`, { style: s("Ui 13"), color: "onPrimary", autoWidth: true, name: "Flag words" });
+    const table = k.stack(split, { name: "Table box" });
+    laneTable(k, table, { style: s("Ui 15"), head: s("Ui 13"), cols: [130], rowH: 50, show: ["lane", "forecast"] });
+    const band = k.stack(sheet, { gap: 0, name: "Band" });
+    const bandHead = k.stack(band, { direction: "HORIZONTAL", gap: 24, padding: { top: 0, right: 0, bottom: 14, left: 0 }, name: "Band head" });
+    k.text(bandHead, "Shipping on time with Kontor", { style: s("Label 13"), color: "text", name: "Band label" });
+    rule(k, band, "FILL", { weight: 2, name: "Band rule" });
+    marquee(k, band, { names: SHIPPERS, item: 300, height: 72, style: s("Brand 20"), duration: DURATION });
+    rule(k, band, "FILL", { weight: 2, name: "Band rule" });
+    const forecast = k.stack(sheet, { gap: 28, name: "Forecast" });
+    sectionHead(k, forecast, s, "01", "Forecast");
+    const fRow = k.stack(forecast, { direction: "HORIZONTAL", gap: 24, name: "Forecast row" });
+    const fCopy = k.stack(fRow, { width: 488, gap: 24, name: "Forecast copy" });
+    k.text(fCopy, "A late lane, two days before it is late.", { style: s("Section 36"), color: "text", name: "Forecast title" });
+    k.text(fCopy, "Kontor learns how every lane really runs: dwell at each hub, each carrier's habits, the weather on the Gotthard. Its forecast for KT-20417 said +31 hours on Monday. The truck reached Milano on Wednesday night, 31 hours late. The rail booking we suggested would have made it.", { style: s("Body 15"), color: "onPaper", name: "Forecast body" });
+    const proof = k.stack(fCopy, { direction: "HORIZONTAL", gap: 24, name: "Proofs" });
+    for (const [fig, label] of [["48 h", "warning before a slip"], ["38", "carrier feeds read"], ["2 min", "to reroute a shipment"]]) {
+      const c = k.stack(proof, { gap: 6, width: "FILL", name: "Proof" });
+      rule(k, c, "FILL", { weight: 2, name: "Proof rule" });
+      k.text(c, fig, { style: s("Section 30"), color: "text", name: "Proof figure" });
+      k.text(c, label, { style: s("Small 13"), color: "onPaper", name: "Proof label" });
+    }
+    const bigMap = routeMap(k, fRow, { w: 688, h: 480, pad: 40, weight: 16, labels: s("Lead 20"), ink: "text", late: "primary", ground: "paper", labelInk: "text", name: "Big route" });
+    const results = k.stack(sheet, { gap: 28, name: "Results" });
+    sectionHead(k, results, s, "02", "Results");
+    const rRow = k.stack(results, { direction: "HORIZONTAL", gap: 24, name: "Results row" });
+    const rCopy = k.stack(rRow, { width: 488, gap: 18, name: "Results copy" });
+    k.text(rCopy, "96.1%", { style: s("Figure 96"), color: "text", width: 488, name: "Result figure" });
+    k.text(rCopy, "of Halde Outdoor's shipments arrived on time in the quarter after Kontor went in, up from 87.4%. Same carriers and lanes; they simply knew sooner.", { style: s("Lead 20"), color: "onPaper", name: "Result body" });
+    const chart = k.stack(rRow, { gap: 12, name: "Chart" });
+    const chartW = CONTENT.desktop - 488 - 24;
+    const area = k.stack(chart, { height: CHART.h, name: "Chart area" });
+    k.vector(area, chartW, CHART.h, weekLevels(chartW, CHART.h), k.tint("ink", 0.18), { name: "Chart levels", absolute: { x: 0, y: 0 } });
+    k.rect(area, 2, CHART.h, "primary", { name: "Switch mark", absolute: { x: Math.round(chartW * 9 / 25), y: 0 } });
+    const line = k.vector(area, chartW, CHART.h, [weekLine(chartW, CHART.h)], [], { name: "Chart line", absolute: { x: 0, y: 0 }, stroke: { color: "ink", width: 4, cap: "NONE", join: "MITER" } });
+    rule(k, chart, "FILL", { weight: 2, name: "Chart base" });
+    const axis = k.stack(chart, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Chart axis" });
+    for (const a of ["Week 15", "Week 24, Kontor on", "Week 40"]) k.text(axis, a, { style: s("Small 13"), color: "onPaper", autoWidth: true, name: "Axis label" });
+    const lanes = k.stack(sheet, { gap: 28, name: "Lanes section" });
+    sectionHead(k, lanes, s, "03", "Lanes");
+    const lRow = k.stack(lanes, { direction: "HORIZONTAL", gap: 24, name: "Lanes row" });
+    const lCopy = k.stack(lRow, { width: 488, gap: 18, name: "Lanes copy" });
+    k.text(lCopy, "Every lane on one page, ranked by risk.", { style: s("Section 36"), color: "text", name: "Lanes title" });
+    k.text(lCopy, "Sort 1,240 lanes by what will slip this week. Open one to see each shipment, each carrier and the route options, then reroute without leaving the row.", { style: s("Body 15"), color: "onPaper", name: "Lanes body" });
+    const tWrap = k.stack(lRow, { fill: "card", padding: { top: 8, right: 24, bottom: 8, left: 24 }, name: "Lanes table" });
+    laneTable(k, tWrap, { style: s("Lead 17"), head: s("Label 13"), cols: [200, 160, 160], rowH: 56, name: "Big lanes" });
+    const quote = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, name: "Quote" });
+    const qSide = k.stack(quote, { width: 488, gap: 16, name: "Quote side" });
+    rule(k, qSide, "FILL", { weight: 3, name: "Quote rule" });
+    portraitSlot(k, qSide, 200, 240, { radius: 0, ground: "wash", skin: "track", top: "ink", halo: "ink", name: "Portrait", photo: "Customer photo" });
+    k.text(qSide, "Lena Brandt", { style: s("Ui 15"), color: "text", name: "Quote name" });
+    k.text(qSide, "Head of logistics, Halde Outdoor", { style: s("Small 13"), color: "onPaper", name: "Quote role" });
+    const qMain = k.stack(quote, { gap: 16, name: "Quote main" });
+    rule(k, qMain, "FILL", { weight: 3, name: "Quote rule" });
+    k.text(qMain, '"Kontor saw the Rotterdam backlog two days before our customers would have. We moved 212 pallets to rail and missed no delivery dates that week."', { style: s("Quote 34"), color: "text", name: "Quote words" });
+    const plans = k.stack(sheet, { gap: 28, name: "Plans" });
+    sectionHead(k, plans, s, "04", "Pricing");
+    const pt = k.stack(plans, { name: "Plan table" });
+    for (const [name, who, what, price] of PLANS) {
+      const row = k.stack(pt, { direction: "HORIZONTAL", gap: 24, align: "CENTER", padding: { top: 22, right: 0, bottom: 22, left: 0 }, name: "Plan row" });
+      k.text(row, name, { style: s("Section 26"), color: "text", width: 488, name: "Plan name" });
+      k.text(row, who, { style: s("Body 15"), color: "text", width: 220, name: "Plan who" });
+      k.text(row, what, { style: s("Body 15"), color: "onPaper", name: "Plan what" });
+      k.text(row, price, { style: s("Ui 15"), color: "text", width: 140, align: "RIGHT", name: "Plan price" });
+      rule(k, pt, "FILL", { weight: 1, name: "Plan rule" });
+    }
+    k.instance(plans, "Button quiet", { Label: "Compare plans" }, { name: "Plans link" });
+    const closing = k.stack(sheet, { gap: 28, name: "Close" });
+    rule(k, closing, "FILL", { weight: 3, name: "Close rule" });
+    k.text(closing, "Arrive on time.", { style: s("Giant 180"), color: "text", name: "Close title" });
+    const closeRow = k.stack(closing, { direction: "HORIZONTAL", gap: 20, align: "CENTER", wrap: true, name: "Close row" });
+    k.instance(closeRow, "Button", { Label: "Start free for 14 days" }, { name: "Close button" });
+    k.text(closeRow, "Connect your first carrier in ten minutes. No card.", { style: s("Body 15"), color: "onPaper", autoWidth: true, name: "Close line" });
+    footer(k, sheet, {
+      about: KONTOR.pitch,
+      legal: "\xA9 2026 {{brand.name}} GmbH, Basel. Forecasts are estimates; carriers remain carriers.",
+      columns: [["Product", ["Forecast", "Lanes", "Rerouting", "Carrier API"]], ["Company", ["Customers", "Pricing", "Careers", "Contact"]], ["Help", ["Docs", "Status", "Security"]]],
+      brandStyle: s("Brand 20"),
+      headStyle: s("Label 13"),
+      linkStyle: s("Small 13"),
+      ruleColor: "ink"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    extend(k, topRule, 0, 700);
+    const first = (root, name) => k.named(root, name)[0];
+    drawLine(k, first(map, "Road"), 600, 1400);
+    drawLine(k, first(map, "Late stretch"), FLAG, 500);
+    drawLine(k, first(map, "Rail"), REROUTE, 900);
+    drawLine(k, first(bigMap, "Road"), 300, 2e3);
+    drawLine(k, first(bigMap, "Late stretch"), FLAG, 600);
+    drawLine(k, first(bigMap, "Rail"), REROUTE, 1200);
+    drawLine(k, line, 900, 2700);
+    k.animate(flagWords, "text.content", [{ t: 0, v: `${KONTOR.shipment} +${KONTOR.slip} h`, ease: ease.hold }, { t: REROUTE + 900, v: `${KONTOR.shipment} by rail` }]);
+    for (const id of k.named(w.win, "Late forecast")) k.animate(id, "text.content", [{ t: 0, v: `+${KONTOR.slip} h`, ease: ease.hold }, { t: REROUTE + 900, v: "on time" }]);
+    respond(k, sheet, s, {
+      stack: ["Hero", "Forecast row", "Results row", "Lanes row", "Quote", "Footer columns", "Plan row"],
+      stackMobile: ["Proofs", "Split"],
+      restyle: { ...WEB_STEPS },
+      hide: { mobile: ["Nav links", "Kpi flagged"] },
+      gap: { tablet: 96, mobile: 72 },
+      tweak: (kit, id, size) => {
+        fitGrid(kit, id, GRIDS[size]);
+        const cw = CONTENT[size];
+        const narrow = size === "tablet" || size === "mobile";
+        const side = narrow ? cw : size === "laptop" ? 440 : 488;
+        for (const name of ["Copy", "Forecast copy", "Results copy", "Lanes copy", "Quote side"]) for (const n of kit.named(id, name)) kit.patch(n, narrow ? { layoutSizingHorizontal: "FILL" } : { width: side });
+        for (const n of kit.named(id, "Plan name")) kit.patch(n, narrow ? { layoutSizingHorizontal: "FILL" } : { width: side });
+        if (narrow) for (const n of kit.named(id, "Plan price")) kit.patch(n, { textAlign: "LEFT" });
+        if (narrow) for (const n of kit.named(id, "Plan row")) kit.patch(n, { itemSpacing: 6 });
+        for (const n of kit.named(id, "Result figure")) kit.patch(n, { width: narrow ? cw : side });
+        const restW = narrow ? cw : cw - side - 24;
+        fitRoute(kit, id, "Big route", restW, Math.round(restW * 0.7), { pad: size === "mobile" ? 24 : 40, weight: size === "mobile" ? 9 : 16 });
+        for (const n of kit.named(id, "Big route")) for (const st of kit.named(n, "Station")) kit.patch(st, { visible: false });
+        for (const n of kit.named(id, "Chart levels")) kit.patch(n, { width: restW, paths: weekLevels(restW, CHART.h) });
+        for (const n of kit.named(id, "Chart line")) kit.patch(n, { width: restW, paths: [weekLine(restW, CHART.h)] });
+        for (const n of kit.named(id, "Switch mark")) kit.patch(n, { x: Math.round(restW * 9 / 25) });
+        if (size === "tablet") compactNav(kit, id, ["Docs", "Sign in"], 20);
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Hero window")) kit.patch(n, { height: 520 });
+          for (const n of kit.named(id, "Table box")) kit.patch(n, { visible: false });
+          for (const n of kit.named(id, "Close line")) kit.patch(n, { visible: false });
+          for (const n of kit.named(id, "Map box")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const t of kit.named(id, "Big lanes")) for (const n of kit.named(t, "Lane cell")) kit.patch(n, { visible: false });
+          for (const n of kit.named(id, "Plan row")) kit.patch(n, { itemSpacing: 6 });
+          for (const n of kit.named(id, "Plan price")) kit.patch(n, { textAlign: "LEFT" });
+          for (const n of kit.named(id, "Proof")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+function sectionHead(k, parent, s, no, label) {
+  const head = k.stack(parent, { gap: 10, name: "Section head" });
+  const r = rule(k, head, "FILL", { weight: 3, name: "Section rule" });
+  const row = k.stack(head, { direction: "HORIZONTAL", gap: 24, name: "Section row" });
+  k.text(row, no, { style: s("Label 13"), color: "text", width: 100, name: "Section no" });
+  k.text(row, label, { style: s("Label 13"), color: "text", autoWidth: true, name: "Section label" });
+  extend(k, r, 300, 900);
+}
+
+export {
+  style_swiss_landing_default
+};

package/dist/chunks/chunk-I77QGBZH.js

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