@popcraft/kit 0.35.1 → 0.35.2

package/dist/chunks/chunk-SLXZCVLU.js

@@ -0,0 +1,312 @@
+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,
+  chalkLine,
+  disc,
+  fitArt,
+  linkOut,
+  linkTo,
+  section,
+  sectionHead,
+  shape,
+  siteType,
+  sway
+} from "./chunk-DA4HMB2I.js";
+import {
+  SERIF
+} from "./chunk-4DM3IHDI.js";
+import {
+  compactNav
+} from "./chunk-354CC3N2.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-I5MY7NSK.js";
+import {
+  box,
+  curve3,
+  poly,
+  pt3
+} from "./chunk-47NL7EPT.js";
+import {
+  defineTemplate
+} from "./chunk-76OE66SX.js";
+import {
+  Kit,
+  preset
+} from "./chunk-G63TLLXA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-APZ7CG5P.js";
+
+// templates/src/web/everyday-cafe.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Caf\xE9 website with menu and hours: neighbourhood bakery";
+var AW = 560;
+var AH = 600;
+var ORDER = "https://order.halfmooncafe.example/alder-street";
+var BOOK = "https://book.halfmooncafe.example/alder-street";
+var MAP = "https://maps.example.com/?q=412+Alder+Street+Portland";
+var MENU = [
+  ["Coffee and tea", "Beans from Roseline, roasted across the river", [
+    ["Espresso", "3.25", "A double, this month from Huila, Colombia: red apple and cocoa."],
+    ["Flat white", "4.75", "Whole milk from Garden Gate dairy, or oat at no extra."],
+    ["Filter, by the cup", "3.50", "Two single origins on the bar, refilled once for free."],
+    ["Chai", "5.00", "Our own blend, simmered with black pepper and honey."]
+  ]],
+  ["From the oven", "Baked here from 5 am; gone when it is gone", [
+    ["Morning bun", "4.50", "Laminated, rolled in orange sugar and cardamom. Out at seven."],
+    ["Almond croissant", "5.25", "Twice baked, with frangipane and toasted almonds."],
+    ["Seeded rye loaf", "9.00", "Forty per cent rye, three days in the making. Whole or half."],
+    ["Olive oil cake", "4.75", "A slice, with lemon and a crackle of sugar on top."]
+  ]],
+  ["Breakfast", "Until 11:30, every day we are open", [
+    ["Eggs on toast", "12.50", "Two soft-scrambled eggs on our rye, chives and cultured butter."],
+    ["The Halfmoon bowl", "14.00", "Rice, greens, a jammy egg, pickles and chilli crisp."],
+    ["Granola and yogurt", "9.50", "Toasted oats, honey, whatever fruit is good this week."]
+  ]],
+  ["Lunch", "From 11:30 until we run out", [
+    ["Soup of the day", "9.00", "With a thick slice of the seeded rye. Always one vegan."],
+    ["Ham and Gruy\xE8re", "13.50", "On a pressed baguette, with grainy mustard and pickles."],
+    ["Roast squash salad", "13.00", "Farro, feta, pumpkin seeds and a sherry dressing."]
+  ]]
+];
+var HOURS = [
+  ["Monday", "Closed"],
+  ["Tuesday to Friday", "7 am \u2013 3 pm"],
+  ["Saturday", "8 am \u2013 4 pm"],
+  ["Sunday", "8 am \u2013 2 pm"]
+];
+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: "rise-in", at: 350, params: { duration: 800 } },
+  { layer: "Lead", preset: "rise-in", at: 800, params: { duration: 700 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1100, params: { duration: 600 }, stagger: { delay: 140 } }
+];
+function scallops(x0, x1, y, n, depth) {
+  const w = (x1 - x0) / n, d = depth * 1.33;
+  const points = [pt3(x0, y - 30)];
+  for (let i = 0; i <= n; i++) {
+    const x = x0 + i * w;
+    points.push({ ...pt3(x, y), ...i > 0 ? { handleIn: pt3(x - w * 0.1, y + d) } : {}, ...i < n ? { handleOut: pt3(x + w * 0.1, y + d) } : {} });
+  }
+  points.push(pt3(x1, y - 30));
+  return { closed: true, points };
+}
+function shopfront(k, art) {
+  shape(k, art, [box(0, 0, AW, AH)], "wall", { name: "Wall" });
+  const tiles = [];
+  for (let i = 0; i * 28 < AW; i++) for (let j = 0; 520 + j * 28 < AH; j++) if ((i + j) % 2 === 0) tiles.push(box(i * 28, 520 + j * 28, 28, 28));
+  shape(k, art, [box(0, 520, AW, 80)], "tileLight", { name: "Tile base" });
+  shape(k, art, tiles, "tileDark", { name: "Tiles" });
+  shape(k, art, [box(30, 70, 500, 54)], "frame", { name: "Fascia" });
+  shape(k, art, chalkLine({ x: 50, y: 97 }, { x: 510, y: 97 }, 4, 1, 1), "cream", { name: "Fascia line", strokeWidth: 2, opacity: 0.5 });
+  const stripes = [];
+  for (let i = 0; i < 12; i++) if (i % 2 === 0) stripes.push(poly([[20 + i * 43.3, 128], [20 + (i + 1) * 43.3, 128], [6 + (i + 1) * 45.7, 186], [6 + i * 45.7, 186]]));
+  shape(k, art, [poly([[20, 128], [540, 128], [554, 186], [6, 186]])], "cream", { name: "Awning" });
+  shape(k, art, stripes, "awning", { name: "Awning stripes" });
+  const val = shape(k, art, [scallops(6, 554, 204, 12, 22)], "awning", { name: "Valance" });
+  sway(k, val, "translateY", 1.2, SITE_LOOP, 2);
+  shape(k, art, [box(0, 196, AW, 18)], "shade", { name: "Awning shadow", opacity: 0.18 });
+  shape(k, art, [box(40, 236, 330, 270)], "frame", { name: "Window frame" });
+  const glow = shape(k, art, [box(52, 248, 306, 246)], "glow", { name: "Window light" });
+  sway(k, glow, "opacity", 0.06, SITE_LOOP, 1);
+  shape(k, art, [box(52, 418, 306, 76)], "counter", { name: "Counter" });
+  shape(k, art, [box(84, 356, 96, 62), box(96, 342, 72, 14)], "steel", { name: "Espresso machine" });
+  shape(k, art, [box(100, 400, 14, 18), box(150, 400, 14, 18)], "cream", { name: "Machine cups" });
+  shape(k, art, [box(214, 404, 120, 14)], "frame", { name: "Tray" });
+  const buns = [];
+  for (let i = 0; i < 5; i++) buns.push(disc(228 + i * 23, 398, 11, 9));
+  shape(k, art, buns, "bun", { name: "Buns" });
+  const lamps = [], cords = [];
+  for (const x of [120, 280]) {
+    cords.push(box(x - 1, 248, 2, 40));
+    lamps.push(poly([[x - 18, 300], [x + 18, 300], [x + 10, 286], [x - 10, 286]]));
+  }
+  shape(k, art, cords, "frame", { name: "Lamp cords" });
+  shape(k, art, lamps, "awning", { name: "Lamps" });
+  shape(k, art, [box(52, 330, 306, 6), box(202, 248, 6, 246)], "frame", { name: "Glazing bars" });
+  shape(k, art, [poly([[70, 494], [150, 248], [180, 248], [100, 494]]), poly([[230, 494], [300, 248], [314, 248], [244, 494]])], "cream", { name: "Reflection", opacity: 0.18 });
+  shape(k, art, [box(30, 506, 350, 14)], "frame", { name: "Sill" });
+  shape(k, art, [poly([[300, 506], [326, 506], [323, 486], [303, 486]]), disc(330, 494, 6, 6)], "cream", { name: "Sill cup" });
+  for (let i = 0; i < 2; i++) {
+    const x = 309 + i * 9;
+    const wisp = shape(k, art, [curve3([{ x, y: 480 }, { x: x - 6, y: 466 }, { x: x + 4, y: 452 }, { x: x - 3, y: 438 }], 0.3)], "cream", { name: "Steam", strokeWidth: 3, opacity: 0.8 });
+    sway(k, wisp, "translateY", 4, SITE_LOOP, 2, i / 2);
+    sway(k, wisp, "opacity", 0.3, SITE_LOOP, 2, i / 2 + 0.25);
+  }
+  shape(k, art, [box(400, 236, 130, 284)], "frame", { name: "Door" });
+  shape(k, art, [box(414, 252, 102, 150)], "glow", { name: "Door glass" });
+  shape(k, art, [box(414, 414, 102, 92)], "awning", { name: "Door panel" });
+  shape(k, art, [box(500, 380, 6, 30)], "brass", { name: "Handle" });
+  shape(k, art, [box(430, 214, 120, 6)], "frame", { name: "Bracket" });
+  const sign = shape(k, art, [disc(500, 262, 34), box(497, 220, 2, 10)], "cream", { name: "Sign" });
+  const moon = shape(k, art, [disc(500, 262, 24)], "brass", { name: "Sign moon" });
+  const bite = shape(k, art, [disc(511, 257, 20)], "cream", { name: "Sign moon shade" });
+  for (const id of [sign, moon, bite]) {
+    k.patch(id, { anchorX: 0.5, anchorY: 0 });
+    sway(k, id, "rotation", 4, SITE_LOOP, 1);
+  }
+  shape(k, art, [poly([[360, 590], [392, 470], [404, 470], [372, 590]]), poly([[470, 590], [438, 470], [450, 470], [482, 590]])], "frame", { name: "Board legs" });
+  shape(k, art, [poly([[378, 488], [464, 488], [474, 566], [368, 566]])], "chalkboard", { name: "Board" });
+  shape(k, art, [...chalkLine({ x: 388, y: 506 }, { x: 452, y: 506 }, 7), ...chalkLine({ x: 386, y: 524 }, { x: 440, y: 524 }, 8), ...chalkLine({ x: 384, y: 542 }, { x: 456, y: 542 }, 9)], "chalk", { name: "Board chalk", strokeWidth: 2.5 });
+  shape(k, art, [poly([[20, 590], [64, 590], [58, 544], [26, 544]])], "pot", { name: "Pot" });
+  const herb = shape(k, art, [disc(32, 528, 16, 22), disc(52, 522, 14, 24), disc(42, 508, 12, 18)], "herb", { name: "Rosemary" });
+  sway(k, herb, "translateX", 1.5, SITE_LOOP, 1);
+}
+var everyday_cafe_default = defineTemplate({
+  id: "web-everyday-cafe",
+  meta: {
+    name: NAME,
+    description: "A website for a neighbourhood caf\xE9 and bakery. The hero is the shopfront in the morning: a teal awning with a scalloped edge, the window lit warm with the counter, the espresso machine and a tray of buns, a half-moon sign that swings, a chalk board on the pavement and a cup on the sill whose steam rises. Then the menu by part of the day with prices, the hours and the address with directions, the story with a photo frame, and buttons to order ahead and book a table that link out to your own ordering and booking pages. Desktop, laptop, tablet and phone",
+    category: "web",
+    tags: ["cafe", "caf\xE9", "coffee", "bakery", "restaurant", "menu", "hours", "location", "small business", "shopfront", "illustration", "order ahead", "book a table", "animation", "responsive", "website"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["menu", "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: "#F5EDE0", text: "#2A211B", onPaper: "#65554A", primary: "#1F4D4A", onPrimary: "#F8F1E5", card: "#FFF9EF", onCard: "#2A211B", cardMuted: "#6B5B4F", panel: "#2A211B", onPanel: "#F5EDE0", panelMuted: "#CDBFAE", line: "#DCCFBC" },
+      { name: "Halfmoon" }
+    );
+    k.palette({ wall: "#EADBC4", tileLight: "#F3EADB", tileDark: "#1F4D4A", frame: "#2A2622", cream: "#FBF4E8", awning: "#1F4D4A", shade: "#2A211B", glow: "#F7D79A", counter: "#8C5A3C", steel: "#B9BDBA", bun: "#D99A4E", brass: "#D3A445", chalkboard: "#33393A", chalk: "#F1EEE6", pot: "#B85C3C", herb: "#5E7A55" });
+    siteType(k, { ...SERIF, fontWeight: 700 });
+    k.textStyle("Price 17", { size: 17, fontWeight: 700, lineHeight: 26, fontFeatures: { tnum: 1 } });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 8 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 96, top: 28 });
+    k.timeline(sheet, { duration: SITE_LOOP, fps: 30 });
+    nav(k, sheet, { links: ["Menu", "Hours", "Our story"], cta: "Order ahead", 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, "COFFEE, BAKERY AND LUNCH \xB7 412 ALDER STREET", { style: "Kicker 13", color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "Morning buns at seven. Soup by noon.", { style: "Display 76", color: "text", name: "Headline" });
+    k.text(copy, "A small caf\xE9 and bakery on the corner of Alder and 9th. We bake everything here from five in the morning, pull Roseline coffee all day and close when the bread runs out.", { 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: "Order ahead for pick-up" }, { name: "CTA primary" }), ORDER);
+    linkOut(k, k.instance(ctas, "Button quiet", { Label: "Book a table" }, { name: "CTA quiet" }), BOOK);
+    k.text(copy, "Open today from 7 am \xB7 Closed Mondays", { style: "Label 14", color: "onPaper", name: "Open now" });
+    shopfront(k, artBox(k, hero, AW, AH, { radius: 20 }));
+    const menu = section(k, sheet, "Menu");
+    sectionHead(k, menu, { kicker: "THE MENU", title: "What is on the counter", aside: "Prices in dollars, tax included. Tell us about allergies: almost everything can be made without nuts." });
+    const groups = k.stack(menu, { direction: "HORIZONTAL", wrap: true, gap: 56, name: "Menu groups" });
+    for (const [title, note, items] of MENU) {
+      const g = k.stack(groups, { gap: 0, name: "Menu group" });
+      k.text(g, title, { style: "Section 34", color: "text", name: "Menu title" });
+      k.text(g, note, { style: "Small 14", color: "onPaper", name: "Menu note" });
+      k.stack(g, { height: 14, name: "Gap" });
+      for (const [item, price, what] of items) {
+        k.rect(g, "FILL", 1, "line", { name: "Rule" });
+        const it = k.stack(g, { gap: 4, padding: { top: 14, right: 0, bottom: 14, left: 0 }, name: "Menu item" });
+        const top = k.stack(it, { direction: "HORIZONTAL", gap: 16, justify: "SPACE_BETWEEN", align: "CENTER", name: "Item line" });
+        k.text(top, item, { style: "Title 20", color: "text", name: "Item name" });
+        k.text(top, price, { style: "Price 17", color: "text", autoWidth: true, name: "Item price" });
+        k.text(it, what, { style: "Body 16", color: "onPaper", name: "Item note" });
+      }
+    }
+    const visit = section(k, sheet, "Hours", { direction: "HORIZONTAL", gap: 64, fill: "panel", radius: 24, padding: 56 });
+    const where = k.stack(visit, { gap: 20, name: "Where" });
+    sectionHead(k, where, { kicker: "HOURS AND WHERE TO FIND US", title: "On the corner of Alder\xA0and\xA09th", ink: "onPanel", muted: "panelMuted" });
+    k.text(where, "412 Alder Street, Portland, OR 97205. Two minutes from the Alder Street streetcar stop; bike racks out front; step-free through the side door on 9th.", { style: "Body 17", color: "panelMuted", name: "Address" });
+    const visitBtns = k.stack(where, { direction: "HORIZONTAL", gap: 20, wrap: true, align: "CENTER", name: "Visit buttons" });
+    linkOut(k, k.instance(visitBtns, "Button", { Label: "Get directions" }, { name: "Directions" }), MAP);
+    const phone = k.text(visitBtns, "(503) 555-0142", { style: "Button 16", color: "onPanel", autoWidth: true, name: "Phone" });
+    k.patch(phone, { semantics: { link: { kind: "tel", value: "+15035550142" } } });
+    const hours = k.stack(visit, { gap: 0, width: 440, name: "Hours table" });
+    for (const [day, time] of HOURS) {
+      k.rect(hours, "FILL", 1, "panelMuted", { name: "Rule", opacity: 0.4 });
+      const r = k.stack(hours, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", padding: { top: 16, right: 0, bottom: 16, left: 0 }, name: "Hours row" });
+      k.text(r, day, { style: "Body 17", color: "onPanel", autoWidth: true, name: "Day" });
+      k.text(r, time, { style: "Price 17", color: "onPanel", autoWidth: true, name: "Time" });
+    }
+    k.rect(hours, "FILL", 1, "panelMuted", { name: "Rule", opacity: 0.4 });
+    k.text(hours, "Holiday hours are posted on the door and on our Instagram, @halfmoonalder.", { style: "Small 14", color: "panelMuted", name: "Hours note" });
+    const story = section(k, sheet, "Our story", { direction: "HORIZONTAL", gap: 72, align: "CENTER" });
+    const storyCopy = k.stack(story, { gap: 20, name: "Story copy" });
+    sectionHead(k, storyCopy, { kicker: "OUR STORY", title: "A bakery that started in a home oven" });
+    k.text(storyCopy, "Maya Okafor baked her first morning buns for the farmers\u2019 market in 2016, twelve at a time, in a flat with one oven and no counter space. They sold out by nine every Saturday.", { style: "Body 17", color: "onPaper", name: "Story text" });
+    k.text(storyCopy, "In 2021 the old shoe repair shop on Alder came up for rent. We kept the tiles, painted the front, and bought an oven that does three hundred at once. It is still not enough on a Saturday.", { style: "Body 17", color: "onPaper", name: "Story text" });
+    k.photo(story, 480, 400, { radius: 20, ground: "card", name: "Story photo" });
+    const act = section(k, sheet, "Order and book", { direction: "HORIZONTAL", gap: 24 });
+    for (const [title, text, label, url, quiet] of [
+      ["Order ahead", "Order on your phone and pick it up at the side window: no queue. Ready in about ten minutes; buns and bread can be ordered the day before.", "Order for pick-up", ORDER, false],
+      ["Book a table", "Walk-ins always welcome. For six or more, or for a birthday breakfast, book a table and we will have it ready.", "Book a table", BOOK, true]
+    ]) {
+      const b = k.stack(act, { gap: 14, padding: 36, radius: 20, fill: "paper", stroke: { color: "line", width: 1.5, align: "INSIDE" }, name: "Action" });
+      k.text(b, title, { style: "Title 24", color: "text", name: "Action title" });
+      k.text(b, text, { style: "Body 16", color: "onPaper", name: "Action text" });
+      linkOut(k, k.instance(b, quiet ? "Button quiet" : "Button", { Label: label }, { name: "Action button" }), url);
+    }
+    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 412 Alder Street, Portland \xB7 Tuesday to Sunday \xB7 @halfmoonalder", { style: "Small 14", color: "onPaper", name: "Footer line" });
+    k.text(foot, "Orders and bookings are taken by our ordering and booking partners; their terms apply.", { style: "Small 14", color: "onPaper", name: "Footer note" });
+    for (const b of k.named(sheet, "Nav button")) linkOut(k, b, ORDER);
+    for (const l of k.named(sheet, "Nav link")) {
+      const n = k.node(l);
+      const to = n.characters === "Menu" ? menu : n.characters === "Hours" ? visit : story;
+      linkTo(k, l, to);
+    }
+    for (const c of k.named(sheet, "Menu group")) k.patch(c, { layoutSizingHorizontal: "FIXED", width: Math.floor((SITE_CONTENT.desktop - 56) / 2) });
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Hours", "Our story", "Order and book"],
+      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 });
+          each("Our story", { itemSpacing: 48 });
+          each("Hours table", { width: 400 });
+        }
+        if (size === "tablet" || size === "mobile") {
+          each("Hero", { itemSpacing: 40 });
+          each("Our story", { itemSpacing: 36 });
+          each("Hours", { itemSpacing: 36 });
+          each("Hours table", { layoutSizingHorizontal: "FILL" });
+          each("Hours", { 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, []);
+        if (size === "mobile") each("Action", { padding: { top: 26, right: 22, bottom: 26, left: 22 } });
+        fitArt(kit, id, AW, AH, inside);
+        const cols = size === "mobile" ? 1 : 2;
+        for (const c of kit.named(id, "Menu group")) kit.patch(c, { layoutSizingHorizontal: "FIXED", width: Math.floor((inside - 56 * (cols - 1)) / cols) });
+        each("Menu groups", { itemSpacing: size === "mobile" ? 48 : 40, counterAxisSpacing: size === "mobile" ? 48 : 56 });
+        const ph = size === "mobile" ? [335, 280] : size === "tablet" ? [672, 440] : [440, 380];
+        for (const p of kit.named(id, "Story photo")) {
+          kit.patch(p, { width: ph[0], height: ph[1] });
+          for (const c of kit.node(p).childIds) kit.patch(c, { width: ph[0], height: ph[1] });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  everyday_cafe_default
+};

package/dist/chunks/chunk-SMIR4OMT.js

@@ -0,0 +1,231 @@
+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 {
+  calendar,
+  calendarSize,
+  giftTag,
+  hills,
+  holidayBrand,
+  lights,
+  openDoor,
+  parcels
+} from "./chunk-CWNBOTVH.js";
+import {
+  snow
+} from "./chunk-3QVOF5AJ.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-4DM3IHDI.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-I5MY7NSK.js";
+import {
+  defineTemplate
+} from "./chunk-76OE66SX.js";
+import {
+  Kit,
+  preset
+} from "./chunk-G63TLLXA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-APZ7CG5P.js";
+
+// templates/src/web/winter-holidays-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var LOOP = 8e3;
+var BOX = { w: 560, h: 620 };
+var TAG = 335;
+var CALENDAR = {
+  cols: 4,
+  w: 108,
+  h: 114,
+  gap: 9,
+  pad: 12,
+  u: 0.62,
+  title: "Twelve days of {{brand.name}}",
+  styles: { num: "Door 28", title: "Board title 14" },
+  // At rest (the still) five doors stand open; the timeline starts them all shut.
+  open: [1, 4, 7, 9, 12],
+  doors: [
+    { n: 7, icon: "heart" },
+    { n: 2, icon: "star" },
+    { n: 11, icon: "candle" },
+    { n: 4, icon: "receipt" },
+    { n: 9, icon: "tree" },
+    { n: 1, icon: "envelope" },
+    { n: 6, icon: "mug" },
+    { n: 12, icon: "gift" },
+    { n: 3, icon: "star" },
+    { n: 10, icon: "mug" },
+    { n: 5, icon: "candle" },
+    { n: 8, icon: "heart" }
+  ]
+};
+var opens = (n) => 1400 + (n - 1) * 330;
+var TERMS = [
+  ["It arrives when you say.", "Pick a date and write a few words. We send the gift by email that morning, with your name on the tag."],
+  ["They do not need a card.", "A full year of Fennel Solo starts the day they open it: invoices, receipts, bank feeds and tax set aside."],
+  ["Already a customer?", "The gift adds twelve months to the plan they have. Nothing is lost and nothing renews by surprise."],
+  ["Unopened by 31 January?", "We refund you in full, and we tell nobody."]
+];
+var HOURS = [
+  ["20 Dec \u2013 2 Jan", "Code freeze. Nothing ships, so nothing breaks while you are away."],
+  ["24 \u2013 26 Dec", "Support is closed. A billing emergency still pages a human."],
+  ["27 \u2013 30 Dec", "10:00 to 16:00 UTC. Replies within one working day."],
+  ["31 Dec \u2013 1 Jan", "Closed."],
+  ["From 2 Jan", "Back to replies within four hours."]
+];
+var cues = [
+  { layer: "Offer bar", preset: "drop-in", at: 0, params: { duration: 600 } },
+  { layer: "Nav", preset: "fade-in", at: 100, params: { duration: 700 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 300, params: { duration: 700 } },
+  { layer: "Headline", preset: "blur-in", at: 350, params: { duration: 1e3, amount: 22 } },
+  { layer: "Visual", preset: "fade-in", at: 300, params: { duration: 800 } },
+  { layer: "Lead", preset: "rise-in", at: 900, params: { duration: 800 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1300, params: { duration: 700 }, stagger: { delay: 140 } },
+  { layer: "Proof", preset: "fade-in", at: 2e3, params: { duration: 800 } },
+  { layer: "Bow", preset: "wobble", at: opens(12), params: { duration: 900 } }
+];
+var winter_holidays_landing_default = defineTemplate({
+  id: "web-winter-holidays-landing",
+  meta: {
+    name: "Holiday gift-a-plan landing page",
+    description: "A holiday landing page for a SaaS that can be given as a gift: a bar with the last sending date, a hero where a paper advent calendar stands in the snow and its twelve wrapped doors swing open in turn under a string of bulbs; the gift written out as its own gift tag beside what the giver needs to know, as a ruled list; the holiday support hours and code freeze as a plain timetable; and a year-end thank-you \u2014 at desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["holiday", "winter", "landing page", "hero", "website", "saas", "gift", "gift a plan", "advent calendar", "support hours", "code freeze", "thank you", "snow", "animation", "responsive", "seasonal", "serif"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["sale", "announcement", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Holiday gift-a-plan landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    holidayBrand(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("Bar 15", { size: 15, fontWeight: 700, lineHeight: 22, textAlign: "CENTER" });
+    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: 84 });
+    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: 29 });
+    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Door 28", { ...SERIF, size: 28, fontWeight: 900, letterSpacing: -0.6, lineHeight: 30 });
+    k.textStyle("Board title 14", { size: 14, fontWeight: 700, letterSpacing: 2.6, lineHeight: 18, textCase: "UPPER" });
+    k.textStyle("Tag label 14", { ...MONO, size: 14, fontWeight: 700, letterSpacing: 2, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Tag name 30", { ...SERIF, size: 30, fontWeight: 700, letterSpacing: -0.6, lineHeight: 36 });
+    k.textStyle("Tag note 18", { ...SERIF, size: 18, fontWeight: 400, lineHeight: 28, fontStyle: "italic" });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 8 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 72, top: 24 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    const bar = k.stack(sheet, { fill: "primary", radius: 8, padding: { top: 10, right: 20, bottom: 10, left: 20 }, align: "CENTER", name: "Offer bar" });
+    k.text(bar, "Gift a year of {{brand.name}} Solo for $96. Order by 23 December and it lands on the morning you choose.", { style: "Bar 15", color: "onPrimary", name: "Offer bar text" });
+    nav(k, sheet, { links: ["Gift a plan", "Holiday hours", "Pricing", "Changelog"], cta: "Gift a year", 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}} \xB7 Holiday gifting", { style: "Eyebrow 14", color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "Give a freelancer their Sundays back.", { style: "Display 84", color: "text", name: "Headline" });
+    k.text(copy, "A year of Fennel sends the invoices, reads the receipts and sets the tax aside, so the designer, translator or plumber you are thinking of stops doing the books on a Sunday night. Wrap it in two minutes; they open it by email.", { 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: "Gift a year: $96" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "See what is inside" }, { name: "CTA quiet" });
+    k.text(copy, "no card for them \xB7 full refund if unopened by 31 January", { 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 } });
+    lights(k, visual, { w: BOX.w, y: 10, u: 0.62, swags: 2, loopMs: LOOP });
+    snow(k, visual, { w: BOX.w, h: BOX.h, n: 46, u: 0.62, depth: "far", loopMs: LOOP });
+    hills(k, visual, { w: BOX.w, h: BOX.h, top: 556, u: 0.6 });
+    const size = calendarSize(CALENDAR);
+    const wall = calendar(k, visual, CALENDAR, { absolute: { x: Math.round((BOX.w - size.w) / 2), y: 86 } });
+    parcels(k, visual, { x: 352, base: 616, u: 0.46 });
+    snow(k, visual, { w: BOX.w, h: BOX.h, n: 16, u: 0.62, depth: "near", loopMs: LOOP });
+    for (const d of CALENDAR.doors) openDoor(k, wall, d.n, opens(d.n), 480);
+    const gift = k.stack(sheet, { direction: "HORIZONTAL", gap: 80, align: "CENTER", padding: { top: 60, right: 0, bottom: 0, left: 0 }, name: "Gift" });
+    const tagHolder = k.stack(gift, { width: TAG, name: "Tag holder" });
+    giftTag(k, tagHolder, { w: TAG, u: 1, to: "Maya, who still invoices from a spreadsheet", from: "You", note: "A year of Fennel Solo. It starts the day you open it, not the day I paid. Merry everything.", styles: { label: "Tag label 14", name: "Tag name 30", note: "Tag note 18" } });
+    const terms = k.stack(gift, { gap: 0, name: "Terms" });
+    k.text(terms, "A year of {{brand.name}}, wrapped.", { style: "Section 44", color: "text", name: "Terms title" });
+    k.stack(terms, { height: 24, name: "Gap" });
+    for (const [term, how] of TERMS) {
+      k.rect(terms, "FILL", 1, "accent", { name: "Rule", opacity: 0.5 });
+      const row = k.stack(terms, { direction: "HORIZONTAL", gap: 28, padding: { top: 20, right: 0, bottom: 20, left: 0 }, name: "Term" });
+      k.text(row, term, { style: "Term 24", color: "text", width: 280, name: "Term name" });
+      k.text(row, how, { style: "Body 18", color: "onPaper", name: "Term how" });
+    }
+    k.rect(terms, "FILL", 1, "accent", { name: "Rule", opacity: 0.5 });
+    const hours = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, fill: "card", radius: 16, stroke: { color: "accent", width: 1 }, padding: 48, name: "Hours" });
+    const about = k.stack(hours, { width: 360, gap: 12, name: "Hours about" });
+    k.text(about, "Holiday hours", { style: "Section 32", color: "onCard", name: "Hours title" });
+    k.text(about, "There are six of us and we are taking the week off properly. Here is exactly when someone answers.", { style: "Body 18", color: "onCard", name: "Hours text" });
+    const table = k.stack(hours, { gap: 0, name: "Timetable" });
+    HOURS.forEach(([when, what], i) => {
+      if (i) k.rect(table, "FILL", 1, "accent", { name: "Rule", opacity: 0.35 });
+      const row = k.stack(table, { direction: "HORIZONTAL", gap: 24, padding: { top: 12, right: 0, bottom: 12, left: 0 }, name: "Hour row" });
+      k.text(row, when, { style: "When 16", color: "onCard", width: 190, name: "When" });
+      k.text(row, what, { style: "Body 18", color: "onCard", name: "What" });
+    });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", justify: "SPACE_BETWEEN", name: "Band" });
+    const thanks = k.stack(band, { gap: 10, name: "Band copy" });
+    k.text(thanks, "Thank you for a good year.", { style: "Section 44", color: "text", name: "Band title" });
+    k.text(thanks, "You sent 41,208 invoices through Fennel this year and were paid nine days sooner on average. See you on the second of January.", { style: "Body 18", color: "onPaper", name: "Band text" });
+    k.instance(band, "Button", { Label: "Gift a year: $96" }, { name: "Band button" });
+    k.text(sheet, "\xA9 2026 Fennel Books \xB7 Holiday hours \xB7 Security \xB7 Status", { style: "Small 14", color: "onPaper", name: "Footer" });
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Gift", "Hours", "Band"],
+      stackMobile: ["Term", "Hour 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, size2) => {
+        if (size2 === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
+        if (size2 === "tablet" || size2 === "mobile") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 44, counterAxisAlignItems: "CENTER" });
+          for (const n of kit.named(id, "Gift")) kit.patch(n, { itemSpacing: 44, counterAxisAlignItems: "CENTER", padding: { top: 80, right: 0, bottom: 0, left: 0 } });
+          for (const n of kit.named(id, "Hours")) kit.patch(n, { itemSpacing: 24, padding: { top: 32, right: 24, bottom: 32, left: 24 } });
+          for (const n of kit.named(id, "Hours about")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+          for (const n of kit.named(id, "Band")) kit.patch(n, { itemSpacing: 24 });
+        }
+        if (size2 === "mobile") {
+          for (const n of kit.named(id, "Term")) kit.patch(n, { itemSpacing: 6 });
+          for (const n of kit.named(id, "Hour row")) kit.patch(n, { itemSpacing: 2 });
+        }
+        for (const name of ["Tag holder", "Gift tag"]) for (const n of kit.named(id, name)) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: TAG });
+        const s = size2 === "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_holidays_landing_default
+};

