Deploy Aether Garden application

app.py

@@ -356,7 +356,7 @@ def filter_entities(location_filter, type_filter, status_filter, search):
         status=status_filter,
         search=search or None,
     )
-    return render_entity_grid(entities)
+    return render_entity_grid(entities), render_entity_hologram(entities[0] if entities else None)
 
 
 def filter_book(day, entry_type, search):
@@ -637,6 +637,13 @@ def build_app() -> gr.Blocks:
     with gr.Blocks(**blocks_kwargs) as demo:
         session_id = gr.State(value=str(uuid.uuid4()))
 
+        # Hidden pickers at root — Gradio won't wire events inside display:none offpage stores
+        map_pick = gr.Textbox(visible=False, elem_id="map_location_pick")
+        explore_place_pick = gr.Textbox(visible=False, elem_id="explore_place_pick")
+        book_day_pick = gr.Textbox(visible=False, elem_id="book_day_pick")
+        entity_pick = gr.Textbox(visible=False, elem_id="entity_pick")
+        portal_pick = gr.Textbox(visible=False, elem_id="portal_location_pick")
+
         opening_gate = gr.HTML(value=opening_gate_html(), elem_id="realm-opening-host")
         presence_bar = gr.HTML(value="", elem_id="presence-bar")
         header = gr.HTML(value=get_header_html(), elem_classes=["realm-header-wrap"])
@@ -706,7 +713,6 @@ def build_app() -> gr.Blocks:
                 with gr.Column(elem_classes=["tome-offpage-store"]):
                     world_vignette = gr.HTML(value=render_world_vignette())
                     realm_diorama = gr.HTML(value="")
-                    map_pick = gr.Textbox(visible=False, elem_id="map_location_pick")
                     with gr.Accordion("How this world works", open=False):
                         gr.HTML(
                             '<div class="how-it-works">'
@@ -747,7 +753,6 @@ def build_app() -> gr.Blocks:
                                 container=False,
                                 padding=False,
                             )
-                            explore_place_pick = gr.Textbox(visible=False, elem_id="explore_place_pick")
                             wander_btn = gr.Button("✦ Wander at random", variant="secondary", size="sm")
 
                         with gr.Column(scale=1, elem_classes=["tome-page-right", "tome-printed-page", "tome-explore-stage"]):
@@ -761,7 +766,6 @@ def build_app() -> gr.Blocks:
                                 padding=False,
                                 elem_id="explore-diorama-host",
                             )
