@popcraft/kit 0.32.0 → 0.32.1

package/dist/chunks/chunk-VBOYAA42.js

@@ -0,0 +1,685 @@
+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 {
+  JUMP,
+  PILL_W,
+  Plan,
+  RIGHT,
+  button,
+  cycle,
+  flap,
+  hint,
+  holdKeys,
+  machine,
+  onKeys,
+  squash,
+  statePanel,
+  track
+} from "./chunk-GQZERKPL.js";
+import {
+  W,
+  gameKit,
+  label,
+  screen
+} from "./chunk-OUCPQ4WI.js";
+import {
+  E,
+  Lot,
+  arc,
+  around,
+  cloud,
+  roundRect
+} from "./chunk-NA7CIUDF.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/game/mossy-hollow-platformer.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var TABS = ["Level 1-1", "Gloop", "Flit", "? Block"];
+function tabs(l, sheet, screens, current) {
+  const w = 156, gap = 10, x0 = W - 40 - TABS.length * w - (TABS.length - 1) * gap;
+  TABS.forEach((name, i) => {
+    const x = x0 + i * (w + gap);
+    const tab = l.k.instance(sheet, "Tab", { label: name }, { absolute: { x, y: 40 }, name: `${name} tab` });
+    if (i === current) l.box(sheet, x - 4, 36, w + 8, 60, "Current tab", { radius: 30, stroke: { color: "accent", width: 4 } });
+    else {
+      l.k.link(tab, screens[i], "DISSOLVE", { duration: 250 });
+      l.k.link(sheet, screens[i], "DISSOLVE", { duration: 250, key: String(i + 1) });
+    }
+  });
+}
+function drawHero(l, parent, x, y) {
+  const hero = l.pivot(l.box(parent, x, y, 200, 220, "Pip"), 0.5, 0.6);
+  const rig = l.pivot(l.box(hero, 0, 0, 200, 220, "Rig"), 0.5, 1);
+  const scarf = l.pivot(l.shape(rig, [[96, 110], [44, 98], [30, 112], [46, 120], [96, 124]], "pop", { name: "Scarf tail" }), 1, 0.5);
+  const backLeg = l.pivot(l.rect(rig, 80, 176, 24, 44, "pants", { name: "Back leg", radius: 10 }), 0.5, 0.1);
+  const backArm = l.pivot(l.rect(rig, 74, 120, 18, 44, "tunicDark", { name: "Back arm", radius: 9 }), 0.5, 0.1);
+  l.rect(rig, 66, 112, 72, 72, "tunic", { name: "Body", radius: 26 });
+  l.rect(rig, 66, 158, 72, 10, "hilt", { name: "Belt" });
+  l.rect(rig, 70, 104, 64, 16, "pop", { name: "Scarf", radius: 8 });
+  const frontLeg = l.pivot(l.rect(rig, 100, 176, 24, 44, "pants", { name: "Front leg", radius: 10 }), 0.5, 0.1);
+  const head = l.pivot(l.box(rig, 44, 8, 112, 104, "Head"), 0.5, 1);
+  const leaf = l.pivot(l.shape(head, [
+    { x: 52, y: 14, handleIn: { x: 40, y: -4 }, handleOut: { x: 66, y: 8 } },
+    { x: 78, y: -26, handleIn: { x: 80, y: -6 }, handleOut: { x: 60, y: -30 } }
+  ], "leaf", { name: "Leaf" }), 0.2, 1);
+  l.circle(head, 54, 54, 52, "leafDark", { name: "Hood" });
+  l.circle(head, 62, 60, 44, "skin", { name: "Face" });
+  const eyes = l.pivot(l.box(head, 66, 44, 40, 22, "Eyes"), 0.5, 0.5);
+  l.rect(eyes, 6, 0, 10, 20, "night", { name: "Eye", radius: 5 });
+  l.rect(eyes, 26, 0, 10, 20, "night", { name: "Eye", radius: 5 });
+  l.circle(eyes, 13, 5, 2.5, "white", { name: "Eye shine" });
+  l.circle(eyes, 33, 5, 2.5, "white", { name: "Eye shine" });
+  const hurtEyes = l.box(head, 66, 44, 40, 22, "Hurt eyes");
+  l.k.patch(hurtEyes, { opacity: 0 });
+  for (const [a, b, c] of [[[4, 3], [14, 11], [4, 19]], [[36, 3], [26, 11], [36, 19]]]) {
+    l.line(hurtEyes, [a, b], "night", 4, { name: "Squint" });
+    l.line(hurtEyes, [c, b], "night", 4, { name: "Squint" });
+  }
+  l.circle(head, 98, 78, 7, "pop", { name: "Cheek", opacity: 0.45 });
+  const sword = l.pivot(l.box(rig, 112, 114, 120, 70, "Sword arm"), 10 / 120, 8 / 70);
+  l.rect(sword, 2, 0, 18, 40, "tunic", { name: "Arm", radius: 9 });
+  l.rect(sword, 6, 38, 22, 8, "hilt", { name: "Grip", radius: 3 });
+  l.circle(sword, 11, 42, 9, "skin", { name: "Hand" });
+  l.rect(sword, 26, 28, 8, 28, "hilt", { name: "Crossguard", radius: 3 });
+  l.rect(sword, 32, 36, 84, 12, "steel", { name: "Blade", radius: 6 });
+  l.rect(sword, 32, 44, 80, 4, "steelDark", { name: "Blade edge", radius: 2 });
+  return { hero, rig, head, leaf, eyes, hurtEyes, scarf, frontLeg, backLeg, backArm, sword };
+}
+function drawSlime(l, parent, cx, bottom, z) {
+  const s = (v) => v * z;
+  const slime = l.pivot(l.box(parent, cx - s(65), bottom - s(100), s(130), s(100), "Gloop"), 0.5, 1);
+  l.vector(slime, [{ pts: roundRect(0, s(12), s(130), s(88), s(42)), closed: true }], "slime", { name: "Body" });
+  const tint = l.vector(slime, [{ pts: roundRect(0, s(12), s(130), s(88), s(42)), closed: true }], "pop", { name: "Angry tint", opacity: 0 });
+  l.vector(slime, [{ pts: roundRect(s(20), s(62), s(90), s(32), s(16)), closed: true }], "slimeDark", { name: "Shade", opacity: 0.55 });
+  l.rect(slime, s(22), s(26), s(14), s(24), "slimeShine", { name: "Shine", radius: s(7) });
+  l.circle(slime, s(46), s(26), s(5), "slimeShine", { name: "Shine dot" });
+  const eyes = l.pivot(l.box(slime, s(36), s(40), s(58), s(28), "Eyes"), 0.5, 0.5);
+  l.circle(eyes, s(14), s(14), s(13), "white", { name: "Eye white" });
+  l.circle(eyes, s(44), s(14), s(13), "white", { name: "Eye white" });
+  const pupils = l.box(eyes, 0, 0, s(58), s(28), "Pupils");
+  l.circle(pupils, s(10), s(15), s(6.5), "night", { name: "Pupil" });
+  l.circle(pupils, s(40), s(15), s(6.5), "night", { name: "Pupil" });
+  const brows = l.box(slime, s(34), s(28), s(62), s(14), "Brows");
+  l.k.patch(brows, { opacity: 0 });
+  l.line(brows, [[s(4), s(2)], [s(24), s(10)]], "night", s(5), { name: "Brow" });
+  l.line(brows, [[s(58), s(2)], [s(38), s(10)]], "night", s(5), { name: "Brow" });
+  const xEyes = l.box(slime, s(36), s(40), s(58), s(28), "X eyes");
+  l.k.patch(xEyes, { opacity: 0 });
+  for (const cx0 of [14, 44]) {
+    l.line(xEyes, [[s(cx0 - 8), s(6)], [s(cx0 + 8), s(22)]], "night", s(4), { name: "X" });
+    l.line(xEyes, [[s(cx0 + 8), s(6)], [s(cx0 - 8), s(22)]], "night", s(4), { name: "X" });
+  }
+  return { slime, eyes, pupils, brows, xEyes, tint };
+}
+function drawBat(l, parent, cx, cy, z) {
+  const s = (v) => v * z;
+  const p = (pts) => pts.map(([x, y]) => [s(x), s(y)]);
+  const mirror = (pts) => pts.map(([x, y]) => [160 - x, y]);
+  const bat = l.pivot(l.box(parent, cx - s(80), cy - s(55), s(160), s(110), "Flit"), 0.5, 0.5);
+  const wing = [[62, 44], [18, 16], [2, 40], [14, 50], [24, 46], [34, 60], [48, 54], [62, 62]];
+  const leftWing = l.pivot(l.shape(bat, p(wing), "batWing", { name: "Left wing" }), 1, 0.6);
+  const rightWing = l.pivot(l.shape(bat, p(mirror(wing)), "batWing", { name: "Right wing" }), 0, 0.6);
+  l.shape(bat, p([[60, 32], [62, 8], [76, 24]]), "bat", { name: "Ear" });
+  l.shape(bat, p(mirror([[60, 32], [62, 8], [76, 24]])), "bat", { name: "Ear" });
+  l.circle(bat, s(80), s(50), s(30), "bat", { name: "Body" });
+  l.shape(bat, p([[72, 70], [76, 82], [80, 70]]), "white", { name: "Fang" });
+  l.shape(bat, p([[80, 70], [84, 82], [88, 70]]), "white", { name: "Fang" });
+  const eyes = l.box(bat, s(62), s(38), s(36), s(16), "Eyes");
+  l.circle(eyes, s(8), s(8), s(7), "batEye", { name: "Eye" });
+  l.circle(eyes, s(28), s(8), s(7), "batEye", { name: "Eye" });
+  l.circle(eyes, s(9), s(9), s(3.5), "night", { name: "Pupil" });
+  l.circle(eyes, s(27), s(9), s(3.5), "night", { name: "Pupil" });
+  const sleepy = l.box(bat, s(62), s(38), s(36), s(16), "Sleepy eyes");
+  l.k.patch(sleepy, { opacity: 0 });
+  l.line(sleepy, [[s(2), s(9)], [s(14), s(9)]], "batEye", s(3), { name: "Shut eye" });
+  l.line(sleepy, [[s(22), s(9)], [s(34), s(9)]], "batEye", s(3), { name: "Shut eye" });
+  const flash = l.circle(bat, s(80), s(50), s(36), "white", { name: "Hit flash", opacity: 0 });
+  return { bat, leftWing, rightWing, eyes, sleepy, flash };
+}
+function drawCoin(l, parent, cx, cy, r, name = "Coin") {
+  const c = l.pivot(l.box(parent, cx - r, cy - r, r * 2, r * 2, name), 0.5, 0.5);
+  l.circle(c, r, r, r, "coin", { name: "Coin face" });
+  l.circle(c, r, r, r * 0.68, "coinDark", { name: "Coin rim" });
+  l.rect(c, r * 0.8, r * 0.5, r * 0.4, r, "coin", { name: "Coin slot", radius: r * 0.2 });
+  return c;
+}
+function drawBrick(l, parent, x, y, s) {
+  const b = l.box(parent, x, y, s, s, "Brick", { fill: "brick" });
+  l.rect(b, 0, s / 2 - s * 0.03, s, s * 0.06, "brickDark", { name: "Mortar" });
+  l.rect(b, s / 2 - s * 0.03, 0, s * 0.06, s / 2, "brickDark", { name: "Mortar" });
+  l.rect(b, s / 4 - s * 0.03, s / 2, s * 0.06, s / 2, "brickDark", { name: "Mortar" });
+  l.rect(b, 3 * s / 4 - s * 0.03, s / 2, s * 0.06, s / 2, "brickDark", { name: "Mortar" });
+  return b;
+}
+function drawQuestion(l, parent, x, y, s) {
+  const b = l.box(parent, x, y, s, s, "? Block", { fill: "block", radius: s * 0.12, stroke: { color: "blockDark", width: s * 0.06 } });
+  for (const [cx, cy] of [[0.16, 0.16], [0.84, 0.16], [0.16, 0.84], [0.84, 0.84]]) l.circle(b, s * cx, s * cy, s * 0.05, "blockDark", { name: "Rivet" });
+  const mark = l.pivot(l.box(b, 0, 0, s, s, "Mark"), 0.5, 0.5);
+  l.line(mark, arc(s * 0.5, s * 0.36, s * 0.17, -75, 180), "night", s * 0.11, { name: "Hook" });
+  l.line(mark, [[s * 0.5, s * 0.53], [s * 0.5, s * 0.62]], "night", s * 0.11, { name: "Stem" });
+  l.circle(mark, s * 0.5, s * 0.79, s * 0.07, "night", { name: "Dot" });
+  return { block: b, mark };
+}
+function drawGround(l, parent, y, w, name = "Ground") {
+  const g = l.box(parent, 0, y, w, 1080 - y, name);
+  l.rect(g, 0, 24, w, 1080 - y - 24, "dirt", { name: "Dirt" });
+  l.rect(g, 0, 0, w, 30, "grass", { name: "Grass" });
+  for (let x = 40; x < w; x += 120) l.shape(g, [[x, 30], [x + 14, 2], [x + 28, 30]], "grassDark", { name: "Tuft" });
+  for (let x = 100; x < w; x += 240) {
+    l.rect(g, x, 80, 34, 20, "dirtDark", { name: "Pebble", radius: 10 });
+    l.rect(g, x + 120, 150, 22, 14, "dirtDark", { name: "Pebble", radius: 7 });
+  }
+  return g;
+}
+var GROUND = 860;
+var HERO_X = 520;
+var SLIME_X = 880;
+var BAT = [1260, 420];
+var LEVEL = new Plan([["Idle", 1200, true], ["Run", 800, true], ["Stomp", 1200, false], ["Slash", 1e3, false], ["Hurt", 1e3, false]]);
+var shake = (at, len) => [[0, 0, E.hold], [at, 0, E.linear], [at + 30, -14, E.linear], [at + 60, 12, E.linear], [at + 90, -6, E.linear], [at + 120, 0, E.hold], [len, 0]];
+function buildLevel(k, sheet) {
+  const l = new Lot(k, sheet, LEVEL.duration);
+  const P = LEVEL;
+  const stage = l.box(sheet, 0, 0, W, 1080, "Stage");
+  for (const [cx, cy, r] of [[300, 920, 330], [1e3, 980, 440], [1680, 920, 350]]) l.circle(stage, cx, cy, r, "far", { name: "Far hill" });
+  const clouds = l.box(stage, 0, 0, W, 400, "Clouds");
+  for (const [x, y, s] of [[160, 150, 1], [760, 90, 0.8], [1380, 180, 1.1], [1720, 70, 0.7]]) cloud(l, clouds, x, y, s);
+  track(l, P, clouds, "translateY", 0, { Idle: cycle(1200, 1, 0, -8) });
+  const hills = l.box(stage, 0, 700, W + 240, 200, "Hills");
+  for (let x = 120; x < W + 240; x += 240) l.circle(hills, x, 240, 140, x % 480 === 120 ? "hill" : "hillDark", { name: "Hill" });
+  const blocks = l.box(stage, 0, 0, W + 480, 640, "Platforms");
+  for (let x = 160; x < W + 480; x += 480) {
+    drawBrick(l, blocks, x, 500, 72);
+    drawQuestion(l, blocks, x + 72, 500, 72);
+    drawBrick(l, blocks, x + 144, 500, 72);
+  }
+  const ground = drawGround(l, stage, GROUND, W + 960);
+  const scroll = (id, by) => track(l, P, id, "translateX", 0, { Run: [[0, 0, E.linear], [800, -by]] });
+  scroll(hills, 480);
+  scroll(blocks, 960);
+  scroll(ground, 960);
+  const shadow = l.pivot(l.rect(stage, HERO_X - 60, GROUND - 8, 120, 16, "night", { name: "Pip shadow", radius: 8, opacity: 0.2 }), 0.5, 0.5);
+  const h = drawHero(l, stage, HERO_X - 100, GROUND - 220);
+  const g = drawSlime(l, stage, SLIME_X, GROUND, 1);
+  const b = drawBat(l, stage, BAT[0], BAT[1], 1);
+  const shoulder = [HERO_X + 22, GROUND - 98];
+  const trail = l.line(stage, arc(shoulder[0], shoulder[1], 108, -40, 160), "white", 22, { name: "Slash trail", opacity: 0 });
+  const spark = l.pivot(l.shape(stage, around(660, 690, 46, 8, 0, 18), "accent", { name: "Hit spark", opacity: 0 }), 0.5, 0.5);
+  const ouch = l.pivot(l.shape(stage, around(HERO_X + 50, GROUND - 100, 44, 7, 0, 18), "pop", { name: "Ouch spark", opacity: 0 }), 0.5, 0.5);
+  const poof = l.pivot(l.box(stage, SLIME_X - 70, GROUND - 90, 140, 100, "Poof"), 0.5, 0.5);
+  for (const [x, y, r] of [[40, 70, 26], [92, 62, 30], [66, 34, 24], [118, 80, 20]]) l.circle(poof, x, y, r, "white", { name: "Puff" });
+  k.patch(poof, { opacity: 0 });
+  const coin = drawCoin(l, stage, SLIME_X, GROUND - 120, 24, "Coin pop");
+  k.patch(coin, { opacity: 0 });
+  squash(
+    l,
+    P,
+    h.rig,
+    { Idle: cycle(1200, 1, 1, 1.025), Stomp: [[0, 1, E.out], [120, 1.14, E.out], [200, 0.92, E.inOut], [320, 1, E.hold], [480, 1, E.out], [560, 1.12, E.out], [640, 0.96, E.inOut], [760, 1, E.hold], [1050, 1, E.out], [1110, 1.14, E.inOut], [1200, 1]] },
+    { Idle: cycle(1200, 1, 1, 0.965), Stomp: [[0, 1, E.out], [120, 0.82, E.out], [200, 1.12, E.inOut], [320, 1, E.hold], [480, 1, E.out], [560, 0.85, E.out], [640, 1.05, E.inOut], [760, 1, E.hold], [1050, 1, E.out], [1110, 0.84, E.inOut], [1200, 1]] }
+  );
+  track(l, P, h.rig, "translateY", 0, { Run: [[0, 0, E.out], [200, -12, E.in], [400, 0, E.out], [600, -12, E.in], [800, 0]] });
+  track(l, P, h.rig, "rotation", 0, {
+    Run: [[0, 8, E.hold], [800, 8]],
+    Slash: [[0, 0, E.hold], [160, 0, E.out], [300, -5, E.in], [400, 9, E.out], [560, 8, E.inOut], [800, 0, E.hold], [1e3, 0]]
+  });
+  track(l, P, h.hero, "translateX", 0, {
+    Stomp: [[0, 0, E.hold], [120, 0, E.linear], [480, SLIME_X - HERO_X, E.hold], [560, SLIME_X - HERO_X, E.linear], [1050, 0, E.hold], [1200, 0]],
+    Slash: [[0, 0, E.hold], [300, 0, E.out], [400, 24, E.inOut], [800, 0, E.hold], [1e3, 0]],
+    Hurt: [[0, 0, E.hold], [400, 0, E.out], [640, -150, E.inOut], [1e3, 0]]
+  });
+  track(l, P, h.hero, "translateY", 0, {
+    Stomp: [[0, 0, E.hold], [120, 0, E.out], [320, -260, E.in], [480, -88, E.linear], [560, -26, E.out], [800, -300, E.in], [1050, 0, E.hold], [1200, 0]],
+    Hurt: [[0, 0, E.hold], [400, 0, E.out], [520, -70, E.in], [640, 0, E.hold], [1e3, 0]]
+  });
+  track(l, P, h.hero, "rotation", 0, {
+    Stomp: [[0, 0, E.hold], [560, 0, E.inOut], [1e3, -360, E.hold], [1200, -360]],
+    Hurt: [[0, 0, E.hold], [400, 0, E.out], [520, -16, E.in], [640, 0, E.hold], [1e3, 0]]
+  });
+  track(l, P, h.hero, "opacity", 1, { Hurt: [[0, 1, E.hold], [400, 0.3, E.hold], [460, 1, E.hold], [520, 0.3, E.hold], [580, 1, E.hold], [640, 0.3, E.hold], [700, 1, E.hold], [1e3, 1]] });
+  track(l, P, h.frontLeg, "rotation", 0, {
+    Run: [[0, 35], [400, -35], [800, 35]],
+    Stomp: [[0, 0, E.hold], [120, 0, E.out], [250, -40, E.inOut], [480, 10, E.out], [560, 0, E.out], [700, -50, E.inOut], [1e3, -20, E.out], [1050, 0, E.hold], [1200, 0]],
+    Slash: [[0, 0, E.hold], [300, 0, E.out], [400, -20, E.inOut], [800, 0, E.hold], [1e3, 0]],
+    Hurt: [[0, 0, E.hold], [640, 0], [730, -25], [820, 25], [910, -25], [1e3, 0]]
+  });
+  track(l, P, h.backLeg, "rotation", 0, {
+    Run: [[0, -35], [400, 35], [800, -35]],
+    Stomp: [[0, 0, E.hold], [120, 0, E.out], [250, 30, E.inOut], [480, -10, E.out], [560, 0, E.out], [700, 40, E.inOut], [1e3, 10, E.out], [1050, 0, E.hold], [1200, 0]],
+    Slash: [[0, 0, E.hold], [300, 0, E.out], [400, 25, E.inOut], [800, 0, E.hold], [1e3, 0]],
+    Hurt: [[0, 0, E.hold], [640, 0], [730, 25], [820, -25], [910, 25], [1e3, 0]]
+  });
+  track(l, P, h.backArm, "rotation", 0, {
+    Run: [[0, -30], [400, 30], [800, -30]],
+    Slash: [[0, 0, E.hold], [300, 0, E.out], [400, -40, E.inOut], [800, 0, E.hold], [1e3, 0]]
+  });
+  track(l, P, h.sword, "rotation", 0, {
+    Idle: cycle(1200, 1, 0, 4),
+    Run: [[0, 20], [400, -10], [800, 20]],
+    Slash: [[0, 0, E.hold], [160, 0, E.out], [300, -140, E.in], [400, 75, E.out], [560, 80, E.inOut], [800, 0, E.hold], [1e3, 0]]
+  });
+  track(l, P, h.head, "translateY", 0, { Idle: cycle(1200, 1, 0, 3), Run: cycle(800, 2, 2, -2) });
+  track(l, P, h.leaf, "rotation", 0, { Idle: [[0, 0], [300, 8], [900, -8], [1200, 0]], Run: cycle(800, 1, -20, -14) });
+  track(l, P, h.scarf, "rotation", 0, { Idle: cycle(1200, 1, 0, -10), Run: cycle(800, 2, -30, -22) });
+  track(l, P, h.eyes, "scaleY", 1, { Idle: [[0, 1, E.hold], [880, 1, E.in], [940, 0.1, E.out], [1e3, 1, E.hold], [1200, 1]] });
+  track(l, P, h.eyes, "opacity", 1, { Hurt: [[0, 1, E.hold], [400, 0, E.hold], [820, 1, E.hold], [1e3, 1]] });
+  track(l, P, h.hurtEyes, "opacity", 0, { Hurt: [[0, 0, E.hold], [400, 1, E.hold], [820, 0, E.hold], [1e3, 0]] });
+  track(l, P, shadow, "translateX", 0, { Stomp: [[0, 0, E.hold], [120, 0, E.linear], [480, SLIME_X - HERO_X, E.hold], [560, SLIME_X - HERO_X, E.linear], [1050, 0, E.hold], [1200, 0]], Hurt: [[0, 0, E.hold], [400, 0, E.out], [640, -150, E.inOut], [1e3, 0]] });
+  const shadowScale = { Run: cycle(800, 2, 1, 0.85), Stomp: [[0, 1, E.out], [120, 1.1, E.out], [320, 0.45, E.in], [480, 0.7, E.hold], [560, 0.75, E.out], [800, 0.4, E.in], [1050, 1, E.hold], [1200, 1]] };
+  squash(l, P, shadow, shadowScale, shadowScale);
+  squash(
+    l,
+    P,
+    g.slime,
+    {
+      Idle: cycle(1200, 2, 1, 1.08),
+      Slash: cycle(1e3, 2, 1, 1.08),
+      Run: [[0, 1.12, E.out], [100, 0.94, E.inOut], [200, 1, E.hold], [340, 1, E.out], [400, 1.12, E.out], [500, 0.94, E.inOut], [600, 1, E.hold], [740, 1, E.out], [800, 1.12]],
+      Stomp: [[0, 1, E.hold], [480, 1, E.out], [560, 1.5, E.hold], [1e3, 0, E.pop], [1160, 1.06, E.inOut], [1200, 1]],
+      Hurt: [[0, 1, E.inOut], [150, 1.2, E.out], [250, 0.9, E.inOut], [400, 1, E.out], [440, 1.2, E.out], [520, 0.96, E.inOut], [700, 1, E.out], [740, 1.15, E.out], [820, 1, E.hold], [1e3, 1]]
+    },
+    {
+      Idle: cycle(1200, 2, 1, 0.9),
+      Slash: cycle(1e3, 2, 1, 0.9),
+      Run: [[0, 0.86, E.out], [100, 1.08, E.inOut], [200, 1, E.hold], [340, 1, E.out], [400, 0.86, E.out], [500, 1.08, E.inOut], [600, 1, E.hold], [740, 1, E.out], [800, 0.86]],
+      Stomp: [[0, 1, E.hold], [480, 1, E.out], [560, 0.3, E.hold], [1e3, 0, E.pop], [1160, 1.06, E.inOut], [1200, 1]],
+      Hurt: [[0, 1, E.inOut], [150, 0.8, E.out], [250, 1.12, E.inOut], [400, 1, E.out], [440, 0.8, E.out], [520, 1.05, E.inOut], [700, 1, E.out], [740, 0.85, E.out], [820, 1, E.hold], [1e3, 1]]
+    }
+  );
+  track(l, P, g.slime, "translateY", 0, {
+    Run: [[0, 0, E.out], [200, -70, E.in], [400, 0, E.out], [600, -70, E.in], [800, 0]],
+    Hurt: [[0, 0, E.hold], [150, 0, E.out], [280, -110, E.in], [400, 0, E.out], [550, -70, E.in], [700, 0, E.hold], [1e3, 0]]
+  });
+  track(l, P, g.slime, "translateX", 0, { Hurt: [[0, 0, E.inOut], [150, 24, E.in], [400, HERO_X + 105 - SLIME_X, E.out], [700, 0, E.hold], [1e3, 0]] });
+  track(l, P, g.slime, "opacity", 1, { Stomp: [[0, 1, E.hold], [760, 0, E.hold], [1e3, 1, E.hold], [1200, 1]] });
+  track(l, P, g.xEyes, "opacity", 0, { Stomp: [[0, 0, E.hold], [480, 1, E.hold], [1e3, 0, E.hold], [1200, 0]] });
+  track(l, P, g.eyes, "opacity", 1, { Stomp: [[0, 1, E.hold], [480, 0, E.hold], [1e3, 1, E.hold], [1200, 1]] });
+  track(l, P, g.pupils, "translateX", 0, { Idle: [[0, 0, E.hold], [400, 0, E.inOut], [500, 6, E.hold], [900, 6, E.inOut], [1e3, 0, E.hold], [1200, 0]] });
+  track(l, P, poof, "opacity", 0, { Stomp: [[0, 0, E.hold], [740, 1, E.in], [1e3, 0, E.hold], [1200, 0]] });
+  const puff = [[0, 1, E.hold], [740, 0.2, E.out], [900, 1.3, E.in], [1e3, 1.5, E.hold], [1200, 1]];
+  squash(l, P, poof, { Stomp: puff }, { Stomp: puff });
+  track(l, P, coin, "opacity", 0, { Stomp: [[0, 0, E.hold], [700, 1, E.hold], [1050, 1, E.in], [1150, 0, E.hold], [1200, 0]] });
+  track(l, P, coin, "translateY", 0, { Stomp: [[0, 0, E.hold], [700, 0, E.out], [950, -180, E.in], [1150, -120, E.hold], [1200, 0]] });
+  track(l, P, coin, "scaleX", 1, { Stomp: [[0, 1, E.hold], [700, 1], [780, 0.1], [860, 1], [940, 0.1], [1020, 1, E.hold], [1200, 1]] });
+  for (const [wing, up, down] of [[b.leftWing, 28, -22], [b.rightWing, -28, 22]]) {
+    track(l, P, wing, "rotation", 0, Object.fromEntries(P.list.map((s) => [s.name, flap(s.len, 200, up, down)])));
+  }
+  track(l, P, b.bat, "translateY", 0, {
+    Idle: cycle(1200, 1, 0, -18),
+    Run: cycle(800, 1, 0, -18),
+    Stomp: cycle(1200, 1, 0, -18),
+    Hurt: cycle(1e3, 1, 0, -18),
+    Slash: [[0, 0, E.in], [400, 690 - BAT[1], E.out], [690, -520, E.hold], [700, -520, E.out], [1e3, 0]]
+  });
+  track(l, P, b.bat, "translateX", 0, { Slash: [[0, 0, E.in], [400, 660 - BAT[0], E.out], [690, 700, E.hold], [700, 0, E.hold], [1e3, 0]] });
+  track(l, P, b.bat, "rotation", 0, { Slash: [[0, 0, E.inOut], [300, -20, E.in], [400, 0, E.out], [690, 600, E.hold], [700, 0, E.hold], [1e3, 0]] });
+  track(l, P, b.flash, "opacity", 0, { Slash: [[0, 0, E.hold], [400, 1, E.in], [560, 0, E.hold], [1e3, 0]] });
+  track(l, P, trail, "opacity", 0, { Slash: [[0, 0, E.hold], [300, 0.9, E.hold], [540, 0, E.hold], [1e3, 0]] });
+  track(l, P, trail, "trim.end", 0, { Slash: [[0, 0, E.hold], [300, 0, E.out], [400, 1, E.hold], [1e3, 1]] });
+  track(l, P, trail, "trim.start", 0, { Slash: [[0, 0, E.hold], [380, 0, E.out], [540, 1, E.hold], [1e3, 1]] });
+  for (const [id, at, len, state] of [[spark, 400, 1e3, "Slash"], [ouch, 400, 1e3, "Hurt"]]) {
+    track(l, P, id, "opacity", 0, { [state]: [[0, 0, E.hold], [at, 1, E.in], [at + 160, 0, E.hold], [len, 0]] });
+    const grow = [[0, 1, E.hold], [at, 0.4, E.out], [at + 160, 1.5, E.hold], [len, 1]];
+    squash(l, P, id, { [state]: grow }, { [state]: grow });
+  }
+  track(l, P, stage, "translateX", 0, { Slash: shake(400, 1e3), Hurt: shake(400, 1e3) });
+  statePanel(l, P, sheet, "LEVEL 1-1 \xB7 PIP", "Pip\u2019s state machine: the outlined state is the one playing");
+  const run = button(l, sheet, 1180, 900, 270, 112, "HOLD \u25B6 RUN", "Run button");
+  const jump = button(l, sheet, 1470, 900, 200, 112, "JUMP", "Jump button");
+  const slash = button(l, sheet, 1690, 900, 200, 112, "SLASH", "Slash button");
+  hint(l, sheet, "Hold \u2192 or D to run \xB7 \u2191, W or Space stomps Gloop \xB7 X or J swats Flit out of the air (or use the buttons) \xB7 click Gloop to take a hit \xB7 1\u20134 switch screens", 1110);
+  machine(k, sheet, P, {
+    name: "Pip",
+    inputs: { running: ["boolean", false], jump: ["event"], slash: ["event"], hit: ["event"], done: ["event"] },
+    graph: { Idle: [40, 160], Run: [300, 160], Stomp: [560, 20], Slash: [560, 160], Hurt: [560, 300] },
+    transitions: [
+      ["Idle", "Run", [["running", true]]],
+      ["Run", "Idle", [["running", false]]],
+      ["Idle", "Stomp", [["jump"]]],
+      ["Run", "Stomp", [["jump"]]],
+      ["Idle", "Slash", [["slash"]]],
+      ["Run", "Slash", [["slash"]]],
+      ["Idle", "Hurt", [["hit"]]],
+      ["Run", "Hurt", [["hit"]]],
+      ["Stomp", "Run", [["done"], ["running", true]]],
+      ["Stomp", "Idle", [["done"]]],
+      ["Slash", "Run", [["done"], ["running", true]]],
+      ["Slash", "Idle", [["done"]]],
+      ["Hurt", "Run", [["done"], ["running", true]]],
+      ["Hurt", "Idle", [["done"]]]
+    ],
+    listeners: [
+      ["pointerDown", run, [["set", "running", true]]],
+      ["pointerUp", run, [["set", "running", false]]],
+      ["click", jump, [["fire", "jump"]]],
+      ["click", slash, [["fire", "slash"]]],
+      ["click", g.slime, [["fire", "hit"]]],
+      ["complete", void 0, [["fire", "done"]]],
+      ...holdKeys(RIGHT, "running"),
+      ...onKeys("keyDown", JUMP, [["fire", "jump"]]),
+      ...onKeys("keyDown", ["x", "j"], [["fire", "slash"]])
+    ]
+  });
+}
+var GLOOP = new Plan([["Patrol", 2400, true], ["Alert", 700, false], ["Chase", 800, true], ["Squash", 900, false], ["Respawn", 900, false]]);
+function buildGloop(k, sheet) {
+  const l = new Lot(k, sheet, GLOOP.duration);
+  const P = GLOOP;
+  for (const [x, y, s] of [[220, 230, 0.9], [1500, 200, 1.1]]) cloud(l, sheet, x, y, s);
+  drawGround(l, sheet, GROUND, W);
+  const sight = l.box(sheet, 360, 300, 1200, 560, "Sight", { fill: "sightZone", radius: 40, stroke: { color: "white", width: 4 } });
+  label(k, sight, "GLOOP\u2019S SIGHT \xB7 move the pointer in", "Label 20", "night", 28, 22, { name: "Sight label" });
+  const z = 2.4;
+  const g = drawSlime(l, sight, 600, GROUND - 300, z);
+  const bubble = l.pivot(l.box(sight, 600 - 40, GROUND - 300 - 100 * z - 110, 80, 90, "Alert bubble", { fill: "white", radius: 24, stroke: { color: "night", width: 5 } }), 0.5, 1);
+  l.rect(bubble, 34, 14, 12, 42, "night", { name: "Bang", radius: 6 });
+  l.circle(bubble, 40, 70, 7, "night", { name: "Bang dot" });
+  k.patch(bubble, { opacity: 0 });
+  const coin = drawCoin(l, sight, 600, GROUND - 300 - 140, 40, "Coin pop");
+  k.patch(coin, { opacity: 0 });
+  const poof = l.pivot(l.box(sight, 600 - 170, GROUND - 300 - 200, 340, 220, "Poof"), 0.5, 0.5);
+  for (const [x, y, r] of [[90, 150, 60], [210, 130, 70], [160, 70, 56], [280, 170, 46]]) l.circle(poof, x, y, r, "white", { name: "Puff" });
+  k.patch(poof, { opacity: 0 });
+  const drip = l.pivot(l.shape(sight, [{ x: 600, y: GROUND - 300 - 120, handleIn: { x: 570, y: GROUND - 300 - 60 }, handleOut: { x: 630, y: GROUND - 300 - 60 } }, { x: 600, y: GROUND - 300 - 10, handleIn: { x: 650, y: GROUND - 300 - 10 }, handleOut: { x: 550, y: GROUND - 300 - 10 } }], "slime", { name: "Drip" }), 0.5, 1);
+  k.patch(drip, { opacity: 0 });
+  const hops = (len, n, high) => Array.from({ length: n * 2 + 1 }, (_, i) => [len * i / (n * 2), i % 2 ? -high : 0, i % 2 ? E.in : E.out]);
+  const land = (len, n, a, b) => Array.from({ length: n * 4 + 1 }, (_, i) => {
+    const step = len / n, t = len * Math.floor(i / 4) / n + [0, step * 0.15, step * 0.3, step * 0.85][i % 4];
+    return [i === n * 4 ? len : t, [a, b, 1, 1][i % 4], E.inOut];
+  });
+  track(l, P, g.slime, "translateX", 0, { Patrol: [[0, 0, E.linear], [1200, 300, E.linear], [2400, 0]] });
+  track(l, P, g.slime, "translateY", 0, {
+    Patrol: hops(2400, 6, 60),
+    Chase: hops(800, 2, 80),
+    Alert: [[0, 0, E.out], [150, -90, E.in], [300, 0, E.hold], [700, 0]]
+  });
+  squash(
+    l,
+    P,
+    g.slime,
+    {
+      Patrol: land(2400, 6, 1.14, 0.94),
+      Chase: land(800, 2, 1.18, 0.92),
+      Alert: [[0, 1, E.hold], [300, 1, E.out], [360, 1.2, E.inOut], [460, 1, E.hold], [700, 1]],
+      Squash: [[0, 1, E.out], [120, 1.55, E.hold], [500, 1.55, E.in], [640, 0, E.hold], [900, 0]],
+      Respawn: [[0, 0, E.hold], [450, 0, E.pop], [800, 1.08, E.inOut], [900, 1]]
+    },
+    {
+      Patrol: land(2400, 6, 0.86, 1.08),
+      Chase: land(800, 2, 0.8, 1.1),
+      Alert: [[0, 1, E.hold], [300, 1, E.out], [360, 0.8, E.inOut], [460, 1, E.hold], [700, 1]],
+      Squash: [[0, 1, E.out], [120, 0.25, E.hold], [500, 0.25, E.in], [640, 0, E.hold], [900, 0]],
+      Respawn: [[0, 0, E.hold], [450, 0, E.pop], [800, 1.08, E.inOut], [900, 1]]
+    }
+  );
+  track(l, P, g.pupils, "translateX", 0, { Patrol: [[0, 14, E.hold], [1200, -14, E.hold], [2400, -14]], Chase: [[0, -10, E.hold], [800, -10]] });
+  track(l, P, g.eyes, "scaleY", 1, { Alert: [[0, 1, E.out], [150, 1.35, E.hold], [500, 1.35, E.inOut], [700, 1]] });
+  track(l, P, g.eyes, "opacity", 1, { Squash: [[0, 1, E.hold], [120, 0, E.hold], [900, 0]], Respawn: [[0, 0, E.hold], [600, 1, E.hold], [900, 1]] });
+  track(l, P, g.xEyes, "opacity", 0, { Squash: [[0, 0, E.hold], [120, 1, E.hold], [900, 1]] });
+  track(l, P, g.brows, "opacity", 0, { Alert: [[0, 0, E.hold], [450, 0, E.out], [700, 1, E.hold]], Chase: [[0, 1, E.hold], [800, 1]] });
+  track(l, P, g.tint, "opacity", 0, { Chase: cycle(800, 2, 0.2, 0.4) });
+  track(l, P, bubble, "opacity", 0, { Alert: [[0, 0, E.hold], [100, 1, E.hold], [700, 1]], Chase: [[0, 1, E.hold], [800, 1]] });
+  squash(l, P, bubble, { Alert: [[0, 0.2, E.hold], [100, 0.2, E.pop], [300, 1, E.hold], [700, 1]] }, { Alert: [[0, 0.2, E.hold], [100, 0.2, E.pop], [300, 1, E.hold], [700, 1]] });
+  track(l, P, poof, "opacity", 0, { Squash: [[0, 0, E.hold], [500, 0, E.in], [600, 1, E.in], [880, 0, E.hold], [900, 0]] });
+  const grow = [[0, 0.3, E.hold], [500, 0.3, E.out], [880, 1.4, E.hold], [900, 1.4]];
+  squash(l, P, poof, { Squash: grow }, { Squash: grow });
+  track(l, P, coin, "opacity", 0, { Squash: [[0, 0, E.hold], [560, 1, E.hold], [800, 1, E.in], [900, 0]] });
+  track(l, P, coin, "translateY", 0, { Squash: [[0, 0, E.hold], [560, 0, E.out], [900, -260]] });
+  track(l, P, coin, "scaleX", 1, { Squash: [[0, 1, E.hold], [560, 1], [640, 0.1], [720, 1], [800, 0.1], [880, 1, E.hold], [900, 1]] });
+  track(l, P, drip, "opacity", 0, { Respawn: [[0, 1, E.hold], [480, 0, E.hold], [900, 0]] });
+  track(l, P, drip, "translateY", 0, { Respawn: [[0, -620, E.in], [420, 0, E.hold], [900, 0]] });
+  squash(l, P, drip, { Respawn: [[0, 1, E.hold], [420, 1, E.out], [480, 2.2, E.hold], [900, 2.2]] }, { Respawn: [[0, 1, E.hold], [420, 1, E.out], [480, 0.3, E.hold], [900, 0.3]] });
+  statePanel(l, P, sheet, "GLOOP \xB7 ENEMY AI", "Spotted while the pointer is in its sight; a click stomps it");
+  hint(l, sheet, "Hold \u2192 or D (or move the pointer into its sight) to be spotted \xB7 \u2191, W or Space (or a click) stomps it \xB7 inputs: spotted, stomp, done \xB7 1\u20134 switch screens", 1300);
+  machine(k, sheet, P, {
+    name: "Gloop",
+    inputs: { spotted: ["boolean", false], stomp: ["event"], done: ["event"] },
+    graph: { Patrol: [40, 160], Alert: [300, 40], Chase: [560, 160], Squash: [300, 300], Respawn: [40, 300] },
+    transitions: [
+      ["Patrol", "Alert", [["spotted", true]]],
+      ["Alert", "Chase", [["done"], ["spotted", true]]],
+      ["Alert", "Patrol", [["done"]]],
+      ["Chase", "Patrol", [["spotted", false]]],
+      ["Patrol", "Squash", [["stomp"]]],
+      ["Alert", "Squash", [["stomp"]]],
+      ["Chase", "Squash", [["stomp"]]],
+      ["Squash", "Respawn", [["done"]]],
+      ["Respawn", "Alert", [["done"], ["spotted", true]]],
+      ["Respawn", "Patrol", [["done"]]]
+    ],
+    listeners: [
+      ["pointerEnter", sight, [["set", "spotted", true]]],
+      ["pointerExit", sight, [["set", "spotted", false]]],
+      ["click", g.slime, [["fire", "stomp"]]],
+      ["complete", void 0, [["fire", "done"]]],
+      ...holdKeys(RIGHT, "spotted"),
+      ...onKeys("keyDown", JUMP, [["fire", "stomp"]])
+    ]
+  });
+}
+var FLIT = new Plan([["Roost", 2e3, true], ["Wake", 800, false], ["Fly", 1600, true], ["Dive", 1e3, false], ["Return", 900, false]]);
+var ROOST_Y = -250;
+function buildFlit(k, sheet) {
+  const l = new Lot(k, sheet, FLIT.duration);
+  const P = FLIT;
+  l.rect(sheet, 0, 0, W, 150, "caveRock", { name: "Ceiling" });
+  for (let x = 40; x < W; x += 180) l.shape(sheet, [[x, 148], [x + 40, 148 + 60 + (x % 360 ? 30 : 0)], [x + 80, 148]], "caveRock", { name: "Stalactite" });
+  l.rect(sheet, 0, GROUND, W, 1080 - GROUND, "caveRock", { name: "Floor" });
+  for (let x = 120; x < W; x += 300) l.rect(sheet, x, GROUND - 18, 120, 36, "caveRock", { name: "Rock", radius: 18 });
+  const cave = l.box(sheet, 360, 200, 1200, 640, "Cave", { fill: "caveZone", radius: 40, stroke: { color: "dim", width: 4 } });
+  label(k, cave, "FLIT\u2019S CAVE \xB7 move the pointer in, click to make it dive", "Label 20", "white", 28, 22, { name: "Cave label" });
+  const z = 2.2;
+  const home = [600, 360];
+  const b = drawBat(l, cave, home[0], home[1], z);
+  const zz = l.box(cave, home[0] + 120, home[1] + ROOST_Y - 40, 80, 60, "Snore");
+  l.line(zz, [[0, 24], [28, 24], [0, 52], [28, 52]], "white", 6, { name: "Z" });
+  l.line(zz, [[44, 0], [64, 0], [44, 20], [64, 20]], "white", 5, { name: "Z" });
+  k.patch(zz, { opacity: 0 });
+  for (const [wing, up, down, fold] of [[b.leftWing, 28, -22, -70], [b.rightWing, -28, 22, 70]]) {
+    track(l, P, wing, "rotation", 0, {
+      Roost: [[0, fold, E.hold], [2e3, fold]],
+      Wake: [[0, fold, E.hold], [300, fold, E.out], [500, up, E.inOut], ...flap(300, 150, up, down).map(([t, v, e]) => [500 + t, v, e])],
+      Fly: flap(1600, 200, up, down),
+      Dive: flap(1e3, 250, up, down),
+      Return: [...flap(600, 200, up, down), [800, fold, E.hold], [900, fold]]
+    });
+  }
+  track(l, P, b.bat, "rotation", 0, {
+    Roost: [[0, 174, E.inOut], [1e3, 186, E.inOut], [2e3, 174]],
+    Wake: [[0, 180, E.inOut], [100, 170, E.inOut], [200, 190, E.inOut], [300, 180, E.inOut], [650, 0, E.hold], [800, 0]],
+    Dive: [[0, 0, E.inOut], [300, -30, E.inOut], [450, 0, E.inOut], [650, 25, E.inOut], [1e3, 0]],
+    Return: [[0, 0, E.hold], [500, 0, E.inOut], [800, 180, E.hold], [900, 180]]
+  });
+  track(l, P, b.bat, "translateY", 0, {
+    Roost: [[0, ROOST_Y, E.hold], [2e3, ROOST_Y]],
+    Wake: [[0, ROOST_Y, E.hold], [300, ROOST_Y, E.in], [650, 0, E.hold], [800, 0]],
+    Fly: [[0, 0], [200, -40], [400, 0], [600, 40], [800, 0], [1e3, -40], [1200, 0], [1400, 40], [1600, 0]],
+    Dive: [[0, 0, E.in], [450, 200, E.out], [1e3, 0]],
+    Return: [[0, 0, E.inOut], [800, ROOST_Y, E.hold], [900, ROOST_Y]]
+  });
+  track(l, P, b.bat, "translateX", 0, {
+    Fly: [[0, 0], [400, 180], [800, 0], [1200, -180], [1600, 0]],
+    Dive: [[0, 0, E.inOut], [450, -380, E.inOut], [1e3, 0]]
+  });
+  track(l, P, b.eyes, "opacity", 1, { Roost: [[0, 0, E.hold], [2e3, 0]], Wake: [[0, 0, E.hold], [100, 1, E.hold], [800, 1]], Return: [[0, 1, E.hold], [800, 0, E.hold], [900, 0]] });
+  track(l, P, b.sleepy, "opacity", 0, { Roost: [[0, 1, E.hold], [2e3, 1]], Wake: [[0, 1, E.hold], [100, 0, E.hold], [800, 0]], Return: [[0, 0, E.hold], [800, 1, E.hold], [900, 1]] });
+  track(l, P, zz, "opacity", 0, { Roost: [[0, 0, E.inOut], [400, 1, E.hold], [1400, 1, E.inOut], [1900, 0, E.hold], [2e3, 0]] });
+  track(l, P, zz, "translateY", 0, { Roost: [[0, 0, E.linear], [1900, -60, E.hold], [2e3, 0]] });
+  statePanel(l, P, sheet, "FLIT \xB7 ENEMY", "Wakes when the pointer comes into its cave; goes back to roost when it leaves");
+  hint(l, sheet, "Hold \u2192 or D (or move the pointer into the cave) to wake it \xB7 Space or \u2193 (or a click) makes it dive \xB7 inputs: near, dive, done \xB7 1\u20134 switch screens", 1300);
+  machine(k, sheet, P, {
+    name: "Flit",
+    inputs: { near: ["boolean", false], dive: ["event"], done: ["event"] },
+    graph: { Roost: [40, 160], Wake: [300, 40], Fly: [560, 160], Dive: [820, 160], Return: [300, 300] },
+    transitions: [
+      ["Roost", "Wake", [["near", true]]],
+      ["Wake", "Fly", [["done"]]],
+      ["Fly", "Dive", [["dive"]]],
+      ["Fly", "Return", [["near", false]]],
+      ["Dive", "Fly", [["done"], ["near", true]]],
+      ["Dive", "Return", [["done"]]],
+      ["Return", "Wake", [["done"], ["near", true]]],
+      ["Return", "Roost", [["done"]]]
+    ],
+    listeners: [
+      ["pointerEnter", cave, [["set", "near", true]]],
+      ["pointerExit", cave, [["set", "near", false]]],
+      ["click", cave, [["fire", "dive"]]],
+      ["complete", void 0, [["fire", "done"]]],
+      ...holdKeys(RIGHT, "near"),
+      ...onKeys("keyDown", [" ", "ArrowDown"], [["fire", "dive"]])
+    ]
+  });
+}
+var BLOCK = new Plan([["Shimmer", 1200, true], ["Bump", 800, false], ["Empty", 600, false]]);
+var HITS = 3;
+function buildBlock(k, sheet) {
+  const l = new Lot(k, sheet, BLOCK.duration);
+  const P = BLOCK;
+  for (const [x, y2, s2] of [[200, 200, 1], [1460, 150, 1.2]]) cloud(l, sheet, x, y2, s2);
+  drawGround(l, sheet, GROUND, W);
+  const s = 160, y = 470, x0 = W / 2 - s / 2;
+  drawBrick(l, sheet, x0 - s, y, s);
+  drawBrick(l, sheet, x0 + s, y, s);
+  const coin = drawCoin(l, sheet, W / 2, y - 60, 44, "Coin pop");
+  k.patch(coin, { opacity: 0 });
+  const q = drawQuestion(l, sheet, x0, y, s);
+  const used = l.box(q.block, 0, 0, s, s, "Used", { fill: "blockUsed", radius: s * 0.12, stroke: { color: "brickDark", width: s * 0.06 } });
+  k.patch(used, { opacity: 0 });
+  const twinkle = l.pivot(l.shape(sheet, around(x0 + s - 10, y + 10, 26, 4, 0, 6), "white", { name: "Twinkle" }), 0.5, 0.5);
+  label(k, sheet, `${HITS} coins inside`, "Label 20", "night", W / 2 - 150, y + s + 40, { w: 300, align: "CENTER", name: "Coins inside" });
+  const reset = button(l, sheet, W - 40 - 240, 900, 240, 112, "RESET", "Reset button");
+  track(l, P, q.block, "translateY", 0, {
+    Shimmer: cycle(1200, 1, 0, -6),
+    Bump: [[0, 0, E.out], [120, -44, E.in], [240, 0, E.hold], [800, 0]],
+    Empty: [[0, 0, E.out], [100, -20, E.in], [200, 0, E.hold], [600, 0]]
+  });
+  squash(l, P, q.mark, { Shimmer: cycle(1200, 1, 1, 1.12) }, { Shimmer: cycle(1200, 1, 1, 1.12) });
+  track(l, P, q.mark, "opacity", 1, { Empty: [[0, 1, E.hold], [200, 1, E.inOut], [400, 0, E.hold], [600, 0]] });
+  track(l, P, used, "opacity", 0, { Empty: [[0, 0, E.hold], [200, 0, E.inOut], [400, 1, E.hold], [600, 1]] });
+  const tw = [[0, 0, E.hold], [500, 0, E.pop], [700, 1, E.in], [900, 0, E.hold], [1200, 0]];
+  for (const axis of ["scaleX", "scaleY"]) track(l, P, twinkle, axis, 0, { Shimmer: tw });
+  track(l, P, coin, "opacity", 0, { Bump: [[0, 0, E.hold], [100, 1, E.hold], [620, 1, E.in], [760, 0, E.hold], [800, 0]] });
+  track(l, P, coin, "translateY", 0, { Bump: [[0, 0, E.out], [450, -260, E.in], [760, -170, E.hold], [800, -170]] });
+  track(l, P, coin, "scaleX", 1, { Bump: [[0, 1], [100, 0.1], [200, 1], [300, 0.1], [400, 1], [500, 0.1], [600, 1, E.hold], [800, 1]] });
+  statePanel(l, P, sheet, "? BLOCK \xB7 NUMBER INPUT", `Each bump adds one to hits; at ${HITS} the block is empty until Reset`);
+  hint(l, sheet, `Click the ? block or press \u2191, W or Space to bump it \xB7 R resets \xB7 Bump\u2019s entry action increments hits \xB7 the third bump (hits \u2265 ${HITS}) empties it \xB7 1\u20134 switch screens`, 1300);
+  machine(k, sheet, P, {
+    name: "? Block",
+    inputs: { hits: ["number", 0], bump: ["event"], done: ["event"], reset: ["event"] },
+    graph: { Shimmer: [40, 160], Bump: [300, 160], Empty: [560, 160] },
+    entry: { Bump: [["increment", "hits"]] },
+    transitions: [
+      ["Shimmer", "Bump", [["bump"]]],
+      // Bump's entry counted this hit: the third one empties the block.
+      ["Bump", "Empty", [["done"], ["hits", HITS, "gte"]]],
+      ["Bump", "Shimmer", [["done"]]],
+      ["Empty", "Shimmer", [["reset"]]]
+    ],
+    listeners: [
+      ["click", q.block, [["fire", "bump"]]],
+      ["click", reset, [["reset", "hits"], ["fire", "reset"]]],
+      ["complete", void 0, [["fire", "done"]]],
+      ...onKeys("keyDown", JUMP, [["fire", "bump"]]),
+      ...onKeys("keyDown", ["r"], [["reset", "hits"], ["fire", "reset"]])
+    ]
+  });
+}
+var mossy_hollow_platformer_default = defineTemplate({
+  id: "game-mossy-hollow-platformer",
+  meta: {
+    name: "MOSSY HOLLOW \u2014 2D platformer with state machines",
+    description: "A playable 2D platformer whose characters are animated by state machines: Pip the hero idles, runs while you hold \u2192 or D, stomps the slime with \u2191 or Space and slashes the bat with X; Gloop the slime patrols, spots you, chases, squashes and respawns; Flit the bat roosts, wakes, flies, dives and returns; a ? block counts its hits with a number input. Each screen has its own machine and lights the state that is playing",
+    category: "game-ui",
+    tags: ["game", "game ui", "platformer", "2d platformer", "state machine", "character animation", "enemy ai", "sprite", "interactive", "keyboard", "present mode", "run cycle"],
+    platforms: ["desktop"],
+    formats: ["screen"],
+    useCases: ["launch", "pitch"],
+    created: "2026-10-01",
+    updated: "2026-10-01"
+  },
+  stableNumbers: true,
+  build() {
+    const k = gameKit("MOSSY HOLLOW");
+    k.brand({
+      sky: "#8ED3F5",
+      far: "#BDE7DA",
+      hill: "#6CC56F",
+      hillDark: "#4FA85A",
+      grass: "#7BD84F",
+      grassDark: "#4DAA3A",
+      dirt: "#B8733F",
+      dirtDark: "#8A5129",
+      white: "#FFFFFF",
+      night: "#1F1A33",
+      pill: "#342C52",
+      dim: "#C9C3E6",
+      tunic: "#FF7B47",
+      tunicDark: "#D95A2B",
+      skin: "#FFD7AE",
+      pants: "#4B3D78",
+      leaf: "#8BE36B",
+      leafDark: "#3E9A4C",
+      pop: "#FF4F6D",
+      steel: "#EAF2FA",
+      steelDark: "#9DB2C9",
+      hilt: "#8C5B2E",
+      slime: "#A07BFF",
+      slimeDark: "#6F48DA",
+      slimeShine: "#E2D6FF",
+      sightZone: "#E8F6FF",
+      bat: "#3E3458",
+      batWing: "#625282",
+      batEye: "#FFE45C",
+      cave: "#231D38",
+      caveRock: "#3A3157",
+      caveZone: "#2E2748",
+      coin: "#FFC93C",
+      coinDark: "#DB9418",
+      brick: "#CF6A3D",
+      brickDark: "#923F1F",
+      block: "#FFB52E",
+      blockDark: "#C47A10",
+      blockUsed: "#A0643A",
+      accent: "#FFE45C",
+      onAccent: "#1F1A33"
+    });
+    k.textStyle("Title 28", { size: 28, fontWeight: 900, lineHeight: 34, letterSpacing: 1 });
+    k.textStyle("Body 18", { size: 18, fontWeight: 600, lineHeight: 24 });
+    k.textStyle("Body 20", { size: 20, fontWeight: 600, lineHeight: 28 });
+    k.textStyle("Label 20", { size: 20, fontWeight: 800, lineHeight: 26, letterSpacing: 0.5 });
+    k.textStyle("Pill 18", { size: 18, fontWeight: 900, lineHeight: 24, letterSpacing: 1, textCase: "UPPER" });
+    k.textStyle("Button 28", { size: 28, fontWeight: 900, lineHeight: 36, letterSpacing: 1 });
+    k.component("State pill", { width: PILL_W, height: 44, fill: "pill", radius: 22, align: "CENTER", justify: "CENTER", props: { label: "Idle" } }, (id) => {
+      k.propText(id, "label", { style: "Pill 18", color: "white", autoWidth: true });
+    });
+    k.component("Tab", { width: 156, height: 52, fill: "night", radius: 26, align: "CENTER", justify: "CENTER", props: { label: "Level 1-1" } }, (id) => {
+      k.propText(id, "label", { style: "Pill 18", color: "white", autoWidth: true });
+    });
+    const level = screen(k, "Level 1-1", { ground: "sky", first: true, duration: LEVEL.duration });
+    const gloop = screen(k, "Gloop \u2014 enemy AI", { ground: "sky", duration: GLOOP.duration });
+    const flit = screen(k, "Flit \u2014 enemy", { ground: "cave", duration: FLIT.duration });
+    const block = screen(k, "? Block", { ground: "sky", duration: BLOCK.duration });
+    k.flowStart(level, "Play");
+    buildLevel(k, level);
+    buildGloop(k, gloop);
+    buildFlit(k, flit);
+    buildBlock(k, block);
+    const screens = [level, gloop, flit, block];
+    screens.forEach((id, i) => tabs(new Lot(k, id, 0), id, screens, i));
+    return k.finish();
+  }
+});
+
+export {
+  mossy_hollow_platformer_default
+};