@popcraft/kit 0.44.0 → 0.45.0

package/dist/chunks/chunk-55E7WKF6.js

@@ -0,0 +1,607 @@
+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 {
+  shopArt
+} from "./chunk-BNHZFS5G.js";
+import {
+  fitGrid
+} from "./chunk-472HVEQ3.js";
+import {
+  form,
+  repeats,
+  route,
+  visitorCollection
+} from "./chunk-K6AHIEXA.js";
+import {
+  COMMERCE_FIELDS
+} from "./chunk-HGVRONGB.js";
+import {
+  marquee
+} from "./chunk-3GMU2HH4.js";
+import {
+  webResponsive
+} from "./chunk-IPGCJWVL.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_scene_graph,
+  removeNode
+} from "./chunk-4PRA35FU.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/web/shop-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene_graph();
+var SHOP_CUES = [
+  { layer: "Top bar", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Kicker", preset: "rise-in", at: 150 },
+  { layer: "Headline", preset: "rise-in", at: 300, params: { duration: 700 } },
+  { layer: "Lead", preset: "rise-in", at: 450 },
+  { layer: "Hero button", preset: "rise-in", at: 600 },
+  { layer: "Hero picture", preset: "fade-in", at: 250, params: { duration: 900 } },
+  { layer: "Featured", preset: "rise-in", at: 900, params: { duration: 700 } },
+  { layer: "Hero button", preset: "pulse", at: 3200, params: { amount: 0.06 } }
+];
+var HOME_CUES = {
+  calm: SHOP_CUES,
+  lively: [
+    { layer: "Top bar", preset: "drop-in", at: 0, params: { duration: 450 } },
+    { layer: "Kicker", preset: "pop-in", at: 150 },
+    { layer: "Headline", preset: "slide-in", at: 250, params: { direction: "left", duration: 600 } },
+    { layer: "Lead", preset: "fade-in", at: 500 },
+    { layer: "Hero button", preset: "pop-in", at: 650 },
+    { layer: "Hero picture", preset: "scale-in", at: 200, params: { duration: 800 } },
+    { layer: "Featured", preset: "rise-in", at: 900, params: { duration: 600 } },
+    { layer: "Hero button", preset: "bounce", at: 2800 }
+  ],
+  editorial: [
+    { layer: "Top bar", preset: "fade-in", at: 0, params: { duration: 600 } },
+    { layer: "Kicker", preset: "fade-in", at: 150 },
+    { layer: "Headline", preset: "typewriter", at: 250, params: { duration: 1400 } },
+    { layer: "Lead", preset: "blur-in", at: 1500 },
+    { layer: "Hero button", preset: "fade-in", at: 1800 },
+    { layer: "Hero picture", preset: "wipe-in", at: 300, params: { duration: 1100 } },
+    { layer: "Featured", preset: "fade-in", at: 1900, params: { duration: 700 } }
+  ],
+  soft: [
+    { layer: "Top bar", preset: "fade-in", at: 0, params: { duration: 700 } },
+    { layer: "Kicker", preset: "blur-in", at: 200 },
+    { layer: "Headline", preset: "blur-in", at: 350, params: { duration: 900 } },
+    { layer: "Lead", preset: "blur-in", at: 600 },
+    { layer: "Hero button", preset: "blur-in", at: 800 },
+    { layer: "Hero picture", preset: "fade-in", at: 400, params: { duration: 1200 } },
+    { layer: "Featured", preset: "rise-in", at: 1100, params: { duration: 800 } }
+  ]
+};
+var PAGE_CUES = {
+  category: [{ layer: "Top bar", preset: "fade-in", at: 0, params: { duration: 500 } }, { layer: "Category head", preset: "rise-in", at: 150 }, { layer: "Category products", preset: "fade-in", at: 400, params: { duration: 700 } }],
+  search: [{ layer: "Top bar", preset: "fade-in", at: 0, params: { duration: 500 } }, { layer: "Search head", preset: "rise-in", at: 150 }, { layer: "Catalogue", preset: "fade-in", at: 400, params: { duration: 700 } }],
+  product: [{ layer: "Top bar", preset: "fade-in", at: 0, params: { duration: 500 } }, { layer: "Product picture", preset: "fade-in", at: 100, params: { duration: 800 } }, { layer: "Info", preset: "rise-in", at: 300 }],
+  cart: [{ layer: "Top bar", preset: "fade-in", at: 0, params: { duration: 500 } }, { layer: "Cart head", preset: "rise-in", at: 150 }, { layer: "Cart body", preset: "rise-in", at: 350 }]
+};
+function shopCollection(k, name, schema, samples) {
+  const made = visitorCollection(k, name, COMMERCE_FIELDS[schema].map((f) => ({ name: f.name, type: f.type })), samples, { perVisitor: false });
+  const c = k.doc.collections[made.id];
+  const slug = c.fields.find((f) => f.name === "Handle");
+  k.doc = { ...k.doc, collections: { ...k.doc.collections, [made.id]: { ...c, schema, ...slug ? { slugFieldId: slug.id } : {} } } };
+  return made.id;
+}
+function picture(k, parent, first, w, h, o) {
+  const id = k.image(parent, shopArt(first), w, h, o);
+  k.bindExpression(id, "imageUrl", "item_image");
+  return id;
+}
+function goes(s, from, to) {
+  s.k.link(from, to, s.c.go ?? "DISSOLVE");
+  s.k.patch(from, { semantics: { ...s.k.node(from).semantics, link: { kind: "screen", frameId: to } } });
+  return from;
+}
+function menuLink(k, id) {
+  k.patch(id, { semantics: { link: { kind: "url", url: "{{item.url}}", newTab: false } } });
+  return id;
+}
+function hidden(k, parent, name, value, style) {
+  const id = k.text(parent, "", { name: `${name} field`, style, width: 1, absolute: { x: 0, y: 0 } });
+  k.patch(id, { control: { kind: "INPUT", inputType: "hidden", name, value } });
+  return id;
+}
+function sends(k, parent, label, o) {
+  const control = { control: { kind: "BUTTON", buttonType: "submit" } };
+  if (!o.fill) {
+    const id2 = k.instance(parent, o.quiet ? "Button quiet" : "Button", { Label: label }, { name: o.name });
+    k.patch(id2, control);
+    return id2;
+  }
+  const id = k.stack(parent, { direction: "HORIZONTAL", width: "FILL", align: "CENTER", justify: "CENTER", radius: o.c.radius, padding: { top: 15, right: 26, bottom: 15, left: 26 }, ...o.quiet ? { stroke: { color: "text", width: 1.5 } } : { fill: "primary" }, name: o.name });
+  k.text(id, label, { style: o.c.type.button, color: o.quiet ? "text" : "onPrimary", autoWidth: true, name: "Label" });
+  k.patch(id, control);
+  return id;
+}
+function shopButtons(k, c) {
+  const box = { direction: "HORIZONTAL", width: "HUG", radius: c.radius, align: "CENTER", justify: "CENTER", padding: { top: 15, right: 26, bottom: 15, left: 26 } };
+  k.component("Button", { ...box, fill: "primary", props: { Label: "Add to cart" } }, (id) => {
+    k.propText(id, "Label", { style: c.type.button, color: "onPrimary", autoWidth: true });
+  });
+  k.component("Button quiet", { ...box, stroke: { color: "text", width: 1.5 }, props: { Label: "Search" } }, (id) => {
+    k.propText(id, "Label", { style: c.type.button, color: "text", autoWidth: true });
+  });
+}
+function storeSite(c) {
+  const k = new Kit(c.name, preset("web-desktop"));
+  k.brand(c.brand, c.fields);
+  for (const [name, spec] of Object.entries(c.styles)) k.textStyle(name, spec);
+  shopButtons(k, c);
+  const products = shopCollection(k, "Products", "commerce.product", c.products.map((p, i) => ({
+    Title: p.title,
+    Handle: p.handle,
+    URL: `/product/${p.handle}`,
+    Description: p.description,
+    Price: p.price,
+    Image: shopArt(p.image),
+    "Image alt": p.title,
+    Available: true,
+    "Variant ID": `gid://shopify/ProductVariant/${1001 + i}`,
+    Tags: p.tags ?? ""
+  })));
+  const sample = c.products.slice(0, 2);
+  const lines = shopCollection(k, "Cart lines", "commerce.cartLine", sample.map((p, i) => ({ Title: p.title, Variant: i ? "" : "M", URL: `/product/${p.handle}`, Image: shopArt(p.image), Quantity: 1, Price: p.price, "Merchandise ID": `gid://shopify/ProductVariant/${1001 + i}` })));
+  const total = sample.reduce((n, p) => n + Number(p.price.replace(/[^0-9.]/g, "")), 0);
+  const money = (n) => `${c.products[0].price.replace(/[0-9.,\s]/g, "")}${n.toFixed(2)}`;
+  const cart = shopCollection(k, "Cart", "commerce.cart", [{ Count: sample.length, Subtotal: money(total), Taxes: "Calculated at checkout", Total: money(total), "Checkout URL": "" }]);
+  const pages = /* @__PURE__ */ new Set(["/", "/cart", ...c.products.map((p) => `/product/${p.handle}`), ...c.launch ? [] : ["/search", ...c.categories.map((x) => `/search/${x.handle}`)]]);
+  for (const [title, url] of c.menu) if (!pages.has(url)) throw new Error(`${c.name}: the menu's "${title}" goes to ${url}, which is not one of the store's pages`);
+  const menu = shopCollection(k, "Menu", "commerce.menu", c.menu.map(([title, url]) => ({ Title: title, URL: url })));
+  const categories = shopCollection(k, "Categories", "commerce.collection", c.categories.map((x) => ({ Title: x.title, Handle: x.handle, URL: `/search/${x.handle}`, Description: x.description })));
+  const screen = (id, name, path, title, extra = {}) => {
+    k.nameSheet(id, name);
+    k.flowSheet(id, 0, 0, "paper");
+    k.patch(id, { layoutSizingVertical: "HUG", minHeight: 1024, clipsContent: true });
+    route(k, id, path, { title });
+    k.patch(id, { route: { ...k.node(id).route, ...extra } });
+    k.timeline(id, { duration: 6e3, fps: 30 });
+    return id;
+  };
+  const home = screen(k.sheet, "Home", "/", `${c.fields.name} \u2014 ${c.hero.headline}`);
+  const search = c.launch ? home : screen(k.addScreen("Search"), "Search", "/search", `Shop all \u2014 ${c.fields.name}`);
+  const category = c.launch ? home : screen(k.addScreen("Category"), "Category", "/search", `{{item.title}} \u2014 ${c.fields.name}`, { collectionId: categories, description: "{{item.description}}" });
+  const product = screen(k.addScreen("Product"), "Product", "/product", `{{item.title}} \u2014 ${c.fields.name}`, { collectionId: products, description: "{{item.description}}" });
+  const cartPage2 = screen(k.addScreen("Cart"), "Cart", "/cart", `Your cart \u2014 ${c.fields.name}`);
+  return { k, c, products, cart, lines, menu, categories, screens: { home, search, category, product, cart: cartPage2 } };
+}
+var SIDE = (s) => s.c.side ?? 72;
+function bar(s, page) {
+  const { k, c } = s;
+  if (c.ticker?.length) {
+    const strip = k.stack(page, { direction: "HORIZONTAL", width: "FILL", fill: "primary", name: "Ticker" });
+    const names = [...c.ticker, ...c.ticker, ...c.ticker];
+    const run = marquee(k, strip, { names, item: 340, height: 40, style: c.type.small, rate: names.length * 340 * 1e3 / 6e3 / 3, color: "onPrimary", mark: "onPrimary", name: "Ticker words" });
+    k.patch(run, { layoutSizingHorizontal: "FILL" });
+  }
+  const row = k.stack(page, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 22, right: SIDE(s), bottom: 22, left: SIDE(s) }, name: "Top bar" });
+  goes(s, k.text(row, "{{brand.name}}", { style: c.type.wordmark, color: "text", autoWidth: true, name: "Wordmark" }), s.screens.home);
+  const links = k.stack(row, { direction: "HORIZONTAL", width: "HUG", gap: 28, align: "CENTER", name: "Links" });
+  repeats(k, links, s.menu, { limit: 3 });
+  menuLink(k, k.text(links, "{{item.title}}", { style: c.type.nav, color: "onPaper", autoWidth: true, name: "Menu link" }));
+  const bag = k.stack(row, { direction: "HORIZONTAL", width: "HUG", name: "Cart link" });
+  repeats(k, bag, s.cart, { limit: 1 });
+  const pill = k.stack(bag, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", radius: 999, stroke: { color: "text", width: 1.5 }, padding: { top: 6, right: 6, bottom: 6, left: 16 }, name: "Cart pill" });
+  k.text(pill, "Cart", { style: c.type.nav, color: "text", autoWidth: true, name: "Cart label" });
+  const badge = k.stack(pill, { direction: "HORIZONTAL", width: 26, height: 26, radius: 13, fill: "primary", align: "CENTER", justify: "CENTER", name: "Cart badge" });
+  const count = k.text(badge, "{{item.count}}", { style: c.type.small, color: "onPrimary", width: 26, align: "CENTER", name: "Cart count" });
+  k.patch(count, { textAutoResize: "NONE", height: 20 });
+  goes(s, pill, s.screens.cart);
+}
+function productGrid(s, parent, o) {
+  const { k, c } = s;
+  const W = 1440 - SIDE(s) * 2;
+  const grid = k.stack(parent, { gap: o.gap, width: "FILL", name: o.name ?? "Grid" });
+  k.patch(grid, { layoutMode: "GRID", layoutGridColumns: o.cols, counterAxisSpacing: o.gap, repeat: { collectionId: s.products, ...o.limit ? { limit: o.limit } : {}, ...o.offset ? { offset: o.offset } : {} } });
+  productCard(s, grid, Math.floor((W - o.gap * (o.cols - 1)) / o.cols), true);
+  return grid;
+}
+function cardComponent(s) {
+  const { k, c } = s;
+  const name = "Product card";
+  if (k.has(name)) return name;
+  const framed = c.card === "framed", pad = framed ? 12 : 0;
+  const w = Math.floor((1440 - SIDE(s) * 2 - 24 * 2) / 3), first = c.products[0];
+  const h = Math.round((w - pad * 2) * c.ratio);
+  k.component(name, {
+    gap: 14,
+    width: w,
+    ...framed ? { fill: "card", radius: Math.min(c.radius + 6, 32), padding: { top: pad, right: pad, bottom: 18, left: pad }, stroke: { color: "line", width: 1 } } : {},
+    props: { Image: { image: shopArt(first.image) }, Title: first.title, Price: first.price, "Picture height": { number: h, min: 80, max: 1200, step: 1 } },
+    description: "A product: its picture, title and price. Bind Image, Title and Price to a product's fields (Data)."
+  }, (id) => {
+    const pic = k.propImage(id, "Image", w - pad * 2, h, { name: "Card cover", radius: c.radius });
+    k.patch(pic, { layoutSizingHorizontal: "FILL" });
+    k.bindPath(pic, "height", "Picture height");
+    const words = k.stack(id, { direction: "HORIZONTAL", gap: 12, justify: "SPACE_BETWEEN", width: "FILL", ...framed ? { padding: { top: 0, right: 6, bottom: 0, left: 6 } } : {}, name: "Card words" });
+    k.patch(k.propText(words, "Title", { style: c.type.title, color: framed ? "onCard" : "text", name: "Card title" }), { layoutSizingHorizontal: "FILL" });
+    k.propText(words, "Price", { style: c.type.price, color: framed ? "cardMuted" : "onPaper", autoWidth: true, name: "Card price" });
+  });
+  return name;
+}
+function productCard(s, parent, w, fill) {
+  const { k, c } = s;
+  const pad = c.card === "framed" ? 12 : 0;
+  const card = k.instance(parent, cardComponent(s), { "Picture height": Math.round((w - pad * 2) * c.ratio) }, { name: "Card", width: fill ? "FILL" : w });
+  k.bindProps(card, { Image: "image", Title: "title", Price: "price" });
+  goes(s, card, s.screens.product);
+  return card;
+}
+function carousel(s, parent) {
+  const { k } = s;
+  const strip = k.stack(parent, { direction: "HORIZONTAL", width: "FILL", clip: true, name: "Carousel strip" });
+  const track = k.stack(strip, { direction: "HORIZONTAL", width: "HUG", gap: 20, name: "Carousel" });
+  k.patch(track, { repeat: { collectionId: s.products } });
+  productCard(s, track, 280, false);
+  k.behave(track, "translateX", [{ kind: "sine", amp: 180, freq: 1 / 6, phase: 0.75 }]);
+  return strip;
+}
+function categoryChips(s, parent) {
+  const { k, c } = s;
+  const row = k.stack(parent, { direction: "HORIZONTAL", gap: 10, wrap: true, width: "FILL", name: "Categories" });
+  k.patch(row, { counterAxisSpacing: 10, repeat: { collectionId: s.categories } });
+  if (!k.has("Category chip")) {
+    k.component(
+      "Category chip",
+      {
+        direction: "HORIZONTAL",
+        width: "HUG",
+        radius: 999,
+        stroke: { color: "line", width: 1 },
+        padding: { top: 8, right: 16, bottom: 8, left: 16 },
+        props: { Title: "All" },
+        description: "A category: its name. Bind Title to a category's title (Data)."
+      },
+      (id) => {
+        k.propText(id, "Title", { style: c.type.small, color: "text", autoWidth: true, name: "Category name" });
+      }
+    );
+  }
+  const chip = k.instance(row, "Category chip", {}, { name: "Category chip" });
+  k.bindProps(chip, { Title: "title" });
+  goes(s, chip, s.screens.category);
+  return row;
+}
+function content(s, page) {
+  const id = s.k.stack(page, { gap: 0, width: "FILL", name: "Content" });
+  s.k.patch(id, { minHeight: 640 });
+  return id;
+}
+function section(s, page, name, title) {
+  const sec = s.k.stack(page, { gap: 28, padding: { top: 56, right: SIDE(s), bottom: 24, left: SIDE(s) }, name });
+  if (title) s.k.text(sec, title, { style: s.c.type.section, color: "text", name: `${name} title` });
+  return sec;
+}
+function foot(s, page) {
+  const { k, c } = s;
+  const row = k.stack(page, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 48, fill: "tint", padding: { top: 56, right: SIDE(s), bottom: 56, left: SIDE(s) }, name: "Footer" });
+  const left = k.stack(row, { gap: 12, width: 420, name: "Footer words" });
+  k.text(left, "{{brand.name}}", { style: c.type.wordmark, color: "onTint", name: "Footer wordmark" });
+  k.text(left, `\xA9 2026 {{brand.name}}. ${c.legal}`, { style: c.type.small, color: "tintMuted", name: "Copyright" });
+  const list = k.stack(row, { gap: 10, width: "HUG", name: "Footer menu" });
+  repeats(k, list, s.menu);
+  menuLink(k, k.text(list, "{{item.title}}", { style: c.type.small, color: "onTint", autoWidth: true, name: "Footer link" }));
+}
+function homePage(s) {
+  const { k, c } = s;
+  const sheet = s.screens.home;
+  bar(s, sheet);
+  const page = content(s, sheet);
+  heroOf(s, page);
+  const W = 1440 - SIDE(s) * 2;
+  const featured = section(s, page, "Featured", "Featured this week");
+  productGrid(s, featured, { cols: 3, gap: 24, limit: 3 });
+  const story = k.stack(page, { direction: "HORIZONTAL", gap: 64, align: "CENTER", padding: { top: 56, right: SIDE(s), bottom: 56, left: SIDE(s) }, name: "Story" });
+  const storyPic = k.image(story, shopArt(c.story.image), Math.round(W * 0.5), Math.round(W * 0.5 * 0.68), { name: "Story picture", radius: c.radius });
+  if (c.float) k.behave(storyPic, "translateY", [{ kind: "sine", amp: 8, freq: 1 / 6, phase: 0.5 }]);
+  const words = k.stack(story, { gap: 18, name: "Story words" });
+  k.patch(words, { layoutSizingHorizontal: "FILL" });
+  k.text(words, c.story.title, { style: c.type.displaySmall, color: "text", width: "FILL", name: "Story title" });
+  k.text(words, c.story.body, { style: c.type.body, color: "onPaper", width: "FILL", name: "Story body" });
+  const glide = section(s, page, "Carousel section", c.carousel);
+  carousel(s, glide);
+  const more = section(s, page, "New in", "New in");
+  const left = Math.min(4, c.products.length - 3);
+  productGrid(s, more, { cols: left, gap: 20, offset: 3, limit: left, name: "More grid" });
+  const news = k.stack(page, { direction: "HORIZONTAL", gap: 32, justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 48, right: SIDE(s), bottom: 64, left: SIDE(s) }, name: "Newsletter" });
+  const nw = k.stack(news, { gap: 8, width: 640, name: "Newsletter words" });
+  k.text(nw, c.newsletter.title, { style: c.type.section, color: "text", width: "FILL", name: "Newsletter title" });
+  k.text(nw, c.newsletter.body, { style: c.type.body, color: "onPaper", width: "FILL", name: "Newsletter body" });
+  k.instance(news, "Button quiet", { Label: "Join the list" }, { name: "Newsletter button" });
+  foot(s, sheet);
+}
+function heroOf(s, page) {
+  const { k, c } = s;
+  const W = 1440 - SIDE(s) * 2;
+  const layout = c.hero.layout;
+  const split = layout === "split", poster = layout === "poster", centered = layout === "centered";
+  const ink = poster ? "onPoster" : "text", quiet = poster ? "onPoster" : "onPaper";
+  const hero = k.stack(page, {
+    direction: split ? "HORIZONTAL" : "VERTICAL",
+    gap: split ? 64 : 40,
+    align: split || centered ? "CENTER" : "MIN",
+    padding: poster ? { top: 160, right: SIDE(s) + 48, bottom: 96, left: SIDE(s) + 48 } : { top: 32, right: SIDE(s), bottom: 24, left: SIDE(s) },
+    ...poster ? { clip: true } : {},
+    name: "Hero"
+  });
+  if (poster) {
+    k.patch(hero, { minHeight: 720 });
+    const pic = k.image(hero, shopArt(c.hero.image), 1440, 720, { name: "Hero picture" });
+    k.patch(pic, { layoutPositioning: "ABSOLUTE", x: 0, y: 0 });
+    const scrim = k.rect(hero, 1440, 720, "scrim", { name: "Scrim", absolute: { x: 0, y: 0 }, opacity: 0.45 });
+    for (const layer of [pic, scrim]) k.patch(layer, { constraints: { horizontal: "STRETCH", vertical: "STRETCH" } });
+  }
+  const copy = k.stack(hero, { gap: 22, ...split ? { width: 540 } : {}, ...centered ? { align: "CENTER" } : {}, name: "Hero words" });
+  const wide = split ? "FILL" : centered ? 900 : 980;
+  k.text(copy, c.hero.kicker, { style: c.type.small, color: quiet, width: "FILL", ...centered ? { align: "CENTER" } : {}, name: "Kicker" });
+  k.text(copy, c.hero.headline, { style: c.type.display, color: ink, width: wide, ...centered ? { align: "CENTER" } : {}, name: "Headline" });
+  k.text(copy, c.hero.lead, { style: c.type.body, color: quiet, width: split ? "FILL" : 620, ...centered ? { align: "CENTER" } : {}, name: "Lead" });
+  goes(s, k.instance(copy, "Button", { Label: c.hero.cta }, { name: "Hero button" }), s.screens.search);
+  if (split || layout === "stacked") {
+    const pw = split ? W - 540 - 64 : W;
+    const ph = split ? Math.round(pw * 0.72) : Math.round(W * 0.42);
+    const pic = k.image(hero, shopArt(c.hero.image), pw, ph, { name: "Hero picture", radius: c.radius });
+    if (!split) k.patch(pic, { layoutSizingHorizontal: "FILL" });
+    if (c.float) k.behave(pic, "translateY", [{ kind: "sine", amp: 10, freq: 1 / 3 }]);
+  }
+  if (centered) {
+    const row = k.stack(hero, { direction: "HORIZONTAL", gap: 32, width: "HUG", name: "Hero picture" });
+    k.patch(row, { repeat: { collectionId: s.products, limit: 3 } });
+    const w = 300;
+    const tile = picture(k, row, c.products[0].image, w, Math.round(w * c.ratio), { name: "Hero product", radius: c.radius });
+    goes(s, tile, s.screens.product);
+    if (c.float) k.behave(tile, "translateY", [{ kind: "sine", amp: 14, freq: 1 / 3 }]);
+  }
+}
+function launchPage(s, l) {
+  const { k, c } = s;
+  const sheet = s.screens.home;
+  bar(s, sheet);
+  const page = content(s, sheet);
+  const W = 1440 - SIDE(s) * 2;
+  const hero = k.stack(page, { padding: { top: 24, right: SIDE(s), bottom: 24, left: SIDE(s) }, name: "Hero" });
+  k.patch(hero, { record: { collectionId: s.products, recordId: k.doc.collections[s.products].order[0] } });
+  const row = k.stack(hero, { direction: "HORIZONTAL", gap: 64, align: "CENTER", width: "FILL", name: "Launch" });
+  const words = k.stack(row, { gap: 22, width: 520, name: "Hero words" });
+  k.text(words, c.hero.kicker, { style: c.type.small, color: "onPaper", width: "FILL", name: "Kicker" });
+  k.text(words, c.hero.headline, { style: c.type.display, color: "text", width: "FILL", name: "Headline" });
+  k.text(words, c.hero.lead, { style: c.type.body, color: "onPaper", width: "FILL", name: "Lead" });
+  const price = k.stack(words, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Price row" });
+  k.text(price, "{{item.title}}", { style: c.type.title, color: "text", autoWidth: true, name: "Product name" });
+  k.text(price, "{{item.price}}", { style: c.type.title, color: "onPaper", autoWidth: true, name: "Product price" });
+  const buy = k.stack(words, { gap: 12, width: 360, name: "Hero button" });
+  form(k, buy, { formAction: "addToCart" });
+  hidden(k, buy, "merchandiseId", "{{item.variant_id}}", c.type.small);
+  sends(k, buy, l.buy, { name: "Add button", fill: true, c });
+  const pw = W - 520 - 64;
+  picture(k, row, c.products[0].image, pw, pw, { name: "Hero picture", radius: c.radius });
+  const feats = k.stack(page, { direction: "HORIZONTAL", gap: 24, padding: { top: 48, right: SIDE(s), bottom: 24, left: SIDE(s) }, name: "Featured" });
+  for (const [title, body] of l.features) {
+    const card = k.stack(feats, { gap: 10, fill: "card", radius: Math.min(c.radius, 16), padding: 28, name: "Feature" });
+    k.patch(card, { layoutSizingHorizontal: "FILL" });
+    k.text(card, title, { style: c.type.title, color: "onCard", width: "FILL", name: "Feature title" });
+    k.text(card, body, { style: c.type.body, color: "cardMuted", width: "FILL", name: "Feature body" });
+  }
+  const story = k.stack(page, { direction: "HORIZONTAL", gap: 64, align: "CENTER", padding: { top: 56, right: SIDE(s), bottom: 56, left: SIDE(s) }, name: "Story" });
+  k.image(story, shopArt(l.detail), Math.round(W * 0.5), Math.round(W * 0.5), { name: "Story picture", radius: c.radius });
+  const sw = k.stack(story, { gap: 18, name: "Story words" });
+  k.patch(sw, { layoutSizingHorizontal: "FILL" });
+  k.text(sw, c.story.title, { style: c.type.displaySmall, color: "text", width: "FILL", name: "Story title" });
+  k.text(sw, c.story.body, { style: c.type.body, color: "onPaper", width: "FILL", name: "Story body" });
+  k.text(sw, l.detailWords, { style: c.type.small, color: "onPaper", width: "FILL", name: "Story note" });
+  goes(s, k.instance(sw, "Button quiet", { Label: l.guide }, { name: "Story button" }), s.screens.product);
+  const more = section(s, page, "New in", l.withIt);
+  const rest = Math.max(1, Math.min(3, c.products.length - 1));
+  productGrid(s, more, { cols: rest, gap: 24, offset: 1, limit: rest, name: "More grid" });
+  const list = k.stack(section(s, page, "Specs", "Specifications"), { gap: 0, width: "FILL", name: "Spec list" });
+  for (const [a, b] of l.specs) {
+    k.patch(k.rect(list, 100, 1, "line", { name: "Rule" }), { layoutSizingHorizontal: "FILL" });
+    const r = k.stack(list, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 16, width: "FILL", padding: { top: 14, right: 0, bottom: 14, left: 0 }, name: "Spec" });
+    k.text(r, a, { style: c.type.small, color: "onPaper", autoWidth: true, name: "Spec name" });
+    k.text(r, b, { style: c.type.small, color: "text", align: "RIGHT", width: "FILL", name: "Spec value" });
+  }
+  foot(s, sheet);
+}
+function searchPage(s) {
+  const { k, c } = s;
+  const sheet = s.screens.search;
+  bar(s, sheet);
+  const page = content(s, sheet);
+  const head = k.stack(page, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "MAX", gap: 32, padding: { top: 40, right: SIDE(s), bottom: 8, left: SIDE(s) }, name: "Search head" });
+  const words = k.stack(head, { gap: 10, width: 560, name: "Search words" });
+  k.text(words, "Shop all", { style: c.type.displaySmall, color: "text", width: "FILL", name: "Search title" });
+  k.text(words, `${c.products.length} pieces, made to be used every day.`, { style: c.type.body, color: "onPaper", width: "FILL", name: "Search lead" });
+  const query = k.stack(head, { direction: "HORIZONTAL", gap: 10, width: 440, align: "CENTER", name: "Search form" });
+  form(k, query, { formAction: "search" });
+  const box = k.stack(query, { direction: "HORIZONTAL", height: 50, radius: Math.min(c.radius, 12), fill: "card", stroke: { color: "line", width: 1 }, align: "CENTER", padding: { top: 0, right: 16, bottom: 0, left: 16 }, name: "Search field" });
+  k.patch(box, { layoutSizingHorizontal: "FILL", control: { kind: "INPUT", inputType: "search", name: "q", placeholder: "Search the shop" } });
+  k.patch(k.text(box, "Search the shop", { style: c.type.small, color: "cardMuted", name: "Search words placeholder" }), { layoutSizingHorizontal: "FILL" });
+  sends(k, query, "Search", { name: "Search button", quiet: true, c });
+  const all = section(s, page, "Catalogue");
+  categoryChips(s, all);
+  productGrid(s, all, { cols: 4, gap: 20 });
+  foot(s, sheet);
+}
+function categoryPage(s) {
+  const { k, c } = s;
+  const sheet = s.screens.category;
+  bar(s, sheet);
+  const page = content(s, sheet);
+  const head = k.stack(page, { gap: 10, padding: { top: 40, right: SIDE(s), bottom: 8, left: SIDE(s) }, name: "Category head" });
+  k.text(head, "{{item.title}}", { style: c.type.displaySmall, color: "text", width: "FILL", name: "Category title" });
+  k.text(head, "{{item.description}}", { style: c.type.body, color: "onPaper", width: 720, name: "Category description" });
+  const all = section(s, page, "Category products");
+  categoryChips(s, all);
+  productGrid(s, all, { cols: 4, gap: 20 });
+  foot(s, sheet);
+}
+function productPage(s) {
+  const { k, c } = s;
+  const sheet = s.screens.product;
+  bar(s, sheet);
+  const page = content(s, sheet);
+  const W = 1440 - SIDE(s) * 2;
+  const main = k.stack(page, { direction: "HORIZONTAL", gap: 64, padding: { top: 32, right: SIDE(s), bottom: 24, left: SIDE(s) }, name: "Main" });
+  const pw = Math.round(W * 0.56);
+  picture(k, main, c.products[0].image, pw, pw, { name: "Product picture", radius: c.radius });
+  const info = k.stack(main, { gap: 20, name: "Info" });
+  k.patch(info, { layoutSizingHorizontal: "FILL" });
+  k.text(info, "{{item.title}}", { style: c.type.displaySmall, color: "text", width: "FILL", name: "Product title" });
+  k.text(info, "{{item.price}}", { style: c.type.section, color: "text", width: "FILL", name: "Product price" });
+  const about = k.stack(info, { width: "FILL", name: "About" });
+  k.patch(about, { minHeight: 112 });
+  k.text(about, "{{item.description}}", { style: c.type.body, color: "onPaper", width: "FILL", name: "Product description" });
+  const buy = k.stack(info, { gap: 12, width: "FILL", name: "Add to cart" });
+  form(k, buy, { formAction: "addToCart" });
+  hidden(k, buy, "merchandiseId", "{{item.variant_id}}", c.type.small);
+  sends(k, buy, "Add to cart", { name: "Add button", fill: true, c });
+  const promise = k.stack(info, { gap: 8, fill: "tint", radius: Math.min(c.radius, 14), padding: 18, name: "Promise" });
+  for (const line of c.promise) k.text(promise, line, { style: c.type.small, color: "onTint", width: "FILL", name: "Promise line" });
+  const more = section(s, page, "Related", "You may also like");
+  productGrid(s, more, { cols: 4, gap: 20, limit: 4, name: "More grid" });
+  foot(s, sheet);
+}
+function cartPage(s) {
+  const { k, c } = s;
+  const sheet = s.screens.cart;
+  bar(s, sheet);
+  const page = content(s, sheet);
+  const head = section(s, page, "Cart head");
+  k.text(head, "Your cart", { style: c.type.displaySmall, color: "text", name: "Cart title" });
+  const body = k.stack(page, { direction: "HORIZONTAL", gap: 48, padding: { top: 0, right: SIDE(s), bottom: 48, left: SIDE(s) }, name: "Cart body" });
+  const list = k.stack(body, { gap: 0, name: "Lines" });
+  k.patch(list, { layoutSizingHorizontal: "FILL" });
+  repeats(k, list, s.lines);
+  const copy = k.stack(list, { gap: 0, width: "FILL", name: "Line copy" });
+  k.patch(k.rect(copy, 100, 1, "line", { name: "Rule" }), { layoutSizingHorizontal: "FILL" });
+  const line = k.stack(copy, { direction: "HORIZONTAL", gap: 24, align: "CENTER", width: "FILL", padding: { top: 20, right: 0, bottom: 20, left: 0 }, name: "Line" });
+  const thumb = k.image(line, shopArt(c.products[0].image), 120, 120, { name: "Line picture", radius: Math.min(c.radius, 12) });
+  k.bindExpression(thumb, "imageUrl", "item_image");
+  const words = k.stack(line, { gap: 6, name: "Line words" });
+  k.patch(words, { layoutSizingHorizontal: "FILL" });
+  k.text(words, "{{item.title}}", { style: c.type.title, color: "text", width: "FILL", name: "Line title" });
+  k.text(words, "{{item.variant}}", { style: c.type.small, color: "onPaper", width: "FILL", name: "Line variant" });
+  k.text(words, "Qty {{item.quantity}}", { style: c.type.small, color: "onPaper", width: "FILL", name: "Line quantity" });
+  const end = k.stack(line, { gap: 10, align: "MAX", width: "HUG", name: "Line end" });
+  k.text(end, "{{item.price}}", { style: c.type.price, color: "text", autoWidth: true, name: "Line price" });
+  const remove = k.stack(end, { width: "HUG", name: "Remove" });
+  form(k, remove, { formAction: "removeCartLine" });
+  hidden(k, remove, "merchandiseId", "{{item.merchandise_id}}", c.type.small);
+  const rm = k.text(remove, "Remove", { style: c.type.small, color: "onPaper", autoWidth: true, name: "Remove button" });
+  k.patch(rm, { control: { kind: "BUTTON", buttonType: "submit" } });
+  const summary = k.stack(body, { gap: 0, width: 400, name: "Summary" });
+  repeats(k, summary, s.cart, { limit: 1 });
+  const card = k.stack(summary, { gap: 14, fill: "card", radius: Math.min(c.radius, 16), stroke: { color: "line", width: 1 }, padding: 28, width: "FILL", name: "Summary card" });
+  const row = (label, value, strong = false) => {
+    const r = k.stack(card, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", gap: 12, width: "FILL", name: `${label} row` });
+    k.text(r, label, { style: strong ? c.type.title : c.type.small, color: strong ? "onCard" : "cardMuted", autoWidth: true, name: `${label} label` });
+    k.text(r, value, { style: strong ? c.type.title : c.type.small, color: "onCard", width: "FILL", align: "RIGHT", name: `${label} value` });
+  };
+  row("Subtotal", "{{item.subtotal}}");
+  row("Taxes", "{{item.taxes}}");
+  row("Total", "{{item.total}}", true);
+  const out = k.stack(card, { width: "FILL", name: "Checkout" });
+  form(k, out, { formAction: "checkout" });
+  sends(k, out, "Check out", { name: "Checkout button", fill: true, c });
+  k.text(card, c.promise[0], { style: c.type.small, color: "cardMuted", width: "FILL", name: "Summary note" });
+  foot(s, sheet);
+}
+function shopReflow(s) {
+  const { c } = s;
+  return {
+    restyle: { [c.type.display]: { tablet: c.type.displaySmall, mobile: c.type.displaySmall } },
+    stack: ["Hero", "Launch", "Featured", "Story", "Main", "Cart body", "Newsletter", "Footer", "Search head"],
+    hide: { mobile: ["Links"] },
+    tweak: (k, id, size) => {
+      if (size === "desktop") return;
+      const w = k.node(id).width;
+      const side = size === "laptop" ? 56 : size === "tablet" ? 40 : 20;
+      k.patch(id, { padding: { top: 0, right: 0, bottom: 0, left: 0 } });
+      const walk = (n) => {
+        const f = k.node(n);
+        if (f.type === "FRAME" && f.padding && f.padding.left === SIDE(s)) k.patch(n, { padding: { ...f.padding, left: side, right: side } });
+        for (const ch of f.childIds ?? []) walk(ch);
+      };
+      walk(id);
+      const inner = w - side * 2;
+      const narrow = size === "tablet" || size === "mobile";
+      fitGrid(k, id, { cols: size === "mobile" ? 1 : narrow ? 2 : 3, width: inner, gap: size === "mobile" ? 16 : 24, ratio: c.ratio });
+      fitGrid(k, id, { cols: size === "mobile" ? 2 : narrow ? 2 : 4, width: inner, gap: 16, ratio: c.ratio, name: "More grid" });
+      for (const name of ["Hero words", "Hero picture", "Story picture", "Product picture", "Search words", "Search form", "Category description", "Summary", "Newsletter words", "Footer words"]) for (const n of k.named(id, name)) if (narrow) k.patch(n, { layoutSizingHorizontal: "FILL" });
+      if (c.hero.layout === "poster") for (const h of k.named(id, "Hero")) k.patch(h, { padding: { top: narrow ? 96 : 140, right: side + (narrow ? 0 : 32), bottom: narrow ? 64 : 88, left: side + (narrow ? 0 : 32) }, minHeight: narrow ? 560 : 680 });
+      if (c.hero.layout === "centered") {
+        const tw = Math.floor((inner - (size === "mobile" ? 24 : 48)) / 3);
+        for (const r of k.named(id, "Hero picture")) k.patch(r, { itemSpacing: size === "mobile" ? 12 : 24 });
+        for (const t of k.named(id, "Hero product")) k.patch(t, { width: tw, height: Math.round(tw * c.ratio) });
+        for (const n of k.named(id, "Headline")) if (narrow) k.patch(n, { layoutSizingHorizontal: "FILL" });
+      }
+      if (size === "mobile") for (const w2 of k.named(id, "Card words")) k.patch(w2, { layoutMode: "VERTICAL", itemSpacing: 2 });
+      if (narrow) {
+        for (const p of k.named(id, "Hero picture")) k.patch(p, { height: Math.round(inner * 0.66) });
+        for (const p of k.named(id, "Story picture")) k.patch(p, { height: Math.round(inner * 0.66) });
+        for (const p of k.named(id, "Product picture")) k.patch(p, { height: inner });
+        for (const p of k.named(id, "Line picture")) k.patch(p, { width: size === "mobile" ? 80 : 120, height: size === "mobile" ? 80 : 120 });
+      } else {
+        const W = inner;
+        for (const p of k.named(id, "Product picture")) {
+          const pw = Math.round(W * 0.52);
+          k.patch(p, { width: pw, height: pw });
+        }
+      }
+    }
+  };
+}
+function finishStore(s) {
+  const { k } = s;
+  for (const [name, id] of Object.entries(s.screens).filter(([n, id2]) => n === "home" || id2 !== s.screens.home)) {
+    k.cues(id, name === "home" ? s.c.launch ? SHOP_CUES : HOME_CUES[s.c.motion ?? "calm"] : PAGE_CUES[name]);
+    const copies = webResponsive(k, id, shopReflow(s));
+    for (const copy of copies) k.doc = removeNode(k.doc, copy);
+  }
+  k.flowStart(s.screens.home, "Store");
+  return k.finish();
+}
+function standardStore(c) {
+  const s = storeSite(c);
+  if (c.launch) {
+    launchPage(s, c.launch);
+    productPage(s);
+    cartPage(s);
+    return finishStore(s);
+  }
+  homePage(s);
+  searchPage(s);
+  categoryPage(s);
+  productPage(s);
+  cartPage(s);
+  return finishStore(s);
+}
+
+export {
+  SHOP_CUES,
+  storeSite,
+  bar,
+  productGrid,
+  carousel,
+  categoryChips,
+  foot,
+  homePage,
+  launchPage,
+  searchPage,
+  categoryPage,
+  productPage,
+  cartPage,
+  finishStore,
+  standardStore
+};