@popcraft/kit 0.44.1 → 0.45.0

package/dist/chunks/chunk-LLF7EYW4.js

@@ -1,191 +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 {
-  beat,
-  heatBrand,
-  noon
-} from "./chunk-ENAT7AMX.js";
-import {
-  MONO
-} from "./chunk-5OTEBTMU.js";
-import {
-  outro,
-  pill,
-  postVariants
-} from "./chunk-IL2F4BKM.js";
-import {
-  r3
-} from "./chunk-YKX2GS6X.js";
-import {
-  defineTemplate
-} from "./chunk-FC6VBE7Y.js";
-import {
-  Kit,
-  preset
-} from "./chunk-E3A22XSE.js";
-import {
-  ease
-} from "./chunk-6VIYCRKB.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-W5QYHNL2.js";
-
-// templates/src/social/summer-heatwave-lolly-post.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var DURATION = 7e3;
-var TOWEL_X = 612;
-var LOLLY = { w: 290, body: 500, stick: 210 };
-var cues = [
-  { layer: "Lolly", preset: "drop-in", at: 250, params: { duration: 600 } },
-  { layer: "Offer", preset: "rise-in", at: 800, params: { duration: 700 } },
-  { layer: "Deal", preset: "pop-in", at: 1200, params: { duration: 500 } },
-  { layer: "Code", preset: "pop-in", at: 1700, params: { duration: 450 } },
-  { layer: "Terms", preset: "fade-in", at: 1900, params: { duration: 600 } },
-  { layer: "Code", preset: "pulse", at: 4400, params: { duration: 900, amount: 0.06 } },
-  { layer: "Lolly", preset: "rise-out", at: 6200, params: { duration: 450 } },
-  outro(["Offer", "Deal", "Code", "Terms"], 6200)
-];
-function blob(r, lobes, turn, squash = 0.8) {
-  return { closed: true, points: Array.from({ length: 72 }, (_, i) => {
-    const a = Math.PI * 2 * i / 72, rr = r * (1 + 0.12 * Math.sin(lobes * a + turn) + 0.05 * Math.sin((lobes + 2) * a + turn * 2));
-    return { x: r3(r * 1.3 + rr * Math.cos(a)), y: r3(r * 1.3 * squash + rr * squash * Math.sin(a)) };
-  }) };
-}
-var summer_heatwave_lolly_post_default = defineTemplate({
-  id: "motion-summer-heatwave-lolly-post",
-  meta: {
-    name: "Summer heatwave ice lolly post (animated)",
-    description: "A summer sale post that melts: \u201CPrices are melting.\u201D in heavy capitals beside an ice lolly dropped on a striped beach towel under the noon sun, seen from above \u2014 three puddles of its three flavours spread from under it, drips run from its foot and the sun turns its rays and beats; the code pops at the foot. A seven-second loop, square with 4:5 and 9:16 cuts",
-    category: "animation",
-    tags: ["animation", "summer", "heatwave", "summer sale", "ice lolly", "popsicle", "beach towel", "melting", "offer", "discount", "saas", "post", "seasonal", "loop"],
-    platforms: ["instagram", "linkedin", "x", "threads", "facebook"],
-    formats: ["post", "portrait-post", "story"],
-    useCases: ["sale", "announcement"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  motion: { cues, loop: true },
-  build() {
-    const k = new Kit("Summer heatwave ice lolly post (animated)", preset("ig-post"));
-    k.quantizeGeometry = true;
-    heatBrand(k, { headline: "Prices\nare\nmelting.", code: "Code POOLSIDE" });
-    k.textStyle("Eyebrow 24", { size: 24, fontWeight: 800, letterSpacing: 4, lineHeight: 32, textCase: "UPPER" });
-    k.textStyle("Display 100", { size: 100, fontWeight: 900, letterSpacing: -4.4, lineHeight: 88, textCase: "UPPER" });
-    k.textStyle("Figure 230", { size: 230, fontWeight: 900, letterSpacing: -10, lineHeight: 200 });
-    k.textStyle("Deal 64", { size: 64, fontWeight: 900, letterSpacing: -2.6, lineHeight: 60, textCase: "UPPER" });
-    k.textStyle("Display 86", { size: 86, fontWeight: 900, letterSpacing: -3.8, lineHeight: 76, textCase: "UPPER" });
-    k.textStyle("Offer 28", { size: 28, fontWeight: 600, lineHeight: 38 });
-    k.textStyle("Code 30", { ...MONO, size: 30, fontWeight: 800, lineHeight: 38 });
-    k.textStyle("Terms 24", { ...MONO, size: 24, fontWeight: 500, lineHeight: 32 });
-    pill(k, "Code pill", { fill: "primary", ink: "onPrimary", style: "Code 30", label: "Code POOLSIDE", pad: [14, 28] });
-    const sheet = k.sheet;
-    k.flowSheet(sheet, 0, { top: 76, right: 500, bottom: 76, left: 72 }, "paper", "SPACE_BETWEEN", "MIN");
-    k.patch(sheet, { clipsContent: true });
-    k.timeline(sheet, { duration: DURATION, fps: 30 });
-    const tw = 1080 - TOWEL_X + 20;
-    const towel = k.stack(sheet, { width: tw, height: 2e3, fill: "foam", name: "Beach towel", absolute: { x: TOWEL_X, y: -20 }, effects: [noon(1, 0.8)] });
-    for (let x = 0, i = 0; x < tw; i++) {
-      const w = i % 2 ? 26 : 62;
-      if (i % 2 === 0) k.rect(towel, w, 2e3, "water", { name: "Towel stripe", absolute: { x, y: 0 } });
-      x += w + (i % 2 ? 0 : 0);
-    }
-    for (let x = 62 + 9; x < tw; x += 88) k.rect(towel, 8, 2e3, "sun", { name: "Towel thread", absolute: { x, y: 0 } });
-    const sunSize = 420;
-    const sun = k.stack(sheet, { width: sunSize, height: sunSize, name: "Sun", absolute: { x: 1080 - sunSize * 0.62, y: -sunSize * 0.42 } });
-    const R = sunSize / 2;
-    const rays = k.vector(sun, sunSize, sunSize, Array.from({ length: 16 }, (_, i) => {
-      const a = Math.PI * 2 * i / 16, d = 0.1, long = i % 2 ? 0.86 : 1;
-      return { closed: true, points: [{ x: r3(R + R * 0.56 * Math.cos(a - d)), y: r3(R + R * 0.56 * Math.sin(a - d)) }, { x: r3(R + R * long * Math.cos(a)), y: r3(R + R * long * Math.sin(a)) }, { x: r3(R + R * 0.56 * Math.cos(a + d)), y: r3(R + R * 0.56 * Math.sin(a + d)) }] };
-    }), "sunDeep", { name: "Sun rays", absolute: { x: 0, y: 0 } });
-    k.behave(rays, "rotation", [{ kind: "spin", rate: r3(45 * 1e3 / DURATION) }]);
-    k.ellipse(sun, r3(R), "sun", { name: "Sun disc", absolute: { x: r3(R / 2), y: r3(R / 2) }, effects: [noon(1, 1.2, 0.2)] });
-    k.ellipse(sun, r3(R * 0.7), [], { name: "Sun line", stroke: { color: "sunDeep", width: 4 }, opacity: 0.6, absolute: { x: r3(R * 0.65), y: r3(R * 0.65) } });
-    const cx = 846, footY = 250 + LOLLY.body;
-    const puddles = [["berry", 205, 3, 0.4], ["sun", 146, 4, 1.7], ["rope", 92, 3, 2.9]].map(([role, r, lobes, turn], i) => {
-      const id = k.vector(sheet, r3(r * 2.6), r3(r * 2.6 * 0.8), [blob(r, lobes, turn)], role, { name: "Puddle", absolute: { x: r3(cx - r * 1.3 + (i - 1) * 26), y: r3(footY - r * 0.8 - 10 + i * 34) }, effects: [noon(1, 0.25, 0.18)] });
-      for (const axis of ["scaleX", "scaleY"]) k.animate(id, axis, [{ t: 0, v: 0, ease: ease.hold }, { t: 700 + i * 500, v: 0.12, ease: ease.out("cubic") }, { t: 5600, v: 1, ease: ease.hold }, { t: 6200, v: 1, ease: ease.named("cubic", "in") }, { t: 6700, v: 0, ease: ease.hold }]);
-      return id;
-    });
-    void puddles;
-    for (const [x, y, d] of [[cx - 150, footY + 40, 22], [cx + 120, footY - 30, 16], [cx + 60, footY + 96, 12]]) {
-      const id = k.ellipse(sheet, d, "foam", { name: "Shine", opacity: 0.8, absolute: { x, y } });
-      k.animate(id, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: 3200, v: 0, ease: ease.out("cubic") }, { t: 4200, v: 0.8, ease: ease.hold }, { t: 6200, v: 0.8, ease: ease.linear }, { t: 6500, v: 0, ease: ease.hold }]);
-    }
-    const L = LOLLY;
-    const lolly = k.stack(sheet, { width: L.w, height: L.body + L.stick, name: "Lolly", absolute: { x: cx - L.w / 2, y: 250 } });
-    const stickW = 64;
-    k.rect(lolly, stickW, L.stick + 90, "stick", { name: "Stick", radius: stickW / 2, absolute: { x: (L.w - stickW) / 2, y: L.body - 90 }, effects: [noon(1, 1.2)] });
-    k.rect(lolly, 6, L.stick - 70, "stickShade", { name: "Stick grain", radius: 3, opacity: 0.5, absolute: { x: L.w / 2 - 14, y: L.body + 24 } });
-    k.rect(lolly, 6, L.stick - 110, "stickShade", { name: "Stick grain", radius: 3, opacity: 0.5, absolute: { x: L.w / 2 + 10, y: L.body + 40 } });
-    for (const [x, h, at] of [[36, 110, 1500], [L.w - 78, 150, 2300], [L.w / 2 + 44, 84, 3100]]) {
-      const id = k.rect(lolly, 38, h, "berry", { name: "Drip", radius: 19, absolute: { x, y: L.body - 40 } });
-      k.patch(id, { anchorY: 0 });
-      k.animate(id, "scaleY", [{ t: 0, v: 0.3, ease: ease.hold }, { t: at, v: 0.3, ease: ease.inOut("cubic") }, { t: at + 2200, v: 1, ease: ease.hold }]);
-    }
-    const third = L.body / 3, half = L.w / 2, corner = 36;
-    const ice = (cut, wave) => {
-      const dome = Array.from({ length: 25 }, (_, n) => {
-        const a = Math.PI + Math.PI * n / 24;
-        return { x: r3(half + half * Math.cos(a)), y: r3(half + half * Math.sin(a)) };
-      });
-      const foot2 = cut >= L.body ? [...Array.from({ length: 7 }, (_, n) => {
-        const a = Math.PI / 2 * (n / 6);
-        return { x: r3(L.w - corner + corner * Math.cos(a)), y: r3(L.body - corner + corner * Math.sin(a)) };
-      }), ...Array.from({ length: 7 }, (_, n) => {
-        const a = Math.PI / 2 + Math.PI / 2 * (n / 6);
-        return { x: r3(corner + corner * Math.cos(a)), y: r3(L.body - corner + corner * Math.sin(a)) };
-      })] : Array.from({ length: 30 }, (_, n) => ({ x: r3(L.w - L.w * n / 29), y: r3(cut + 12 + 12 * Math.sin(n * 0.75 + wave)) }));
-      return { closed: true, points: [...dome, ...foot2] };
-    };
-    [["berry", L.body, 0], ["sun", third * 2, 2], ["rope", third, 0]].forEach(([role, cut, wave], i) => k.vector(lolly, L.w, L.body, [ice(cut, wave)], role, { name: "Flavour", absolute: { x: 0, y: 0 }, ...i === 0 ? { effects: [noon(1, 2.6)] } : {} }));
-    k.rect(lolly, 30, r3(L.body * 0.6), "foam", { name: "Gloss", radius: 15, opacity: 0.4, absolute: { x: 40, y: 110 } });
-    k.rect(lolly, 14, r3(L.body * 0.28), "foam", { name: "Gloss", radius: 7, opacity: 0.32, absolute: { x: 82, y: 130 } });
-    k.vector(lolly, L.w, L.body, [[200, 120, 5], [228, 190, 4], [180, 250, 3], [214, 330, 5], [150, 400, 4], [236, 430, 3], [120, 90, 3]].map(([x, y, r]) => ({ closed: true, points: Array.from({ length: 8 }, (_, n) => ({ x: r3(x + r * Math.cos(Math.PI * n / 4)), y: r3(y + r * Math.sin(Math.PI * n / 4)) })) })), "foam", { name: "Frost", opacity: 0.55, absolute: { x: 0, y: 0 } });
-    const top = k.stack(sheet, { gap: 18, name: "Top" });
-    k.text(top, "{{brand.name}} \xB7 Summer pass", { style: "Eyebrow 24", color: "text", name: "Eyebrow" });
-    k.text(top, "{{brand.headline}}", { style: "Display 100", color: "text", name: "Headline" });
-    k.text(top, "Three months of {{brand.name}} free on any annual plan. Until 31 August, or until the lolly is gone.", { style: "Offer 28", color: "onPaper", name: "Offer" });
-    const deal = k.stack(sheet, { direction: "HORIZONTAL", gap: 18, align: "CENTER", name: "Deal" });
-    k.text(deal, "3", { style: "Figure 230", color: "accent", autoWidth: true, name: "Deal figure" });
-    k.text(deal, "months\nfree", { style: "Deal 64", color: "text", autoWidth: true, name: "Deal words" });
-    const foot = k.stack(sheet, { gap: 14, name: "Foot" });
-    k.instance(foot, "Code pill", { Label: "{{brand.code}}" }, { name: "Code" });
-    k.text(foot, "{{brand.site}}/summer", { style: "Terms 24", color: "onPaper", name: "Terms" });
-    beat(k, sheet, 500, 1e3, 6, 0.08, "Sun disc");
-    k.cues(sheet, cues);
-    const place = (kit, id, dy) => {
-      for (const n of kit.named(id, "Beach towel")) kit.patch(n, { x: TOWEL_X, y: -20, width: tw, height: 2e3 });
-      for (const n of kit.named(id, "Sun")) kit.patch(n, { x: 1080 - sunSize * 0.62, y: -sunSize * 0.42, width: sunSize, height: sunSize });
-      for (const n of kit.named(id, "Lolly")) kit.patch(n, { x: cx - L.w / 2, y: 250 + dy, width: L.w, height: L.body + L.stick });
-      kit.named(sheet, "Puddle").forEach((m, i) => {
-        const copy = kit.named(id, "Puddle")[i], o = kit.node(m);
-        if (copy) kit.patch(copy, { x: o.x, y: o.y + dy, width: o.width, height: o.height });
-      });
-      kit.named(sheet, "Shine").forEach((m, i) => {
-        const copy = kit.named(id, "Shine")[i], o = kit.node(m);
-        if (copy) kit.patch(copy, { x: o.x, y: o.y + dy, width: o.width, height: o.height });
-      });
-    };
-    k.variants(sheet, postVariants({ portrait: 80 }, {
-      portrait: (kit, id) => {
-        kit.patch(id, { padding: { top: 90, right: 500, bottom: 90, left: 72 } });
-        place(kit, id, 150);
-      },
-      vertical: (kit, id) => {
-        kit.patch(id, { padding: { ...kit.node(id).padding, right: 500 } });
-        for (const t of kit.named(id, "Headline")) kit.restyle(t, "Display 86");
-        place(kit, id, 420);
-      }
-    }));
-    return k.finish();
-  }
-});
-
-export {
-  summer_heatwave_lolly_post_default
-};

