CHUNK #3: Writing Surface — editor wiring, storage view, polish

Complete the Writing Surface chunk: wire the web writing view to the
offline-first storage adapter, finish the editor package exports, and
apply Step 4 polish (SVG monogram logo, real project in the sidebar,
font settings → CSS variables).

Editor package
- Re-export EditorContent + Editor type from @pubscript/editor so the
  web app never imports TipTap directly.

Web writing view (apps/web)
- project-store (zustand) over storageLocal: project, chapters, active
  chapter, autosave via createAutosave, idle detection via
  createIdleDetector.
- Client-side seed mirroring the server seed ("The Glass Harbor").
- WritingView component: editor + autosave label + word/scene count +
  chapter nav; wire the /write route inside AppShell.
- Import editor.css in main.tsx.

Core storage contract
- Extend StorageAdapter with createBook/listBooks/listChapters;
  implement in local + server adapters; update contract test mock.

Polish
- Sidebar: SVG monogram logo + live project title/word count instead
  of the placeholder "The Silent Cartographer".
- Fonts: applyFontSettings() in the theme engine writes --ps-font-*
  variables; .ps-content reads --ps-font-size/leading/measure; settings
  store applies fontSize on boot and change.

Docs
- PLAN.md: CHUNK #3 → in progress.
- CHUNK#3_PROGRESS.md: steps 1–3 done, step 4 polish in progress.

Verified: full workspace typecheck clean, lint clean, core 24 / ui 5 /
editor 7 tests pass, web build clean. (server vitest hits EADDRINUSE on
8080 — pre-existing Docker WordPress port conflict, unrelated.)

packages/core/src/autosave.test.ts

