refactor: Convert book viewer to idiomatic React

Replace the SSR + injected vanilla-JS navigation script with a proper
client-side React app. BookIndex now uses useState/useEffect/useCallback
for all navigation state, scroll tracking, keyboard shortcuts, and history
management. webpack.config.js switches from renderToStaticMarkup to
embedding page data as window.__BOOK_DATA__ JSON; book.js becomes a
createRoot entry point. Also adds babel-loader for JSX bundling, fixes
#root display:contents so the flex height chain is preserved, and
restores missing CSS for header, .logo, .toolbar, and .tab buttons.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

css/book-layout.css

@@ -1,3 +1,6 @@
+/* React mounts into #root; display:contents removes it from the flex chain */
+#root { display: contents; }
+
 /* Reset body to a layout container (book-page.css targets body for page content) */
 html, body {
   height: 100vh;
@@ -10,6 +13,54 @@ html, body {
   background-image: none;
 }
 
+/* ── App header ── */
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  background: var(--surface2);
+  border-bottom: 1px solid var(--border-bright);
+  flex-shrink: 0;
+}
+
+.logo {
+  font-family: var(--font-display);
+  font-size: 0.7rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--teal);
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* ── Prev / Next buttons ── */
+.tab {
+  background: var(--surface3);
+  border: 1px solid var(--border-bright);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  padding: 5px 14px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.tab:hover:not(:disabled) {
+  background: var(--surface);
+  color: var(--teal);
+  border-color: var(--teal-dim);
+}
+
+.tab:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
 #layout {
   display: flex;
   flex: 1;