@zakmandhro/bunti 0.2.0 → 0.3.0

package/dist/components/index.js

@@ -1,10 +1,10 @@
-export * from './Box';
-export * from './Button';
-export * from './Card';
-export * from './Header';
-export * from './Input';
-export * from './Link';
-export * from './Modal';
-export * from './Progress';
-export * from './Spinner';
+export * from './Box.js';
+export * from './Button.js';
+export * from './Card.js';
+export * from './Header.js';
+export * from './Input.js';
+export * from './Link.js';
+export * from './Modal.js';
+export * from './Progress.js';
+export * from './Spinner.js';
 //# sourceMappingURL=index.js.map

package/dist/data/nf-glyphs.d.ts

@@ -4,8 +4,8 @@
  * Source: Nerd Fonts v3.4.0 glyphnames.json
  * Regenerate: bun scripts/gen-icons.ts
  */
-import type { IconName } from './nf-names';
-export type { IconName } from './nf-names';
+import type { IconName } from './nf-names.js';
+export type { IconName } from './nf-names.js';
 export declare const NF_GLYPHS: Record<IconName, string>;
 export declare const NF_VERSION = "v3.4.0";
 //# sourceMappingURL=nf-glyphs.d.ts.map

package/dist/demo-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"demo-registry.d.ts","sourceRoot":"","sources":["../src/demo-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,WAAW,SAAS;IACxB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,sCAAsC;AACtC,eAAO,MAAM,YAAY,EAAE,SAAS,EAqCnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,UAAqB,CAAC;AAE/C,+CAA+C;AAC/C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAE5D"}
+{"version":3,"file":"demo-registry.d.ts","sourceRoot":"","sources":["../src/demo-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,WAAW,SAAS;IACxB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,sCAAsC;AACtC,eAAO,MAAM,YAAY,EAAE,SAAS,EA2CnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,UAA8C,CAAC;AAExE,+CAA+C;AAC/C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAE5D"}

package/dist/demo-registry.js

@@ -19,6 +19,11 @@ export const PUBLIC_DEMOS = [
         file: '2048.ts',
         description: 'The classic game - keyboard input, merge animations',
     },
+    {
+        name: 'platformer',
+        file: 'platformer.ts',
+        description: 'STARHOP - 60fps side-scroller, pixel sprites, parallax, coyote jumps',
+    },
     {
         name: 'animation',
         file: 'animation.ts',
@@ -49,7 +54,7 @@ export const PUBLIC_DEMOS = [
  * Non-demo helper modules that public demos import; copied alongside them
  * into dist/demos/ by scripts/build-demos.ts.
  */
-export const DEMO_HELPERS = ['demo-layout.ts'];
+export const DEMO_HELPERS = ['demo-layout.ts', 'platformer-physics.ts'];
 /** Looks up a public demo by registry name. */
 export function findDemo(name) {
     return PUBLIC_DEMOS.find((d) => d.name === name);

package/dist/demo-registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"demo-registry.js","sourceRoot":"","sources":["../src/demo-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAWH,sCAAsC;AACtC,MAAM,CAAC,MAAM,YAAY,GAAgB;IACvC;QACE,IAAI,EAAE,iBAAiB;QACvB,IAAI,EAAE,oBAAoB;QAC1B,WAAW,EACT,kEAAkE;KACrE;IACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,qDAAqD;KACnE;IACD;QACE,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,cAAc;QACpB,WAAW,EAAE,oDAAoD;KAClE;IACD;QACE,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,gBAAgB;QACtB,WAAW,EAAE,sDAAsD;KACpE;IACD;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,UAAU;QAChB,WAAW,EAAE,8CAA8C;KAC5D;IACD;QACE,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,WAAW;QACjB,WAAW,EAAE,gDAAgD;KAC9D;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,aAAa;QACnB,WAAW,EAAE,0DAA0D;KACxE;CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAE/C,+CAA+C;AAC/C,MAAM,UAAU,QAAQ,CAAC,IAAY;IACnC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;AACnD,CAAC"}
+{"version":3,"file":"demo-registry.js","sourceRoot":"","sources":["../src/demo-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAWH,sCAAsC;AACtC,MAAM,CAAC,MAAM,YAAY,GAAgB;IACvC;QACE,IAAI,EAAE,iBAAiB;QACvB,IAAI,EAAE,oBAAoB;QAC1B,WAAW,EACT,kEAAkE;KACrE;IACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,qDAAqD;KACnE;IACD;QACE,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,eAAe;QACrB,WAAW,EACT,sEAAsE;KACzE;IACD;QACE,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,cAAc;QACpB,WAAW,EAAE,oDAAoD;KAClE;IACD;QACE,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,gBAAgB;QACtB,WAAW,EAAE,sDAAsD;KACpE;IACD;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,UAAU;QAChB,WAAW,EAAE,8CAA8C;KAC5D;IACD;QACE,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,WAAW;QACjB,WAAW,EAAE,gDAAgD;KAC9D;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,aAAa;QACnB,WAAW,EAAE,0DAA0D;KACxE;CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,gBAAgB,EAAE,uBAAuB,CAAC,CAAC;AAExE,+CAA+C;AAC/C,MAAM,UAAU,QAAQ,CAAC,IAAY;IACnC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;AACnD,CAAC"}

package/dist/demos/2048.js

@@ -0,0 +1,559 @@
+import { Box, Card, Modal } from "../components/index.js";
+import {
+  clamp01,
+  easeInOutCubic,
+  easeOutCubic,
+  visibleWidth
+} from "../index.js";
+import { demo } from "./demo-layout.js";
+function initGame() {
+  const grid = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+  ];
+  spawnTile(grid);
+  spawnTile(grid);
+  return grid;
+}
+function spawnTile(grid) {
+  const empties = [];
+  for (let r = 0;r < 4; r++) {
+    for (let c = 0;c < 4; c++) {
+      if (grid[r][c] === 0) {
+        empties.push({ r, c });
+      }
+    }
+  }
+  if (empties.length > 0) {
+    const { r, c } = empties[Math.floor(Math.random() * empties.length)];
+    grid[r][c] = Math.random() < 0.9 ? 2 : 4;
+  }
+}
+function transpose(grid) {
+  const result = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+  ];
+  for (let r = 0;r < 4; r++) {
+    for (let c = 0;c < 4; c++) {
+      result[c][r] = grid[r][c];
+    }
+  }
+  return result;
+}
+function moveRowLeft(row) {
+  const newRow = [0, 0, 0, 0];
+  const moves = [];
+  const mergedInThisTurn = [false, false, false, false];
+  let writeCol = 0;
+  let score = 0;
+  for (let col = 0;col < 4; col++) {
+    const val = row[col];
+    if (val === 0)
+      continue;
+    if (writeCol > 0 && newRow[writeCol - 1] === val && !mergedInThisTurn[writeCol - 1]) {
+      newRow[writeCol - 1] = val * 2;
+      score += val * 2;
+      mergedInThisTurn[writeCol - 1] = true;
+      for (const m of moves) {
+        if (m.to === writeCol - 1) {
+          m.merged = true;
+        }
+      }
+      moves.push({ from: col, to: writeCol - 1, merged: true, val });
+    } else {
+      newRow[writeCol] = val;
+      moves.push({ from: col, to: writeCol, merged: false, val });
+      writeCol++;
+    }
+  }
+  return { newRow, moves, score };
+}
+function slideLeft(grid) {
+  const next = [];
+  let scoreGained = 0;
+  const moves = [];
+  for (let r = 0;r < 4; r++) {
+    const { newRow, moves: rowMoves, score } = moveRowLeft(grid[r]);
+    next.push(newRow);
+    scoreGained += score;
+    for (const rm of rowMoves) {
+      moves.push({
+        fromRow: r,
+        fromCol: rm.from,
+        toRow: r,
+        toCol: rm.to,
+        value: rm.val,
+        merged: rm.merged
+      });
+    }
+  }
+  return { next, scoreGained, moves };
+}
+function slideRight(grid) {
+  const next = [];
+  let scoreGained = 0;
+  const moves = [];
+  for (let r = 0;r < 4; r++) {
+    const reversed = [...grid[r]].reverse();
+    const { newRow, moves: rowMoves, score } = moveRowLeft(reversed);
+    next.push([...newRow].reverse());
+    scoreGained += score;
+    for (const rm of rowMoves) {
+      const fromCol = 3 - rm.from;
+      const toCol = 3 - rm.to;
+      moves.push({
+        fromRow: r,
+        fromCol,
+        toRow: r,
+        toCol,
+        value: rm.val,
+        merged: rm.merged
+      });
+    }
+  }
+  return { next, scoreGained, moves };
+}
+function slideUp(grid) {
+  const transposed = transpose(grid);
+  const { next: slid, scoreGained, moves: slidMoves } = slideLeft(transposed);
+  const moves = slidMoves.map((m) => ({
+    fromRow: m.fromCol,
+    fromCol: m.fromRow,
+    toRow: m.toCol,
+    toCol: m.toRow,
+    value: m.value,
+    merged: m.merged
+  }));
+  return { next: transpose(slid), scoreGained, moves };
+}
+function slideDown(grid) {
+  const transposed = transpose(grid);
+  const { next: slid, scoreGained, moves: slidMoves } = slideRight(transposed);
+  const moves = slidMoves.map((m) => ({
+    fromRow: m.fromCol,
+    fromCol: m.fromRow,
+    toRow: m.toCol,
+    toCol: m.toRow,
+    value: m.value,
+    merged: m.merged
+  }));
+  return { next: transpose(slid), scoreGained, moves };
+}
+function gridChanged(g1, g2) {
+  for (let r = 0;r < 4; r++) {
+    for (let c = 0;c < 4; c++) {
+      if (g1[r][c] !== g2[r][c])
+        return true;
+    }
+  }
+  return false;
+}
+function getMaxTile(grid) {
+  let max = 0;
+  for (let r = 0;r < 4; r++) {
+    for (let c = 0;c < 4; c++) {
+      max = Math.max(max, grid[r][c]);
+    }
+  }
+  return max;
+}
+function findPeakMerge(moves, next, currentMaxTile) {
+  let peak = null;
+  const seenTargets = new Set;
+  for (const move of moves) {
+    if (!move.merged)
+      continue;
+    const key = `${move.toRow}:${move.toCol}`;
+    if (seenTargets.has(key))
+      continue;
+    seenTargets.add(key);
+    const value = next[move.toRow][move.toCol];
+    if (value <= currentMaxTile)
+      continue;
+    if (peak && value <= peak.value)
+      continue;
+    peak = {
+      row: move.toRow,
+      col: move.toCol,
+      value
+    };
+  }
+  return peak;
+}
+function isGameOver(grid) {
+  for (let r = 0;r < 4; r++) {
+    for (let c = 0;c < 4; c++) {
+      if (grid[r][c] === 0)
+        return false;
+    }
+  }
+  for (let r = 0;r < 4; r++) {
+    for (let c = 0;c < 3; c++) {
+      if (grid[r][c] === grid[r][c + 1])
+        return false;
+    }
+  }
+  for (let r = 0;r < 3; r++) {
+    for (let c = 0;c < 4; c++) {
+      if (grid[r][c] === grid[r + 1][c])
+        return false;
+    }
+  }
+  return true;
+}
+function centerText(text, width) {
+  const padTotal = width - text.length;
+  if (padTotal <= 0)
+    return text.substring(0, width);
+  const padLeft = Math.floor(padTotal / 2);
+  const padRight = padTotal - padLeft;
+  return " ".repeat(padLeft) + text + " ".repeat(padRight);
+}
+function mixRGB(from, to, amount) {
+  const t = clamp01(amount);
+  return {
+    r: Math.round(from.r + (to.r - from.r) * t),
+    g: Math.round(from.g + (to.g - from.g) * t),
+    b: Math.round(from.b + (to.b - from.b) * t)
+  };
+}
+function getTileColors(val) {
+  switch (val) {
+    case 2:
+      return { bg: { r: 238, g: 228, b: 218 }, fg: { r: 119, g: 110, b: 101 } };
+    case 4:
+      return { bg: { r: 237, g: 224, b: 200 }, fg: { r: 119, g: 110, b: 101 } };
+    case 8:
+      return { bg: { r: 242, g: 177, b: 121 }, fg: { r: 249, g: 246, b: 242 } };
+    case 16:
+      return { bg: { r: 245, g: 149, b: 99 }, fg: { r: 249, g: 246, b: 242 } };
+    case 32:
+      return { bg: { r: 246, g: 124, b: 95 }, fg: { r: 249, g: 246, b: 242 } };
+    case 64:
+      return { bg: { r: 246, g: 94, b: 59 }, fg: { r: 249, g: 246, b: 242 } };
+    case 128:
+      return { bg: { r: 237, g: 207, b: 114 }, fg: { r: 249, g: 246, b: 242 } };
+    case 256:
+      return { bg: { r: 237, g: 204, b: 97 }, fg: { r: 249, g: 246, b: 242 } };
+    case 512:
+      return { bg: { r: 156, g: 206, b: 56 }, fg: { r: 249, g: 246, b: 242 } };
+    case 1024:
+      return { bg: { r: 70, g: 180, b: 233 }, fg: { r: 249, g: 246, b: 242 } };
+    case 2048:
+      return { bg: { r: 164, g: 75, b: 227 }, fg: { r: 249, g: 246, b: 242 } };
+    default:
+      if (val > 2048) {
+        return {
+          bg: { r: 224, g: 36, b: 171 },
+          fg: { r: 255, g: 255, b: 255 }
+        };
+      }
+      return { bg: { r: 44, g: 47, b: 56 }, fg: { r: 80, g: 85, b: 95 } };
+  }
+}
+const SLIDE_ANIMATION_DURATION = 220;
+const PEAK_MERGE_DURATION = 380;
+const GRID_SIZE = 4;
+const TILE_W = 8;
+const TILE_H = 3;
+const TILE_GAP_X = 2;
+const TILE_GAP_Y = 1;
+const TILE_STEP_X = TILE_W + TILE_GAP_X;
+const TILE_STEP_Y = TILE_H + TILE_GAP_Y;
+const BOARD_W = GRID_SIZE * TILE_W + (GRID_SIZE - 1) * TILE_GAP_X + 2;
+const BOARD_H = GRID_SIZE * TILE_H + (GRID_SIZE - 1) * TILE_GAP_Y + 2;
+function drawPeakMergeCelebration(ctx, celebration) {
+  if (!celebration)
+    return;
+  const age = Date.now() - celebration.startedAt;
+  if (age < 0 || age > PEAK_MERGE_DURATION)
+    return;
+  const progress = clamp01(age / PEAK_MERGE_DURATION);
+  const glow = 1 - easeOutCubic(progress);
+  const flash = Math.sin(progress * Math.PI) * (1 - progress * 0.35);
+  const tileX = ctx.offsetX + 1 + celebration.col * TILE_STEP_X;
+  const tileY = ctx.offsetY + 1 + celebration.row * TILE_STEP_Y;
+  const { bg: tileBg, fg: tileFg } = getTileColors(celebration.value);
+  const glowColor = mixRGB({ r: 62, g: 52, b: 30 }, { r: 255, g: 226, b: 86 }, glow);
+  const numberColor = mixRGB(tileFg, { r: 255, g: 255, b: 255 }, flash);
+  const tileColor = mixRGB(tileBg, { r: 255, g: 226, b: 86 }, flash * 0.22);
+  ctx.layer(8, (fx) => {
+    fx.rect(tileX - 1, tileY - 1, TILE_W + 2, TILE_H + 2, { bg: glowColor });
+    fx.rect(tileX, tileY, TILE_W, TILE_H, { bg: tileColor });
+    fx.blit(tileX, tileY + 1, fx.color.bold(centerText(celebration.value.toString(), TILE_W)), {
+      fg: numberColor,
+      bg: tileColor,
+      bold: true
+    });
+  });
+}
+demo("Bunti Retro Arcade: 2048", (ctx, bounds) => {
+  const {
+    color,
+    gradient,
+    lastKey,
+    usePersistentState,
+    useState,
+    wallpaper
+  } = ctx;
+  const [grid, setGrid] = useState("2048_grid", null);
+  const [score, setScore] = useState("2048_score", 0);
+  const [highScore, setHighScore] = usePersistentState("2048_highscore", 0);
+  const [gameOver, setGameOver] = useState("2048_gameover", false);
+  const [win, setWin] = useState("2048_win", false);
+  const [keepPlaying, setKeepPlaying] = useState("2048_keepplaying", false);
+  const [activeMoves, setActiveMoves] = useState("2048_activemoves", []);
+  const [slideStart, setSlideStart] = useState("2048_slidestart", 0);
+  const [maxTile, setMaxTile] = useState("2048_maxtile", 0);
+  const [peakMerge, setPeakMerge] = useState("2048_peakmerge", null);
+  const resetGame = () => {
+    const g = initGame();
+    setGrid(g);
+    setScore(0);
+    setGameOver(false);
+    setWin(false);
+    setKeepPlaying(false);
+    setActiveMoves([]);
+    setSlideStart(0);
+    setMaxTile(getMaxTile(g));
+    setPeakMerge(null);
+  };
+  if (grid === null) {
+    resetGame();
+    return;
+  }
+  if (lastKey) {
+    let moved = false;
+    let next = [];
+    let scoreGained = 0;
+    let computedMoves = [];
+    if (win && !keepPlaying) {
+      if (lastKey === "enter" || lastKey === "c") {
+        setKeepPlaying(true);
+        setWin(false);
+      }
+    } else if (!gameOver) {
+      if (lastKey === "up" || lastKey === "w") {
+        const res = slideUp(grid);
+        next = res.next;
+        scoreGained = res.scoreGained;
+        computedMoves = res.moves;
+        moved = gridChanged(grid, next);
+      } else if (lastKey === "down" || lastKey === "s") {
+        const res = slideDown(grid);
+        next = res.next;
+        scoreGained = res.scoreGained;
+        computedMoves = res.moves;
+        moved = gridChanged(grid, next);
+      } else if (lastKey === "left" || lastKey === "a") {
+        const res = slideLeft(grid);
+        next = res.next;
+        scoreGained = res.scoreGained;
+        computedMoves = res.moves;
+        moved = gridChanged(grid, next);
+      } else if (lastKey === "right" || lastKey === "d") {
+        const res = slideRight(grid);
+        next = res.next;
+        scoreGained = res.scoreGained;
+        computedMoves = res.moves;
+        moved = gridChanged(grid, next);
+      }
+      if (moved) {
+        const now = Date.now();
+        const peak = findPeakMerge(computedMoves, next, maxTile);
+        setActiveMoves(computedMoves);
+        setSlideStart(now);
+        spawnTile(next);
+        setGrid(next);
+        setMaxTile(Math.max(maxTile, getMaxTile(next)));
+        if (peak) {
+          setPeakMerge({
+            ...peak,
+            startedAt: now + SLIDE_ANIMATION_DURATION
+          });
+        }
+        const newScore = score + scoreGained;
+        setScore(newScore);
+        if (newScore > highScore) {
+          setHighScore(newScore);
+        }
+        if (!win && !keepPlaying) {
+          for (let r = 0;r < 4; r++) {
+            for (let c = 0;c < 4; c++) {
+              if (next[r][c] === 2048) {
+                setWin(true);
+              }
+            }
+          }
+        }
+        if (isGameOver(next)) {
+          setGameOver(true);
+        }
+      }
+    }
+    if (lastKey === "r") {
+      resetGame();
+    }
+  }
+  wallpaper(gradient({
+    colors: [
+      { r: 7, g: 10, b: 18 },
+      { r: 15, g: 28, b: 46 },
+      { r: 33, g: 15, b: 49 },
+      { r: 8, g: 11, b: 20 }
+    ],
+    direction: "vertical",
+    steps: 24
+  }));
+  const W = bounds.w;
+  const H = bounds.h;
+  const boardW = BOARD_W;
+  const boardH = BOARD_H;
+  const boardX = bounds.x + Math.max(0, Math.floor((W - boardW) / 2));
+  const totalNeededH = 3 + boardH;
+  const extraH = Math.max(0, H - totalNeededH);
+  const topPadding = Math.floor(extraH / 2);
+  const scoreboardY = bounds.y + topPadding;
+  const boardY = scoreboardY + 3;
+  Card(ctx, {
+    x: boardX,
+    y: scoreboardY,
+    width: boardW,
+    height: 3,
+    border: "none",
+    padding: [0, 0]
+  }, (sub) => {
+    const titleStr = color.yellow(color.bold(`  \uDB81\uDCD3  2048  `));
+    const scoreStr = color.white(`SCORE: ${color.green(color.bold(score.toString()))}  |  BEST: ${color.yellow(color.bold(highScore.toString()))}`);
+    const titleW = visibleWidth(titleStr);
+    const scoreW = visibleWidth(scoreStr);
+    const spaceCount = Math.max(0, boardW - titleW - scoreW);
+    sub.text(`${titleStr}${" ".repeat(spaceCount)}${scoreStr}`);
+  });
+  Box(ctx, {
+    x: boardX,
+    y: boardY,
+    width: boardW,
+    height: boardH,
+    border: "none",
+    padding: [0, 0]
+  }, (sub) => {
+    const elapsed = Date.now() - slideStart;
+    const isAnimating = elapsed < SLIDE_ANIMATION_DURATION && activeMoves.length > 0;
+    for (let r = 0;r < GRID_SIZE; r++) {
+      for (let c = 0;c < GRID_SIZE; c++) {
+        const relX = 1 + c * TILE_STEP_X;
+        const relY = 1 + r * TILE_STEP_Y;
+        const absX = sub.offsetX + relX;
+        const absY = sub.offsetY + relY;
+        const { bg: bgCol } = getTileColors(0);
+        sub.rect(absX, absY, TILE_W, TILE_H, { bg: bgCol });
+      }
+    }
+    if (isAnimating) {
+      const progress = clamp01(elapsed / SLIDE_ANIMATION_DURATION);
+      const eased = easeInOutCubic(progress);
+      for (const m of activeMoves) {
+        const startX = 1 + m.fromCol * TILE_STEP_X;
+        const startY = 1 + m.fromRow * TILE_STEP_Y;
+        const endX = 1 + m.toCol * TILE_STEP_X;
+        const endY = 1 + m.toRow * TILE_STEP_Y;
+        const currX = startX + eased * (endX - startX);
+        const currY = startY + eased * (endY - startY);
+        const absX = Math.round(sub.offsetX + currX);
+        const absY = Math.round(sub.offsetY + currY);
+        const { bg: bgCol, fg: fgCol } = getTileColors(m.value);
+        sub.rect(absX, absY, TILE_W, TILE_H, { bg: bgCol });
+        const valStr = m.value.toString();
+        const centered = color.bold(centerText(valStr, TILE_W));
+        sub.blit(absX, absY + 1, centered, {
+          fg: fgCol,
+          bg: bgCol,
+          bold: true
+        });
+      }
+    } else {
+      for (let r = 0;r < GRID_SIZE; r++) {
+        for (let c = 0;c < GRID_SIZE; c++) {
+          const val = grid[r][c];
+          if (val === 0)
+            continue;
+          const relX = 1 + c * TILE_STEP_X;
+          const relY = 1 + r * TILE_STEP_Y;
+          const absX = sub.offsetX + relX;
+          const absY = sub.offsetY + relY;
+          const { bg: bgCol, fg: fgCol } = getTileColors(val);
+          sub.rect(absX, absY, TILE_W, TILE_H, { bg: bgCol });
+          const valStr = val.toString();
+          const centered = color.bold(centerText(valStr, TILE_W));
+          sub.blit(absX, absY + 1, centered, {
+            fg: fgCol,
+            bg: bgCol,
+            bold: true
+          });
+        }
+      }
+    }
+    drawPeakMergeCelebration(sub, peakMerge);
+    if (gameOver) {
+      sub.layer(10, (overlay) => {
+        Modal(overlay, {
+          width: 27,
+          height: 7,
+          border: "none",
+          bgColor: { r: 35, g: 0, b: 0 },
+          align: "center"
+        }, (modalSub) => {
+          modalSub.text(`
+`);
+          modalSub.text(color.red(color.bold(`GAME OVER
+`)));
+          modalSub.text(color.dim(`Final Score: ${score}
+
+`));
+          modalSub.text(color.yellow("[R] To Restart"));
+        });
+      });
+    } else if (win && !keepPlaying) {
+      sub.layer(10, (overlay) => {
+        Modal(overlay, {
+          width: 27,
+          height: 7,
+          border: "none",
+          bgColor: { r: 35, g: 35, b: 0 },
+          align: "center"
+        }, (modalSub) => {
+          modalSub.text(`
+`);
+          modalSub.text(color.fg("gold", color.bold(`YOU REACHED 2048!
+`)));
+          modalSub.text(color.dim(`Magnificent job!
+
+`));
+          modalSub.text(color.green("[Enter] Keep Playing"));
+        });
+      });
+    }
+  });
+  Box(ctx, {
+    x: boardX,
+    y: boardY + boardH,
+    width: boardW,
+    height: 3,
+    border: "none",
+    padding: [0, 0],
+    align: "center",
+    valign: "middle"
+  }, (sub) => {
+    sub.text(color.dim(`\uDB81\uDF32 ${color.bold("W,A,S,D")} or ${color.bold("ARROWS")} to slide
+${color.bold("R")} restart | ${color.bold("Q")} quit`));
+  });
+}, {
+  fps: 60,
+  mouse: false
+});

package/dist/demos/2048.ts

@@ -6,7 +6,7 @@ import {
   visibleWidth,
 } from '../index.js';
 import type { RGB } from '../state.js';
-import { demo } from './demo-layout';
+import { demo } from './demo-layout.js';
 
 // --- Game Types ---
 type Grid = number[][];