@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-PZNXFV4R.js

@@ -0,0 +1,362 @@
+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 {
+  tick
+} from "./chunk-YNOCYFZ4.js";
+import {
+  footer,
+  respond,
+  rule,
+  soft,
+  typeScale
+} from "./chunk-TJBKMQY5.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/saas-app-download.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var USE_UP = ["Spinach", "Feta", "Half a lemon"];
+var RECIPES = [["Spinach and feta orzo", "25 min \xB7 uses all three", "sage"], ["Lemon chickpea traybake", "35 min \xB7 uses lemon, spinach", "butter"], ["Green shakshuka", "20 min \xB7 uses spinach, feta", "peach"]];
+var SHELF = [["Spinach, 200 g", "Use by tomorrow", true], ["Feta, half a block", "Use by Friday", true], ["Eggs, 4", "Fine for a week", false], ["Greek yoghurt", "Fine for a week", false]];
+var DAYS = [["Mon", "Orzo"], ["Tue", "Traybake"], ["Wed", "Leftovers"], ["Thu", "Shakshuka"], ["Fri", "Out"]];
+var BARS = [[5, 0.84], [4, 0.11], [3, 0.03], [2, 0.01], [1, 0.01]];
+var DISCS = { wide: [[20, 39, 460], [306, 344, 190], [4, 8, 124]], narrow: [[7, 110, 320], [199, 398, 136], [0, 6, 96]] };
+function scanCode(modules, unit) {
+  const sq = (x, y, w) => ({ closed: true, points: [{ x: x * unit, y: y * unit }, { x: (x + w) * unit, y: y * unit }, { x: (x + w) * unit, y: (y + w) * unit }, { x: x * unit, y: (y + w) * unit }] });
+  const out = [];
+  const finder = (x, y) => {
+    for (let i = 0; i < 7; i++) for (let j = 0; j < 7; j++) if (i === 0 || j === 0 || i === 6 || j === 6 || i > 1 && i < 5 && j > 1 && j < 5) out.push(sq(x + i, y + j, 1));
+  };
+  finder(0, 0);
+  finder(modules - 7, 0);
+  finder(0, modules - 7);
+  let seed = 20261002;
+  for (let y = 0; y < modules; y++) for (let x = 0; x < modules; x++) {
+    seed = Math.imul(seed, 1664525) + 1013904223 >>> 0;
+    const corner = x < 8 && y < 8 || x >= modules - 8 && y < 8 || x < 8 && y >= modules - 8;
+    if (!corner && seed / 4294967296 < 0.46) out.push(sq(x, y, 1));
+  }
+  return out;
+}
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Headline", preset: "rise-in", at: 150, params: { duration: 700 } },
+  { layer: "Lead", preset: "rise-in", at: 350 },
+  { layer: "Store badge", preset: "rise-in", at: 550, stagger: { delay: 120 } },
+  { layer: "Rating", preset: "fade-in", at: 900, params: { duration: 500 } },
+  { layer: "Scan", preset: "pop-in", at: 1100, params: { duration: 450 } },
+  { layer: "Disc", preset: "scale-in", at: 150, params: { duration: 900 }, stagger: { delay: 150 } },
+  { layer: "Phone", preset: "rise-in", at: 300, params: { duration: 900 } },
+  { layer: "Chip", preset: "pop-in", at: 1200, params: { duration: 350 }, stagger: { delay: 130 } },
+  { layer: "Recipe", preset: "rise-in", at: 1700, params: { duration: 500 }, stagger: { delay: 260 } },
+  { layer: "Added", preset: "pop-in", at: 2900, params: { duration: 400 } },
+  { layer: "Float card", preset: "slide-in", at: 3200, params: { duration: 550, direction: "right", distance: 60 }, stagger: { delay: 250 } },
+  { layer: "Added", preset: "pulse", at: 4400, params: { duration: 700, amount: 0.2 } }
+];
+var counts = [{ layer: "Saved figure", at: 3300, duration: 1200, counter: { from: 0, to: 38, prefix: "$" } }];
+var saas_app_download_default = defineTemplate({
+  id: "web-saas-app-download",
+  meta: {
+    name: "SaaS mobile app download page",
+    description: "A download page for a mobile app in soft pastels: a phone with the app building itself on screen (chips pop, recipe cards rise, one is ticked), App Store and Google Play badges, a scan code, three feature rows each with its own piece of the app, reviews with the rating broken down, and the badges again on a closing band. Desktop to phone",
+    category: "web",
+    tags: ["saas", "mobile app", "download", "app store", "google play", "store badges", "phone", "reviews", "pastel", "soft ui", "landing page", "website", "animation", "responsive"],
+    platforms: ["web", "ios", "android", "app-store", "google-play"],
+    formats: ["page", "demo"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("SaaS mobile app download page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FFF6EC", text: "#2A2320", onPaper: "#665A53", primary: "#2F6B4F", onPrimary: "#FFFFFF", card: "#FFFFFF", onCard: "#2A2320", cardMuted: "#6B5F58", badge: "#1F1A18", onBadge: "#FFFFFF", peach: "#FFD6BF", sage: "#D3E8D2", butter: "#FFE7A3" },
+      { name: "Larder" }
+    );
+    k.palette({ device: "#231D1B", screen: "#FFF9F2", star: "#E8A21B", leaf: "#3F8F68", tomato: "#E5604A", line: "#EADFD3", lane: "#F1E8DD" });
+    const s = typeScale(k, {
+      "Nav 16": { size: 16, fontWeight: 600, lineHeight: 24 },
+      "Brand 22": { size: 22, fontWeight: 800, letterSpacing: -0.6, lineHeight: 28 },
+      "Button 16": { size: 16, fontWeight: 700, lineHeight: 24 },
+      "Display 72": { size: 72, fontWeight: 800, letterSpacing: -3, lineHeight: 74 },
+      "Display 62": { size: 62, fontWeight: 800, letterSpacing: -2.6, lineHeight: 64 },
+      "Display 50": { size: 50, fontWeight: 800, letterSpacing: -2, lineHeight: 52 },
+      "Display 38": { size: 38, fontWeight: 800, letterSpacing: -1.4, lineHeight: 41 },
+      "Lead 20": { size: 20, fontWeight: 400, lineHeight: 31 },
+      "Lead 17": { size: 17, fontWeight: 400, lineHeight: 27 },
+      "Badge small 12": { size: 12, fontWeight: 500, lineHeight: 14 },
+      "Badge big 19": { size: 19, fontWeight: 700, letterSpacing: -0.3, lineHeight: 22 },
+      "Proof 15": { size: 15, fontWeight: 600, lineHeight: 22 },
+      "Scan 13": { size: 13, fontWeight: 600, lineHeight: 18 },
+      "App title 22": { size: 22, fontWeight: 800, letterSpacing: -0.5, lineHeight: 26 },
+      "App label 12": { size: 12, fontWeight: 600, lineHeight: 16 },
+      "Chip 12": { size: 12, fontWeight: 700, lineHeight: 16 },
+      "Recipe 14": { size: 14, fontWeight: 700, lineHeight: 18 },
+      "Float 20": { size: 20, fontWeight: 800, letterSpacing: -0.4, lineHeight: 24 },
+      "Section 44": { size: 44, fontWeight: 800, letterSpacing: -1.6, lineHeight: 48 },
+      "Section 30": { size: 30, fontWeight: 800, letterSpacing: -0.9, lineHeight: 34 },
+      "Body 18": { size: 18, fontWeight: 400, lineHeight: 29 },
+      "Body 16": { size: 16, fontWeight: 400, lineHeight: 25 },
+      "Item 15": { size: 15, fontWeight: 700, lineHeight: 20 },
+      "Item meta 13": { size: 13, fontWeight: 500, lineHeight: 18 },
+      "Day 13": { size: 13, fontWeight: 700, lineHeight: 18, textAlign: "CENTER" },
+      "Timer 40": { size: 40, fontWeight: 800, letterSpacing: -1.4, lineHeight: 44, fontFeatures: { tnum: 1 } },
+      "Review 28": { size: 28, fontWeight: 700, letterSpacing: -0.7, lineHeight: 37 },
+      "Review 20": { size: 20, fontWeight: 700, letterSpacing: -0.4, lineHeight: 28 },
+      "Score 96": { size: 96, fontWeight: 800, letterSpacing: -4, lineHeight: 96 },
+      "Score 64": { size: 64, fontWeight: 800, letterSpacing: -2.6, lineHeight: 66 },
+      "Small 14": { size: 14, fontWeight: 500, lineHeight: 22 },
+      "Foot head 14": { size: 14, fontWeight: 800, lineHeight: 22 }
+    });
+    buttons(k, { style: s("Button 16"), pad: [13, 24], radius: 999 });
+    const stars = (parent, size, n = 5) => {
+      const r = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", gap: 3, name: "Stars" });
+      for (let i = 0; i < n; i++) k.star(r, size, "star", { name: "Star" });
+      return r;
+    };
+    const badge = (parent, kind) => {
+      const b = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", fill: "badge", radius: 12, stroke: { color: "cardMuted", width: 1.5, align: "INSIDE" }, padding: { top: 10, right: 20, bottom: 10, left: 16 }, name: "Store badge" });
+      const glyph = k.stack(b, { width: 26, height: 30, align: "CENTER", justify: "CENTER", name: "Badge glyph" });
+      if (kind === "ios") {
+        const phone2 = k.stack(glyph, { width: 19, height: 30, radius: 6, stroke: { color: "onBadge", width: 2, align: "INSIDE" }, name: "Phone glyph" });
+        k.rect(phone2, 7, 2, "onBadge", { radius: 1, name: "Glyph island", absolute: { x: 6, y: 5 } });
+        k.rect(phone2, 7, 2, "onBadge", { radius: 1, name: "Glyph home bar", absolute: { x: 6, y: 23 } });
+      } else {
+        k.vector(glyph, 26, 30, [{ closed: true, points: [{ x: 6, y: 5 }, { x: 23, y: 15 }, { x: 6, y: 25 }] }], "onBadge", { name: "Play glyph", stroke: { color: "onBadge", width: 3.5, join: "ROUND" } });
+      }
+      const words = k.stack(b, { width: "HUG", gap: 0, name: "Badge words" });
+      k.text(words, kind === "ios" ? "Download on the" : "Get it on", { style: s("Badge small 12"), color: "onBadge", autoWidth: true, name: "Badge small" });
+      k.text(words, kind === "ios" ? "App Store" : "Google Play", { style: s("Badge big 19"), color: "onBadge", autoWidth: true, name: "Badge big" });
+    };
+    const plate = (parent, size, ground, name = "Plate") => {
+      const p = k.stack(parent, { width: size, height: size, radius: size * 0.28, fill: ground, align: "CENTER", justify: "CENTER", name });
+      k.ellipse(p, size * 0.66, "card", { name: "Dish" });
+      k.ellipse(p, size * 0.36, "leaf", { name: "Food", absolute: { x: size * 0.26, y: size * 0.3 } });
+      k.ellipse(p, size * 0.16, "tomato", { name: "Garnish", absolute: { x: size * 0.54, y: size * 0.3 } });
+      return p;
+    };
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 96, top: 28 });
+    k.timeline(sheet, { duration: 6e3, fps: 30 });
+    nav(k, sheet, { links: ["How it works", "Recipes", "Reviews", "Help"], cta: "Get the app", style: s("Nav 16"), brandStyle: s("Brand 22") });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 48, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 26, name: "Copy" });
+    k.text(copy, "Dinner from what is already in the fridge.", { style: s("Display 72"), color: "text", name: "Headline" });
+    k.text(copy, "Photograph the shelf. Larder reads what is there, knows what is about to turn, and plans a week of dinners around it. The average household bins $38 less food a week.", { style: s("Lead 20"), color: "onPaper", name: "Lead" });
+    const get = k.stack(copy, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Get" });
+    const badges = k.stack(get, { direction: "HORIZONTAL", width: "HUG", gap: 12, wrap: true, name: "Badges" });
+    badge(badges, "ios");
+    badge(badges, "play");
+    const scan = k.stack(get, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", fill: "card", radius: 16, padding: 10, effects: [soft(0.08, 8, 24)], name: "Scan" });
+    k.vector(scan, 63, 63, scanCode(21, 3), "onCard", { name: "Scan code" });
+    k.text(scan, "Or scan with your phone", { style: s("Scan 13"), color: "onCard", width: 92, name: "Scan words" });
+    const rating = k.stack(copy, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Rating" });
+    stars(rating, 18);
+    k.text(rating, "4.8 from 61,000 ratings \xB7 free, with a $4 a month plan for families", { style: s("Proof 15"), color: "onPaper", name: "Rating words" });
+    const visual = k.stack(hero, { width: 500, align: "CENTER", padding: { top: 20, right: 0, bottom: 20, left: 0 }, name: "Visual" });
+    for (const [role, [x, y, d]] of [["sage", DISCS.wide[0]], ["butter", DISCS.wide[1]], ["peach", DISCS.wide[2]]]) k.ellipse(visual, d, role, { name: "Disc", absolute: { x, y } });
+    const phone = k.stack(visual, { width: 300, radius: 46, fill: "device", padding: 10, effects: [soft(0.28, 30, 60)], name: "Phone" });
+    const screen = k.stack(phone, { radius: 37, fill: "screen", clip: true, gap: 12, padding: { top: 18, right: 14, bottom: 0, left: 14 }, name: "Screen" });
+    const island = k.stack(screen, { align: "CENTER", name: "Island row" });
+    k.rect(island, 78, 20, "device", { radius: 10, name: "Island" });
+    k.text(screen, "Tonight", { style: s("App title 22"), color: "onCard", name: "App title" });
+    k.text(screen, "Three things to use up", { style: s("App label 12"), color: "cardMuted", name: "App label" });
+    const chips = k.stack(screen, { direction: "HORIZONTAL", gap: 6, wrap: true, name: "Chips" });
+    for (const c of USE_UP) {
+      const chip = k.stack(chips, { direction: "HORIZONTAL", width: "HUG", fill: "peach", radius: 999, padding: { top: 5, right: 10, bottom: 5, left: 10 }, name: "Chip" });
+      k.text(chip, c, { style: s("Chip 12"), color: "onCard", autoWidth: true, name: "Chip name" });
+    }
+    RECIPES.forEach(([name, meta, ground], i) => {
+      const r = k.stack(screen, { direction: "HORIZONTAL", gap: 10, align: "CENTER", fill: "card", radius: 18, padding: 8, effects: [soft(0.06, 4, 12)], name: "Recipe" });
+      plate(r, 60, ground);
+      const words = k.stack(r, { gap: 2, name: "Recipe words" });
+      k.text(words, name, { style: s("Recipe 14"), color: "onCard", name: "Recipe name" });
+      k.text(words, meta, { style: s("App label 12"), color: "cardMuted", name: "Recipe meta" });
+      if (i === 0) {
+        const added = k.stack(r, { width: 26, height: 26, radius: 13, fill: "primary", align: "CENTER", justify: "CENTER", name: "Added" });
+        tick(k, added, 14, "onPrimary", { weight: 2.5 });
+      }
+    });
+    const tabsBar = k.stack(screen, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 12, right: 26, bottom: 16, left: 26 }, name: "Tab bar" });
+    for (let i = 0; i < 4; i++) k.rect(tabsBar, 22, 22, i === 0 ? "primary" : "line", { radius: 7, name: "Tab" });
+    const saved = k.stack(visual, { width: "HUG", gap: 2, fill: "card", radius: 18, padding: { top: 12, right: 18, bottom: 12, left: 18 }, effects: [soft(0.14, 12, 30)], name: "Float card", absolute: { x: 352, y: 150 } });
+    k.text(saved, "Saved this week", { style: s("App label 12"), color: "cardMuted", autoWidth: true, name: "Saved label" });
+    k.text(saved, "$38", { style: s("Float 20"), color: "onCard", autoWidth: true, name: "Saved figure" });
+    const binned = k.stack(visual, { width: "HUG", gap: 2, fill: "card", radius: 18, padding: { top: 12, right: 18, bottom: 12, left: 18 }, effects: [soft(0.14, 12, 30)], name: "Float card", absolute: { x: 0, y: 430 } });
+    k.text(binned, "Binned", { style: s("App label 12"), color: "cardMuted", autoWidth: true, name: "Binned label" });
+    k.text(binned, "Nothing", { style: s("Float 20"), color: "onCard", autoWidth: true, name: "Binned figure" });
+    const rows = k.stack(sheet, { gap: 72, name: "Features" });
+    const feature = (title, text, ground, flip, draw) => {
+      const r = k.stack(rows, { direction: "HORIZONTAL", gap: 72, align: "CENTER", name: "Feature" });
+      const words = () => {
+        const w = k.stack(r, { gap: 14, name: "Feature copy" });
+        k.text(w, title, { style: s("Section 44"), color: "text", name: "Feature title" });
+        k.text(w, text, { style: s("Body 18"), color: "onPaper", name: "Feature text" });
+      };
+      if (!flip) words();
+      const panel = k.stack(r, { width: 540, fill: ground, radius: 36, padding: 36, align: "CENTER", name: "Feature panel" });
+      draw(panel);
+      if (flip) words();
+    };
+    feature("Photograph the shelf. That is the list.", "Larder reads labels and best-before dates from one photo, and keeps count as you cook. What needs using first goes to the top, so the spinach gets eaten on Tuesday and not found on Sunday.", "peach", false, (panel) => {
+      const card = k.stack(panel, { fill: "card", radius: 24, padding: { top: 10, right: 20, bottom: 10, left: 20 }, effects: [soft(0.08, 10, 28)], name: "Shelf card" });
+      SHELF.forEach(([item, when, soon], i) => {
+        if (i) rule(k, card, "line");
+        const l = k.stack(card, { direction: "HORIZONTAL", gap: 12, align: "CENTER", padding: { top: 12, right: 0, bottom: 12, left: 0 }, name: "Shelf item" });
+        k.ellipse(l, 12, soon ? "tomato" : "leaf", { name: "Freshness" });
+        k.text(l, item, { style: s("Item 15"), color: "onCard", name: "Item name" });
+        k.text(l, when, { style: s("Item meta 13"), color: "cardMuted", autoWidth: true, name: "Item date" });
+      });
+    });
+    feature("A week of dinners, planned in one tap.", "Tell it who is eating and how long you have. It fills the week from what you own, adds a short list for what you do not, and leaves Friday alone if you always go out on Friday.", "sage", true, (panel) => {
+      const week = k.stack(panel, { direction: "HORIZONTAL", gap: 8, name: "Week" });
+      DAYS.forEach(([day, dish], i) => {
+        const d = k.stack(week, { gap: 8, align: "CENTER", fill: i === 1 ? "primary" : "card", radius: 20, padding: { top: 14, right: 4, bottom: 14, left: 4 }, ...i === 1 ? { effects: [soft(0.2, 12, 24)] } : {}, name: "Day" });
+        k.text(d, day, { style: s("Day 13"), color: i === 1 ? "onPrimary" : "cardMuted", name: "Day name" });
+        if (dish === "Out") k.ellipse(d, 40, "lane", { name: "No dinner" });
+        else plate(d, 40, i === 1 ? "butter" : "lane", "Day plate");
+        k.text(d, dish, { style: s("Day 13"), color: i === 1 ? "onPrimary" : "onCard", name: "Day dish" });
+      });
+    });
+    feature("Cooks with you, one step at a time.", "Big type you can read from across the kitchen, timers that start themselves, and a voice that tells you when to turn the heat down. Hands covered in flour are not a problem.", "butter", false, (panel) => {
+      const step = k.stack(panel, { direction: "HORIZONTAL", gap: 20, align: "CENTER", fill: "card", radius: 24, padding: 24, effects: [soft(0.08, 10, 28)], name: "Step card" });
+      const ring = k.stack(step, { width: 96, height: 96, radius: 48, stroke: { color: "line", width: 8 }, align: "CENTER", justify: "CENTER", name: "Timer ring" });
+      k.vector(ring, 96, 96, [{ closed: false, points: Array.from({ length: 17 }, (_, i) => {
+        const a = -Math.PI / 2 + i / 16 * Math.PI * 1.3;
+        return { x: 48 + 48 * Math.cos(a), y: 48 + 48 * Math.sin(a) };
+      }) }], "primary", { name: "Timer arc", strokeWidth: 8, absolute: { x: 0, y: 0 } });
+      k.ellipse(ring, 18, "primary", { name: "Timer dot" });
+      const words = k.stack(step, { gap: 2, name: "Step words" });
+      k.text(words, "Step 3 of 6 \xB7 simmer", { style: s("Item meta 13"), color: "cardMuted", name: "Step count" });
+      k.text(words, "6:40", { style: s("Timer 40"), color: "onCard", name: "Step timer" });
+      k.text(words, "Stir in the orzo and the stock.", { style: s("Item 15"), color: "onCard", name: "Step text" });
+    });
+    const reviews = k.stack(sheet, { gap: 28, name: "Reviews" });
+    const top = k.stack(reviews, { direction: "HORIZONTAL", gap: 48, align: "CENTER", name: "Score row" });
+    const score = k.stack(top, { direction: "HORIZONTAL", width: "HUG", gap: 20, align: "CENTER", name: "Score" });
+    k.text(score, "4.8", { style: s("Score 96"), color: "text", autoWidth: true, name: "Score figure" });
+    const scoreSide = k.stack(score, { width: "HUG", gap: 6, name: "Score side" });
+    stars(scoreSide, 22);
+    k.text(scoreSide, "61,204 ratings", { style: s("Proof 15"), color: "onPaper", autoWidth: true, name: "Score count" });
+    const breakdown = k.stack(top, { gap: 5, name: "Breakdown" });
+    for (const [n, share] of BARS) {
+      const l = k.stack(breakdown, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "Bar line" });
+      k.text(l, String(n), { style: s("Item meta 13"), color: "onPaper", width: 10, name: "Bar stars" });
+      const lane = k.stack(l, { direction: "HORIZONTAL", width: 200, height: 8, radius: 4, fill: "lane", name: "Lane" });
+      k.rect(lane, Math.max(4, Math.round(200 * share)), 8, "star", { radius: 4, name: "Bar" });
+    }
+    k.text(top, "People mostly write to us on Tuesdays, about spinach.", { style: s("Section 30"), color: "text", width: 380, name: "Reviews title" });
+    const wall = k.stack(reviews, { direction: "HORIZONTAL", gap: 24, name: "Wall" });
+    const big = k.stack(wall, { gap: 20, fill: "peach", radius: 32, padding: 40, name: "Review big" });
+    stars(big, 20);
+    k.text(big, "\u201CWe are a family of five and I had stopped opening the vegetable drawer out of guilt. Six weeks in, the food bin goes out half empty and nobody has asked what is for dinner since September.\u201D", { style: s("Review 28"), color: "onCard", name: "Review words" });
+    k.text(big, "Joanna P. \xB7 App Store \xB7 family plan", { style: s("Small 14"), color: "onCard", name: "Reviewer" });
+    const small = k.stack(wall, { width: 420, gap: 24, name: "Review column" });
+    for (const [words, who, ground] of [["\u201CIt planned around half a lemon. Half a lemon!\u201D", "Deepak R. \xB7 Google Play", "butter"], ["\u201CThe step timers are the first cooking feature I have ever actually used twice.\u201D", "Marit S. \xB7 App Store", "sage"]]) {
+      const c = k.stack(small, { gap: 14, fill: ground, radius: 32, padding: 32, name: "Review small" });
+      stars(c, 16);
+      k.text(c, words, { style: s("Review 20"), color: "onCard", name: "Review words" });
+      k.text(c, who, { style: s("Small 14"), color: "onCard", name: "Reviewer" });
+    }
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", fill: "primary", radius: 36, padding: 52, name: "Band" });
+    const bandCopy = k.stack(band, { gap: 10, name: "Band copy" });
+    k.text(bandCopy, "Tonight\u2019s dinner is already in there.", { style: s("Section 44"), color: "onPrimary", name: "Band title" });
+    k.text(bandCopy, "Free for one household. iPhone, iPad and Android.", { style: s("Body 18"), color: "onPrimary", name: "Band text" });
+    const bandBadges = k.stack(band, { direction: "HORIZONTAL", width: "HUG", gap: 12, wrap: true, name: "Band badges" });
+    badge(bandBadges, "ios");
+    badge(bandBadges, "play");
+    footer(k, sheet, {
+      about: "Meal planning that starts with what you already bought. Made in Bristol.",
+      columns: [["App", ["How it works", "Recipes", "Family plan"]], ["Help", ["Getting started", "Contact", "Accessibility"]], ["Larder", ["About", "Privacy", "Press kit"]]],
+      legal: "\xA9 2026 Larder Kitchen Ltd. App Store is a service mark of Apple Inc. Google Play is a trademark of Google LLC.",
+      brandStyle: s("Brand 22"),
+      headStyle: s("Foot head 14"),
+      linkStyle: s("Small 14"),
+      ruleColor: "line"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    respond(k, sheet, s, {
+      stack: ["Hero", "Feature", "Score row", "Wall", "Band", "Footer columns"],
+      stackMobile: ["Get"],
+      restyle: {
+        "Display 72": { laptop: "Display 62", tablet: "Display 50", mobile: "Display 38" },
+        "Section 44": { tablet: "Section 30", mobile: "Section 30" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Body 18": { mobile: "Body 16" },
+        "Review 28": { tablet: "Review 20", mobile: "Review 20" },
+        "Score 96": { mobile: "Score 64" }
+      },
+      gap: { tablet: 72, mobile: 56 },
+      tweak: (kit, id, size) => {
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        const pad = (v, h = v) => ({ top: v, right: h, bottom: v, left: h });
+        if (size === "laptop") {
+          each("Hero", { itemSpacing: 32 });
+          each("Feature", { itemSpacing: 56 });
+          each("Feature panel", { width: 500 });
+        }
+        if (size === "tablet" || size === "mobile") {
+          const w = size === "tablet" ? 672 : 335, shift = (w - 500) / 2;
+          each("Hero", { itemSpacing: 40 });
+          each("Feature", { itemSpacing: 24 });
+          each("Features", { itemSpacing: 56 });
+          each("Score row", { itemSpacing: 24 });
+          each("Band", { itemSpacing: 24, padding: pad(36) });
+          each("Badges", { layoutSizingHorizontal: "HUG" });
+          each("Band badges", { layoutSizingHorizontal: "HUG" });
+          each("Score", { layoutSizingHorizontal: "HUG" });
+          const discs = kit.named(id, "Disc");
+          (size === "tablet" ? DISCS.wide : DISCS.narrow).forEach(([x, y, d], i) => kit.patch(discs[i], { x: x + (size === "tablet" ? shift : 0), y, width: d, height: d }));
+          const floats = kit.named(id, "Float card");
+          kit.patch(floats[0], size === "tablet" ? { x: 352 + shift } : { x: 204, y: 74 });
+          kit.patch(floats[1], { x: size === "tablet" ? shift : 0 });
+          each("Reviews title", { layoutSizingHorizontal: "FILL" });
+        }
+        if (size === "mobile") {
+          each("Scan", { visible: false });
+          each("Store badge", { padding: { top: 10, right: 12, bottom: 10, left: 10 }, itemSpacing: 6 });
+          each("Badges", { itemSpacing: 8, layoutSizingHorizontal: "FILL" });
+          each("Band badges", { itemSpacing: 8, layoutSizingHorizontal: "FILL" });
+          each("Feature panel", { padding: pad(18), cornerRadius: 28 });
+          each("Week", { itemSpacing: 4 });
+          each("Review big", { padding: pad(24), cornerRadius: 24 });
+          each("Review small", { padding: pad(24), cornerRadius: 24 });
+          each("Band", { padding: pad(28, 22), cornerRadius: 28 });
+          each("Step card", { padding: pad(16), itemSpacing: 14 });
+          each("Footer lists", { itemSpacing: 16 });
+          each("Rating", { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN", itemSpacing: 6 });
+          each("Day dish", { visible: false });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  saas_app_download_default
+};