@popcraft/kit 0.44.0 → 0.45.0

package/dist/chunks/chunk-KS4I66L3.js

@@ -0,0 +1,204 @@
+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 {
+  MOTIF,
+  boxed,
+  cabin,
+  cosyBrand,
+  knit,
+  lampOn,
+  plainRows,
+  repeatChart
+} from "./chunk-KPAVJJN3.js";
+import {
+  snow
+} from "./chunk-5M74IAAA.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-5OTEBTMU.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} 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/winter-cosy-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var LOOP = 8e3;
+var BOX = { w: 560, h: 620 };
+var SCALE = 0.5;
+var LAMP = 900;
+var SHIPPED = [
+  ["12 Jan", "Hibernation mode", "Pause the whole plan for up to 90 days at $0. Mail keeps arriving and is filed, unread, for the day you wake it."],
+  ["19 Jan", "Snooze until a date", "Put one thread, or one client, to sleep until a morning you pick. It comes back at the top, marked as new."],
+  ["27 Jan", "Focus hours", "Choose the hours you write in. Every ping is held, then handed over as one digest when they end."],
+  ["3 Feb", "An out-of-office that knows", "The auto-reply names the day you are back and who is covering, for each shared inbox."],
+  ["10 Feb", "Small things", "Faster search in long threads, a calmer dark theme, and 41 fixes nobody will notice."]
+];
+var PANEL = [
+  ["Wakes on", "Monday 3 March"],
+  ["Billing until then", "$0.00"],
+  ["Mail while asleep", "Filed, unread"],
+  ["Auto-reply", "\u201CBack on 3 March. Dana is covering.\u201D"]
+];
+var KNIT_COLS = 96;
+var KNIT_CELL = 13;
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 700 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 200, params: { duration: 700 } },
+  { layer: "Headline", preset: "blur-in", at: 250, params: { duration: 1e3, amount: 22 } },
+  { layer: "Visual", preset: "fade-in", at: 200, params: { duration: 800 } },
+  { layer: "Lead", preset: "rise-in", at: 800, params: { duration: 800 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1200, params: { duration: 700 }, stagger: { delay: 140 } },
+  { layer: "Proof", preset: "fade-in", at: 1900, params: { duration: 800 } },
+  { layer: "Fog", preset: "blur-in", at: 2400, params: { duration: 900, amount: 18 } },
+  { layer: "Glass note", preset: "typewriter", at: 3100, params: { duration: 1100 } },
+  { layer: "Track", preset: "fade-in", at: 3600, params: { duration: 260 }, stagger: { delay: 180 } }
+];
+var winter_cosy_landing_default = defineTemplate({
+  id: "web-winter-cosy-landing",
+  meta: {
+    name: "Winter cabin release landing page",
+    description: "A landing page for a winter release, written as a changelog to read by the fire: a hero where a log cabin stands in the snow at blue dusk and its desk lamp comes on, warm light lying across the drift while a fox\u2019s tracks come in print by print; a knitted Fair Isle band; the release as a dated, ruled list; a pause-your-plan feature (hibernation mode) shown as its own settings panel; and a slow-season rate \u2014 at desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["winter", "cosy", "cozy", "cabin", "snow", "landing page", "hero", "website", "saas", "changelog", "release notes", "hibernation", "pause plan", "slow season", "offer", "january", "knit", "animation", "responsive", "seasonal"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["changelog", "launch", "sale"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Winter cabin release landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    cosyBrand(k);
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 22", { ...SERIF, size: 22, fontWeight: 900, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Eyebrow 14", { size: 14, fontWeight: 700, letterSpacing: 4, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Display 84", { ...SERIF, size: 84, fontWeight: 900, letterSpacing: -3, lineHeight: 86 });
+    k.textStyle("Display 72", { ...SERIF, size: 72, fontWeight: 900, letterSpacing: -2.4, lineHeight: 74 });
+    k.textStyle("Display 60", { ...SERIF, size: 60, fontWeight: 900, letterSpacing: -1.8, lineHeight: 62 });
+    k.textStyle("Display 44", { ...SERIF, size: 44, fontWeight: 900, letterSpacing: -1.2, lineHeight: 48 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 32 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 27 });
+    k.textStyle("Proof 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Section 44", { ...SERIF, size: 44, fontWeight: 900, letterSpacing: -1.2, lineHeight: 50 });
+    k.textStyle("Section 32", { ...SERIF, size: 32, fontWeight: 900, letterSpacing: -0.8, lineHeight: 38 });
+    k.textStyle("Term 24", { ...SERIF, size: 24, fontWeight: 700, letterSpacing: -0.4, lineHeight: 30 });
+    k.textStyle("Body 18", { size: 18, fontWeight: 400, lineHeight: 29 });
+    k.textStyle("When 16", { ...MONO, size: 16, fontWeight: 700, lineHeight: 30 });
+    k.textStyle("Label 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Value 18", { size: 18, fontWeight: 600, lineHeight: 26 });
+    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Note 34", { ...SERIF, size: 34, fontWeight: 600, fontStyle: "italic", letterSpacing: -0.4, lineHeight: 40 });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 10 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 72, top: 28 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    nav(k, sheet, { links: ["Winter release", "Hibernation", "Pricing", "Changelog"], cta: "Open Burrow", style: "Nav 16", brandStyle: "Brand 22" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 26, name: "Copy" });
+    k.text(copy, "{{brand.name}} 4.2 \xB7 The winter release", { style: "Eyebrow 14", color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "A changelog to read by the fire.", { style: "Display 84", color: "text", name: "Headline" });
+    k.text(copy, "January is slow on purpose. This release lets your inbox be slow too: hibernate the plan, snooze a client until spring, and keep your mornings for the work. Five quiet changes, written up below.", { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Read the winter release" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Turn on hibernation" }, { name: "CTA quiet" });
+    k.text(copy, "no price change \xB7 nothing deleted \xB7 wake it in one click", { style: "Proof 15", color: "onPaper", name: "Proof" });
+    const holder = k.stack(hero, { width: BOX.w, height: BOX.h, name: "Visual holder" });
+    const visual = k.stack(holder, { width: BOX.w, height: BOX.h, fill: "card", radius: 24, clip: true, name: "Visual", absolute: { x: 0, y: 0 } });
+    snow(k, visual, { w: BOX.w, h: BOX.h, n: 30, u: 0.6, depth: "far", loopMs: LOOP, seed: 17 });
+    const scene = cabin(k, visual, { ...boxed({ w: BOX.w, h: BOX.h }, SCALE, -204), loopMs: LOOP, note: { text: "back 3 March", style: "Note 34" } });
+    snow(k, visual, { w: BOX.w, h: BOX.h, n: 9, u: 0.55, depth: "near", loopMs: LOOP, seed: 8 });
+    lampOn(k, scene, LAMP);
+    const shipped = k.stack(sheet, { gap: 0, padding: { top: 40, right: 0, bottom: 0, left: 0 }, name: "Shipped" });
+    const band = k.stack(shipped, { height: 9 * KNIT_CELL, radius: 10, clip: true, name: "Knit holder" });
+    knit(k, band, { cell: KNIT_CELL, chart: [...plainRows(1, KNIT_COLS, "r"), ...repeatChart(MOTIF.flake, KNIT_COLS), ...plainRows(1, KNIT_COLS, "r")], absolute: { x: 0, y: 0 } });
+    k.stack(shipped, { height: 48, name: "Gap" });
+    k.text(shipped, "What shipped while it snowed.", { style: "Section 44", color: "text", name: "Shipped title" });
+    k.stack(shipped, { height: 24, name: "Gap" });
+    for (const [when, what, how] of SHIPPED) {
+      k.rect(shipped, "FILL", 1, "accent", { name: "Rule", opacity: 0.5 });
+      const row = k.stack(shipped, { direction: "HORIZONTAL", gap: 28, padding: { top: 20, right: 0, bottom: 20, left: 0 }, name: "Entry" });
+      k.text(row, when, { style: "When 16", color: "onPaper", width: 110, name: "Entry date" });
+      k.text(row, what, { style: "Term 24", color: "text", width: 300, name: "Entry name" });
+      k.text(row, how, { style: "Body 18", color: "onPaper", name: "Entry how" });
+    }
+    k.rect(shipped, "FILL", 1, "accent", { name: "Rule", opacity: 0.5 });
+    const sleep = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", fill: "card", radius: 18, stroke: { color: "accent", width: 1 }, padding: 48, name: "Hibernation" });
+    const about = k.stack(sleep, { gap: 14, name: "Hibernation about" });
+    k.text(about, "Hibernation mode", { style: "Section 32", color: "onCard", name: "Hibernation title" });
+    k.text(about, "A studio of three does not need a shared inbox in the two weeks nobody writes to it. Switch the plan off for the quiet months and pay nothing. Nothing is deleted, nobody is logged out, and the first person back wakes it for everyone.", { style: "Body 18", color: "onCard", name: "Hibernation text" });
+    const panel = k.stack(sleep, { width: 500, gap: 0, name: "Panel" });
+    const head = k.stack(panel, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 0, right: 0, bottom: 16, left: 0 }, name: "Panel head" });
+    k.text(head, "Hibernate this plan", { style: "Term 24", color: "onCard", autoWidth: true, name: "Panel title" });
+    const toggle = k.stack(head, { direction: "HORIZONTAL", width: 58, height: 32, radius: 16, fill: "primary", justify: "MAX", align: "CENTER", padding: { top: 0, right: 4, bottom: 0, left: 4 }, name: "Toggle" });
+    k.ellipse(toggle, 24, "onPrimary", { name: "Toggle knob" });
+    for (const [label, value] of PANEL) {
+      k.rect(panel, "FILL", 1, "accent", { name: "Rule", opacity: 0.35 });
+      const row = k.stack(panel, { direction: "HORIZONTAL", gap: 20, padding: { top: 12, right: 0, bottom: 12, left: 0 }, name: "Panel row" });
+      k.text(row, label, { style: "Label 15", color: "cardMuted", width: 190, name: "Panel label" });
+      k.text(row, value, { style: "Value 18", color: "onCard", name: "Panel value" });
+    }
+    const offer = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", justify: "SPACE_BETWEEN", name: "Offer" });
+    const rate = k.stack(offer, { gap: 10, name: "Offer copy" });
+    k.text(rate, "The slow-season rate.", { style: "Section 44", color: "text", name: "Offer title" });
+    k.text(rate, "January and February are half price on every plan: $9 a seat, not $18. There is no code. It is on your next invoice already.", { style: "Body 18", color: "onPaper", name: "Offer text" });
+    k.instance(offer, "Button", { Label: "See the winter rate" }, { name: "Offer button" });
+    k.text(sheet, "\xA9 2026 Burrow Mail \xB7 Changelog \xB7 Security \xB7 Status", { style: "Small 14", color: "onPaper", name: "Footer" });
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Hibernation", "Offer"],
+      stackMobile: ["Entry", "Panel row"],
+      restyle: {
+        "Display 84": { laptop: "Display 72", tablet: "Display 60", mobile: "Display 44" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Section 44": { mobile: "Section 32" }
+      },
+      gap: { tablet: 60, mobile: 48 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 44, counterAxisAlignItems: "CENTER" });
+          for (const n of kit.named(id, "Hibernation")) kit.patch(n, { itemSpacing: 28, padding: { top: 32, right: 24, bottom: 32, left: 24 } });
+          for (const n of kit.named(id, "Panel")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "Offer")) kit.patch(n, { itemSpacing: 24 });
+          for (const n of kit.named(id, "Entry name")) kit.patch(n, { width: 230 });
+        }
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Entry")) kit.patch(n, { itemSpacing: 4 });
+          for (const n of kit.named(id, "Panel row")) kit.patch(n, { itemSpacing: 0 });
+        }
+        for (const n of kit.named(id, "Knit")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: KNIT_COLS * KNIT_CELL });
+        const s = size === "mobile" ? 335 / BOX.w : 1;
+        for (const n of kit.named(id, "Visual holder")) kit.patch(n, { layoutSizingHorizontal: "FIXED", layoutSizingVertical: "FIXED", width: Math.round(BOX.w * s), height: Math.round(BOX.h * s) });
+        for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: BOX.w, height: BOX.h, ...s === 1 ? {} : { anchorX: 0, anchorY: 0, scaleX: s, scaleY: s } });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  winter_cosy_landing_default
+};

