npm - @a2f0/skyline - Versions diffs - 0.0.0-stage → 0.1.2 - Mend

@a2f0/skyline 0.0.0-stage → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/NOTICE.md +20 -0
package/README.md +52 -2
package/docs/package.md +224 -0
package/docs/skyline-geography.md +503 -0
package/lib/models/aon-center.d.ts +4 -0
package/lib/models/aon-center.js +60 -0
package/lib/models/aon-geographic.d.ts +9 -0
package/lib/models/aon-geographic.js +35 -0
package/lib/models/aon-tower.d.ts +23 -0
package/lib/models/aon-tower.js +130 -0
package/lib/models/blue-cross-geographic.d.ts +14 -0
package/lib/models/blue-cross-geographic.js +248 -0
package/lib/models/borg-warner-geographic.d.ts +20 -0
package/lib/models/borg-warner-geographic.js +143 -0
package/lib/models/buckingham-geographic.d.ts +10 -0
package/lib/models/buckingham-geographic.js +121 -0
package/lib/models/building-kit.d.ts +84 -0
package/lib/models/building-kit.js +358 -0
package/lib/models/celebrations.d.ts +39 -0
package/lib/models/celebrations.js +44 -0
package/lib/models/chicago-athletic-association-geographic.d.ts +32 -0
package/lib/models/chicago-athletic-association-geographic.js +173 -0
package/lib/models/crain-communications.d.ts +5 -0
package/lib/models/crain-communications.js +75 -0
package/lib/models/crain-geographic.d.ts +10 -0
package/lib/models/crain-geographic.js +69 -0
package/lib/models/crain-tower.d.ts +32 -0
package/lib/models/crain-tower.js +378 -0
package/lib/models/facade-grid.d.ts +18 -0
package/lib/models/facade-grid.js +176 -0
package/lib/models/gage-geographic.d.ts +19 -0
package/lib/models/gage-geographic.js +154 -0
package/lib/models/heritage-at-millennium-park.d.ts +3 -0
package/lib/models/heritage-at-millennium-park.js +284 -0
package/lib/models/heritage-geographic.d.ts +11 -0
package/lib/models/heritage-geographic.js +208 -0
package/lib/models/hyatt-west-tower-geographic.d.ts +26 -0
package/lib/models/hyatt-west-tower-geographic.js +86 -0
package/lib/models/keith-ascher-geographic.d.ts +29 -0
package/lib/models/keith-ascher-geographic.js +110 -0
package/lib/models/kemper-geographic.d.ts +8 -0
package/lib/models/kemper-geographic.js +153 -0
package/lib/models/kemper.d.ts +2 -0
package/lib/models/kemper.js +78 -0
package/lib/models/lake-view-geographic.d.ts +15 -0
package/lib/models/lake-view-geographic.js +134 -0
package/lib/models/maclean-center-geographic.d.ts +20 -0
package/lib/models/maclean-center-geographic.js +162 -0
package/lib/models/michigan-boulevard-geographic.d.ts +12 -0
package/lib/models/michigan-boulevard-geographic.js +157 -0
package/lib/models/michigan-plaza-south-geographic.d.ts +7 -0
package/lib/models/michigan-plaza-south-geographic.js +84 -0
package/lib/models/michigan-plaza-south.d.ts +2 -0
package/lib/models/michigan-plaza-south.js +68 -0
package/lib/models/millennium-park-plaza-geographic.d.ts +9 -0
package/lib/models/millennium-park-plaza-geographic.js +103 -0
package/lib/models/monroe-geographic.d.ts +19 -0
package/lib/models/monroe-geographic.js +177 -0
package/lib/models/north-michigan-180-geographic.d.ts +14 -0
package/lib/models/north-michigan-180-geographic.js +117 -0
package/lib/models/north-wabash-geographic.d.ts +14 -0
package/lib/models/north-wabash-geographic.js +122 -0
package/lib/models/on-the-park-geographic.d.ts +11 -0
package/lib/models/on-the-park-geographic.js +245 -0
package/lib/models/one-prudential-geographic.d.ts +12 -0
package/lib/models/one-prudential-geographic.js +55 -0
package/lib/models/one-prudential-plaza.d.ts +5 -0
package/lib/models/one-prudential-plaza.js +72 -0
package/lib/models/one-prudential-tower.d.ts +45 -0
package/lib/models/one-prudential-tower.js +246 -0
package/lib/models/peoples-gas-geographic.d.ts +23 -0
package/lib/models/peoples-gas-geographic.js +250 -0
package/lib/models/railway-exchange-geographic.d.ts +18 -0
package/lib/models/railway-exchange-geographic.js +176 -0
package/lib/models/river-plaza-geographic.d.ts +16 -0
package/lib/models/river-plaza-geographic.js +104 -0
package/lib/models/sheraton-grand-geographic.d.ts +24 -0
package/lib/models/sheraton-grand-geographic.js +112 -0
package/lib/models/six-north-michigan-geographic.d.ts +16 -0
package/lib/models/six-north-michigan-geographic.js +180 -0
package/lib/models/skyline-geography-data.d.ts +44 -0
package/lib/models/skyline-geography-data.js +607 -0
package/lib/models/skyline-geography.d.ts +23 -0
package/lib/models/skyline-geography.js +322 -0
package/lib/models/swissotel-geographic.d.ts +24 -0
package/lib/models/swissotel-geographic.js +79 -0
package/lib/models/three-illinois-center-geographic.d.ts +26 -0
package/lib/models/three-illinois-center-geographic.js +86 -0
package/lib/models/trump-geographic.d.ts +14 -0
package/lib/models/trump-geographic.js +51 -0
package/lib/models/trump-international-tower.d.ts +4 -0
package/lib/models/trump-international-tower.js +84 -0
package/lib/models/trump-tower.d.ts +43 -0
package/lib/models/trump-tower.js +229 -0
package/lib/models/two-illinois-center-geographic.d.ts +26 -0
package/lib/models/two-illinois-center-geographic.js +85 -0
package/lib/models/two-prudential-geographic.d.ts +25 -0
package/lib/models/two-prudential-geographic.js +47 -0
package/lib/models/two-prudential-plaza.d.ts +8 -0
package/lib/models/two-prudential-plaza.js +55 -0
package/lib/models/two-prudential-tower.d.ts +53 -0
package/lib/models/two-prudential-tower.js +441 -0
package/lib/models/university-club-geographic.d.ts +24 -0
package/lib/models/university-club-geographic.js +217 -0
package/lib/models/willoughby-tower-geographic.d.ts +17 -0
package/lib/models/willoughby-tower-geographic.js +195 -0
package/lib/models/window-illumination.d.ts +14 -0
package/lib/models/window-illumination.js +64 -0
package/lib/package-assets.d.ts +5 -0
package/lib/package-assets.js +9 -0
package/lib/skyline-package.d.ts +23 -0
package/lib/skyline-package.js +25 -0
package/lib/skyline-scene.d.ts +25 -0
package/lib/skyline-scene.js +86 -0
package/lib/study-types.d.ts +49 -0
package/lib/study-types.js +1 -0
package/lib/vendor/three-r186.d.ts +1 -0
package/lib/vendor/three-r186.js +1 -0
package/package.json +64 -4
package/site/building-detail.html +54 -0
package/site/building-detail.js +84 -0
package/site/building-study.html +58 -0
package/site/building-study.js +3 -0
package/site/index.html +407 -0
package/site/models/aon-center.js +60 -0
package/site/models/aon-geographic.js +35 -0
package/site/models/aon-tower.js +130 -0
package/site/models/blue-cross-geographic.js +248 -0
package/site/models/borg-warner-geographic.js +143 -0
package/site/models/buckingham-geographic.js +121 -0
package/site/models/building-kit.js +358 -0
package/site/models/celebrations.js +44 -0
package/site/models/chicago-athletic-association-geographic.js +173 -0
package/site/models/crain-communications.js +75 -0
package/site/models/crain-geographic.js +69 -0
package/site/models/crain-reference.svg +10 -0
package/site/models/crain-tower.js +378 -0
package/site/models/facade-grid.js +176 -0
package/site/models/gage-geographic.js +154 -0
package/site/models/heritage-at-millennium-park.js +284 -0
package/site/models/heritage-geographic.js +208 -0
package/site/models/hyatt-west-tower-geographic.js +86 -0
package/site/models/keith-ascher-geographic.js +110 -0
package/site/models/kemper-geographic.js +153 -0
package/site/models/kemper.js +78 -0
package/site/models/lake-view-geographic.js +134 -0
package/site/models/maclean-center-geographic.js +162 -0
package/site/models/michigan-boulevard-geographic.js +157 -0
package/site/models/michigan-plaza-south-geographic.js +84 -0
package/site/models/michigan-plaza-south.js +68 -0
package/site/models/millennium-park-plaza-geographic.js +103 -0
package/site/models/monroe-geographic.js +177 -0
package/site/models/north-michigan-180-geographic.js +117 -0
package/site/models/north-wabash-geographic.js +122 -0
package/site/models/on-the-park-geographic.js +245 -0
package/site/models/one-prudential-geographic.js +55 -0
package/site/models/one-prudential-plaza.js +72 -0
package/site/models/one-prudential-tower.js +246 -0
package/site/models/peoples-gas-geographic.js +250 -0
package/site/models/railway-exchange-geographic.js +176 -0
package/site/models/river-plaza-geographic.js +104 -0
package/site/models/sheraton-grand-geographic.js +112 -0
package/site/models/six-north-michigan-geographic.js +180 -0
package/site/models/skyline-geography-data.js +607 -0
package/site/models/skyline-geography.js +322 -0
package/site/models/skyline-panorama.svg +3491 -0
package/site/models/skyline-reference.svg +3090 -0
package/site/models/swissotel-geographic.js +79 -0
package/site/models/three-illinois-center-geographic.js +86 -0
package/site/models/trump-geographic.js +51 -0
package/site/models/trump-international-tower.js +84 -0
package/site/models/trump-tower.js +229 -0
package/site/models/two-illinois-center-geographic.js +85 -0
package/site/models/two-prudential-geographic.js +47 -0
package/site/models/two-prudential-plaza.js +55 -0
package/site/models/two-prudential-tower.js +441 -0
package/site/models/university-club-geographic.js +217 -0
package/site/models/willoughby-tower-geographic.js +195 -0
package/site/models/window-illumination.js +64 -0
package/site/skyline-3d.html +92 -0
package/site/skyline-3d.js +333 -0
package/site/skyline-animated.svg +18795 -0
package/site/skyline-comparison.js +97 -0
package/site/skyline-original-fit.svg +18312 -0
package/site/skyline-scene.js +86 -0
package/site/skyline-study.html +83 -0
package/site/skyline-study.js +109 -0
package/site/skyline-webgl.html +667 -0
package/site/stars.svg +176 -0
package/site/study-loader.js +20 -0
package/site/study-types.js +1 -0
package/site/study-viewer.js +605 -0
package/site/study.css +204 -0
package/site/vendor/THREE-LICENSE.txt +21 -0
package/site/vendor/three-r186.js +4228 -0

