book(B2): make the per-page edit bar discoverable

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.
This commit is contained in:
thePR0M3TH3AN committed 2026-06-02 14:57:57 -04:00
1 parent 01ecb8a85b
commit 0a1ff5f8da
1 file changed
+34 -8
+34 -8
View File
@@ -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');