@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-WQBUPC5U.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-UDCFEWHX.js";
+import {
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  compactNav
+} from "./chunk-DAF5SK5X.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-TF2MO3UA.js";
+import {
+  box,
+  curve3,
+  poly,
+  pt3
+} from "./chunk-6RCDZU4R.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.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-WQD3M4SM.js

@@ -0,0 +1,77 @@
+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 {
+  standardStore
+} from "./chunk-MO7SQVMT.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/web/shop-marginalia.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var PRODUCTS = [
+  { title: "The Weight of Rivers", handle: "the-weight-of-rivers", price: "\xA318.99", image: "ma-book1", tags: "fiction", description: "A novel of three sisters and the dam that drowned their village, told across fifty years. Our book of the month." },
+  { title: "Small Hours", handle: "small-hours", price: "\xA310.99", image: "ma-book2", tags: "essays", description: "Essays on insomnia, night shifts and the city after midnight." },
+  { title: "A Map of the Tides", handle: "a-map-of-the-tides", price: "\xA322.00", image: "ma-book3", tags: "nature", description: "A natural history of the coastline, with forty hand-drawn charts." },
+  { title: "Field Notes", handle: "field-notes", price: "\xA39.99", image: "ma-book4", tags: "poetry", description: "Poems written on walks across one year in the Fens." },
+  { title: "The Long Table", handle: "the-long-table", price: "\xA328.00", image: "ma-book5", tags: "food", description: "Recipes and stories from a family restaurant that fed a town for sixty years." },
+  { title: "Learning to Swim", handle: "learning-to-swim", price: "\xA312.99", image: "ma-book6", tags: "memoir", description: "A memoir about taking up wild swimming at sixty." }
+];
+var shop_marginalia_default = defineTemplate({
+  id: "web-shop-marginalia",
+  meta: {
+    name: "Marginalia bookshop",
+    description: "An independent bookshop\u2019s store in cream and ink with a literary serif: the headline typed in, tall book covers, staff picks in a carousel, categories, a page per book with add to cart and a cart with checkout. Publishes as a Next.js Commerce store selling your Shopify products. Desktop, tablet and phone",
+    category: "storefront",
+    tags: ["ecommerce", "shop", "store", "storefront", "shopify", "next.js commerce", "product page", "cart", "books", "bookshop", "editorial", "literary", "serif", "independent", "website", "responsive", "animation"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["sale", "launch"],
+    created: "2026-10-09",
+    updated: "2026-10-09"
+  },
+  breakpoints: true,
+  build: () => standardStore({
+    name: "Marginalia bookshop",
+    brand: { paper: "#F6F1E7", text: "#1E1B16", onPaper: "#625A4E", primary: "#8B2E1F", onPrimary: "#FBF6EC", card: "#FFFDF8", onCard: "#1E1B16", cardMuted: "#625A4E", tint: "#ECE4D4", onTint: "#1E1B16", tintMuted: "#625A4E", line: "#DCD2BF" },
+    fields: { name: "Marginalia Books", email: "shop@marginalia.books" },
+    styles: {
+      "Wordmark 26": { size: 26, fontFamily: "Libre Caslon Text", fontWeight: 700, letterSpacing: -0.3, lineHeight: 30 },
+      "Nav 15": { size: 15, fontFamily: "EB Garamond", fontWeight: 500, lineHeight: 22 },
+      "Display 80": { size: 80, fontFamily: "Libre Caslon Text", fontWeight: 400, letterSpacing: -1.6, lineHeight: 84 },
+      "Display 46": { size: 46, fontFamily: "Libre Caslon Text", fontWeight: 400, letterSpacing: -0.6, lineHeight: 52 },
+      "Section 32": { size: 32, fontFamily: "Libre Caslon Text", fontWeight: 400, lineHeight: 38 },
+      "Title 17": { size: 17, fontFamily: "EB Garamond", fontWeight: 600, lineHeight: 23 },
+      "Price 16": { size: 16, fontFamily: "EB Garamond", fontWeight: 400, lineHeight: 22 },
+      "Body 18": { size: 18, fontFamily: "EB Garamond", fontWeight: 400, lineHeight: 29 },
+      "Small 14": { size: 14, fontWeight: 500, letterSpacing: 0.6, lineHeight: 20 },
+      "Button 15": { size: 15, fontWeight: 600, letterSpacing: 0.4, lineHeight: 22 }
+    },
+    type: { wordmark: "Wordmark 26", nav: "Nav 15", display: "Display 80", displaySmall: "Display 46", section: "Section 32", title: "Title 17", price: "Price 16", body: "Body 18", small: "Small 14", button: "Button 15" },
+    products: PRODUCTS,
+    categories: [{ title: "Fiction", handle: "fiction", description: "Novels the staff have pressed into customers\\u2019 hands." }, { title: "Essays", handle: "essays", description: "Short, sharp and true." }, { title: "Poetry", handle: "poetry", description: "Small books for long evenings." }, { title: "Nature", handle: "nature", description: "The world outside, written well." }],
+    carousel: "Staff picks this month",
+    menu: [["New in", "/search"], ["Fiction", "/search/fiction"], ["Poetry", "/search/poetry"]],
+    hero: { kicker: "INDEPENDENT SINCE 1987 \xB7 NORWICH", headline: "Books chosen by people who have read them", lead: "Every book on our shelves has been read by one of the five of us. Ask us anything; we will find you something.", cta: "Browse new arrivals", image: "ma-hero", layout: "stacked" },
+    story: { title: "Staff picks, written in the margins", body: "Each book we recommend comes with a card from the bookseller who loved it. We will post one with your order.", image: "ma-book1" },
+    promise: ["Free UK delivery over \xA325 \xB7 wrapped in brown paper", "Signed copies where we can get them"],
+    newsletter: { title: "The margin", body: "A monthly letter of what we are reading, and invitations to our events." },
+    legal: "Prices include VAT.",
+    card: "plain",
+    motion: "editorial",
+    float: false,
+    ratio: 1.5,
+    radius: 2
+  })
+});
+
+export {
+  shop_marginalia_default
+};