@wasm-gaming/engine-specs 0.2.7 → 0.3.0

package/demo/components/call-log.html

@@ -0,0 +1,33 @@
+<!--
+  Every contract call the page makes, newest first — so the chain is readable while
+  it runs, and `sdk.mount(stage).start()` is visibly one expression.
+-->
+<div class="log">
+  <div :each="(entry, index) in entries" :class.head="index === 0">{{ entry }}</div>
+</div>
+
+<script :setup="{
+  entries = [],
+}">
+</script>
+
+<style>
+  .log {
+    font-family: var(--mono, monospace);
+    font-size: 0.75rem;
+    color: var(--muted, #64748b);
+    max-height: 240px;
+    overflow-y: auto;
+  }
+
+  .log div {
+    padding: 0.2rem 0;
+    border-top: 1px solid var(--border, #e2e8f0);
+    word-break: break-all;
+  }
+
+  .log div.head {
+    color: var(--text, #0f172a);
+    border-top: 0;
+  }
+</style>

package/demo/components/engine-header.html

@@ -0,0 +1,78 @@
+<!--
+  The engine's identity, read off the class before anything is constructed.
+
+  This is what replaced the manifest: `id`, `version`, `name` and `description` are
+  static members of the SDK constructor, so a launcher can list engines without
+  booting one.
+-->
+<header>
+  <div>
+    <h1>{{ name }} <code>{{ id }}</code></h1>
+    <p>{{ description }}</p>
+  </div>
+  <div class="right">
+    <span class="pill">v{{ version }}</span>
+    <a class="pill link" :href="referenceHref">API reference</a>
+  </div>
+</header>
+
+<script :setup="{
+  name,
+  id,
+  version,
+  description = '',
+  referenceHref = '../',
+}">
+</script>
+
+<style>
+  header {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--border, #e2e8f0);
+    background: var(--panel, #fff);
+  }
+
+  h1 {
+    margin: 0;
+    font-size: 1.25rem;
+    letter-spacing: 0.02em;
+    color: var(--text, #0f172a);
+  }
+
+  code {
+    font-family: var(--mono, monospace);
+    font-size: 0.75em;
+    color: var(--muted, #64748b);
+  }
+
+  p {
+    margin: 0.25rem 0 0;
+    color: var(--muted, #64748b);
+  }
+
+  .right {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .pill {
+    border: 1px solid var(--accent, #ff007f);
+    border-radius: 2px;
+    padding: 0.25rem 0.6rem;
+    font-family: var(--mono, monospace);
+    font-size: 0.78rem;
+    color: var(--accent, #ff007f);
+    background: rgb(255 0 127 / 0.08);
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .link {
+    text-decoration: none;
+  }
+</style>

package/demo/components/lifecycle-bar.html

@@ -0,0 +1,69 @@
+<!--
+  The lifecycle verbs, labelled with the call each one makes.
+
+  `pause` and `resume` are drawn differently on purpose: they are not in the
+  contract. This engine adds them, and a host driving a different engine may not
+  assume they exist.
+-->
+<div class="bar">
+  <button @click="$emit('start')" :disabled="running">start()</button>
+  <button @click="$emit('restart')" :disabled="!running">restart()</button>
+  <button class="extra" @click="$emit('pause')" :disabled="!running">pause()</button>
+  <button class="extra" @click="$emit('resume')" :disabled="!running">resume()</button>
+  <button @click="$emit('destroy')" :disabled="!running">destroy()</button>
+</div>
+<p class="hint"><span class="extra-dot"></span> beyond the contract — this engine's own members</p>
+
+<script :setup="{
+  running = false,
+}">
+</script>
+
+<style>
+  .bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+
+  button {
+    font-family: var(--mono, monospace);
+    font-size: 0.8rem;
+    padding: 0.4rem 0.7rem;
+    border: 1px solid var(--border, #e2e8f0);
+    border-radius: 3px;
+    background: transparent;
+    color: var(--text, #0f172a);
+    cursor: pointer;
+  }
+
+  button:hover:not(:disabled) {
+    border-color: var(--accent, #ff007f);
+    color: var(--accent, #ff007f);
+  }
+
+  button:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+
+  button.extra,
+  .extra-dot {
+    border-style: dashed;
+  }
+
+  .hint {
+    margin: 0.75rem 0 0;
+    font-size: 0.8rem;
+    color: var(--muted, #64748b);
+  }
+
+  .extra-dot {
+    display: inline-block;
+    width: 0.7rem;
+    height: 0.7rem;
+    border: 1px dashed var(--muted, #64748b);
+    border-radius: 2px;
+    vertical-align: -1px;
+  }
+</style>

package/demo/components/property-table.html

@@ -0,0 +1,119 @@
+<!--
+  What the four getters return, rendered as-is.
+
+  This component is the argument for the descriptor: it is written once and paints
+  `config()`, `options()`, `assets()` and `storage()` alike, for any engine, without
+  knowing a single key name. Labels, defaults, allowed values and whether a property
+  can change on a running engine all travel with the value.
+-->
+<div class="tables">
+  <section class="props" :each="(table, tableIndex) in tables">
+    <h3>{{ table.title }}<span class="paren">()</span></h3>
+    <table>
+      <tr :each="(row, index) in table.rows">
+        <th>
+          {{ row.key }}
+          <span :if="row.live" class="live" title="Can be changed on a running engine">live</span>
+        </th>
+        <td class="value" :class.unset="row.unset">{{ row.value }}</td>
+        <td class="meta">
+          <span :if="row.description">{{ row.description }}</span>
+          <span :if="row.default" class="aside">default: {{ row.default }}</span>
+          <span :if="row.enum" class="aside">one of: {{ row.enum }}</span>
+          <span :if="row.allowedTypes" class="aside">accepts: {{ row.allowedTypes }}</span>
+        </td>
+      </tr>
+    </table>
+  </section>
+</div>
+
+<script :setup="{
+  tables = [],
+}">
+</script>
+
+<style>
+  .tables {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 1rem;
+  }
+
+  .props {
+    background: var(--panel, #fff);
+    border: 1px solid var(--border, #e2e8f0);
+    border-radius: 4px;
+    padding: 1rem;
+  }
+
+  h3 {
+    margin: 0 0 0.75rem;
+    font-size: 0.78rem;
+    font-family: var(--mono, monospace);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--accent, #ff007f);
+  }
+
+  .paren {
+    color: var(--muted, #64748b);
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.82rem;
+  }
+
+  th,
+  td {
+    text-align: left;
+    vertical-align: top;
+    padding: 0.4rem 0.5rem 0.4rem 0;
+    border-top: 1px solid var(--border, #e2e8f0);
+  }
+
+  tr:first-child th,
+  tr:first-child td {
+    border-top: 0;
+  }
+
+  th {
+    font-family: var(--mono, monospace);
+    font-weight: 600;
+    white-space: nowrap;
+    color: var(--text, #0f172a);
+  }
+
+  .value {
+    font-family: var(--mono, monospace);
+    color: var(--accent, #ff007f);
+  }
+
+  .value.unset {
+    color: var(--muted, #64748b);
+    opacity: 0.6;
+  }
+
+  .meta {
+    color: var(--muted, #64748b);
+    font-size: 0.78rem;
+  }
+
+  .aside {
+    display: block;
+    font-family: var(--mono, monospace);
+    opacity: 0.75;
+  }
+
+  .live {
+    display: inline-block;
+    margin-left: 0.4rem;
+    padding: 0 0.3rem;
+    font-size: 0.62rem;
+    text-transform: uppercase;
+    border: 1px solid var(--accent, #ff007f);
+    border-radius: 2px;
+    color: var(--accent, #ff007f);
+  }
+</style>

package/demo/demo.css

@@ -1,142 +1,38 @@
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
+/*
+  Page shell only: the palette and the reset.
 
-:root {
-  /* Colors & Palette */
-  --demo-bg-a: #d8b4fe;
-  --demo-bg-b: #7dd3fc;
-  --demo-bg-gradient: linear-gradient(145deg, var(--demo-bg-a) 0%, var(--demo-bg-b) 100%);
-  --demo-bg-radial-1: rgba(255, 0, 127, 0.08);
-  --demo-bg-radial-2: rgba(2, 132, 199, 0.12);
-
-  --demo-text: #0f172a;
-  --demo-muted: #475569;
-
-  --demo-accent: #ff007f;
-  --demo-accent-rgb: 255, 0, 127;
-  --demo-accent-glow: 0 0 15px rgba(var(--demo-accent-rgb), 0.3), 0 0 30px rgba(var(--demo-accent-rgb), 0.15);
-
-  --demo-accent2: #0284c7;
-  --demo-accent2-rgb: 2, 132, 199;
-  --demo-accent2-glow: 0 0 15px rgba(var(--demo-accent2-rgb), 0.3), 0 0 30px rgba(var(--demo-accent2-rgb), 0.15);
-
-  /* Glassmorphism & Panel System */
-  --demo-panel-bg: rgba(255, 255, 255, 0.25);
-  --demo-panel-border: rgba(255, 255, 255, 0.4);
-  --demo-panel-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
-  --demo-panel-blur: 24px;
-  --demo-panel-radius: 12px;
-
-  --demo-subpanel-bg: rgba(255, 255, 255, 0.35);
-  --demo-subpanel-border: rgba(255, 255, 255, 0.3);
-  --demo-subpanel-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
-  --demo-subpanel-blur: 12px;
-  --demo-subpanel-radius: 8px;
-
-  /* Drop Zone */
-  --demo-drop-bg: rgba(255, 255, 255, 0.15);
-  --demo-drop-border: rgba(255, 255, 255, 0.6);
-  --demo-drop-active-bg: rgba(255, 255, 255, 0.4);
-  --demo-drop-active-border: var(--demo-accent2);
-  --demo-drop-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
-
-  /* Button / File Picker */
-  --demo-picker-bg: rgba(255, 255, 255, 0.5);
-  --demo-picker-hover-bg: rgba(255, 255, 255, 0.8);
-  --demo-picker-border: rgba(255, 255, 255, 0.6);
-  --demo-picker-hover-border: rgba(255, 255, 255, 0.9);
-  --demo-picker-text: var(--demo-text);
-
-  /* Metadata Pills */
-  --demo-pill-bg: rgba(var(--demo-accent-rgb), 0.1);
-  --demo-pill-border: var(--demo-accent);
-  --demo-pill-text: var(--demo-accent);
-  --demo-pill-shadow: inset 0 0 5px rgba(var(--demo-accent-rgb), 0.3);
-
-  /* File Info Overlay */
-  --demo-file-info-bg: rgba(255, 255, 255, 0.7);
-  --demo-file-info-border: rgba(255, 255, 255, 0.8);
-  --demo-file-info-blur: 10px;
-
-  /* ESC Menu Styling */
-  --demo-esc-bg: rgba(0, 0, 0, 0.45);
-  --demo-esc-card-bg: rgba(15, 23, 42, 0.92);
-  --demo-esc-text: #f8fafc;
+  Layout and every panel's look live in the components — `app.html` owns the grid,
+  each child owns its own. These custom properties cross into them, so a component
+  inherits the theme without knowing this file exists.
+*/
 
-  /* Typography & Fonts */
-  --demo-font-sans: "Outfit", system-ui, -apple-system, sans-serif;
-  --demo-font-mono: "Space Mono", monospace;
+:root {
+  --bg: #f8fafc;
+  --panel: #ffffff;
+  --border: #e2e8f0;
+  --text: #0f172a;
+  --muted: #64748b;
+  --accent: #ff007f;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+}
 
-  /* Legacy Aliases for Backward Compatibility */
-  --bg-a: var(--demo-bg-a);
-  --bg-b: var(--demo-bg-b);
-  --text: var(--demo-text);
-  --muted: var(--demo-muted);
-  --accent: var(--demo-accent);
-  --accent-glow: var(--demo-accent-glow);
-  --accent2: var(--demo-accent2);
-  --accent2-glow: var(--demo-accent2-glow);
-  --font-sans: var(--demo-font-sans);
-  --font-mono: var(--demo-font-mono);
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #060910;
+    --panel: #0f172a;
+    --border: #1e293b;
+    --text: #e2e8f0;
+    --muted: #94a3b8;
+  }
 }
 
 * {
   box-sizing: border-box;
 }
 
-html,
 body {
-  width: 100%;
-  height: 100%;
   margin: 0;
-  color: var(--demo-text);
-  background:
-    radial-gradient(circle at 15% 50%, var(--demo-bg-radial-1), transparent 45%),
-    radial-gradient(circle at 85% 30%, var(--demo-bg-radial-2), transparent 50%),
-    var(--demo-bg-gradient);
-  background-attachment: fixed;
-  font-family: var(--demo-font-sans);
-  letter-spacing: 0.02em;
-}
-
-main:not(.running)::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background: linear-gradient(to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0) 50%,
-      rgba(0, 0, 0, 0.02) 50%,
-      rgba(0, 0, 0, 0.02));
-  background-size: 100% 4px;
-  pointer-events: none;
-  z-index: 9999;
-}
-
-main {
-  min-height: 100vh;
-  min-height: 100dvh;
-  display: grid;
-  place-items: center;
-  padding: 2rem;
-  position: relative;
-  z-index: 1;
+  background: var(--bg);
+  color: var(--text);
+  font: 15px/1.5 system-ui, -apple-system, sans-serif;
 }
-
-main.running {
-  padding: 0;
-  background: black;
-}
-
-.runtime {
-  position: relative;
-  aspect-ratio: 5 / 4;
-  overflow: hidden;
-}
-
-.runtime canvas {
-  aspect-ratio: 5 / 4;
-  width: min(100vw, calc(100vh * 5 / 4));
-  height: auto;
-  max-height: 100vh;
-  display: block;
-}