@wasm-gaming/engine-specs 0.2.3 → 0.2.4

package/demo/components/drop-area.html

@@ -4,10 +4,15 @@
     @drop.prevent="onDrop">
     <strong>{{ prompt }}</strong>
     <p :class.file-selected="selectedName">{{ selectedName ? 'Selected: ' + selectedName : assetHint }}</p>
-    <label class="picker">
-        {{ selectedName ? 'Change File' : buttonText }}
-        <input type="file" :accept="accept" @change="onPick" />
-    </label>
+    <div class="picker-actions">
+        <label class="picker">
+            {{ selectedName ? 'Change File' : buttonText }}
+            <input type="file" :accept="accept" @change="onPick" />
+        </label>
+        <button type="button" :if="selectedName" class="remove-btn" @click.stop="onRemove">
+            Remove
+        </button>
+    </div>
 </section>
 
 <script :setup="{
@@ -30,7 +35,12 @@
   };
 
   const emitFile = (file) => {
-    if (!file) return;
+    if (!file) {
+      selectedName = "";
+      $emit("remove");
+      $emit("select", null);
+      return;
+    }
     selectedName = file.name;
     $emit("select", file);
   };
@@ -45,6 +55,12 @@
     const file = extractFile(event);
     if (file) emitFile(file);
   };
+
+  const onRemove = () => {
+    selectedName = "";
+    $emit("remove");
+    $emit("select", null);
+  };
 </script>
 
 <style>
@@ -94,9 +110,15 @@
         font-weight: 600;
     }
 
