From 961b24d0d8fc40409f6c7bd4201ee33cb77316ea Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 4 Jun 2026 15:57:23 -0400
Subject: [PATCH] =?UTF-8?q?feat(book):=20J1.b=20=E2=80=94=20distinct=20Pag?=
 =?UTF-8?q?es-overview=20empty=20state=20when=20only=20chapters=20exist?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The starter-template panel fired on '!pages.length' which is now
ambiguous: a user can have chapters (counted in pages[]) but no
designed pages, and the Pages tab needs to say something. Splits
into three cases:

  (1) no designed pages AND no chapters → starter templates (as
      before, with the hint updated to point at the new Chapters tab
      for + Add chapter)
  (2) chapters but no designed pages → 'No designed pages yet' panel
      with + Add page / + Add 10 pages / Go to Chapters buttons
  (3) at least one designed page → render the grid normally

Phase J1 polish — pure UI; data model unchanged.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/index.html | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/index.html b/src/index.html
index 84dce89..6004971 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9931,7 +9931,18 @@
         const chapterN = pages.filter(p => p.type === 'reflow').length;
         readout.textContent = `${designN} page${designN === 1 ? '' : 's'} · ${chapterN} chapter${chapterN === 1 ? '' : 's'}`;
       }
-      if (!pages.length) {
+      // Phase J1.b empty states. Three cases to distinguish:
+      //   (1) Brand-new book — no designed pages AND no chapters → show
+      //       the starter-template panel so the user picks a size and we
+      //       seed a default master + sample chapter.
+      //   (2) Chapters but no designed pages — the user has started
+      //       writing but hasn't laid out any pages yet. Don't show the
+      //       starter (it would create a duplicate sample chapter);
+      //       point them at the Add Page buttons + the Chapters tab.
+      //   (3) Any designed pages exist → render the grid normally.
+      const designedPagesN = pages.filter(p => p.type === 'design').length;
+      const chaptersN = pages.filter(p => p.type === 'reflow').length;
+      if (designedPagesN === 0 && chaptersN === 0) {
         const starter = document.createElement('div');
         starter.className = 'bookStarterPanel';
         const presets = [
@@ -9965,7 +9976,7 @@
             `).join('')}
           </div>
           ${deckBlock}
-          <p class="hint" style="margin-top:14px">Or skip the template — click <b>+ Add page</b>, <b>+ Add chapter</b>, or <b>Document settings…</b> to start from scratch.</p>
+          <p class="hint" style="margin-top:14px">Or skip the template — click <b>+ Add page</b> here, <b>+ Add chapter</b> under the <b>📎 Chapters</b> tab, or <b>Document settings…</b> in the sidebar to start from scratch.</p>
         `;
         grid.appendChild(starter);
         starter.querySelectorAll('.bookStarterCard[data-preset]').forEach(btn => {
@@ -9980,6 +9991,24 @@
         }
         return;
       }
+      if (designedPagesN === 0 && chaptersN > 0) {
+        const empty = document.createElement('div');
+        empty.className = 'bookStarterPanel';
+        empty.innerHTML = `
+          <h3 style="margin:0 0 4px;font-size:1.05rem;font-family:inherit">No designed pages yet</h3>
+          <p class="hint" style="margin:0 0 12px">You have ${chaptersN} chapter${chaptersN === 1 ? '' : 's'} of text but no pages laid out to hold it. Add designed pages here, then (in J3+) thread text frames through them to pour the chapter text in. For now, the pagination engine still auto-paginates each chapter against its master.</p>
+          <div class="buttonRow" style="margin:0">
+            <button type="button" class="primary" id="bookEmptyAddPageBtn">+ Add page</button>
+            <button type="button" id="bookEmptyAdd10Btn">+ Add 10 pages</button>
+            <button type="button" id="bookEmptyChaptersBtn">📎 Go to Chapters</button>
+          </div>
+        `;
+        grid.appendChild(empty);
+        empty.querySelector('#bookEmptyAddPageBtn')?.addEventListener('click', () => addBookDesignedPage());
+        empty.querySelector('#bookEmptyAdd10Btn')?.addEventListener('click', () => addBookTenPages());
+        empty.querySelector('#bookEmptyChaptersBtn')?.addEventListener('click', () => setBookSubView('chapters'));
+        return;
+      }
       // Numbered-page counter walks the visible sequence, skipping
       // any entry flagged skipNumber:true. The displayed number also
       // honours pageNumbering.startAt + firstNumberedPage.