@popcraft/kit 0.24.2 → 0.25.0

package/dist/chunks/chunk-FOH67YBV.js

@@ -0,0 +1,358 @@
+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 {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  CONTENT,
+  columns,
+  compactNav,
+  footer,
+  respond,
+  rule,
+  typeScale
+} from "./chunk-G5CURQ6H.js";
+import {
+  buttons,
+  nav,
+  page
+} from "./chunk-YKXCPYWJ.js";
+import {
+  board,
+  reboard
+} from "./chunk-QLV6445V.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/saas-security.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var CONTROLS = ["AES-256 at rest, a key per customer", "TLS 1.3 in transit, everywhere", "SSO, SCIM and hardware keys", "Pen-tested by Cure53, August 2026"];
+var BADGES = [["SOC 2", "Type II", "Audited Aug 2026"], ["ISO", "27001", "Certified Mar 2026"], ["GDPR", "DPA", "EU data stays in the EU"], ["HIPAA", "BAA", "On the Enterprise plan"], ["CCPA", "Ready", "No data is sold, ever"]];
+var HOPS = [
+  ["Your dashboard", "A person changes a flag. Signed in with SSO and a second factor.", "TLS 1.3"],
+  ["Control plane", "The change is checked, logged for 400 days and signed.", "mTLS"],
+  ["Edge, 48 regions", "Signed rules only. No customer data is stored at the edge.", "Signed payload"],
+  ["Your app", "The SDK checks the signature, then evaluates the flag on the device.", ""]
+];
+var SUBS = [
+  ["Amazon Web Services", "Hosting and databases", "All customer data", "Frankfurt or Virginia, your choice"],
+  ["Cloudflare", "Edge delivery", "Signed flag rules", "Global"],
+  ["Datadog", "Logs and metrics", "Request metadata, no payloads", "EU"],
+  ["Stripe", "Billing", "Billing contacts, card tokens", "US"],
+  ["Postmark", "Account email", "Names and email addresses", "US"],
+  ["Zendesk", "Support tickets", "What you send us in a ticket", "EU"]
+];
+var SLA = [["Critical", "4 hours", "7 days", "$5,000 to $15,000"], ["High", "1 day", "30 days", "$1,500 to $5,000"], ["Medium", "3 days", "90 days", "$300 to $1,500"]];
+var DAYS = Array.from({ length: 90 }, (_, i) => i === 61 ? 2 : i === 23 || i === 62 ? 1 : 0);
+var SHIELD = { w: 380, h: 440 };
+var shield = (w, h, inset) => {
+  const l = inset, r = w - inset, t = inset, mid = w / 2, b = h - inset, shoulder = t + (h - 2 * inset) * 0.14;
+  return { closed: true, points: [
+    { x: mid, y: t },
+    { x: r, y: shoulder },
+    { x: r, y: h * 0.5, handleOut: { x: r, y: h * 0.78 } },
+    { x: mid, y: b, handleIn: { x: mid + (r - mid) * 0.7, y: b - h * 0.12 }, handleOut: { x: mid - (r - mid) * 0.7, y: b - h * 0.12 } },
+    { x: l, y: h * 0.5, handleIn: { x: l, y: h * 0.78 } },
+    { x: l, y: shoulder }
+  ] };
+};
+var sealTicks = (d, n) => Array.from({ length: n }, (_, i) => {
+  const a = i / n * Math.PI * 2, r0 = d / 2 - 9, r1 = d / 2 - 3, c = d / 2;
+  return { closed: false, points: [{ x: c + r0 * Math.cos(a), y: c + r0 * Math.sin(a) }, { x: c + r1 * Math.cos(a), y: c + r1 * Math.sin(a) }] };
+});
+var LOOP = 6e3;
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Trust tag", preset: "fade-in", at: 100, params: { duration: 500 } },
+  { layer: "Headline", preset: "rise-in", at: 200, params: { duration: 700 } },
+  { layer: "Lead", preset: "rise-in", at: 350 },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 500, stagger: { delay: 100 } },
+  { layer: "Status", preset: "fade-in", at: 800, params: { duration: 500 } },
+  { layer: "Shield line", preset: "fade-in", at: 300, params: { duration: 700 }, stagger: { delay: 160 } },
+  { layer: "Shield core", preset: "pop-in", at: 900, params: { duration: 500 } },
+  { layer: "Control", preset: "slide-in", at: 1400, params: { duration: 450, direction: "left", distance: 40 }, stagger: { delay: 420 } },
+  { layer: "Badge", preset: "rise-in", at: 1200, params: { duration: 500 }, stagger: { delay: 110 } },
+  { layer: "Day", preset: "fade-in", at: 1500, params: { duration: 200 }, stagger: { delay: 14 } }
+];
+var counts = [
+  { layer: "Uptime figure", at: 900, duration: 2400, counter: { from: 99.2, to: 99.99, decimals: 2, suffix: "%" } },
+  { layer: "Uptime big", at: 1600, duration: 2200, counter: { from: 99.2, to: 99.99, decimals: 2, suffix: "%" } }
+];
+var saas_security_default = defineTemplate({
+  id: "web-saas-security",
+  meta: {
+    name: "SaaS security and trust page",
+    description: "A security page drawn like an engineering sheet: a shield of nested outlines with a scan line passing down it while four controls tick on and the uptime counts to 99.99%, then compliance badges drawn plainly, the path your data takes with what protects each hop, the sub-processors as a table, ninety days of uptime as ninety bars, and \u201Creport a vulnerability\u201D with response times and rewards. Night blue and one mint, desktop to phone",
+    category: "web",
+    tags: ["saas", "security", "trust", "trust centre", "compliance", "soc 2", "gdpr", "uptime", "status", "sub-processors", "vulnerability", "dark", "landing page", "website", "animation", "responsive"],
+    platforms: ["web"],
+    formats: ["page", "demo"],
+    useCases: ["brand-intro", "report", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("SaaS security and trust page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#0A1022", text: "#EAF0FA", onPaper: "#A7B2CB", primary: "#62E8AC", onPrimary: "#03150D", card: "#111A33", onCard: "#EAF0FA", cardMuted: "#A7B2CB" },
+      { name: "Kiln" }
+    );
+    k.palette({ hairline: "#25304F", signal: "#62E8AC", signalInk: "#62E8AC", amber: "#F2B84B", red: "#F0705F", cardLine: "#2A3658", deep: "#0D1630" });
+    const s = typeScale(k, {
+      "Nav 15": { size: 15, fontWeight: 600, lineHeight: 24 },
+      "Brand 21": { ...MONO, size: 21, fontWeight: 800, letterSpacing: -1, lineHeight: 28 },
+      "Button 15": { size: 15, fontWeight: 700, lineHeight: 22 },
+      "Tag 12": { ...MONO, size: 12, fontWeight: 600, letterSpacing: 1.3, lineHeight: 16, textCase: "UPPER" },
+      "Display 64": { size: 64, fontWeight: 700, letterSpacing: -2.8, lineHeight: 66 },
+      "Display 54": { size: 54, fontWeight: 700, letterSpacing: -2.3, lineHeight: 56 },
+      "Display 44": { size: 44, fontWeight: 700, letterSpacing: -1.8, lineHeight: 46 },
+      "Display 34": { size: 34, fontWeight: 700, letterSpacing: -1.2, lineHeight: 37 },
+      "Lead 19": { size: 19, fontWeight: 400, lineHeight: 30 },
+      "Lead 17": { size: 17, fontWeight: 400, lineHeight: 27 },
+      "Mono 14": { ...MONO, size: 14, fontWeight: 500, lineHeight: 22 },
+      "Mono strong 14": { ...MONO, size: 14, fontWeight: 700, lineHeight: 22 },
+      "Control 16": { size: 16, fontWeight: 600, lineHeight: 22 },
+      "Section 40": { size: 40, fontWeight: 700, letterSpacing: -1.6, lineHeight: 43 },
+      "Section 30": { size: 30, fontWeight: 700, letterSpacing: -1, lineHeight: 34 },
+      "Seal 22": { size: 22, fontWeight: 800, letterSpacing: -0.6, lineHeight: 24, textAlign: "CENTER" },
+      "Seal 12": { ...MONO, size: 12, fontWeight: 700, letterSpacing: 1, lineHeight: 16, textCase: "UPPER", textAlign: "CENTER" },
+      "Card 19": { size: 19, fontWeight: 700, letterSpacing: -0.3, lineHeight: 25 },
+      "Body 16": { size: 16, fontWeight: 400, lineHeight: 25 },
+      "Small 14": { size: 14, fontWeight: 400, lineHeight: 21 },
+      "Cell 15": { size: 15, fontWeight: 500, lineHeight: 22 },
+      "Cell strong 15": { size: 15, fontWeight: 700, lineHeight: 22 },
+      "Figure 88": { ...MONO, size: 88, fontWeight: 700, letterSpacing: -5, lineHeight: 88 },
+      "Figure 56": { ...MONO, size: 56, fontWeight: 700, letterSpacing: -3, lineHeight: 58 },
+      "Foot head 14": { size: 14, fontWeight: 800, lineHeight: 22 }
+    });
+    buttons(k, { style: s("Button 15"), pad: [13, 22], radius: 8 });
+    k.component("Button dark", { direction: "HORIZONTAL", width: "HUG", radius: 8, align: "CENTER", fill: "onPrimary", padding: { top: 13, right: 22, bottom: 13, left: 22 }, props: { Label: "Read the disclosure policy" } }, (id) => {
+      k.propText(id, "Label", { style: s("Button 15"), color: "primary", autoWidth: true });
+    });
+    const tag = (parent, label, ink, name = "Tag") => k.text(parent, label, { style: s("Tag 12"), color: ink, name });
+    const panel = { fill: "card", radius: 16, stroke: { color: "cardLine", width: 1, align: "INSIDE" } };
+    const head = (parent, label, title, lead, name) => {
+      const h = k.stack(parent, { direction: "HORIZONTAL", gap: 56, align: "MAX", name: `${name} head` });
+      const left = k.stack(h, { gap: 12, name: `${name} title block` });
+      tag(left, label, "onPaper");
+      k.text(left, title, { style: s("Section 40"), color: "text", name: `${name} title` });
+      k.text(h, lead, { style: s("Body 16"), color: "onPaper", width: 440, name: `${name} lead` });
+    };
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 96, top: 28 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    nav(k, sheet, { links: ["Compliance", "Data flow", "Sub-processors", "Uptime", "Report"], cta: "Get the SOC 2 report", style: s("Nav 15"), brandStyle: s("Brand 21") });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 64, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 22, name: "Hero copy" });
+    const tagRow = k.stack(copy, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", name: "Trust tag" });
+    k.rect(tagRow, 8, 8, "primary", { name: "Tag mark" });
+    k.text(tagRow, "Trust centre \xB7 updated 2 October 2026", { style: s("Tag 12"), color: "text", autoWidth: true, name: "Tag words" });
+    k.text(copy, "Security you can read, not a wall of badges.", { style: s("Display 64"), color: "text", name: "Headline" });
+    k.text(copy, "Kiln sits in the request path of 2,300 products, so this page says exactly what we hold, where it goes, who else touches it and how to tell us we got something wrong.", { style: s("Lead 19"), color: "onPaper", name: "Lead" });
+    const ctas = k.stack(copy, { direction: "HORIZONTAL", gap: 10, wrap: true, name: "CTAs" });
+    k.instance(ctas, "Button", { Label: "Request the SOC 2 report" }, { name: "CTA primary" });
+    k.instance(ctas, "Button quiet", { Label: "Read the whitepaper" }, { name: "CTA quiet" });
+    const status = k.stack(copy, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", ...panel, radius: 999, padding: { top: 8, right: 16, bottom: 8, left: 12 }, name: "Status" });
+    const lamp = k.ellipse(status, 10, "signal", { name: "Status lamp" });
+    k.animate(lamp, "opacity", [0, 1, 2, 3, 4, 5, 6].map((i) => ({ t: i * 1e3, v: i % 2 ? 0.35 : 1, ...i < 6 ? { ease: ease.inOut("sine") } : {} })));
+    k.text(status, "All systems normal", { style: s("Control 16"), color: "onCard", autoWidth: true, name: "Status words" });
+    k.text(status, "99.99%", { style: s("Mono strong 14"), color: "signalInk", autoWidth: true, name: "Uptime figure" });
+    k.text(status, "over 90 days", { style: s("Mono 14"), color: "cardMuted", autoWidth: true, name: "Status span" });
+    const BW = 520, BH = 460;
+    const stage = board(k, hero, BW, BH, 1, "Shield stage");
+    for (const [i, inset] of [0, 26, 52, 78].entries()) k.vector(stage, SHIELD.w, SHIELD.h, [shield(SHIELD.w, SHIELD.h, inset + 2)], "signal", { name: "Shield line", strokeWidth: 2, opacity: [1, 0.6, 0.38, 0.22][i], absolute: { x: 0, y: 10 } });
+    const core = k.stack(stage, { width: 96, height: 96, radius: 28, fill: "primary", align: "CENTER", justify: "CENTER", name: "Shield core", absolute: { x: SHIELD.w / 2 - 48, y: 10 + SHIELD.h * 0.42 - 48 } });
+    tick(k, core, 44, "onPrimary", { weight: 6 });
+    const scan = k.rect(stage, SHIELD.w - 24, 3, "signal", { name: "Scan line", absolute: { x: 12, y: 40 } });
+    k.animate(scan, "translateY", [{ t: 0, v: 0, ease: ease.hold }, { t: 1200, v: 0, ease: ease.inOut("sine") }, { t: 4200, v: SHIELD.h - 110, ease: ease.hold }, { t: LOOP, v: SHIELD.h - 110 }]);
+    k.animate(scan, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: 1200, v: 0.9, ease: ease.linear }, { t: 3900, v: 0.9, ease: ease.linear }, { t: 4200, v: 0 }]);
+    const controls = k.stack(stage, { width: 300, gap: 10, name: "Controls", absolute: { x: BW - 300, y: 96 } });
+    for (const c of CONTROLS) {
+      const row = k.stack(controls, { direction: "HORIZONTAL", gap: 12, align: "CENTER", ...panel, radius: 12, padding: { top: 12, right: 14, bottom: 12, left: 12 }, name: "Control" });
+      const dot = k.stack(row, { width: 26, height: 26, radius: 9, fill: "primary", align: "CENTER", justify: "CENTER", name: "Control mark" });
+      tick(k, dot, 14, "onPrimary", { weight: 3 });
+      k.text(row, c, { style: s("Control 16"), color: "onCard", name: "Control words" });
+    }
+    const comp = k.stack(sheet, { gap: 32, name: "Compliance" });
+    head(comp, "01 \xB7 Compliance", "Audited by other people, every year.", "Reports and certificates are sent under NDA within one working day. The badges below are our own drawings, not the auditors\u2019 seals.", "Compliance");
+    const badges = k.stack(comp, { direction: "HORIZONTAL", gap: 16, wrap: true, name: "Badges" });
+    for (const [a, b, note] of BADGES) {
+      const card = k.stack(badges, { width: 227, gap: 14, align: "CENTER", ...panel, padding: { top: 24, right: 16, bottom: 22, left: 16 }, name: "Badge" });
+      const seal = k.stack(card, { width: 116, height: 116, align: "CENTER", justify: "CENTER", gap: 0, name: "Seal" });
+      k.ellipse(seal, 116, "deep", { name: "Seal ground", stroke: { color: "signal", width: 2, align: "INSIDE" }, absolute: { x: 0, y: 0 } });
+      k.vector(seal, 116, 116, sealTicks(116, 36), "signal", { name: "Seal ticks", strokeWidth: 1.5, opacity: 0.7, absolute: { x: 0, y: 0 } });
+      k.text(seal, a, { style: s("Seal 22"), color: "onCard", name: "Seal name" });
+      k.text(seal, b, { style: s("Seal 12"), color: "signalInk", name: "Seal kind" });
+      k.text(card, note, { style: s("Small 14"), color: "cardMuted", align: "CENTER", name: "Badge note" });
+    }
+    const flow = k.stack(sheet, { gap: 32, name: "Flow" });
+    head(flow, "02 \xB7 Data flow", "Where a flag goes, and what guards each hop.", "Kiln never receives your users\u2019 data: flags are evaluated inside your app. What crosses our network is the rule, signed.", "Flow");
+    const hops = k.stack(flow, { direction: "HORIZONTAL", gap: 0, align: "MIN", name: "Hops" });
+    HOPS.forEach(([name, what, guard], i) => {
+      const hop = k.stack(hops, { gap: 10, ...panel, padding: 22, name: "Hop" });
+      tag(hop, `Stop ${i + 1}`, "signalInk");
+      k.text(hop, name, { style: s("Card 19"), color: "onCard", name: "Hop name" });
+      k.text(hop, what, { style: s("Small 14"), color: "cardMuted", name: "Hop what" });
+      if (!guard) return;
+      const link = k.stack(hops, { width: 92, height: 120, gap: 8, align: "CENTER", justify: "CENTER", name: "Link" });
+      k.text(link, guard, { style: s("Tag 12"), color: "onPaper", align: "CENTER", name: "Link guard" });
+      const wire = k.stack(link, { width: 76, height: 10, name: "Link wire" });
+      k.rect(wire, 76, 2, "hairline", { name: "Wire", absolute: { x: 0, y: 4 } });
+      const packet = k.rect(wire, 10, 10, "signal", { radius: 3, name: "Packet", absolute: { x: 0, y: 0 } });
+      const t0 = 1400 + i * 1100;
+      k.animate(packet, "translateX", [{ t: 0, v: 0, ease: ease.hold }, { t: t0, v: 0, ease: ease.inOut("cubic") }, { t: t0 + 800, v: 66, ease: ease.hold }, { t: LOOP, v: 66 }]);
+      k.animate(packet, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: t0, v: 1, ease: ease.hold }, { t: t0 + 1100, v: 1, ease: ease.linear }, { t: t0 + 1400, v: 0 }]);
+    });
+    const subs = k.stack(sheet, { gap: 32, name: "Sub-processors" });
+    head(subs, "03 \xB7 Sub-processors", "Six companies touch your data. Here they are.", "You are told 30 days before one is added, and can object. Subscribe to changes with any address.", "Subs");
+    const table = k.stack(subs, { gap: 0, ...panel, clip: true, name: "Table" });
+    const COLS = [260, 240, 300];
+    const header = k.stack(table, { direction: "HORIZONTAL", gap: 16, fill: "deep", padding: { top: 14, right: 24, bottom: 14, left: 24 }, name: "Table header" });
+    ["Company", "What it does for us", "What it sees", "Where"].forEach((h, i) => k.text(header, h, { style: s("Tag 12"), color: "cardMuted", name: `Col ${i + 1}`, ...i < 3 ? { width: COLS[i] } : {} }));
+    for (const [name, purpose, data, where] of SUBS) {
+      rule(k, table, "cardLine");
+      const row = k.stack(table, { direction: "HORIZONTAL", gap: 16, align: "CENTER", padding: { top: 15, right: 24, bottom: 15, left: 24 }, name: "Table row" });
+      k.text(row, name, { style: s("Cell strong 15"), color: "onCard", width: COLS[0], name: "Col 1" });
+      k.text(row, purpose, { style: s("Cell 15"), color: "cardMuted", width: COLS[1], name: "Col 2" });
+      k.text(row, data, { style: s("Cell 15"), color: "cardMuted", width: COLS[2], name: "Col 3" });
+      k.text(row, where, { style: s("Cell 15"), color: "onCard", name: "Col 4" });
+    }
+    const up = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", name: "Uptime" });
+    const upCopy = k.stack(up, { width: 400, gap: 10, name: "Uptime copy" });
+    tag(upCopy, "04 \xB7 Uptime, last 90 days", "onPaper");
+    k.text(upCopy, "99.99%", { style: s("Figure 88"), color: "text", name: "Uptime big" });
+    k.text(upCopy, "One incident: 11 minutes of slow flag updates on 2 September. Flags already in your app kept working. The write-up is public.", { style: s("Body 16"), color: "onPaper", name: "Uptime text" });
+    const strip = k.stack(up, { gap: 12, ...panel, padding: 24, name: "Uptime card" });
+    const bars = k.stack(strip, { direction: "HORIZONTAL", gap: 3, height: 72, name: "Days" });
+    for (const d of DAYS) k.rect(bars, "FILL", 72, d === 2 ? "red" : d === 1 ? "amber" : "signal", { radius: 2, name: "Day" });
+    const axis = k.stack(strip, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", name: "Days axis" });
+    for (const l of ["5 July", "19 August", "2 October"]) k.text(axis, l, { style: s("Mono 14"), color: "cardMuted", autoWidth: true, name: "Axis date" });
+    rule(k, strip, "cardLine");
+    const legend = k.stack(strip, { direction: "HORIZONTAL", gap: 20, wrap: true, name: "Legend" });
+    for (const [fill, label] of [["signal", "87 clean days"], ["amber", "2 days with a slow minute"], ["red", "1 incident, 11 minutes"]]) {
+      const item = k.stack(legend, { direction: "HORIZONTAL", width: "HUG", gap: 8, align: "CENTER", name: "Legend item" });
+      k.rect(item, 10, 10, fill, { radius: 2, name: "Legend mark" });
+      k.text(item, label, { style: s("Small 14"), color: "onCard", autoWidth: true, name: "Legend words" });
+    }
+    const report = k.stack(sheet, { direction: "HORIZONTAL", gap: 48, fill: "primary", radius: 24, padding: 48, name: "Report" });
+    const repCopy = k.stack(report, { gap: 16, name: "Report copy" });
+    tag(repCopy, "05 \xB7 Report a vulnerability", "onPrimary");
+    k.text(repCopy, "Found something? Tell us, and we will thank you for it.", { style: s("Section 40"), color: "onPrimary", name: "Report title" });
+    k.text(repCopy, "Write to security@kiln.example. A person answers, we will not send lawyers, and we pay for what you find. Please give us 90 days before you publish.", { style: s("Lead 19"), color: "onPrimary", name: "Report text" });
+    const key = k.stack(repCopy, { gap: 2, name: "Key" });
+    tag(key, "PGP key", "onPrimary");
+    k.text(key, "7A1C 9F3E 52D0 B8A4 \xB7 0C6E 41F7 2B9D 83E5", { style: s("Mono strong 14"), color: "onPrimary", name: "Fingerprint" });
+    k.instance(repCopy, "Button dark", { Label: "Read the disclosure policy" }, { name: "Report button" });
+    const sla = k.stack(report, { width: 500, gap: 0, fill: "paper", radius: 16, padding: { top: 8, right: 22, bottom: 8, left: 22 }, name: "SLA card" });
+    const slaHead = k.stack(sla, { direction: "HORIZONTAL", gap: 12, padding: { top: 12, right: 0, bottom: 12, left: 0 }, name: "SLA header" });
+    ["Severity", "First reply", "Fixed within", "Reward"].forEach((h, i) => k.text(slaHead, h, { style: s("Tag 12"), color: "onPaper", name: `SLA col ${i + 1}`, ...i < 3 ? { width: [96, 92, 100][i] } : {} }));
+    for (const [sev, reply, fix, reward] of SLA) {
+      rule(k, sla, "hairline");
+      const row = k.stack(sla, { direction: "HORIZONTAL", gap: 12, align: "CENTER", padding: { top: 14, right: 0, bottom: 14, left: 0 }, name: "SLA row" });
+      k.text(row, sev, { style: s("Cell strong 15"), color: "text", width: 96, name: "SLA col 1" });
+      k.text(row, reply, { style: s("Cell 15"), color: "text", width: 92, name: "SLA col 2" });
+      k.text(row, fix, { style: s("Cell 15"), color: "text", width: 100, name: "SLA col 3" });
+      k.text(row, reward, { style: s("Cell 15"), color: "text", name: "SLA col 4" });
+    }
+    footer(k, sheet, {
+      about: "Feature flags and configuration, delivered from 48 regions. Evaluated in your app, never on our servers.",
+      columns: [["Trust", ["Compliance", "Data flow", "Sub-processors", "Status"]], ["Legal", ["DPA", "Privacy", "Terms"]], ["Security", ["Report a vulnerability", "Disclosure policy", "security.txt"]]],
+      legal: "\xA9 2026 Kiln Systems GmbH, Berlin. SOC 2 and ISO 27001 are the marks of their owners; the badges on this page are illustrations.",
+      brandStyle: s("Brand 21"),
+      headStyle: s("Foot head 14"),
+      linkStyle: s("Small 14"),
+      ruleColor: "hairline"
+    });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    respond(k, sheet, s, {
+      stack: ["Hero", "Compliance head", "Flow head", "Subs head", "Hops", "Uptime", "Report", "Footer columns"],
+      restyle: {
+        "Display 64": { laptop: "Display 54", tablet: "Display 44", mobile: "Display 34" },
+        "Section 40": { tablet: "Section 30", mobile: "Section 30" },
+        "Lead 19": { mobile: "Lead 17" },
+        "Figure 88": { mobile: "Figure 56" }
+      },
+      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 });
+        const inside = CONTENT[size];
+        if (size === "laptop") {
+          each("Hero", { itemSpacing: 40 });
+          columns(kit, id, "Badge", 5, 16, inside);
+          each("Link", { width: 80 });
+          each("Col 3", { width: 260 });
+        }
+        if (size === "tablet") {
+          compactNav(kit, id, ["Uptime", "Report"], 18);
+          columns(kit, id, "Badge", 3, 16, inside);
+          each("Col 1", { width: 170 });
+          each("Col 2", { width: 150 });
+          each("Col 3", { width: 170 });
+        }
+        if (size === "tablet" || size === "mobile") {
+          each("Hero", { itemSpacing: 40, counterAxisAlignItems: "MIN" });
+          for (const n of ["Compliance head", "Flow head", "Subs head"]) each(n, { itemSpacing: 12, counterAxisAlignItems: "MIN" });
+          each("Hops", { counterAxisAlignItems: "MIN" });
+          each("Link", { layoutSizingHorizontal: "FIXED", width: 160, height: 64 });
+          each("Uptime", { itemSpacing: 28, counterAxisAlignItems: "MIN" });
+          each("Uptime copy", { layoutSizingHorizontal: "FILL" });
+          each("Report", { itemSpacing: 28, padding: pad(36) });
+          each("SLA card", { layoutSizingHorizontal: "FILL" });
+        }
+        if (size === "mobile") {
+          reboard(kit, id, "Shield stage", 0.64);
+          columns(kit, id, "Badge", 2, 12, inside);
+          each("Badges", { itemSpacing: 12, counterAxisSpacing: 12 });
+          each("Col 2", { visible: false });
+          each("Col 3", { visible: false });
+          each("Col 1", { width: 150 });
+          each("Table header", { padding: pad(12, 16) });
+          each("Table row", { padding: pad(13, 16) });
+          each("Days", { itemSpacing: 1, height: 56 });
+          for (const n of kit.named(id, "Day")) kit.patch(n, { height: 56 });
+          each("Uptime card", { padding: pad(16) });
+          each("Report", { padding: pad(26, 22) });
+          each("SLA card", { padding: { top: 6, right: 14, bottom: 6, left: 14 } });
+          each("Status span", { visible: false });
+          each("SLA col 1", { width: 76 });
+          each("SLA col 2", { width: 72 });
+          each("SLA col 3", { visible: false });
+          each("SLA header", { itemSpacing: 8 });
+          each("SLA row", { itemSpacing: 8 });
+          each("Footer lists", { itemSpacing: 16 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  saas_security_default
+};

package/dist/chunks/chunk-FOHHZR6N.js

@@ -0,0 +1,257 @@
+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 {
+  cased,
+  st
+} from "./chunk-ZJZ6HKBP.js";
+import {
+  disc,
+  shape,
+  sway,
+  turn
+} from "./chunk-EB663FLR.js";
+import {
+  burstPath
+} from "./chunk-YNOCYFZ4.js";
+import {
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  bloom,
+  glow,
+  grain,
+  hardShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  box,
+  curve3,
+  line,
+  poly,
+  pt3,
+  rng
+} from "./chunk-BNVLVZUT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/themes/festival-presale-food-kit.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var W = 3e3;
+var mover = (k, still) => (id, path, amp, cycles = 1, phase = 0) => {
+  if (!still) sway(k, id, path, amp, cycles, phase);
+};
+function wall(k, f, still) {
+  const move = mover(k, still);
+  const planks = [], grainLines = [], knots = [];
+  const r = rng(17);
+  for (let x = 0; x <= W; x += 96) planks.push(line(x, 0, x, 3e3));
+  for (let i = 0; i < 160; i++) {
+    const x = Math.floor(r() * 31) * 96 + 14 + r() * 60, y = r() * 2900, len = 90 + r() * 200;
+    grainLines.push(curve3([{ x, y }, { x: x + 6, y: y + len * 0.5 }, { x: x - 2, y: y + len }], 0.3));
+    if (i % 5 === 0) knots.push(disc(x + 10, y + len * 0.4, 7, 12));
+  }
+  shape(k, f, grainLines, "kraft", { name: "Wood grain", strokeWidth: 3, opacity: 0.9 });
+  shape(k, f, knots, "crust", { name: "Knots", opacity: 0.35 });
+  shape(k, f, planks, "crateDark", { name: "Plank seams", strokeWidth: 3, opacity: 0.32 });
+  const warm = glow(k, f, { x: 1500, y: 800, w: 3400, h: 1300, role: "bulb", alpha: 0.35, name: "Bulb light" });
+  move(warm, "opacity", 0.12, 2);
+  glow(k, f, { x: 1500, y: 2700, w: 3600, h: 900, role: "ink", alpha: 0.18, name: "Table shade" });
+  k.patch(f, { effects: grain(0.07, 2, 23) });
+}
+function awning(k, f, still) {
+  const move = mover(k, still);
+  const sw = 110, drop = 200, scallop = 60;
+  const stripe = (x) => ({ closed: true, points: [pt3(x, -10), pt3(x + sw, -10), { ...pt3(x + sw, drop), handleOut: pt3(x + sw, drop + scallop) }, { ...pt3(x, drop), handleIn: pt3(x, drop + scallop) }] });
+  const red = [], cream = [];
+  for (let i = 0, x = 0; x < W; i++, x += sw) (i % 2 ? cream : red).push(stripe(x));
+  k.rect(f, W, 70, [k.gradient({ from: "ink", to: "ink", fromOpacity: 0.3, toOpacity: 0, angle: 90 })], { name: "Awning shade", absolute: { x: 0, y: drop + 10 } });
+  for (const [paths, role] of [[cream, "awningCream"], [red, "awningRed"]]) for (const half of [0, 1]) {
+    const id = shape(k, f, paths.filter((p) => (p.points[0].x < W / 2 ? 0 : 1) === half), role, { name: "Awning stripes", effects: [hardShadow(k, "ink", 0, 6, 0.28)] });
+    move(id, "translateY", 2.5, 2, role === "awningRed" ? 0 : 0.12);
+  }
+  shape(k, f, [box(0, 0, W, 26)], "wine", { name: "Awning rail" });
+  const folds = [];
+  for (let x = sw; x < W; x += sw) folds.push(line(x, 26, x, drop));
+  shape(k, f, folds, "ink", { name: "Awning folds", strokeWidth: 2, opacity: 0.15 });
+  const at = (t) => ({ x: W * t, y: 262 + 44 * Math.sin(t * Math.PI * 6 - Math.PI / 2) * 0.5 + 22 });
+  shape(k, f, [curve3(Array.from({ length: 61 }, (_, i) => at(i / 60)), 0.2)], "ink", { name: "Bulb wire", strokeWidth: 3 });
+  for (let g = 0; g < 3; g++) {
+    const bulbs = [], caps = [];
+    for (let i = g; i < 40; i += 3) {
+      const p = at((i + 0.5) / 40);
+      bulbs.push(disc(p.x, p.y + 16, 10, 13));
+      caps.push(box(p.x - 5, p.y, 10, 7));
+    }
+    shape(k, f, caps, "ink", { name: "Bulb caps" });
+    const id = shape(k, f, bulbs, "bulb", { name: "Bulbs", effects: [bloom(k, "bulb", 22, 0.95)] });
+    k.patch(id, { opacity: 0.72 });
+    move(id, "opacity", 0.28, 2 + g, g / 3);
+  }
+}
+function table(k, f, still) {
+  const move = mover(k, still);
+  const T = 200, S = 1.3;
+  const X = (x) => 900 + x * S;
+  const bottle = (x, h, w, glass2, label) => {
+    shape(k, f, [poly([[x - w / 2, T], [x - w / 2, T - h * 0.56], [x - w * 0.17, T - h * 0.74], [x - w * 0.17, T - h], [x + w * 0.17, T - h], [x + w * 0.17, T - h * 0.74], [x + w / 2, T - h * 0.56], [x + w / 2, T]])], glass2, { name: "Bottle" });
+    shape(k, f, [box(x - w / 2, T - h * 0.46, w, h * 0.28)], label, { name: "Bottle label" });
+    shape(k, f, [line(x - w * 0.36, T - h * 0.42, x + w * 0.36, T - h * 0.42), line(x - w * 0.36, T - h * 0.22, x + w * 0.36, T - h * 0.22)], "wine", { name: "Label rules", strokeWidth: 2, opacity: 0.6 });
+    shape(k, f, [box(x - w * 0.17, T - h, w * 0.34, h * 0.1)], "wine", { name: "Capsule" });
+    shape(k, f, [line(x - w * 0.3, T - h * 0.52, x - w * 0.3, T - 10)], "label", { name: "Bottle shine", strokeWidth: 4, opacity: 0.28 });
+  };
+  const glass = (x, s, role) => {
+    const bowl = { closed: true, points: [pt3(x - 22 * s, T - 96 * s), pt3(x + 22 * s, T - 96 * s), { ...pt3(x + 4 * s, T - 46 * s), handleIn: pt3(x + 26 * s, T - 58 * s) }, pt3(x - 4 * s, T - 46 * s), { ...pt3(x - 22 * s, T - 96 * s), handleIn: pt3(x - 26 * s, T - 58 * s) }] };
+    shape(k, f, [{ closed: true, points: [pt3(x - 24 * s, T - 78 * s), pt3(x + 24 * s, T - 78 * s), { ...pt3(x + 4 * s, T - 46 * s), handleIn: pt3(x + 24 * s, T - 56 * s) }, pt3(x - 4 * s, T - 46 * s), { ...pt3(x - 24 * s, T - 78 * s), handleIn: pt3(x - 24 * s, T - 56 * s) }] }], role, { name: "Wine" });
+    shape(k, f, [bowl, line(x, T - 46 * s, x, T - 4), line(x - 18 * s, T - 2, x + 18 * s, T - 2)], "ink", { name: "Glass", strokeWidth: 3 });
+    shape(k, f, [line(x - 12 * s, T - 90 * s, x - 15 * s, T - 70 * s)], "label", { name: "Glass shine", strokeWidth: 3, opacity: 0.7 });
+  };
+  const crate = (x, y, w, h) => {
+    shape(k, f, [box(x, y, w, h)], "crate", { name: "Crate front" });
+    shape(k, f, [line(x, y + h * 0.33, x + w, y + h * 0.33), line(x, y + h * 0.66, x + w, y + h * 0.66), line(x + w * 0.17, y, x + w * 0.17, y + h), line(x + w * 0.83, y, x + w * 0.83, y + h)], "crateDark", { name: "Crate slats", strokeWidth: 4 });
+  };
+  const stripesV = [], stripesH = [];
+  for (let x = 0; x < W; x += 56) stripesV.push(box(x, T + 18, 28, 200));
+  for (let y = T + 18; y < 400; y += 56) stripesH.push(box(0, y, W, 28));
+  shape(k, f, [box(0, T + 18, W, 200)], "awningCream", { name: "Cloth" });
+  shape(k, f, stripesV, "awningRed", { name: "Gingham", opacity: 0.42 });
+  shape(k, f, stripesH, "awningRed", { name: "Gingham", opacity: 0.42 });
+  shape(k, f, [box(0, T, W, 20)], "crateDark", { name: "Table top" });
+  k.rect(f, W, 40, [k.gradient({ from: "ink", to: "ink", fromOpacity: 0.25, toOpacity: 0, angle: 90 })], { name: "Cloth shade", absolute: { x: 0, y: T + 18 } });
+  shape(k, f, [{ closed: true, points: [pt3(620, T), { ...pt3(610, T - 110), handleIn: pt3(596, T - 40), handleOut: pt3(596, T - 150) }, pt3(620, T - 220), pt3(800, T - 220), { ...pt3(810, T - 110), handleIn: pt3(824, T - 150), handleOut: pt3(824, T - 40) }, pt3(800, T)] }], "crate", { name: "Barrel" });
+  shape(k, f, [line(604, T - 60, 816, T - 60), line(604, T - 160, 816, T - 160)], "ink", { name: "Barrel hoops", strokeWidth: 8 });
+  shape(k, f, [box(696, T - 112, 30, 16), box(712, T - 100, 10, 26)], "mustard", { name: "Tap" });
+  for (let i = 0; i < 3; i++) shape(k, f, [disc(450, T - 22 - i * 40, 64, 20)], i === 1 ? "cheeseTop" : "cheese", { name: "Cheese wheels" });
+  bottle(X(64), 168 * S, 40 * S, "bottle", "label");
+  bottle(X(120), 150 * S, 40 * S, "wine", "mustard");
+  bottle(X(176), 172 * S, 40 * S, "bottle", "label");
+  crate(X(28), T - 74 * S, 190 * S, 74 * S);
+  shape(k, f, [{ closed: true, points: [pt3(X(250), T - 8), pt3(X(250), T - 52 * S), { ...pt3(X(330), T - 70 * S), handleIn: pt3(X(262), T - 72 * S), handleOut: pt3(X(398), T - 72 * S) }, pt3(X(410), T - 52 * S), pt3(X(410), T - 8), { ...pt3(X(330), T + 2), handleIn: pt3(X(390), T + 2), handleOut: pt3(X(270), T + 2) }] }], "cheese", { name: "Cheese" });
+  shape(k, f, [disc(X(330), T - 52 * S, 80 * S, 18 * S)], "cheeseTop", { name: "Cheese top" });
+  shape(k, f, [disc(X(296), T - 26 * S, 7 * S, 5 * S), disc(X(350), T - 18 * S, 9 * S, 6 * S), disc(X(384), T - 30 * S, 5 * S, 4 * S), disc(X(322), T - 54 * S, 8 * S, 3 * S)], "crust", { name: "Cheese holes", opacity: 0.6 });
+  const grapes = [];
+  [[0, 0], [22, 0], [44, 0], [66, 0], [11, 18], [33, 18], [55, 18], [22, 36], [44, 36], [33, 54]].forEach(([dx, dy]) => grapes.push(disc(X(432 + dx), T - (64 - dy) * S, 12 * S)));
+  shape(k, f, grapes, "grape", { name: "Grapes" });
+  shape(k, f, grapes.slice(0, 7).map((g) => disc(g.points[0].x - 4, g.points[1].y - 6, 3.5)), "label", { name: "Grape shine", opacity: 0.5 });
+  shape(k, f, [{ closed: true, points: [pt3(X(462), T - 78 * S), { ...pt3(X(498), T - 104 * S), handleIn: pt3(X(470), T - 104 * S) }, { ...pt3(X(520), T - 74 * S), handleIn: pt3(X(522), T - 100 * S) }, { ...pt3(X(480), T - 66 * S), handleIn: pt3(X(506), T - 60 * S) }] }], "leaf", { name: "Vine leaf" });
+  glass(X(566), S, "wine");
+  glass(X(630), 0.86 * S, "mustard");
+  shape(k, f, [disc(X(730), T - 26 * S, 70 * S, 28 * S)], "crust", { name: "Loaf" });
+  shape(k, f, [line(X(690), T - 40 * S, X(706), T - 20 * S), line(X(720), T - 46 * S, X(736), T - 24 * S), line(X(752), T - 44 * S, X(768), T - 24 * S)], "label", { name: "Loaf cuts", strokeWidth: 5, opacity: 0.8 });
+  bottle(X(822), 132 * S, 30 * S, "oil", "label");
+  shape(k, f, [{ closed: true, points: [pt3(X(868), T - 72 * S), pt3(X(1004), T - 72 * S), { ...pt3(X(990), T), handleIn: pt3(X(1004), T - 14 * S) }, { ...pt3(X(882), T), handleOut: pt3(X(868), T - 14 * S) }] }], "pot", { name: "Pot" });
+  shape(k, f, [box(X(860), T - 80 * S, 152 * S, 12 * S), box(X(846), T - 58 * S, 22 * S, 10 * S), box(X(1004), T - 58 * S, 22 * S, 10 * S)], "ink", { name: "Pot rim" });
+  for (let i = 0; i < 3; i++) {
+    const x = X(902 + i * 34);
+    const wisp = shape(k, f, [curve3([{ x, y: T - 92 * S }, { x: x - 12, y: T - 118 * S }, { x: x + 10, y: T - 140 * S }, { x: x - 7, y: T - 162 * S }, { x: x + 5, y: T - 180 * S }], 0.3)], "steam", { name: "Steam", strokeWidth: 8, opacity: 0.6 });
+    move(wisp, "translateY", 10, 2, i / 3);
+    move(wisp, "opacity", 0.35, 2, i / 3 + 0.25);
+    move(wisp, "translateX", 6, 1, i / 3);
+  }
+  const r = rng(4), lemons = [], toms = [];
+  for (let i = 0; i < 9; i++) (i % 2 ? toms : lemons).push(disc(X(1056 + i * 15) + r() * 6, T - (58 + i % 3 * 9) * S, 15 * S, (i % 2 ? 15 : 12) * S));
+  shape(k, f, lemons, "mustard", { name: "Lemons" });
+  shape(k, f, toms, "tomato", { name: "Tomatoes" });
+  crate(X(1040), T - 44 * S, 150 * S, 44 * S);
+  shape(k, f, [poly([[2160, T], [2140, T - 90], [2380, T - 90], [2360, T]])], "crust", { name: "Basket" });
+  const weave = [];
+  for (let x = 2150; x < 2380; x += 22) weave.push(line(x, T - 88, x + 8, T - 2));
+  shape(k, f, weave, "crateDark", { name: "Basket weave", strokeWidth: 3, opacity: 0.7 });
+  shape(k, f, [disc(2200, T - 104, 50, 22), disc(2300, T - 112, 56, 24), disc(2252, T - 128, 44, 20)], "cheese", { name: "Loaves" });
+  shape(k, f, [box(2410, T - 110, 60, 110)], "pot", { name: "Jar", opacity: 0.8 });
+  shape(k, f, [line(2425, T - 100, 2412, T - 230), line(2440, T - 100, 2446, T - 260), line(2455, T - 100, 2480, T - 210)], "leaf", { name: "Stems", strokeWidth: 5 });
+  const heads = shape(k, f, [disc(2412, T - 236, 22), disc(2446, T - 266, 24), disc(2480, T - 216, 20)], "mustard", { name: "Sunflowers", stroke: { color: "crust", width: 6 } });
+  move(heads, "rotation", 2, 1);
+  bottle(170, 210, 52, "wine", "label");
+  bottle(240, 230, 52, "bottle", "mustard");
+  bottle(310, 200, 52, "wine", "label");
+  bottle(380, 225, 52, "bottle", "label");
+  crate(130, T - 96, 290, 96);
+  glass(2640, 1.4, "wine");
+  glass(2720, 1.2, "wine");
+  shape(k, f, [disc(2850, T - 60, 74, 60)], "leaf", { name: "Melon" });
+  shape(k, f, [curve3([{ x: 2790, y: T - 80 }, { x: 2850, y: T - 118 }, { x: 2910, y: T - 80 }], 0.3), curve3([{ x: 2786, y: T - 40 }, { x: 2850, y: T - 70 }, { x: 2914, y: T - 40 }], 0.3)], "oil", { name: "Melon stripes", strokeWidth: 6, opacity: 0.7 });
+  for (let i = 0; i < 5; i++) shape(k, f, [disc(2520, T - 8 - i * 12, 62, 9)], i % 2 ? "label" : "awningCream", { name: "Plates", stroke: { color: "crateDark", width: 2 } });
+}
+function seal(k, parent, o) {
+  const s = o.size;
+  const id = k.stack(parent, { width: s, height: s, align: "CENTER", justify: "CENTER", gap: 0, name: o.name, ...o.absolute ? { absolute: o.absolute } : {} });
+  const burst = k.vector(id, s, s, [burstPath(s, 20, 0.1)], "accent", { name: `${o.name} burst`, absolute: { x: 0, y: 0 }, effects: [hardShadow(k, "ink", 3, 4, 0.55)] });
+  k.vector(id, s * 0.78, s * 0.78, [disc(s * 0.39, s * 0.39, s * 0.37)], "accent", { name: `${o.name} ring`, stroke: { color: "onAccent", width: 1.5 }, absolute: { x: s * 0.11, y: s * 0.11 } });
+  if (!o.still) turn(k, burst, 1 / 20);
+  const size = Math.max(16, Math.round(s * 0.13));
+  k.text(id, cased(FOOD, "Sticker", `${o.lines[0]}
+${o.lines[1]}`), { style: st(k, FOOD, "Sticker", size, "CENTER"), color: "onAccent", align: "CENTER", name: `${o.name} words` });
+  return id;
+}
+var FOOD = {
+  slug: "food",
+  name: "Salt & Vine",
+  brand: (k) => {
+    k.brand(
+      { paper: "#F7F0E1", text: "#2A1D16", onPaper: "#5F4E42", primary: "#7A1F2B", onPrimary: "#FBF3E2", accent: "#D8A33B", onAccent: "#2A1D16", card: "#FFFBF0", onCard: "#2A1D16", cardMuted: "#5F4E42", panel: "#2F3A1D", onPanel: "#F7F0E1", panelMuted: "#D2D6BC", chip: "#EDE2C8", onChip: "#2A1D16", stage: "#EFDFBB", onStage: "#2A1D16", stageMuted: "#5F4E42" },
+      { name: "Salt & Vine" }
+    );
+    k.palette({ ink: "#2A1D16", kraft: "#E4D1A6", awningRed: "#B8322A", awningCream: "#FFF6E0", bulb: "#FFD66B", wine: "#7A1F2B", bottle: "#2F4A2C", oil: "#8E8A2A", mustard: "#D8A33B", label: "#FFFBF0", cheese: "#E8B24A", cheeseTop: "#F3CB6C", crust: "#B97A3C", grape: "#5B2A5E", leaf: "#4E6B2A", tomato: "#D6452E", crate: "#C19A62", crateDark: "#8B633A", pot: "#34506B", steam: "#FFFFFF" });
+  },
+  type: {
+    Name: { ...SERIF, fontWeight: 800, ls: -0.035, lh: 0.96 },
+    Head: { ...SERIF, fontWeight: 800, ls: -0.025, lh: 1.04 },
+    Act: { ...SERIF, fontWeight: 500, ls: 0, lh: 1.35 },
+    More: { fontWeight: 700, ls: 0.1, lh: 1.6, upper: true },
+    Kicker: { fontWeight: 700, ls: 0.2, lh: 1.4, upper: true },
+    Clock: { ...SERIF, fontWeight: 800, ls: -0.025, lh: 1.04, tnum: true },
+    Unit: { fontWeight: 700, ls: 0.16, lh: 1.3, upper: true },
+    Body: { fontWeight: 400, ls: 0, lh: 1.45 },
+    Button: { fontWeight: 700, ls: 0.01, lh: 1.3 },
+    Caption: { ...SERIF, fontWeight: 700, ls: -0.01, lh: 1.2 },
+    Price: { ...SERIF, fontWeight: 800, ls: -0.03, lh: 1, tnum: true },
+    Sticker: { fontWeight: 800, ls: 0.06, lh: 1.12, upper: true }
+  },
+  look: {
+    plate: { fill: "card", ink: "onCard", muted: "cardMuted", radius: 6, stroke: { color: "primary", width: 3, align: "INSIDE" }, effects: (k) => [hardShadow(k, "ink", 8, 10, 0.8)] },
+    tiles: [["primary", "onPrimary"]],
+    tileRadius: 6,
+    button: 8,
+    chip: 4,
+    nameOn: "stage",
+    enter: "drop-in",
+    sep: "\xB7",
+    nameEffects: (k) => [hardShadow(k, "awningCream", 0, 4, 1)]
+  },
+  parts: [
+    { name: "Wall", w: 3e3, h: 3e3, anchor: "cover", draw: wall },
+    { name: "Awning", w: 3e3, h: 330, anchor: "top", draw: awning },
+    { name: "Table", w: 3e3, h: 400, anchor: "foot", draw: table }
+  ],
+  sticker: seal,
+  dates: "3 \u2013 5 September 2027",
+  place: "The Old Cattle Market, Castelmare",
+  kicker: "The harvest festival of food & wine",
+  billLabel: "The first cooks, cellars and bands",
+  heads: ["Noor Haddad", "Matteo Riccivale", "Ilse Brandt"],
+  acts: ["Cantina Ferramonte", "Clos des Hirondelles", "Weingut Altenbach", "Brine & Shell"],
+  more: ["The Copper Kettles", "Luc\xEDa y Los Faroles", "Harbour Street Brass"],
+  tba: "Sixty more names on 1 June",
+  presale: { by: "Sun 21 March", code: "Tue 23 March", opens: "Thu 25 March, 12:00", short: "25 March, noon", queue: "11:30", limit: "up to six tickets" },
+  clock: { days: "17", hours: "08", minutes: "54", from: 29, to: 23 },
+  tier: { tag: "First pressing", name: "Weekend ticket, all three days", price: "\u20AC68", was: "\u20AC58", wasTag: "Early harvest", next: "\u20AC78", nextTag: "Second pressing", sold: "Early harvest sold out", note: "On sale now to newsletter readers. What is left opens to presale codes on 25 March.", stock: { label: "Selling fast", from: 2140, left: 2118, total: 9e3 } },
+  seal: ["Presale", "25 March"],
+  code: "SV27-PRE-7KQ2",
+  gate: "South gate",
+  holder: "Giulia Marchetti",
+  pass: "Weekend ticket",
+  track: "acoustic",
+  beats: 24,
+  step: 1,
+  captions: ["The first cooks are in.", "Presale opens Thursday 25 March.", "Sign up by 21 March.", "Sign up for a code."],
+  picture: "a market stall under a striped awning and twinkling bulbs, its table laid with wine, cheese, bread and a steaming pot",
+  tags: ["food", "wine", "market", "harvest", "serif", "illustration"]
+};
+
+export {
+  FOOD
+};