Add ROM upload, local table library, engine bump, and UX/responsiveness fixes

- Bump @valknar/vpinball-wasm to 0.3.2 (PinMAME ROM support, MsgBox fix)
- Add optional PinMAME ROM .zip upload alongside .vpx tables
- Persist uploaded tables/ROMs in IndexedDB so users don't have to
  re-upload on later visits, with a library list on the landing page
- Fix Insert Coin key mismatch with the engine's real coin-door gating
  (now bound to 4, matching the shared table scripts) and surface it
  in the controls legend and "Tap to Start" hint
- Make the landing page, staging panel, and in-game HUD responsive for
  portrait phone widths; drop the landscape hint since portrait plays fine
- Replace the separate STATS HUD toggle with an FPS row in the info panel

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01N9JmzRBZenapVkFWjw9jmG

lib/pinball/keyBindings.ts

@@ -4,8 +4,9 @@ export interface KeyBinding {
 }
 
 export const KEY_BINDINGS: KeyBinding[] = [
+  { keys: "4", action: "Insert coin" },
+  { keys: "1", action: "Start game" },
+  { keys: "Enter", action: "Launch ball" },
   { keys: "Left Shift", action: "Left flipper" },
   { keys: "Right Shift", action: "Right flipper" },
-  { keys: "Enter", action: "Plunger" },
-  { keys: "1", action: "Start game" },
 ];

lib/pinball/rom.ts

@@ -0,0 +1,7 @@
+// PinMAME identifies a ROM by its short "game name" (e.g. "hvymetal"), not
+// the table's display title — see loadRom() in @valknar/vpinball-wasm. ROM
+// zips are conventionally distributed named after that game name, so it's
+// derived from the uploaded zip's filename rather than asked for separately.
+export function romGameNameFromFileName(fileName: string): string {
+  return fileName.replace(/\.zip$/i, "").trim().toLowerCase();
+}

lib/pinball/tableLibrary.ts

@@ -0,0 +1,72 @@
+// Persists uploaded tables (and their optional ROM zip) in the browser via
+// IndexedDB, so a returning visitor can replay a table without re-uploading
+// it. Blobs are stored as-is (File objects are Blobs) rather than converted
+// to ArrayBuffer up front — IndexedDB clones Blobs without loading their
+// bytes into JS memory, so a large library doesn't sit resident until a
+// specific entry is actually played.
+
+const DB_NAME = "vpinball-library";
+const DB_VERSION = 1;
+const STORE = "tables";
+
+export interface LibraryEntry {
+  id: string;
+  name: string;
+  sizeBytes: number;
+  addedAt: number;
+  vpxBlob: Blob;
+  romFileName?: string;
+  romBlob?: Blob;
+}
+
+export type LibraryEntryMeta = Omit<LibraryEntry, "vpxBlob" | "romBlob">;
+
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    request.onupgradeneeded = () => {
+      request.result.createObjectStore(STORE, { keyPath: "id" });
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+async function withStore<T>(mode: IDBTransactionMode, fn: (store: IDBObjectStore) => IDBRequest<T>): Promise<T> {
+  const db = await openDb();
+  try {
+    return await new Promise<T>((resolve, reject) => {
+      const tx = db.transaction(STORE, mode);
+      const request = fn(tx.objectStore(STORE));
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  } finally {
+    db.close();
+  }
+}
+
+export async function saveToLibrary(entry: LibraryEntry): Promise<void> {
+  await withStore("readwrite", (store) => store.put(entry));
+}
+
+export async function listLibrary(): Promise<LibraryEntryMeta[]> {
+  const entries = await withStore<LibraryEntry[]>("readonly", (store) => store.getAll());
+  return entries
+    .map((entry): LibraryEntryMeta => ({
+      id: entry.id,
+      name: entry.name,
+      sizeBytes: entry.sizeBytes,
+      addedAt: entry.addedAt,
+      romFileName: entry.romFileName,
+    }))
+    .sort((a, b) => b.addedAt - a.addedAt);
+}
+
+export async function getLibraryEntry(id: string): Promise<LibraryEntry | undefined> {
+  return withStore<LibraryEntry | undefined>("readonly", (store) => store.get(id));
+}
+
+export async function deleteFromLibrary(id: string): Promise<void> {
+  await withStore("readwrite", (store) => store.delete(id));
+}

lib/pinball/tableSelectionStore.ts

@@ -1,15 +1,19 @@
-// In-memory handoff for a user-selected .vpx File between the landing page
+// In-memory handoff for the user's table choice between the landing page
 // and /play — a File can't survive a URL-based navigation, and this is a
 // single-shot value read once on mount, so module-level state is sufficient
 // (no need for anything heavier than a plain variable).
-let pendingFile: File | null = null;
+export type PendingSelection =
+  | { kind: "upload"; vpxFile: File; romFile?: File; saveToLibrary: boolean }
+  | { kind: "library"; id: string };
 
-export function setPendingTable(file: File): void {
-  pendingFile = file;
+let pendingSelection: PendingSelection | null = null;
+
+export function setPendingTable(selection: PendingSelection): void {
+  pendingSelection = selection;
 }
 
-export function takePendingTable(): File | null {
-  const file = pendingFile;
-  pendingFile = null;
-  return file;
+export function takePendingTable(): PendingSelection | null {
+  const selection = pendingSelection;
+  pendingSelection = null;
+  return selection;
 }

lib/pinball/types.ts

@@ -2,4 +2,6 @@ export interface TableInfo {
   name: string;
   sizeBytes: number;
   isDemo: boolean;
+  /** Filename of the attached PinMAME ROM zip, if any. */
+  romFileName?: string;
 }

lib/pinball/usePinballInstance.ts

@@ -33,9 +33,15 @@ export interface UsePinballInstanceResult {
   start: () => void;
 }
 
+export interface RomSelection {
+  gameName: string;
+  romData: ArrayBuffer;
+}
+
 export function usePinballInstance(
   canvasRef: React.RefObject<HTMLCanvasElement | null>,
   tableData: ArrayBuffer | undefined,
+  rom: RomSelection | undefined,
 ): UsePinballInstanceResult {
   // Computed once at mount (not inside the effect below) so the WebGL2-
   // unsupported case is derived initial state rather than a setState call
@@ -73,6 +79,18 @@ export function usePinballInstance(
           instance.dispose();
           return;
         }
+        if (rom) {
+          try {
+            // Must run before start() — Controller.Run() reads the ROM
+            // file synchronously at table-init time. A bad/mismatched ROM
+            // zip fails cleanly inside the engine rather than here, so this
+            // is defensive against loadRom() itself throwing (e.g. a
+            // corrupt zip), not something expected to fire routinely.
+            instance.loadRom(rom.gameName, rom.romData);
+          } catch (err) {
+            console.error("Failed to load ROM:", err);
+          }
+        }
         instanceRef.current = instance;
         setLoadTimeMs(performance.now() - startedAt);
         setStatus("ready");