-    .picker {
+    .picker-actions {
         display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
         margin-top: 1rem;
+    }
+
+    .picker {
+        display: inline-flex;
         background: var(--demo-picker-bg, rgba(255, 255, 255, 0.5));
         color: var(--demo-picker-text, var(--demo-text, #0f172a));
         border: 1px solid var(--demo-picker-border, rgba(255, 255, 255, 0.6));
@@ -121,4 +143,28 @@
     .picker input {
         display: none;
     }
+
+    .remove-btn {
+        display: inline-flex;
+        align-items: center;
+        background: rgba(239, 68, 68, 0.15);
+        color: #ef4444;
+        border: 1px solid rgba(239, 68, 68, 0.4);
+        border-radius: var(--demo-subpanel-radius, 8px);
+        padding: 0.5rem 0.8rem;
+        cursor: pointer;
+        text-transform: uppercase;
+        font-weight: 600;
+        font-size: 0.85rem;
+        letter-spacing: 0.05em;
+        transition: all 0.2s;
+        backdrop-filter: blur(var(--demo-subpanel-blur, 12px));
+        -webkit-backdrop-filter: blur(var(--demo-subpanel-blur, 12px));
+    }
+
+    .remove-btn:hover {
+        background: rgba(239, 68, 68, 0.3);
+        border-color: rgba(239, 68, 68, 0.8);
+        color: #dc2626;
+    }
 </style>

package/demo/components/launcher.html

@@ -12,6 +12,7 @@
       :button-text="'Pick BIOS'"
       :file-name="biosFile?.name"
       @select="onBiosSelect"
+      @remove="onBiosRemove"
     />
     <CDropArea
       :prompt="'Drop ROM File'"
@@ -20,6 +21,7 @@
       :button-text="'Pick ROM'"
       :file-name="romFile?.name"
       @select="onRomSelect"
+      @remove="onRomRemove"
     />
   </div>
 
@@ -37,6 +39,8 @@
   onLaunchFiles,
   onSaveBios,
   onSaveRom,
+  onRemoveBios,
+  onRemoveRom,
   initialRomFile = null,
   initialBiosFile = null,
   romAccept,
@@ -44,7 +48,7 @@
   biosAccept,
   biosAssetHint = 'optional BIOS firmware file',
   requiresBIOS = false,
-  showBIOS = true,
+  showBIOS = false,
 }">
   let romFile = initialRomFile;
   let biosFile = initialBiosFile;
@@ -77,7 +81,10 @@
 
   const onRomSelect = (arg) => {
     const file = extractFile(arg);
-    if (!file) return;
+    if (!file) {
+      onRomRemove();
+      return;
+    }
     romFile = file;
     updateStatus();
     onSaveRom?.(file);
@@ -85,12 +92,27 @@
 
   const onBiosSelect = (arg) => {
     const file = extractFile(arg);
-    if (!file) return;
+    if (!file) {
+      onBiosRemove();
+      return;
+    }
     biosFile = file;
     updateStatus();
     onSaveBios?.(file);
   };
 
+  const onRomRemove = () => {
+    romFile = null;
+    updateStatus();
+    onRemoveRom?.();
+  };
+
+  const onBiosRemove = () => {
+    biosFile = null;
+    updateStatus();
+    onRemoveBios?.();
+  };
+
   const onLaunch = async () => {
     if (!canLaunch) {
       updateStatus();

package/demo/demo.css

@@ -93,7 +93,7 @@ body {
   letter-spacing: 0.02em;
 }
 
-body::after {
+main:not(.running)::after {
   content: "";
   position: fixed;
   inset: 0;

package/demo/demo.js

@@ -1,6 +1,6 @@
 import { getSdk } from "./sdk.js";
 import { checksumAlgorithms, computeChecksums } from "./checksums.js";
-import { loadStoredAsset, saveStoredAsset } from "./storage.js";
+import { loadStoredAsset, saveStoredAsset, clearStoredAsset } from "./storage.js";
 import { $, $create, Component79 } from "https://jgermade.github.io/jq79/jq79.js";
 
 // Safe URL parameter resolution from script URL & page URL
@@ -34,10 +34,9 @@ if (sdk.manifest?.name) {
 const romSpec = sdk.manifest?.assets?.find((a) => a.key === "rom") ?? sdk.manifest?.assets?.[0];
 const biosSpec = sdk.manifest?.assets?.find((a) => a.key === "bios") ?? sdk.manifest?.assets?.[1];
 
-// Determine BIOS visibility and requirement rules
-const hasBiosSpec = Boolean(biosSpec);
-const showBIOS = biosParam !== "false" && (hasBiosSpec || biosParam === "required" || biosParam === "true" || biosParam === "optional");
-const requiresBIOS = biosParam === "required" || (biosParam !== "optional" && Boolean(biosSpec?.required));
+// Determine BIOS visibility and requirement rules (Default: showBIOS = false)
+const showBIOS = biosParam === "true" || biosParam === "optional" || biosParam === "required";
+const requiresBIOS = biosParam === "required";
 
 // Load previously stored ROM & BIOS from OPFS if available
 const [storedRom, storedBios] = await Promise.all([
@@ -138,6 +137,8 @@ CLauncher
     initialBiosFile: storedBios,
     onSaveRom: (file) => saveStoredAsset("rom", file),
     onSaveBios: (file) => saveStoredAsset("bios", file),
+    onRemoveRom: () => clearStoredAsset("rom"),
+    onRemoveBios: () => clearStoredAsset("bios"),
     onLaunchFiles: bootWithFiles,
     romAccept,
     romAssetHint,

package/demo/demo.sdk.js

@@ -21,7 +21,7 @@ export function createDummySdk() {
 				mountPath: "/bios.bin",
 				required: false,
 				accept: [".bin", ".rom", ".sys"],
-				description: "Optional system BIOS firmware file.",
+				description: "System BIOS firmware file.",
 			},
 		],
 		input: "keyboard-default",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wasm-gaming/engine-specs",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "The wasm-gaming engine contract: the single shared interface every WASM game/emulator engine and the host app conform to. TypeScript types + JSON Schema + a Zod runtime validator.",
   "type": "module",
   "types": "./dist/index.d.ts",