From 0a1ff5f8da70ce8566d2a632c20ba94d64373978 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 2 Jun 2026 14:57:57 -0400
Subject: [PATCH] book(B2): make the per-page edit bar discoverable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The page-context bar landed in B2 but with plain inline styling, so
it sat as an invisible strip somewhere in the layout — Adam couldn't
find a way back to the Pages overview. Two fixes:

- Restyled #bookPageEditBar to mirror the deck-edit-bar floating
  pill: absolutely positioned at the top-center of the canvas
  area, accent-coloured "← Back to Pages" primary button, pill
  prev/next chips with disabled states, page label in the middle.
  Visible only when the editor is active (the existing
  body.template-book.editing-book-page gate).
- Esc while editing a book page now also returns to the overview,
  matching the slide editor's Esc-to-deck behaviour.

There's no explicit "Save" step — every edit autosaves through the
existing persistAutosave() path. Phase D1 will add an explicit
"Publish page as casewrap-page event" action; until then "Back to
Pages" is the way out, and the work is preserved on the manifest
entry's layers.
---
 src/index.html | 42 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/index.html b/src/index.html
index 44360f7..a66a918 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1501,20 +1501,41 @@
       box-sizing: border-box;
       min-height: calc(100vh - 160px);
     }
-    /* Page-context bar above the canvas while editing a book page. */
+    /* Page-context bar — floats at the top-center over the canvas
+       while editing a book page. Mirrors the deck-edit-bar pill so
+       both flows feel consistent. */
     #bookPageEditBar {
       display: none;
-      align-items: center; gap: 10px;
-      padding: 6px 12px;
+      position: absolute; top: 10px; left: 50%;
+      transform: translateX(-50%);
+      z-index: 60;
+      align-items: center; gap: 8px;
       background: var(--panel, #fff);
-      border-bottom: 1px solid var(--line);
-      font-size: .88rem;
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      padding: 5px 14px 5px 8px;
+      box-shadow: 0 6px 20px rgba(15,23,42,.18);
+      font-size: .82rem;
     }
     body.template-book.editing-book-page #bookPageEditBar { display: flex; }
-    #bookPageEditBar button {
-      padding: 4px 10px; font-size: .85rem;
+    #bookPageEditBack {
+      border: 0; background: var(--accent); color: #fff;
+      cursor: pointer; border-radius: 999px;
+      padding: 4px 12px; font-weight: 600; font-size: .8rem;
+    }
+    #bookPageEditPrev, #bookPageEditNext {
+      border: 1px solid var(--line); background: #fff;
+      cursor: pointer; border-radius: 999px;
+      padding: 2px 10px; font-size: .85rem; line-height: 1;
+      min-width: 28px;
+    }
+    #bookPageEditPrev:disabled, #bookPageEditNext:disabled {
+      opacity: .4; cursor: not-allowed;
+    }
+    #bookPageEditLabel {
+      color: var(--ink); font-weight: 600;
+      padding: 0 4px;
     }
-    #bookPageEditLabel { font-weight: 600; }
     .bookViewToggleBar {
       display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
       padding-bottom: 8px; border-bottom: 1px solid var(--line);
@@ -31933,6 +31954,11 @@
         if (pubConfirmM && pubConfirmM.getAttribute('aria-hidden') === 'false') { closePublishConfirmModal(); return; }
         const bookDocM = $('bookDocumentSettingsModal');
         if (bookDocM && bookDocM.getAttribute('aria-hidden') === 'false') { closeBookDocumentSettings(); return; }
+        // Esc while editing a book page returns to the Pages overview.
+        if (state.templateMode === 'book' && state.book?.editingEntryId) {
+          closeBookPage();
+          return;
+        }
         const supportM = $('supportDevModal');
         if (supportM && supportM.getAttribute('aria-hidden') === 'false') { closeSupportDevModal(); return; }
         const shapePathM = $('shapePathModal');