rename natus → sky across the codebase — natal chart abstraction is now sky throughout, since chart inputs aren't birthday-gated

Mechanical rename: 5 files (sky-wheel.js, _sky.scss, _sky_overlay.html, SkyWheelSpec.js x2), 24 in-place edits across templates/views/urls/SCSS/JS/tests/CLAUDE.md. URL names epic:natus_save → epic:sky_save (epic namespaced, no clash w. dashboard:sky_save), JS module NatusWheel → SkyWheel, DOM ids id_natus_* → id_sky_*, BEM classes natus-* → sky-*, dashboard sky_natus_data/sky_natus_preview collapsed to sky_data/sky_preview_data. No DB migration needed (User.sky_chart_data + GameEvent.SKY_SAVED already used sky-prefix). 778 ITs + Jasmine green. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-04 20:36:15 -04:00
parent 19b7828ea9
commit cc2a3f3526
29 changed files with 338 additions and 338 deletions
--- a/src/static_src/scss/_card-deck.scss
+++ b/src/static_src/scss/_card-deck.scss
@@ -926,7 +926,7 @@ html:has(.sig-backdrop) {
 }

 // ── PICK SEA overlay ─────────────────────────────────────────────────────────
-// Mirrors .natus-* structure but with columns reversed:
+// Mirrors .sky-* structure but with columns reversed:
 //   left = transparent (Celtic Cross card positions)
 //   right = rgba(--priUser) opaque (spread select)

@@ -1414,7 +1414,7 @@ $_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6);

 }