package/dist/chunks/chunk-KSAA4B4U.js

@@ -0,0 +1,23 @@
+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 {
+  BARLEY_MOON
+} from "./chunk-47TBJOXD.js";
+import {
+  emailHeader
+} from "./chunk-KQOOXKQD.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/email/festival-presale-folk-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var festival_presale_folk_header_default = emailHeader(BARLEY_MOON);
+
+export {
+  festival_presale_folk_header_default
+};

package/dist/chunks/chunk-KTC5275A.js

@@ -0,0 +1,251 @@
+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 {
+  SITE_CONTENT,
+  SITE_LOOP,
+  SITE_RESTYLE,
+  artBox,
+  disc,
+  fitArt,
+  gridAt,
+  linkOut,
+  linkTo,
+  ruledRows,
+  section,
+  sectionHead,
+  shape,
+  siteType,
+  sway
+} from "./chunk-KWQXBJ2O.js";
+import {
+  SERIF
+} from "./chunk-5OTEBTMU.js";
+import {
+  compactNav
+} from "./chunk-QSBEDW52.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-IPGCJWVL.js";
+import {
+  box,
+  curve3,
+  poly,
+  pt3,
+  rng
+} from "./chunk-YKX2GS6X.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/everyday-hotel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Hotel and B&B website: coastal inn";
+var AW = 560;
+var AH = 600;
+var BOOK = "https://book.saltmarshhouse.example/rooms";
+var MAP = "https://maps.example.com/?q=Saltmarsh+House+Ocean+Avenue+Kennebunkport";
+var ROOMS = [
+  ["The Lookout", "King bed \xB7 sleeps 2 \xB7 sea view from the bed", "From $340 a night"],
+  ["The Boathouse", "Queen bed \xB7 sleeps 2 \xB7 its own porch on the dune", "From $295 a night"],
+  ["Two Lights", "King and a daybed \xB7 sleeps 3 \xB7 corner windows", "From $315 a night"],
+  ["The Loft", "Two queens \xB7 sleeps 4 \xB7 under the eaves, for families", "From $380 a night"]
+];
+var INCLUDED = [
+  ["Breakfast", "Cooked to order, 7:30 to 10", "Blueberry pancakes, eggs from the farm up the road, and coffee in the sunroom or on the porch."],
+  ["The beach", "Two minutes down the boardwalk", "Towels, chairs and an umbrella in the hall: take them, bring them back sandy."],
+  ["Bicycles", "Six, with baskets", "Free to borrow for the day. The village is a flat fifteen minutes along the shore road."],
+  ["Arrival", "Check in 3 pm, out 11 am", "We will keep your bags if you arrive early or leave late. Ask for a later check-out."],
+  ["Parking", "Free, behind the house", "One car a room. A charger for electric cars by the barn, for a small fee."],
+  ["Quiet", "No weddings, no events", "Eight rooms and a library. Children are welcome in the Loft and Two Lights."]
+];
+var ROUTES = [
+  ["By car", "From Portland, 35 minutes", "Route 1 south, then Ocean Avenue. Look for the blue gate after the lighthouse turn."],
+  ["By train", "The Downeaster to Wells", "Twenty minutes from the station; we can book you a taxi or collect you on request."],
+  ["By air", "Portland Jetport (PWM)", "Forty minutes by car. Boston Logan is an hour and forty."]
+];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Art", preset: "fade-in", at: 100, params: { duration: 900 } },
+  { layer: "Eyebrow", preset: "rise-in", at: 250, params: { duration: 600 } },
+  { layer: "Headline", preset: "blur-in", at: 350, params: { duration: 1e3, amount: 18 } },
+  { layer: "Lead", preset: "rise-in", at: 850, params: { duration: 700 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1150, params: { duration: 600 }, stagger: { delay: 140 } }
+];
+function sea(y, amp, n) {
+  const pts = Array.from({ length: n * 2 + 1 }, (_, i) => ({ x: -80 + (AW + 160) * i / (n * 2), y: y + (i % 2 ? -amp : amp) }));
+  return { closed: true, points: [...curve3(pts, 0.25).points, pt3(AW + 80, AH), pt3(-80, AH)] };
+}
+function gull(x, y, s) {
+  return [curve3([{ x: x - s, y }, { x: x - s / 2, y: y - s * 0.45 }, { x, y }], 0.3), curve3([{ x, y }, { x: x + s / 2, y: y - s * 0.45 }, { x: x + s, y }], 0.3)];
+}
+function coast(k, art) {
+  shape(k, art, [disc(110, 140, 46)], "sun", { name: "Sun" });
+  const far = shape(k, art, [sea(300, 3, 7)], "seaFar", { name: "Sea far" });
+  const near = shape(k, art, [sea(330, 5, 6)], "sea", { name: "Sea" });
+  sway(k, far, "translateX", 10, SITE_LOOP, 1);
+  sway(k, near, "translateX", 16, SITE_LOOP, 1, 0.5);
+  shape(k, art, [poly([[512, 300], [532, 300], [528, 236], [516, 236]])], "house", { name: "Lighthouse" });
+  shape(k, art, [box(514, 228, 16, 10)], "roof", { name: "Lighthouse lamp" });
+  shape(k, art, [{ closed: true, points: [pt3(-20, 420), { ...pt3(200, 360), handleIn: pt3(100, 380), handleOut: pt3(300, 344) }, { ...pt3(580, 400), handleIn: pt3(460, 360) }, pt3(580, 620), pt3(-20, 620)] }], "sand", { name: "Dune" });
+  shape(k, art, [box(150, 250, 210, 140), poly([[140, 252], [255, 170], [370, 252]])], "house", { name: "House" });
+  shape(k, art, [poly([[132, 256], [255, 162], [378, 256], [366, 262], [255, 178], [144, 262]])], "roof", { name: "Roof" });
+  shape(k, art, [box(360, 290, 110, 100), poly([[352, 292], [478, 292], [470, 270], [360, 270]])], "house", { name: "Wing" });
+  shape(k, art, [poly([[352, 292], [478, 292], [470, 268], [360, 268]])], "roof", { name: "Wing roof" });
+  shape(k, art, [box(305, 150, 20, 50)], "roof", { name: "Chimney" });
+  const boards = [];
+  for (let y = 262; y < 390; y += 10) boards.push(box(150, y, 210, 1.2), box(360, Math.max(y, 296), 110, 1.2));
+  shape(k, art, boards, "clap", { name: "Clapboard" });
+  const dark = [], lit = [];
+  [[176, 280], [236, 280], [296, 280], [176, 330], [296, 330], [384, 316], [430, 316], [244, 206]].forEach(([x, y], i) => (i === 1 || i === 5 ? lit : dark).push(box(x, y, 30, 36)));
+  shape(k, art, dark, "window", { name: "Windows" });
+  const glow = shape(k, art, lit, "lamp", { name: "Lit windows" });
+  sway(k, glow, "opacity", 0.08, SITE_LOOP, 1);
+  shape(k, art, [box(242, 330, 28, 60)], "door", { name: "Door" });
+  shape(k, art, [box(140, 386, 240, 10), box(140, 352, 6, 34), box(374, 352, 6, 34), box(140, 352, 240, 5)], "clap", { name: "Porch" });
+  const planks = [];
+  for (let i = 0; i < 9; i++) planks.push(poly([[250 + i * 4, 400 + i * 22], [290 + i * 10, 400 + i * 22], [292 + i * 10, 410 + i * 22], [250 + i * 4, 410 + i * 22]]));
+  shape(k, art, planks, "wood", { name: "Boardwalk" });
+  const r = rng(13);
+  for (const [x0, x1, y, h, ph] of [[0, 220, 470, 70, 0], [360, 560, 450, 60, 0.3], [20, 560, 580, 90, 0.6]]) {
+    const blades = [];
+    for (let x = x0; x < x1; x += 7 + r() * 6) {
+      const hh = h * (0.6 + r() * 0.5), lean = (r() - 0.3) * 18;
+      blades.push(curve3([{ x, y }, { x: x + lean * 0.4, y: y - hh * 0.5 }, { x: x + lean, y: y - hh }], 0.3));
+    }
+    const id = shape(k, art, blades, "grass", { name: "Beach grass", strokeWidth: 2.4 });
+    sway(k, id, "translateX", 2.5, SITE_LOOP, 2, ph);
+  }
+  ;
+  [[300, 90, 16, 0], [380, 120, 11, 0.4]].forEach(([x, y, s, ph]) => {
+    const id = shape(k, art, gull(x, y, s), "gull", { name: "Gull", strokeWidth: 2.5 });
+    sway(k, id, "translateX", 22, SITE_LOOP, 1, ph);
+    sway(k, id, "translateY", 6, SITE_LOOP, 2, ph);
+  });
+}
+var everyday_hotel_default = defineTemplate({
+  id: "web-everyday-hotel",
+  meta: {
+    name: NAME,
+    description: "A website for a small hotel or bed and breakfast. The hero is the house on its dune in the morning, with the sea rolling in behind, beach grass that sways and gulls drifting over. Then the rooms with a photo frame each, the bed, who it sleeps and the price from, a gallery of photo frames, what is included, where it is and how to get there with directions, and a footer. Every Book button links out to your own booking page. Desktop, laptop, tablet and phone",
+    category: "web",
+    tags: ["hotel", "b&b", "bed and breakfast", "inn", "guest house", "rooms", "gallery", "amenities", "location", "travel", "hospitality", "coast", "illustration", "book now", "animation", "responsive", "website", "small business"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["brand-intro"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F6F4EF", text: "#16263A", onPaper: "#4F5B69", primary: "#1D3B5C", onPrimary: "#F6F4EF", card: "#E4ECEF", onCard: "#16263A", cardMuted: "#4A5866", panel: "#16263A", onPanel: "#F6F4EF", panelMuted: "#BCC7D2", line: "#D7DADB" },
+      { name: "Saltmarsh House" }
+    );
+    k.palette({ sun: "#F4D58D", seaFar: "#8FB3C4", sea: "#4F7F99", sand: "#E8D9B8", house: "#FBFAF6", clap: "#D9DCD8", roof: "#56606A", window: "#3B4D5E", lamp: "#F6CF7A", door: "#1D3B5C", wood: "#A88A66", grass: "#8E9A5B", gull: "#3B4D5E" });
+    siteType(k, { ...SERIF, fontWeight: 600 });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 4 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 96, top: 28 });
+    k.timeline(sheet, { duration: SITE_LOOP, fps: 30 });
+    nav(k, sheet, { links: ["Rooms", "Gallery", "Included", "Getting here"], cta: "Book a room", style: "Nav 16", brandStyle: "Brand 22" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 24, name: "Copy" });
+    k.text(copy, "A BED AND BREAKFAST ON THE MAINE COAST", { style: "Kicker 13", color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "Eight rooms on the dune, two minutes from the sea.", { style: "Display 76", color: "text", name: "Headline" });
+    k.text(copy, "An 1890s sea captain\u2019s house at the end of Ocean Avenue in Kennebunkport, with breakfast cooked to order, bicycles to borrow and the beach at the bottom of the boardwalk.", { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const ctas = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    linkOut(k, k.instance(ctas, "Button", { Label: "Check dates and book" }, { name: "CTA primary" }), BOOK);
+    const seeRooms = k.instance(ctas, "Button quiet", { Label: "See the rooms" }, { name: "CTA quiet" });
+    k.text(copy, "Open April to December \xB7 Two-night minimum on weekends", { style: "Label 14", color: "onPaper", name: "Season" });
+    coast(k, artBox(k, hero, AW, AH, { radius: 4 }));
+    const rooms = section(k, sheet, "Rooms");
+    sectionHead(k, rooms, { kicker: "THE ROOMS", title: "Eight rooms, four of them on the sea", aside: "Every room has its own bathroom, a good bed, wool blankets, and no television. Prices include breakfast for two." });
+    const grid = k.stack(rooms, { direction: "HORIZONTAL", wrap: true, gap: 32, name: "Room grid" });
+    for (const [name, beds, price] of ROOMS) {
+      const card = k.stack(grid, { gap: 14, name: "Room" });
+      k.photo(card, 584, 380, { radius: 4, ground: "card", name: "Room photo" });
+      const line = k.stack(card, { direction: "HORIZONTAL", gap: 16, justify: "SPACE_BETWEEN", align: "CENTER", name: "Room line" });
+      const words = k.stack(line, { gap: 4, name: "Room words" });
+      k.text(words, name, { style: "Title 24", color: "text", name: "Room name" });
+      k.text(words, beds, { style: "Body 16", color: "onPaper", name: "Room beds" });
+      k.text(words, price, { style: "Label 14", color: "text", name: "Room price" });
+      linkOut(k, k.instance(line, "Button quiet", { Label: "Book" }, { name: "Room book" }), BOOK);
+    }
+    const gallery = section(k, sheet, "Gallery");
+    sectionHead(k, gallery, { kicker: "THE HOUSE", title: "Around the house and down the beach" });
+    const pics = k.stack(gallery, { direction: "HORIZONTAL", wrap: true, gap: 16, name: "Gallery grid" });
+    for (let i = 0; i < 6; i++) k.photo(pics, 389, 290, { radius: 4, ground: "card", name: "Gallery photo" });
+    const inc = section(k, sheet, "Included");
+    sectionHead(k, inc, { kicker: "WHAT IS INCLUDED", title: "Breakfast, bicycles and the beach" });
+    ruledRows(k, inc, INCLUDED, { name: "Included rows", labelWidth: 160 });
+    const here = section(k, sheet, "Getting here", { direction: "HORIZONTAL", gap: 64, fill: "panel", radius: 4, padding: 56 });
+    const where = k.stack(here, { gap: 20, name: "Where" });
+    sectionHead(k, where, { kicker: "GETTING HERE", title: "At the end of Ocean\xA0Avenue", ink: "onPanel", muted: "panelMuted" });
+    k.text(where, "Saltmarsh House, 212 Ocean Avenue, Kennebunkport, Maine 04046. Ten minutes on foot from Dock Square along the river.", { style: "Body 17", color: "panelMuted", name: "Address" });
+    const btns = k.stack(where, { direction: "HORIZONTAL", gap: 20, wrap: true, align: "CENTER", name: "Where buttons" });
+    linkOut(k, k.instance(btns, "Button", { Label: "Get directions" }, { name: "Directions" }), MAP);
+    const phone = k.text(btns, "(207) 555-0178", { style: "Button 16", color: "onPanel", autoWidth: true, name: "Phone" });
+    k.patch(phone, { semantics: { link: { kind: "tel", value: "+12075550178" } } });
+    ruledRows(k, here, ROUTES, { name: "Routes", labelWidth: 90, ink: "onPanel", muted: "panelMuted", rule: "panelMuted" });
+    const foot = k.stack(sheet, { gap: 8, padding: { top: 32, right: 0, bottom: 16, left: 0 }, name: "Footer" });
+    k.rect(foot, "FILL", 1, "line", { name: "Rule" });
+    k.text(foot, "{{brand.name}} \xB7 212 Ocean Avenue, Kennebunkport, Maine \xB7 Open April to December", { style: "Small 14", color: "onPaper", name: "Footer line" });
+    k.text(foot, "Bookings are made on our booking partner\u2019s site; its terms and cancellation policy apply.", { style: "Small 14", color: "onPaper", name: "Footer note" });
+    for (const b of k.named(sheet, "Nav button")) linkOut(k, b, BOOK);
+    const targets = { Rooms: rooms, Gallery: gallery, Included: inc, "Getting here": here };
+    for (const l of k.named(sheet, "Nav link")) linkTo(k, l, targets[k.node(l).characters]);
+    linkTo(k, seeRooms, rooms);
+    gridAt(k, sheet, { name: "Room grid", item: "Room", cols: 2, gap: 32, inside: SITE_CONTENT.desktop, photo: "Room photo", ratio: 0.62 });
+    gridAt(k, sheet, { name: "Gallery grid", item: "Gallery photo", cols: 3, gap: 16, inside: SITE_CONTENT.desktop, photo: "Gallery photo", ratio: 0.75 });
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Getting here"],
+      stackMobile: ["Row", "Room line"],
+      restyle: { ...SITE_RESTYLE },
+      gap: { tablet: 80, mobile: 64 },
+      tweak: (kit, id, size) => {
+        const inside = SITE_CONTENT[size];
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        if (size === "laptop") each("Hero", { itemSpacing: 48 });
+        if (size === "tablet" || size === "mobile") {
+          each("Hero", { itemSpacing: 40 });
+          each("Getting here", { itemSpacing: 32 });
+          each("Getting here", { padding: size === "mobile" ? { top: 32, right: 20, bottom: 32, left: 20 } : { top: 44, right: 40, bottom: 44, left: 40 } });
+        }
+        if (size === "tablet") compactNav(kit, id, ["Included", "Getting here"]);
+        if (size === "mobile") {
+          each("Row", { itemSpacing: 6 });
+          each("Room line", { itemSpacing: 12, counterAxisAlignItems: "MIN" });
+        }
+        fitArt(kit, id, AW, AH, inside);
+        gridAt(kit, id, { name: "Room grid", item: "Room", cols: size === "mobile" ? 1 : 2, gap: size === "mobile" ? 40 : 24, inside, photo: "Room photo", ratio: 0.62 });
+        gridAt(kit, id, { name: "Gallery grid", item: "Gallery photo", cols: size === "mobile" ? 2 : 3, gap: size === "mobile" ? 10 : 16, inside, photo: "Gallery photo", ratio: 0.75 });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  everyday_hotel_default
+};