@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-K5ONHACP.js

@@ -0,0 +1,626 @@
+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 {
+  H,
+  W,
+  arc,
+  back,
+  bar,
+  blurFx,
+  box,
+  close,
+  drift,
+  focusColumn,
+  focusRow,
+  gameKit,
+  gameVar,
+  glow,
+  go,
+  keybind,
+  keys,
+  label,
+  menu,
+  onAll,
+  oneShot,
+  overlay,
+  poly,
+  readout,
+  rebindListener,
+  screen,
+  sector,
+  set,
+  shaderLayer,
+  slider,
+  spin,
+  toggle,
+  toggleComponent,
+  when
+} from "./chunk-2KS3HQ6F.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/game/vanta-fps.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var WEAPONS = [
+  { name: "KESTREL AR-7", kind: "Assault rifle", blurb: "Balanced burst rifle. The one that comes home.", mag: 30, dmg: 64, rof: 72, rng: 70 },
+  { name: "HALCYON SMG", kind: "Submachine gun", blurb: "Hoses a corridor clean. Chews through magazines.", mag: 45, dmg: 42, rof: 96, rng: 38 },
+  { name: "MORROW RAIL", kind: "Rail lance", blurb: "One slug, one silence. Charge, breathe, release.", mag: 6, dmg: 98, rof: 18, rng: 100 }
+];
+var CREDITS = [
+  ["Game direction", "Ines Okafor-Lindqvist"],
+  ["Lead systems design", "Tomasz Wren"],
+  ["Art direction", "Ma\xEBlle Duarte"],
+  ["HUD and interface", "Kenji Aldana"],
+  ["Audio", "Priya Vasquez-Holm"],
+  ["Narrative", "Ruth Adebayo"],
+  ["Engineering", "Oskar Feld \xB7 Lena Marsh \xB7 Dev Anand"],
+  ["Quality assurance", "The night shift"],
+  ["Special thanks", "Everyone who played the prototype at 3 a.m."]
+];
+var vanta_fps_default = defineTemplate({
+  id: "game-vanta-fps",
+  meta: {
+    name: "VANTA//PROTOCOL \u2014 sci-fi shooter UI",
+    description: "A playable sci-fi shooter front end and HUD: boot log, glitch title, keyboard menus, loadout with gliding stat bars, working settings and key bindings, a HUD whose shield and health drain and flash as you take fire, a cracking visor, kill feed, weapon wheel, pause, and mission failed / complete screens",
+    category: "game-ui",
+    tags: ["game", "game ui", "hud", "fps", "shooter", "sci-fi", "interactive", "variables", "keyboard", "menus", "present mode"],
+    platforms: ["desktop"],
+    formats: ["screen"],
+    useCases: ["launch", "pitch"],
+    created: "2026-09-30",
+    updated: "2026-09-30"
+  },
+  build() {
+    const k = gameKit("VANTA//PROTOCOL");
+    k.brand({
+      void: "#04060C",
+      deep: "#08101E",
+      panel: "#0C1627",
+      line: "#1F3453",
+      grid: "#12233B",
+      hud: "#7CF4FF",
+      onVoid: "#E8FBFF",
+      dim: "#93B6CC",
+      onPanel: "#E8FBFF",
+      accent: "#FF2E88",
+      onAccent: "#16020C",
+      primary: "#1AA8C8",
+      onPrimary: "#021016",
+      onHud: "#021016",
+      danger: "#FF4655",
+      onDanger: "#1A0205",
+      warn: "#FFC53D",
+      shield: "#5CC8FF",
+      onShield: "#021016",
+      health: "#6CFFB0",
+      chip: "#F4FBFF",
+      scrim: "#02040A"
+    }, { title: "VANTA//PROTOCOL", studio: "Halflight Interactive", tagline: "Extract the core. Leave no signal." });
+    const health = gameVar(k, "Player", "health", "FLOAT", 100);
+    const healthLag = gameVar(k, "Player", "healthTrail", "FLOAT", 100);
+    const maxHealth = gameVar(k, "Player", "maxHealth", "FLOAT", 100);
+    const shield = gameVar(k, "Player", "shield", "FLOAT", 100);
+    const ammo = gameVar(k, "Player", "ammo", "FLOAT", 30);
+    const reserve = gameVar(k, "Player", "reserve", "FLOAT", 90);
+    const mag = gameVar(k, "Player", "magazine", "FLOAT", 30);
+    const take = gameVar(k, "Player", "reloadTake", "FLOAT", 0);
+    const score = gameVar(k, "Player", "score", "FLOAT", 0);
+    const kills = gameVar(k, "Player", "kills", "FLOAT", 0);
+    const callsign = gameVar(k, "Player", "callsign", "STRING", "WRAITH-6");
+    const weapon = gameVar(k, "Loadout", "weapon", "FLOAT", 0);
+    const dmg = gameVar(k, "Loadout", "damage", "FLOAT", WEAPONS[0].dmg);
+    const rof = gameVar(k, "Loadout", "fireRate", "FLOAT", WEAPONS[0].rof);
+    const rng = gameVar(k, "Loadout", "range", "FLOAT", WEAPONS[0].rng);
+    const menuFocus = gameVar(k, "UI", "menuFocus", "FLOAT", 0);
+    const pauseFocus = gameVar(k, "UI", "pauseFocus", "FLOAT", 0);
+    const endFocus = gameVar(k, "UI", "endFocus", "FLOAT", 0);
+    const setFocus = gameVar(k, "UI", "settingsFocus", "FLOAT", 0);
+    const wheelFocus = gameVar(k, "UI", "wheelFocus", "FLOAT", 0);
+    const rebind = gameVar(k, "UI", "rebinding", "STRING", "");
+    const master = gameVar(k, "Settings", "masterVolume", "FLOAT", 80);
+    const music = gameVar(k, "Settings", "musicVolume", "FLOAT", 60);
+    const sens = gameVar(k, "Settings", "sensitivity", "FLOAT", 5);
+    const fov = gameVar(k, "Settings", "fieldOfView", "FLOAT", 95);
+    const invert = gameVar(k, "Settings", "invertY", "FLOAT", 0);
+    const subs = gameVar(k, "Settings", "subtitles", "FLOAT", 1);
+    const keyFire = gameVar(k, "Keys", "fire", "STRING", "F");
+    const keyReload = gameVar(k, "Keys", "reload", "STRING", "R");
+    const keyWheel = gameVar(k, "Keys", "weaponWheel", "STRING", "Q");
+    const mono = { fontFamily: "JetBrains Mono" };
+    k.textStyle("Boot 22", { size: 22, fontWeight: 500, lineHeight: 34, ...mono });
+    k.textStyle("Studio 30", { size: 30, fontWeight: 700, letterSpacing: 8, lineHeight: 40, textCase: "UPPER" });
+    k.textStyle("Title display 150", { size: 150, fontWeight: 900, letterSpacing: -4, lineHeight: 150, fontStyle: "italic" });
+    k.textStyle("Tagline 30", { size: 30, fontWeight: 500, letterSpacing: 2, lineHeight: 40 });
+    k.textStyle("Prompt 24", { size: 24, fontWeight: 700, letterSpacing: 10, lineHeight: 32, textCase: "UPPER", ...mono });
+    k.textStyle("Menu 40", { size: 40, fontWeight: 800, letterSpacing: 3, lineHeight: 48, textCase: "UPPER" });
+    k.textStyle("Hint 20", { size: 20, fontWeight: 500, letterSpacing: 2, lineHeight: 28, ...mono });
+    k.textStyle("Heading 64", { size: 64, fontWeight: 900, letterSpacing: -1, lineHeight: 72, fontStyle: "italic", textCase: "UPPER" });
+    k.textStyle("Label 26", { size: 26, fontWeight: 600, lineHeight: 34 });
+    k.textStyle("Value 26", { size: 26, fontWeight: 700, lineHeight: 34, ...mono });
+    k.textStyle("Cap 22", { size: 22, fontWeight: 700, letterSpacing: 2, lineHeight: 28, textAlign: "CENTER", ...mono });
+    k.textStyle("Legend 16", { size: 16, fontWeight: 600, letterSpacing: 1, lineHeight: 22, textCase: "UPPER", ...mono });
+    k.textStyle("Small 18", { size: 18, fontWeight: 500, letterSpacing: 2, lineHeight: 24, textCase: "UPPER", ...mono });
+    k.textStyle("Body 24", { size: 24, fontWeight: 400, lineHeight: 34 });
+    k.textStyle("Weapon 34", { size: 34, fontWeight: 800, letterSpacing: 1, lineHeight: 40, textCase: "UPPER" });
+    k.textStyle("Ammo 96", { size: 96, fontWeight: 800, letterSpacing: -2, lineHeight: 96, textAlign: "RIGHT", ...mono });
+    k.textStyle("Reserve 32", { size: 32, fontWeight: 600, lineHeight: 40, ...mono });
+    k.textStyle("HUD 22", { size: 22, fontWeight: 700, letterSpacing: 2, lineHeight: 28, textCase: "UPPER", ...mono });
+    k.textStyle("Score 44", { size: 44, fontWeight: 800, letterSpacing: 2, lineHeight: 52, textAlign: "RIGHT", ...mono });
+    k.textStyle("Feed 20", { size: 20, fontWeight: 600, lineHeight: 28, textAlign: "RIGHT", ...mono });
+    k.textStyle("Alert 30", { size: 30, fontWeight: 800, letterSpacing: 6, lineHeight: 38, textCase: "UPPER", textAlign: "CENTER", ...mono });
+    k.textStyle("Stat 72", { size: 72, fontWeight: 800, lineHeight: 80, ...mono });
+    k.textStyle("Grade 180", { size: 180, fontWeight: 900, lineHeight: 180, fontStyle: "italic", textAlign: "CENTER" });
+    k.textStyle("Credit role 20", { size: 20, fontWeight: 600, letterSpacing: 4, lineHeight: 28, textCase: "UPPER", textAlign: "CENTER", ...mono });
+    k.textStyle("Credit name 36", { size: 36, fontWeight: 700, lineHeight: 44, textAlign: "CENTER" });
+    k.variantSet(
+      "HUD button",
+      "State",
+      ["Idle", "Hover", "Pressed"],
+      { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", padding: { top: 14, right: 28, bottom: 14, left: 28 }, radius: 4, props: { Label: "Back" }, description: "A chamfered HUD button: hover lights it, pressing flashes it." },
+      (state, id) => {
+        k.propText(id, "Label", { style: "Hint 20", color: state === "Idle" ? "onPanel" : state === "Hover" ? "onPrimary" : "onHud", autoWidth: true });
+      },
+      (state) => ({ fill: state === "Idle" ? k.tint("panel", 0.9) : state === "Hover" ? "primary" : "hud", stroke: { color: "hud", width: 2, align: "INSIDE" } })
+    );
+    k.changeTo("HUD button/Idle", "ON_HOVER", "HUD button/Hover", 120);
+    k.changeTo("HUD button/Hover", "ON_PRESS", "HUD button/Pressed", 60);
+    toggleComponent(k, { track: "line", on: "primary", knob: "onVoid", stateStyle: "Small 18", ink: "onVoid" });
+    oneShot(k, "Damage flash", { width: W, height: H, duration: 500, description: "Full-screen hit flash: change to Hit on every hit." }, (state, id) => {
+      const f = k.rect(id, W, H, [k.gradient({ from: "danger", to: "danger", kind: "RADIAL", fromOpacity: 0, toOpacity: 0.85, handles: [{ x: 0.5, y: 0.5 }, { x: 1.05, y: 0.5 }, { x: 0.5, y: 1.1 }] })], { name: "Flash", absolute: { x: 0, y: 0 }, opacity: 0 });
+      if (state === "Hit") keys(k, f, "opacity", [{ t: 0, v: 1, ease: { kind: "ease", name: "expo-out" } }, { t: 480, v: 0 }]);
+    });
+    oneShot(k, "Shield flash", { width: 520, height: 34, duration: 600, description: "The shield bar lights up as it soaks a hit." }, (state, id) => {
+      const f = k.rect(id, 520, 34, "shield", { name: "Shimmer", radius: 4, absolute: { x: 0, y: 0 }, opacity: 0, effects: [glow(k, "shield", 24)] });
+      if (state === "Hit") keys(k, f, "opacity", [{ t: 0, v: 0.9 }, { t: 120, v: 0.2 }, { t: 240, v: 0.7 }, { t: 580, v: 0 }]);
+    });
+    oneShot(k, "Crosshair", { width: 120, height: 120, duration: 260, description: "The crosshair kicks and shows a hit marker on every shot." }, (state, id) => {
+      const ticks = [["Tick up", 58, 22, 4, 26], ["Tick down", 58, 72, 4, 26], ["Tick left", 22, 58, 26, 4], ["Tick right", 72, 58, 26, 4]];
+      for (const [name, x, y, w, h] of ticks) {
+        const t = k.rect(id, w, h, "hud", { name, absolute: { x, y }, effects: [glow(k, "hud", 8, 0.7)] });
+        if (state === "Hit") {
+          const dx = name.includes("left") ? -10 : name.includes("right") ? 10 : 0, dy = name.includes("up") ? -10 : name.includes("down") ? 10 : 0;
+          if (dx) keys(k, t, "translateX", [{ t: 0, v: dx, ease: { kind: "ease", name: "cubic-out" } }, { t: 240, v: 0 }]);
+          if (dy) keys(k, t, "translateY", [{ t: 0, v: dy, ease: { kind: "ease", name: "cubic-out" } }, { t: 240, v: 0 }]);
+        }
+      }
+      k.ellipse(id, 6, "hud", { name: "Dot", absolute: { x: 57, y: 57 } });
+      const marker = poly(k, id, [[34, 34], [46, 46], [60, 60], [74, 74], [86, 86]], "accent", { name: "Hit marker", stroke: 5, opacity: 0 });
+      const marker2 = poly(k, id, [[86, 34], [34, 86]], "accent", { name: "Hit marker cross", stroke: 5, opacity: 0 });
+      if (state === "Hit") for (const m of [marker, marker2]) keys(k, m, "opacity", [{ t: 0, v: 1 }, { t: 240, v: 0 }]);
+    });
+    oneShot(k, "Kill pop", { width: 620, height: 44, state: "New", duration: 900, description: "The kill feed's newest entry slides in and glows." }, (state, id) => {
+      if (state !== "New") return;
+      const plate = k.rect(id, 620, 44, k.tint("accent", 0.28), { name: "Plate", radius: 4, absolute: { x: 0, y: 0 } });
+      const line = k.text(id, "\xD7  SENTINEL DRONE ELIMINATED  +150", { style: "Feed 20", color: "onVoid", absolute: { x: 0, y: 8 }, width: 604, align: "RIGHT", name: "Kill line" });
+      keys(k, plate, "opacity", [{ t: 0, v: 1 }, { t: 860, v: 0 }]);
+      keys(k, line, "opacity", [{ t: 0, v: 0, ease: { kind: "ease", name: "cubic-out" } }, { t: 120, v: 1, ease: { kind: "hold" } }, { t: 700, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: 880, v: 0 }]);
+      keys(k, line, "translateX", [{ t: 0, v: 60, ease: { kind: "ease", name: "expo-out" } }, { t: 300, v: 0 }]);
+    });
+    oneShot(k, "Pickup toast", { width: 420, height: 64, state: "Show", duration: 1300, description: "A pickup pops in over the HUD and floats away." }, (state, id) => {
+      if (state !== "Show") return;
+      const plate = box(k, id, 0, 0, 420, 64, { name: "Toast plate", radius: 6, fill: "shield", align: "CENTER", justify: "CENTER" });
+      k.text(plate, "+50 SHIELD CELL", { style: "Alert 30", color: "onShield", autoWidth: true, name: "Toast text" });
+      {
+        keys(k, plate, "opacity", [{ t: 0, v: 0, ease: { kind: "ease", name: "back-out", param: 2 } }, { t: 180, v: 1, ease: { kind: "hold" } }, { t: 1e3, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: 1280, v: 0 }]);
+        keys(k, plate, "scaleX", [{ t: 0, v: 0.6, ease: { kind: "ease", name: "back-out", param: 2 } }, { t: 260, v: 1 }]);
+        keys(k, plate, "scaleY", [{ t: 0, v: 0.6, ease: { kind: "ease", name: "back-out", param: 2 } }, { t: 260, v: 1 }]);
+        keys(k, plate, "translateY", [{ t: 900, v: 0, ease: { kind: "ease", name: "cubic-in" } }, { t: 1280, v: -40 }]);
+      }
+    });
+    oneShot(k, "Reload ring", { width: 160, height: 160, state: "Reloading", duration: 900, description: "A ring that sweeps round as the magazine goes in." }, (state, id) => {
+      const ring = arc(k, id, 80, 80, 72, -Math.PI / 2, Math.PI, "hud", 6, { name: "Ring", opacity: 0, effects: [glow(k, "hud", 12)] });
+      const rb = k.node(ring);
+      k.patch(ring, { anchorX: (80 - rb.x) / rb.width, anchorY: (80 - rb.y) / rb.height });
+      if (state === "Reloading") {
+        keys(k, ring, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: 860, v: 1, ease: { kind: "linear" } }, { t: 900, v: 0 }]);
+        keys(k, ring, "rotation", [{ t: 0, v: 0, ease: { kind: "ease", name: "cubic-in-out" } }, { t: 860, v: -360 }]);
+      }
+    });
+    const boot = screen(k, "Boot", { ground: "void", first: true, duration: 3600 });
+    const title = screen(k, "Title", { ground: "void" });
+    const main = screen(k, "Main menu", { ground: "void" });
+    const loadout = screen(k, "Loadout", { ground: "deep" });
+    const settings = screen(k, "Settings", { ground: "deep" });
+    const credits = screen(k, "Credits", { ground: "void", duration: 12e3 });
+    const hud = screen(k, "Gameplay HUD", { ground: "void" });
+    const wheel = screen(k, "Weapon wheel", { ground: "void", fills: k.tint("scrim", 0.55) });
+    const pause = screen(k, "Pause", { ground: "void", fills: k.tint("scrim", 0.78) });
+    const failed = screen(k, "Mission failed", { ground: "void" });
+    const complete = screen(k, "Mission complete", { ground: "deep" });
+    k.flowStart(boot, "Play VANTA//PROTOCOL");
+    const resetRun = [
+      set(health.id, { expression: maxHealth.n }),
+      set(healthLag.id, { expression: maxHealth.n }),
+      set(shield.id, { value: 100 }),
+      set(ammo.id, { expression: mag.n }),
+      set(reserve.id, { expression: `${mag.n} * 3` }),
+      set(score.id, { value: 0 }),
+      set(kills.id, { value: 0 })
+    ];
+    const toGame = go(hud, "ZOOM_THROUGH", { duration: 500 });
+    const menuGround = (id) => {
+      shaderLayer(k, id, "Grid glow", { speed: 0.25 }, { opacity: 0.35, name: "Grid floor" });
+      k.rect(id, W, H, [k.gradient({ from: "void", to: "void", angle: 0, fromOpacity: 0.95, toOpacity: 0.35 })], { name: "Wash", absolute: { x: 0, y: 0 } });
+    };
+    const hintBar = (id, text) => {
+      const b = box(k, id, 0, H - 64, W, 64, { name: "Hint bar", fill: k.tint("panel", 0.85), direction: "HORIZONTAL", align: "CENTER", padding: { top: 0, right: 64, bottom: 0, left: 64 } });
+      k.text(b, text, { style: "Hint 20", color: "dim", autoWidth: true, name: "Hints" });
+    };
+    {
+      k.logo(boot, 120, 120, { absolute: { x: 900, y: 280 } });
+      label(k, boot, "{{brand.studio}}", "Studio 30", "onVoid", 0, 430, { w: W, align: "CENTER", name: "Studio" });
+      const log = box(k, boot, 560, 540, 800, 240, { name: "Boot log", gap: 2 });
+      const lines = ["> neural link handshake ........ OK", "> optic overlay calibrated ...... OK", "> threat lattice loaded ......... 41 nodes", "> callsign bound .................. WRAITH-6", "> syncing field of view ............ 95\xB0"];
+      lines.forEach((t) => k.text(log, t, { style: "Boot 22", color: "hud", name: "Log line" }));
+      const linkBar = box(k, boot, 560, 800, 800, 8, { name: "Link bar", fill: "line", radius: 4, clip: true });
+      const fillBar = k.rect(linkBar, 800, 8, "hud", { name: "Link fill", radius: 4, absolute: { x: 0, y: 0 } });
+      k.patch(fillBar, { anchorX: 0 });
+      keys(k, fillBar, "scaleX", [{ t: 200, v: 0.01, ease: { kind: "ease", name: "cubic-in-out" } }, { t: 3e3, v: 1 }]);
+      k.cues(boot, [
+        { layer: "{{brand.logo}}", preset: "scale-in", at: 0 },
+        { layer: "Studio", preset: "fade-in", at: 300 },
+        { layer: "Log line", preset: "typewriter", at: 700, params: { duration: 420 }, stagger: { delay: 460 } }
+      ]);
+      k.link(boot, title, "DISSOLVE", { trigger: "AFTER_TIMEOUT", delay: 3400, duration: 600 });
+      k.link(boot, title, "DISSOLVE", { key: "*", duration: 400 });
+      k.link(boot, title, "DISSOLVE", { duration: 400 });
+    }
+    {
+      shaderLayer(k, title, "Starfield", {}, { name: "Starfield" });
+      k.rect(title, W, H, [k.gradient({ from: "void", to: "accent", kind: "RADIAL", fromOpacity: 0, toOpacity: 0.25, handles: [{ x: 0.5, y: 0.45 }, { x: 1.1, y: 0.45 }, { x: 0.5, y: 1.2 }] })], { name: "Vignette", absolute: { x: 0, y: 0 } });
+      const lock = box(k, title, 160, 340, 1600, 300, { name: "Title lockup" });
+      const ghostA = label(k, lock, "{{brand.title}}", "Title display 150", "accent", 0, 0, { w: 1600, align: "CENTER", name: "Glitch magenta" });
+      const ghostB = label(k, lock, "{{brand.title}}", "Title display 150", "hud", 0, 0, { w: 1600, align: "CENTER", name: "Glitch cyan" });
+      label(k, lock, "{{brand.title}}", "Title display 150", "onVoid", 0, 0, { w: 1600, align: "CENTER", name: "Title" });
+      k.patch(ghostA, { opacity: 0.8 });
+      k.patch(ghostB, { opacity: 0.7 });
+      k.behave(ghostA, "translateX", [{ kind: "noise", amp: 10, freq: 3, seed: 7 }]);
+      k.behave(ghostB, "translateX", [{ kind: "noise", amp: 8, freq: 4, seed: 19 }]);
+      label(k, lock, "{{brand.tagline}}", "Tagline 30", "dim", 0, 190, { w: 1600, align: "CENTER", name: "Tagline" });
+      const prompt = label(k, title, "Press any key", "Prompt 24", "hud", 0, 820, { w: W, align: "CENTER", name: "Prompt" });
+      drift(k, prompt, "opacity", 0.35, 0.7);
+      label(k, title, "\xA9 2026 {{brand.studio}}  \xB7  build 0.9.4-field", "Small 18", "dim", 0, 1010, { w: W, align: "CENTER", name: "Legal" });
+      k.cues(title, [{ layer: "Title lockup", preset: "blur-in", at: 0 }, { layer: "Prompt", preset: "fade-in", at: 900 }]);
+      k.link(title, main, "DISSOLVE", { key: "*", duration: 350 });
+      k.link(title, main, "DISSOLVE", { duration: 350 });
+    }
+    {
+      menuGround(main);
+      label(k, main, "{{brand.title}}", "Heading 64", "onVoid", 120, 110, { w: 900, name: "Wordmark" });
+      k.rect(main, 120, 6, "accent", { name: "Wordmark rule", absolute: { x: 124, y: 200 } });
+      menu(k, main, [
+        { label: "Continue", hint: "Relay 2 of 3", actions: [toGame] },
+        { label: "New operation", hint: "Fresh squad, full kit", actions: [...resetRun, toGame] },
+        { label: "Loadout", actions: [go(loadout, "PUSH_FROM_RIGHT", { duration: 350 })] },
+        { label: "Settings", actions: [go(settings, "PUSH_FROM_RIGHT", { duration: 350 })] },
+        { label: "Credits", actions: [go(credits, "DISSOLVE", { duration: 400 })] },
+        { label: "Quit to title", actions: [go(title, "DISSOLVE", { duration: 400 })] }
+      ], { focus: menuFocus, x: 100, y: 300, width: 860, pitch: 86, style: "Menu 40", color: "onVoid", plate: [k.gradient({ from: "primary", to: "primary", angle: 0, fromOpacity: 0.55, toOpacity: 0 })], marker: { color: "hud" }, hintStyle: "Hint 20" });
+      const card = box(k, main, 1240, 300, 560, 520, { name: "Operative card", fill: k.tint("panel", 0.8), radius: 6, stroke: { color: "line", width: 2 } });
+      const holo = box(k, card, 130, 40, 300, 300, { name: "Hologram" });
+      const spinAbout = (id, cx, cy, rate) => {
+        const b = k.node(id);
+        k.patch(id, { anchorX: (cx - b.x) / b.width, anchorY: (cy - b.y) / b.height });
+        spin(k, id, rate);
+      };
+      spinAbout(arc(k, holo, 150, 150, 148, 0, Math.PI * 1.5, "hud", 3, { name: "Holo ring" }), 150, 150, 24);
+      spinAbout(arc(k, holo, 150, 150, 110, 0, Math.PI, "accent", 3, { name: "Holo ring inner" }), 150, 150, -40);
+      poly(k, holo, [[150, 70], [210, 120], [190, 220], [110, 220], [90, 120]], k.tint("hud", 0.25), { name: "Helmet" });
+      poly(k, holo, [[112, 140], [188, 140], [178, 164], [122, 164]], "hud", { name: "Visor", effects: [glow(k, "hud", 18)] });
+      readout(k, card, callsign.n, "WRAITH-6", "Weapon 34", "onPanel", 0, 370, { w: 560, align: "CENTER", name: "Callsign" });
+      label(k, card, "Rank IV \xB7 Vanguard", "Small 18", "dim", 0, 420, { w: 560, align: "CENTER", name: "Rank" });
+      readout(k, card, `"KILLS " + kills + "   \xB7   SCORE " + pad(score, 6)`, "KILLS 0   \xB7   SCORE 000000", "Small 18", "hud", 0, 460, { w: 560, align: "CENTER", name: "Career" });
+      const tick = box(k, main, 0, 920, W, 44, { name: "Ticker", clip: true });
+      const words = label(k, tick, "FIELD REPORT  \xB7  Relay Kappa has gone dark  \xB7  Sentinel drones sighted on deck nine  \xB7  Core temperature rising  \xB7  Extraction window: 14 minutes  \xB7  ", "Small 18", "dim", 0, 10, { name: "Ticker words" });
+      k.behave(words, "translateX", [{ kind: "spin", rate: -60 }, { kind: "mod", period: 1200, offset: -1200 }]);
+      hintBar(main, "\u2191 \u2193  SELECT      ENTER  CONFIRM      MOUSE  POINT AND CLICK");
+      k.cues(main, [{ layer: "Menu item", preset: "slide-in", at: 0, params: { direction: "left" }, stagger: { delay: 60 } }, { layer: "Operative card", preset: "rise-in", at: 200 }]);
+    }
+    {
+      menuGround(loadout);
+      label(k, loadout, "Loadout", "Heading 64", "onVoid", 120, 90, { name: "Screen title" });
+      label(k, loadout, "Choose the primary you carry into the core.", "Body 24", "dim", 124, 176, { name: "Screen lead" });
+      const pick = (i) => [
+        set(weapon.id, { value: i }),
+        set(mag.id, { value: WEAPONS[i].mag }),
+        set(dmg.id, { value: WEAPONS[i].dmg, glide: 420 }),
+        set(rof.id, { value: WEAPONS[i].rof, glide: 420 }),
+        set(rng.id, { value: WEAPONS[i].rng, glide: 420 }),
+        set(ammo.id, { value: WEAPONS[i].mag, glide: 300 }),
+        set(reserve.id, { value: WEAPONS[i].mag * 3 })
+      ];
+      const row = menu(k, loadout, WEAPONS.map((w, i) => ({ label: w.name, actions: pick(i) })), {
+        focus: weapon,
+        x: 120,
+        y: 260,
+        width: 540,
+        pitch: 30,
+        itemHeight: 90,
+        horizontal: true,
+        style: "Weapon 34",
+        color: "onVoid",
+        nudge: 0,
+        onFocus: pick,
+        plate: [k.gradient({ from: "primary", to: "accent", angle: 0, fromOpacity: 0.7, toOpacity: 0.35 })],
+        radius: 4,
+        escape: [back()]
+      });
+      k.patch(row, { name: "Weapon row" });
+      const sil = box(k, loadout, 120, 400, 900, 420, { name: "Weapon bay", fill: k.tint("panel", 0.7), radius: 6, stroke: { color: "line", width: 2 } });
+      const SHAPES = [
+        [[0, 70], [420, 60], [470, 30], [700, 30], [740, 60], [700, 90], [470, 96], [430, 130], [330, 180], [280, 180], [310, 110], [0, 100]],
+        [[120, 76], [380, 66], [420, 36], [600, 36], [640, 66], [600, 100], [440, 104], [420, 180], [370, 180], [372, 110], [330, 112], [300, 170], [250, 170], [276, 110], [120, 106]],
+        [[0, 84], [560, 70], [600, 44], [740, 44], [740, 96], [600, 100], [470, 112], [380, 172], [330, 172], [360, 110], [0, 108]]
+      ];
+      const RAILS = [[[480, 44], [690, 44], [690, 56], [480, 56]], [[430, 48], [590, 48], [590, 58], [430, 58]], [[80, 90], [560, 80], [560, 92], [80, 100]]];
+      const gun = box(k, sil, 80, 120, 740, 180, { name: "Weapon silhouette" });
+      SHAPES.forEach((pts, i) => {
+        const g = box(k, gun, 0, 0, 740, 180, { name: WEAPONS[i].name });
+        poly(k, g, pts, k.tint("hud", 0.18), { name: "Receiver" });
+        poly(k, g, pts, "hud", { name: "Receiver line", stroke: 3, closed: true });
+        poly(k, g, RAILS[i], "accent", { name: "Rail glow", effects: [glow(k, "accent", 16)] });
+        k.bindExpression(g, "visible", `${weapon.n} == ${i}`);
+      });
+      drift(k, gun, "translateY", 6, 0.35);
+      readout(k, sil, WEAPONS.map((w, i) => `${weapon.n} == ${i} ? "${w.kind.toUpperCase()} \u2014 ${w.blurb}"`).join(" : ") + ' : ""', `${WEAPONS[0].kind.toUpperCase()} \u2014 ${WEAPONS[0].blurb}`, "Body 24", "onPanel", 40, 340, { w: 820, name: "Weapon blurb" });
+      const stats = box(k, loadout, 1100, 400, 700, 420, { name: "Stats", fill: k.tint("panel", 0.7), radius: 6, stroke: { color: "line", width: 2 } });
+      [["Damage", dmg], ["Fire rate", rof], ["Range", rng]].forEach(([name, v], i) => {
+        label(k, stats, name, "Label 26", "onPanel", 40, 40 + i * 110, { name: "Stat name" });
+        readout(k, stats, `round(${v.n})`, String(k.doc.variables[v.id].valuesByMode["Mode 1"]), "Value 26", "hud", 460, 40 + i * 110, { w: 200, align: "RIGHT", name: "Stat value" });
+        bar(k, stats, { x: 40, y: 88 + i * 110, w: 620, h: 14, value: v.n, max: "100", back: "line", fill: [k.gradient({ from: "primary", to: "hud", angle: 0 })], radius: 7, name: `${name} bar` });
+      });
+      readout(k, stats, `"MAGAZINE  " + ${mag.n} + "   \xB7   RESERVE  " + ${mag.n} * 3`, "MAGAZINE  30   \xB7   RESERVE  90", "Small 18", "dim", 40, 360, { w: 620, name: "Magazine" });
+      const done = k.instance(loadout, "HUD button", { Label: "Confirm loadout  ENTER" }, { name: "Confirm", absolute: { x: 1440, y: 880 } });
+      k.on(done, back());
+      k.on(loadout, back(), { key: "Enter" });
+      hintBar(loadout, "LEFT RIGHT  CHOOSE WEAPON      ENTER  CONFIRM      ESC  BACK");
+    }
+    {
+      menuGround(settings);
+      label(k, settings, "Settings", "Heading 64", "onVoid", 120, 80, { name: "Screen title" });
+      const col = box(k, settings, 120, 200, 1100, 780, { name: "Settings list" });
+      const rows = 9;
+      focusColumn(k, settings, { focus: setFocus, count: rows, x: 100, y: 196, w: 1140, pitch: 80, plate: k.tint("primary", 0.25), guard: `${rebind.n} == ""`, escape: [back()] });
+      const common = { labelStyle: "Label 26", ink: "onVoid" };
+      const sl = { ...common, valueStyle: "Value 26", track: "line", fill: "hud", knob: "onVoid" };
+      const rowsAt = (i) => ({ x: 0, y: i * 80, width: 1100, focus: { n: setFocus.n, index: i } });
+      const r0 = slider(k, col, { ...sl, ...rowsAt(0), label: "Master volume", variable: master, suffix: "%" });
+      const r1 = slider(k, col, { ...sl, ...rowsAt(1), label: "Music", variable: music, suffix: "%" });
+      const r2 = slider(k, col, { ...sl, ...rowsAt(2), label: "Look sensitivity", variable: sens, min: 1, max: 10, step: 1 });
+      const r3 = slider(k, col, { ...sl, ...rowsAt(3), label: "Field of view", variable: fov, min: 70, max: 110, step: 5, suffix: "\xB0" });
+      const r4 = toggle(k, col, { ...common, ...rowsAt(4), label: "Invert look", variable: invert });
+      const r5 = toggle(k, col, { ...common, ...rowsAt(5), label: "Subtitles", variable: subs });
+      const kb = { ...common, capStyle: "Cap 22", cap: "panel", onCap: "hud", listening: "accent", rebind };
+      const r6 = keybind(k, col, { ...kb, ...rowsAt(6), action: "Fire", slot: "fire", variable: keyFire });
+      const r7 = keybind(k, col, { ...kb, ...rowsAt(7), action: "Reload", slot: "reload", variable: keyReload });
+      const r8 = keybind(k, col, { ...kb, ...rowsAt(8), action: "Weapon wheel", slot: "wheel", variable: keyWheel });
+      [r0, r1, r2, r3, r4, r5, r6, r7, r8].forEach((r, i) => focusRow(k, r, setFocus, i));
+      rebindListener(k, settings, rebind, [{ slot: "fire", variable: keyFire }, { slot: "reload", variable: keyReload }, { slot: "wheel", variable: keyWheel }]);
+      const preview = box(k, settings, 1320, 200, 480, 440, { name: "FOV preview", fill: k.tint("panel", 0.8), radius: 6, stroke: { color: "line", width: 2 } });
+      label(k, preview, "Field of view", "Small 18", "dim", 32, 28, { name: "Preview title" });
+      const fan = poly(k, preview, [[240, 380], [40, 120], [440, 120]], k.tint("hud", 0.22), { name: "View cone" });
+      k.bindExpression(fan, "scaleX", `${fov.n} / 95`);
+      k.patch(fan, { anchorX: 0.5, anchorY: 1 });
+      k.ellipse(preview, 24, "accent", { name: "Eye", absolute: { x: 228, y: 368 } });
+      readout(k, preview, `${fov.n} + "\xB0"`, "95\xB0", "Stat 72", "onPanel", 32, 60, { w: 416, align: "RIGHT", name: "FOV figure" });
+      const b = k.instance(settings, "HUD button", { Label: "Back  ESC" }, { name: "Back", absolute: { x: 1620, y: 900 } });
+      k.on(b, back());
+      hintBar(settings, "\u2191 \u2193  ROW      LEFT RIGHT  ADJUST      ENTER  TOGGLE / REBIND      ESC  BACK");
+    }
+    {
+      shaderLayer(k, credits, "Starfield", {}, { name: "Starfield", opacity: 0.6 });
+      k.rect(credits, W, H, k.tint("void", 0.7), { name: "Wash", absolute: { x: 0, y: 0 } });
+      const roll = box(k, credits, 460, 50, 1e3, 980, { name: "Credits roll", gap: 18, align: "CENTER" });
+      k.text(roll, "Credits", { style: "Heading 64", color: "onVoid", align: "CENTER", name: "Roll title" });
+      for (const [role, name] of CREDITS) {
+        const g = k.stack(roll, { gap: 2, align: "CENTER", name: "Credit" });
+        k.text(g, role, { style: "Credit role 20", color: "hud", align: "CENTER", name: "Role" });
+        k.text(g, name, { style: "Credit name 36", color: "onVoid", align: "CENTER", name: "Name" });
+      }
+      k.text(roll, "A {{brand.studio}} production", { style: "Credit role 20", color: "dim", align: "CENTER", name: "Sign-off" });
+      keys(k, roll, "translateY", [{ t: 0, v: 1080, ease: { kind: "linear" } }, { t: 11800, v: -1100 }]);
+      k.link(credits, main, "DISSOLVE", { key: "*", duration: 350 });
+      k.link(credits, main, "DISSOLVE", { duration: 350 });
+    }
+    {
+      const hall = box(k, hud, 0, 0, W, H, { name: "Corridor" });
+      poly(k, hall, [[0, 0], [W, 0], [1180, 380], [740, 380]], "deep", { name: "Ceiling" });
+      poly(k, hall, [[0, H], [W, H], [1180, 620], [740, 620]], "panel", { name: "Floor" });
+      poly(k, hall, [[0, 0], [740, 380], [740, 620], [0, H]], "grid", { name: "Left wall" });
+      poly(k, hall, [[W, 0], [1180, 380], [1180, 620], [W, H]], "grid", { name: "Right wall" });
+      for (const t of [0.2, 0.45, 0.7]) {
+        const lx = 740 * t, rx = W - (W - 1180) * t, yT = 380 * t, yB = H - (H - 620) * t;
+        poly(k, hall, [[lx, yT], [lx, yB]], "line", { name: "Wall seam", stroke: 3 });
+        poly(k, hall, [[rx, yT], [rx, yB]], "line", { name: "Wall seam", stroke: 3 });
+      }
+      const lights = [poly(k, hall, [[200, 96], [740, 380]], "hud", { name: "Strip light", stroke: 4, effects: [glow(k, "hud", 22)] }), poly(k, hall, [[1720, 96], [1180, 380]], "hud", { name: "Strip light", stroke: 4, effects: [glow(k, "hud", 22)] })];
+      for (const l of lights) drift(k, l, "opacity", 0.15, 1.3);
+      const door = box(k, hall, 800, 400, 320, 220, { name: "Core door", fill: "deep", stroke: { color: "accent", width: 3 }, effects: [glow(k, "accent", 40, 0.6)] });
+      k.rect(door, 4, 220, "accent", { name: "Door seam", absolute: { x: 158, y: 0 } });
+      [[860, 440, 0], [1010, 470, 0.4], [930, 500, 0.8]].forEach(([x, y, ph], i) => {
+        const d = box(k, hall, x, y, 70, 46, { name: "Sentinel drone" });
+        poly(k, d, [[10, 0], [60, 0], [70, 23], [60, 46], [10, 46], [0, 23]], "panel", { name: "Drone body" });
+        k.ellipse(d, 16, "danger", { name: "Drone eye", absolute: { x: 27, y: 15 }, effects: [glow(k, "danger", 14)] });
+        drift(k, d, "translateY", 10 + i * 3, 0.5 + i * 0.1, ph);
+        drift(k, d, "translateX", 14, 0.23 + i * 0.07, ph);
+      });
+      const gun = box(k, hud, 1180, 700, 740, 380, { name: "Viewmodel" });
+      poly(k, gun, [[120, 380], [300, 170], [560, 90], [740, 60], [740, 380]], "panel", { name: "Viewmodel body" });
+      poly(k, gun, [[300, 170], [560, 90], [740, 60]], "hud", { name: "Viewmodel edge", stroke: 3, effects: [glow(k, "hud", 10, 0.6)] });
+      poly(k, gun, [[520, 150], [700, 120], [705, 140], [525, 170]], "accent", { name: "Viewmodel rail", effects: [glow(k, "accent", 14)] });
+      drift(k, gun, "translateY", 8, 0.5);
+      drift(k, gun, "rotation", 0.6, 0.25);
+      const cracks = box(k, hud, 0, 0, W, H, { name: "Visor cracks" });
+      const crackA = poly(k, cracks, [[1660, 0], [1560, 140], [1600, 190], [1480, 330], [1510, 360], [1420, 470]], "onVoid", { name: "Crack", stroke: 2, opacity: 0.55 });
+      const crackB = poly(k, cracks, [[1560, 140], [1700, 230], [1760, 380]], "onVoid", { name: "Crack branch", stroke: 2, opacity: 0.45 });
+      const crackC = poly(k, cracks, [[0, 760], [180, 700], [230, 760], [420, 690], [470, 740], [640, 700]], "onVoid", { name: "Crack", stroke: 2, opacity: 0.5 });
+      for (const c of [crackA, crackB]) k.bindExpression(c, "visible", `${health.n} < 60`);
+      k.bindExpression(crackC, "visible", `${health.n} < 30`);
+      const low = box(k, hud, 0, 0, W, H, { name: "Low health" });
+      const edge = { ...k.gradient({ from: "danger", to: "danger", kind: "RADIAL", fromOpacity: 0, toOpacity: 0.6, handles: [{ x: 0.5, y: 0.5 }, { x: 1.02, y: 0.5 }, { x: 0.5, y: 1.1 }] }) };
+      const stops = edge.gradientStops;
+      edge.gradientStops = [stops[0], { position: 0.62, color: stops[0].color }, stops[1]];
+      const vig = k.rect(low, W, H, [edge], { name: "Vignette", absolute: { x: 0, y: 0 } });
+      k.bindExpression(vig, "visible", `${health.n} < 35`);
+      drift(k, low, "opacity", 0.3, 1.4);
+      const lowText = box(k, hud, 520, 244, 880, 56, { name: "Critical warning", fill: "danger", radius: 4, align: "CENTER", justify: "CENTER" });
+      k.text(lowText, "Vitals critical \u2014 find cover", { style: "Alert 30", color: "onDanger", autoWidth: true, name: "Critical words" });
+      k.bindExpression(lowText, "visible", `${health.n} < 35 && ${health.n} > 0`);
+      drift(k, lowText, "opacity", 0.4, 2);
+      const cross = k.instance(hud, "Crosshair", {}, { name: "Crosshair", absolute: { x: 900, y: 480 } });
+      const obj = box(k, hud, 60, 50, 620, 110, { name: "Objective", fill: k.tint("scrim", 0.55), radius: 4, padding: 20, gap: 6 });
+      k.text(obj, "Objective", { style: "Small 18", color: "hud", name: "Objective label" });
+      readout(k, obj, `"Clear the deck \u2014 " + min(${kills.n}, 5) + " / 5 sentinels"`, "Clear the deck \u2014 0 / 5 sentinels", "Label 26", "onVoid", 20, 50, { w: 580, name: "Objective text" });
+      const compass = box(k, hud, 660, 40, 600, 50, { name: "Compass", clip: true, fill: k.tint("scrim", 0.45), radius: 4 });
+      const heading = label(k, compass, "W  \xB7  \xB7  NW  \xB7  \xB7  N  \xB7  \xB7  NE  \xB7  \xB7  E  \xB7  \xB7  SE  \xB7  \xB7  S", "HUD 22", "onVoid", -200, 11, { name: "Headings" });
+      drift(k, heading, "translateX", 60, 0.08);
+      k.rect(compass, 3, 50, "accent", { name: "Heading needle", absolute: { x: 298, y: 0 } });
+      readout(k, hud, `pad(${score.n}, 6)`, "000000", "Score 44", "onVoid", 1440, 120, { w: 420, align: "RIGHT", name: "Score" });
+      label(k, hud, "Score", "Small 18", "onVoid", 1440, 174, { w: 420, align: "RIGHT", name: "Score label" });
+      const feed = box(k, hud, 1240, 216, 620, 150, { name: "Kill feed", gap: 6, fill: k.tint("scrim", 0.7), radius: 4 });
+      const pop = k.instance(feed, "Kill pop", {}, { name: "Newest kill", absolute: { x: 0, y: 0 } });
+      label(k, feed, "VESPER-2  \xD7  HUNTER UNIT", "Feed 20", "onVoid", 0, 60, { w: 604, align: "RIGHT", name: "Older kill" });
+      label(k, feed, "ORCHID-9  \xD7  SENTINEL DRONE", "Feed 20", "onVoid", 0, 94, { w: 604, align: "RIGHT", name: "Older kill" });
+      const radar = box(k, hud, 60, 190, 240, 240, { name: "Radar" });
+      k.ellipse(radar, 240, k.tint("scrim", 0.6), { name: "Radar disc", stroke: { color: "line", width: 2 }, absolute: { x: 0, y: 0 } });
+      k.ellipse(radar, 160, [], { name: "Radar ring", stroke: { color: "line", width: 1 }, absolute: { x: 40, y: 40 } });
+      const sweep = sector(k, radar, 120, 120, 118, 0, -0.9, 0, k.tint("hud", 0.3), { name: "Sweep" });
+      const sb = k.node(sweep);
+      k.patch(sweep, { anchorX: (120 - sb.x) / sb.width, anchorY: (120 - sb.y) / sb.height });
+      spin(k, sweep, 120);
+      k.ellipse(radar, 12, "hud", { name: "You", absolute: { x: 114, y: 114 } });
+      [[70, 60], [170, 80], [150, 170]].forEach(([x, y], i) => {
+        const b = k.ellipse(radar, 12, "danger", { name: "Blip", absolute: { x, y } });
+        drift(k, b, "opacity", 0.45, 1, i * 0.3);
+        k.bindExpression(b, "visible", `${kills.n} < ${5 - i}`);
+      });
+      const vit = box(k, hud, 60, 850, 620, 180, { name: "Vitals", fill: k.tint("scrim", 0.55), radius: 4 });
+      readout(k, vit, callsign.n, "WRAITH-6", "HUD 22", "hud", 24, 18, { w: 400, name: "Callsign" });
+      bar(k, vit, { x: 24, y: 58, w: 520, h: 34, value: shield.n, max: "100", back: "line", fill: "shield", radius: 4, name: "Shield bar" });
+      k.instance(vit, "Shield flash", {}, { name: "Shield flash", absolute: { x: 24, y: 58 } });
+      for (let i = 1; i < 5; i++) k.rect(vit, 3, 34, "scrim", { name: "Pip gap", absolute: { x: 24 + i * 104, y: 58 } });
+      readout(k, vit, `round(${shield.n})`, "100", "HUD 22", "onVoid", 552, 62, { w: 60, align: "RIGHT", name: "Shield value" });
+      bar(k, vit, { x: 24, y: 108, w: 520, h: 44, value: health.n, max: maxHealth.n, back: "line", fill: [k.gradient({ from: "health", to: "hud", angle: 0 })], chip: { expression: healthLag.n, color: "chip" }, radius: 4, name: "Health bar" });
+      readout(k, vit, `round(${health.n})`, "100", "Reserve 32", "onVoid", 544, 110, { w: 72, align: "RIGHT", name: "Health value" });
+      const am = box(k, hud, 1380, 860, 480, 170, { name: "Ammo", fill: k.tint("scrim", 0.55), radius: 4 });
+      readout(k, am, WEAPONS.map((w, i) => `${weapon.n} == ${i} ? "${w.name}"`).join(" : ") + ' : ""', WEAPONS[0].name, "HUD 22", "hud", 24, 16, { w: 432, align: "RIGHT", name: "Weapon name" });
+      readout(k, am, `round(${ammo.n})`, "30", "Ammo 96", "onVoid", 24, 52, { w: 280, align: "RIGHT", name: "Ammo count" });
+      readout(k, am, `"/ " + ${reserve.n}`, "/ 90", "Reserve 32", "dim", 320, 100, { w: 150, name: "Reserve" });
+      const empty = label(k, hud, "Reload", "Alert 30", "warn", 0, 610, { w: W, align: "CENTER", name: "Reload prompt" });
+      k.bindExpression(empty, "visible", `${ammo.n} == 0`);
+      k.bindExpression(empty, "characters", `"PRESS " + ${keyReload.n} + " TO RELOAD"`);
+      drift(k, empty, "opacity", 0.4, 2.5);
+      const ring = k.instance(hud, "Reload ring", {}, { name: "Reload ring", absolute: { x: 880, y: 460 } });
+      const toast = k.instance(hud, "Pickup toast", {}, { name: "Pickup toast", absolute: { x: 750, y: 700 } });
+      const flash = k.instance(hud, "Damage flash", {}, { name: "Damage flash", absolute: { x: 0, y: 0 } });
+      const legend = box(k, hud, 700, 990, 660, 40, { name: "Controls", fill: k.tint("scrim", 0.85), radius: 4 });
+      readout(k, legend, `${keyFire.n} + " FIRE \xB7 " + ${keyReload.n} + " RELOAD \xB7 H HIT \xB7 E CELL \xB7 K KILL \xB7 " + ${keyWheel.n} + " WHEEL"`, "F FIRE \xB7 R RELOAD \xB7 H HIT \xB7 E CELL \xB7 K KILL \xB7 Q WHEEL", "Legend 16", "onVoid", 0, 9, { w: 660, align: "CENTER", name: "Legend" });
+      const logic = box(k, hud, 0, 0, 1, 1, { name: "Game logic" });
+      const hit = 'upper($key) == "H"';
+      k.on(logic, when([
+        { if: `upper($key) == ${keyFire.n} && ${ammo.n} > 0`, then: [set(ammo.id, { expression: `${ammo.n} - 1` })] },
+        { if: `upper($key) == ${keyReload.n} && ${reserve.n} > 0 && ${ammo.n} < ${mag.n}`, then: [
+          set(take.id, { expression: `min(${mag.n} - ${ammo.n}, ${reserve.n})` }),
+          set(ammo.id, { expression: `${ammo.n} + ${take.n}`, glide: 800, easing: "EASE_IN_OUT" }),
+          set(reserve.id, { expression: `${reserve.n} - ${take.n}`, glide: 800, easing: "EASE_IN_OUT" })
+        ] },
+        { if: `${hit} && ${shield.n} > 0`, then: [set(shield.id, { expression: `max(0, ${shield.n} - 34)`, glide: 260 })] },
+        { if: hit, then: [
+          set(health.id, { expression: `max(0, ${health.n} - 22)`, glide: 220 }),
+          set(healthLag.id, { expression: health.n, glide: 1100, easing: "EASE_IN_OUT" }),
+          when([{ if: `${health.n} <= 0`, then: [go(failed, "DISSOLVE", { duration: 700 })] }])
+        ] },
+        { if: 'upper($key) == "E"', then: [set(shield.id, { expression: `min(100, ${shield.n} + 50)`, glide: 500 })] },
+        { if: 'upper($key) == "K"', then: [
+          set(kills.id, { expression: `${kills.n} + 1` }),
+          set(score.id, { expression: `${score.n} + 150`, glide: 700 }),
+          when([{ if: `${kills.n} >= 5`, then: [go(complete, "ZOOM_THROUGH", { duration: 600 })] }])
+        ] },
+        { if: `upper($key) == ${keyWheel.n}`, then: [overlay(wheel)] }
+      ]), { key: "*" });
+      k.on(logic, overlay(pause), { key: "Escape" });
+      k.on(cross, when([{ if: `upper($key) == ${keyFire.n} && ${ammo.n} > 0`, then: [k.changeAction("Crosshair/Hit", 0)] }]), { key: "*" });
+      k.on(flash, when([{ if: `${hit} && ${shield.n} <= 0`, then: [k.changeAction("Damage flash/Hit", 0)] }]), { key: "*" });
+      k.on(k.named(vit, "Shield flash")[0], when([{ if: `${hit} && ${shield.n} > 0`, then: [k.changeAction("Shield flash/Hit", 0)] }]), { key: "*" });
+      k.on(pop, when([{ if: 'upper($key) == "K"', then: [k.changeAction("Kill pop/New", 0)] }]), { key: "*" });
+      k.on(toast, when([{ if: 'upper($key) == "E"', then: [k.changeAction("Pickup toast/Show", 0)] }]), { key: "*" });
+      k.on(ring, when([{ if: `upper($key) == ${keyReload.n} && ${reserve.n} > 0 && ${ammo.n} < ${mag.n}`, then: [k.changeAction("Reload ring/Reloading", 0)] }]), { key: "*" });
+    }
+    {
+      const ring = box(k, wheel, 660, 240, 600, 600, { name: "Wheel" });
+      k.ellipse(ring, 600, k.tint("panel", 0.85), { name: "Wheel disc", stroke: { color: "line", width: 2 }, absolute: { x: 0, y: 0 } });
+      WEAPONS.forEach((w, i) => {
+        const a0 = -Math.PI / 2 + i * 2 * Math.PI / 3 - Math.PI / 3 + 0.04, a1 = a0 + 2 * Math.PI / 3 - 0.08;
+        const seg = sector(k, ring, 300, 300, 296, 126, a0, a1, k.tint("primary", 0.8), { name: "Wheel segment" });
+        k.bindExpression(seg, "opacity", `${wheelFocus.n} == ${i} ? 1 : 0.25`);
+        const mid = (a0 + a1) / 2;
+        label(k, ring, w.name, "HUD 22", "onVoid", 300 + Math.cos(mid) * 210 - 110, 300 + Math.sin(mid) * 210 - 14, { w: 220, align: "CENTER", name: "Segment name" });
+        const hot = box(k, ring, 300 + Math.cos(mid) * 210 - 110, 300 + Math.sin(mid) * 210 - 60, 220, 120, { name: "Segment hotspot" });
+        k.on(hot, set(wheelFocus.id, { value: i }), { trigger: "MOUSE_ENTER" });
+        onAll(k, hot, [set(weapon.id, { value: i }), set(mag.id, { value: w.mag }), set(ammo.id, { value: w.mag, glide: 400 }), close()]);
+      });
+      readout(k, ring, WEAPONS.map((w, i) => `${wheelFocus.n} == ${i} ? "${w.kind.toUpperCase()}"`).join(" : ") + ' : ""', WEAPONS[0].kind.toUpperCase(), "Small 18", "hud", 150, 288, { w: 300, align: "CENTER", name: "Wheel centre" });
+      const choose = WEAPONS.map((w, i) => ({ if: `${wheelFocus.n} == ${i}`, then: [set(weapon.id, { value: i }), set(mag.id, { value: w.mag }), set(ammo.id, { value: w.mag, glide: 400 })] }));
+      k.on(wheel, set(wheelFocus.id, { expression: `(${wheelFocus.n} + 1) % 3` }), { key: "ArrowRight" });
+      k.on(wheel, set(wheelFocus.id, { expression: `(${wheelFocus.n} + 2) % 3` }), { key: "ArrowLeft" });
+      onAll(k, wheel, [when(choose), close()], { key: "Enter" });
+      k.on(wheel, when([{ if: `upper($key) == ${keyWheel.n}`, then: [when(choose), close()] }]), { key: "*" });
+      k.on(wheel, close(), { key: "Escape" });
+      const hints = box(k, wheel, 660, 900, 600, 52, { name: "Wheel hints", fill: "panel", radius: 4, align: "CENTER", justify: "CENTER" });
+      k.text(hints, "LEFT RIGHT  CHOOSE      ENTER  EQUIP      ESC  CANCEL", { style: "Hint 20", color: "onPanel", autoWidth: true, name: "Hints" });
+    }
+    {
+      label(k, pause, "Paused", "Heading 64", "onVoid", 0, 250, { w: W, align: "CENTER", name: "Screen title" });
+      menu(k, pause, [
+        { label: "Resume", actions: [close()] },
+        { label: "Settings", actions: [go(settings, "DISSOLVE", { duration: 300 })] },
+        { label: "Abandon operation", actions: [go(main, "DISSOLVE", { duration: 400 })] }
+      ], { focus: pauseFocus, x: 610, y: 400, width: 700, pitch: 86, style: "Menu 40", color: "onVoid", plate: k.tint("primary", 0.55), marker: { color: "hud" }, hintStyle: "Hint 20", escape: [close()], radius: 4 });
+      readout(k, pause, `"KILLS " + ${kills.n} + " / 5   \xB7   SCORE " + pad(${score.n}, 6)`, "KILLS 0 / 5   \xB7   SCORE 000000", "Hint 20", "dim", 0, 720, { w: W, align: "CENTER", name: "Run stats" });
+    }
+    {
+      shaderLayer(k, failed, "Plasma", { speed: 1.6, scale: 20, saturation: 0.1, glow: 0.4, hue: 0 }, { name: "Static", opacity: 0.35 });
+      k.rect(failed, W, H, k.tint("void", 0.55), { name: "Wash", absolute: { x: 0, y: 0 } });
+      const lock = box(k, failed, 0, 300, W, 200, { name: "Failed lockup" });
+      const g = label(k, lock, "Signal lost", "Title display 150", "danger", 0, 0, { w: W, align: "CENTER", name: "Failed glitch" });
+      k.behave(g, "translateX", [{ kind: "noise", amp: 14, freq: 6, seed: 3 }]);
+      label(k, lock, "Signal lost", "Title display 150", "onVoid", 0, 0, { w: W, align: "CENTER", name: "Failed title" });
+      readout(k, failed, `${callsign.n} + " went dark on deck nine with " + ${kills.n} + " confirmed kills."`, "WRAITH-6 went dark on deck nine with 0 confirmed kills.", "Body 24", "dim", 0, 520, { w: W, align: "CENTER", name: "Failed line" });
+      menu(k, failed, [
+        { label: "Retry from checkpoint", actions: [...resetRun, go(hud, "ZOOM_THROUGH", { duration: 500 })] },
+        { label: "Main menu", actions: [go(main, "DISSOLVE", { duration: 400 })] }
+      ], { focus: endFocus, x: 610, y: 640, width: 700, pitch: 86, style: "Menu 40", color: "onVoid", plate: k.tint("danger", 0.4), marker: { color: "danger" }, radius: 4 });
+      k.cues(failed, [{ layer: "Failed lockup", preset: "blur-in", at: 0 }]);
+    }
+    {
+      menuGround(complete);
+      label(k, complete, "Core extracted", "Heading 64", "onVoid", 0, 120, { w: W, align: "CENTER", name: "Screen title" });
+      const tally = box(k, complete, 360, 250, 1200, 300, { name: "Tally", fill: k.tint("panel", 0.8), radius: 6, stroke: { color: "line", width: 2 } });
+      [["Score", `pad(${score.n}, 6)`, "000750"], ["Kills", `${kills.n}`, "5"], ["Vitals kept", `round(${health.n}) + "%"`, "100%"]].forEach(([name, e, rest], i) => {
+        label(k, tally, name, "Small 18", "hud", 60 + i * 380, 60, { name: "Tally name" });
+        readout(k, tally, e, rest, "Stat 72", "onPanel", 60 + i * 380, 100, { w: 340, name: "Tally value" });
+      });
+      readout(k, complete, `${health.n} >= 80 ? "S" : ${health.n} >= 50 ? "A" : ${health.n} >= 25 ? "B" : "C"`, "S", "Grade 180", "accent", 0, 580, { w: W, align: "CENTER", name: "Grade" });
+      label(k, complete, "Operation grade", "Small 18", "dim", 0, 770, { w: W, align: "CENTER", name: "Grade label" });
+      const cont = k.instance(complete, "HUD button", { Label: "Return to base  ENTER" }, { name: "Continue", absolute: { x: 820, y: 860 } });
+      k.on(cont, go(main, "DISSOLVE", { duration: 400 }));
+      k.link(complete, main, "DISSOLVE", { key: "Enter", duration: 400 });
+      k.cues(complete, [{ layer: "Tally", preset: "rise-in", at: 0 }, { layer: "Grade", preset: "pop-in", at: 600 }]);
+    }
+    void blurFx;
+    void [];
+    return k.finish();
+  }
+});
+
+export {
+  vanta_fps_default
+};