<!-- NEW2 — TEST 2 · THE DISTRICT OF 800 · part 9 -->
not sink into a building either: if its resting
    // place falls inside a solid, rise above that solid's roof.
    const hit = hitsCollider(_want.x, _want.z);
    if (hit) _want.y = Math.max(_want.y, hit.top + 1.6);
    if (_want.y < king.BOOM_MIN_Y) _want.y = king.BOOM_MIN_Y;
    const k = 1 - Math.exp(-dt * 4.5);
    camera.position.lerp(_want, k);
    _look.set(king.x + fx * 5, 1.7, king.z + fz * 5);
    camera.lookAt(_look);
    return camera.position;
  };

  return king;
}

if (typeof module !== 'undefined' && module.exports) module.exports = { makeKing };
if (typeof window !== 'undefined') window.makeKing = makeKing;
export { makeKing };
export default makeKing;


===== FILE: public/new2/index.html =====
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>NEW2 — Test 2: The District of 800</title>
<style>
  html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #0a0e14; }
  #app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
  .masthead {
    position: fixed; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none;
    padding: 14px 16px 26px; color: #f3e9d2; text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    background: linear-gradient(180deg, rgba(5,6,10,.55), rgba(5,6,10,0));
  }
  .masthead .kicker { font-size: 11px; letter-spacing: .34em; color: #d8a944; text-transform: uppercase; }
  .masthead h1 { margin: 4px 0 2px; font-size: 26px; font-weight: 600; letter-spacing: .06em; }
  .masthead .sub { font-size: 13px; font-style: italic; color: #e8dfc8; }
  .masthead .crew { margin-top: 5px; font-size: 11px; letter-spacing: .14em; color: #cfc4a5; text-transform: uppercase; }
  .census {
    position: fixed; left: 12px; bottom: 12px; z-index: 5; pointer-events: none;
    max-width: calc(100vw - 48px); box-sizing: border-box;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.65;
    color: #bfe3c0; background: rgba(6,10,7,.62); border: 1px solid rgba(150,220,160,.25);
    border-radius: 10px; padding: 8px 12px; white-space: pre-wrap; overflow-wrap: break-word;
  }
  @media (max-width: 520px) {
    .census { font-size: 10.5px; line-height: 1.6; left: 8px; bottom: 8px; padding: 7px 10px; }
  }
  .census b { color: #ffe9a8; font-weight: 600; }
  .census .spot { color: #ffd9ec; }
  .err { color: #ff9d8a; }
  #enterBtn {
    position: fixed; top: 118px; right: 12px; z-index: 6;
    font-family: Georgia, 'Times New Roman', serif; font-size: 13px; font-weight: 700;
    letter-spacing: .18em; color: #241a02; padding: 12px 18px; border-radius: 999px;
    border: 1px solid #8a6a1d; cursor: pointer;
    background: linear-gradient(180deg, #f6d97b, #d8a944 55%, #b9862f);
    box-shadow: 0 2px 14px rgba(216,169,68,.45), inset 0 1px 0 rgba(255,255,255,.55);
  }
  #enterBtn:active { transform: translateY(1px); }
  #pad { display: none; }
  body.inside #pad { display: block; }
  .padCluster { position: fixed; z-index: 6; display: flex; gap: 14px; }
  .padTurn { left: 14px; bottom: 168px; }
  .padMove { right: 14px; bottom: 24px; flex-direction: column; }
  .padCluster button {
    width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(246,217,123,.55);
    background: rgba(10,12,10,.55); color: #f6d97b; font-size: 24px; line-height: 1;
    touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer;
  }
  .padCluster button.on { background: rgba(216,169,68,.75); color: #241a02; }
  #app canvas { touch-action: none; }
</style>
</head>
<body>
<div id="app"></div>

<div class="masthead">
  <div class="kicker">Test 2 at /new2 · made known to all</div>
  <h1>THE DISTRICT OF 800</h1>
  <div class="sub">eight hundred buildings · one fashion · every face its own</div>
  <div class="crew">The Citywright · The Stagehand — assembled by Solid, at the King's word</div>
</div>
<div class="census" id="census">raising the district…</div>
<button id="enterBtn" type="button">ENTER THE CITY</button>
<div id="pad">
  <div class="padCluster padTurn">
    <button type="button" data-k="left" aria-label="turn left">◀</button>
    <button type="button" data-k="right" aria-label="turn right">▶</button>
  </div>
  <div class="padCluster padMove">
    <button type="button" data-k="fwd" aria-label="walk forward">▲</button>
    <button type="button" data-k="back" aria-label="walk back">▼</button>
  </div>
</div>

<!-- the figure factory: registers window.makeFigure / makeBike / poses / gait -->
<script src="citizens.js?v=1"></script>

<script type="module">
import * as THREE from './lib/three.module.js';
import { makeStage } from './stage.js?v=1';
import { buildDistrict } from './buildings.js?v=1';
import { makeKing } from './enter.js?v=1';

const diag = window.__NEW2 = { frames: 0, errors: [], buil