Step 6.3 Complete — Generic Contract 5.3 Surface Discovery

- src/validation.js: add validateSurfaceCatalog() implementing Contract
  5.3 §§31.2-31.5 normative validation order (validate individuals ->
  discard invalids -> evaluate primary invariant against working set)
- src/host.js: emit xzbt:5.3 advisory (§6.5); store contractMinor;
  add surfaces=[] to resetView(); parse surfaces in refresh(true)
- src/ui.js: add buildSurfaces() for generic descriptor-driven surface
  display; integrate renderedSurfaces tracking into render()
- public/index.html: subtitle updated to Contract 5.2/5.3; add
  surfaces-section with surfaces div
- public/style.css: add .surface, .surface-badge, .surface-meta styles
- tests/surface-validation.test.js: 45 new tests covering all Part 8
  malformed surface cases, lifecycle, registry refresh, 5.2 regression
- docs/reference/XZBT-NGN-Step6.3-Surface-Discovery-Verification.md

Test results: 88/88 pass (43 pre-existing + 45 new)
Genericity scan: zero matches in src/, public/, server/
git diff --check: clean

public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>XZBT-NGN Exhibit Engine</title><link rel="stylesheet" href="/public/style.css"></head>
 <body>
-  <header><h1>XZBT-NGN Exhibit Engine</h1><p>Contract 5.2 · One exhibit at a time</p></header>
+  <header><h1>XZBT-NGN Exhibit Engine</h1><p>Contract 5.2/5.3 · One exhibit at a time</p></header>
   <main>
     <section><h2>Connection</h2>
       <form id="connection"><label for="exhibit-url">Exhibit URL (same origin)</label><div class="connection-row"><input id="exhibit-url" placeholder="/public/exhibits/example/index.html" required><button>Load exhibit</button><button id="reconnect" type="button" disabled>Reconnect</button><button id="disconnect" type="button" disabled>Disconnect</button></div></form>
@@ -16,6 +16,10 @@
       <p>Reported values are authoritative. New values are drafts; select Set or Invoke to submit. Rediscovery resets drafts.</p>
       <div id="catalog">Connect an exhibit to discover its controls.</div>
     </section>
+    <section id="surfaces-section"><h2>Presentation surfaces <span id="surface-count"></span></h2>
+      <p>Presentation surfaces are optional Contract 5.3 views advertised by the connected exhibit. Discovery is descriptor-driven; opening surfaces is a later phase.</p>
+      <div id="surfaces"><p>No presentation surfaces advertised.</p></div>
+    </section>
     <section><h2>State and metadata</h2><button id="refresh" disabled>Refresh state</button>
       <details><summary>Session and exhibit metadata</summary><pre id="metadata">No negotiated session.</pre></details>
       <details><summary>Current persistent state</summary><p>Last reported exhibit values. This host view may be uncertain while resynchronizing.</p><pre id="state">{}</pre></details>

public/style.css

@@ -24,3 +24,9 @@ button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px s
 .target { padding: 16px 12px; }
 .target code { overflow-wrap: anywhere; }
 @media (max-width: 600px) { header, main { padding: 12px; } section { padding: 12px; } .connection-row input { flex-basis: 100%; } }
+.surface { border-top: 1px solid #354658; padding: 14px 12px; }
+.surface h3 { margin: 0 0 2px; font-size: 15px; }
+.surface code { display: block; font-size: 12px; color: #7eb8d8; overflow-wrap: anywhere; margin-bottom: 4px; }
+.surface-badge { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 3px; background: #233444; margin-right: 6px; }
+.surface-badge.primary { background: #1a4a2e; color: #80d6ad; }
+.surface-meta { font-size: 13px; color: #b7c4d1; margin: 4px 0 0; }