@starweb-libs/menus 0.0.2 → 0.0.3

package/README.md

@@ -14,6 +14,12 @@ Composable canvas menu screens for browser games, built with TypeScript.
 | Module | Description |
 | ------ | ----------- |
 | `transition.js` | Plays the button sound, runs an optional callback, and flushes pointer + keyboard input between screens. |
+| `title.js` | Title screen with START and SETTINGS buttons; takes a level count and an optional on-start callback. |
+| `levels.js` | Level-select grid (up to 9) with a Back button; takes the level list and a `selectLevel(index)` callback. |
+| `settings.js` | Settings screen with mute toggle and volume slider; takes the current slider state and returns the updated state alongside the frame. |
+| `pause.js` | Pause overlay with Resume / Restart / Quit buttons; takes a `resetPlayState` callback. |
+| `complete.js` | Level-complete overlay with Restart / Quit buttons, plus Next when a further level exists; takes the level index/count and `selectLevel` + `resetPlayState` callbacks. |
+| `failed.js` | Level-failed overlay with Restart / Quit buttons; takes a `resetPlayState` callback. |
 
 ## Installation
 ```bash

package/dist/complete.d.mts

@@ -0,0 +1,8 @@
+import { CompleteFrame, CompleteMenuState } from "./types.mjs";
+import { Audio } from "@starweb-libs/audio/audio.js";
+//#region src/complete.d.ts
+declare function handleCompleteFrame(w: number, h: number, a: Audio, levelIndex: number, levelCount: number, selectLevel: (i: number) => void, resetPlayState: () => void): CompleteFrame;
+declare function renderCompleteFrame(ctx: CanvasRenderingContext2D, ui: CompleteMenuState | null, w: number, h: number): void;
+//#endregion
+export { handleCompleteFrame, renderCompleteFrame };
+//# sourceMappingURL=complete.d.mts.map

package/dist/complete.mjs

@@ -0,0 +1,90 @@
+import { transition } from "./transition.mjs";
+import { getPointer } from "@starweb-libs/engine/input/pointer.js";
+import { drawTitle, getLayout } from "@starweb-libs/ui/layout.js";
+import { drawButton, getButtonState } from "@starweb-libs/ui/button.js";
+//#region src/complete.ts
+function handleCompleteFrame(w, h, a, levelIndex, levelCount, selectLevel, resetPlayState) {
+	const { scale, gap, cx, cy, btnW, btnH } = getLayout(w, h);
+	const hasNext = levelIndex < levelCount - 1;
+	const btnCount = hasNext ? 3 : 2;
+	const firstY = cy - (btnH * btnCount + gap * (btnCount - 1)) / 2;
+	const titleY = firstY - btnH * .5 - gap * 2;
+	const restartBtn = {
+		x: cx - btnW / 2,
+		y: firstY,
+		w: btnW,
+		h: btnH,
+		label: "Restart"
+	};
+	const quitBtn = {
+		x: cx - btnW / 2,
+		y: firstY + (btnH + gap) * (btnCount - 1),
+		w: btnW,
+		h: btnH,
+		label: "Quit"
+	};
+	const restart = {
+		btn: restartBtn,
+		state: getButtonState(restartBtn, getPointer())
+	};
+	const quit = {
+		btn: quitBtn,
+		state: getButtonState(quitBtn, getPointer())
+	};
+	let next = null;
+	if (hasNext) {
+		const nextBtn = {
+			x: cx - btnW / 2,
+			y: firstY + (btnH + gap),
+			w: btnW,
+			h: btnH,
+			label: "Next"
+		};
+		next = {
+			btn: nextBtn,
+			state: getButtonState(nextBtn, getPointer())
+		};
+	}
+	let action = null;
+	if (next?.state.clicked) action = "next";
+	if (restart.state.clicked) action = "restart";
+	if (quit.state.clicked) action = "quit";
+	const ui = {
+		cx,
+		scale,
+		titleY,
+		restart,
+		next,
+		quit,
+		action
+	};
+	if (ui.action === "quit") return transition({
+		game: "menu-title",
+		ui: null
+	}, a);
+	if (ui.action === "next") return transition({
+		game: "level-playing",
+		ui: null
+	}, a, () => selectLevel(levelIndex + 1));
+	if (ui.action === "restart") return transition({
+		game: "level-playing",
+		ui: null
+	}, a, () => resetPlayState());
+	return {
+		game: "level-complete",
+		ui
+	};
+}
+function renderCompleteFrame(ctx, ui, w, h) {
+	if (!ui) return;
+	ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
+	ctx.fillRect(0, 0, w, h);
+	drawTitle(ctx, "Level Complete!", ui.cx, ui.titleY, ui.scale);
+	drawButton(ctx, ui.restart.btn, ui.restart.state);
+	if (ui.next) drawButton(ctx, ui.next.btn, ui.next.state);
+	drawButton(ctx, ui.quit.btn, ui.quit.state);
+}
+//#endregion
+export { handleCompleteFrame, renderCompleteFrame };
+
+//# sourceMappingURL=complete.mjs.map

package/dist/complete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"complete.mjs","names":[],"sources":["../src/complete.ts"],"sourcesContent":["import type { Button                } from \"@starweb-libs/ui/types.js\";\nimport type { Audio                 } from \"@starweb-libs/audio/audio.js\";\nimport { getPointer                 } from \"@starweb-libs/engine/input/pointer.js\";\nimport { getLayout, drawTitle       } from \"@starweb-libs/ui/layout.js\";\nimport { getButtonState, drawButton } from \"@starweb-libs/ui/button.js\";\nimport type { CompleteAction, CompleteFrame, CompleteMenuState } from \"./types.ts\";\nimport { transition                                            } from \"./transition.ts\";\n\nexport function handleCompleteFrame(\n  w: number, h: number, a: Audio,\n  levelIndex: number,\n  levelCount: number,\n  selectLevel: (i: number) => void, resetPlayState: () => void,\n): CompleteFrame {\n  const { scale, gap, cx, cy, btnW, btnH } = getLayout(w, h);\n  const hasNext = levelIndex < levelCount - 1\n  const btnCount = hasNext ? 3 : 2;\n  const totalH = btnH * btnCount + gap * (btnCount - 1);\n  const firstY = cy - totalH / 2;\n  const titleY = firstY - btnH * 0.5 - gap * 2;\n\n  const restartBtn: Button = { x: cx - btnW/2, y: firstY,                                 w: btnW, h: btnH, label: \"Restart\" };\n  const quitBtn:    Button = { x: cx - btnW/2, y: firstY + (btnH + gap) * (btnCount - 1), w: btnW, h: btnH, label: \"Quit\"    };\n\n  const restart = { btn: restartBtn, state: getButtonState(restartBtn, getPointer()) };\n  const quit    = { btn: quitBtn,    state: getButtonState(quitBtn,    getPointer()) };\n\n  let next: CompleteMenuState[\"next\"] = null;\n  if (hasNext) {\n    const nextBtn: Button = { x: cx - btnW/2, y: firstY + (btnH + gap), w: btnW, h: btnH, label: \"Next\" };\n    next = { btn: nextBtn, state: getButtonState(nextBtn, getPointer()) };\n  }\n\n  let action: CompleteAction = null;\n  if (next?.state.clicked)   action = \"next\";\n  if (restart.state.clicked) action = \"restart\";\n  if (quit.state.clicked)    action = \"quit\";\n\n  const ui = { cx, scale, titleY, restart, next, quit, action };\n\n  if (ui.action === \"quit\")    return transition({ game: \"menu-title\", ui: null }, a);\n  if (ui.action === \"next\")    return transition(\n    { game: \"level-playing\", ui: null },\n    a,\n    () => selectLevel(levelIndex + 1)\n  );\n  if (ui.action === \"restart\") return transition(\n    { game: \"level-playing\", ui: null },\n    a,\n    () => resetPlayState()\n  );\n  return { game: \"level-complete\", ui };\n}\n\nexport function renderCompleteFrame(\n  ctx: CanvasRenderingContext2D,\n  ui: CompleteMenuState | null,\n  w: number, h: number,\n): void {\n  if (!ui) return;\n\n  ctx.fillStyle = \"rgba(0, 0, 0, 0.6)\";\n  ctx.fillRect(0, 0, w, h);\n  drawTitle(ctx, \"Level Complete!\", ui.cx, ui.titleY, ui.scale);\n  drawButton(ctx, ui.restart.btn, ui.restart.state);\n  if (ui.next) drawButton(ctx, ui.next.btn, ui.next.state);\n  drawButton(ctx, ui.quit.btn, ui.quit.state);\n}\n\n\n"],"mappings":";;;;;AAQA,SAAgB,oBACd,GAAW,GAAW,GACtB,YACA,YACA,aAAkC,gBACnB;CACf,MAAM,EAAE,OAAO,KAAK,IAAI,IAAI,MAAM,SAAS,UAAU,GAAG,CAAC;CACzD,MAAM,UAAU,aAAa,aAAa;CAC1C,MAAM,WAAW,UAAU,IAAI;CAE/B,MAAM,SAAS,MADA,OAAO,WAAW,OAAO,WAAW,MACtB;CAC7B,MAAM,SAAS,SAAS,OAAO,KAAM,MAAM;CAE3C,MAAM,aAAqB;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG;EAAwC,GAAG;EAAM,GAAG;EAAM,OAAO;CAAU;CAC3H,MAAM,UAAqB;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG,UAAU,OAAO,QAAQ,WAAW;EAAI,GAAG;EAAM,GAAG;EAAM,OAAO;CAAU;CAE3H,MAAM,UAAU;EAAE,KAAK;EAAY,OAAO,eAAe,YAAY,WAAW,CAAC;CAAE;CACnF,MAAM,OAAU;EAAE,KAAK;EAAY,OAAO,eAAe,SAAY,WAAW,CAAC;CAAE;CAEnF,IAAI,OAAkC;CACtC,IAAI,SAAS;EACX,MAAM,UAAkB;GAAE,GAAG,KAAK,OAAK;GAAG,GAAG,UAAU,OAAO;GAAM,GAAG;GAAM,GAAG;GAAM,OAAO;EAAO;EACpG,OAAO;GAAE,KAAK;GAAS,OAAO,eAAe,SAAS,WAAW,CAAC;EAAE;CACtE;CAEA,IAAI,SAAyB;CAC7B,IAAI,MAAM,MAAM,SAAW,SAAS;CACpC,IAAI,QAAQ,MAAM,SAAS,SAAS;CACpC,IAAI,KAAK,MAAM,SAAY,SAAS;CAEpC,MAAM,KAAK;EAAE;EAAI;EAAO;EAAQ;EAAS;EAAM;EAAM;CAAO;CAE5D,IAAI,GAAG,WAAW,QAAW,OAAO,WAAW;EAAE,MAAM;EAAc,IAAI;CAAK,GAAG,CAAC;CAClF,IAAI,GAAG,WAAW,QAAW,OAAO,WAClC;EAAE,MAAM;EAAiB,IAAI;CAAK,GAClC,SACM,YAAY,aAAa,CAAC,CAClC;CACA,IAAI,GAAG,WAAW,WAAW,OAAO,WAClC;EAAE,MAAM;EAAiB,IAAI;CAAK,GAClC,SACM,eAAe,CACvB;CACA,OAAO;EAAE,MAAM;EAAkB;CAAG;AACtC;AAEA,SAAgB,oBACd,KACA,IACA,GAAW,GACL;CACN,IAAI,CAAC,IAAI;CAET,IAAI,YAAY;CAChB,IAAI,SAAS,GAAG,GAAG,GAAG,CAAC;CACvB,UAAU,KAAK,mBAAmB,GAAG,IAAI,GAAG,QAAQ,GAAG,KAAK;CAC5D,WAAW,KAAK,GAAG,QAAQ,KAAK,GAAG,QAAQ,KAAK;CAChD,IAAI,GAAG,MAAM,WAAW,KAAK,GAAG,KAAK,KAAK,GAAG,KAAK,KAAK;CACvD,WAAW,KAAK,GAAG,KAAK,KAAK,GAAG,KAAK,KAAK;AAC5C"}

package/dist/failed.d.mts

@@ -0,0 +1,8 @@
+import { FailedFrame, FailedMenuState } from "./types.mjs";
+import { Audio } from "@starweb-libs/audio/audio.js";
+//#region src/failed.d.ts
+declare function handleFailedFrame(w: number, h: number, a: Audio, resetPlayState: () => void): FailedFrame;
+declare function renderFailedFrame(ctx: CanvasRenderingContext2D, ui: FailedMenuState | null, w: number, h: number): void;
+//#endregion
+export { handleFailedFrame, renderFailedFrame };
+//# sourceMappingURL=failed.d.mts.map

package/dist/failed.mjs

@@ -0,0 +1,67 @@
+import { transition } from "./transition.mjs";
+import { getPointer } from "@starweb-libs/engine/input/pointer.js";
+import { drawTitle, getLayout } from "@starweb-libs/ui/layout.js";
+import { drawButton, getButtonState } from "@starweb-libs/ui/button.js";
+//#region src/failed.ts
+function handleFailedFrame(w, h, a, resetPlayState) {
+	const { scale, gap, cx, cy, btnW, btnH } = getLayout(w, h);
+	const firstY = cy - (btnH * 2 + gap) / 2;
+	const titleY = firstY - btnH * .5 - gap * 2;
+	const restartBtn = {
+		x: cx - btnW / 2,
+		y: firstY,
+		w: btnW,
+		h: btnH,
+		label: "Restart"
+	};
+	const quitBtn = {
+		x: cx - btnW / 2,
+		y: firstY + btnH + gap,
+		w: btnW,
+		h: btnH,
+		label: "Quit"
+	};
+	const restart = {
+		btn: restartBtn,
+		state: getButtonState(restartBtn, getPointer())
+	};
+	const quit = {
+		btn: quitBtn,
+		state: getButtonState(quitBtn, getPointer())
+	};
+	let action = null;
+	if (restart.state.clicked) action = "restart";
+	if (quit.state.clicked) action = "quit";
+	const ui = {
+		cx,
+		scale,
+		titleY,
+		restart,
+		quit,
+		action
+	};
+	if (ui.action === "quit") return transition({
+		game: "menu-title",
+		ui: null
+	}, a);
+	if (ui.action === "restart") return transition({
+		game: "level-playing",
+		ui: null
+	}, a, () => resetPlayState());
+	return {
+		game: "level-failed",
+		ui
+	};
+}
+function renderFailedFrame(ctx, ui, w, h) {
+	if (!ui) return;
+	ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
+	ctx.fillRect(0, 0, w, h);
+	drawTitle(ctx, "Level Failed!", ui.cx, ui.titleY, ui.scale);
+	drawButton(ctx, ui.restart.btn, ui.restart.state);
+	drawButton(ctx, ui.quit.btn, ui.quit.state);
+}
+//#endregion
+export { handleFailedFrame, renderFailedFrame };
+
+//# sourceMappingURL=failed.mjs.map

package/dist/failed.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"failed.mjs","names":[],"sources":["../src/failed.ts"],"sourcesContent":["import type { Button                } from \"@starweb-libs/ui/types.js\";\nimport type { Audio                 } from \"@starweb-libs/audio/audio.js\";\nimport { getPointer                 } from \"@starweb-libs/engine/input/pointer.js\";\nimport { getLayout, drawTitle       } from \"@starweb-libs/ui/layout.js\";\nimport { getButtonState, drawButton } from \"@starweb-libs/ui/button.js\";\nimport type { FailedAction, FailedFrame, FailedMenuState } from \"./types.ts\";\nimport { transition                                      } from \"./transition.ts\";\n\nexport function handleFailedFrame(\n  w: number, h: number, a: Audio,\n  resetPlayState: () => void\n): FailedFrame {\n  const { scale, gap, cx, cy, btnW, btnH } = getLayout(w, h);\n  const totalH  = btnH * 2 + gap;\n  const firstY  = cy - totalH / 2;\n  const titleY = firstY - btnH * 0.5 - gap * 2;\n\n  const restartBtn: Button = { x: cx - btnW/2, y: firstY,                                 w: btnW, h: btnH, label: \"Restart\" };\n  const quitBtn: Button = { x: cx - btnW/2, y: firstY + btnH + gap, w: btnW, h: btnH, label: \"Quit\" };\n\n  const restart = { btn: restartBtn, state: getButtonState(restartBtn, getPointer()) };\n  const quit    = { btn: quitBtn,    state: getButtonState(quitBtn, getPointer())    };\n\n  let action: FailedAction = null;\n  if (restart.state.clicked) action = \"restart\";\n  if (quit.state.clicked)    action = \"quit\";\n\n  const ui = { cx, scale, titleY, restart, quit, action };\n\n  if (ui.action === \"quit\")    return transition({ game: \"menu-title\", ui: null }, a);\n  if (ui.action === \"restart\") return transition(\n    { game: \"level-playing\", ui: null },\n    a,\n    () => resetPlayState()\n  );\n  return { game: \"level-failed\", ui };\n}\n\nexport function renderFailedFrame(\n  ctx: CanvasRenderingContext2D,\n  ui: FailedMenuState | null,\n  w: number, h: number\n): void {\n  if (!ui) return;\n\n  ctx.fillStyle = \"rgba(0, 0, 0, 0.6)\";\n  ctx.fillRect(0, 0, w, h);\n  drawTitle(ctx, \"Level Failed!\", ui.cx, ui.titleY, ui.scale);\n  drawButton(ctx, ui.restart.btn, ui.restart.state);\n  drawButton(ctx, ui.quit.btn, ui.quit.state);\n}\n"],"mappings":";;;;;AAQA,SAAgB,kBACd,GAAW,GAAW,GACtB,gBACa;CACb,MAAM,EAAE,OAAO,KAAK,IAAI,IAAI,MAAM,SAAS,UAAU,GAAG,CAAC;CAEzD,MAAM,SAAU,MADA,OAAO,IAAI,OACG;CAC9B,MAAM,SAAS,SAAS,OAAO,KAAM,MAAM;CAE3C,MAAM,aAAqB;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG;EAAwC,GAAG;EAAM,GAAG;EAAM,OAAO;CAAU;CAC3H,MAAM,UAAkB;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG,SAAS,OAAO;EAAK,GAAG;EAAM,GAAG;EAAM,OAAO;CAAO;CAElG,MAAM,UAAU;EAAE,KAAK;EAAY,OAAO,eAAe,YAAY,WAAW,CAAC;CAAE;CACnF,MAAM,OAAU;EAAE,KAAK;EAAY,OAAO,eAAe,SAAS,WAAW,CAAC;CAAK;CAEnF,IAAI,SAAuB;CAC3B,IAAI,QAAQ,MAAM,SAAS,SAAS;CACpC,IAAI,KAAK,MAAM,SAAY,SAAS;CAEpC,MAAM,KAAK;EAAE;EAAI;EAAO;EAAQ;EAAS;EAAM;CAAO;CAEtD,IAAI,GAAG,WAAW,QAAW,OAAO,WAAW;EAAE,MAAM;EAAc,IAAI;CAAK,GAAG,CAAC;CAClF,IAAI,GAAG,WAAW,WAAW,OAAO,WAClC;EAAE,MAAM;EAAiB,IAAI;CAAK,GAClC,SACM,eAAe,CACvB;CACA,OAAO;EAAE,MAAM;EAAgB;CAAG;AACpC;AAEA,SAAgB,kBACd,KACA,IACA,GAAW,GACL;CACN,IAAI,CAAC,IAAI;CAET,IAAI,YAAY;CAChB,IAAI,SAAS,GAAG,GAAG,GAAG,CAAC;CACvB,UAAU,KAAK,iBAAiB,GAAG,IAAI,GAAG,QAAQ,GAAG,KAAK;CAC1D,WAAW,KAAK,GAAG,QAAQ,KAAK,GAAG,QAAQ,KAAK;CAChD,WAAW,KAAK,GAAG,KAAK,KAAK,GAAG,KAAK,KAAK;AAC5C"}

package/dist/levels.d.mts

@@ -0,0 +1,10 @@
+import { LevelSelectState, LevelsFrame } from "./types.mjs";
+import { Audio } from "@starweb-libs/audio/audio.js";
+//#region src/levels.d.ts
+declare function handleLevelFrame(w: number, h: number, a: Audio, levels: {
+  name?: string;
+}[], selectLevel: (i: number) => void): LevelsFrame;
+declare function renderLevelFrame(ctx: CanvasRenderingContext2D, ui: LevelSelectState | null): void;
+//#endregion
+export { handleLevelFrame, renderLevelFrame };
+//# sourceMappingURL=levels.d.mts.map

package/dist/levels.mjs

@@ -0,0 +1,76 @@
+import { transition } from "./transition.mjs";
+import { getPointer } from "@starweb-libs/engine/input/pointer.js";
+import { drawTitle, getLayout } from "@starweb-libs/ui/layout.js";
+import { drawButton, getButtonState } from "@starweb-libs/ui/button.js";
+//#region src/levels.ts
+function handleLevelFrame(w, h, a, levels, selectLevel) {
+	const { scale, gap, cx, cy, btnW, btnH } = getLayout(w, h);
+	const titleY = scale * .15;
+	const cols = 3;
+	const cellW = btnH * 3;
+	const gridW = cellW * cols + gap * (cols - 1);
+	const gridH = btnH * 3 + gap * 2;
+	const gridX = cx - gridW / 2;
+	const gridY = cy - gridH / 2;
+	let clickedIndex = null;
+	const levelEntries = Array.from({ length: Math.min(levels.length, 9) }, (_, i) => {
+		const col = i % cols;
+		const row = Math.floor(i / cols);
+		const btn = {
+			x: gridX + col * (cellW + gap),
+			y: gridY + row * (btnH + gap),
+			w: cellW,
+			h: btnH,
+			label: levels[i]?.name ?? `Level ${i + 1}`
+		};
+		const state = getButtonState(btn, getPointer());
+		if (state.clicked) clickedIndex = i;
+		return {
+			btn,
+			state
+		};
+	});
+	const backBtn = {
+		x: cx - btnW / 2,
+		y: h - btnH - gap * 2,
+		w: btnW,
+		h: btnH,
+		label: "Back"
+	};
+	const ui = {
+		cx,
+		scale,
+		titleY,
+		levels: levelEntries,
+		back: {
+			btn: backBtn,
+			state: getButtonState(backBtn, getPointer())
+		},
+		clickedIndex
+	};
+	if (ui.back.state.clicked) return transition({
+		game: "menu-title",
+		ui: null
+	}, a);
+	if (ui.clickedIndex !== null) {
+		const index = ui.clickedIndex;
+		return transition({
+			game: "level-playing",
+			ui: null
+		}, a, () => selectLevel(index));
+	}
+	return {
+		game: "menu-levels",
+		ui
+	};
+}
+function renderLevelFrame(ctx, ui) {
+	if (!ui) return;
+	drawTitle(ctx, "Select Level", ui.cx, ui.titleY, ui.scale);
+	for (const entry of ui.levels) drawButton(ctx, entry.btn, entry.state);
+	drawButton(ctx, ui.back.btn, ui.back.state);
+}
+//#endregion
+export { handleLevelFrame, renderLevelFrame };
+
+//# sourceMappingURL=levels.mjs.map

package/dist/levels.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"levels.mjs","names":[],"sources":["../src/levels.ts"],"sourcesContent":["import type { Button                } from \"@starweb-libs/ui/types.js\";\nimport type { Audio                 } from \"@starweb-libs/audio/audio.js\";\nimport { getPointer                 } from \"@starweb-libs/engine/input/pointer.js\";\nimport { getLayout, drawTitle       } from \"@starweb-libs/ui/layout.js\";\nimport { getButtonState, drawButton } from \"@starweb-libs/ui/button.js\";\nimport type { LevelSelectState, LevelsFrame } from \"./types.ts\";\nimport { transition                         } from \"./transition.ts\";\n\nexport function handleLevelFrame(\n  w: number, h: number, a: Audio,\n  levels: { name?: string }[],\n  selectLevel: (i: number) => void,\n): LevelsFrame {\n  const { scale, gap, cx, cy, btnW, btnH } = getLayout(w, h);\n  const titleY = scale * 0.15;\n\n  const cols  = 3;\n  const cellW = btnH * 3;\n  const gridW = cellW * cols + gap * (cols - 1);\n  const gridH = btnH * 3 + gap * 2;\n  const gridX = cx - gridW / 2;\n  const gridY = cy - gridH / 2;\n\n  let clickedIndex: number | null = null;\n  const levelEntries = Array.from({ length: Math.min(levels.length, 9) }, (_, i) => {\n    const col = i % cols;\n    const row = Math.floor(i / cols);\n    const btn: Button = {\n      x: gridX + col * (cellW + gap),\n      y: gridY + row * (btnH + gap),\n      w: cellW, h: btnH,\n      label: levels[i]?.name ?? `Level ${i + 1}`,\n    };\n    const state = getButtonState(btn, getPointer());\n    if (state.clicked) clickedIndex = i;\n    return { btn, state };\n  });\n\n  const backBtn: Button = { x: cx - btnW/2, y: h - btnH - gap*2, w: btnW, h: btnH, label: \"Back\" };\n  const back = { btn: backBtn, state: getButtonState(backBtn, getPointer()) };\n\n  const ui = { cx, scale, titleY, levels: levelEntries, back, clickedIndex };\n\n  if (ui.back.state.clicked) return transition({ game: \"menu-title\", ui: null }, a);\n  if (ui.clickedIndex !== null) {\n    const index = ui.clickedIndex;\n    return transition(\n      { game: \"level-playing\", ui: null },\n      a,\n      () => selectLevel(index)\n    );\n  }\n  return { game: \"menu-levels\", ui };\n}\n\nexport function renderLevelFrame(\n  ctx: CanvasRenderingContext2D,\n  ui: LevelSelectState | null\n): void {\n  if (!ui) return;\n  drawTitle(ctx, \"Select Level\", ui.cx, ui.titleY, ui.scale);\n  for (const entry of ui.levels) drawButton(ctx, entry.btn, entry.state);\n  drawButton(ctx, ui.back.btn, ui.back.state);\n}\n"],"mappings":";;;;;AAQA,SAAgB,iBACd,GAAW,GAAW,GACtB,QACA,aACa;CACb,MAAM,EAAE,OAAO,KAAK,IAAI,IAAI,MAAM,SAAS,UAAU,GAAG,CAAC;CACzD,MAAM,SAAS,QAAQ;CAEvB,MAAM,OAAQ;CACd,MAAM,QAAQ,OAAO;CACrB,MAAM,QAAQ,QAAQ,OAAO,OAAO,OAAO;CAC3C,MAAM,QAAQ,OAAO,IAAI,MAAM;CAC/B,MAAM,QAAQ,KAAK,QAAQ;CAC3B,MAAM,QAAQ,KAAK,QAAQ;CAE3B,IAAI,eAA8B;CAClC,MAAM,eAAe,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,OAAO,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM;EAChF,MAAM,MAAM,IAAI;EAChB,MAAM,MAAM,KAAK,MAAM,IAAI,IAAI;EAC/B,MAAM,MAAc;GAClB,GAAG,QAAQ,OAAO,QAAQ;GAC1B,GAAG,QAAQ,OAAO,OAAO;GACzB,GAAG;GAAO,GAAG;GACb,OAAO,OAAO,EAAE,EAAE,QAAQ,SAAS,IAAI;EACzC;EACA,MAAM,QAAQ,eAAe,KAAK,WAAW,CAAC;EAC9C,IAAI,MAAM,SAAS,eAAe;EAClC,OAAO;GAAE;GAAK;EAAM;CACtB,CAAC;CAED,MAAM,UAAkB;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG,IAAI,OAAO,MAAI;EAAG,GAAG;EAAM,GAAG;EAAM,OAAO;CAAO;CAG/F,MAAM,KAAK;EAAE;EAAI;EAAO;EAAQ,QAAQ;EAAc,MAAA;GAFvC,KAAK;GAAS,OAAO,eAAe,SAAS,WAAW,CAAC;EAEf;EAAG;CAAa;CAEzE,IAAI,GAAG,KAAK,MAAM,SAAS,OAAO,WAAW;EAAE,MAAM;EAAc,IAAI;CAAK,GAAG,CAAC;CAChF,IAAI,GAAG,iBAAiB,MAAM;EAC5B,MAAM,QAAQ,GAAG;EACjB,OAAO,WACL;GAAE,MAAM;GAAiB,IAAI;EAAK,GAClC,SACM,YAAY,KAAK,CACzB;CACF;CACA,OAAO;EAAE,MAAM;EAAe;CAAG;AACnC;AAEA,SAAgB,iBACd,KACA,IACM;CACN,IAAI,CAAC,IAAI;CACT,UAAU,KAAK,gBAAgB,GAAG,IAAI,GAAG,QAAQ,GAAG,KAAK;CACzD,KAAK,MAAM,SAAS,GAAG,QAAQ,WAAW,KAAK,MAAM,KAAK,MAAM,KAAK;CACrE,WAAW,KAAK,GAAG,KAAK,KAAK,GAAG,KAAK,KAAK;AAC5C"}

package/dist/pause.d.mts

@@ -0,0 +1,8 @@
+import { PauseFrame, PauseMenuState } from "./types.mjs";
+import { Audio } from "@starweb-libs/audio/audio.js";
+//#region src/pause.d.ts
+declare function handlePauseFrame(w: number, h: number, a: Audio, resetPlayState: () => void): PauseFrame;
+declare function renderPauseFrame(ctx: CanvasRenderingContext2D, ui: PauseMenuState | null, w: number, h: number): void;
+//#endregion
+export { handlePauseFrame, renderPauseFrame };
+//# sourceMappingURL=pause.d.mts.map

package/dist/pause.mjs

@@ -0,0 +1,85 @@
+import { transition } from "./transition.mjs";
+import { getPointer } from "@starweb-libs/engine/input/pointer.js";
+import { drawTitle, getLayout } from "@starweb-libs/ui/layout.js";
+import { drawButton, getButtonState } from "@starweb-libs/ui/button.js";
+//#region src/pause.ts
+function handlePauseFrame(w, h, a, resetPlayState) {
+	const { scale, gap, cx, cy, btnW, btnH } = getLayout(w, h);
+	const firstY = cy - (btnH * 3 + gap * 2) / 2;
+	const titleY = firstY - btnH * .5 - gap * 2;
+	const resumeBtn = {
+		x: cx - btnW / 2,
+		y: firstY,
+		w: btnW,
+		h: btnH,
+		label: "Resume"
+	};
+	const restartBtn = {
+		x: cx - btnW / 2,
+		y: firstY + (btnH + gap),
+		w: btnW,
+		h: btnH,
+		label: "Restart"
+	};
+	const quitBtn = {
+		x: cx - btnW / 2,
+		y: firstY + (btnH + gap) * 2,
+		w: btnW,
+		h: btnH,
+		label: "Quit"
+	};
+	const resume = {
+		btn: resumeBtn,
+		state: getButtonState(resumeBtn, getPointer())
+	};
+	const restart = {
+		btn: restartBtn,
+		state: getButtonState(restartBtn, getPointer())
+	};
+	const quit = {
+		btn: quitBtn,
+		state: getButtonState(quitBtn, getPointer())
+	};
+	let action = null;
+	if (resume.state.clicked) action = "resume";
+	if (restart.state.clicked) action = "restart";
+	if (quit.state.clicked) action = "quit";
+	const ui = {
+		cx,
+		scale,
+		titleY,
+		resume,
+		restart,
+		quit,
+		action
+	};
+	if (ui.action === "resume") return transition({
+		game: "level-playing",
+		ui: null
+	}, a);
+	if (ui.action === "quit") return transition({
+		game: "menu-title",
+		ui: null
+	}, a);
+	if (ui.action === "restart") return transition({
+		game: "level-playing",
+		ui: null
+	}, a, () => resetPlayState());
+	return {
+		game: "level-paused",
+		ui
+	};
+}
+function renderPauseFrame(ctx, ui, w, h) {
+	if (!ui) return;
+	ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
+	ctx.fillRect(0, 0, w, h);
+	drawTitle(ctx, "Paused", ui.cx, ui.titleY, ui.scale);
+	drawButton(ctx, ui.resume.btn, ui.resume.state);
+	drawButton(ctx, ui.restart.btn, ui.restart.state);
+	drawButton(ctx, ui.quit.btn, ui.quit.state);
+}
+//#endregion
+export { handlePauseFrame, renderPauseFrame };
+
+//# sourceMappingURL=pause.mjs.map

package/dist/pause.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pause.mjs","names":[],"sources":["../src/pause.ts"],"sourcesContent":["import type { Audio                   } from \"@starweb-libs/audio/audio.js\";\nimport { getPointer                   } from \"@starweb-libs/engine/input/pointer.js\";\nimport { getLayout, drawTitle         } from \"@starweb-libs/ui/layout.js\";\nimport { getButtonState, drawButton   } from \"@starweb-libs/ui/button.js\";\nimport type { PauseAction, PauseFrame, PauseMenuState } from \"./types.ts\";\nimport { transition                                   } from \"./transition.ts\";\n\nexport function handlePauseFrame(\n  w: number, h: number, a: Audio,\n  resetPlayState: () => void\n): PauseFrame {\n  const { scale, gap, cx, cy, btnW, btnH } = getLayout(w, h);\n  const totalH = btnH * 3 + gap * 2;\n  const firstY = cy - totalH / 2;\n  const titleY = firstY - btnH * 0.5 - gap * 2;\n\n  const resumeBtn  = { x: cx - btnW/2, y: firstY,                    w: btnW, h: btnH, label: \"Resume\"  };\n  const restartBtn = { x: cx - btnW/2, y: firstY + (btnH + gap),     w: btnW, h: btnH, label: \"Restart\" };\n  const quitBtn    = { x: cx - btnW/2, y: firstY + (btnH + gap) * 2, w: btnW, h: btnH, label: \"Quit\"    };\n\n  const resume  = { btn: resumeBtn,  state: getButtonState(resumeBtn,  getPointer()) };\n  const restart = { btn: restartBtn, state: getButtonState(restartBtn, getPointer()) };\n  const quit    = { btn: quitBtn,    state: getButtonState(quitBtn,    getPointer()) };\n\n  let action: PauseAction = null;\n  if (resume.state.clicked)  action = \"resume\";\n  if (restart.state.clicked) action = \"restart\";\n  if (quit.state.clicked)    action = \"quit\";\n\n  const ui = { cx, scale, titleY, resume, restart, quit, action };\n\n  if (ui.action === \"resume\")  return transition({ game: \"level-playing\", ui: null }, a);\n  if (ui.action === \"quit\")    return transition({ game: \"menu-title\",    ui: null }, a);\n  if (ui.action === \"restart\") return transition(\n    { game: \"level-playing\", ui: null },\n    a,\n    () => resetPlayState()\n  );\n  return { game: \"level-paused\", ui };\n}\n\nexport function renderPauseFrame(\n  ctx: CanvasRenderingContext2D,\n  ui: PauseMenuState | null,\n  w: number, h: number,\n): void {\n  if (!ui) return;\n  ctx.fillStyle = \"rgba(0, 0, 0, 0.6)\";\n  ctx.fillRect(0, 0, w, h);\n  drawTitle(ctx, \"Paused\", ui.cx, ui.titleY, ui.scale);\n  drawButton(ctx, ui.resume.btn,  ui.resume.state);\n  drawButton(ctx, ui.restart.btn, ui.restart.state);\n  drawButton(ctx, ui.quit.btn,    ui.quit.state);\n}\n"],"mappings":";;;;;AAOA,SAAgB,iBACd,GAAW,GAAW,GACtB,gBACY;CACZ,MAAM,EAAE,OAAO,KAAK,IAAI,IAAI,MAAM,SAAS,UAAU,GAAG,CAAC;CAEzD,MAAM,SAAS,MADA,OAAO,IAAI,MAAM,KACH;CAC7B,MAAM,SAAS,SAAS,OAAO,KAAM,MAAM;CAE3C,MAAM,YAAa;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG;EAA2B,GAAG;EAAM,GAAG;EAAM,OAAO;CAAU;CACtG,MAAM,aAAa;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG,UAAU,OAAO;EAAU,GAAG;EAAM,GAAG;EAAM,OAAO;CAAU;CACtG,MAAM,UAAa;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG,UAAU,OAAO,OAAO;EAAG,GAAG;EAAM,GAAG;EAAM,OAAO;CAAU;CAEtG,MAAM,SAAU;EAAE,KAAK;EAAY,OAAO,eAAe,WAAY,WAAW,CAAC;CAAE;CACnF,MAAM,UAAU;EAAE,KAAK;EAAY,OAAO,eAAe,YAAY,WAAW,CAAC;CAAE;CACnF,MAAM,OAAU;EAAE,KAAK;EAAY,OAAO,eAAe,SAAY,WAAW,CAAC;CAAE;CAEnF,IAAI,SAAsB;CAC1B,IAAI,OAAO,MAAM,SAAU,SAAS;CACpC,IAAI,QAAQ,MAAM,SAAS,SAAS;CACpC,IAAI,KAAK,MAAM,SAAY,SAAS;CAEpC,MAAM,KAAK;EAAE;EAAI;EAAO;EAAQ;EAAQ;EAAS;EAAM;CAAO;CAE9D,IAAI,GAAG,WAAW,UAAW,OAAO,WAAW;EAAE,MAAM;EAAiB,IAAI;CAAK,GAAG,CAAC;CACrF,IAAI,GAAG,WAAW,QAAW,OAAO,WAAW;EAAE,MAAM;EAAiB,IAAI;CAAK,GAAG,CAAC;CACrF,IAAI,GAAG,WAAW,WAAW,OAAO,WAClC;EAAE,MAAM;EAAiB,IAAI;CAAK,GAClC,SACM,eAAe,CACvB;CACA,OAAO;EAAE,MAAM;EAAgB;CAAG;AACpC;AAEA,SAAgB,iBACd,KACA,IACA,GAAW,GACL;CACN,IAAI,CAAC,IAAI;CACT,IAAI,YAAY;CAChB,IAAI,SAAS,GAAG,GAAG,GAAG,CAAC;CACvB,UAAU,KAAK,UAAU,GAAG,IAAI,GAAG,QAAQ,GAAG,KAAK;CACnD,WAAW,KAAK,GAAG,OAAO,KAAM,GAAG,OAAO,KAAK;CAC/C,WAAW,KAAK,GAAG,QAAQ,KAAK,GAAG,QAAQ,KAAK;CAChD,WAAW,KAAK,GAAG,KAAK,KAAQ,GAAG,KAAK,KAAK;AAC/C"}

package/dist/settings.d.mts

@@ -0,0 +1,12 @@
+import { SettingsFrame, SettingsMenuState } from "./types.mjs";
+import { Audio } from "@starweb-libs/audio/audio.js";
+import { SliderState } from "@starweb-libs/ui/types.js";
+//#region src/settings.d.ts
+declare function handleSettingsFrame(w: number, h: number, volState: SliderState, a: Audio): {
+  frame: SettingsFrame;
+  volState: SliderState;
+};
+declare function renderSettingsFrame(ctx: CanvasRenderingContext2D, ui: SettingsMenuState | null): void;
+//#endregion
+export { handleSettingsFrame, renderSettingsFrame };
+//# sourceMappingURL=settings.d.mts.map

package/dist/settings.mjs

@@ -0,0 +1,75 @@
+import { transition } from "./transition.mjs";
+import { getPointer } from "@starweb-libs/engine/input/pointer.js";
+import { drawTitle, getLayout } from "@starweb-libs/ui/layout.js";
+import { drawButton, getButtonState } from "@starweb-libs/ui/button.js";
+import { drawSlider, updateSlider } from "@starweb-libs/ui/slider.js";
+//#region src/settings.ts
+function handleSettingsFrame(w, h, volState, a) {
+	const { scale, gap, cx, cy, btnW, btnH } = getLayout(w, h);
+	const titleY = scale * .15;
+	const muteBtn = {
+		x: cx - btnW / 2,
+		y: cy - btnH / 2,
+		w: btnW,
+		h: btnH,
+		label: a.muted ? "Unmute" : "Mute"
+	};
+	const backBtn = {
+		x: cx - btnW / 2,
+		y: h - btnH - gap * 2,
+		w: btnW,
+		h: btnH,
+		label: "Back"
+	};
+	const volSlider = {
+		x: cx - btnW / 2,
+		y: cy + btnH / 2 + gap,
+		w: btnW,
+		h: btnH,
+		label: "Volume"
+	};
+	const mute = {
+		btn: muteBtn,
+		state: getButtonState(muteBtn, getPointer())
+	};
+	const back = {
+		btn: backBtn,
+		state: getButtonState(backBtn, getPointer())
+	};
+	if (mute.state.clicked) a.setMuted(!a.muted);
+	volState = updateSlider(volSlider, volState, getPointer());
+	a.setVolume(volState.value);
+	const ui = {
+		cx,
+		scale,
+		titleY,
+		mute,
+		back,
+		vol: {
+			slider: volSlider,
+			state: volState
+		},
+		muted: a.muted
+	};
+	return {
+		frame: ui.back.state.clicked ? transition({
+			game: "menu-title",
+			ui: null
+		}, a) : {
+			game: "menu-settings",
+			ui
+		},
+		volState
+	};
+}
+function renderSettingsFrame(ctx, ui) {
+	if (!ui) return;
+	drawTitle(ctx, "Settings", ui.cx, ui.titleY, ui.scale);
+	drawButton(ctx, ui.mute.btn, ui.mute.state);
+	drawSlider(ctx, ui.vol.slider, ui.vol.state.value);
+	drawButton(ctx, ui.back.btn, ui.back.state);
+}
+//#endregion
+export { handleSettingsFrame, renderSettingsFrame };
+
+//# sourceMappingURL=settings.mjs.map

package/dist/settings.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.mjs","names":[],"sources":["../src/settings.ts"],"sourcesContent":["import type { Button, Slider, SliderState } from \"@starweb-libs/ui/types.js\";\nimport type { Audio                       } from \"@starweb-libs/audio/audio.js\";\nimport { getPointer                       } from \"@starweb-libs/engine/input/pointer.js\";\nimport { getLayout, drawTitle             } from \"@starweb-libs/ui/layout.js\";\nimport { getButtonState, drawButton       } from \"@starweb-libs/ui/button.js\";\nimport { updateSlider, drawSlider         } from \"@starweb-libs/ui/slider.js\";\nimport type { SettingsFrame, SettingsMenuState } from \"./types.ts\";\nimport { transition                            } from \"./transition.ts\";\n\nexport function handleSettingsFrame(\n  w: number, h: number, volState: SliderState, a: Audio,\n): { frame: SettingsFrame; volState: SliderState } {\n  const { scale, gap, cx, cy, btnW, btnH } = getLayout(w, h);\n  const titleY = scale * 0.15;\n\n  const muteBtn:   Button = { x: cx - btnW/2, y: cy - btnH/2,       w: btnW, h: btnH, label: a.muted ? \"Unmute\" : \"Mute\" };\n  const backBtn:   Button = { x: cx - btnW/2, y: h - btnH - gap*2,  w: btnW, h: btnH, label: \"Back\" };\n  const volSlider: Slider = { x: cx - btnW/2, y: cy + btnH/2 + gap, w: btnW, h: btnH, label: \"Volume\" };\n\n  const mute = { btn: muteBtn, state: getButtonState(muteBtn, getPointer()) };\n  const back = { btn: backBtn, state: getButtonState(backBtn, getPointer()) };\n\n  if (mute.state.clicked) a.setMuted(!a.muted);\n  volState = updateSlider(volSlider, volState, getPointer());\n  a.setVolume(volState.value);\n\n  const ui = { cx, scale, titleY, mute, back, vol: { slider: volSlider, state: volState }, muted: a.muted };\n  const frame: SettingsFrame = ui.back.state.clicked\n    ? transition({ game: \"menu-title\", ui: null }, a)\n    : { game: \"menu-settings\", ui };\n  return { frame, volState };\n}\n\nexport function renderSettingsFrame(\n  ctx: CanvasRenderingContext2D,\n  ui: SettingsMenuState | null\n): void {\n  if (!ui) return;\n  drawTitle(ctx, \"Settings\", ui.cx, ui.titleY, ui.scale);\n  drawButton(ctx, ui.mute.btn,   ui.mute.state);\n  drawSlider(ctx, ui.vol.slider, ui.vol.state.value);\n  drawButton(ctx, ui.back.btn,   ui.back.state);\n}\n"],"mappings":";;;;;;AASA,SAAgB,oBACd,GAAW,GAAW,UAAuB,GACI;CACjD,MAAM,EAAE,OAAO,KAAK,IAAI,IAAI,MAAM,SAAS,UAAU,GAAG,CAAC;CACzD,MAAM,SAAS,QAAQ;CAEvB,MAAM,UAAoB;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG,KAAK,OAAK;EAAS,GAAG;EAAM,GAAG;EAAM,OAAO,EAAE,QAAQ,WAAW;CAAO;CACvH,MAAM,UAAoB;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG,IAAI,OAAO,MAAI;EAAI,GAAG;EAAM,GAAG;EAAM,OAAO;CAAO;CAClG,MAAM,YAAoB;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG,KAAK,OAAK,IAAI;EAAK,GAAG;EAAM,GAAG;EAAM,OAAO;CAAS;CAEpG,MAAM,OAAO;EAAE,KAAK;EAAS,OAAO,eAAe,SAAS,WAAW,CAAC;CAAE;CAC1E,MAAM,OAAO;EAAE,KAAK;EAAS,OAAO,eAAe,SAAS,WAAW,CAAC;CAAE;CAE1E,IAAI,KAAK,MAAM,SAAS,EAAE,SAAS,CAAC,EAAE,KAAK;CAC3C,WAAW,aAAa,WAAW,UAAU,WAAW,CAAC;CACzD,EAAE,UAAU,SAAS,KAAK;CAE1B,MAAM,KAAK;EAAE;EAAI;EAAO;EAAQ;EAAM;EAAM,KAAK;GAAE,QAAQ;GAAW,OAAO;EAAS;EAAG,OAAO,EAAE;CAAM;CAIxG,OAAO;EAAE,OAHoB,GAAG,KAAK,MAAM,UACvC,WAAW;GAAE,MAAM;GAAc,IAAI;EAAK,GAAG,CAAC,IAC9C;GAAE,MAAM;GAAiB;EAAG;EAChB;CAAS;AAC3B;AAEA,SAAgB,oBACd,KACA,IACM;CACN,IAAI,CAAC,IAAI;CACT,UAAU,KAAK,YAAY,GAAG,IAAI,GAAG,QAAQ,GAAG,KAAK;CACrD,WAAW,KAAK,GAAG,KAAK,KAAO,GAAG,KAAK,KAAK;CAC5C,WAAW,KAAK,GAAG,IAAI,QAAQ,GAAG,IAAI,MAAM,KAAK;CACjD,WAAW,KAAK,GAAG,KAAK,KAAO,GAAG,KAAK,KAAK;AAC9C"}

package/dist/title.d.mts

@@ -0,0 +1,8 @@
+import { TitleFrame, TitleMenuState } from "./types.mjs";
+import { Audio } from "@starweb-libs/audio/audio.js";
+//#region src/title.d.ts
+declare function handleTitleFrame(w: number, h: number, a: Audio, levelCount: number, onStart?: () => void): TitleFrame;
+declare function renderTitleFrame(ctx: CanvasRenderingContext2D, ui: TitleMenuState | null, text: string, scaleFactor: number): void;
+//#endregion
+export { handleTitleFrame, renderTitleFrame };
+//# sourceMappingURL=title.d.mts.map

package/dist/title.mjs

@@ -0,0 +1,61 @@
+import { transition } from "./transition.mjs";
+import { getPointer } from "@starweb-libs/engine/input/pointer.js";
+import { drawTitle, getLayout } from "@starweb-libs/ui/layout.js";
+import { drawButton, getButtonState } from "@starweb-libs/ui/button.js";
+//#region src/title.ts
+function handleTitleFrame(w, h, a, levelCount, onStart) {
+	const { scale, gap, cx, cy, btnW, btnH } = getLayout(w, h);
+	const titleY = cy - btnH * 1.5 - gap * 2;
+	const startBtn = {
+		x: cx - btnW / 2,
+		y: cy - btnH / 2,
+		w: btnW,
+		h: btnH,
+		label: "START"
+	};
+	const settingsBtn = {
+		x: cx - btnW / 2,
+		y: cy + btnH / 2 + gap,
+		w: btnW,
+		h: btnH,
+		label: "SETTINGS"
+	};
+	const ui = {
+		cx,
+		scale,
+		titleY,
+		start: {
+			btn: startBtn,
+			state: getButtonState(startBtn, getPointer())
+		},
+		settings: {
+			btn: settingsBtn,
+			state: getButtonState(settingsBtn, getPointer())
+		}
+	};
+	if (ui.start.state.clicked) return transition(levelCount > 1 ? {
+		game: "menu-levels",
+		ui: null
+	} : {
+		game: "level-playing",
+		ui: null
+	}, a, onStart);
+	if (ui.settings.state.clicked) return transition({
+		game: "menu-settings",
+		ui: null
+	}, a);
+	return {
+		game: "menu-title",
+		ui
+	};
+}
+function renderTitleFrame(ctx, ui, text, scaleFactor) {
+	if (!ui) return;
+	drawTitle(ctx, text, ui.cx, ui.titleY, ui.scale, scaleFactor);
+	drawButton(ctx, ui.start.btn, ui.start.state);
+	drawButton(ctx, ui.settings.btn, ui.settings.state);
+}
+//#endregion
+export { handleTitleFrame, renderTitleFrame };
+
+//# sourceMappingURL=title.mjs.map

package/dist/title.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.mjs","names":[],"sources":["../src/title.ts"],"sourcesContent":["import type { Button                } from \"@starweb-libs/ui/types.js\";\nimport type { Audio                 } from \"@starweb-libs/audio/audio.js\";\nimport { getPointer                 } from \"@starweb-libs/engine/input/pointer.js\";\nimport { getLayout, drawTitle       } from \"@starweb-libs/ui/layout.js\";\nimport { getButtonState, drawButton } from \"@starweb-libs/ui/button.js\";\nimport type { TitleFrame, TitleMenuState } from \"./types.ts\";\nimport { transition                      } from \"./transition.ts\";\n\nexport function handleTitleFrame(\n  w: number, h: number, a: Audio,\n  levelCount: number,\n  onStart?: () => void,\n): TitleFrame {\n  const { scale, gap, cx, cy, btnW, btnH } = getLayout(w, h);\n  const titleY = cy - btnH * 1.5 - gap * 2;\n\n  const startBtn:    Button = { x: cx - btnW/2, y: cy - btnH/2,       w: btnW, h: btnH, label: \"START\"    };\n  const settingsBtn: Button = { x: cx - btnW/2, y: cy + btnH/2 + gap, w: btnW, h: btnH, label: \"SETTINGS\" };\n\n  const ui = {\n    cx, scale, titleY,\n    start:    { btn: startBtn,    state: getButtonState(startBtn, getPointer())    },\n    settings: { btn: settingsBtn, state: getButtonState(settingsBtn, getPointer()) },\n  };\n\n  if (ui.start.state.clicked) return transition(\n    levelCount > 1\n      ? { game: \"menu-levels\", ui: null }\n      : { game: \"level-playing\", ui: null },\n    a,\n    onStart,\n  );\n  if (ui.settings.state.clicked) return transition({ game: \"menu-settings\", ui: null }, a);\n  return { game: \"menu-title\", ui };\n}\n\nexport function renderTitleFrame(\n  ctx: CanvasRenderingContext2D,\n  ui: TitleMenuState | null,\n  text: string,\n  scaleFactor: number,\n): void {\n  if (!ui) return;\n  drawTitle(ctx, text, ui.cx, ui.titleY, ui.scale, scaleFactor);\n  drawButton(ctx, ui.start.btn,    ui.start.state);\n  drawButton(ctx, ui.settings.btn, ui.settings.state);\n}\n"],"mappings":";;;;;AAQA,SAAgB,iBACd,GAAW,GAAW,GACtB,YACA,SACY;CACZ,MAAM,EAAE,OAAO,KAAK,IAAI,IAAI,MAAM,SAAS,UAAU,GAAG,CAAC;CACzD,MAAM,SAAS,KAAK,OAAO,MAAM,MAAM;CAEvC,MAAM,WAAsB;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG,KAAK,OAAK;EAAS,GAAG;EAAM,GAAG;EAAM,OAAO;CAAW;CACxG,MAAM,cAAsB;EAAE,GAAG,KAAK,OAAK;EAAG,GAAG,KAAK,OAAK,IAAI;EAAK,GAAG;EAAM,GAAG;EAAM,OAAO;CAAW;CAExG,MAAM,KAAK;EACT;EAAI;EAAO;EACX,OAAU;GAAE,KAAK;GAAa,OAAO,eAAe,UAAU,WAAW,CAAC;EAAK;EAC/E,UAAU;GAAE,KAAK;GAAa,OAAO,eAAe,aAAa,WAAW,CAAC;EAAE;CACjF;CAEA,IAAI,GAAG,MAAM,MAAM,SAAS,OAAO,WACjC,aAAa,IACT;EAAE,MAAM;EAAe,IAAI;CAAK,IAChC;EAAE,MAAM;EAAiB,IAAI;CAAK,GACtC,GACA,OACF;CACA,IAAI,GAAG,SAAS,MAAM,SAAS,OAAO,WAAW;EAAE,MAAM;EAAiB,IAAI;CAAK,GAAG,CAAC;CACvF,OAAO;EAAE,MAAM;EAAc;CAAG;AAClC;AAEA,SAAgB,iBACd,KACA,IACA,MACA,aACM;CACN,IAAI,CAAC,IAAI;CACT,UAAU,KAAK,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,OAAO,WAAW;CAC5D,WAAW,KAAK,GAAG,MAAM,KAAQ,GAAG,MAAM,KAAK;CAC/C,WAAW,KAAK,GAAG,SAAS,KAAK,GAAG,SAAS,KAAK;AACpD"}

package/dist/transition.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"transition.mjs","names":[],"sources":["../src/transition.ts"],"sourcesContent":["import { flushPointer    } from \"@starweb-libs/engine/input/pointer.js\";\nimport { flushKeyboard   } from \"@starweb-libs/engine/input/keyboard.js\";\nimport type { Audio      } from \"@starweb-libs/audio/audio.js\";\n\nexport function transition<T>(frame: T, audio: Audio, fn?: () => void): T {\n  audio.playSound(\"button\");\n  fn?.();\n  flushPointer();\n  flushKeyboard();\n  return frame;\n}\n"],"mappings":";;;AAIA,SAAgB,WAAc,OAAU,OAAc,IAAoB;CACxE,MAAM,UAAU,QAAQ;CACxB,KAAK;CACL,aAAa;CACb,cAAc;CACd,OAAO;AACT"}
+{"version":3,"file":"transition.mjs","names":[],"sources":["../src/transition.ts"],"sourcesContent":["import type { Audio    } from \"@starweb-libs/audio/audio.js\";\nimport { flushPointer  } from \"@starweb-libs/engine/input/pointer.js\";\nimport { flushKeyboard } from \"@starweb-libs/engine/input/keyboard.js\";\n\nexport function transition<T>(frame: T, audio: Audio, fn?: () => void): T {\n  audio.playSound(\"button\");\n  fn?.();\n  flushPointer();\n  flushKeyboard();\n  return frame;\n}\n"],"mappings":";;;AAIA,SAAgB,WAAc,OAAU,OAAc,IAAoB;CACxE,MAAM,UAAU,QAAQ;CACxB,KAAK;CACL,aAAa;CACb,cAAc;CACd,OAAO;AACT"}

package/dist/types.d.mts

@@ -0,0 +1,100 @@
+import { ButtonEntry, MenuLayout, SliderEntry } from "@starweb-libs/ui/types.js";
+//#region src/types.d.ts
+interface TitleMenuState extends MenuLayout {
+  start: ButtonEntry;
+  settings: ButtonEntry;
+}
+type TitleFrame = {
+  game: "menu-levels";
+  ui: null;
+} | {
+  game: "level-playing";
+  ui: null;
+} | {
+  game: "menu-settings";
+  ui: null;
+} | {
+  game: "menu-title";
+  ui: TitleMenuState;
+};
+type SettingsFrame = {
+  game: "menu-title";
+  ui: null;
+} | {
+  game: "menu-settings";
+  ui: SettingsMenuState;
+};
+interface SettingsMenuState extends MenuLayout {
+  mute: ButtonEntry;
+  back: ButtonEntry;
+  vol: SliderEntry;
+  muted: boolean;
+}
+type LevelsFrame = {
+  game: "menu-title";
+  ui: null;
+} | {
+  game: "level-playing";
+  ui: null;
+} | {
+  game: "menu-levels";
+  ui: LevelSelectState;
+};
+interface LevelSelectState extends MenuLayout {
+  levels: ButtonEntry[];
+  back: ButtonEntry;
+  clickedIndex: number | null;
+}
+type PauseFrame = {
+  game: "level-playing";
+  ui: null;
+} | {
+  game: "menu-title";
+  ui: null;
+} | {
+  game: "level-paused";
+  ui: PauseMenuState;
+};
+type PauseAction = "resume" | "restart" | "quit" | null;
+interface PauseMenuState extends MenuLayout {
+  resume: ButtonEntry;
+  restart: ButtonEntry;
+  quit: ButtonEntry;
+  action: PauseAction;
+}
+type FailedFrame = {
+  game: "menu-title";
+  ui: null;
+} | {
+  game: "level-playing";
+  ui: null;
+} | {
+  game: "level-failed";
+  ui: FailedMenuState;
+};
+type FailedAction = "restart" | "quit" | null;
+interface FailedMenuState extends MenuLayout {
+  restart: ButtonEntry;
+  quit: ButtonEntry;
+  action: FailedAction;
+}
+type CompleteFrame = {
+  game: "menu-title";
+  ui: null;
+} | {
+  game: "level-playing";
+  ui: null;
+} | {
+  game: "level-complete";
+  ui: CompleteMenuState;
+};
+type CompleteAction = "next" | "restart" | "quit" | null;
+interface CompleteMenuState extends MenuLayout {
+  restart: ButtonEntry;
+  next: ButtonEntry | null;
+  quit: ButtonEntry;
+  action: CompleteAction;
+}
+//#endregion
+export { CompleteAction, CompleteFrame, CompleteMenuState, FailedAction, FailedFrame, FailedMenuState, LevelSelectState, LevelsFrame, PauseAction, PauseFrame, PauseMenuState, SettingsFrame, SettingsMenuState, TitleFrame, TitleMenuState };
+//# sourceMappingURL=types.d.mts.map

package/dist/types.mjs

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@starweb-libs/menus",
   "description": "Composable canvas menu screens for browser games",
   "author": "Mason L'Etoile",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,10 +39,13 @@
   },
   "files": ["dist"],
   "exports": {
-    "./transition.js": {
-      "types": "./dist/transition.d.mts",
-      "@starweb-libs/source": "./src/transition.ts",
-      "import": "./dist/transition.mjs"
-    }
+    "./types.js":      { "types": "./dist/types.d.mts",      "@starweb-libs/source": "./src/types.ts",      "import": "./dist/types.mjs" },
+    "./transition.js": { "types": "./dist/transition.d.mts", "@starweb-libs/source": "./src/transition.ts", "import": "./dist/transition.mjs" },
+    "./title.js":      { "types": "./dist/title.d.mts",      "@starweb-libs/source": "./src/title.ts",      "import": "./dist/title.mjs" },
+    "./settings.js":   { "types": "./dist/settings.d.mts",   "@starweb-libs/source": "./src/settings.ts",   "import": "./dist/settings.mjs" },
+    "./levels.js":     { "types": "./dist/levels.d.mts",     "@starweb-libs/source": "./src/levels.ts",     "import": "./dist/levels.mjs" },
+    "./pause.js":      { "types": "./dist/pause.d.mts",      "@starweb-libs/source": "./src/pause.ts",      "import": "./dist/pause.mjs" },
+    "./complete.js":   { "types": "./dist/complete.d.mts",   "@starweb-libs/source": "./src/complete.ts",   "import": "./dist/complete.mjs" },
+    "./failed.js":     { "types": "./dist/failed.d.mts",     "@starweb-libs/source": "./src/failed.ts",     "import": "./dist/failed.mjs" }
   }
 }