@popcraft/kit 0.53.7 → 0.53.9

package/dist/chunks/chunk-JCTGQT4L.js

@@ -1,358 +0,0 @@
-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-2VFVKPUT.js";
-import {
-  MONO
-} from "./chunk-AXAAXHZF.js";
-import {
-  CONTENT,
-  columns,
-  compactNav,
-  footer,
-  respond,
-  rule,
-  typeScale
-} from "./chunk-YHF6LRMF.js";
-import {
-  buttons,
-  nav,
-  page
-} from "./chunk-ZMD3C2YJ.js";
-import {
-  board,
-  reboard
-} from "./chunk-LWSZATOL.js";
-import {
-  defineTemplate
-} from "./chunk-YDW25Z3P.js";
-import {
-  Kit,
-  preset
-} from "./chunk-4G7VHQUV.js";
-import {
-  ease
-} from "./chunk-PLZLKHOI.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-WKDVCZ45.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 32": { size: 32, fontWeight: 700, letterSpacing: -1.1, lineHeight: 35 },
-      "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 32" },
-        "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-JFXOAA4Z.js

@@ -1,172 +0,0 @@
-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 {
-  DEAL,
-  board as board2,
-  boardHead,
-  change,
-  chart,
-  fitListings,
-  floorBrand,
-  ledWell,
-  listings,
-  row,
-  stamp,
-  tape
-} from "./chunk-NDL75ZMP.js";
-import {
-  MONO,
-  SERIF
-} from "./chunk-AXAAXHZF.js";
-import {
-  board,
-  put,
-  reboard,
-  restyle
-} from "./chunk-LWSZATOL.js";
-import {
-  glow
-} from "./chunk-YORIY3BT.js";
-import {
-  pill
-} from "./chunk-KOAJ6HD2.js";
-import {
-  defineTemplate
-} from "./chunk-YDW25Z3P.js";
-import {
-  Kit,
-  preset
-} from "./chunk-4G7VHQUV.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-WKDVCZ45.js";
-
-// templates/src/social/black-friday-ticker-ads.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var NAME = "Black Friday ticker display ad set";
-var CHART = { w: 424, h: 170 };
-var black_friday_ticker_ads_default = defineTemplate({
-  id: "social-black-friday-ticker-display-ads",
-  meta: {
-    name: NAME,
-    description: "Display ads for a SaaS Black Friday sale, drawn as a trading floor: the offer in heavy serif on salmon newspaper paper, a ticker tape of the plans, and an LED board with the crashed annual price, its 60% fall and a candlestick chart off a cliff. 1200 \xD7 628 and 1200 \xD7 1200, with 4:5 and LinkedIn cuts",
-    category: "social",
-    tags: ["black friday", "cyber monday", "sale", "ad", "display ad", "google ads", "saas", "stock ticker", "trading floor", "chart", "pricing", "annual plan"],
-    platforms: ["web", "facebook", "linkedin", "instagram"],
-    formats: ["ad", "banner", "post", "portrait-post"],
-    useCases: ["sale", "pricing"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  build() {
-    const k = new Kit(NAME, preset("ad-landscape"));
-    k.quantizeGeometry = true;
-    floorBrand(k, { name: DEAL.product, symbol: DEAL.symbol, offer: "Our prices crashed. Buy the dip.", pitch: `Every annual plan ${DEAL.off}% off. ${DEAL.pitch}` }, ["paper", "text", "onPaper", "primary", "onPrimary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
-    k.textStyle("Tape 20", { ...MONO, size: 20, fontWeight: 800, letterSpacing: 0.8, lineHeight: 24 });
-    k.textStyle("Marker 16", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 1, lineHeight: 22 });
-    k.textStyle("Display 54", { ...SERIF, size: 54, fontWeight: 900, letterSpacing: -1.8, lineHeight: 56 });
-    k.textStyle("Display 96", { ...SERIF, size: 96, fontWeight: 900, letterSpacing: -3.2, lineHeight: 94 });
-    k.textStyle("Figure 130", { ...MONO, size: 130, fontWeight: 800, letterSpacing: -4, lineHeight: 138, fontFeatures: { tnum: 1 } });
-    k.textStyle("Display 112", { ...SERIF, size: 112, fontWeight: 900, letterSpacing: -3.8, lineHeight: 108 });
-    k.textStyle("Pitch 22", { size: 22, fontWeight: 500, lineHeight: 30 });
-    k.textStyle("Pitch 30", { size: 30, fontWeight: 500, lineHeight: 40 });
-    k.textStyle("Button 22", { size: 22, fontWeight: 800, lineHeight: 28 });
-    k.textStyle("Label 16", { ...MONO, size: 16, fontWeight: 700, letterSpacing: 1.2, lineHeight: 20 });
-    k.textStyle("Label 22", { ...MONO, size: 22, fontWeight: 700, letterSpacing: 2, lineHeight: 28 });
-    k.textStyle("Figure 96", { ...MONO, size: 96, fontWeight: 800, letterSpacing: -3, lineHeight: 104, fontFeatures: { tnum: 1 } });
-    k.textStyle("Figure 180", { ...MONO, size: 180, fontWeight: 800, letterSpacing: -6, lineHeight: 190, fontFeatures: { tnum: 1 } });
-    k.textStyle("Change 28", { ...MONO, size: 28, fontWeight: 800, lineHeight: 32 });
-    k.textStyle("Change 56", { ...MONO, size: 56, fontWeight: 800, lineHeight: 62 });
-    k.textStyle("Axis 16", { ...MONO, size: 16, fontWeight: 700, lineHeight: 20 });
-    k.textStyle("Row 16", { ...MONO, size: 16, fontWeight: 700, lineHeight: 22, fontFeatures: { tnum: 1 } });
-    k.textStyle("Row 30", { ...MONO, size: 30, fontWeight: 700, lineHeight: 40, fontFeatures: { tnum: 1 } });
-    k.textStyle("Stamp 16", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 1, lineHeight: 18 });
-    k.textStyle("Stamp 24", { ...MONO, size: 24, fontWeight: 800, letterSpacing: 1.4, lineHeight: 28 });
-    k.textStyle("Marker 24", { ...MONO, size: 24, fontWeight: 800, letterSpacing: 1.4, lineHeight: 30 });
-    k.textStyle("Button 32", { size: 32, fontWeight: 800, lineHeight: 38 });
-    pill(k, "Marker", { fill: "accent", ink: "onAccent", style: "Marker 16", label: "BLACK FRIDAY \xB7 ENDS MON 30 NOV", pad: [6, 12], radius: 3 });
-    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 22", label: `Buy the dip, ${DEAL.off}% off`, pad: [14, 28], radius: 8 });
-    pill(k, "Marker large", { fill: "accent", ink: "onAccent", style: "Marker 24", label: "BLACK FRIDAY \xB7 ENDS MON 30 NOV", pad: [9, 18], radius: 4 });
-    pill(k, "Button large", { fill: "primary", ink: "onPrimary", style: "Button 32", label: `Buy the dip, ${DEAL.off}% off`, pad: [22, 40], radius: 12 });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 0, { top: 92, right: 56, bottom: 44, left: 56 }, "paper", "CENTER", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    listings(k, sheet, 1200, 628, { u: 0.8 });
-    glow(k, sheet, { x: 220, y: 200, w: 1200, role: "light", alpha: 0.2, name: "Page light" });
-    tape(k, sheet, { item: 372, height: 52, style: "Tape 20", width: 1200, absolute: { x: 0, y: 0 }, offset: 40, span: 1200 });
-    const ad = k.stack(sheet, { direction: "HORIZONTAL", gap: 52, align: "CENTER", name: "Ad" });
-    const copy = k.stack(ad, { gap: 18, name: "Copy" });
-    k.instance(copy, "Marker", { Label: "BLACK FRIDAY \xB7 ENDS MON 30 NOV" }, { name: "Dates" });
-    k.text(copy, "{{brand.offer}}", { style: "Display 54", color: "text", name: "Offer" });
-    k.text(copy, "{{brand.pitch}}", { style: "Pitch 22", color: "onPaper", name: "Pitch" });
-    k.instance(copy, "Button", { Label: `Buy the dip, ${DEAL.off}% off` }, { name: "Buy button" });
-    const b = board2(k, ad, { width: 480, pad: 28, gap: 12, radius: 22, u: 0.8 });
-    boardHead(k, b, { label: "{{brand.symbol}}.TEAM \xB7 ANNUAL", note: "BLACK FRIDAY", style: "Label 16", lamp: 10 });
-    const main = k.stack(b, { gap: 12, name: "Board main" });
-    ledWell(k, main, { height: 126, step: 5, weight: 1, pad: 18, align: "SPACE_BETWEEN", name: "Price well" }, (well) => {
-      k.text(well, `$${DEAL.teamNow}`, { style: "Figure 96", color: "led", autoWidth: true, name: "Price figure" });
-      const side = k.stack(well, { width: "HUG", gap: 4, align: "MAX", name: "Change" });
-      change(k, side, `${DEAL.off}%`, { style: "Change 28", size: 20, name: "Fall", glow: 8 });
-      k.text(side, `LIST $${DEAL.teamWas}`, { style: "Label 16", color: "cardMuted", autoWidth: true, name: "List price" });
-    });
-    const c = chart(k, board(k, main, CHART.w, CHART.h, 1, "Chart board"), { ...CHART, u: 0.6, was: `$${DEAL.teamWas}`, now: `$${DEAL.teamNow}`, style: "Axis 16", absolute: { x: 0, y: 0 } });
-    row(k, b, "YOU KEEP, THIS YEAR", `$${DEAL.teamWas - DEAL.teamNow}`, { style: "Row 16", color: "onCard", figureColor: "led", name: "Keep row" });
-    stamp(k, c.frame, "SELL-OFF", { style: "Stamp 24", pad: [5, 12], rotation: 5, absolute: { x: c.room.x - 8, y: c.room.y - 2 } });
-    const tall = (kit, id, w, h) => {
-      fitListings(kit, id);
-      put(kit, id, "Tape", 0, 0, { width: w });
-      put(kit, id, "Page light", w * 0.2 - 600, h * 0.2 - 600);
-      for (const n of kit.named(id, "Ad")) kit.patch(n, { layoutMode: "VERTICAL", itemSpacing: 40, counterAxisSpacing: 40, counterAxisAlignItems: "MIN", primaryAxisAlignItems: "MIN" });
-      for (const n of kit.named(id, "Copy")) kit.patch(n, { layoutSizingHorizontal: "FILL", itemSpacing: 20, counterAxisSpacing: 20 });
-      restyle(kit, id, "Pitch", "Pitch 30");
-      for (const [name, comp] of [["Dates", "Marker large"], ["Buy button", "Button large"]]) for (const n of kit.named(id, name)) kit.patch(n, { mainComponentId: kit.componentIdOf(comp) });
-      restyle(kit, id, "Stamp words", "Stamp 16");
-      for (const n of kit.named(id, "Board")) kit.patch(n, { layoutSizingHorizontal: "FILL", padding: { top: 36, right: 36, bottom: 36, left: 36 }, itemSpacing: 18, counterAxisSpacing: 18 });
-      restyle(kit, id, "Fall figure", "Change 56");
-      restyle(kit, id, "List price", "Label 22");
-      for (const name of ["Board label", "Board note"]) restyle(kit, id, name, "Label 22");
-      for (const name of ["Keep row label", "Keep row figure"]) restyle(kit, id, name, "Row 30");
-    };
-    k.variants(sheet, [
-      {
-        // The square: the price beside its chart.
-        preset: "ad-square",
-        adjust: (kit, id) => {
-          kit.patch(id, { padding: { top: 108, right: 72, bottom: 56, left: 72 }, primaryAxisAlignItems: "CENTER" });
-          tall(kit, id, 1200, 1200);
-          restyle(kit, id, "Offer", "Display 112");
-          restyle(kit, id, "Price figure", "Figure 130");
-          for (const n of kit.named(id, "Board main")) kit.patch(n, { layoutMode: "HORIZONTAL", itemSpacing: 18, counterAxisSpacing: 18 });
-          for (const n of kit.named(id, "Price well")) kit.patch(n, { layoutMode: "VERTICAL", height: 230, primaryAxisAlignItems: "CENTER", counterAxisAlignItems: "CENTER", itemSpacing: 6, padding: { top: 0, right: 0, bottom: 0, left: 0 } });
-          for (const n of kit.named(id, "Change")) kit.patch(n, { counterAxisAlignItems: "CENTER" });
-          reboard(kit, id, "Chart board", 1.35);
-        }
-      },
-      {
-        preset: "ig-portrait",
-        adjust: (kit, id) => {
-          kit.patch(id, { padding: { top: 92, right: 64, bottom: 44, left: 64 }, primaryAxisAlignItems: "CENTER" });
-          tall(kit, id, 1080, 1350);
-          restyle(kit, id, "Offer", "Display 96");
-          restyle(kit, id, "Price figure", "Figure 180");
-          for (const n of kit.named(id, "Price well")) kit.patch(n, { height: 200, padding: { top: 0, right: 28, bottom: 0, left: 28 } });
-          reboard(kit, id, "Chart board", 2.07);
-        }
-      },
-      { preset: "linkedin-post", adjust: (kit, id) => {
-        fitListings(kit, id, 0.8);
-        put(kit, id, "Tape", 0, 0, { width: 1200 });
-      } }
-    ]);
-    return k.finish();
-  }
-});
-
-export {
-  black_friday_ticker_ads_default
-};