@bongos/core 1.18.0 → 1.18.18

package/public-landing/gate/space.js

@@ -0,0 +1,1826 @@
+/* ═══════════════════════════════════════════════════════════════════════
+   Cloud Bongos — "space" scene controller (tasks 1721, 1722)
+
+   The landing flow, top to bottom:
+     ENTRY   — every visit lands on the "type bongos" terminal, set in space.
+     SPACE   — typing bongos reveals the pannable sky of project circles
+               (size = builders, drifting around anchors). Hover for details;
+               a SHIFT tap searches what's in view; click empty sky to add one.
+     DOWNLOAD— clicking the Cloud Bongos orb zooms straight into its download
+               page (search + tiles, over the temple world) — no gate between.
+     DETAIL  — clicking any other orb opens a themed "story coming soon" page.
+     ESC     — rises from download/detail back to the circles.
+
+   No framework, no build step. Project data is INLINED (Caddy 404s *.json on
+   staging); swap in a registry by changing PROJECTS + loadProjects(). The
+   download scene + its drag physics live in the inline script in index.html;
+   this file talks to it via cb:show-download / cb:hide-download events.
+   ═══════════════════════════════════════════════════════════════════════ */
+(function () {
+  'use strict';
+
+  /* ─── project data ──────────────────────────────────────────────────────
+     type: 'self'   → dives into the download page (Cloud Bongos itself)
+           'link'   → a real, live instance from the platform's project
+                      catalog, loaded at boot by loadProjects() from
+                      /api/bongos/projects/featured; clicking opens the site.
+     The Cloud Bongos self-orb is the ONLY seeded entry — every other orb is a
+     genuinely-live project fetched from the catalog (task 1002260). No sample
+     fiction any more: an empty catalog simply means a sparser sky. */
+  var PROJECTS = [
+    { id: 'cloud-bongos', name: 'Cloud Bongos', type: 'self', builders: 24,
+      accent: '#f97316', preview: 'previews/cloud-bongos.jpg',
+      tagline: 'The AI-first build platform',
+      description: 'Building software is laying down a beat. AI agents claim tasks and ship the code; you set the direction and the gates.',
+      tags: ['platform', 'ai', 'build system', 'bongos'] }
+  ];
+
+  /* ─── tunables ─────────────────────────────────────────────────────────── */
+  var DEADZONE = 5;                 // px of movement before a press becomes a pan
+  var ZMIN = 0.22, ZMAX = 2.4;      // zoom clamp (ZMIN lowered task 1897 — pull way back for a wide overview + more sky to create in)
+  var R_BASE = 30, R_K = 11;        // radius = R_BASE + R_K*sqrt(builders)
+  var SPIRAL_STEP = 235;            // spacing of the golden-angle START scatter
+
+  /* ─── gravity ("living cluster") — real n-body physics ────────────────────
+     The orbs are planets/suns pulling on each other by their SIZE. Verified
+     stable + lively + bounded over a 60-min headless sim (scratchpad/sim.js).
+     TUNING — livelier → SWIRL↑ or THERMO_LO↑ · tighter cluster → CONTAIN_R↓ ·
+     stronger pull → G↑ · softer near-misses (fewer hard slings) → SOFTEN↑ ·
+     bouncier contacts → REST↑ (→1 = elastic). Mass = (r/R_REF)^3, so a big orb
+     pulls much harder than a small one — that is "gravity based on their size." */
+  var GRAV = {
+    R_REF: 50,        // mass = (radius / R_REF)^3
+    G: 5200,          // gravitational constant (px^3 / mass·s^2)
+    SOFTEN: 70,       // softening length (px) — tames close encounters, no singularities
+    SWIRL: 0.09,      // initial angular velocity of the whole field (rad/s) — low = gentle, un-chaotic start
+    SWIRL_JITTER: 0.15, // random spread on the initial velocities (0 = a clean disk)
+    REST: 0.92,       // restitution when two discs actually touch (rare)
+    CONTAIN_R: 520,   // soft-well radius (px) — gentle pull-back keeps it on screen
+    CONTAIN_K: 6.0,   // inward accel per px beyond CONTAIN_R
+    MAXV: 260,        // hard velocity cap (px/s) — last-resort safety
+    THERMO_LO: 0.55,  // KE may slosh freely down to this ×target before a gentle nudge up
+    THERMO_HI: 1.9,   // ...and up to this ×target before a nudge down (pure physics between)
+    THERMO_MAX: 0.01, // max per-step velocity nudge when outside the band
+    PHYS_HZ: 120      // physics steps per second (fixed timestep; render interpolates)
+  };
+
+  /* ─── space-time sheet — a blueprint grid that warps with gravity ──────────
+     A faint cyan grid drawn behind the orbs (own canvas, z1). Every grid vertex
+     is pulled toward each orb by a mass-weighted well — mass = (r/R_REF)^3, the
+     SAME law the n-body physics uses — so a big orb dents the sheet deeply, a
+     small one barely, and the dimples ride the live motion. Kept a whisper:
+     the warp is real but the ink is faint, and its alpha ramps with zoom so it
+     reads as a blueprint underlay that only truly shows when you lean in.
+     TUNING — deeper wells → DEPTH↑ · wider wells → WELL_R↑ · more visible →
+     the *_A_HI alphas↑ · denser grid → BASE_WORLD↓ · smoother curves → SEG↑. */
+  var GRID = {
+    ENABLED: true,
+    BASE_WORLD: 60,     // world px between minor grid lines (smaller = denser grid)
+    SEG: 10,            // samples per cell along a line (curve smoothness near a well)
+    MAJOR_EVERY: 4,     // every Nth line is a brighter "major" rule (blueprint read)
+    RGB: '158,202,248', // blueprint cyan-blue ink
+    MINOR_A_LO: 0.055, MINOR_A_HI: 0.150,  // minor-line alpha at ZMIN → ZMAX
+    MAJOR_A_LO: 0.110, MAJOR_A_HI: 0.270,  // major-line alpha at ZMIN → ZMAX
+    LINE_PX: 1,         // stroke width in screen px (a crisp hairline at any zoom)
+    // The well: a Gaussian-weighted pull toward each orb. Displacement per orb =
+    // (orb − point) · k · exp(−d²/2σ²), with σ = orb.r·WELL_R and k = DEPTH·(r/R_REF)².
+    // This VANISHES at the centre and far away and peaks near the rim — a smooth
+    // basin (C∞, no hard clamp → no creases, and for k<1 it can never fold over).
+    // Depth grows with orb size (∝ r², a legible stand-in for mass), so a big orb
+    // dents a wider, deeper region — reads as heavier. (Use it.m in render() for
+    // strict mass ∝ size³ gravity, at the cost of tiny orbs barely denting.)
+    WELL_R: 1.9,        // well scale σ = orb.r * WELL_R (world px) — bigger orb, wider dip
+    DEPTH: 0.20,        // pull coefficient (k = DEPTH·(r/R_REF)²); higher = deeper dips
+    CUT: 4.0,           // ignore a well past CUT × σ (Gaussian is negligible there; saves work)
+    MARGIN: 1.4,        // extra world coverage beyond the viewport, in cells
+    // Glow: the grid lines light up where the sheet is most pinched. Each segment
+    // is stroked a second time, additively, with an alpha that tracks how far its
+    // vertices were displaced — so a deep gravity well haloes the lines around it,
+    // and a shallow one barely does. Deliberately subtle (few builders today, so
+    // even the big orbs' dips are gentle); raise GLOW_MAX_A / lower GLOW_REF later
+    // as orbs grow. Set GLOW_MAX_A: 0 to switch the glow off entirely.
+    GLOW_RGB: '198,232,255', // brighter, whiter blueprint cyan for the glow
+    GLOW_MAX_A: 0.07,   // max ADDED alpha at full pinch (additive) — keep small = subtle
+    GLOW_REF: 40,       // world-px of displacement mapped to full glow (lower = glows sooner)
+    GLOW_POW: 1.5,      // >1 concentrates the glow into the most-pinched zones
+    GLOW_LEVELS: 8,     // alpha quantization buckets (keeps the stroke count low)
+    GLOW_WIDTH: 1.4,    // glow stroke width (screen px)
+    GLOW_BLUR: 2        // shadowBlur bloom (screen px); 0 = crisp (cheaper)
+  };
+
+  /* ─── element refs ─────────────────────────────────────────────────────── */
+  var space = document.getElementById('space');
+  var canvas = document.getElementById('space-canvas');
+  var gridCanvas = document.getElementById('space-grid');
+  var gctx = gridCanvas ? gridCanvas.getContext('2d') : null;
+  var gridDPR = 1;
+  var starfield = document.getElementById('starfield');
+  var hovercard = document.getElementById('hovercard');
+  var flash = document.getElementById('dive-flash');
+  var searchbar = document.getElementById('searchbar');
+  var searchInput = document.getElementById('search-input');
+  var searchCtxCount = document.getElementById('search-ctx-count');
+  var scrim = document.getElementById('create-scrim');
+  var createName = document.getElementById('create-name');
+  var createGo = document.getElementById('create-go');
+  var createCancel = document.getElementById('create-cancel');
+  var detail = document.getElementById('detail');
+  // entry gate (the relocated type-"bongos" terminal, now over the space sky)
+  var entryEl = document.getElementById('entry');
+  var eTyped = document.getElementById('typed'), eCaret = document.getElementById('caret'),
+      eHint = document.getElementById('hint'), eCli = document.getElementById('cli'),
+      eEnter = document.getElementById('enter');
+  // dive cinematic (task 1729): clicking the Cloud Bongos orb flies you from
+  // space, down through the clouds, into the Cloud Bongos world (download page)
+  var descent = document.getElementById('descent');
+  var DESCENT_MS = 2750;            // deep in the cloud (still zooming) → zoom-through crossfade
+  var diveLanded = false, descentTimer = null;
+  var prefersReduced = false;
+  try { prefersReduced = matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) {}
+
+  /* ─── host-aware brand (task 1746) ───────────────────────────────────────
+     ONE gate bundle serves all three domains; only location.hostname differs.
+     claudebongos.com / geminibongos.com are vanity DOORS: they mirror the
+     Cloud Bongos entry gate with just the wordmark + terminal word changed
+     (you still type "bongos"), and on enter they hand off to cloudbongos.com,
+     landing straight on the orbs via ?entered=1 (which cloudbongos.com honors
+     to skip its own entry). cloudbongos.com / staging / localhost keep the
+     default "cloud" behavior and reveal the orbs in place. Because it is one
+     bundle + a runtime switch, any later change to this gate shows up on all
+     three automatically — there is no forked copy to keep in sync. */
+  var CLOUDBONGOS_ORIGIN = 'https://cloudbongos.com';
+  function brandForHost(host) {
+    host = (host || '').toLowerCase();
+    // Redirect straight to the gate's SERVED path (/gate/), not the apex "/", so
+    // the ?entered=1 flag survives: the apex "/" -> "/gate/" 302 drops the query,
+    // which made a door visitor land on the entry gate and type "bongos" again
+    // (task 1977 sibling fix). /gate/ is served directly, so the flag reaches
+    // wantsDirectOrbs() and the orbs open straight away.
+    if (/(^|\.)claudebongos\.com$/.test(host)) return { word: 'claude', display: 'Claude', redirect: CLOUDBONGOS_ORIGIN + '/gate/?entered=1' };
+    if (/(^|\.)geminibongos\.com$/.test(host)) return { word: 'gemini', display: 'Gemini', redirect: CLOUDBONGOS_ORIGIN + '/gate/?entered=1' };
+    return { word: 'cloud', display: 'Cloud', redirect: null };
+  }
+  var BRAND = brandForHost(location.hostname);
+
+  // Swap the one brand word into the static markup the door visitor sees: the
+  // terminal prefix (`> claude`) and every "Cloud Bongos" wordmark, plus the
+  // tab title. The default bundle ships "cloud", so this is a no-op on
+  // cloudbongos.com and only rewrites on a door.
+  function applyBrand() {
+    if (BRAND.word === 'cloud') return;
+    if (eCli) { var c = eCli.querySelector('.c'); if (c) c.textContent = BRAND.word; }
+    var marks = document.querySelectorAll('.mark, .space-mark, .tv-mark');
+    for (var i = 0; i < marks.length; i++) {
+      var nodes = marks[i].childNodes;
+      for (var j = 0; j < nodes.length; j++) {
+        if (nodes[j].nodeType === 3 && /\bCloud\b/.test(nodes[j].nodeValue)) {
+          nodes[j].nodeValue = nodes[j].nodeValue.replace(/\bCloud\b/, BRAND.display);
+        }
+      }
+    }
+    try { document.title = BRAND.display + ' Bongos — landing gate'; } catch (_) {}
+  }
+  applyBrand();
+
+  // Did a door redirect us here asking to open the orbs straight away? Honored
+  // ONLY where we are not ourselves a door, so a door still shows its branded
+  // entry even if it somehow carries the flag.
+  function wantsDirectOrbs() {
+    if (BRAND.redirect) return false;
+    try { return new URLSearchParams(location.search).get('entered') === '1'; }
+    catch (_) { return /[?&]entered=1(?:&|$)/.test(location.search || ''); }
+  }
+  // view toggle + table directory (task 1731)
+  var vtCircles = document.getElementById('vt-circles');
+  var vtTable = document.getElementById('vt-table');
+  var tvBody = document.getElementById('tv-body');
+  var tvSearchInput = document.getElementById('tv-search-input');
+  var tvCount = document.getElementById('tv-count');
+  var tvCreate = document.getElementById('tv-create');
+
+  /* ─── view state ───────────────────────────────────────────────────────── */
+  var panX = 0, panY = 0, zoom = 1;
+  var saved = null;                 // pan/zoom snapshot captured at dive time
+  var W = innerWidth, H = innerHeight;
+  var items = [];                   // one per circle
+  var byId = {};
+  var searchOpen = false, createOpen = false, diving = false, entering = false;
+  var userTouched = false;          // has the user panned/zoomed? (stop auto-refit)
+  var createAt = { x: 0, y: 0 };
+  var browseView = 'space';          // which project view: 'space' (circles) | 'table'
+  var tvSort = { key: 'builders', dir: -1 };  // table sort: dir -1 desc, 1 asc
+
+  function radiusFor(builders) { return R_BASE + R_K * Math.sqrt(Math.max(1, builders)); }
+  function massFor(r) { return Math.pow(r / GRAV.R_REF, 3); }   // mass grows with size
+  function project(id) { return byId[id]; }
+  function anyOverlay() { return searchOpen || createOpen || signInOpen; }
+  function isSpace() { return document.body.classList.contains('view-space'); }
+
+  /* ─── build a circle ───────────────────────────────────────────────────── */
+  function makeCircle(proj, ax, ay) {
+    var r = radiusFor(proj.builders), d = r * 2;
+    var el = document.createElement('div');
+    el.className = 'circle' + (proj.type === 'self' ? ' is-self' : '');
+    el.dataset.id = proj.id;
+    el.style.left = ax + 'px';
+    el.style.top = ay + 'px';
+    el.style.width = d + 'px';
+    el.style.height = d + 'px';
+    el.style.setProperty('--acc', proj.accent);
+    el.style.setProperty('--glow', hexGlow(proj.accent));
+
+    var disc = document.createElement('div');
+    disc.className = 'disc';
+    el.appendChild(disc);
+
+    // the world lives INSIDE the orb — a peek revealed on hover (real instances
+    // that carry a preview image; samples stay their accent-coloured sphere).
+    if (proj.preview) {
+      var world = document.createElement('div');
+      world.className = 'disc-world';
+      world.style.backgroundImage = "url('" + proj.preview + "')";
+      disc.appendChild(world);
+    }
+
+    if (proj.type === 'self') {
+      var badge = document.createElement('div');
+      badge.className = 'self-badge';
+      badge.textContent = 'this platform';
+      el.appendChild(badge);
+    }
+
+    var label = document.createElement('div');
+    label.className = 'label';
+    label.innerHTML = '<span class="name"></span><span class="count"></span>';
+    label.querySelector('.name').textContent = proj.name;
+    // Catalog projects carry no builder count (the public feed has none) — show
+    // a neutral 'live' status rather than invent a number (task 1002260).
+    label.querySelector('.count').textContent =
+      (typeof proj.builders === 'number' && proj.builders > 0)
+        ? (proj.builders + (proj.builders === 1 ? ' builder' : ' builders'))
+        : 'live';
+    el.appendChild(label);
+
+    canvas.appendChild(el);
+
+    el.addEventListener('mouseenter', function () { showHover(proj, el); });
+    el.addEventListener('mouseleave', hideHover);
+
+    return {
+      // ax/ay = the DOM anchor (el.style.left/top, set once). x/y = the live
+      // physics position; the render offset is (x-ax, y-ay). px/py = previous
+      // step position (for frame interpolation). m = gravitational mass.
+      proj: proj, el: el, disc: disc, ax: ax, ay: ay, r: r,
+      x: ax, y: ay, px: ax, py: ay, vx: 0, vy: 0, m: massFor(r), fx: 0, fy: 0
+    };
+  }
+
+  function hexGlow(hex) {
+    var h = hex.replace('#', '');
+    var n = parseInt(h.length === 3 ? h.replace(/(.)/g, '$1$1') : h, 16);
+    var r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
+    return 'rgba(' + r + ',' + g + ',' + b + ',.55)';
+  }
+
+  /* ─── layout: scatter anchors, Cloud Bongos in the middle ────────────────── */
+  function layout() {
+    var CX = 0, CY = 0, GA = 2.399963, STEP = SPIRAL_STEP;
+    var others = PROJECTS.filter(function (p) { return p.type !== 'self'; });
+    var self = PROJECTS.filter(function (p) { return p.type === 'self'; });
+    var placed = [];
+
+    self.forEach(function (p) { placed.push({ p: p, x: CX, y: CY }); });
+    others.forEach(function (p, i) {
+      var k = i + 1;
+      var rad = STEP * Math.sqrt(k);
+      var ang = k * GA;
+      placed.push({ p: p, x: CX + Math.cos(ang) * rad, y: CY + Math.sin(ang) * rad * 0.82 });
+    });
+
+    placed.forEach(function (pl) {
+      var it = makeCircle(pl.p, pl.x, pl.y);
+      items.push(it);
+      byId[pl.p.id] = pl.p;
+    });
+    initOrbits();
+  }
+
+  /* ─── fit the whole constellation into view ──────────────────────────────── */
+  function fitToView() {
+    if (!items.length) return;
+    W = innerWidth || document.documentElement.clientWidth || 1200;
+    H = innerHeight || document.documentElement.clientHeight || 800;
+    var minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    items.forEach(function (it) {
+      minX = Math.min(minX, it.x - it.r - 30); minY = Math.min(minY, it.y - it.r - 30);
+      maxX = Math.max(maxX, it.x + it.r + 30); maxY = Math.max(maxY, it.y + it.r + 70);
+    });
+    var cw = maxX - minX, ch = maxY - minY;
+    var pad = 70;
+    var z = Math.min((W - pad * 2) / cw, (H - pad * 2) / ch, 1.3);
+    zoom = Math.max(ZMIN, Math.min(ZMAX, z));
+    var cx = (minX + maxX) / 2, cy = (minY + maxY) / 2;
+    panX = W / 2 - cx * zoom;
+    panY = H / 2 - cy * zoom;
+    applyCanvas();
+  }
+
+  function applyCanvas() {
+    canvas.style.transform = 'translate(' + panX.toFixed(2) + 'px,' + panY.toFixed(2) + 'px) scale(' + zoom.toFixed(4) + ')';
+  }
+
+  function clampPan() {
+    var minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    items.forEach(function (it) {
+      minX = Math.min(minX, it.x); minY = Math.min(minY, it.y);
+      maxX = Math.max(maxX, it.x); maxY = Math.max(maxY, it.y);
+    });
+    var m = 220;
+    var sxMin = panX + minX * zoom, sxMax = panX + maxX * zoom;
+    var syMin = panY + minY * zoom, syMax = panY + maxY * zoom;
+    if (sxMax < m) panX += m - sxMax; else if (sxMin > W - m) panX -= sxMin - (W - m);
+    if (syMax < m) panY += m - syMax; else if (syMin > H - m) panY -= syMin - (H - m);
+  }
+
+  /* ═══ gravity: a living n-body cluster ═════════════════════════════════════
+     Every orb attracts every other by its mass (∝ size³), softened so close
+     passes sling instead of exploding. A fixed-timestep leapfrog integrator
+     (accurate + energy-preserving) advances the sim; the frame loop interpolates
+     between steps for smoothness. A soft well + a band thermostat keep the swirl
+     bounded and lively forever without freezing the physics in between. Verified
+     over 60 sim-minutes: no NaN, stays centered, never interpenetrates. */
+  var keTarget = 0;
+
+  function barycenter() {
+    var M = 0, cx = 0, cy = 0;
+    for (var i = 0; i < items.length; i++) { var it = items[i]; M += it.m; cx += it.m * it.x; cy += it.m * it.y; }
+    return M > 0 ? { x: cx / M, y: cy / M, M: M } : { x: 0, y: 0, M: 0 };
+  }
+  function kineticEnergy() {
+    var ke = 0;
+    for (var i = 0; i < items.length; i++) { var it = items[i]; ke += 0.5 * it.m * (it.vx * it.vx + it.vy * it.vy); }
+    return ke;
+  }
+  function killDrift() {
+    // remove uniform bulk velocity so the cluster never sails off-screen.
+    // Galilean-neutral: the internal swirl is untouched.
+    var M = 0, px = 0, py = 0;
+    for (var i = 0; i < items.length; i++) { var it = items[i]; M += it.m; px += it.m * it.vx; py += it.m * it.vy; }
+    if (M <= 0) return;
+    var dvx = px / M, dvy = py / M;
+    for (var j = 0; j < items.length; j++) { items[j].vx -= dvx; items[j].vy -= dvy; }
+  }
+
+  // seed a slow overall swirl + remember the lively energy the thermostat targets
+  function initOrbits() {
+    var c = barycenter();
+    var jit = GRAV.SWIRL * 60 * GRAV.SWIRL_JITTER;
+    for (var i = 0; i < items.length; i++) {
+      var it = items[i], dx = it.x - c.x, dy = it.y - c.y;
+      it.vx = -dy * GRAV.SWIRL + (Math.random() - 0.5) * 2 * jit;
+      it.vy = dx * GRAV.SWIRL + (Math.random() - 0.5) * 2 * jit;
+    }
+    killDrift();
+    keTarget = kineticEnergy();
+  }
+
+  function computeForces(c) {
+    var n = items.length, soft2 = GRAV.SOFTEN * GRAV.SOFTEN, i, j;
+    for (i = 0; i < n; i++) { items[i].fx = 0; items[i].fy = 0; }
+    for (i = 0; i < n; i++) {
+      for (j = i + 1; j < n; j++) {
+        var a = items[i], b = items[j];
+        var dx = b.x - a.x, dy = b.y - a.y;
+        var d2 = dx * dx + dy * dy + soft2;
+        var f = GRAV.G / (d2 * Math.sqrt(d2));
+        a.fx += f * b.m * dx; a.fy += f * b.m * dy;
+        b.fx -= f * a.m * dx; b.fy -= f * a.m * dy;
+      }
+    }
+    // soft containment well — a gentle inward pull only beyond CONTAIN_R
+    for (i = 0; i < n; i++) {
+      var it = items[i], ex = it.x - c.x, ey = it.y - c.y, d = Math.hypot(ex, ey);
+      if (d > GRAV.CONTAIN_R && d > 1e-6) {
+        var k = -GRAV.CONTAIN_K * (d - GRAV.CONTAIN_R) / d;
+        it.fx += k * ex; it.fy += k * ey;
+      }
+    }
+  }
+
+  function resolveCollisions() {
+    var n = items.length;
+    for (var i = 0; i < n; i++) {
+      for (var j = i + 1; j < n; j++) {
+        var a = items[i], b = items[j];
+        var dx = b.x - a.x, dy = b.y - a.y;
+        var dist = Math.hypot(dx, dy) || 1e-6, min = a.r + b.r;
+        if (dist >= min) continue;
+        var nx = dx / dist, ny = dy / dist;
+        var im1 = 1 / a.m, im2 = 1 / b.m, ims = im1 + im2;
+        var corr = (min - dist) / ims;                 // positional push-apart by inverse mass
+        a.x -= nx * corr * im1; a.y -= ny * corr * im1;
+        b.x += nx * corr * im2; b.y += ny * corr * im2;
+        var vn = (b.vx - a.vx) * nx + (b.vy - a.vy) * ny; // velocity exchange along the normal
+        if (vn < 0) {
+          var imp = -(1 + GRAV.REST) * vn / ims;
+          a.vx -= imp * im1 * nx; a.vy -= imp * im1 * ny;
+          b.vx += imp * im2 * nx; b.vy += imp * im2 * ny;
+        }
+      }
+    }
+  }
+
+  function thermostat() {
+    var lo = keTarget * GRAV.THERMO_LO, hi = keTarget * GRAV.THERMO_HI, ke = kineticEnergy();
+    if (ke < 1e-6) return;
+    var target = ke < lo ? lo : (ke > hi ? hi : 0);
+    if (!target) return;                                // inside the band → pure physics
+    var f = Math.sqrt(target / ke);
+    f = Math.max(1 - GRAV.THERMO_MAX, Math.min(1 + GRAV.THERMO_MAX, f));
+    for (var i = 0; i < items.length; i++) { items[i].vx *= f; items[i].vy *= f; }
+  }
+
+  function clampVelocities() {
+    for (var i = 0; i < items.length; i++) {
+      var it = items[i], sp = Math.hypot(it.vx, it.vy);
+      if (sp > GRAV.MAXV) { var f = GRAV.MAXV / sp; it.vx *= f; it.vy *= f; }
+    }
+  }
+
+  function physStep(dt) {
+    var i, it, c = barycenter();
+    for (i = 0; i < items.length; i++) { it = items[i]; it.px = it.x; it.py = it.y; }
+    computeForces(c);                                   // leapfrog kick–drift–kick
+    for (i = 0; i < items.length; i++) { it = items[i]; it.vx += 0.5 * it.fx * dt; it.vy += 0.5 * it.fy * dt; }
+    for (i = 0; i < items.length; i++) { it = items[i]; it.x += it.vx * dt; it.y += it.vy * dt; }
+    computeForces(c);
+    for (i = 0; i < items.length; i++) { it = items[i]; it.vx += 0.5 * it.fx * dt; it.vy += 0.5 * it.fy * dt; }
+    resolveCollisions();
+    thermostat();
+    killDrift();
+    clampVelocities();
+  }
+
+  /* ═══ space-time sheet: a gravity-warped blueprint grid ════════════════════
+     Drawn each frame on its own canvas (behind the orbs) in screen space, using
+     the live pan/zoom so it lines up with the orb canvas exactly. Each vertex is
+     displaced toward every nearby orb by a softened, mass-weighted well, so the
+     lines funnel into each gravity dimple and the whole sheet breathes with the
+     n-body motion. See the GRID tuning block up top. */
+  var gridWells = [];
+
+  function sizeGrid() {
+    if (!gridCanvas) return;
+    gridDPR = window.devicePixelRatio || 1;
+    gridCanvas.width = Math.max(1, Math.round(W * gridDPR));
+    gridCanvas.height = Math.max(1, Math.round(H * gridDPR));
+    gridCanvas.style.width = W + 'px';
+    gridCanvas.style.height = H + 'px';
+  }
+
+  // Displace a world point toward each orb by a Gaussian-weighted pull that
+  // vanishes at the centre + far away and peaks near the rim — a smooth basin
+  // (no clamp → no creases; can't fold). Writes the warped point onto `out`.
+  function warpPoint(wx, wy, out) {
+    var ox = wx, oy = wy;
+    for (var i = 0; i < gridWells.length; i++) {
+      var wl = gridWells[i];
+      var dx = wl.x - wx, dy = wl.y - wy, d2 = dx * dx + dy * dy;
+      if (d2 > wl.cut2) continue;
+      var e = wl.k * Math.exp(-0.5 * d2 * wl.isig2);  // fraction of the way to pull toward the orb
+      ox += dx * e; oy += dy * e;
+    }
+    out.x = ox; out.y = oy;
+  }
+
+  function drawGrid() {
+    if (!gctx || !GRID.ENABLED || !isSpace()) return;
+    gctx.setTransform(gridDPR, 0, 0, gridDPR, 0, 0);
+    gctx.clearRect(0, 0, W, H);
+    if (!gridWells.length) return;
+
+    var S = GRID.BASE_WORLD, step = S / GRID.SEG, m = GRID.MARGIN * S;
+    // visible world rect (+ margin) so warped lines enter from off-screen cleanly
+    var x0 = (0 - panX) / zoom - m, x1 = (W - panX) / zoom + m;
+    var y0 = (0 - panY) / zoom - m, y1 = (H - panY) / zoom + m;
+    var gx0 = Math.floor(x0 / S) * S, gy0 = Math.floor(y0 / S) * S;
+
+    // alpha ramps with zoom: a whisper zoomed out, legible zoomed in
+    var zf = (zoom - ZMIN) / (ZMAX - ZMIN); if (zf < 0) zf = 0; else if (zf > 1) zf = 1;
+    var minorA = GRID.MINOR_A_LO + zf * (GRID.MINOR_A_HI - GRID.MINOR_A_LO);
+    var majorA = GRID.MAJOR_A_LO + zf * (GRID.MAJOR_A_HI - GRID.MAJOR_A_LO);
+    // fade minor lines out as their on-screen cell shrinks, so a zoomed-out grid
+    // never turns into noise (only the major rules survive there)
+    var cellPx = S * zoom;
+    if (cellPx < 30) minorA *= Math.max(0, (cellPx - 14) / 16);
+
+    gctx.lineWidth = GRID.LINE_PX;
+    gctx.lineJoin = 'round'; gctx.lineCap = 'round';
+    var p = { x: 0, y: 0 }, x, y, n, i;
+    var xs = [], ys = [];   // reused per-line screen-point buffers
+
+    // draw a smooth curve through the n collected points with midpoint-quadratics
+    // (Catmull-Rom-style) so the warped lines read as curves, not faceted chains
+    function emitSmooth(n) {
+      if (n < 2) return;
+      gctx.moveTo(xs[0], ys[0]);
+      if (n === 2) { gctx.lineTo(xs[1], ys[1]); return; }
+      for (i = 1; i < n - 2; i++) {
+        gctx.quadraticCurveTo(xs[i], ys[i], (xs[i] + xs[i + 1]) / 2, (ys[i] + ys[i + 1]) / 2);
+      }
+      gctx.quadraticCurveTo(xs[i], ys[i], xs[i + 1], ys[i + 1]);   // last span (i = n-2)
+    }
+
+    // one batched path per tier (minor / major) — 2 strokes total
+    function sweep(major, alpha) {
+      if (alpha < 0.004) return;
+      gctx.beginPath();
+      for (x = gx0; x <= x1; x += S) {                    // vertical lines (constant world x)
+        if ((Math.round(x / S) % GRID.MAJOR_EVERY === 0) !== major) continue;
+        n = 0;
+        for (y = y0; y <= y1; y += step) { warpPoint(x, y, p); xs[n] = panX + p.x * zoom; ys[n] = panY + p.y * zoom; n++; }
+        emitSmooth(n);
+      }
+      for (y = gy0; y <= y1; y += S) {                    // horizontal lines (constant world y)
+        if ((Math.round(y / S) % GRID.MAJOR_EVERY === 0) !== major) continue;
+        n = 0;
+        for (x = x0; x <= x1; x += step) { warpPoint(x, y, p); xs[n] = panX + p.x * zoom; ys[n] = panY + p.y * zoom; n++; }
+        emitSmooth(n);
+      }
+      gctx.strokeStyle = 'rgba(' + GRID.RGB + ',' + alpha.toFixed(4) + ')';
+      gctx.stroke();
+    }
+
+    sweep(false, minorA);   // minor rules first, majors drawn over them
+    sweep(true, majorA);
+
+    // ── glow pass: lines brighten where the sheet is most pinched ──
+    // A vertex's displacement magnitude IS the local "gravity" — stroke each
+    // segment additively with an alpha that tracks it, so deep wells halo the
+    // grid around them and shallow ones barely do. Bucketed into GLOW_LEVELS so
+    // the whole pass is a handful of strokes, not thousands.
+    if (GRID.GLOW_MAX_A > 0.001) drawGlow(S, step, x0, x1, y0, y1, gx0, gy0, zf);
+  }
+
+  // is a grid line (constant world x if vertical, else y) close enough to any
+  // well to pick up glow? Cheap perpendicular-distance prune so the glow pass
+  // only samples lines that actually pass near an orb.
+  function lineNearWell(c, isVert, reachSig) {
+    for (var i = 0; i < gridWells.length; i++) {
+      var wl = gridWells[i];
+      if (Math.abs(c - (isVert ? wl.x : wl.y)) < reachSig * wl.sig) return true;
+    }
+    return false;
+  }
+
+  var glowBuckets = null;   // reused per-frame flat [x0,y0,x1,y1,…] arrays, one per alpha level
+
+  function drawGlow(S, step, x0, x1, y0, y1, gx0, gy0, zf) {
+    var L = GRID.GLOW_LEVELS, ref = GRID.GLOW_REF, pw = GRID.GLOW_POW, reach = 3;
+    if (!glowBuckets || glowBuckets.length !== L + 1) { glowBuckets = []; for (var b = 0; b <= L; b++) glowBuckets.push([]); }
+    for (b = 0; b <= L; b++) glowBuckets[b].length = 0;
+
+    var p = { x: 0, y: 0 }, x, y, sx, sy, dx, dy, g, gAvg, bi, prevG, psx, psy, first;
+    // vertical lines
+    for (x = gx0; x <= x1; x += S) {
+      if (!lineNearWell(x, true, reach)) continue;
+      prevG = 0; psx = 0; psy = 0; first = true;
+      for (y = y0; y <= y1; y += step) {
+        warpPoint(x, y, p);
+        dx = p.x - x; dy = p.y - y;
+        g = Math.pow(Math.min(1, Math.sqrt(dx * dx + dy * dy) / ref), pw);
+        sx = panX + p.x * zoom; sy = panY + p.y * zoom;
+        if (!first) { gAvg = (g + prevG) * 0.5; bi = Math.round(gAvg * L); if (bi > 0) glowBuckets[bi].push(psx, psy, sx, sy); }
+        prevG = g; psx = sx; psy = sy; first = false;
+      }
+    }
+    // horizontal lines
+    for (y = gy0; y <= y1; y += S) {
+      if (!lineNearWell(y, false, reach)) continue;
+      prevG = 0; psx = 0; psy = 0; first = true;
+      for (x = x0; x <= x1; x += step) {
+        warpPoint(x, y, p);
+        dx = p.x - x; dy = p.y - y;
+        g = Math.pow(Math.min(1, Math.sqrt(dx * dx + dy * dy) / ref), pw);
+        sx = panX + p.x * zoom; sy = panY + p.y * zoom;
+        if (!first) { gAvg = (g + prevG) * 0.5; bi = Math.round(gAvg * L); if (bi > 0) glowBuckets[bi].push(psx, psy, sx, sy); }
+        prevG = g; psx = sx; psy = sy; first = false;
+      }
+    }
+
+    // stroke the buckets additively (dim → bright), so overlaps accumulate glow
+    var prevOp = gctx.globalCompositeOperation;
+    gctx.globalCompositeOperation = 'lighter';
+    gctx.lineWidth = GRID.GLOW_WIDTH;
+    if (GRID.GLOW_BLUR > 0) { gctx.shadowColor = 'rgba(' + GRID.GLOW_RGB + ',1)'; gctx.shadowBlur = GRID.GLOW_BLUR; }
+    var glowZ = 0.4 + 0.6 * zf;   // present but stronger zoomed in
+    for (var lv = 1; lv <= L; lv++) {
+      var segs = glowBuckets[lv]; if (!segs.length) continue;
+      var a = GRID.GLOW_MAX_A * glowZ * (lv / L);
+      if (a < 0.003) continue;
+      gctx.beginPath();
+      for (var i = 0; i < segs.length; i += 4) { gctx.moveTo(segs[i], segs[i + 1]); gctx.lineTo(segs[i + 2], segs[i + 3]); }
+      gctx.strokeStyle = 'rgba(' + GRID.GLOW_RGB + ',' + a.toFixed(4) + ')';
+      gctx.stroke();
+    }
+    gctx.shadowBlur = 0;
+    gctx.globalCompositeOperation = prevOp;
+  }
+
+  function render(alpha) {
+    // snap the moving offset to the device-pixel grid: on a HiDPI screen the
+    // motion is still smooth (sub-pixel steps) but glyphs + edges rasterize the
+    // same every frame, so labels don't shimmer as an orb drifts.
+    var dpr = window.devicePixelRatio || 1;
+    gridWells.length = 0;
+    for (var k = 0; k < items.length; k++) {
+      var it = items[k];
+      var ix = it.px + (it.x - it.px) * alpha, iy = it.py + (it.y - it.py) * alpha;
+      var tx = Math.round((ix - it.ax) * dpr) / dpr, ty = Math.round((iy - it.ay) * dpr) / dpr;
+      it.el.style.transform = 'translate(-50%,-50%) translate(' + tx.toFixed(2) + 'px,' + ty.toFixed(2) + 'px)';
+      // a gravity well per orb, sampled at the SAME interpolated centre it renders
+      // at, so the dimple sits dead under the orb. sig = well width, k = pull
+      // strength (∝ r² — bigger orb, deeper+wider dip), isig2 = 1/sig² (precomputed).
+      var sig = it.r * GRID.WELL_R, rr = it.r / GRAV.R_REF;
+      gridWells.push({ x: ix, y: iy, sig: sig, k: GRID.DEPTH * rr * rr, isig2: 1 / (sig * sig), cut2: (GRID.CUT * sig) * (GRID.CUT * sig) });
+    }
+    sampleUnder();      // one throttled element-under-cursor sample shared by the two below
+    checkHoverExit();   // drop the hovercard if the orb has drifted off the cursor (task 1895)
+    updateGhost();      // idle create-a-project ghost orb over empty sky (task 1896)
+    drawMinimap();      // live cluster overview + viewport rect (task 1897)
+    updateWhale();      // fly the space whale between orbs on updates (task 1898)
+    drawGrid();
+  }
+
+  var DT_MS = 1000 / GRAV.PHYS_HZ, physAcc = 0, physLast = performance.now();
+  function tick(now) {
+    var ft = now - physLast; physLast = now; if (ft > 250) ft = 250; // clamp tab-switch gaps
+    physAcc += ft;
+    var guard = 0;
+    while (physAcc >= DT_MS && guard < 8) { physStep(DT_MS / 1000); physAcc -= DT_MS; guard++; }
+    if (guard >= 8) physAcc = 0;                        // don't spiral if we fell behind
+    render(Math.max(0, Math.min(1, physAcc / DT_MS)));
+    requestAnimationFrame(tick);
+  }
+
+  /* ─── hover card ───────────────────────────────────────────────────────── */
+  function showHover(proj, el) {
+    if (diving || searchOpen || createOpen || panning || !isSpace()) return;
+    var rect = el.querySelector('.disc').getBoundingClientRect();
+    var sample = proj.type === 'sample' ? '<span class="hc-sample"> · sample</span>' : '';
+    var go = proj.type === 'self' ? 'click to enter →'
+      : proj.type === 'link' ? 'click to open its page →' : 'click to preview →';
+    hovercard.innerHTML =
+      '<div class="hc-name"><span class="hc-dot"></span>' + esc(proj.name) + '</div>' +
+      '<div class="hc-tag">' + esc(proj.tagline) + sample + '</div>' +
+      '<div class="hc-meta"><span>' + proj.builders + (proj.builders === 1 ? ' builder' : ' builders') + '</span><span class="chip">' + esc((proj.tags[0] || '')) + '</span></div>' +
+      '<div class="hc-go">' + go + '</div>';
+    hovercard.style.setProperty('--acc', proj.accent);
+    var cardW = 250;
+    var x = Math.max(12, Math.min(W - cardW - 12, rect.left + rect.width / 2 - cardW / 2));
+    var y = rect.top - 12;
+    hovercard.style.left = x + 'px';
+    hovercard.style.top = y + 'px';
+    hovercard.style.transform = 'translateY(-100%)';
+    hovercard.classList.add('show');
+    hoverCircle = el;
+  }
+  function hideHover() { hovercard.classList.remove('show'); hoverCircle = null; }
+
+  // Shared pointer sampling (tasks 1895/1896 + this follow-up). The orbs drift
+  // under a live gravity sim, so an orb can slide out from under a STATIONARY
+  // cursor and the browser never fires mouseleave (hover is only recomputed on
+  // pointer events). We track the cursor + how long it's been still, and each
+  // frame sample the element directly under it (throttled — elementFromPoint is a
+  // layout hit-test). checkHoverExit + updateGhost both read that one sample.
+  var hoverCircle = null;                  // the .circle whose card is showing
+  var ptr = { x: -1, y: -1 };
+  var lastMoveT = 0;                        // performance.now() of the last cursor move
+  var underEl = null, sampleTick = 0;
+  function sampleUnder() {
+    if (ptr.x < 0) { underEl = null; return; }
+    if ((++sampleTick % 4) === 0) underEl = document.elementFromPoint(ptr.x, ptr.y);
+  }
+  function underCircle() { return underEl && underEl.closest ? underEl.closest('.circle') : null; }
+  function checkHoverExit() {
+    // dismiss the card the moment the cursor is no longer over the hovered orb —
+    // using the SAME element-under-cursor test the browser would, so the hover
+    // region is the whole orb (disc + label), not a tight inscribed circle.
+    if (!hoverCircle || panning || anyOverlay() || diving) return;
+    if (underCircle() !== hoverCircle) hideHover();
+  }
+
+  // Idle "create a project" ghost orb (task 1896): a faint dashed circle that
+  // trails the cursor over EMPTY sky — a light nudge toward the click-to-create
+  // gesture. Shown only when not panning / no overlay / not over an orb or UI
+  // chrome. elementFromPoint is a layout hit-test, so we sample it a few times a
+  // second (not every frame) — enough to also hide when an orb drifts under a
+  // still cursor.
+  var ghost = document.getElementById('ghost-orb');
+  var ghostPlus = ghost ? ghost.querySelector('.ghost-plus') : null;
+  var SKY_IDS = { 'space': 1, 'space-canvas': 1, 'space-grid': 1, 'starfield': 1 };
+  var GHOST_DWELL = 1000;   // cursor must rest still this long over empty sky before it appears
+  function updateGhost() {
+    if (!ghost) return;
+    var onSky = !!(underEl && SKY_IDS[underEl.id]);
+    var still = (performance.now() - lastMoveT) > GHOST_DWELL;   // gone the moment the cursor moves
+    if (isSpace() && !panning && !anyOverlay() && !diving && ptr.x >= 0 && onSky && still) {
+      // size the outline to a STARTING project (builders=1), scaled by zoom, so it
+      // previews the true size the new orb will be — and shrinks on zoom-out with
+      // the orbs (task 1911).
+      var d = radiusFor(1) * 2 * zoom;
+      ghost.style.width = d + 'px'; ghost.style.height = d + 'px';
+      ghost.style.marginLeft = (-d / 2) + 'px'; ghost.style.marginTop = (-d / 2) + 'px';
+      ghost.style.left = ptr.x + 'px'; ghost.style.top = ptr.y + 'px';
+      if (ghostPlus) ghostPlus.style.fontSize = Math.max(9, d * 0.5) + 'px';
+      ghost.classList.add('show');
+    } else {
+      ghost.classList.remove('show');
+    }
+  }
+
+  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+
+  /* ─── pan + zoom + press-to-click (space view only) ──────────────────────── */
+  var down = false, moved = false, panning = false, middlePan = false;
+  var sx = 0, sy = 0, startPanX = 0, startPanY = 0, startCircle = null;
+
+  // suppress the browser's middle-click autoscroll widget so a wheel-press reads
+  // purely as our pan gesture.
+  space.addEventListener('mousedown', function (e) { if (e.button === 1) e.preventDefault(); });
+
+  space.addEventListener('pointerdown', function (e) {
+    if (diving || !isSpace() || anyOverlay()) return;
+    if (e.button !== 0 && e.button !== 1) return;   // left = drag/click, middle = pan-anywhere
+    down = true; moved = false; panning = false;
+    middlePan = (e.button === 1);
+    if (middlePan) {
+      // a wheel-press is ALWAYS a pan — never a click/dive/create, and it grabs
+      // even over an orb. Force pan mode up front.
+      moved = true; panning = true; userTouched = true;
+      space.classList.add('panning'); hideHover(); e.preventDefault();
+    }
+    space.classList.add('grabbing');   // pressing the surface = drag/pan
+    sx = e.clientX; sy = e.clientY; startPanX = panX; startPanY = panY;
+    startCircle = middlePan ? null : e.target.closest('.circle');
+    createAt.x = (e.clientX - panX) / zoom;
+    createAt.y = (e.clientY - panY) / zoom;
+  });
+  window.addEventListener('pointermove', function (e) {
+    ptr.x = e.clientX; ptr.y = e.clientY; lastMoveT = performance.now();   // track cursor + last-move time
+    if (!down) return;
+    if (!moved && Math.hypot(e.clientX - sx, e.clientY - sy) < DEADZONE) return;
+    if (!moved) { moved = true; panning = true; userTouched = true; space.classList.add('panning'); hideHover(); }
+    panX = startPanX + (e.clientX - sx);
+    panY = startPanY + (e.clientY - sy);
+    clampPan();
+    applyCanvas();
+  });
+  window.addEventListener('pointerup', function () {
+    if (!down) return;
+    down = false; space.classList.remove('panning', 'grabbing');
+    var wasPan = moved || middlePan; panning = false;
+    if (!wasPan) {
+      if (startCircle) enterProject(startCircle.dataset.id, startCircle);
+      else if (!anyOverlay()) openCreate();
+    }
+    startCircle = null; middlePan = false;
+  });
+
+  // Scroll the wheel to ZOOM toward the cursor. To PAN, either drag empty sky
+  // with the left button or hold the scroll wheel down (middle button) and drag
+  // anywhere — see the pointer handlers above.
+  space.addEventListener('wheel', function (e) {
+    if (diving || anyOverlay() || !isSpace()) return;
+    e.preventDefault();
+    userTouched = true;
+    var cx = e.clientX, cy = e.clientY;
+    var vx = (cx - panX) / zoom, vy = (cy - panY) / zoom;
+    var factor = Math.exp(-e.deltaY * 0.0016);
+    zoom = Math.max(ZMIN, Math.min(ZMAX, zoom * factor));
+    panX = cx - vx * zoom; panY = cy - vy * zoom;
+    clampPan(); applyCanvas(); hideHover();
+  }, { passive: false });
+
+  /* ─── which circles are on-screen right now (search scope) ───────────────── */
+  function inViewProjects() {
+    var out = [];
+    for (var k = 0; k < items.length; k++) {
+      var it = items[k];
+      var sxp = panX + it.x * zoom, syp = panY + it.y * zoom;
+      if (sxp > -it.r * zoom && sxp < W + it.r * zoom && syp > -it.r * zoom && syp < H + it.r * zoom) out.push(it);
+    }
+    return out;
+  }
+
+  /* ─── dive into a project ────────────────────────────────────────────────── */
+  function enterProject(id, fromEl) {
+    var proj = project(id);
+    if (!proj || diving) return;
+    hideHover();
+    diving = true;
+    saved = { panX: panX, panY: panY, zoom: zoom, from: browseView };
+
+    // Cloud Bongos itself (the self orb): fly from space, down through the
+    // clouds, into its world (the download page) — the #descent cinematic.
+    if (proj.type === 'self') { diveToWorld(); return; }
+
+    // dive origin: a circle's .disc, else the clicked row, else screen centre
+    var src = (fromEl && fromEl.querySelector && fromEl.querySelector('.disc')) || fromEl;
+    var rect = (src && src.getBoundingClientRect) ? src.getBoundingClientRect()
+      : { left: W / 2, top: H / 2, width: 0, height: 0 };
+    var fx = rect.left + rect.width / 2, fy = rect.top + rect.height / 2;
+    flash.style.setProperty('--fx', fx + 'px');
+    flash.style.setProperty('--fy', fy + 'px');
+    flash.classList.remove('go'); void flash.offsetWidth; flash.classList.add('go');
+
+    space.classList.add('diving');
+    var z2 = zoom * 2.7;
+    var vx = (fx - panX) / zoom, vy = (fy - panY) / zoom;
+    panX = fx - vx * z2; panY = fy - vy * z2; zoom = z2;
+    applyCanvas();
+    canvas.style.opacity = '0';
+
+    setTimeout(function () { finishEnter(proj); }, 700);
+  }
+
+  // non-self orbs (real instances / samples) settle into a themed detail page.
+  // The Cloud Bongos self orb never reaches here — it takes the #descent dive.
+  function finishEnter(proj) {
+    space.classList.remove('diving');
+    canvas.style.opacity = '1';
+    if (saved) { panX = saved.panX; panY = saved.panY; zoom = saved.zoom; applyCanvas(); }
+    openDetail(proj);
+    diving = false;
+  }
+
+  /* ═══ dive cinematic: space constellation → through the clouds → the world ═══
+     (task 1729) Clicking the Cloud Bongos orb plays #descent as a full-screen
+     curtain (deep space → sky-island → cloud punch-through → flash), then hands
+     off to the download page (view-download) under the flash and lifts the
+     curtain. Replayable (reset each dive); skippable via click / key / scroll;
+     reduced motion drops straight into the world with no cinematic. */
+  function makeDescentStars(el, n, big) {
+    if (!el) return;
+    var frag = document.createDocumentFragment();
+    for (var i = 0; i < n; i++) {
+      var s = document.createElement('div');
+      s.className = 'star';
+      var sz = Math.random() * (big ? 2.2 : 1.4) + (big ? 1.1 : 0.5);
+      s.style.width = sz.toFixed(1) + 'px'; s.style.height = sz.toFixed(1) + 'px';
+      s.style.left = (Math.random() * 100).toFixed(2) + '%';
+      s.style.top = (Math.random() * 100).toFixed(2) + '%';
+      s.style.opacity = (Math.random() * 0.5 + 0.4).toFixed(2);
+      frag.appendChild(s);
+    }
+    el.appendChild(frag);
+  }
+
+  function resetDescent() {
+    if (!descent) return;
+    descent.classList.remove('playing', 'done');
+    var f = document.getElementById('descent-stars-far'), n = document.getElementById('descent-stars-near');
+    if (f) { f.innerHTML = ''; makeDescentStars(f, 150, false); }
+    if (n) { n.innerHTML = ''; makeDescentStars(n, 70, true); }
+    void descent.offsetWidth;   // reflow so the CSS keyframes restart on replay
+  }
+
+  function diveToWorld() {
+    diveLanded = false;
+    if (prefersReduced || !descent) { landInWorld(); return; }
+    resetDescent();
+    descent.classList.add('playing');
+    clearTimeout(descentTimer);
+    descentTimer = setTimeout(landInWorld, DESCENT_MS);
+  }
+
+  function landInWorld() {
+    if (diveLanded) return;
+    diveLanded = true;
+    clearTimeout(descentTimer);
+    // We're deep in the cloud (screen full of cloud). Put the world behind it,
+    // then let the cloud keep zooming past + dissolve (crossfade) to reveal it.
+    document.body.className = 'view-download';
+    document.dispatchEvent(new CustomEvent('cb:show-download'));
+    if (saved) { panX = saved.panX; panY = saved.panY; zoom = saved.zoom; applyCanvas(); }
+    space.classList.remove('diving');
+    canvas.style.opacity = '1';
+    if (descent) {
+      descent.classList.add('done');   // cloud zooms past + fades out, revealing the world
+      setTimeout(function () { descent.classList.remove('playing', 'done'); }, 760);
+    }
+    diving = false;
+  }
+
+  if (descent) {
+    descent.addEventListener('pointerdown', function () { landInWorld(); });
+    descent.addEventListener('wheel', function (e) { e.preventDefault(); landInWorld(); }, { passive: false });
+  }
+
+  // top-left ESC button (task 1913) — same as pressing Esc from download/detail
+  var escBtn = document.getElementById('esc-btn');
+  if (escBtn) escBtn.addEventListener('click', function () { exitToSpace(); });
+
+  function openDetail(proj) {
+    detail.style.setProperty('--acc', proj.accent);
+    detail.style.setProperty('--glow', hexGlow(proj.accent));
+    var visit = proj.url
+      ? '<a class="visit" href="' + esc(proj.url) + '" target="_blank" rel="noopener">Visit ' + esc(proj.name) + ' →</a>'
+      : '';
+    var sampleNote = proj.type === 'sample' ? '<div class="meta">a sample community instance</div>' : '';
+    detail.querySelector('.card').innerHTML =
+      '<div class="halo"></div>' +
+      '<h2>' + esc(proj.name) + '</h2>' +
+      '<div class="tag">' + esc(proj.tagline) + '</div>' +
+      '<div class="desc">' + esc(proj.description) + '</div>' +
+      '<div class="meta">' + proj.builders + (proj.builders === 1 ? ' builder' : ' builders') + ' · ' + esc(proj.tags.join(' · ')) + '</div>' +
+      sampleNote +
+      '<div class="actions">' + visit + '</div>' +
+      '<div class="soon">Full project story — coming soon</div>';
+    document.body.className = 'view-detail';
+  }
+
+  /* ─── rise back up to space ──────────────────────────────────────────────── */
+  function exitToSpace() {
+    var wasDownload = document.body.classList.contains('view-download');
+    if (wasDownload) document.dispatchEvent(new CustomEvent('cb:hide-download'));
+    closeSearch();
+    // return to whichever browse view the dive started from
+    var back = (saved && saved.from) || browseView || 'space';
+    if (back === 'table') {
+      if (saved) { panX = saved.panX; panY = saved.panY; zoom = saved.zoom; applyCanvas(); }
+      document.body.className = 'view-table';
+      setBrowseView('table');
+      renderTable();
+      return;
+    }
+    document.body.className = 'view-space';
+    setBrowseView('space');
+    if (!saved) return;
+    canvas.style.opacity = '1';
+    var z2 = saved.zoom * 1.5;
+    var vx = (W / 2 - saved.panX) / saved.zoom, vy = (H / 2 - saved.panY) / saved.zoom;
+    space.classList.remove('diving');
+    panX = W / 2 - vx * z2; panY = H / 2 - vy * z2; zoom = z2; applyCanvas();
+    setTimeout(function () {
+      space.classList.add('diving');
+      panX = saved.panX; panY = saved.panY; zoom = saved.zoom; applyCanvas();
+    }, 20);
+    setTimeout(function () { space.classList.remove('diving'); }, 560);
+  }
+
+  /* ─── search overlay ──────────────────────────────────────────────────────── */
+  function openSearch() {
+    if (searchOpen || createOpen || diving || !isSpace()) return;
+    searchOpen = true;
+    document.body.classList.add('searching');   // darkens the sky; matches spotlight (task 1892)
+    searchbar.classList.add('show');
+    searchInput.value = '';
+    updateSearch();
+    setTimeout(function () { searchInput.focus(); }, 60);
+  }
+  function closeSearch() {
+    searchOpen = false;
+    document.body.classList.remove('searching');
+    searchbar.classList.remove('show');
+    searchInput.value = '';
+    items.forEach(function (it) { it.el.classList.remove('dim', 'match'); });
+  }
+  function updateSearch() {
+    var q = searchInput.value.trim().toLowerCase();
+    var scope = inViewProjects();
+    var scopeIds = {};
+    scope.forEach(function (it) { scopeIds[it.proj.id] = true; });
+    searchCtxCount.textContent = scope.length;
+
+    items.forEach(function (it) {
+      it.el.classList.remove('dim', 'match');
+      if (!q) return;
+      if (!scopeIds[it.proj.id]) { it.el.classList.add('dim'); return; }
+      matches(it.proj, q) ? it.el.classList.add('match') : it.el.classList.add('dim');
+    });
+    // AI seam — dormant for v1 (owner: "interaction now, AI wired next").
+    // aiAnswer(q, scope.map(function(it){ return it.proj; }));
+  }
+  function matches(proj, q) {
+    if (!q) return false;
+    var hay = (proj.name + ' ' + proj.tagline + ' ' + proj.description + ' ' + proj.tags.join(' ')).toLowerCase();
+    return q.split(/\s+/).every(function (tok) { return hay.indexOf(tok) !== -1; });
+  }
+  searchInput.addEventListener('input', updateSearch);
+
+  /* ─── create a project ────────────────────────────────────────────────────── */
+  var pendingOrb = null;   // the live preview orb shown while the create panel is open
+  var createSeq = 0;
+
+  /* Naming an orb now CONTINUES into the real onboarding (goal 35, task 2087 —
+     the panel's old "full setup coming soon" note, come due): the name rides
+     ?name= into the branded wizard at /create (task 2081), which pre-fills it
+     and runs sign-in → name/home/address → provision → live progress. On the
+     apex we know the sign-in state from /api/bongos/me (same-origin via the
+     Caddy catch-all); a signed-out visitor routes through GitHub sign-in first
+     (the name survives in the return path). On a vanity DOOR the API isn't on
+     this origin, so we send them to the cloudbongos.com wizard and let its own
+     gate handle sign-in. */
+  var ME = null;             // { github_login, … } when signed in on the apex
+  var IS_DOOR = !!BRAND.redirect;
+  var signedIn = false;      // resolved from /api/bongos/me below (task 2094)
+  var signInOpen = false;    // the signed-out create-gate dialog is up
+  var acctEl = document.getElementById('cb-account');
+  var createAuthNote = document.getElementById('create-auth-note');
+  var signinScrim = document.getElementById('signin-scrim');
+  var signinGo = document.getElementById('signin-go');
+  var signinDismiss = document.getElementById('signin-dismiss');
+  var GH_MARK = '<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>';
+
+  // Where "Sign in with GitHub" points: back to the orbs, signed in. On a vanity
+  // DOOR the API + session live on cloudbongos.com, so sign-in happens there.
+  function acctSignInHref() {
+    var back = '/gate/?entered=1';
+    return IS_DOOR ? (CLOUDBONGOS_ORIGIN + back)
+      : ('/api/bongos/auth/web/start?return=' + encodeURIComponent(back));
+  }
+
+  // The identity chip (top-right). Signed in = avatar + login (the visitor's
+  // cloudbongos account) + a quiet sign-out; signed out = "Sign in with GitHub".
+  function renderAccount() {
+    if (!acctEl) return;
+    if (signedIn && ME) {
+      var avatar = ME.avatar_url ? '<img src="' + esc(ME.avatar_url) + '" alt="">' : '';
+      acctEl.innerHTML = '<span class="cb-me">' + avatar +
+        '<span class="cb-name">' + esc(ME.github_login || 'signed in') + '</span>' +
+        '<a class="cb-out" href="#" id="cb-signout">sign out</a></span>';
+      var out = document.getElementById('cb-signout');
+      if (out) out.addEventListener('click', function (e) {
+        e.preventDefault();
+        // Stay on the orbs after signing out (task 1002262): a bare reload of
+        // /gate/ with no ?entered=1 drops a visitor who typed "bongos" back on
+        // the entry terminal. Force the direct-orbs flag so the reload re-opens
+        // the sky, now signed out. location.replace so Back doesn't return to the
+        // signed-in view; falls back to a plain reload if URL rewriting throws.
+        var stayOnOrbs = function () {
+          try {
+            var u = new URL(location.href);
+            u.searchParams.set('entered', '1');
+            location.replace(u.pathname + u.search + u.hash);
+          } catch (_) { location.reload(); }
+        };
+        fetch('/api/bongos/auth/logout', { method: 'POST', credentials: 'same-origin' })
+          .then(stayOnOrbs, stayOnOrbs);
+      });
+    } else {
+      acctEl.innerHTML = '<a class="cb-signin" href="' + acctSignInHref() + '">' + GH_MARK + 'Sign in with GitHub</a>';
+    }
+  }
+
+  // Signed-out: gray the create-a-project affordances + relabel the ghost orb.
+  function refreshCreateAffordances() {
+    if (ghost) ghost.classList.toggle('locked', !signedIn);
+    var gl = ghost && ghost.querySelector('.ghost-label');
+    if (gl) gl.textContent = signedIn ? 'click to create a project' : 'sign in to create a project';
+    if (tvCreate) tvCreate.classList.toggle('locked', !signedIn);
+  }
+
+  // The signed-out create gate: a click on "create a project" opens this instead
+  // of the name field, encouraging GitHub sign-in first (task 2094).
+  function openSignInPrompt() {
+    if (signInOpen || diving) return;
+    signInOpen = true;
+    if (signinGo) signinGo.setAttribute('href', acctSignInHref());
+    if (signinScrim) signinScrim.classList.add('show');
+  }
+  function closeSignIn() {
+    signInOpen = false;
+    if (signinScrim) signinScrim.classList.remove('show');
+  }
+  if (signinDismiss) signinDismiss.addEventListener('click', closeSignIn);
+  if (signinScrim) signinScrim.addEventListener('pointerdown', function (e) { if (e.target === signinScrim) closeSignIn(); });
+
+  renderAccount();               // signed-out chip shows immediately
+  refreshCreateAffordances();
+
+  if (!IS_DOOR) {
+    try {
+      fetch('/api/bongos/me', { credentials: 'same-origin' })
+        .then(function (res) { if (!res.ok) throw new Error(String(res.status)); return res.json(); })
+        .then(function (data) {
+          ME = data.builder || data.me || data;
+          signedIn = !!(ME && ME.github_login);
+          renderAccount();
+          refreshCreateAffordances();
+          if (createAuthNote && signedIn) {
+            createAuthNote.textContent = 'Continues into the build wizard — signed in as ' + ME.github_login + '.';
+          }
+        })
+        .catch(function () { /* signed out or unreachable: signed-out visuals stand */ });
+    } catch (_) { /* very old browsers: the default note + signed-out chip stand */ }
+  }
+
+  // After the orb joins the sky, carry the name into the wizard. A moment of
+  // delay on purpose: the visitor should SEE their circle become part of the
+  // world before the wizard takes over.
+  function handoffToWizard(name) {
+    var base = IS_DOOR ? CLOUDBONGOS_ORIGIN : '';
+    var createPath = '/create?name=' + encodeURIComponent(name);
+    var target = (ME || IS_DOOR)
+      ? base + createPath
+      : base + '/api/bongos/auth/web/start?return=' + encodeURIComponent(createPath);
+    var toast = document.getElementById('handoff-toast');
+    if (toast) {
+      toast.textContent = 'Opening the build wizard for “' + name + '”…';
+      toast.classList.add('show');
+    }
+    setTimeout(function () { location.assign(target); }, 950);
+  }
+
+  function openCreate() {
+    if (createOpen || diving) return;
+    if (!signedIn) { openSignInPrompt(); return; }   // task 2094: sign in with GitHub first
+    createOpen = true;
+    spawnPendingOrb();      // the orb appears immediately, alongside the popup (task 1909)
+    scrim.classList.add('show');
+    createName.value = '';
+    setTimeout(function () { createName.focus(); }, 60);
+  }
+
+  // drop a provisional orb at the click point. It is deliberately kept OUT of the
+  // physics `items` array (task 1912): it stays stationary and neither exerts nor
+  // feels gravity until confirmed. We apply the centering transform ourselves
+  // (render() does that for real orbs) so it sits centred on the click point.
+  function spawnPendingOrb() {
+    var id = 'new-' + (++createSeq);
+    var proj = {
+      id: id, name: 'New project', type: 'sample', builders: 1, accent: '#fb923c',
+      tagline: 'Your new Cloud Bongos project',
+      description: 'A brand-new project — set the beat and invite builders.',
+      tags: ['new', 'project']
+    };
+    PROJECTS.push(proj);
+    var it = makeCircle(proj, createAt.x, createAt.y);
+    it.el.classList.add('pending');
+    it.el.style.transform = 'translate(-50%,-50%)';   // static + centred (not driven by render)
+    byId[id] = proj;
+    pendingOrb = it;
+  }
+
+  function removePendingOrb() {
+    if (!pendingOrb) return;
+    var it = pendingOrb; pendingOrb = null;
+    if (hoverCircle === it.el) hideHover();
+    var p = PROJECTS.indexOf(it.proj); if (p >= 0) PROJECTS.splice(p, 1);
+    delete byId[it.proj.id];
+    if (it.el && it.el.parentNode) it.el.parentNode.removeChild(it.el);
+    // never entered the sim, so nothing to rebalance.
+  }
+
+  function closeCreate() {
+    createOpen = false;
+    scrim.classList.remove('show');
+    removePendingOrb();      // cancelled (esc / outside click / cancel) → the preview orb goes away
+  }
+
+  function doCreate() {
+    var name = createName.value.trim();
+    if (!name) { createName.focus(); return; }
+    if (pendingOrb) {
+      var it = pendingOrb; pendingOrb = null;   // keep it — closeCreate must not remove it now
+      it.proj.name = name;
+      it.el.classList.remove('pending');
+      it.el.style.transform = '';   // hand transform control back to render()
+      var nameEl = it.el.querySelector('.label .name');
+      if (nameEl) nameEl.textContent = name;
+      // NOW it joins the sim as a live orb: give it the field swirl + rebalance.
+      items.push(it); byId[it.proj.id] = it.proj;
+      var c = barycenter(), jit = GRAV.SWIRL * 60 * GRAV.SWIRL_JITTER;
+      it.vx = -(it.y - c.y) * GRAV.SWIRL + (Math.random() - 0.5) * 2 * jit;
+      it.vy = (it.x - c.x) * GRAV.SWIRL + (Math.random() - 0.5) * 2 * jit;
+      killDrift(); keTarget = kineticEnergy();
+    }
+    renderTable();   // keep the directory in sync if it's open
+    closeCreate();
+    handoffToWizard(name);   // the orb is in the sky — now make it real (task 2087)
+  }
+  createGo.addEventListener('click', doCreate);
+  createCancel.addEventListener('click', closeCreate);
+  createName.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); doCreate(); } });
+  scrim.addEventListener('pointerdown', function (e) { if (e.target === scrim) closeCreate(); });
+
+  /* ═══ view toggle + table directory (task 1731) ════════════════════════════
+     A scannable, searchable, sortable alternative to the circle sky. Rows are
+     built from the same PROJECTS data; clicking a row dives in exactly like an
+     orb. Circles stay the default landing (owner's call); Table is a toggle. */
+  function setBrowseView(v) {
+    browseView = v;
+    if (vtCircles) { vtCircles.classList.toggle('active', v === 'space'); vtCircles.setAttribute('aria-selected', v === 'space'); }
+    if (vtTable) { vtTable.classList.toggle('active', v === 'table'); vtTable.setAttribute('aria-selected', v === 'table'); }
+  }
+  function showCircles() {
+    if (diving) return;
+    document.body.className = 'view-space';
+    setBrowseView('space');
+    if (!userTouched) fitToView();
+  }
+  function showTable() {
+    if (diving) return;
+    hideHover(); closeSearch();
+    document.body.className = 'view-table';
+    setBrowseView('table');
+    renderTable();
+    setTimeout(function () { if (tvSearchInput) tvSearchInput.focus(); }, 40);
+  }
+  if (vtCircles) vtCircles.addEventListener('click', showCircles);
+  if (vtTable) vtTable.addEventListener('click', showTable);
+  if (tvCreate) tvCreate.addEventListener('click', openCreate);
+
+  function typeMeta(t) {
+    if (t === 'self') return { label: 'Platform', cls: 'tp-self', act: 'Enter →' };
+    if (t === 'link') return { label: 'Live', cls: 'tp-live', act: 'Open →' };
+    return { label: 'Sample', cls: 'tp-sample', act: 'Preview →' };
+  }
+  function tvSortValue(p, key) {
+    if (key === 'builders') return (typeof p.builders === 'number' ? p.builders : -1);
+    if (key === 'type') return p.type;
+    return (p.name || '').toLowerCase();
+  }
+  function tvRows() {
+    var q = ((tvSearchInput && tvSearchInput.value) || '').trim().toLowerCase();
+    var rows = PROJECTS.filter(function (p) { return !q || matches(p, q); });
+    var key = tvSort.key, dir = tvSort.dir;
+    rows.sort(function (a, b) {
+      var av = tvSortValue(a, key), bv = tvSortValue(b, key);
+      if (av < bv) return -1 * dir;
+      if (av > bv) return 1 * dir;
+      if ((a.builders || 0) !== (b.builders || 0)) return (b.builders || 0) - (a.builders || 0);   // tie-break
+      return (a.name || '').localeCompare(b.name || '');
+    });
+    return { rows: rows, q: q };
+  }
+  function renderTable() {
+    if (!tvBody) return;
+    var f = tvRows();
+    tvBody.innerHTML = '';
+    if (!f.rows.length) {
+      var tr0 = document.createElement('tr');
+      tr0.innerHTML = '<td class="tv-empty" colspan="5">No projects match “' + esc(f.q) + '”</td>';
+      tvBody.appendChild(tr0);
+    } else {
+      var frag = document.createDocumentFragment();
+      f.rows.forEach(function (p) {
+        var tm = typeMeta(p.type);
+        var chips = (p.tags || []).slice(0, 3).map(function (t) { return '<span class="tv-chip">' + esc(t) + '</span>'; }).join('');
+        var tr = document.createElement('tr');
+        tr.className = 'tv-row';
+        tr.dataset.id = p.id;
+        tr.style.setProperty('--acc', p.accent);
+        tr.innerHTML =
+          '<td class="tv-proj"><span class="tv-dot"></span><span class="tv-proj-txt">' +
+            '<span class="tv-name">' + esc(p.name) + (p.type === 'self' ? '<span class="tv-self">this platform</span>' : '') + '</span>' +
+            '<span class="tv-tag">' + esc(p.tagline || '') + '</span></span></td>' +
+          '<td class="tv-num">' + (typeof p.builders === 'number' ? p.builders : '—') + '</td>' +
+          '<td class="col-type"><span class="tv-pill ' + tm.cls + '">' + tm.label + '</span></td>' +
+          '<td class="tv-tags col-tags"><span class="tv-tagwrap">' + chips + '</span></td>' +
+          '<td class="tv-act col-act"><button class="tv-go" type="button">' + tm.act + '</button></td>';
+        frag.appendChild(tr);
+      });
+      tvBody.appendChild(frag);
+    }
+    if (tvCount) tvCount.textContent = f.q
+      ? (f.rows.length + ' of ' + PROJECTS.length)
+      : (PROJECTS.length + ' project' + (PROJECTS.length === 1 ? '' : 's'));
+    updateSortHeaders();
+  }
+  function updateSortHeaders() {
+    var ths = document.querySelectorAll('#table-view th.sortable');
+    Array.prototype.forEach.call(ths, function (th) {
+      var on = th.dataset.sort === tvSort.key;
+      th.classList.toggle('sorted', on);
+      th.setAttribute('aria-sort', on ? (tvSort.dir === 1 ? 'ascending' : 'descending') : 'none');
+      var ind = th.querySelector('.sort-ind');
+      if (ind) ind.textContent = on ? (tvSort.dir === 1 ? '▲' : '▼') : '';
+    });
+  }
+  if (tvBody) tvBody.addEventListener('click', function (e) {
+    var tr = e.target.closest('.tv-row');
+    if (tr) enterProject(tr.dataset.id, tr);
+  });
+  Array.prototype.forEach.call(document.querySelectorAll('#table-view th.sortable'), function (th) {
+    th.addEventListener('click', function () {
+      var key = th.dataset.sort;
+      if (tvSort.key === key) tvSort.dir *= -1;
+      else { tvSort.key = key; tvSort.dir = (key === 'builders') ? -1 : 1; }
+      renderTable();
+    });
+  });
+  if (tvSearchInput) tvSearchInput.addEventListener('input', renderTable);
+
+  /* ═══ the entry gate — type "bongos" to enter (relocated into space) ═══════ */
+  var ENTRY_TARGET = 'bongos', eProg = 0, eDone = false;
+  function eRender() { var h = ''; for (var i = 0; i < eProg; i++) h += '<b>' + ENTRY_TARGET[i] + '</b>'; eTyped.innerHTML = h; }
+  function eShake() { eCli.classList.add('shake'); setTimeout(function () { eCli.classList.remove('shake'); }, 340); }
+  function eFlashHint(msg) {
+    eHint.classList.add('flash-x'); if (msg) eHint.innerHTML = msg;
+    setTimeout(function () { eHint.classList.remove('flash-x'); if (!eDone && !entering) eHint.innerHTML = 'type <b>bongos</b> to enter'; }, 820);
+  }
+  function eComplete() { eDone = true; eCaret.style.display = 'none'; eHint.innerHTML = 'press <b>enter</b>'; eEnter.classList.add('lit'); }
+  function entryKey(e) {
+    if (entering) return;
+    if (e.key === 'Enter') { e.preventDefault(); if (eDone) enterSite(); else { eShake(); eFlashHint('finish typing <b>bongos</b>'); } return; }
+    if (e.key === 'Backspace') { e.preventDefault(); if (eProg > 0 && !eDone) { eProg--; eRender(); } return; }
+    if (e.key && e.key.length === 1 && !eDone) {
+      e.preventDefault();
+      if (e.key.toLowerCase() === ENTRY_TARGET[eProg]) { eProg++; eRender(); if (eProg === ENTRY_TARGET.length) eComplete(); }
+      else eShake();
+    }
+  }
+  if (eEnter) eEnter.addEventListener('click', function () { if (eDone && !entering) enterSite(); });
+
+  function enterSite() {
+    if (entering) return;
+    entering = true;
+    flash.style.setProperty('--fx', '50%'); flash.style.setProperty('--fy', '46%');
+    flash.classList.remove('go'); void flash.offsetWidth; flash.classList.add('go');
+    entryEl.classList.add('leaving');
+    // Vanity door (claudebongos.com / geminibongos.com): play the same enter
+    // flash, then hand off to cloudbongos.com and land straight on the orbs
+    // (?entered=1). A door never reveals a local space of its own — the orbs
+    // live on cloudbongos.com.
+    if (BRAND.redirect) {
+      setTimeout(function () { location.href = BRAND.redirect; }, 420);
+      return;
+    }
+    setTimeout(function () {
+      document.body.className = 'view-space';
+      setBrowseView('space');
+      userTouched = false;
+      fitToView();
+      canvas.style.opacity = '0';
+      canvas.style.transition = 'opacity .55s ease';
+      setTimeout(function () { canvas.style.opacity = '1'; }, 30);
+    }, 380);
+  }
+
+  // ESC on the circles page rises back UP to the entry gate — retype bongos.
+  function backToEntry() {
+    hideHover(); closeSearch();
+    setBrowseView('space');
+    entering = false; eProg = 0; eDone = false;
+    eEnter.classList.remove('lit'); eCaret.style.display = 'inline-block';
+    eHint.innerHTML = 'type <b>bongos</b> to enter'; eRender();
+    entryEl.classList.remove('leaving');
+    flash.style.setProperty('--fx', '50%'); flash.style.setProperty('--fy', '46%');
+    flash.classList.remove('go'); void flash.offsetWidth; flash.classList.add('go');
+    document.body.className = 'view-entry';
+    canvas.style.opacity = '0';
+    userTouched = false;
+  }
+
+  // Open the orbs directly — no type-bongos step, no entry flash. Used when a
+  // vanity door already handled the entry and redirected here (?entered=1), so
+  // the visitor lands right on the sky instead of typing "bongos" twice.
+  function openSpaceDirect() {
+    entering = true;
+    eCaret.style.display = 'none';
+    entryEl.classList.add('leaving');
+    document.body.className = 'view-space';
+    // The <head> anti-flash rule (html.direct-orbs #entry{display:none}) has done
+    // its job — hand off to the view classes and drop it so a later ESC can bring
+    // the entry back (backToEntry → view-entry).
+    try { document.documentElement.classList.remove('direct-orbs'); } catch (e) {}
+    setBrowseView('space');
+    userTouched = false;
+    fitToView();
+    canvas.style.opacity = '0';
+    canvas.style.transition = 'opacity .55s ease';
+    setTimeout(function () { canvas.style.opacity = '1'; }, 30);
+  }
+
+  /* ─── starfield (task 1725: actually in space) ───────────────────────────── */
+  function makeStars(n) {
+    if (!starfield) return;
+    var frag = document.createDocumentFragment();
+    for (var i = 0; i < n; i++) {
+      var s = document.createElement('div');
+      s.className = 'star';
+      var big = Math.random() < 0.14;
+      var sz = big ? (Math.random() * 2.0 + 1.8) : (Math.random() * 1.3 + 0.6);
+      s.style.width = sz.toFixed(1) + 'px'; s.style.height = sz.toFixed(1) + 'px';
+      s.style.left = (Math.random() * 100).toFixed(2) + '%';
+      s.style.top = (Math.random() * 100).toFixed(2) + '%';
+      s.style.opacity = (Math.random() * 0.55 + 0.3).toFixed(2);
+      if (Math.random() < 0.35) {
+        s.style.animation = 'twinkle ' + (2.2 + Math.random() * 3).toFixed(1) + 's ease-in-out infinite';
+        s.style.animationDelay = (Math.random() * 3).toFixed(1) + 's';
+      }
+      frag.appendChild(s);
+    }
+    starfield.appendChild(frag);
+  }
+
+  /* ─── Bongo Buddha idle mascot (ADR 0088) ──────────────────────────────────
+     Injected + cycled above the download-page search bar. The sprite's own
+     motion IS the bongo-play, so under prefers-reduced-motion we hold a single
+     frame rather than cycling. 44 webp frames @ 12fps — same pattern as
+     anim/mascot.html. Lives inside #land, which only renders in view-download,
+     so it costs nothing off that page. */
+  function mountBuddha() {
+    var fig = document.getElementById('buddha-fig');
+    if (!fig) return;
+    var N = 44, FPS = 12, frames = [];
+    for (var i = 0; i < N; i++) {
+      var im = document.createElement('img');
+      im.src = '../assets/anim/idle/frame_' + (i < 10 ? '0' + i : i) + '.webp';
+      im.alt = ''; im.decoding = 'async';
+      im.style.display = i === 0 ? 'block' : 'none';
+      fig.appendChild(im); frames.push(im);
+    }
+    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    // rAF + time accumulator: locked to FPS regardless of display refresh, and
+    // it pauses when the tab is hidden (matches the download scene's tick loop).
+    var cur = 0, prev = performance.now(), acc = 0, SPF = 1000 / FPS;
+    (function loop(now) {
+      acc += now - prev; prev = now;
+      if (acc >= SPF) {
+        var adv = Math.floor(acc / SPF); acc -= adv * SPF;
+        frames[cur].style.display = 'none';
+        cur = (cur + adv) % N;
+        frames[cur].style.display = 'block';
+      }
+      requestAnimationFrame(loop);
+    })(prev);
+  }
+
+  /* ─── self-typing logo (task 1902) ─────────────────────────────────────────
+     The top-left wordmark idles as the brand "Cloud Bongos" for a while after
+     load, then comes alive like a terminal: it swaps the lead word "Cloud" for a
+     lowercase platform (claude, gemini, chatgpt, …) and re-TYPES "bongos" after
+     it, with a blinking caret — a living nudge that the ritual works in any AI.
+     Reduced motion holds the static brand wordmark. */
+  function mountLogoTerminal() {
+    // Re-entrancy guard: only one typing chain may ever run. Two concurrent
+    // cycles mutating #mk-tail would interleave letters into garbled text; the
+    // single boot call can't do that today, but a future re-mount (or a
+    // tab-throttle timer catch-up) must not be able to spawn a second chain.
+    if (mountLogoTerminal._mounted) return;
+    mountLogoTerminal._mounted = true;
+    var lead = document.getElementById('mk-lead');
+    var tail = document.getElementById('mk-tail');
+    var caret = document.getElementById('mk-caret');
+    if (!lead || !tail) return;
+    lead.textContent = BRAND.display.toLowerCase();   // rest: lowercase (terminal format, door-aware)
+    tail.textContent = ' bongos';  // lowercase "cloud bongos" at rest, matching the terminal
+    if (prefersReduced) return;
+
+    var PLATFORMS = ['claude', 'gemini', 'chatgpt', 'copilot', 'grok', 'perplexity'];
+    // leading nbsp = the word gap, typed AFTER the pre-type blink so the caret
+    // first sits flush against the platform word (no space), like the entry screen.
+    var CHARS = ' bongos'.split('');
+    var pi = 0;
+    var IDLE_START = 8000, TYPE_MS = 210, ERASE_MS = 130, HOLD_MS = 5200, GAP_MS = 1000, BLINK_BEFORE = 2100;
+
+    // type/erase one letter at a time as its own popping <b> (the entry terminal's
+    // per-letter pop), so the caret always trails the last real character flush.
+    function typeWord(done) {
+      tail.innerHTML = '';
+      var i = 0;
+      (function step() {
+        if (i >= CHARS.length) { done(); return; }
+        var b = document.createElement('b');
+        b.className = 'mk-ch';
+        b.textContent = CHARS[i];
+        tail.appendChild(b);
+        i++;
+        setTimeout(step, TYPE_MS);
+      })();
+    }
+    function eraseWord(done) {
+      (function step() {
+        if (!tail.lastChild) { done(); return; }
+        tail.removeChild(tail.lastChild);
+        setTimeout(step, ERASE_MS);
+      })();
+    }
+    function cycle() {
+      lead.classList.add('swap');       // fade the old lead out
+      setTimeout(function () {
+        lead.textContent = PLATFORMS[pi];  // lowercase platform
+        lead.classList.remove('swap');
+        tail.innerHTML = '';            // empty → caret sits flush right after the new word
+        if (caret) caret.classList.add('on');
+        setTimeout(function () {        // let the caret blink a couple of times first
+          typeWord(function () {        // then type " bongos" letter by letter
+            setTimeout(function () {    // hold on the full "{platform} bongos"
+              eraseWord(function () {
+                pi = (pi + 1) % PLATFORMS.length;
+                setTimeout(cycle, GAP_MS);
+              });
+            }, HOLD_MS);
+          });
+        }, BLINK_BEFORE);
+      }, 360);
+    }
+    setTimeout(cycle, IDLE_START);
+  }
+
+  /* ─── minimap (task 1897) ─────────────────────────────────────────────────
+     A live overview of the whole orb cluster in the bottom-right, with a
+     viewport rectangle for the current pan/zoom. World is mapped from a fixed
+     square centred on the origin (killDrift keeps the cluster there) so the
+     view rect doesn't jitter as the bounds breathe. Click/drag it to recentre. */
+  var mmEl = document.getElementById('minimap');
+  var mmCanvas = document.getElementById('minimap-canvas');
+  var mmctx = mmCanvas ? mmCanvas.getContext('2d') : null;
+  var mmW = 0, mmH = 0, mmDPR = 1;
+  var MM_HALF = 1000;   // world half-extent (px) the minimap spans from the origin
+
+  function sizeMinimap() {
+    if (!mmCanvas || !mmEl) return;
+    mmDPR = window.devicePixelRatio || 1;
+    var r = mmEl.getBoundingClientRect();
+    mmW = r.width; mmH = r.height;
+    mmCanvas.width = Math.max(1, Math.round(mmW * mmDPR));
+    mmCanvas.height = Math.max(1, Math.round(mmH * mmDPR));
+  }
+  function mmScale() { return Math.min(mmW, mmH) / (2 * MM_HALF); }
+
+  function drawMinimap() {
+    if (!mmctx || !isSpace()) return;
+    // sizeMinimap() ran once at boot while the minimap was still display:none
+    // (body.view-entry), so it measured 0×0 — and it was never re-run on entering
+    // the orbs. Re-measure the first frame it's actually on screen: otherwise it
+    // renders blank AND mmScale() stays 0, so a click divides by zero and blows
+    // panX/panY up to NaN — which kills the grid and freezes every control.
+    if (!mmW) sizeMinimap();
+    if (!mmW) return;   // still not laid out this frame — retry next frame
+    mmctx.setTransform(mmDPR, 0, 0, mmDPR, 0, 0);
+    mmctx.clearRect(0, 0, mmW, mmH);
+    var s = mmScale(), cxp = mmW / 2, cyp = mmH / 2;
+    // the viewport rectangle (visible world region → map)
+    var vx0 = (0 - panX) / zoom, vy0 = (0 - panY) / zoom;
+    var vx1 = (W - panX) / zoom, vy1 = (H - panY) / zoom;
+    mmctx.fillStyle = 'rgba(255,217,138,0.10)';
+    mmctx.strokeStyle = 'rgba(255,217,138,0.85)';
+    mmctx.lineWidth = 1;
+    mmctx.fillRect(cxp + vx0 * s, cyp + vy0 * s, (vx1 - vx0) * s, (vy1 - vy0) * s);
+    mmctx.strokeRect(cxp + vx0 * s, cyp + vy0 * s, (vx1 - vx0) * s, (vy1 - vy0) * s);
+    // the orbs
+    for (var i = 0; i < items.length; i++) {
+      var it = items[i], mx = cxp + it.x * s, my = cyp + it.y * s, rr = Math.max(1.6, it.r * s);
+      mmctx.beginPath(); mmctx.arc(mx, my, rr, 0, Math.PI * 2);
+      mmctx.fillStyle = it.proj.accent || '#fb923c';
+      mmctx.globalAlpha = it.proj.type === 'self' ? 1 : 0.9; mmctx.fill();
+      if (it.proj.type === 'self') { mmctx.globalAlpha = 1; mmctx.lineWidth = 1.5; mmctx.strokeStyle = 'rgba(255,255,255,.9)'; mmctx.stroke(); }
+    }
+    mmctx.globalAlpha = 1;
+  }
+
+  if (mmCanvas) {
+    var mmDown = false;
+    var mmRecenter = function (e) {
+      // Measure the minimap LIVE from its on-screen rect rather than the cached
+      // mmW/mmH. sizeMinimap() first runs at boot while the minimap is still
+      // display:none (0×0) and only re-runs on window resize — so before any resize
+      // the cached scale is 0, and a click would divide pan up to ±Infinity → NaN,
+      // wiping the grid and freezing every control. The live rect is always correct.
+      var r = mmCanvas.getBoundingClientRect();
+      var s = Math.min(r.width, r.height) / (2 * MM_HALF);
+      if (!s) return;   // truly not laid out (hidden / zero-size) — ignore, never /0
+      var wx = (e.clientX - r.left - r.width / 2) / s, wy = (e.clientY - r.top - r.height / 2) / s;
+      userTouched = true;
+      panX = W / 2 - wx * zoom; panY = H / 2 - wy * zoom;
+      clampPan(); applyCanvas(); hideHover();
+    };
+    // stopPropagation so a click on the minimap (a child of #space) never reaches
+    // the #space pan/create handler underneath it.
+    mmCanvas.addEventListener('pointerdown', function (e) {
+      if (diving || anyOverlay()) return;
+      mmDown = true; try { mmCanvas.setPointerCapture(e.pointerId); } catch (_) {}
+      mmRecenter(e); e.preventDefault(); e.stopPropagation();
+    });
+    mmCanvas.addEventListener('pointermove', function (e) { if (mmDown) { mmRecenter(e); e.stopPropagation(); } });
+    window.addEventListener('pointerup', function () { mmDown = false; });
+  }
+
+  /* ─── space whale (task 1898) ──────────────────────────────────────────────
+     A whale flies from the Cloud Bongos orb to a project when it UPDATES, and
+     flies BACK (project → Cloud Bongos) when a project pushes a module. It's
+     positioned in screen space each frame from the two orbs' live positions, so
+     it tracks the drifting cluster + any pan/zoom. On arrival the target orb
+     pings a gold ring. The self-driving loop keeps the sky alive; a real feed can
+     drive it through the window.cbWhale seam (the aiAnswer() "wire it later"
+     precedent). The art faces left, so a rightward flight flips horizontally. */
+  var whaleEl = document.getElementById('whale');
+  var whaleImg = document.getElementById('whale-img');
+  var WHALE_SRC = '../world/assets/creatures/creature-whale-glide.png';   // cargo pose = ../world/assets/creatures/creature-whale-cargo.png
+  var flight = null;
+  var WHALE_DUR = 8500;   // slow, drifting flight
+  var WHALE_LEAD_CAP = 2.2;   // seconds — cap the velocity extrapolation so a chaotic orb can't fling the aim point
+
+  function itemForId(id) { for (var i = 0; i < items.length; i++) if (items[i].proj.id === id) return items[i]; return null; }
+  function minOrbDiam() { var m = Infinity; for (var i = 0; i < items.length; i++) m = Math.min(m, items[i].r * 2); return isFinite(m) ? m : 80; }
+
+  function startFlight(fromId, toId, type) {
+    if (flight || !whaleEl || prefersReduced) return;
+    var a = itemForId(fromId), b = itemForId(toId);
+    if (!a || !b || a === b) return;
+    if (whaleImg && whaleImg.getAttribute('src') !== WHALE_SRC) whaleImg.src = WHALE_SRC;
+    // sx/sy = launch point (source orb, world coords). worldW = whale width in
+    // world px — no more than 1/3 of the SMALLEST orb, so it scales with the orbs
+    // and reads as a little creature next to a world. dir captured once (no mid-
+    // flight flips). Everything lives in world space so it pans/zooms with the sky.
+    flight = { sx: a.x, sy: a.y, b: b, t0: performance.now(), dur: WHALE_DUR,
+      type: type || 'update', worldW: minOrbDiam() / 3, dir: (b.x >= a.x) ? -1 : 1 };
+    // Size + position on THIS tick, before .show fades it in — otherwise the
+    // first frame renders at the image's intrinsic ~1280px width (the full-screen
+    // "balloon" bug) until the rAF loop's first updateWhale() shrinks it.
+    updateWhale();
+    whaleEl.classList.add('show');
+  }
+
+  function endFlight() {
+    if (flight && flight.b && flight.b.el) {
+      var el = flight.b.el;
+      el.classList.remove('pinged'); void el.offsetWidth; el.classList.add('pinged');
+      setTimeout((function (e) { return function () { e.classList.remove('pinged'); }; })(el), 950);
+    }
+    flight = null;
+    if (whaleEl) whaleEl.classList.remove('show');
+  }
+
+  function updateWhale() {
+    if (!whaleEl || !flight) return;
+    var elapsed = performance.now() - flight.t0;
+    var p = elapsed / flight.dur;
+    if (p >= 1) { endFlight(); return; }
+    var pe = p * p * (3 - 2 * p);   // smoothstep ease
+    var b = flight.b;
+    // INTERCEPT, don't chase — and follow the orb's CURVED orbital path, not a
+    // straight line: a 2nd-order prediction using the orb's live acceleration
+    // (it.fx/fy, the n-body force per step): pos + vel·t + ½·accel·t². Recomputed
+    // every frame (a predictor-corrector), with the lead t decaying to 0 at
+    // arrival so the aim converges exactly onto the live orb.
+    var lead = Math.min((flight.dur - elapsed) / 1000, WHALE_LEAD_CAP);
+    var half = 0.5 * lead * lead;
+    var ax = b.fx || 0, ay = b.fy || 0;
+    var tx = b.x + b.vx * lead + ax * half;
+    var ty = b.y + b.vy * lead + ay * half;
+    var wx = flight.sx + (tx - flight.sx) * pe;
+    var wy = flight.sy + (ty - flight.sy) * pe - 34 * Math.sin(p * Math.PI);   // gentle world-space arc
+    var x = panX + wx * zoom, y = panY + wy * zoom;
+    whaleEl.style.width = (flight.worldW * zoom).toFixed(1) + 'px';
+    whaleEl.style.transform = 'translate(' + x.toFixed(1) + 'px,' + y.toFixed(1) + 'px) translate(-50%,-50%) scaleX(' + flight.dir + ')';
+  }
+
+  // self-driving demo feed: gently animate real-looking project activity so the
+  // sky stays alive until a live registry feed is wired to window.cbWhale.
+  function maybeFly() {
+    if (flight || !isSpace() || diving || document.hidden) return;
+    var others = items.filter(function (it) { return it.proj.type !== 'self'; });
+    if (!others.length || !itemForId('cloud-bongos')) return;
+    var target = others[Math.floor(Math.random() * others.length)];
+    if (Math.random() < 0.4) startFlight(target.proj.id, 'cloud-bongos', 'module');  // a module push — fly back
+    else startFlight('cloud-bongos', target.proj.id, 'update');                       // a project update
+  }
+  function scheduleWhale() {
+    setTimeout(function () { maybeFly(); scheduleWhale(); }, 9000 + Math.random() * 9000);
+  }
+  // dormant seam for a real feed (the aiAnswer precedent): cbWhale.update(id) /
+  // cbWhale.modulePush(id).
+  window.cbWhale = {
+    update: function (id) { startFlight('cloud-bongos', id, 'update'); },
+    modulePush: function (id) { startFlight(id, 'cloud-bongos', 'module'); }
+  };
+
+  /* ─── global keys ─────────────────────────────────────────────────────────── */
+  window.addEventListener('keydown', function (e) {
+    // DIVE: any key skips the in-flight dive cinematic and drops into the world
+    if (descent && descent.classList.contains('playing')) { e.preventDefault(); landInWorld(); return; }
+    // ENTRY: every key drives the type-bongos terminal
+    if (document.body.classList.contains('view-entry')) { entryKey(e); return; }
+
+    if (e.key === 'Escape') {
+      if (signInOpen) { e.preventDefault(); closeSignIn(); return; }
+      if (createOpen) { e.preventDefault(); closeCreate(); return; }
+      if (searchOpen) { e.preventDefault(); closeSearch(); return; }
+      if (document.body.classList.contains('view-download') || document.body.classList.contains('view-detail')) {
+        e.preventDefault(); exitToSpace(); return;
+      }
+      if (document.body.classList.contains('view-table')) {
+        e.preventDefault();
+        if (tvSearchInput && document.activeElement === tvSearchInput && tvSearchInput.value) {
+          tvSearchInput.value = ''; renderTable();
+        } else backToEntry();
+        return;
+      }
+      if (document.body.classList.contains('view-space')) { e.preventDefault(); backToEntry(); return; }
+      return;
+    }
+
+  });
+
+  /* ─── SHIFT-tap toggles the in-view search (task 1901) ─────────────────────
+     A clean Shift tap (pressed + released with no other key in between) opens
+     or closes search. Tracking "used as a modifier" means Shift held for a
+     capital while typing in the search box never toggles it. Esc also closes. */
+  var shiftDown = false, shiftAsMod = false;
+  window.addEventListener('keydown', function (e) {
+    if (e.key === 'Shift') { shiftDown = true; shiftAsMod = false; }
+    else if (shiftDown) shiftAsMod = true;   // Shift + another key → a modifier, not a tap
+  }, true);
+  window.addEventListener('keyup', function (e) {
+    if (e.key !== 'Shift') return;
+    var tap = shiftDown && !shiftAsMod;
+    shiftDown = false; shiftAsMod = false;
+    if (!tap || diving || createOpen || !isSpace()) return;
+    searchOpen ? closeSearch() : openSearch();
+  });
+
+  /* ─── resize ─────────────────────────────────────────────────────────────── */
+  addEventListener('resize', function () {
+    W = innerWidth; H = innerHeight;
+    sizeGrid();
+    sizeMinimap();
+    if (!userTouched && (document.body.classList.contains('view-space') || document.body.classList.contains('view-entry'))) fitToView();
+    else { clampPan(); applyCanvas(); }
+  });
+
+  /* ─── live project catalog (task 1002260) ────────────────────────────────
+     The sky's real content. Fetch the platform's public, curated featured-
+     projects feed and pop each LIVE project in via the same dynamic-add path
+     the create flow uses (makeCircle → items/byId → swirl → rebalance). Same-
+     origin on the apex (Caddy proxies /api/* to the app); on a vanity door the
+     feed lives on the hub and the endpoint is CORS-enabled. Fails soft — an
+     empty/erroring feed just leaves the Cloud Bongos self-orb (a sparse sky). */
+  function catalogAccent(seed) {
+    var h = 2166136261; seed = String(seed || '');
+    for (var i = 0; i < seed.length; i++) { h ^= seed.charCodeAt(i); h = (h * 16777619) >>> 0; }
+    return 'hsl(' + (h % 360) + ', 66%, 60%)';
+  }
+  function catalogSlug(origin) {
+    try { return new URL(origin).hostname.replace(/[^a-z0-9]+/gi, '-'); }
+    catch (e) { return String(origin || '').replace(/[^a-z0-9]+/gi, '-'); }
+  }
+  function projectFromCatalog(row) {
+    var origin = row.origin || '';
+    return {
+      id: 'cat-' + catalogSlug(origin),
+      name: row.name || catalogSlug(origin),
+      type: 'link',
+      url: origin,
+      builders: null,                        // the public feed carries no count
+      accent: catalogAccent(origin || row.name),
+      tagline: row.tagline || '',
+      description: row.tagline || '',
+      tags: ((row.name || '') + ' ' + (row.tagline || '')).toLowerCase().split(/\s+/).filter(Boolean),
+      preview: row.art_url || undefined
+    };
+  }
+  function addLiveOrb(proj) {
+    if (byId[proj.id]) return;                                        // already placed
+    try { if (proj.url && new URL(proj.url).hostname === location.hostname) return; } catch (e) {}  // never dupe ourselves
+    PROJECTS.push(proj);
+    var c = items.length ? barycenter() : { x: 0, y: 0 };
+    var ang = Math.random() * Math.PI * 2, rad = SPIRAL_STEP * Math.sqrt(items.length + 1);
+    var it = makeCircle(proj, c.x + Math.cos(ang) * rad, c.y + Math.sin(ang) * rad * 0.82);
+    items.push(it); byId[proj.id] = proj;
+    var b = barycenter(), jit = GRAV.SWIRL * 60 * GRAV.SWIRL_JITTER;   // join the sim (mirror doCreate)
+    it.vx = -(it.y - b.y) * GRAV.SWIRL + (Math.random() - 0.5) * 2 * jit;
+    it.vy = (it.x - b.x) * GRAV.SWIRL + (Math.random() - 0.5) * 2 * jit;
+  }
+  function loadProjects() {
+    var url = (IS_DOOR ? 'https://cloudbongos.com' : '') + '/api/bongos/projects/featured';
+    return fetch(url, { credentials: 'same-origin' })
+      .then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (j) {
+        var rows = (j && j.projects) || [];
+        if (!rows.length) return;
+        rows.forEach(function (row) { addLiveOrb(projectFromCatalog(row)); });
+        killDrift(); keTarget = kineticEnergy();
+        renderTable();
+        if (!userTouched && !isSpace()) fitToView();
+      })
+      .catch(function () { /* sparse sky is fine */ });
+  }
+
+  /* ─── boot ───────────────────────────────────────────────────────────────── */
+  document.body.className = 'view-entry';
+  makeStars(140);
+  sizeGrid();
+  sizeMinimap();
+  mountBuddha();
+  mountLogoTerminal();
+  scheduleWhale();
+  layout();
+  eRender();
+  loadProjects();   // pop the real, live catalog projects into the sky (task 1002260)
+  // Frame the constellation now (revealed when the visitor types bongos). The
+  // circles stay hidden behind the entry terminal until then.
+  fitToView();
+  canvas.style.opacity = '0';
+  // Arrived from a vanity door (?entered=1)? Skip the type-bongos entry and
+  // open the orbs immediately.
+  if (wantsDirectOrbs()) openSpaceDirect();
+  addEventListener('load', function () { if (!userTouched && !isSpace()) fitToView(); });
+  setTimeout(function () { if (!userTouched && !isSpace()) fitToView(); }, 60);
+  setTimeout(function () { if (!userTouched && !isSpace()) fitToView(); }, 300);
+  requestAnimationFrame(tick);
+})();