Deploy Aether Garden application

app.py

@@ -689,11 +689,25 @@ def build_app() -> gr.Blocks:
                                 '<div class="tome-ornament top" aria-hidden="true">✦ ─── ❧ ─── ✦</div>'
                                 '<p class="tome-printed-kicker">The Living Realm</p>'
                                 '<p class="tome-printed-hint">Tap a place on the map — a vision shall rise.</p>'
+                                '<div class="tome-map-chrome" aria-hidden="true">'
+                                '<span class="tome-map-chrome-glyph">⟡</span>'
+                                '<span class="tome-map-chrome-line"></span>'
+                                '<span class="tome-map-chrome-label">Map of the Canopy</span>'
+                                '<span class="tome-map-chrome-line"></span>'
+                                '<span class="tome-map-chrome-glyph">⟡</span>'
+                                '</div>'
                             )
                             world_map = gr.HTML(
                                 value=render_world_map(),
                                 elem_id="world-map",
                             )
+                            gr.HTML(
+                                '<div class="tome-map-divider" aria-hidden="true">'
+                                '<span class="tome-map-vine left"></span>'
+                                '<span class="tome-map-divider-text">✧ Sacred Places ✧</span>'
+                                '<span class="tome-map-vine right"></span>'
+                                '</div>'
+                            )
                             location_panel = gr.HTML(
                                 value=render_location_panel(None),
                                 elem_id="location-panel-host-wrap",
@@ -1749,34 +1763,122 @@ def build_app() -> gr.Blocks:
                     }
 
           const triggerGradioInput = (elemId, value) => {
-            const root = document.getElementById(elemId) || document.querySelector('#' + elemId);
+            const clean = String(elemId || '').replace(/^#/, '');
+            const root = document.getElementById(clean)
+              || document.querySelector('#' + clean)
+              || document.querySelector('[id="' + clean + '"]');
             if (!root) return false;
-            const input = root.querySelector('textarea')
-              || root.querySelector('input[type="text"]')
-              || root.querySelector('input:not([type="hidden"])');
+            const input = (root.tagName === 'TEXTAREA' || root.tagName === 'INPUT') ? root
+              : (root.querySelector('textarea:not([disabled])')
+                || root.querySelector('input[type="text"]')
+                || root.querySelector('input:not([type="hidden"])'));
             if (!input) return false;
             const proto = input.tagName === 'TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
             const setter = Object.getOwnPropertyDescriptor(proto, 'value')?.set;
-            if (setter) setter.call(input, String(value));
-            else input.value = String(value);
+            const next = String(value);
+            if (setter) setter.call(input, next);
+            else input.value = next;
             input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
             input.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
             return true;
           };
 
+          const ensureLocationModal = () => {
+            let modal = document.getElementById('aether-location-modal');
+            if (modal) return modal;
+            modal = document.createElement('div');
+            modal.id = 'aether-location-modal';
+            modal.className = 'location-modal-overlay';
+            modal.innerHTML = `
+              <div class="location-modal-card">
+                <div class="location-modal-close" role="button" tabindex="0" aria-label="Close">✕</div>
+                <div class="location-panel location-panel-animate open">
+                  <div class="location-panel-banner">
+                    <div class="location-panel-scrim"></div>
+                    <h3 class="location-panel-name"></h3>
+                  </div>
+                  <div class="location-panel-content">
+                    <p class="location-panel-desc"></p>
+                    <p class="location-panel-special"></p>
+                    <p class="location-soul-count"></p>
+                  </div>
+                </div>
+              </div>`;
+            document.body.appendChild(modal);
+            const closeBtn = modal.querySelector('.location-modal-close');
+            if (closeBtn) {
+              closeBtn.addEventListener('click', () => modal.classList.remove('is-open'));
+              closeBtn.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  modal.classList.remove('is-open');
+                }
+              });
+            }
+            modal.addEventListener('click', (e) => {
+              if (e.target === modal) modal.classList.remove('is-open');
+            });
+            return modal;
+          };
+
+          const openLocationFromNode = (node) => {
+            if (!node) return;
+            const id = node.getAttribute('data-location-id');
+            if (!id) return;
+            const modal = ensureLocationModal();
+            const name = node.getAttribute('data-name') || 'Unknown place';
+            const desc = node.getAttribute('data-desc') || '';
+            const special = node.getAttribute('data-special') || '';
+            const souls = node.getAttribute('data-souls') || '0';
+            const img = node.getAttribute('data-img') || '';
+            const nameEl = modal.querySelector('.location-panel-name');
+            const descEl = modal.querySelector('.location-panel-desc');
+            const specialEl = modal.querySelector('.location-panel-special');
+            const soulsEl = modal.querySelector('.location-soul-count');
+            const banner = modal.querySelector('.location-panel-banner');
+            if (nameEl) nameEl.textContent = name;
+            if (descEl) descEl.textContent = desc;
+            if (specialEl) specialEl.textContent = special ? ('✦ ' + special) : '';
+            if (soulsEl) soulsEl.textContent = souls + ' souls currently here';
+            if (banner) {
+              banner.style.backgroundImage = img ? ("url('" + img.replace(/'/g, "%27") + "')") : '';
+              banner.style.backgroundSize = 'cover';
+              banner.style.backgroundPosition = 'center';
+            }
+            modal.classList.add('is-open');
+            document.querySelectorAll('.location-node').forEach((n) => {
+              n.classList.toggle('location-selected', n.getAttribute('data-location-id') === id);
+            });
+            triggerGradioInput('map_location_pick', id);
+          };
+
           const bind = () => {
-            document.querySelectorAll('#world-map [data-location-id]').forEach((node) => {
-              if (node.dataset.mapBound) return;
-              node.dataset.mapBound = '1';
+            document.querySelectorAll('#world-map .location-node, [id="world-map"] .location-node').forEach((node) => {
               node.style.cursor = 'pointer';
-              node.addEventListener('click', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                const id = node.getAttribute('data-location-id');
-                if (id) triggerGradioInput('map_location_pick', id);
-              });
             });
           };
+
+          if (!window._aetherMapDelegationBound) {
+            window._aetherMapDelegationBound = true;
+            document.addEventListener('click', (e) => {
+              const node = e.target.closest('.location-node[data-location-id]');
+              if (!node) return;
+              const inMap = node.closest('#world-map') || node.closest('[id="world-map"]');
+              if (!inMap) return;
+              e.preventDefault();
+              e.stopPropagation();
+              openLocationFromNode(node);
+            }, true);
+            document.addEventListener('keydown', (e) => {
+              if (e.key !== 'Enter' && e.key !== ' ') return;
+              const node = e.target.closest('.location-node[data-location-id]');
+              if (!node) return;
+              const inMap = node.closest('#world-map') || node.closest('[id="world-map"]');
+              if (!inMap) return;
+              e.preventDefault();
+              openLocationFromNode(node);
+            });
+          }
           const fireHiddenInput = (id, value) => {
             const elemId = (id || '').replace(/^#/, '');
             triggerGradioInput(elemId, value);
@@ -1797,6 +1899,7 @@ def build_app() -> gr.Blocks:
           const closeLocationModal = () => {
             document.querySelectorAll('.location-modal-overlay').forEach((m) => m.classList.remove('is-open'));
           };
+          window._aetherCloseLocationModal = closeLocationModal;
 
           const bindSpreadClicks = () => {
             document.querySelectorAll('.place-ribbon-item').forEach((btn) => {

ui/map.py

@@ -2,6 +2,7 @@
 
 from __future__ import annotations
 
+import html
 import math
 import random
 
@@ -126,9 +127,24 @@ def render_world_map(selected_location_id: int | None = None) -> str:
         count = loc["entity_count"]
         icon_path = LOCATION_ICONS.get(loc["slug"], "M0,-6 A6,6 0 1,1 0,6")
 
+        img = assets.location_image_url(loc.get("slug")) or ""
+        special = loc.get("special_property", "") or ""
+        desc = loc.get("short_description", "") or ""
+
         svg_parts.append(
             f'<g class="location-node{pulse_class}{selected_class}" '
-            f'data-location-id="{loc["id"]}" transform="translate({x},{y})">'
+            f'data-location-id="{loc["id"]}" '
+            f'data-name="{html.escape(loc["name"], quote=True)}" '
+            f'data-desc="{html.escape(desc, quote=True)}" '
+            f'data-special="{html.escape(special, quote=True)}" '
+            f'data-img="{html.escape(img, quote=True)}" '
+            f'data-souls="{count}" '
+            f'role="button" tabindex="0" '
+            f'transform="translate({x},{y})">'
+        )
+
+        svg_parts.append(
+            '<circle r="50" fill="transparent" class="location-hit" pointer-events="all"/>'
         )
 
         filter_id = "pulse-glow" if is_affected else "glow"

ui/styles.css

@@ -1966,6 +1966,12 @@ body,
 
 .location-node {
     filter: drop-shadow(0 7px 12px rgba(0,0,0,0.36));
+    cursor: pointer;
+    pointer-events: all;
+}
+
+.location-node .location-hit {
+    pointer-events: all;
 }
 
 .location-selected .location-circle {
@@ -3866,11 +3872,11 @@ body,
     font-family: 'Cinzel', serif !important;
 }
 
-.tome-printed-page #world-map,
-.tome-printed-page .realm-map {
-    flex: 1 1 auto;
-    min-height: 0;
-    max-height: 360px;
+.tome-page-left.tome-printed-page #world-map,
+.tome-page-left.tome-printed-page .realm-map {
+    flex: 0 0 auto !important;
+    min-height: 200px !important;
+    max-height: min(300px, 36vh) !important;
     width: 100% !important;
     border: 1px solid rgba(98, 62, 28, 0.28) !important;
     border-radius: 2px !important;
@@ -4774,8 +4780,16 @@ body.aether-realm-entered #realm-opening-host {
         0 18px 38px rgba(76, 50, 22, 0.26) !important;
 }
 
-/* Page I right — distribute content vertically */
-.tome-page-centered {
+/* Page I — left: tight map stack; right: distribute vertically */
+.tome-page-left.tome-page-centered {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: flex-start !important;
+    gap: 0.28rem !important;
+    min-height: 0 !important;
+}
+
+.tome-page-right.tome-page-centered {
     display: flex !important;
     flex-direction: column !important;
     justify-content: space-between !important;
@@ -4783,6 +4797,77 @@ body.aether-realm-entered #realm-opening-host {
     min-height: 0 !important;
 }
 
+.tome-page-left .tome-ornament.bottom {
+    margin-top: auto !important;
+    padding-top: 0.2rem !important;
+}
+
+.tome-map-chrome {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.45rem;
+    margin: 0.1rem 0 0.15rem;
+    flex-shrink: 0;
+}
+
+.tome-map-chrome-line {
+    flex: 1;
+    max-width: 72px;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(138, 106, 58, 0.35), transparent);
+}
+
+.tome-map-chrome-label {
+    font-family: 'Cinzel', serif;
+    font-size: 0.58rem;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: rgba(122, 90, 40, 0.55);
+    white-space: nowrap;
+}
+
+.tome-map-chrome-glyph {
+    color: rgba(138, 106, 58, 0.45);
+    font-size: 0.7rem;
+}
+
+.tome-map-divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    margin: 0.12rem 0 0.08rem;
+    flex-shrink: 0;
+}
+
+.tome-map-divider-text {
+    font-family: 'Cinzel', serif;
+    font-size: 0.58rem;
+    letter-spacing: 0.16em;
+    color: rgba(122, 90, 40, 0.5);
+    white-space: nowrap;
+}
+
+.tome-map-vine {
+    flex: 1;
+    height: 10px;
+    max-width: 88px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    opacity: 0.55;
+}
+
+.tome-map-vine.left {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'%3E%3Cpath d='M0 5 Q20 0 40 5 T80 5' fill='none' stroke='%238a6a3a' stroke-width='0.8'/%3E%3Ccircle cx='40' cy='5' r='1.2' fill='%23c9a13b'/%3E%3C/svg%3E");
+    background-position: right center;
+}
+
+.tome-map-vine.right {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'%3E%3Cpath d='M0 5 Q20 10 40 5 T80 5' fill='none' stroke='%238a6a3a' stroke-width='0.8'/%3E%3Ccircle cx='40' cy='5' r='1.2' fill='%23c9a13b'/%3E%3C/svg%3E");
+    background-position: left center;
+}
+
 .tome-page-centered .realm-stats-strip,
 .tome-page-centered .current-event,
 .tome-page-centered .realm-pulse,
@@ -4799,9 +4884,34 @@ body.aether-realm-entered #realm-opening-host {
 
 .tome-page-left .realm-map,
 .tome-page-left #world-map {
-    flex: 1 1 auto;
-    min-height: 200px;
-    max-height: 42%;
+    flex: 0 0 auto !important;
+    width: 100% !important;
+    min-height: 200px !important;
+    max-height: min(300px, 36vh) !important;
+    margin: 0 !important;
+}
+
+.tome-page-left #world-map .html-container,
+.tome-page-left #world-map .prose {
+    min-height: 0 !important;
+}
+
+.tome-page-left .location-panel-host {
+    flex-shrink: 0 !important;
+    margin: 0 !important;
+}
+
+.tome-page-left .location-panel-host .map-hint {
+    padding: 0.35rem 0.55rem !important;
+    margin: 0 !important;
+    font-size: 0.78rem !important;
+    border: 1px solid rgba(138, 106, 58, 0.22);
+    border-radius: 4px;
+    background: rgba(255, 249, 232, 0.5);
+}
+
+#aether-location-modal {
+    z-index: 90000 !important;
 }
 
 /* Explore left — padding */