pathways: walking mosaic navigator

Replace the scrolling facet-grid with a walkable maze. You start on a
random photo; every photo holds up to four paths (labels, keywords,
camera, lens ranked by count, library as fallback), one per cardinal
direction, each an ordered cycle. Arrow keys or hover-revealed buttons
lock the next photo of that path onto the grid in the direction moved;
visited photos form a panable mosaic with focus-jump on revisits.

Server: precomputes per-photo exits; adds /api/exits/:id and /api/random.
Client: zero-dependency rewrite — splash, hidden exits, drag-pan, pointer
capture, reduced-motion support.

1 files changed, 11 insertions, 28 deletions

diff --git a/public/index.html b/public/index.html
index e59101c..4059428 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,38 +3,21 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>pathways — photo viewer</title>
+  <meta name="color-scheme" content="dark">
+  <title>pathways</title>
   <link rel="stylesheet" href="/app.css">
 </head>
 <body>
-  <header class="mast">
+  <main id="stage">
+    <div id="world"></div>
+    <p id="hint">hover the current photo for its four paths · arrow keys walk · drag to pan</p>
+  </main>
+  <div id="splash">
     <h1>pathways<span class="dot">.</span></h1>
-    <p class="tag">a way through the library, along the things photos share.</p>
-    <nav id="modes" class="modes" aria-label="path type">
-      <button data-mode="label" class="on">labels</button>
-      <button data-mode="keyword">keywords</button>
-      <button data-mode="camera">cameras</button>
-      <button data-mode="lens">lenses</button>
-      <button data-mode="colour">colours</button>
-    </nav>
-    <p id="status" class="status"></p>
-  </header>
-
-  <main id="stream" class="stream"></main>
-
-  <div id="lightbox" class="lightbox" hidden>
-    <div class="lightbox-inner">
-      <img id="lightbox-img" alt="">
-      <div class="lightbox-side">
-        <h2 id="lightbox-title"></h2>
-        <p id="lightbox-date" class="dim"></p>
-        <div id="lightbox-conns" class="conns"></div>
-      </div>
-      <button id="lightbox-close" class="close" aria-label="close">×</button>
-    </div>
+    <p>Every photo holds four paths — one for each direction. Walk them, and the pictures lock into a mosaic behind you.</p>
+    <button id="start">start</button>
   </div>
-
-  <footer class="foot">pathways · built over the photoprism database · no tracking</footer>
-  <script src="/app.js" defer></script>
+  <div id="flash"></div>
+  <script src="/app.js"></script>
 </body>
 </html>