-                            portal_pick = gr.Textbox(visible=False, elem_id="portal_location_pick")
 
                 with gr.Column(elem_classes=["tome-offpage-store"]):
                     places_gallery = gr.Gallery(
@@ -794,7 +798,6 @@ def build_app() -> gr.Blocks:
                     with gr.Row(elem_classes=["tome-spread-row"]):
                         with gr.Column(scale=1, elem_classes=["tome-page-left", "tome-printed-page", "tome-book-index"]):
                             day_tabs = gr.HTML(value=render_day_tabs(_init_book_day))
-                            book_day_pick = gr.Textbox(visible=False, elem_id="book_day_pick")
                             _day_choices = list(range(max(1, _init_book_day - 14), _init_book_day + 1))
                             book_day_select = gr.Dropdown(
                                 choices=[(f"Day {d}", d) for d in reversed(_day_choices)],
@@ -849,8 +852,6 @@ def build_app() -> gr.Blocks:
                             rel_graph = gr.HTML(value=render_relationship_graph())
 
             with gr.Tab("Souls of the Garden", id="entities"):
-                entity_pick = gr.Textbox(visible=False, elem_id="entity_pick")
-
                 with gr.Column(elem_classes=["tome-spread-shell"]):
                     with gr.Row(elem_classes=["tome-spread-row"]):
                         with gr.Column(scale=1, elem_classes=["tome-page-left", "tome-printed-page", "tome-souls-index"]):
@@ -972,6 +973,16 @@ def build_app() -> gr.Blocks:
             _realm_map_pick,
             inputs=[map_pick],
             outputs=[world_map, location_panel],
+        ).then(
+            None, None, None,
+            js="""
+            () => {
+              setTimeout(() => {
+                const modal = document.querySelector('.location-modal-overlay');
+                if (modal) modal.classList.add('is-open');
+              }, 120);
+            }
+            """,
         )
 
         explore_place_pick.change(
@@ -982,6 +993,16 @@ def build_app() -> gr.Blocks:
             lambda pick: int(pick) if pick and str(pick).isdigit() else None,
             inputs=[explore_place_pick],
             outputs=[explore_loc],
+        ).then(
+            None, None, None,
+            js="""
+            () => {
+              setTimeout(() => {
+                const frame = document.querySelector('.tome-explore-stage .diorama-frame');
+                if (frame) frame.focus();
+              }, 200);
+            }
+            """,
         )
 
         portal_pick.change(
@@ -1107,7 +1128,7 @@ def build_app() -> gr.Blocks:
             f.change(
                 filter_entities,
                 [loc_filter, type_filter, status_filter, entity_search],
-                [entity_grid],
+                [entity_grid, entity_detail],
             )
 
         entity_pick.change(select_entity_by_id, [entity_pick], [entity_detail])
@@ -1635,29 +1656,38 @@ def build_app() -> gr.Blocks:
                     wireTomeNav();
                     wirePageExpand();
 
+          const triggerGradioInput = (elemId, value) => {
+            const root = document.getElementById(elemId) || document.querySelector('#' + elemId);
+            if (!root) return false;
+            const input = root.querySelector('textarea')
+              || 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);
+            input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            input.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+            return true;
+          };
+
           const bind = () => {
             document.querySelectorAll('#world-map [data-location-id]').forEach((node) => {
               if (node.dataset.mapBound) return;
               node.dataset.mapBound = '1';
               node.style.cursor = 'pointer';
-              node.addEventListener('click', () => {
+              node.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
                 const id = node.getAttribute('data-location-id');
-                const root = document.querySelector('#map_location_pick');
-                const input = root && (root.querySelector('textarea') || root.querySelector('input'));
-                if (input && id) {
-                  input.value = id;
-                  input.dispatchEvent(new Event('input', { bubbles: true }));
-                }
+                if (id) triggerGradioInput('map_location_pick', id);
               });
             });
           };
           const fireHiddenInput = (id, value) => {
-            const root = document.querySelector(id);
-            const input = root && (root.querySelector('textarea') || root.querySelector('input'));
-            if (input) {
-              input.value = value;
-              input.dispatchEvent(new Event('input', { bubbles: true }));
-            }
+            const elemId = (id || '').replace(/^#/, '');
+            triggerGradioInput(elemId, value);
           };
 
           const wireClickable = (el, handler) => {
@@ -1680,7 +1710,11 @@ def build_app() -> gr.Blocks:
             document.querySelectorAll('.place-ribbon-item').forEach((btn) => {
               wireClickable(btn, () => {
                 const id = btn.getAttribute('data-location-id');
-                if (id) fireHiddenInput('#explore_place_pick', id);
+                if (!id) return;
+                document.querySelectorAll('.place-ribbon-item').forEach((el) => {
+                  el.classList.toggle('is-selected', el.getAttribute('data-location-id') === id);
+                });
+                fireHiddenInput('explore_place_pick', id);
               });
             });
             document.querySelectorAll('.day-tab').forEach((btn) => {
@@ -1690,12 +1724,16 @@ def build_app() -> gr.Blocks:
               });
             });
             document.querySelectorAll('.entity-grid-card').forEach((card) => {
-              if (card.dataset.entityBound) return;
-              card.dataset.entityBound = '1';
+              const id = card.getAttribute('data-entity-id');
+              if (!id) return;
               card.style.cursor = 'pointer';
+              if (card.dataset.entityBound === id) return;
+              card.dataset.entityBound = id;
               wireClickable(card, () => {
-                const id = card.getAttribute('data-entity-id');
-                if (id) fireHiddenInput('#entity_pick', id);
+                document.querySelectorAll('.entity-grid-card').forEach((el) => {
+                  el.classList.toggle('is-selected', el.getAttribute('data-entity-id') === id);
+                });
+                fireHiddenInput('entity_pick', id);
               });
             });
             document.querySelectorAll('.location-modal-close').forEach((btn) => {

ui/relationship_graph.py

@@ -264,22 +264,26 @@ def render_bonds_sidebar(rel_type: str = "all") -> str:
         f'<span class="rel-legend-item"><i style="background:{c}"></i>{k}</span>'
         for k, c in REL_COLORS.items()
     )
-    rel_list = []
-    for rel in relationships[:10]:
+    cards = []
+    for rel in relationships[:8]:
         t = TYPE_SHORT.get(rel["relationship_type"], rel["relationship_type"])
-        desc = (rel.get("description") or "A bond still forming…")[:72]
-        rel_list.append(
-            f'<li><b>{rel["entity_a_name"]}</b> ↔ <b>{rel["entity_b_name"]}</b> '
-            f'· {t} — <em>{desc}</em></li>'
-        )
+        color = REL_COLORS.get(rel["relationship_type"], "#605848")
+        desc = (rel.get("description") or "A bond still forming…")[:56]
+        cards.append(f"""
+        <div class="bond-card" style="--bond-color:{color}">
+          <span class="bond-card-type">{t}</span>
+          <p class="bond-card-names">{rel["entity_a_name"]} ↔ {rel["entity_b_name"]}</p>
+          <p class="bond-card-desc">{desc}</p>
+        </div>
+        """)
 
     total = len(get_all_relationships())
     return f"""
     <div class="bonds-sidebar">
       <p class="tome-printed-kicker">The Web of Bonds</p>
-      <p class="bonds-sidebar-desc">{len(relationships)} shown · {total} threads total</p>
-      <div class="rel-legend">{legend}</div>
-      <ul class="rel-list">{"".join(rel_list)}</ul>
+      <p class="bonds-sidebar-desc">{len(relationships)} of {total} threads</p>
+      <div class="rel-legend bonds-legend-compact">{legend}</div>
+      <div class="bond-cards">{"".join(cards)}</div>
     </div>
     """
 

ui/styles.css

@@ -4622,3 +4622,271 @@ body,
 .realm-opening.is-back-visible .realm-prologue-card {
     display: none !important;
 }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   FIX PACK — centering, book edges, interactions, readability
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+#realm-opening-host,
+#realm-opening-host .realm-opening {
+    position: fixed !important;
+    inset: 0 !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    margin: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    display: grid !important;
+    place-items: center !important;
+}
+
+.realm-opening-inner {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin: 0 auto !important;
+}
+
+.realm-book-stage {
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin: 0 auto !important;
+}
+
+.realm-book-3d {
+    margin: 0 auto !important;
+    left: auto !important;
+    right: auto !important;
+}
+
+.realm-book-front .realm-book-spine {
+    left: -10px !important;
+    transform: none !important;
+    top: 6% !important;
+    bottom: 6% !important;
+    width: 14px !important;
+    border-radius: 4px 0 0 4px !important;
+}
+
+.realm-cover-front,
+.realm-cover-back {
+    border: 3px solid rgba(92, 58, 28, 0.75) !important;
+    outline: 1px solid rgba(201, 161, 59, 0.35) !important;
+    outline-offset: 3px;
+    box-shadow:
+        inset 0 2px 0 rgba(255, 240, 198, 0.12),
+        inset 0 -3px 8px rgba(0, 0, 0, 0.35),
+        0 22px 60px rgba(0, 0, 0, 0.55) !important;
+}
+
+/* Book spread — leather edge frame (top + sides) */
+.realm-tabs [role="tabpanel"] {
+    box-shadow:
+        inset 0 14px 20px -6px rgba(48, 28, 14, 0.18),
+        inset 14px 0 18px -8px rgba(72, 44, 18, 0.12),
+        inset -14px 0 18px -8px rgba(72, 44, 18, 0.12),
+        inset 0 -8px 16px rgba(168, 134, 83, 0.1),
+        0 18px 38px rgba(76, 50, 22, 0.26) !important;
+}
+
+/* Page I right — distribute content vertically */
+.tome-page-centered {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: space-between !important;
+    gap: 0.4rem !important;
+    min-height: 0 !important;
+}
+
+.tome-page-centered .realm-stats-strip,
+.tome-page-centered .current-event,
+.tome-page-centered .realm-pulse,
+.tome-page-centered .activity-feed {
+    flex-shrink: 0;
+    margin-bottom: 0.35rem !important;
+}
+
+.tome-page-centered .realm-summon-block,
+.tome-page-centered .realm-summon-input,
+.tome-page-centered .seal-summon-btn {
+    flex-shrink: 0;
+}
+
+.tome-page-left .realm-map,
+.tome-page-left #world-map {
+    flex: 1 1 auto;
+    min-height: 200px;
+    max-height: 42%;
+}
+
+/* Explore left — padding */
+.tome-explore-index {
+    padding: 0.65rem 0.85rem 0.75rem 0.55rem !important;
+    gap: 0.5rem !important;
+}
+
+.tome-explore-index .place-ribbon-item {
+    padding: 0.5rem 0.55rem !important;
+    margin-bottom: 0.15rem;
+}
+
+.tome-explore-index .wander-btn,
+.tome-explore-index button {
+    margin-top: 0.35rem !important;
+}
+
+.tome-explore-stage {
+    padding: 0.55rem 0.55rem 0.65rem 0.75rem !important;
+}
+
+.tome-explore-stage .diorama-header {
+    display: block !important;
+    padding: 0.55rem 0.75rem !important;
+}
+
+.tome-explore-stage .diorama-wrap {
+    min-height: 300px !important;
+    flex: 1 1 auto !important;
+}
+
+.tome-explore-stage .diorama-frame {
+    min-height: 280px !important;
+    height: min(46vh, 400px) !important;
+}
+
+/* Souls — parchment hologram (readable) */
+.tome-souls-stage .hologram-stage {
+    background: linear-gradient(168deg, #faf3df 0%, #ebe0c4 55%, #dccca8 100%) !important;
+    border: 1px solid rgba(138, 106, 58, 0.45) !important;
+    box-shadow:
+        inset 0 0 24px rgba(88, 56, 24, 0.08),
+        0 12px 28px rgba(76, 50, 22, 0.18) !important;
+    transform: none !important;
+    color: #3d2814 !important;
+}
+
+.tome-souls-stage .hologram-beam {
+    display: none;
+}
+
+.tome-souls-stage .hologram-meta {
+    color: #8a6424 !important;
+}
+
+.tome-souls-stage .hologram-name {
+    color: #3d2814 !important;
+    font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
+}
+
+.tome-souls-stage .hologram-appearance,
+.tome-souls-stage .hologram-memory,
+.tome-souls-stage .hologram-goals {
+    color: #4a3420 !important;
+    font-family: 'IM Fell English', serif !important;
+    line-height: 1.5 !important;
+}
+
+.tome-souls-stage .hologram-greeting {
+    color: #5c4228 !important;
+    border-left-color: rgba(138, 106, 58, 0.55) !important;
+}
+
+.tome-souls-stage .hologram-banner {
+    height: 72px;
+}
+
+.tome-souls-index .entity-grid-card.is-selected {
+    outline: 2px solid rgba(138, 106, 58, 0.75);
+    outline-offset: 2px;
+    box-shadow: 0 6px 16px rgba(76, 50, 22, 0.2) !important;
+}
+
+.tome-souls-index {
+    padding: 0.55rem 0.75rem 0.65rem 0.55rem !important;
+}
+
+.tome-souls-index .entity-grid {
+    max-height: 360px !important;
+}
+
+/* Bonds — compact cards */
+.bond-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    overflow-y: auto;
+    max-height: 380px;
+    padding-right: 0.2rem;
+}
+
+.bond-card {
+    padding: 0.45rem 0.55rem;
+    border-radius: 8px;
+    border-left: 3px solid var(--bond-color, #8a6a3a);
+    background: rgba(255, 249, 232, 0.72);
+    border: 1px solid rgba(138, 106, 58, 0.22);
+    border-left-width: 3px;
+    border-left-color: var(--bond-color, #8a6a3a);
+}
+
+.bond-card-type {
+    font-family: 'Cinzel', serif;
+    font-size: 0.62rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--bond-color, #8a6a3a);
+}
+
+.bond-card-names {
+    margin: 0.15rem 0;
+    font-family: 'Cinzel', serif;
+    font-size: 0.78rem;
+    color: #3d2814;
+    line-height: 1.25;
+}
+
+.bond-card-desc {
+    margin: 0;
+    font-family: 'IM Fell English', serif;
+    font-style: italic;
+    font-size: 0.76rem;
+    color: #5c4228;
+    line-height: 1.35;
+}
+
+.bonds-legend-compact {
+    margin-bottom: 0.35rem;
+}
+
+.bonds-legend-compact .rel-legend-item {
+    font-size: 0.68rem;
+}
+
+.bonds-sidebar .rel-list {
+    display: none;
+}
+
+/* Book day view — fill right page */
+.tome-book-index + .column .book-day-view,
+.tome-page-right .book-day-view {
+    min-height: 200px;
+}
+
+.tome-page-right .book-entries {
+    overflow-y: auto !important;
+    max-height: 420px !important;
+}
+
+.tome-book-index {
+    padding: 0.55rem 0.75rem !important;
+    gap: 0.45rem !important;
+}
+
+/* Location modal always on top */
+.location-modal-overlay.is-open {
+    z-index: 9900 !important;
+}