package/dist/chunks/chunk-LLMJCEPM.js

@@ -1,78 +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 {
-  standardPortfolio
-} from "./chunk-WZM2LPY3.js";
-import {
-  defineTemplate
-} from "./chunk-FC6VBE7Y.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-W5QYHNL2.js";
-
-// templates/src/web/portfolio-depth-tunnel.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var WORK = [
-  { title: "Spin Cycle", client: "Low Hum Pictures", year: "2026", kind: "Feature film \xB7 Director of photography", cover: "depth-00", summary: "A night-shift drama that lives in one laundromat from midnight to dawn.", story: "Shot on anamorphic lenses with practical light only: the dryers and the vending machine. Premiered at Rotterdam.", credits: "Director \u2014 Ana Liu \xB7 DP \u2014 Theo Marsh \xB7 Colour \u2014 Grade Room" },
-  { title: "Keeper of the Light", client: "North Sea Films", year: "2025", kind: "Short film \xB7 DP", cover: "depth-01", summary: "A lighthouse in a storm and the woman who will not leave it.", story: "Two nights of rain towers on a real headland; the beam is the lighthouse\u2019s own.", credits: "Director \u2014 Ruth Ward \xB7 DP \u2014 Theo Marsh" },
-  { title: "Blue Hour", client: "Arcadia Records", year: "2025", kind: "Music video \xB7 DP", cover: "depth-02", summary: "Two silhouettes on a rooftop for the twenty minutes the city is blue.", story: "One take a night, five nights, the best of the five.", credits: "Director \u2014 Kemi Ade \xB7 DP \u2014 Theo Marsh" },
-  { title: "Room 214", client: "Halcyon Hotels", year: "2024", kind: "Commercial \xB7 DP", cover: "depth-03", summary: "A green-carpeted corridor and the one door left open.", story: "A hotel brand film that plays like the first minute of a thriller.", credits: "Director \u2014 Ana Liu \xB7 DP \u2014 Theo Marsh \xB7 Agency \u2014 Doorman" },
-  { title: "Leaf Tunnel", client: "Vellum Motors", year: "2024", kind: "Commercial \xB7 DP", cover: "depth-04", summary: "A car through a tunnel of autumn trees, headlights on at four in the afternoon.", story: "A car-to-car rig and a week of waiting for the leaves to turn.", credits: "Director \u2014 Oskar Lind \xB7 DP \u2014 Theo Marsh" },
-  { title: "Solo", client: "City Ballet", year: "2023", kind: "Dance film \xB7 DP", cover: "depth-05", summary: "One dancer, one spotlight, an empty theatre.", story: "Filmed in the hour between the matinee and the evening show.", credits: "Director, choreography \u2014 Mira Sol \xB7 DP \u2014 Theo Marsh" }
-];
-var portfolio_depth_tunnel_default = defineTemplate({
-  id: "web-portfolio-depth-tunnel",
-  meta: {
-    name: "Depth push portfolio",
-    description: "A cinematographer\u2019s portfolio where pages travel in depth: open a film and the page recedes into the dark as the next arrives from in front; go back and it pulls the other way. Wide frame grabs two across on black, a page per film and a bio. The move is drawn on the GPU with WebGPU, in CSS 3D elsewhere. The films are a collection you edit as a table. Desktop, tablet and phone",
-    category: "web",
-    tags: ["portfolio", "3d", "depth", "transition", "webgpu", "cinematography", "film", "dark", "cms", "website", "responsive"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["portfolio"],
-    created: "2026-10-05",
-    updated: "2026-10-05"
-  },
-  breakpoints: true,
-  build: () => standardPortfolio({
-    name: "Depth push",
-    brand: { paper: "#0B0C0E", text: "#ECE8E1", onPaper: "#959089", primary: "#E5B560", onPrimary: "#0B0C0E", card: "#0B0C0E", line: "#24262A" },
-    fields: { name: "Theo Marsh", email: "theo@theomarsh.film" },
-    styles: {
-      "Wordmark 18": { size: 18, fontWeight: 600, letterSpacing: 2, lineHeight: 24 },
-      "Small 13": { size: 13, fontWeight: 500, letterSpacing: 1.2, lineHeight: 18 },
-      "Meta 14": { size: 14, fontWeight: 400, lineHeight: 20 },
-      "Title 20": { size: 20, fontWeight: 500, letterSpacing: -0.2, lineHeight: 28 },
-      "Lead 24": { size: 24, fontWeight: 400, lineHeight: 34 },
-      "Body 17": { size: 17, fontWeight: 400, lineHeight: 28 },
-      "Display 72": { size: 72, fontWeight: 500, letterSpacing: -2, lineHeight: 76 },
-      "Display 40": { size: 40, fontWeight: 500, letterSpacing: -1, lineHeight: 46 }
-    },
-    type: { wordmark: "Wordmark 18", small: "Small 13", meta: "Meta 14", title: "Title 20", lead: "Lead 24", body: "Body 17", display: "Display 72", displaySmall: "Display 40" },
-    projects: WORK,
-    go: "DEPTH_PUSH",
-    back: "DEPTH_PULL",
-    links: [["work", "FILMS"], ["studio", "BIO"]],
-    lead: { kicker: "DIRECTOR OF PHOTOGRAPHY \xB7 LONDON", headline: "Light for stories told at night.", intro: "Theo Marsh shoots features, shorts, music videos and commercials, mostly after dark." },
-    grid: { cols: 2, gap: 24, ratio: 0.5625, radius: 4, meta: "{{item.client}} \xB7 {{item.year}}", tablet: 1 },
-    project: { ratio: 0.5625, kicker: "FILM", more: { cols: 3, ratio: 0.5625, label: "MORE FILMS" } },
-    studio: {
-      statement: "I make pictures with whatever light is already there, and a little more.",
-      about: "Twelve years behind the camera: assistant on features in London, then DP on shorts that went to Berlin, Rotterdam and Sundance. I own a full anamorphic package and work with the same gaffer on everything.",
-      picture: "depth-02",
-      ratio: 0.42,
-      services: ["Features and shorts", "Music videos", "Commercials", "Camera package with crew"],
-      clients: "Low Hum Pictures, North Sea Films, Arcadia Records, Halcyon Hotels, Vellum Motors and City Ballet.",
-      contact: "Represented by Frame Agency."
-    },
-    elsewhere: "VIMEO \xB7 IMDB \xB7 INSTAGRAM"
-  })
-});
-
-export {
-  portfolio_depth_tunnel_default
-};

package/dist/chunks/chunk-LMJ3NNMG.js

@@ -1,229 +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 {
-  BUNKER,
-  COIN_FACE,
-  INVADER,
-  OCTO,
-  SHIP,
-  SQUID,
-  TROPHY,
-  arcadeBrand,
-  backdrop,
-  hardShadow,
-  march,
-  overlay,
-  refit,
-  sprite,
-  spriteInks
-} from "./chunk-UOZGBROB.js";
-import {
-  MONO
-} from "./chunk-5OTEBTMU.js";
-import {
-  BREAKPOINTS,
-  buttons,
-  nav,
-  page,
-  webResponsive
-} from "./chunk-IPGCJWVL.js";
-import {
-  blink,
-  cutOn
-} from "./chunk-FUYBBHPV.js";
-import {
-  bloom
-} from "./chunk-PCZTQVV6.js";
-import {
-  defineTemplate
-} from "./chunk-FC6VBE7Y.js";
-import {
-  Kit,
-  preset
-} from "./chunk-E3A22XSE.js";
-import {
-  init_define_POPCRAFT_COMPONENT_IDS
-} from "./chunk-W5QYHNL2.js";
-
-// templates/src/web/arcade-landing.ts
-init_define_POPCRAFT_COMPONENT_IDS();
-var SCORES = [
-  ["1ST", "LOOPCAST", "$2.1M BILLED"],
-  ["2ND", "TIDEWATER", "1.2B API CALLS"],
-  ["3RD", "MAPLEFORMS", "48K SEATS"],
-  ["4TH", "BRIGHTDESK", "310K MINUTES"],
-  ["5TH", "YOUR NAME HERE", "INSERT COIN"]
-];
-var CABINET = 520;
-var BEZEL = 14;
-var counts = [
-  { layer: "Screen score", at: 400, duration: 1600, counter: { from: 0, to: 4800, prefix: "MRR $", separator: "," }, tick: 100 }
-];
-var cues = [
-  { layer: "Eyebrow text", preset: "typewriter", at: 100, params: { duration: 600 } },
-  cutOn("Headline", 500),
-  cutOn("Lead", 700),
-  cutOn(["CTA primary", "CTA quiet"], 900, 150),
-  cutOn("Proof", 1300),
-  cutOn("Score", 1500, 120),
-  blink("Coin prompt", 2200, 1e3),
-  blink("Coin prompt", 3200, 800)
-];
-var arcade_landing_default = defineTemplate({
-  id: "web-arcade-landing",
-  meta: {
-    name: "Arcade landing page",
-    description: "A SaaS landing page as an arcade cabinet: hero copy that cuts on beside a cabinet whose swarm marches over a starfield, whose MRR ticks like a score and whose INSERT COIN blinks; a parade of invaders, a HIGH SCORES table of customers on a pixel shadow and a closing coin band. Desktop, laptop, tablet and phone",
-    category: "web",
-    tags: ["arcade", "8-bit", "pixel art", "retro", "landing page", "hero", "saas", "animation", "leaderboard", "website", "responsive"],
-    platforms: ["web"],
-    formats: ["page"],
-    useCases: ["launch", "brand-intro"],
-    created: "2026-10-02",
-    updated: "2026-10-02"
-  },
-  stableNumbers: true,
-  breakpoints: true,
-  motion: { cues, counts },
-  build() {
-    const k = new Kit("Arcade landing page", preset("web-desktop"));
-    k.quantizeGeometry = true;
-    arcadeBrand(k);
-    k.textStyle("Nav 15", { size: 15, fontWeight: 600, letterSpacing: 1, lineHeight: 24, textCase: "UPPER", ...MONO });
-    k.textStyle("Brand 20", { size: 20, fontWeight: 800, lineHeight: 28, textCase: "UPPER", ...MONO });
-    k.textStyle("Button 15", { size: 15, fontWeight: 800, letterSpacing: 1, lineHeight: 24, textCase: "UPPER", ...MONO });
-    k.textStyle("Eyebrow 14", { size: 14, fontWeight: 800, letterSpacing: 2, lineHeight: 20, ...MONO });
-    k.textStyle("Display 64", { size: 64, fontWeight: 800, letterSpacing: -3, lineHeight: 68, ...MONO });
-    k.textStyle("Display 52", { size: 52, fontWeight: 800, letterSpacing: -2.4, lineHeight: 56, ...MONO });
-    k.textStyle("Display 36", { size: 36, fontWeight: 800, letterSpacing: -1.5, lineHeight: 40, ...MONO });
-    k.textStyle("Lead 19", { size: 19, fontWeight: 400, lineHeight: 30 });
-    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
-    k.textStyle("Proof 14", { size: 14, fontWeight: 600, letterSpacing: 1, lineHeight: 20, textCase: "UPPER", ...MONO });
-    k.textStyle("Screen 15", { size: 15, fontWeight: 800, letterSpacing: 1, lineHeight: 20, textCase: "UPPER", ...MONO });
-    k.textStyle("Screen 26", { size: 26, fontWeight: 800, letterSpacing: 3, lineHeight: 32, textAlign: "CENTER", ...MONO });
-    k.textStyle("Screen 13", { size: 13, fontWeight: 700, letterSpacing: 1, lineHeight: 18, textAlign: "CENTER", ...MONO });
-    k.textStyle("Section 44", { size: 44, fontWeight: 800, letterSpacing: -1.5, lineHeight: 50, ...MONO });
-    k.textStyle("Section 28", { size: 28, fontWeight: 800, letterSpacing: -0.5, lineHeight: 34, ...MONO });
-    k.textStyle("Row 20", { size: 20, fontWeight: 700, letterSpacing: 1, lineHeight: 28, ...MONO });
-    k.textStyle("Row 14", { size: 14, fontWeight: 700, lineHeight: 20, ...MONO });
-    buttons(k, { style: "Button 15", pad: [14, 22], radius: 0 });
-    k.component("Button on band", { direction: "HORIZONTAL", width: "HUG", fill: "onPrimary", align: "CENTER", padding: { top: 16, right: 26, bottom: 16, left: 26 }, props: { Label: "Start free" } }, (id) => {
-      k.propText(id, "Label", { style: "Button 15", color: "primary", autoWidth: true });
-    });
-    k.variantSet("Score row", "Size", ["Large", "Small"], {
-      direction: "HORIZONTAL",
-      width: 1e3,
-      align: "CENTER",
-      props: { Rank: "1ST", Name: "LOOPCAST", Score: "$2.1M BILLED" },
-      description: "One line of a high-score table: rank, name and score."
-    }, (size, id) => {
-      const style = size === "Large" ? "Row 20" : "Row 14";
-      k.propText(id, "Rank", { style, color: "onCard", width: size === "Large" ? 80 : 32 });
-      k.propText(id, "Name", { style, color: "onCard", width: "FILL" });
-      k.propText(id, "Score", size === "Large" ? { style, color: "onCard", width: "FILL" } : { style, color: "onCard", autoWidth: true });
-    }, (size) => size === "Large" ? { gap: 24, padding: { top: 16, right: 28, bottom: 16, left: 28 } } : { gap: 8, padding: { top: 10, right: 10, bottom: 10, left: 10 } });
-    const sheet = k.sheet;
-    page(k, sheet, { gap: 72, top: 32 });
-    k.timeline(sheet, { duration: 4e3, fps: 30 });
-    nav(k, sheet, { links: ["Metering", "Invoices", "Docs", "Pricing"], cta: "Start free", style: "Nav 15", brandStyle: "Brand 20" });
-    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", name: "Hero" });
-    const copy = k.stack(hero, { gap: 24, name: "Copy" });
-    const eyebrow = k.stack(copy, { direction: "HORIZONTAL", width: "HUG", fill: "primary", padding: { top: 6, right: 12, bottom: 6, left: 12 }, name: "Eyebrow" });
-    k.text(eyebrow, "PLAYER 1 \xB7 USAGE BILLING API", { style: "Eyebrow 14", color: "onPrimary", autoWidth: true, name: "Eyebrow text" });
-    k.text(copy, "Bill by the request, the seat or the second.", { style: "Display 64", color: "text", name: "Headline", effects: [hardShadow(k, "accent", 3)] });
-    k.text(copy, "Send {{brand.name}} one event per thing your customer uses. It meters, prorates, taxes and invoices, and tells them before the bill surprises them. Most teams ship it in an afternoon.", { style: "Lead 19", color: "onPaper", name: "Lead" });
-    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
-    k.instance(cta, "Button", { Label: "Insert coin: start free" }, { name: "CTA primary" });
-    k.instance(cta, "Button quiet", { Label: "Read the docs" }, { name: "CTA quiet" });
-    k.text(copy, "Free until you have billed $10,000 \xB7 No card", { style: "Proof 14", color: "onPaper", name: "Proof" });
-    const cabinet = k.stack(hero, { width: CABINET, gap: 0, fill: "card", stroke: { color: "text", width: 4, align: "INSIDE", join: "MITER" }, effects: [hardShadow(k, "accent", 16)], padding: BEZEL, name: "Cabinet" });
-    const marquee = k.stack(cabinet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", fill: "primary", padding: { top: 10, right: 14, bottom: 10, left: 14 }, name: "Marquee" });
-    k.text(marquee, "{{brand.name}}", { style: "Screen 15", color: "onPrimary", name: "Marquee name" });
-    const credits = k.stack(marquee, { direction: "HORIZONTAL", width: "HUG", gap: 6, name: "Credits" });
-    for (let i = 0; i < 3; i++) spriteInks(k, credits, COIN_FACE, 3, { "#": "onPrimary", o: "primary" }, { name: "Credit" });
-    const tube = k.stack(cabinet, { width: CABINET - 2 * BEZEL, height: 480, fill: "paper", justify: "SPACE_BETWEEN", align: "CENTER", clip: true, name: "Tube" });
-    backdrop(k, tube, { top: "accent", bottom: "secondary" });
-    const hud = k.stack(tube, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", fill: "paper", padding: { top: 10, right: 16, bottom: 10, left: 16 }, name: "Screen HUD" });
-    k.text(hud, "MRR $4,800", { style: "Screen 15", color: "text", autoWidth: true, name: "Screen score" });
-    k.text(hud, "HI $128,000", { style: "Screen 15", color: "text", autoWidth: true, name: "Screen high" });
-    const field = k.stack(tube, { width: "HUG", gap: 16, align: "CENTER", name: "Field" });
-    const swarm = k.stack(field, { width: "HUG", gap: 12, align: "CENTER", name: "Swarm" });
-    for (const kind of [{ rows: SQUID, color: "text" }, { rows: INVADER, color: "accent" }, { rows: OCTO, color: "lit" }]) {
-      const row = k.stack(swarm, { direction: "HORIZONTAL", width: "HUG", gap: 76 - kind.rows[0].length * 5, name: "Swarm row" });
-      for (let i = 0; i < 6; i++) sprite(k, row, kind.rows, 5, kind.color, { name: i < 4 ? "Invader" : "Invader wing" });
-    }
-    const bunkers = k.stack(field, { direction: "HORIZONTAL", width: "HUG", gap: 64, padding: { top: 26, right: 0, bottom: 0, left: 0 }, name: "Bunkers" });
-    for (let i = 0; i < 3; i++) sprite(k, bunkers, BUNKER, 5, "lit", { name: i < 2 ? "Bunker" : "Bunker wing" });
-    const cannon = k.stack(field, { width: "HUG", gap: 8, align: "CENTER", name: "Cannon" });
-    k.rect(cannon, 6, 22, "accent", { name: "Bolt", effects: [bloom(k, "accent", 12, 0.9)] });
-    sprite(k, cannon, SHIP, 6, "text", { name: "Ship" });
-    const prompt = k.stack(tube, { gap: 4, fill: "paper", padding: { top: 10, right: 12, bottom: 12, left: 12 }, name: "Prompt" });
-    k.text(prompt, "INSERT COIN", { style: "Screen 26", color: "text", name: "Coin prompt" });
-    k.text(prompt, "1 COIN = 1 EVENT METERED", { style: "Screen 13", color: "text", name: "Coin rate" });
-    overlay(k, tube, { scan: 0.16, vignette: 0.3 });
-    const deck = k.stack(cabinet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 14, right: 18, bottom: 4, left: 18 }, name: "Deck" });
-    const stick = k.stack(deck, { width: "HUG", align: "CENTER", name: "Stick" });
-    k.ellipse(stick, 22, "accent", { name: "Stick knob" });
-    k.rect(stick, 6, 12, "onCard", { name: "Stick shaft" });
-    k.rect(stick, 40, 6, "onCard", { name: "Stick base" });
-    const pads = k.stack(deck, { direction: "HORIZONTAL", width: "HUG", gap: 14, name: "Pads" });
-    for (const color of ["secondary", "accent", "primary"]) k.ellipse(pads, 26, color, { name: "Pad", stroke: { color: "onCard", width: 3 } });
-    const parade = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Parade" });
-    for (let i = 0; i < 14; i++) sprite(k, parade, [SQUID, INVADER, OCTO][i % 3], 4, ["text", "accent", "lit"][i % 3], { name: i < 5 ? "Marcher" : i < 8 ? "Marcher tablet" : "Marcher wide" });
-    const scores = k.stack(sheet, { gap: 20, name: "Scores" });
-    const title = k.stack(scores, { direction: "HORIZONTAL", gap: 18, align: "CENTER", name: "Scores head" });
-    sprite(k, title, TROPHY, 4, "text", { name: "Trophy" });
-    k.text(title, "HIGH SCORES", { style: "Section 44", color: "text", name: "Scores title" });
-    k.text(scores, "What teams have billed through {{brand.name}} in the last 90 days.", { style: "Lead 19", color: "onPaper", name: "Scores lead" });
-    const board = k.stack(scores, { fill: "card", stroke: { color: "text", width: 4, align: "INSIDE", join: "MITER" }, effects: [hardShadow(k, "secondary", 14)], padding: 8, name: "Board" });
-    for (const [rank, name, score] of SCORES) k.instance(board, "Score row/Large", { Rank: rank, Name: name, Score: score }, { width: "FILL", name: "Score" });
-    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 32, align: "CENTER", fill: "primary", effects: [hardShadow(k, "accent", 14)], padding: 44, name: "Coin band" });
-    spriteInks(k, band, COIN_FACE, 10, { "#": "onPrimary", o: "primary" }, { name: "Band coin" });
-    const pitch = k.stack(band, { gap: 8, name: "Band copy" });
-    k.text(pitch, "INSERT COIN TO CONTINUE", { style: "Section 44", color: "onPrimary", name: "Band title" });
-    k.text(pitch, "Your first $10,000 billed is on the house. After that, 0.6% of what you invoice.", { style: "Lead 19", color: "onPrimary", name: "Band lead" });
-    k.instance(band, "Button on band", { Label: "Start free" }, { name: "Band button" });
-    k.text(sheet, "\xA9 2026 {{brand.name}} Billing, Inc. \xB7 Status \xB7 Docs \xB7 Changelog \xB7 Security", { style: "Proof 14", color: "onPaper", name: "Footer" });
-    march(k, swarm, { from: 300, until: 3900, step: 400, dx: 12 });
-    march(k, cannon, { from: 500, until: 3700, step: 400, dx: 60 });
-    k.counts(sheet, counts);
-    k.cues(sheet, cues);
-    webResponsive(k, sheet, {
-      stack: ["Hero", "Coin band"],
-      restyle: { "Display 64": { laptop: "Display 52", tablet: "Display 52", mobile: "Display 36" }, "Lead 19": { mobile: "Lead 17" }, "Section 44": { mobile: "Section 28" } },
-      hide: { tablet: ["Marcher wide"], mobile: ["Nav links", "Invader wing", "Bunker wing", "Marcher wide", "Marcher tablet", "Band coin"] },
-      gap: { tablet: 56, mobile: 48 },
-      tweak: (kit, id, size) => {
-        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 56 });
-        if (size === "tablet") {
-          for (const n of kit.named(id, "Nav links")) kit.patch(n, { itemSpacing: 16 });
-          for (const n of kit.named(id, "Nav right")) kit.patch(n, { itemSpacing: 20 });
-        }
-        if (size === "tablet" || size === "mobile") {
-          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
-          for (const n of kit.named(id, "Coin band")) kit.patch(n, { counterAxisAlignItems: "MIN" });
-        }
-        const wide = size === "mobile" ? kit.node(id).width - 2 * BREAKPOINTS.mobile.side : CABINET;
-        for (const n of kit.named(id, "Cabinet")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: wide });
-        if (size === "mobile") {
-          for (const n of kit.named(id, "Headline")) kit.patch(n, { effects: [hardShadow(kit, "accent", 2)] });
-          for (const n of kit.named(id, "Tube")) {
-            kit.patch(n, { width: wide - 2 * BEZEL });
-            refit(kit, n);
-          }
-          for (const n of kit.named(id, "Coin band")) kit.patch(n, { padding: { top: 24, right: 20, bottom: 24, left: 20 }, itemSpacing: 20 });
-          for (const n of kit.named(id, "Score")) kit.patch(n, { mainComponentId: kit.componentIdOf("Score row/Small") });
-        }
-      }
-    });
-    return k.finish();
-  }
-});
-
-export {
-  arcade_landing_default
-};