@@ -16,6 +16,15 @@ function mockAdapter(): StorageAdapter & { saved: DocumentRef[] } {
     async getProject() {
       throw new Error("not implemented");
     },
+    async createBook() {
+      throw new Error("not implemented");
+    },
+    async listBooks() {
+      return [];
+    },
+    async listChapters() {
+      return [];
+    },
     async getChapter() {
       return null;
     },

packages/core/src/storage-local.ts

@@ -2,6 +2,7 @@ import Dexie, { type Table } from "dexie";
 import type {
   AISession,
   Board,
+  Book,
   Chapter,
   DocumentRef,
   Entity,
@@ -22,6 +23,7 @@ interface EntityRec {
 
 class PubScriptDB extends Dexie {
   projects!: Table<Project, string>;
+  books!: Table<Book, string>;
   chapters!: Table<Chapter, string>;
   entities!: Table<EntityRec, string>;
   boards!: Table<Board, string>;
@@ -31,6 +33,7 @@ class PubScriptDB extends Dexie {
     super("pubscript");
     this.version(1).stores({
       projects: "id, projectId",
+      books: "id, projectId",
       chapters: "id, bookId, projectId",
       entities: "key, projectId, kind",
       boards: "id, projectId",
@@ -86,6 +89,23 @@ export const storageLocal: StorageAdapter = {
     return p;
   },
 
+  async createBook(b: { projectId: string; title: string }): Promise<Book> {
+    const id = createUlid();
+    const book: Book = { id, projectId: b.projectId, title: b.title, order: 0, chapters: [] };
+    await db.books.put(book);
+    return book;
+  },
+
+  async listBooks(projectId: string): Promise<Book[]> {
+    const rows = await db.books.where("projectId").equals(projectId).toArray();
+    return rows.sort((a, b) => a.order - b.order);
+  },
+
+  async listChapters(bookId: string): Promise<Chapter[]> {
+    const rows = await db.chapters.where("bookId").equals(bookId).toArray();
+    return rows.sort((a, b) => a.order - b.order);
+  },
+
   async saveDocument(doc: DocumentRef): Promise<void> {
     const existing = await db.chapters.get(doc.id);
     const base: Chapter = existing ?? {

packages/core/src/storage-server.ts

@@ -1,6 +1,7 @@
 import type {
   AISession,
   Board,
+  Book,
   Chapter,
   DocumentRef,
   Entity,
@@ -65,6 +66,21 @@ export function createServerClient(opts: ServerClientOptions): StorageAdapter {
       return r.project;
     },
 
+    async createBook(b: { projectId: string; title: string }): Promise<Book> {
+      const r = await req<{ book: Book }>("POST", `/api/projects/${b.projectId}/books`, { title: b.title });
+      return r.book;
+    },
+
+    async listBooks(projectId: string): Promise<Book[]> {
+      const r = await req<{ books: Book[] }>("GET", `/api/projects/${projectId}/books`);
+      return r.books;
+    },
+
+    async listChapters(bookId: string): Promise<Chapter[]> {
+      const r = await req<{ chapters: Chapter[] }>("GET", `/api/books/${bookId}/chapters`);
+      return r.chapters;
+    },
+
     async saveDocument(doc: DocumentRef): Promise<void> {
       await req("POST", `/api/chapters/${doc.id}/autosave`, {
         rev: doc.rev,

packages/core/src/storage.ts

@@ -6,6 +6,7 @@
 
 import type {
   Board,
+  Book,
   Chapter,
   DocumentRef,
   Entity,
@@ -30,6 +31,11 @@ export interface StorageAdapter {
   createProject(p: NewProject): Promise<Project>;
   getProject(id: string): Promise<Project>;
 
+  // books & chapters
+  createBook(b: { projectId: string; title: string }): Promise<Book>;
+  listBooks(projectId: string): Promise<Book[]>;
+  listChapters(bookId: string): Promise<Chapter[]>;
+
   // content (debounced autosave)
   saveDocument(doc: DocumentRef): Promise<void>;
   getChapter(id: string): Promise<Chapter | null>;

packages/editor/src/Editor.tsx

@@ -47,8 +47,8 @@ export interface PubScriptEditorHookOptions extends Omit<UseEditorOptions, "exte
   editor?: TipTapEditor;
   /** Decoration source to render. Defaults to the empty stub. */
   decorationSource?: PubScriptDecorationSource;
-  /** Initial document content (ProseMirror JSON or HTML string). */
-  content?: string;
+  /** Initial document content (ProseMirror JSON). */
+  content?: Content;
   /** Called on every transaction with the live editor instance. */
   onUpdate?: (editor: TipTapEditor) => void;
   /** Whether the editor is editable. */
@@ -72,7 +72,7 @@ export function usePubScriptEditor(options: PubScriptEditorHookOptions = {}) {
   const editor = useEditor({
     editable,
     extensions: pubScriptExtensions,
-    ...(content !== undefined ? { content: content as Content } : {}),
+    ...(content !== undefined ? { content } : {}),
     ...useEditorOptions,
   });
 
@@ -117,8 +117,8 @@ export function usePubScriptEditor(options: PubScriptEditorHookOptions = {}) {
 /**
  * Convenience factory for a headless editor instance, shared across the app.
  */
-export function createEditorInstance(content?: string): TipTapEditor {
-  return createPubScriptEditor(content === undefined ? {} : { content: content as Content });
+export function createEditorInstance(content?: Content): TipTapEditor {
+  return createPubScriptEditor(content === undefined ? {} : { content });
 }
 
 export { createPubScriptEditor, pubScriptExtensions };

packages/editor/src/index.ts

@@ -43,3 +43,8 @@ export {
 export { serializeToMarkdown, parseMarkdown, markdownInputRules, markdownPasteRules } from "./markdown.js";
 
 export { throttle, createIdleDetector } from "./perf.js";
+
+// Re-export the TipTap render surface and editor type so consumers of the
+// package never import TipTap directly.
+export { EditorContent } from "@tiptap/react";
+export type { Editor } from "@tiptap/core";

packages/ui/src/AppShell.css

@@ -118,12 +118,12 @@ body {
   overflow: auto;
 }
 .ps-content {
-  max-width: 820px;
+  max-width: var(--ps-font-measure, 720px);
   margin: 0 auto;
   padding: 32px 24px 96px;
   font-family: var(--ps-font-body);
-  font-size: 17px;
-  line-height: 1.75;
+  font-size: var(--ps-font-size, 17px);
+  line-height: var(--ps-font-leading, 1.75);
 }
 
 /* ---- Sidebar nav ---- */
@@ -137,7 +137,12 @@ body {
   align-items: center;
   gap: 8px;
 }
-.ps-logo .ps-logo-mark { color: var(--ps-accent); }
+.ps-logo .ps-logo-mark {
+  color: var(--ps-accent);
+  width: 1.35em;
+  height: 1.35em;
+  flex: none;
+}
 .ps-nav-section-title {
   font-size: 11px;
   text-transform: uppercase;

packages/ui/src/theme.ts

@@ -130,3 +130,39 @@ export function applyTheme(id: ThemeId): ThemeId {
 export function getActiveTheme(): ThemeId {
   return activeTheme;
 }
+
+/**
+ * Runtime font overrides for the writing surface. See PLAN.md §4.1/§4.7.
+ * These layer on top of the theme's base font families.
+ */
+export interface FontSettings {
+  /** Body font family override (falls back to the theme's body font). */
+  family: string;
+  /** Base body font size in px. */
+  size: number;
+  /** Line height as a unitless multiplier. */
+  leading: number;
+  /** Prose column max width (measure) in px. */
+  measure: number;
+}
+
+export const DEFAULT_FONT_SETTINGS: FontSettings = {
+  family: "",
+  size: 18,
+  leading: 1.7,
+  measure: 720,
+};
+
+/**
+ * Apply font settings by writing CSS variables to :root. The prose column
+ * (`.ps-content`) reads these; an empty `family` leaves the theme's body font
+ * in place. Safe to call before the DOM exists (no-op).
+ */
+export function applyFontSettings(s: Partial<FontSettings>): void {
+  const root = typeof document !== "undefined" ? document.documentElement : undefined;
+  if (!root) return;
+  if (s.size != null) root.style.setProperty("--ps-font-size", `${s.size}px`);
+  if (s.leading != null) root.style.setProperty("--ps-font-leading", String(s.leading));
+  if (s.measure != null) root.style.setProperty("--ps-font-measure", `${s.measure}px`);
+  if (s.family != null && s.family !== "") root.style.setProperty("--ps-font-body", s.family);
+}