Storyline: unfoldable section list per chapter in the sidebar

Each chapter in the right-hand menu gets a caret that unfolds its
numbered sections (e.g. the prologue's 28 scenes); clicking one jumps
straight to it. The chapter you're reading starts unfolded, other
chapters' sections link across (/storyline/overview#section-…), and the
section at the top of the pane is highlighted as you scroll.

- ChapterOutline service parses each rendered chapter for its
  <h2 class="storyline-section"> headings, adds anchor ids and returns the
  outline; the controller renders all chapters once to feed the sidebar.
- storyline-toc Stimulus controller: fold/unfold, in-pane jump, scroll-spy
  (works in the split view and in the small-screen window-scroll fallback).
- Tests for the outline parser.

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

assets/controllers/storyline_toc_controller.js

@@ -0,0 +1,72 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+ * Sidebar table of contents on a storyline chapter page.
+ *
+ *  - the caret unfolds/folds a chapter's section list
+ *  - links for the chapter being read (target "link", href="#section-…")
+ *    jump inside the split view's scrolling pane
+ *  - the section currently at the top of the pane is highlighted
+ */
+export default class extends Controller {
+    static targets = ['link'];
+
+    connect() {
+        this.pane = this.element.closest('.storyline-split-main');
+        this.onScroll = () => {
+            if (this.frame) return;
+            this.frame = requestAnimationFrame(() => {
+                this.frame = null;
+                this.highlight();
+            });
+        };
+        (this.pane || window).addEventListener('scroll', this.onScroll, { passive: true });
+        window.addEventListener('scroll', this.onScroll, { passive: true });
+        this.highlight();
+    }
+
+    disconnect() {
+        (this.pane || window).removeEventListener('scroll', this.onScroll);
+        window.removeEventListener('scroll', this.onScroll);
+    }
+
+    fold(event) {
+        const item = event.currentTarget.closest('.storyline-toc-item');
+        const open = item.classList.toggle('is-open');
+        event.currentTarget.setAttribute('aria-expanded', open ? 'true' : 'false');
+    }
+
+    jump(event) {
+        const id = event.currentTarget.getAttribute('href').slice(1);
+        const el = document.getElementById(id);
+        if (!el) return;
+        event.preventDefault();
+        el.scrollIntoView({ block: 'start' });
+        history.replaceState(null, '', `#${id}`);
+    }
+
+    linkTargetConnected(link) {
+        link.addEventListener('click', (e) => this.jump({ currentTarget: link, preventDefault: () => e.preventDefault() }));
+    }
+
+    highlight() {
+        if (!this.hasLinkTarget) return;
+        // In the split view the pane scrolls; on small screens the window does.
+        const paneScrolls = this.pane && getComputedStyle(this.pane).overflowY !== 'visible';
+        const top = paneScrolls ? this.pane.getBoundingClientRect().top : 0;
+        let current = null;
+        for (const link of this.linkTargets) {
+            const el = document.getElementById(link.getAttribute('href').slice(1));
+            if (el && el.getBoundingClientRect().top - top <= 90) current = link;
+        }
+        this.linkTargets.forEach((l) => l.classList.toggle('is-current', l === current));
+        if (current && this.pane) {
+            const list = current.closest('.storyline-toc-sections');
+            if (list && list.scrollHeight > list.clientHeight) {
+                const c = current.getBoundingClientRect();
+                const l = list.getBoundingClientRect();
+                if (c.top < l.top || c.bottom > l.bottom) current.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }
+}

assets/styles/app.css

@@ -260,6 +260,49 @@ table.dataTable {
     color: var(--bs-secondary-color);
 }
 
+/* Unfoldable per-chapter section lists */
+.storyline-toc-row { display: flex; align-items: flex-start; gap: 0.15rem; }
+.storyline-toc-row .storyline-toc-link { flex: 1 1 auto; min-width: 0; }
+.storyline-toc-fold {
+    flex: 0 0 1.4rem;
+    height: 1.9rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--bs-secondary-color);
+    cursor: pointer;
+    transition: transform 0.15s ease;
+}
+button.storyline-toc-fold:hover { color: var(--bs-body-color); }
+.storyline-toc-item.is-open > .storyline-toc-row > button.storyline-toc-fold { transform: rotate(90deg); }
+.storyline-toc-sections {
+    display: none;
+    margin: 0.1rem 0 0.4rem 1.4rem;
+    padding: 0;
+    max-height: 45vh;
+    overflow-y: auto;
+    scrollbar-width: none;
+    font-size: 0.875rem;
+}
+.storyline-toc-sections::-webkit-scrollbar { display: none; }
+.storyline-toc-item.is-open > .storyline-toc-sections { display: block; }
+.storyline-toc-sub {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.2rem 0.5rem;
+    border-left: 2px solid var(--bs-border-color);
+    text-decoration: none;
+    color: var(--bs-secondary-color);
+}
+.storyline-toc-sub:hover { color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
+.storyline-toc-sub.is-current {
+    color: var(--bs-body-color);
+    border-left-color: var(--bs-primary);
+    font-weight: 600;
+}
+.storyline-toc-sub .storyline-toc-num { flex: 0 0 1.4rem; }
+.storyline-section { scroll-margin-top: 0.75rem; }
+
 /* --- Storyline: the document itself --------------------------------- */
 .storyline-doc {
     max-width: 46rem;