-// NVM button — same positioning as .natus-modal-wrap > .btn-cancel
+// NVM button — same positioning as .sky-modal-wrap > .btn-cancel
 .sea-modal-wrap > .btn-cancel {
    position: absolute;
    top: -1rem;
--- a/src/static_src/scss/_natus.scss
+++ b/src/static_src/scss/_natus.scss
@@ -1,13 +1,13 @@
-// ─── Natus (Pick Sky) overlay ────────────────────────────────────────────────
+// ─── Sky (Pick Sky) overlay ────────────────────────────────────────────────
 // Gaussian backdrop + centred modal, matching the gate/sig overlay pattern.
-// Open state: html.natus-open (added by JS on PICK SKY click).
+// Open state: html.sky-open (added by JS on PICK SKY click).
 //
 // Layout: header / two-column body (form | wheel) / footer
 // Collapses to stacked single-column below 600 px.

 // ── Scroll-lock ───────────────────────────────────────────────────────────────

-html.natus-open {
+html.sky-open {
    overflow: hidden;

    #id_aperture_fill { opacity: 1; }
@@ -15,7 +15,7 @@ html.natus-open {

 // ── Backdrop ──────────────────────────────────────────────────────────────────

-.natus-backdrop {
+.sky-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
@@ -23,18 +23,18 @@ html.natus-open {
    z-index: 100;
    pointer-events: none;

-    // Hidden until html.natus-open
+    // Hidden until html.sky-open
    opacity: 0;
    transition: opacity 0.15s ease;
 }

-html.natus-open .natus-backdrop {
+html.sky-open .sky-backdrop {
    opacity: 1;
 }

 // ── Overlay shell (positions + scrolls the modal) ─────────────────────────────

-.natus-overlay {
+.sky-overlay {
    position: fixed;
    inset: 0;
    display: flex;
@@ -45,7 +45,7 @@ html.natus-open .natus-backdrop {
    overscroll-behavior: contain;
    pointer-events: none;

-    // Hidden until html.natus-open
+    // Hidden until html.sky-open
    visibility: hidden;

    @media (orientation: landscape) {
@@ -55,7 +55,7 @@ html.natus-open .natus-backdrop {
    }
 }

-html.natus-open .natus-overlay {
+html.sky-open .sky-overlay {
    visibility: visible;
    pointer-events: none;   // modal itself is pointer-events: auto
 }
@@ -64,7 +64,7 @@ html.natus-open .natus-overlay {

 // Thin wrapper: position:relative so the NVM circle can sit on the corner
 // without being clipped by the modal's overflow:hidden.
-.natus-modal-wrap {
+.sky-modal-wrap {
    position: relative;
    pointer-events: none;   // overlay handles pointer-events; children re-enable
    width: 92vw;
@@ -76,16 +76,16 @@ html.natus-open .natus-overlay {
    transition: opacity 0.2s ease, transform 0.2s ease;
 }

-html.natus-open .natus-modal-wrap {
+html.sky-open .sky-modal-wrap {
    opacity: 1;
    transform: translateY(0);
 }

-.natus-modal {
+.sky-modal {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
-    width: 100%;      // fills .natus-modal-wrap
+    width: 100%;      // fills .sky-modal-wrap
    max-height: 96vh;
    border: 0.1rem solid rgba(var(--terUser), 0.25);
    border-radius: 0.5rem;
@@ -94,7 +94,7 @@ html.natus-open .natus-modal-wrap {

 // ── Header ────────────────────────────────────────────────────────────────────

-.natus-modal-header {
+.sky-modal-header {
    flex-shrink: 0;
    padding: 0.6rem 1rem;
    background: rgba(var(--priUser), 1);
@@ -121,7 +121,7 @@ html.natus-open .natus-modal-wrap {

 // ── Body: two columns ─────────────────────────────────────────────────────────

-.natus-modal-body {
+.sky-modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
@@ -130,7 +130,7 @@ html.natus-open .natus-modal-wrap {
 }

 // Form column — fixed width; form-main scrolls, confirm btn pinned at bottom
-.natus-form-col {
+.sky-form-col {
    flex: 0 0 240px;
    overflow: hidden;
    padding: 0.9rem 1rem;
@@ -142,7 +142,7 @@ html.natus-open .natus-modal-wrap {
 }

 // Scrollable inner container (form fields + status)
-.natus-form-main {
+.sky-form-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
@@ -152,12 +152,12 @@ html.natus-open .natus-modal-wrap {
 }

 // Confirm btn inside form-col — full width, pinned at column bottom
-.natus-form-col > #id_natus_confirm {
+.sky-form-col > #id_sky_confirm {
    flex-shrink: 0;
 }

 // Wheel column — fills remaining space
-.natus-wheel-col {
+.sky-wheel-col {
    flex: 1;
    min-width: 0;
    display: flex;
@@ -168,7 +168,7 @@ html.natus-open .natus-modal-wrap {
    position: relative;
 }

-.natus-svg {
+.sky-svg {
    display: block;
    width: 100%;
    height: 100%;
@@ -179,7 +179,7 @@ html.natus-open .natus-modal-wrap {

 // ── Form fields ───────────────────────────────────────────────────────────────

-.natus-field {
+.sky-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
@@ -204,9 +204,9 @@ html.natus-open .natus-modal-wrap {
 }

 // Place search field wrapper: text input + geo button inline
-.natus-place-field { position: relative; }
+.sky-place-field { position: relative; }

-.natus-place-wrap {
+.sky-place-wrap {
    display: flex;
    gap: 0.4rem;
    align-items: center;
@@ -216,7 +216,7 @@ html.natus-open .natus-modal-wrap {
 }

 // Nominatim suggestion dropdown
-.natus-suggestions {
+.sky-suggestions {
    position: absolute;
    left: 0;
    right: 0;
@@ -230,7 +230,7 @@ html.natus-open .natus-modal-wrap {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }

-.natus-suggestion-item {
+.sky-suggestion-item {
    display: block;
    width: 100%;
    padding: 0.4rem 0.6rem;
@@ -253,7 +253,7 @@ html.natus-open .natus-modal-wrap {
 }

 // Coords row: lat | lon (read-only, populated by place selection)
-.natus-coords {
+.sky-coords {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.4rem;
@@ -282,7 +282,7 @@ html.natus-open .natus-modal-wrap {

 // ── Status line ───────────────────────────────────────────────────────────────

-.natus-status {
+.sky-status {
    font-size: 0.65rem;
    opacity: 0.6;
    min-height: 1rem;
@@ -295,11 +295,11 @@ html.natus-open .natus-modal-wrap {
 }

 // ── NVM corner btn ────────────────────────────────────────────────────────────
-// Absolutely pinned to top-right corner of .natus-modal-wrap.
+// Absolutely pinned to top-right corner of .sky-modal-wrap.
 // transform: translate(50%,-50%) centres the circle on the corner point.
-// Lives outside .natus-modal so overflow:hidden doesn't clip it.
+// Lives outside .sky-modal so overflow:hidden doesn't clip it.

-#id_natus_cancel {
+#id_sky_cancel {
    position: absolute;
    top: 0;
    right: 0;
@@ -312,22 +312,22 @@ html.natus-open .natus-modal-wrap {
 // ── Narrow / portrait ─────────────────────────────────────────────────────────

@media (max-width: 600px) {
-    .natus-modal-wrap {
+    .sky-modal-wrap {
        width: 92vw;
    }

-    .natus-modal {
+    .sky-modal {
        max-height: 96vh;
    }

-    .natus-modal-body {
+    .sky-modal-body {
        flex-direction: column;
        overflow-y: auto;
    }

    // Form col stacks above wheel; internally becomes a flex-row so
    // form-main gets most of the width and confirm btn sits to its right.
-    .natus-form-col {
+    .sky-form-col {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: flex-end;
@@ -337,19 +337,19 @@ html.natus-open .natus-modal-wrap {
        gap: 0.5rem;
    }

-    .natus-form-main {
+    .sky-form-main {
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        max-height: 40vh;
    }

-    .natus-form-col > #id_natus_confirm {
+    .sky-form-col > #id_sky_confirm {
        flex-shrink: 0;
        align-self: flex-end;
    }

-    .natus-wheel-col {
+    .sky-wheel-col {
        flex: 0 0 280px;
    }
 }
@@ -512,10 +512,10 @@ body[class*="-light"] {

 // ── Planet hover tooltip — must live outside any ancestor with transform or
 //    container-type (both break position:fixed). Placed as a direct sibling of
-//    .natus-overlay in room.html; alongside #id_tooltip_portal in home.html. ──
+//    .sky-overlay in room.html; alongside #id_tooltip_portal in home.html. ──

-#id_natus_tooltip,
-#id_natus_tooltip_2 {
+#id_sky_tooltip,
+#id_sky_tooltip_2 {
    position: fixed;
    z-index: 200;
    pointer-events: auto;
@@ -787,8 +787,8 @@ body[class*="-light"] {
 }

 // Element title colors — primary tier on dark palettes
-#id_natus_tooltip,
-#id_natus_tooltip_2 {
+#id_sky_tooltip,
+#id_sky_tooltip_2 {
    .tt-title--el-fire  { color: rgba(var(--priRd), 1); }
    .tt-title--el-stone { color: rgba(var(--priFs), 1); }
    .tt-title--el-time  { color: rgba(var(--priYl), 1); }
@@ -798,8 +798,8 @@ body[class*="-light"] {
 }

 // Sign tooltip title + sign icon SVG — element border colors (Stone/Air/Fire/Water schema)
-#id_natus_tooltip,
-#id_natus_tooltip_2 {
+#id_sky_tooltip,
+#id_sky_tooltip_2 {
    .tt-title--sign-fire  { color: rgba(var(--priOr), 1); }
    .tt-title--sign-stone { color: rgba(var(--priMe), 1); }
    .tt-title--sign-air   { color: rgba(var(--priBl), 1); }
@@ -816,8 +816,8 @@ body[class*="-light"] {
 }

 // On light palettes — switch to tertiary tier for legibility
-body[class*="-light"] #id_natus_tooltip,
-body[class*="-light"] #id_natus_tooltip_2 {
+body[class*="-light"] #id_sky_tooltip,
+body[class*="-light"] #id_sky_tooltip_2 {
    .tt-title--el-fire  { color: rgba(var(--terRd), 1); }
    .tt-title--el-stone { color: rgba(var(--terFs), 1); }
    .tt-title--el-time  { color: rgba(var(--terYl), 1); }
@@ -827,8 +827,8 @@ body[class*="-light"] #id_natus_tooltip_2 {
 }

 // On light palettes — switch to primary (darkest) tier for legibility
-body[class*="-light"] #id_natus_tooltip,
-body[class*="-light"] #id_natus_tooltip_2 {
+body[class*="-light"] #id_sky_tooltip,
+body[class*="-light"] #id_sky_tooltip_2 {
    .tt-title--au { color: rgba(var(--priAu), 1); }
    .tt-title--ag { color: rgba(var(--priAg), 1); }
    .tt-title--hg { color: rgba(var(--priHg), 1); }
@@ -849,7 +849,7 @@ body[class*="-light"] #id_natus_tooltip_2 {

    h2 { flex-shrink: 0; }

-    .natus-svg {
+    .sky-svg {
        flex: 1;
        min-height: 0;
        max-width: none;
@@ -866,7 +866,7 @@ body[class*="-light"] #id_natus_tooltip_2 {
        flex-direction: column;
        gap: 0.5rem;

-        #id_natus_confirm {
+        #id_sky_confirm {
            margin-top: -1.5rem;
            align-self: center;
            position: relative;
@@ -908,13 +908,13 @@ body.page-sky {
 }

 // Stack wheel above form; allow body to grow past viewport (page scrolls, not body)
-.sky-page .natus-modal-body {
+.sky-page .sky-modal-body {
    flex-direction: column;
    flex-shrink: 0;
 }

 // Wheel takes its natural square size from its width — never shrinks for the form
-.sky-page .natus-wheel-col {
+.sky-page .sky-wheel-col {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
@@ -925,7 +925,7 @@ body.page-sky {
 }

 // Form col runs horizontally below the wheel (same compact pattern as narrow-portrait modal)
-.sky-page .natus-form-col {
+.sky-page .sky-form-col {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-end;
@@ -933,7 +933,7 @@ body.page-sky {
    border-top: 0.1rem solid rgba(var(--terUser), 0.12);
 }

-.sky-page .natus-form-main {
+.sky-page .sky-form-main {
    flex: 1;
    min-width: 0;
    overflow-y: visible;
@@ -942,8 +942,8 @@ body.page-sky {
 // ── Sidebar z-index sink (landscape sidebars must go below backdrop) ───────────

@media (orientation: landscape) {
-    html.natus-open body .container .navbar,
-    html.natus-open body #id_footer {
+    html.sky-open body .container .navbar,
+    html.sky-open body #id_footer {
        z-index: 90;
    }
 }
--- a/src/static_src/scss/_tooltips.scss
+++ b/src/static_src/scss/_tooltips.scss
@@ -1,6 +1,6 @@
 // ── Tooltip base styles ───────────────────────────────────────────────────────
-// Shared by wallet tokens, game-kit kit bag, and natus wheel tooltips.
-// Portal tooltips (#id_tooltip_portal, #id_natus_tooltip) are position:fixed
+// Shared by wallet tokens, game-kit kit bag, and sky wheel tooltips.
+// Portal tooltips (#id_tooltip_portal, #id_sky_tooltip) are position:fixed
 // and override z-index; inline .tt cards use position:absolute within their
 // parent token container.

--- a/src/static_src/scss/_tray.scss
+++ b/src/static_src/scss/_tray.scss
@@ -258,7 +258,7 @@ $tray-bevel:    0.3rem;  // inner bevel ring; grid must sit inside this
    position: relative;

    // Whatever a cell holds (role-card img, sig stage card, future Celtic Cross
-    // / natus wheel / dice) gets a soft drop shadow to lift it off the felt.
+    // / sky wheel / dice) gets a soft drop shadow to lift it off the felt.
    // Applied to the child rather than the cell itself so the dotted grid
    // borders stay shadow-free.
    > * {
--- a/src/static_src/scss/core.scss
+++ b/src/static_src/scss/core.scss
@@ -7,7 +7,7 @@
@import 'palette-picker';
@import 'room';
@import 'card-deck';
-@import 'natus';
+@import 'sky';
@import 'tray';
@import 'billboard';
@import 'note';
--- a/src/static_src/tests/NatusWheelSpec.js
+++ b/src/static_src/tests/NatusWheelSpec.js
@@ -1,15 +1,15 @@
-// ── NatusWheelSpec.js ─────────────────────────────────────────────────────────
+// ── SkyWheelSpec.js ─────────────────────────────────────────────────────────
 //
-// Unit specs for natus-wheel.js — planet/element click-to-lock tooltips.
+// Unit specs for sky-wheel.js — planet/element click-to-lock tooltips.
 //
 // DOM contract assumed:
-//   <svg id="id_natus_svg">         — target for NatusWheel.draw()
-//   <div id="id_natus_tooltip">     — tooltip portal (position:fixed on page)
+//   <svg id="id_sky_svg">         — target for SkyWheel.draw()
+//   <div id="id_sky_tooltip">     — tooltip portal (position:fixed on page)
 //
 // Click-lock contract:
 //   click on [data-planet] group   → adds .nw-planet--active class
 //                                    raises group to DOM front
-//                                    shows #id_natus_tooltip with
+//                                    shows #id_sky_tooltip with
 //                                    planet name, in-sign degree, sign name,
 //                                    ℞ if retrograde, and "n / total" index
 //   click same planet again        → removes .nw-planet--active; hides tooltip
@@ -40,7 +40,7 @@ const CONJUNCTION_CHART = {
    house_system: "O",
 };

-describe("NatusWheel — planet click tooltips", () => {
+describe("SkyWheel — planet click tooltips", () => {

    const SYNTHETIC_CHART = {
        planets: {
@@ -67,7 +67,7 @@ describe("NatusWheel — planet click tooltips", () => {

    beforeEach(() => {
        svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svgEl.setAttribute("id", "id_natus_svg");
+        svgEl.setAttribute("id", "id_sky_svg");
        svgEl.setAttribute("width",  "400");
        svgEl.setAttribute("height", "400");
        svgEl.style.width  = "400px";
@@ -75,16 +75,16 @@ describe("NatusWheel — planet click tooltips", () => {
        document.body.appendChild(svgEl);

        tooltipEl = document.createElement("div");
-        tooltipEl.id        = "id_natus_tooltip";
+        tooltipEl.id        = "id_sky_tooltip";
        tooltipEl.className = "tt";
        tooltipEl.style.display = "none";
        document.body.appendChild(tooltipEl);

-        NatusWheel.draw(svgEl, SYNTHETIC_CHART);
+        SkyWheel.draw(svgEl, SYNTHETIC_CHART);
    });

    afterEach(() => {
-        NatusWheel.clear();
+        SkyWheel.clear();
        svgEl.remove();
        tooltipEl.remove();
    });
@@ -145,13 +145,13 @@ describe("NatusWheel — planet click tooltips", () => {
    });
 });

-describe("NatusWheel — tick lines, raise, and cycle navigation", () => {
+describe("SkyWheel — tick lines, raise, and cycle navigation", () => {

    let svgEl2, tooltipEl;

    beforeEach(() => {
        svgEl2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svgEl2.setAttribute("id", "id_natus_svg_conj");
+        svgEl2.setAttribute("id", "id_sky_svg_conj");
        svgEl2.setAttribute("width",  "400");
        svgEl2.setAttribute("height", "400");
        svgEl2.style.width  = "400px";
@@ -159,17 +159,17 @@ describe("NatusWheel — tick lines, raise, and cycle navigation", () => {
        document.body.appendChild(svgEl2);

        tooltipEl = document.createElement("div");
-        tooltipEl.id             = "id_natus_tooltip";
+        tooltipEl.id             = "id_sky_tooltip";
        tooltipEl.className      = "tt";
        tooltipEl.style.display  = "none";
        tooltipEl.style.position = "fixed";
        document.body.appendChild(tooltipEl);

-        NatusWheel.draw(svgEl2, CONJUNCTION_CHART);
+        SkyWheel.draw(svgEl2, CONJUNCTION_CHART);
    });

    afterEach(() => {
-        NatusWheel.clear();
+        SkyWheel.clear();
        svgEl2.remove();
        tooltipEl.remove();
    });
@@ -295,7 +295,7 @@ describe("NatusWheel — tick lines, raise, and cycle navigation", () => {
 //   - DOFF clears lines; re-opening same planet finds DON active
 // ─────────────────────────────────────────────────────────────────────────────

-describe("NatusWheel — DON/DOFF aspect line persistence", () => {
+describe("SkyWheel — DON/DOFF aspect line persistence", () => {

    const ASPECT_CHART = {
        planets: {
@@ -326,7 +326,7 @@ describe("NatusWheel — DON/DOFF aspect line persistence", () => {

    beforeEach(() => {
        svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svgEl.setAttribute("id", "id_natus_svg");
+        svgEl.setAttribute("id", "id_sky_svg");
        svgEl.setAttribute("width",  "400");
        svgEl.setAttribute("height", "400");
        svgEl.style.width  = "400px";
@@ -334,16 +334,16 @@ describe("NatusWheel — DON/DOFF aspect line persistence", () => {
        document.body.appendChild(svgEl);

        tooltipEl = document.createElement("div");
-        tooltipEl.id        = "id_natus_tooltip";
+        tooltipEl.id        = "id_sky_tooltip";
        tooltipEl.className = "tt";
        tooltipEl.style.display = "none";
        document.body.appendChild(tooltipEl);

-        NatusWheel.draw(svgEl, ASPECT_CHART);
+        SkyWheel.draw(svgEl, ASPECT_CHART);
    });

    afterEach(() => {
-        NatusWheel.clear();
+        SkyWheel.clear();
        svgEl.remove();
        tooltipEl.remove();
    });
@@ -454,7 +454,7 @@ describe("NatusWheel — DON/DOFF aspect line persistence", () => {
    });
 });

-xdescribe("NatusWheel — half-wheel tooltip positioning", () => {
+xdescribe("SkyWheel — half-wheel tooltip positioning", () => {

    const HALF_CHART = {
        planets: {
@@ -481,7 +481,7 @@ xdescribe("NatusWheel — half-wheel tooltip positioning", () => {

    beforeEach(() => {
        svgEl3 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svgEl3.setAttribute("id", "id_natus_svg_half");
+        svgEl3.setAttribute("id", "id_sky_svg_half");
        svgEl3.setAttribute("width",  "400");
        svgEl3.setAttribute("height", "400");
        svgEl3.style.width  = "400px";
@@ -489,7 +489,7 @@ xdescribe("NatusWheel — half-wheel tooltip positioning", () => {
        document.body.appendChild(svgEl3);

        tooltipEl = document.createElement("div");
-        tooltipEl.id             = "id_natus_tooltip";
+        tooltipEl.id             = "id_sky_tooltip";
        tooltipEl.className      = "tt";
        tooltipEl.style.display  = "none";
        tooltipEl.style.position = "fixed";
@@ -501,11 +501,11 @@ xdescribe("NatusWheel — half-wheel tooltip positioning", () => {
            { left: 0, top: 0, width: 400, height: 400, right: 400, bottom: 400 }
        );

-        NatusWheel.draw(svgEl3, HALF_CHART);
+        SkyWheel.draw(svgEl3, HALF_CHART);
    });

    afterEach(() => {
-        NatusWheel.clear();
+        SkyWheel.clear();
        svgEl3.remove();
        tooltipEl.remove();
    });
@@ -561,7 +561,7 @@ xdescribe("NatusWheel — half-wheel tooltip positioning", () => {
 // clicking a classic-element slice lists contributor planet names in the tooltip.
 // ─────────────────────────────────────────────────────────────────────────────

-describe("NatusWheel — element tooltip contributor display", () => {
+describe("SkyWheel — element tooltip contributor display", () => {

    const ENRICHED_CHART = {
        planets: {
@@ -608,7 +608,7 @@ describe("NatusWheel — element tooltip contributor display", () => {

    beforeEach(() => {
        svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svgEl.setAttribute("id", "id_natus_svg");
+        svgEl.setAttribute("id", "id_sky_svg");
        svgEl.setAttribute("width",  "400");
        svgEl.setAttribute("height", "400");
        svgEl.style.width  = "400px";
@@ -616,16 +616,16 @@ describe("NatusWheel — element tooltip contributor display", () => {
        document.body.appendChild(svgEl);

        tooltipEl = document.createElement("div");
-        tooltipEl.id        = "id_natus_tooltip";
+        tooltipEl.id        = "id_sky_tooltip";
        tooltipEl.className = "tt";
        tooltipEl.style.display = "none";
        document.body.appendChild(tooltipEl);

-        NatusWheel.draw(svgEl, ENRICHED_CHART);
+        SkyWheel.draw(svgEl, ENRICHED_CHART);
    });

    afterEach(() => {
-        NatusWheel.clear();
+        SkyWheel.clear();
        svgEl.remove();
        tooltipEl.remove();
    });
@@ -682,7 +682,7 @@ describe("NatusWheel — element tooltip contributor display", () => {
 // Clicking the same sign again closes the tooltip.
 // ─────────────────────────────────────────────────────────────────────────────

-describe("NatusWheel — sign ring click tooltips", () => {
+describe("SkyWheel — sign ring click tooltips", () => {

    const SIGN_CHART = {
        planets: {
@@ -703,7 +703,7 @@ describe("NatusWheel — sign ring click tooltips", () => {

    beforeEach(() => {
        svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svgEl.setAttribute("id", "id_natus_svg");
+        svgEl.setAttribute("id", "id_sky_svg");
        svgEl.setAttribute("width",  "400");
        svgEl.setAttribute("height", "400");
        svgEl.style.width  = "400px";
@@ -711,16 +711,16 @@ describe("NatusWheel — sign ring click tooltips", () => {
        document.body.appendChild(svgEl);

        tooltipEl = document.createElement("div");
-        tooltipEl.id        = "id_natus_tooltip";
+        tooltipEl.id        = "id_sky_tooltip";
        tooltipEl.className = "tt";
        tooltipEl.style.display = "none";
        document.body.appendChild(tooltipEl);

-        NatusWheel.draw(svgEl, SIGN_CHART);
+        SkyWheel.draw(svgEl, SIGN_CHART);
    });

    afterEach(() => {
-        NatusWheel.clear();
+        SkyWheel.clear();
        svgEl.remove();
        tooltipEl.remove();
    });
@@ -756,7 +756,7 @@ describe("NatusWheel — sign ring click tooltips", () => {
 // Clicking the same house again closes the tooltip.
 // ─────────────────────────────────────────────────────────────────────────────

-describe("NatusWheel — house ring click tooltips", () => {
+describe("SkyWheel — house ring click tooltips", () => {

    const HOUSE_CHART = {
        planets: {
@@ -777,7 +777,7 @@ describe("NatusWheel — house ring click tooltips", () => {

    beforeEach(() => {
        svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svgEl.setAttribute("id", "id_natus_svg");
+        svgEl.setAttribute("id", "id_sky_svg");
        svgEl.setAttribute("width",  "400");
        svgEl.setAttribute("height", "400");
        svgEl.style.width  = "400px";
@@ -785,16 +785,16 @@ describe("NatusWheel — house ring click tooltips", () => {
        document.body.appendChild(svgEl);

        tooltipEl = document.createElement("div");
-        tooltipEl.id        = "id_natus_tooltip";
+        tooltipEl.id        = "id_sky_tooltip";
        tooltipEl.className = "tt";
        tooltipEl.style.display = "none";
        document.body.appendChild(tooltipEl);

-        NatusWheel.draw(svgEl, HOUSE_CHART);
+        SkyWheel.draw(svgEl, HOUSE_CHART);
    });

    afterEach(() => {
-        NatusWheel.clear();
+        SkyWheel.clear();
        svgEl.remove();
        tooltipEl.remove();
    });
@@ -835,7 +835,7 @@ describe("NatusWheel — house ring click tooltips", () => {
 // Planet tooltips include angle aspects in their own aspect lists.
 // ─────────────────────────────────────────────────────────────────────────────

-describe("NatusWheel — angle (ASC/MC) click tooltips", () => {
+describe("SkyWheel — angle (ASC/MC) click tooltips", () => {

    // ASC=0°(Aries): Sun@8° → Conjunction orb 8° ✓; Mars@188° → Opposition orb 8° ✓
    // MC=90°(Cancer): Moon@97° → Conjunction orb 7° ✓
@@ -863,7 +863,7 @@ describe("NatusWheel — angle (ASC/MC) click tooltips", () => {

    beforeEach(() => {
        svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svgEl.setAttribute("id", "id_natus_svg");
+        svgEl.setAttribute("id", "id_sky_svg");
        svgEl.setAttribute("width",  "400");
        svgEl.setAttribute("height", "400");
        svgEl.style.width  = "400px";
@@ -871,16 +871,16 @@ describe("NatusWheel — angle (ASC/MC) click tooltips", () => {
        document.body.appendChild(svgEl);

        tooltipEl = document.createElement("div");
-        tooltipEl.id        = "id_natus_tooltip";
+        tooltipEl.id        = "id_sky_tooltip";
        tooltipEl.className = "tt";
        tooltipEl.style.display = "none";
        document.body.appendChild(tooltipEl);

-        NatusWheel.draw(svgEl, ANGLE_CHART);
+        SkyWheel.draw(svgEl, ANGLE_CHART);
    });

    afterEach(() => {
-        NatusWheel.clear();
+        SkyWheel.clear();
        svgEl.remove();
        tooltipEl.remove();
    });
--- a/src/static_src/tests/SpecRunner.html
+++ b/src/static_src/tests/SpecRunner.html
@@ -25,7 +25,7 @@
    <script src="SigSelectSpec.js"></script>
    <script src="SeaDealSpec.js"></script>
    <script src="FanStageSpec.js"></script>
-    <script src="NatusWheelSpec.js"></script>
+    <script src="SkyWheelSpec.js"></script>
    <script src="NoteSpec.js"></script>
    <script src="NotePageSpec.js"></script>
    <!-- src files -->
@@ -40,7 +40,7 @@
    <script src="/static/apps/epic/sea.js"></script>
    <script src="/static/apps/gameboard/game-kit.js"></script>
    <script src="/static/apps/gameboard/d3.min.js"></script>
-    <script src="/static/apps/gameboard/natus-wheel.js"></script>
+    <script src="/static/apps/gameboard/sky-wheel.js"></script>
    <!-- Jasmine env config (optional) -->
    <script src="lib/jasmine-6.0.1/boot1.js"></script>