package/dist/chunks/chunk-SN2GFOOB.js

@@ -0,0 +1,85 @@
+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 {
+  safePadding
+} from "./chunk-R53OQUOJ.js";
+import {
+  defineTemplate
+} from "./chunk-76OE66SX.js";
+import {
+  Kit,
+  preset
+} from "./chunk-G63TLLXA.js";
+import {
+  ease
+} from "./chunk-NY6HUCBI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-APZ7CG5P.js";
+
+// templates/src/motion/stat-pop.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var stat_pop_default = defineTemplate({
+  id: "motion-stat-pop",
+  meta: {
+    name: "Stat pop",
+    description: "Three stat cards pop in one after another under a bouncing title \u2014 a year-in-review or launch-numbers post that plays",
+    category: "animation",
+    tags: ["animation", "stats", "data", "instagram"],
+    platforms: ["instagram", "linkedin", "tiktok"],
+    formats: ["portrait-post", "story"],
+    useCases: ["stats", "report"],
+    created: "2026-09-28",
+    updated: "2026-09-28"
+  },
+  build() {
+    const k = new Kit("Stat pop", preset("ig-portrait"));
+    k.brand({ text: "#101828", accent: "#2F6BFF", paper: "#F5F7FB", card: "#FFFFFF", onCard: "#2F6BFF", muted: "#5B6474" }, { title: "Our year in numbers", handle: "@northwind" });
+    k.textStyle("Title 72", { size: 72, fontWeight: 800, letterSpacing: -2, lineHeight: 80, textAlign: "CENTER" });
+    k.textStyle("Handle 28", { size: 28, fontWeight: 600, letterSpacing: 1, lineHeight: 36, textAlign: "CENTER" });
+    k.textStyle("Figure 120", { size: 120, fontWeight: 800, letterSpacing: -4, lineHeight: 128 });
+    k.textStyle("Label 36", { size: 36, fontWeight: 500, lineHeight: 44 });
+    const shadow = { type: "DROP_SHADOW", color: { r: 0.06, g: 0.09, b: 0.16, a: 0.18 }, offset: { x: 0, y: 24 }, blur: 48, spread: 0, visible: true };
+    k.component("Stat card", { width: 888, fill: "card", radius: 40, effects: [shadow], padding: { top: 40, right: 48, bottom: 40, left: 48 }, gap: 4, props: { Figure: "3.2M", Label: "orders shipped" } }, (id) => {
+      k.propText(id, "Figure", { style: "Figure 120", color: "onCard" });
+      k.propText(id, "Label", { style: "Label 36", color: "muted" });
+    });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 48, 96, "paper", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 3e3, fps: 30 });
+    const title = k.text(sheet, "{{brand.title}}", { style: "Title 72", color: "text", name: "Title" });
+    const cards = k.stack(sheet, { gap: 32, align: "CENTER", name: "Cards" });
+    const stats = [["3.2M", "orders shipped"], ["48", "countries reached"], ["99.2%", "on-time deliveries"]];
+    const handle = k.text(sheet, "{{brand.handle}}", { style: "Handle 28", color: "muted", name: "Handle" });
+    k.animate(title, "translateY", [{ t: 0, v: -120, ease: ease.out("bounce") }, { t: 900, v: 0 }]);
+    k.animate(title, "opacity", [{ t: 0, v: 0, ease: ease.linear }, { t: 200, v: 1 }]);
+    k.delay(cards, 700);
+    k.stagger(cards, 180);
+    for (const [figure, label] of stats) {
+      const card = k.instance(cards, "Stat card", { Figure: figure, Label: label });
+      for (const axis of ["scaleX", "scaleY"]) k.animate(card, axis, [{ t: 0, v: 0, ease: ease.back(1.9) }, { t: 600, v: 1 }]);
+      k.animate(card, "effects[#0].blur", [{ t: 0, v: 0, ease: ease.out("cubic") }, { t: 700, v: 48 }]);
+      k.animate(card, "effects[#0].offset.y", [{ t: 0, v: 0, ease: ease.out("cubic") }, { t: 700, v: 24 }]);
+    }
+    k.delay(handle, 1900);
+    k.animate(handle, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: 1, v: 1 }]);
+    k.variants(sheet, [
+      {
+        preset: "ig-story",
+        adjust: (kit, id) => {
+          kit.patch(id, { padding: safePadding("ig-story", 1080, 1920, { top: 96, right: 96, bottom: 96, left: 96 }) });
+          for (const card of kit.named(id, "Stat card")) kit.patch(card, { layoutSizingHorizontal: "FILL" });
+        }
+      }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  stat_pop_default
+};