package/site/index.html ADDED Viewed

@@ -0,0 +1,407 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <meta name="theme-color" content="#000000" />
+    <title>Chicago Skyline — Living Night</title>
+    <script>
+      if (new URLSearchParams(location.search).get("embed") === "1") {
+        document.documentElement.dataset.embedded = "true";
+      }
+    </script>
+    <style>
+      :root {
+        color-scheme: dark;
+        background: #000;
+        font-family: Georgia, "Times New Roman", serif;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body,
+      main {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        overflow: hidden;
+        background: #000;
+      }
+      .stars,
+      .scene {
+        position: fixed;
+        inset: 0;
+        display: block;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        background: transparent;
+      }
+      .stars {
+        z-index: 0;
+        pointer-events: none;
+      }
+      .scene {
+        z-index: 1;
+      }
+      .scene[hidden] {
+        display: none;
+      }
+      .controls {
+        position: fixed;
+        z-index: 2;
+        top: max(12px, env(safe-area-inset-top));
+        left: 50%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        justify-content: center;
+        gap: 10px clamp(18px, 2vw, 28px);
+        width: max-content;
+        max-width: calc(100% - 24px);
+        transform: translateX(-50%);
+        color: #fff;
+        font-size: clamp(18px, 1.85vw, 26px);
+        line-height: 1;
+        white-space: nowrap;
+      }
+      .controls button,
+      .controls a {
+        appearance: none;
+        margin: 0;
+        border: 0;
+        border-radius: 0;
+        padding: 0;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        line-height: inherit;
+        text-decoration: underline;
+        text-decoration-thickness: 1px;
+        text-underline-offset: 3px;
+        cursor: pointer;
+        opacity: 0.88;
+      }
+      html[data-embedded="true"] .controls {
+        display: none;
+      }
+      .controls button:hover,
+      .controls a:hover,
+      .controls button:focus-visible,
+      .controls a:focus-visible,
+      .controls button[aria-pressed="true"] {
+        color: #fff;
+        opacity: 1;
+        text-decoration-thickness: 2px;
+      }
+      .controls button:focus-visible,
+      .controls a:focus-visible {
+        outline: 1px solid #fff;
+        outline-offset: 6px;
+      }
+      .original-return {
+        position: fixed;
+        z-index: 2;
+        right: max(12px, env(safe-area-inset-right));
+        bottom: max(5px, env(safe-area-inset-bottom));
+        border: 1px solid #393939;
+        border-radius: 2px;
+        padding: 5px 8px;
+        background: #101010;
+        color: #aaa;
+        font: 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        cursor: pointer;
+      }
+      .original-return:hover { color: #fff; border-color: #999; background: #202020; }
+      .original-return:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
+      .motion-status {
+        flex-basis: 100%;
+        margin: 0;
+        color: #999;
+        font: 12px/1.5 system-ui, sans-serif;
+        text-align: center;
+        white-space: normal;
+      }
+      .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+      @media (max-width: 520px) {
+        .controls {
+          top: max(16px, env(safe-area-inset-top));
+          gap: 10px 18px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main id="stage">
+      <iframe
+        class="stars"
+        id="stars"
+        src="stars.svg"
+        title="Twinkling night sky"
+        aria-hidden="true"
+        tabindex="-1"
+      ></iframe>
+      <iframe
+        class="scene"
+        id="skyline-3d-scene"
+        src="skyline-3d.html"
+        title="3D Chicago skyline"
+      ></iframe>
+      <iframe
+        class="scene"
+        id="scene"
+        title="Animated Chicago skyline at night"
+        hidden
+      ></iframe>
+      <iframe
+        class="scene"
+        id="webgl-scene"
+        data-src="skyline-webgl.html"
+        title="WebGL Chicago skyline prototype"
+        hidden
+      ></iframe>
+      <nav class="controls" aria-label="Skyline controls">
+        <button type="button" id="fullscreen" aria-pressed="false">fullscreen</button>
+        <button type="button" id="toggle-skyline" aria-pressed="false">show original</button>
+        <button type="button" id="toggle-webgl" aria-pressed="false">show webgl</button>
+        <button type="button" id="toggle-enhanced" aria-pressed="false">show enhanced</button>
+        <a href="building-study.html">3d building</a>
+        <a href="skyline-study.html">skyline study</a>
+        <button type="button" id="debug-motion" aria-pressed="false" aria-describedby="motion-status">debug motion</button>
+        <p class="motion-status" id="motion-status" role="status">Checking motion preference…</p>
+      </nav>
+      <button type="button" class="original-return" id="return-skyline-3d" title="Return to the 3D skyline" hidden>3d skyline</button>
+      <button type="button" class="original-return" id="embedded-original" title="Compare with the original skyline SVG" hidden>show original</button>
+      <p class="visually-hidden" id="status" aria-live="polite"></p>
+    </main>
+    <script>
+      const fullscreenButton = document.querySelector("#fullscreen");
+      const status = document.querySelector("#status");
+      const scene = document.querySelector("#scene");
+      const webglScene = document.querySelector("#webgl-scene");
+      const skyline3dScene = document.querySelector("#skyline-3d-scene");
+      const stars = document.querySelector("#stars");
+      const debugMotionButton = document.querySelector("#debug-motion");
+      const motionStatus = document.querySelector("#motion-status");
+      const originalReturn = document.querySelector("#return-skyline-3d");
+      const embeddedOriginal = document.querySelector("#embedded-original");
+      const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+      // Modes shown in their own page. The 3D skyline loads with the viewer; the others load
+      // the first time they are chosen.
+      const framedScenes = { webgl: webglScene, "3d": skyline3dScene };
+      // The viewer opens on the 3D skyline. Each toggle shows its mode and, pressed again,
+      // returns to the 3D skyline.
+      const homeMode = "3d";
+      const home = { label: "3d skyline", title: "Return to the 3D skyline", status: "3D skyline displayed" };
+      const toggles = {
+        original: {
+          button: document.querySelector("#toggle-skyline"),
+          label: "show original",
+          title: "Compare with the original skyline SVG",
+          status: "Original skyline displayed",
+        },
+        webgl: {
+          button: document.querySelector("#toggle-webgl"),
+          label: "show webgl",
+          title: "Preview the WebGL skyline prototype",
+          status: "WebGL skyline prototype displayed",
+        },
+        enhanced: {
+          button: document.querySelector("#toggle-enhanced"),
+          label: "show enhanced",
+          title: "Show the enhanced interactive skyline drawing",
+          status: "Enhanced interactive skyline displayed",
+        },
+      };
+      let debugMotion = false;
+      let skylineMode = homeMode;
+      // Keep SVG recovery reachable until the first 3D frame succeeds, even if
+      // the scene document or its bootstrap script never initializes.
+      let sceneUnavailable = true;
+      function updateSkylineView() {
+        const framedScene = framedScenes[skylineMode];
+        if (framedScene && !framedScene.getAttribute("src")) {
+          framedScene.src = framedScene.dataset.src;
+        }
+        for (const [mode, frame] of Object.entries(framedScenes)) {
+          frame.hidden = mode !== skylineMode;
+        }
+        if (!framedScene) {
+          const showingOriginal = skylineMode === "original";
+          const nextSource = showingOriginal ? "skyline-original-fit.svg" : "skyline-animated.svg";
+          if (scene.getAttribute("src") !== nextSource) {
+            scene.src = nextSource;
+          }
+          scene.title = showingOriginal
+            ? "Original Chicago skyline"
+            : "Animated Chicago skyline at night";
+        }
+        scene.hidden = Boolean(framedScene);
+        originalReturn.hidden = skylineMode !== "original";
+        embeddedOriginal.hidden = document.documentElement.dataset.embedded !== "true" || skylineMode !== homeMode || !sceneUnavailable;
+        for (const [mode, toggle] of Object.entries(toggles)) {
+          const showing = mode === skylineMode;
+          toggle.button.textContent = showing ? home.label : toggle.label;
+          toggle.button.setAttribute("aria-pressed", String(showing));
+          toggle.button.title = showing ? home.title : toggle.title;
+        }
+      }
+      function showSkylineMode(mode) {
+        skylineMode = mode;
+        updateSkylineView();
+        status.textContent = mode === homeMode ? home.status : toggles[mode].status;
+      }
+      for (const [mode, toggle] of Object.entries(toggles)) {
+        toggle.button.addEventListener("click", () => {
+          showSkylineMode(skylineMode === mode ? homeMode : mode);
+        });
+      }
+      // The scene's bottom shortcut uses the viewer's mode switch. Only this scene, on
+      // this origin and while it is displayed, can request the original drawing.
+      window.addEventListener("message", (event) => {
+        if (event.origin !== location.origin || event.source !== skyline3dScene.contentWindow) return;
+        if (event.data?.type === "skyline:unavailable" || event.data?.type === "skyline:ready") {
+          sceneUnavailable = event.data.type === "skyline:unavailable";
+          updateSkylineView();
+          return;
+        }
+        if (event.data?.type !== "skyline:show-original" || skylineMode !== homeMode) return;
+        showSkylineMode("original");
+        originalReturn.focus();
+      });
+      originalReturn.addEventListener("click", () => {
+        showSkylineMode(homeMode);
+        const sceneDocument = skyline3dScene.contentDocument;
+        const star = sceneDocument?.querySelector("#menu-toggle");
+        const focus = star?.getAttribute("aria-expanded") === "true" ? sceneDocument.querySelector("#show-original") : star;
+        const target = !sceneUnavailable && focus?.matches(":enabled") ? focus : null;
+        target?.focus();
+        if (!target || sceneDocument?.activeElement !== target) {
+          (embeddedOriginal.hidden ? toggles.original.button : embeddedOriginal).focus();
+        }
+      });
+      embeddedOriginal.addEventListener("click", () => {
+        showSkylineMode("original");
+        originalReturn.focus();
+      });
+      updateSkylineView();
+      function updateMotionStatus() {
+        const preference = reducedMotion.matches ? "reduced" : "allowed";
+        const animation = debugMotion
+          ? (reducedMotion.matches ? "debug override active" : "debug animation")
+          : (reducedMotion.matches ? "stars paused" : "stars twinkling");
+        motionStatus.textContent = `System motion: ${preference} · ${animation}`;
+        debugMotionButton.textContent = debugMotion ? "stop debug" : "debug motion";
+        debugMotionButton.setAttribute("aria-pressed", String(debugMotion));
+        debugMotionButton.title = debugMotion
+          ? "Return to the system motion setting"
+          : "Preview slightly stronger brightness changes at the same gentle pace, even when reduced motion is enabled";
+      }
+      debugMotionButton.addEventListener("click", () => {
+        debugMotion = !debugMotion;
+        // Keep a fragment when stopping so the randomized sky does not reload.
+        stars.src = `stars.svg#${debugMotion ? "debug-motion" : ""}`;
+        updateMotionStatus();
+      });
+      reducedMotion.addEventListener("change", updateMotionStatus);
+      updateMotionStatus();
+      async function toggleFullscreen() {
+        try {
+          if (document.fullscreenElement) {
+            await document.exitFullscreen();
+          } else {
+            await document.documentElement.requestFullscreen();
+          }
+        } catch {
+          status.textContent = "Fullscreen is not available in this browser";
+        }
+      }
+      fullscreenButton.addEventListener("click", toggleFullscreen);
+      document.addEventListener("fullscreenchange", () => {
+        const isFullscreen = Boolean(document.fullscreenElement);
+        fullscreenButton.textContent = isFullscreen ? "exit fullscreen" : "fullscreen";
+        fullscreenButton.setAttribute("aria-pressed", String(isFullscreen));
+        status.textContent = isFullscreen ? "Fullscreen enabled" : "Fullscreen exited";
+      });
+      if (!document.fullscreenEnabled) {
+        fullscreenButton.hidden = true;
+      }
+      function fullscreenShortcut(event) {
+        if (event.key.toLowerCase() === "f" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+          event.preventDefault();
+          toggleFullscreen();
+        }
+      }
+      document.addEventListener("keydown", fullscreenShortcut);
+      // Keys pressed inside a scene, such as on the 3D skyline's canvas, go to its frame's own
+      // window, so listen there too. A frame from another origin, as under file://, keeps them.
+      function listenInFrame(frame) {
+        try {
+          frame.contentWindow.addEventListener("keydown", fullscreenShortcut);
+        } catch {}
+      }
+      for (const frame of [skyline3dScene, scene, webglScene]) {
+        listenInFrame(frame);
+        frame.addEventListener("load", () => listenInFrame(frame));
+      }
+      // The controls lie over the top of the 3D skyline's frame, which floats a building's
+      // detail below them.
+      const controls = document.querySelector(".controls");
+      function insetSkyline() {
+        try {
+          skyline3dScene.contentDocument.documentElement.style.setProperty("--viewer-controls", `${Math.ceil(controls.getBoundingClientRect().bottom)}px`);
+        } catch {}
+      }
+      new ResizeObserver(insetSkyline).observe(controls);
+      skyline3dScene.addEventListener("load", insetSkyline);
+    </script>
+  </body>
+</html>

package/site/models/aon-center.js ADDED Viewed

@@ -0,0 +1,60 @@
+import { aonLevels, buildAonTower } from "./aon-tower.js";
+// Aon Center on a clean version of its plan, in real meters, for the skyline study's
+// original layout, which places this copy in skyline-study.ts. aon-tower.ts builds it, and
+// the geographic model on the mapped outline.
+//
+// The plan is the published 59.15 m square. Each face's main run holds fifteen 10 ft bays,
+// as the photograph and the drawing both count and the building's descriptions give.
+// That leaves each corner a 6.7 m notch: a 45° chamfer, a square step, and a second
+// chamfer, in the mapped outline's proportions. The mapped notches run about 1.5 m deeper;
+// the photograph's bays and corner widths fit these. See docs/aon-reference.md. Units are
+// meters; +x is east and +z is south.
+const half = 59.15 / 2, notch = 6.715, chamfer = 1.9, step = notch - 2 * chamfer;
+// The south-east notch, from the south face's east end to the east face's south end.
+const southEast = [
+    [half - notch, half],
+    [half - notch + chamfer, half - chamfer],
+    [half - notch + chamfer, half - chamfer - step],
+    [half - notch + chamfer + step, half - chamfer - step],
+    [half, half - notch],
+];
+// Each corner turns the south-east one a quarter further round.
+const turn = ([x, z], quarters) => (quarters === 0 ? [x, z] : turn([z, -x], quarters - 1));
+const outline = [0, 1, 2, 3].flatMap((quarters) => southEast.map((point) => turn(point, quarters)));
+// The rooftop enclosure, centred as the mapped part is, and the antenna at its centre.
+const enclosure = [[-16, -16], [16, -16], [16, 16], [-16, 16]];
+// The skyline drawing shows the tower from the photograph's treeline up, so its platform
+// datum crosses the tower above the street: 30.6 m, fitted with the placement in
+// skyline-study.ts, which scales, turns, and places this copy. Its y = 0 is that datum,
+// and the drawing's top floor band is the eightieth office floor, under the mechanical ones.
+export const aonSkylineBase = 30.6;
+export function createAonCenterBuilding() {
+    return buildAonTower({ name: "Aon Center", id: "layer3", outline, enclosure, mast: [0, 0], base: aonSkylineBase });
+}
+// Features the skyline test projects against the drawing, in this copy's coordinates.
+const at = ([x, z], real) => [x, real - aonSkylineBase, z];
+const bays = 15, bay = (southEast[0][0] - -southEast[0][0]) / bays;
+// The columns stand on the bay lines, the end ones drawn in to stay on their face.
+const columnAt = (i) => Math.min(Math.max(i * bay, 0.65), bays * bay - 0.65);
+const southColumn = (i) => [-(half - notch) + columnAt(i), half];
+const eastColumn = (i) => [half, half - notch - columnAt(i)];
+export const aonFeatures = {
+    // The roof edge's ends: the west face's south end, the south face's east end, and the
+    // east face's north end, at the top of the cap.
+    aonRoofWest: at(turn(southEast[0], 3), aonLevels.roof),
+    aonRoofNear: at(southEast[0], aonLevels.roof),
+    aonRoofEast: at(turn(southEast[0], 1), aonLevels.roof),
+    // A point on the south face's glass, clear of every neighbour, for hover.
+    aonFrontFacade: at([-(half - notch) + 7.5 * bay, half + 0.07], 230),
+    // The columns, halfway out to their points at mid-height: the fourteen after each face's
+    // first, which the drawing's fifteen strips on each face match one for one.
+    aonFrontPiers: Array.from({ length: 14 }, (_, i) => { const [x, z] = southColumn(i + 1); return [x, 220 - aonSkylineBase, z + 0.35]; }),
+    aonSidePiers: Array.from({ length: 14 }, (_, i) => { const [x, z] = eastColumn(i + 1); return [x + 0.35, 220 - aonSkylineBase, z]; }),
+    // The notch's two sides at mid-height: the south face's east end and the east face's
+    // south end, between which the drawing paints the corner's stone.
+    aonNotchFront: at(southEast[0], 200),
+    aonNotchEast: at(southEast[4], 200),
+    // Window centres across the south face's middle on six office floors, the drawing's
+    // eleventh, twenty-third and every twelfth band on from the top.
+    aonFloorRows: [70, 58, 46, 34, 22, 10].map((floor) => at([0, half + 0.07], aonLevels.lobbyTop + (floor - 1) * aonLevels.pitch + (aonLevels.sill + aonLevels.head) / 2)),
+};

package/site/models/aon-geographic.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { polygonOf } from "./building-kit.js";
+import { aonLevels, buildAonTower } from "./aon-tower.js";
+// Aon Center: the geographic layout's model, on the mapped outline 64388609 with its
+// notched corners, the rooftop enclosure part 284775635, and the published heights. The
+// tower is the shared generator in aon-tower.ts, the same one the original layout's copy
+// uses. Each mapped face carries the source plan's fifteen window bays, distributed
+// over its chord; the mapped notches are deeper, so this spacing is approximate. The antenna stands
+// at the enclosure's centre, reaching the published 362.5 m tip; the map gives no antenna
+// geometry. See docs/aon-reference.md. Units are meters; +x is east, +z is south.
+export const aonGeographicLevels = Object.freeze({
+    shaftTop: aonLevels.roof, // OSM shaft part top
+    enclosureTop: aonLevels.enclosureTop, // OSM part 284775635
+    tip: aonLevels.tip, // published tip
+    floors: 83,
+});
+const h = aonGeographicLevels;
+export function createAonGeographicBuilding(record, projectPlan, offset) {
+    const enclosurePart = record.parts.find((p) => p.way === 284775635);
+    const enclosure = polygonOf(projectPlan(enclosurePart.coordinates));
+    // The antenna at the enclosure's area centroid: its traced outline carries an extra
+    // vertex on one edge, which would pull a mean of its vertices off centre.
+    let twice = 0, cx = 0, cz = 0;
+    enclosure.forEach(([x, z], i) => {
+        const [x2, z2] = enclosure[(i + 1) % enclosure.length], cross = x * z2 - x2 * z;
+        twice += cross;
+        cx += (x + x2) * cross;
+        cz += (z + z2) * cross;
+    });
+    const mast = [cx / (3 * twice), cz / (3 * twice)];
+    const model = buildAonTower({ name: record.name, id: record.id, outline: polygonOf(projectPlan(record.footprint.coordinates)), enclosure, mast, base: 0 });
+    model.building.position.set(offset[0], 0, offset[1]);
+    model.building.userData["geography"] = record;
+    model.building.userData["geographicDetail"] = { levels: h, floors: h.floors, source: "docs/aon-reference.md" };
+    return model;
+}

package/site/models/aon-tower.js ADDED Viewed

@@ -0,0 +1,130 @@
+import * as THREE from "../vendor/three-r186.js";
+import { createBuilder, line } from "./building-kit.js";
+import { chainsOf, gridBox, mitredBox, orient, paintedSlab, planOf, turnAt } from "./facade-grid.js";
+// Heights above the street. The floor pitch and the cap are measured on the photograph the
+// drawing was traced from. The lobby takes what is left below eighty office floors and the
+// two mechanical floors over them, which with the lobby make the published 83; daylight
+// photographs show the slots unchanged over the mechanical floors, so the glass keeps the
+// office floors' pitch up to the cap.
+export const aonLevels = Object.freeze({
+    roof: 340,
+    capBottom: 338.5,
+    lobbyTop: 11.9,
+    pitch: 3.87,
+    sill: 0.8,
+    head: 3.1,
+    enclosureTop: 346.3,
+    tip: 362.5,
+    bay: 3.048, // nominal clean-plan module; mapped spacing follows each face's chord
+    baysPerFace: 15, // tenant portal's Suite 1300 plan: sixteen piers, fifteen openings
+    faceLength: 20,
+});
+const h = aonLevels;
+const color = (hex) => new THREE.Color(hex);
+const glassTones = [0x262626, 0x2c2c2c, 0x323232, 0x222222].map(color);
+const litGlass = color(0x7c7c7c), dimGlass = color(0x4e4e4e);
+const spandrel = color(0x1b1b1b), granite = color(0xb2b2b2), core = color(0x202020);
+const slat = color(0x9c9c9c), slatGap = color(0x444444), roofing = color(0x4c4c4c);
+function paneColor(row, bay, face) {
+    const hash = (Math.imul(row + 17, 0x9e3779b1) ^ Math.imul(bay + 31, 0x85ebca77) ^ Math.imul(face + 7, 0xc2b2ae3d)) >>> 0;
+    const value = hash % 101;
+    if (value < 3)
+        return litGlass;
+    if (value < 6)
+        return dimGlass;
+    return glassTones[value % glassTones.length];
+}
+export function buildAonTower(form) {
+    const kit = createBuilder(form.name, form.id);
+    const shell = kit.batch("Aon · tube shell", kit.material(0xffffff, { vertexColors: true }));
+    const glazing = kit.batch("Aon · window ribbons", kit.material(0xffffff, { vertexColors: true }));
+    const piers = kit.batch("Aon · granite piers", kit.material(0xbababa));
+    const cap = kit.batch("Aon · granite cap", kit.material(0xc4c4c4));
+    const enclosure = kit.batch("Aon · rooftop enclosure", kit.material(0xffffff, { vertexColors: true }));
+    const mast = kit.batch("Aon · antenna mast", kit.material(0x6a6a6a));
+    const base = form.base;
+    const y = (real) => real - base;
+    const outline = orient(form.outline), plan = planOf(outline);
+    // A traced outline can split one face into nearly collinear pieces, which chainsOf joins
+    // within 5°: a chain at least `faceLength` long is a main face, whose facade stands on its
+    // chord, and every other run belongs to a notched corner.
+    const faces = chainsOf(plan).map(({ runs }) => ({ chord: line(plan[runs[0]].at(0), plan[runs.at(-1)].at(plan[runs.at(-1)].length)), runs })).filter(({ chord }) => chord.length >= h.faceLength);
+    const onFace = new Set(faces.flatMap(({ runs }) => runs));
+    const grid = (target, run, columns, rows, back, front, paint, sides) => gridBox(kit, target, run, columns, rows, back, front, paint, sides, y);
+    // The shaft: dark spandrel walls on the faces, granite on the notched corners, a floor,
+    // and the flat roof.
+    plan.forEach((run, index) => {
+        const a = run.at(0), b = run.at(run.length), n = run.normal(0);
+        kit.quad(shell, [[a[0], 0, a[1]], [b[0], 0, b[1]], [b[0], y(h.roof), b[1]], [a[0], y(h.roof), a[1]]], [[n[0], 0, n[1]]], onFace.has(index) ? core : granite);
+    });
+    paintedSlab(kit, shell, outline, 0, false, roofing);
+    paintedSlab(kit, shell, outline, y(h.roof), true, roofing);
+    // The source plan fixes fifteen openings per face, independent of an OSM trace's
+    // corner depth. Distribute them over each face's chord; mapped spacing remains an
+    // approximation (docs/aon-reference.md, FID-AON-001). End piers stay on their face.
+    const faceBays = (run) => {
+        const count = h.baysPerFace, bay = run.length / count;
+        return Array.from({ length: count + 1 }, (_, i) => i * bay);
+    };
+    const pierHalf = 0.65, pierPoint = 0.7;
+    const floors = [];
+    for (let level = h.lobbyTop; level + h.pitch <= h.capBottom + 1e-6; level += h.pitch)
+        floors.push(level);
+    faces.forEach(({ chord: run }, face) => {
+        const stations = faceBays(run);
+        // End piers are inset from the corner. Stop glass at their centres so it
+        // cannot peek past the taper of the V and create two extra narrow slots.
+        const glassStations = [pierHalf, ...stations.slice(1, -1), run.length - pierHalf];
+        // The glass: one ribbon per floor across the face, cut into panes at the columns, which
+        // stand in front of the joints. The lobby is a single tall storey of glass.
+        const visible = (low) => low >= base;
+        if (visible(0.4))
+            grid(glazing, run, glassStations, [0.4, h.lobbyTop - 0.9], 0.02, 0.07, (bay) => paneColor(0, bay, face), spandrel);
+        floors.forEach((level, row) => {
+            if (!visible(level + h.sill))
+                return;
+            grid(glazing, run, glassStations, [level + h.sill, level + h.head], 0.02, 0.07, (bay) => paneColor(row + 1, bay, face), spandrel);
+        });
+        // The V-shaped columns: granite prisms from just above grade to the cap, their points
+        // outward. They start 0.3 m up so their relief leaves the street outline unchanged.
+        for (const station of stations) {
+            const s = Math.min(Math.max(station, pierHalf), run.length - pierHalf);
+            const [left, right, point] = [run.at(s - pierHalf, 0), run.at(s + pierHalf, 0), run.at(s, pierPoint)];
+            const low = y(Math.max(base, 0.3)), high = y(h.capBottom);
+            const up = [0, 1, 0], down = [0, -1, 0];
+            const p = (q, v) => [q[0], v, q[1]];
+            // Outward is to the right of a and then b, as it is for every run of the plan.
+            const faceOf = (a, b) => { const d = [b[0] - a[0], b[1] - a[1]], l = Math.hypot(...d); return [-d[1] / l, 0, d[0] / l]; };
+            kit.quad(piers, [p(left, low), p(point, low), p(point, high), p(left, high)], [faceOf(left, point)]);
+            kit.quad(piers, [p(point, low), p(right, low), p(right, high), p(point, high)], [faceOf(point, right)]);
+            kit.quad(piers, [p(right, low), p(left, low), p(left, high), p(right, high)], [[-run.normal(0)[0], 0, -run.normal(0)[1]]]);
+            kit.triangle(piers, [p(left, high), p(point, high), p(right, high)], [up, up, up]);
+            kit.triangle(piers, [p(left, low), p(right, low), p(point, low)], [down, down, down]);
+        }
+    });
+    // The granite cap: a fascia under the roof edge on every run, standing clear of the
+    // columns' points and mitred on the bisector of each corner.
+    const capWidth = pierPoint + 0.2;
+    if (h.roof > base)
+        plan.forEach((run, index) => {
+            mitredBox(kit, cap, run, 0, run.length, turnAt(plan[(index + plan.length - 1) % plan.length], run), turnAt(run, plan[(index + 1) % plan.length]), capWidth, h.capBottom, h.roof, y);
+        });
+    // The rooftop enclosure: louvered walls from the roof to the published top, and a lid.
+    const enclosureOutline = orient(form.enclosure);
+    planOf(enclosureOutline).forEach((run) => {
+        const rows = [];
+        for (let v = h.roof; v < h.enclosureTop - 1e-6; v += 0.6)
+            rows.push(v);
+        rows.push(h.enclosureTop);
+        const a = run.at(0), b = run.at(run.length), n = run.normal(0);
+        // Its walls are cells of blades and gaps, so the enclosure closes on its own lid and floor.
+        const at = (q, v) => [q[0], y(v), q[1]];
+        for (let r = 0; r + 1 < rows.length; r += 1)
+            kit.quad(enclosure, [at(a, rows[r]), at(b, rows[r]), at(b, rows[r + 1]), at(a, rows[r + 1])], [[n[0], 0, n[1]]], r % 2 === 0 ? slat : slatGap);
+    });
+    paintedSlab(kit, enclosure, enclosureOutline, y(h.roof), false, roofing);
+    paintedSlab(kit, enclosure, enclosureOutline, y(h.enclosureTop), true, roofing);
+    // The antenna: a slim mast from the enclosure to the published tip.
+    kit.box(mast, form.mast, [0, 1], 0.3, -0.3, 0.3, y(h.enclosureTop), y(h.tip));
+    return kit.finish({ height: y(h.tip), outlines: [shell, cap], opacity: 0.18 });
+}