changes

src-tauri/Cargo.lock

@@ -4713,7 +4713,7 @@ checksum = "3e2e65a1a2e43cfcb47a895c4c8b10d1f4a61097f9f254f183aee60cad9c651d"
 
 [[package]]
 name = "margin-app"
-version = "0.1.5"
+version = "0.1.6"
 dependencies = [
  "base64 0.22.1",
  "fontdb",

src/components/AddPageMenu.tsx

@@ -4,6 +4,7 @@ import { Icon } from "./Icon";
 
 interface AddPageMenuProps {
   onAdd: (group: "front" | "back", title: string) => void;
+  onAddPart: () => void;
 }
 
 const GROUPS: { key: "front" | "back"; label: string }[] = [
@@ -11,7 +12,7 @@ const GROUPS: { key: "front" | "back"; label: string }[] = [
   { key: "back", label: "Back matter" },
 ];
 
-export function AddPageMenu({ onAdd }: AddPageMenuProps) {
+export function AddPageMenu({ onAdd, onAddPart }: AddPageMenuProps) {
   const [open, setOpen] = useState(false);
   const [coords, setCoords] = useState({ top: 0, left: 0 });
   const btnRef = useRef<HTMLButtonElement>(null);
@@ -42,6 +43,11 @@ export function AddPageMenu({ onAdd }: AddPageMenuProps) {
     onAdd(group, label);
   };
 
+  const pickPart = () => {
+    setOpen(false);
+    onAddPart();
+  };
+
   return (
     <>
       <button ref={btnRef} className="add-page" data-open={open} onClick={toggle}>
@@ -54,6 +60,12 @@ export function AddPageMenu({ onAdd }: AddPageMenuProps) {
           style={{ top: coords.top, left: coords.left }}
           onMouseDown={(e) => e.stopPropagation()}
         >
+          <div className="add-page-group">
+            <div className="add-page-label">Body</div>
+            <button className="add-page-item" onClick={pickPart}>
+              Part divider
+            </button>
+          </div>
           {GROUPS.map((g) => (
             <div key={g.key} className="add-page-group">
               <div className="add-page-label">{g.label}</div>

src/components/Dock.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { generateHTML } from "@tiptap/core";
 import { COVER_ID, useBook } from "../store/useBook";
-import { type Chapter, type TrimSize, bodyNumber, chapterKind } from "../model/book";
+import { type Chapter, type TrimSize, bodyNumber, chapterKind, partNumber, partRoman } from "../model/book";
 import { editorExtensions } from "../editor/extensions";
 import { chapterToPdfInputs, coverToPdfInputs } from "../export/typst";
 import { compilePdf, isDesktop } from "../ipc";
@@ -71,7 +71,15 @@ function DockHead({ meta }: { meta?: ReactNode }) {
 
 function chapterEyebrow(chapter: Chapter, chapters: Chapter[], idx: number): string {
   const kind = chapterKind(chapter);
-  return kind === "body" ? `Chapter ${bodyNumber(chapters, idx) ?? ""}` : kind === "front" ? "Front matter" : "Back matter";
+  if (kind === "body") return `Chapter ${bodyNumber(chapters, idx) ?? ""}`;
+  if (kind === "part") return `Part ${partRoman(partNumber(chapters, idx) ?? 0)}`;
+  return kind === "front" ? "Front matter" : "Back matter";
+}
+
+function previewTitle(chapter: Chapter): string | undefined {
+  if (chapter.noTitle) return undefined;
+  if (chapterKind(chapter) === "part") return chapter.title || undefined;
+  return chapter.title || "Untitled";
 }
 
 function useActiveChapter() {
@@ -163,7 +171,7 @@ function HtmlDock() {
       <div className="page">
         <div className="p-opener">
           <div className="p-num">{eyebrow}</div>
-          {!chapter.noTitle && <div className="p-title">{chapter.title || "Untitled"}</div>}
+          {previewTitle(chapter) !== undefined && <div className="p-title">{previewTitle(chapter)}</div>}
         </div>
         <div className="page-body" dangerouslySetInnerHTML={{ __html: html }} />
         <div className="folio">{idx * 8 + 7}</div>
@@ -207,7 +215,7 @@ function DeviceDock({ device }: { device: Device }) {
       <DeviceFrame
         device={device}
         eyebrow={eyebrow}
-        title={chapter.noTitle ? undefined : chapter.title || "Untitled"}
+        title={previewTitle(chapter)}
         html={html}
       />
     </section>

src/components/EditorView.tsx

@@ -18,7 +18,7 @@ import { useProofing } from "../store/useProofing";
 import { useTheme } from "../store/useTheme";
 import { useWidth } from "../store/useWidth";
 import { WIDTH_OPTIONS } from "../width";
-import { bodyNumber, chapterKind } from "../model/book";
+import { bodyNumber, chapterKind, partNumber, partRoman } from "../model/book";
 import { saveBook } from "../library";
 import { isDesktop } from "../ipc";
 import { issueSignature, rememberWord, runProof } from "../proofing";
@@ -156,7 +156,13 @@ export function EditorView() {
   const realIdx = book.chapters.findIndex((c) => c.id === chapter?.id);
   const kind = chapter ? chapterKind(chapter) : "body";
   const eyebrow =
-    kind === "body" ? `Chapter ${bodyNumber(book.chapters, realIdx) ?? ""}` : kind === "front" ? "Front matter" : "Back matter";
+    kind === "body"
+      ? `Chapter ${bodyNumber(book.chapters, realIdx) ?? ""}`
+      : kind === "part"
+        ? `Part ${partRoman(partNumber(book.chapters, realIdx) ?? 0)}`
+        : kind === "front"
+          ? "Front matter"
+          : "Back matter";
 
   return (
     <div className="app">
@@ -255,7 +261,9 @@ export function EditorView() {
                   <input
                     className="chapter-title-input"
                     value={chapter.noTitle ? "" : chapter.title}
-                    placeholder={chapter.noTitle ? "No title" : kind === "body" ? "Chapter title" : "Page title"}
+                    placeholder={
+                      chapter.noTitle ? "No title" : kind === "body" ? "Chapter title" : kind === "part" ? "Part title (optional)" : "Page title"
+                    }
                     spellCheck={false}
                     disabled={chapter.noTitle}
                     onChange={(e) => setChapterTitle(chapter.id, e.target.value)}

src/components/RowMenu.tsx

@@ -6,11 +6,16 @@ interface RowMenuProps {
   label: string;
   onDuplicate?: () => void;
   onDelete: () => void;
+  onOpenChange?: (open: boolean) => void;
   className?: string;
 }
 
-export function RowMenu({ label, onDuplicate, onDelete, className = "" }: RowMenuProps) {
+export function RowMenu({ label, onDuplicate, onDelete, onOpenChange, className = "" }: RowMenuProps) {
   const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    onOpenChange?.(open);
+  }, [open]);
   const [coords, setCoords] = useState({ top: 0, right: 0 });
   const btnRef = useRef<HTMLButtonElement>(null);
   const popRef = useRef<HTMLDivElement>(null);

src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { COVER_ID, useBook } from "../store/useBook";
-import { type Chapter, type ChapterKind, bodyNumber, chapterKind } from "../model/book";
+import { type Chapter, type ChapterKind, bodyNumber, chapterKind, partNumber, partRoman } from "../model/book";
 import { AddPageMenu } from "./AddPageMenu";
 import { ConfirmDialog } from "./ConfirmDialog";
 import { Icon } from "./Icon";
@@ -10,6 +10,8 @@ interface Row {
   chapter: Chapter;
   index: number;
   num: number | null;
+  part: number | null;
+  indent: boolean;
 }
 
 interface DropTarget {
@@ -43,6 +45,7 @@ export function Sidebar() {
   const setActiveChapter = useBook((s) => s.setActiveChapter);
   const addChapter = useBook((s) => s.addChapter);
   const addPage = useBook((s) => s.addPage);
+  const addPart = useBook((s) => s.addPart);
   const duplicateChapter = useBook((s) => s.duplicateChapter);
   const deleteChapter = useBook((s) => s.deleteChapter);
   const moveChapter = useBook((s) => s.moveChapter);
@@ -51,6 +54,7 @@ export function Sidebar() {
   const [dragIndex, setDragIndex] = useState<number | null>(null);
   const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);
   const [pendingDelete, setPendingDelete] = useState<{ id: string; title: string } | null>(null);
+  const [menuOpenId, setMenuOpenId] = useState<string | null>(null);
   const [now, setNow] = useState(() => Date.now());
 
   const dropRef = useRef<DropTarget | null>(null);
@@ -62,15 +66,23 @@ export function Sidebar() {
     return () => clearInterval(timer);
   }, []);
 
-  const rows: Row[] = chapters.map((chapter, index) => ({ chapter, index, num: bodyNumber(chapters, index) }));
+  const rows: Row[] = chapters.map((chapter, index) => ({
+    chapter,
+    index,
+    num: bodyNumber(chapters, index),
+    part: partNumber(chapters, index),
+    indent: chapterKind(chapter) === "body" && chapters.slice(0, index).some((c) => chapterKind(c) === "part"),
+  }));
+  const inBody = (r: Row) => chapterKind(r.chapter) === "body" || chapterKind(r.chapter) === "part";
   const groups: { kind: ChapterKind; label: string; rows: Row[] }[] = [
     { kind: "front", label: "Front matter", rows: rows.filter((r) => chapterKind(r.chapter) === "front") },
-    { kind: "body", label: "Chapters", rows: rows.filter((r) => chapterKind(r.chapter) === "body") },
+    { kind: "body", label: "Chapters", rows: rows.filter(inBody) },
     { kind: "back", label: "Back matter", rows: rows.filter((r) => chapterKind(r.chapter) === "back") },
   ];
   const groupEnd: Record<ChapterKind, number> = {
     front: groups[0].rows.length,
     body: groups[0].rows.length + groups[1].rows.length,
+    part: groups[0].rows.length + groups[1].rows.length,
     back: rows.length,
   };
 
@@ -125,7 +137,7 @@ export function Sidebar() {
   };
 
   const onRowPointerDown = (e: React.PointerEvent, index: number) => {
-    if (e.button !== 0 || (e.target as HTMLElement).closest(".row-menu-btn")) return;
+    if (e.button !== 0 || chapters[index]?.id === menuOpenId || (e.target as HTMLElement).closest(".row-menu-btn")) return;
     suppressClick.current = false;
     gesture.current = { from: index, x: e.clientX, y: e.clientY, active: false };
     window.addEventListener("pointermove", onPointerMove);
@@ -154,7 +166,7 @@ export function Sidebar() {
         <Icon d="M5 4h11l3 3v13H5zM16 4v4h3" size={15} />
         <span className="title">Cover</span>
       </button>
-      <AddPageMenu onAdd={addPage} />
+      <AddPageMenu onAdd={addPage} onAddPart={addPart} />
 
       <div className="nav-scroll">
         {groups.map((group) =>
@@ -162,12 +174,22 @@ export function Sidebar() {
             <div key={group.kind} className="nav-section" data-kind={group.kind}>
               <div className="nav-label">{group.label}</div>
               <ul className="chapters">
-                {group.rows.map((row, i) => (
+                {group.rows.map((row, i) => {
+                  const isPart = chapterKind(row.chapter) === "part";
+                  const partLabel = `Part ${partRoman(row.part ?? 0)}`;
+                  const rowLabel = isPart
+                    ? row.chapter.title
+                      ? `${partLabel}: ${row.chapter.title}`
+                      : partLabel
+                    : row.chapter.title || "Untitled";
+                  return (
                   <li
                     key={row.chapter.id}
                     className="chapter"
                     data-idx={row.index}
                     data-kind={group.kind}
+                    data-part={isPart}
+                    data-indent={row.indent}
                     data-active={row.chapter.id === activeChapterId}
                     data-dragging={dragIndex === row.index}
                     data-drop-before={dropTarget?.kind === group.kind && dropTarget.index === row.index}
@@ -178,29 +200,36 @@ export function Sidebar() {
                     <span className="grip" title="Drag to reorder">
                       <Icon d="M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01" size={14} />
                     </span>
-                    <span className="num">{row.num ?? ""}</span>
+                    {!isPart && <span className="num">{row.num ?? ""}</span>}
                     <span className="text">
-                      <span
-                        className="title"
-                        onMouseEnter={(e) => {
-                          const el = e.currentTarget;
-                          if (el.scrollWidth > el.clientWidth) el.title = row.chapter.title || "Untitled";
-                          else el.removeAttribute("title");
-                        }}
-                      >
-                        {row.chapter.title || "Untitled"}
-                      </span>
+                      {isPart && <span className="part-eyebrow">Part {partRoman(row.part ?? 0)}</span>}
+                      {(!isPart || row.chapter.title) && (
+                        <span
+                          className="title"
+                          onMouseEnter={(e) => {
+                            const el = e.currentTarget;
+                            if (el.scrollWidth > el.clientWidth) el.title = row.chapter.title || "Untitled";
+                            else el.removeAttribute("title");
+                          }}
+                        >
+                          {row.chapter.title || "Untitled"}
+                        </span>
+                      )}
                       {row.chapter.id === activeChapterId && (
                         <span className="meta">Edited {formatEdited(row.chapter.updatedAt, now)}</span>
                       )}
                     </span>
                     <RowMenu
                       label="Page options"
+                      onOpenChange={(open) =>
+                        setMenuOpenId((cur) => (open ? row.chapter.id : cur === row.chapter.id ? null : cur))
+                      }
                       onDuplicate={() => duplicateChapter(row.chapter.id)}
-                      onDelete={() => setPendingDelete({ id: row.chapter.id, title: row.chapter.title || "Untitled" })}
+                      onDelete={() => setPendingDelete({ id: row.chapter.id, title: rowLabel })}
                     />
                   </li>
-                ))}
+                  );
+                })}
                 {!group.rows.length && (
                   <li className="chapter-drop" data-on={dropTarget?.kind === group.kind}>
                     Drop here

src/export/epub.ts

@@ -1,6 +1,6 @@
 import type { JSONContent } from "@tiptap/core";
 import { invoke } from "@tauri-apps/api/core";
-import { type Book, type FigurePlacement, TRIM_DIMS, FIGURE_WIDTH, bodyNumber, chapterKind, isResizablePlacement } from "../model/book";
+import { type Book, type FigurePlacement, TRIM_DIMS, FIGURE_WIDTH, bodyNumber, chapterKind, isResizablePlacement, partNumber, partRoman } from "../model/book";
 import { fontStack, fontsUsed } from "../model/fonts";
 
 export interface EpubFile {
@@ -338,9 +338,12 @@ function contentOpf(
 function navXhtml(book: Book): string {
   const items = book.chapters
     .map((chapter, i) => {
-      if (chapter.noTitle && chapterKind(chapter) !== "body") return "";
-      const fallback = chapterKind(chapter) === "body" ? `Chapter ${bodyNumber(book.chapters, i)}` : "Untitled";
-      const label = chapter.noTitle ? fallback : chapter.title || fallback;
+      const kind = chapterKind(chapter);
+      if (chapter.noTitle && kind !== "body" && kind !== "part") return "";
+      const partLabel = `Part ${partRoman(partNumber(book.chapters, i) ?? 0)}`;
+      const fallback = kind === "body" ? `Chapter ${bodyNumber(book.chapters, i)}` : kind === "part" ? partLabel : "Untitled";
+      const base = chapter.noTitle ? fallback : chapter.title || fallback;
+      const label = kind === "part" && !chapter.noTitle && chapter.title ? `${partLabel}: ${chapter.title}` : base;
       return `      <li><a href="chapter-${i + 1}.xhtml">${esc(label)}</a></li>`;
     })
     .filter(Boolean)
@@ -366,16 +369,20 @@ function chapterXhtml(book: Book, index: number, paths: Map<string, string>): st
   const chapter = book.chapters[index];
   const kind = chapterKind(chapter);
   const num = bodyNumber(book.chapters, index);
-  const title = chapter.title || (kind === "body" ? `Chapter ${num}` : "Untitled");
-  const eyebrow = kind === "body" ? `<p class="eyebrow">Chapter ${num}</p>` : "";
-  const heading = chapter.noTitle ? "" : `<h1>${esc(title)}</h1>`;
+  const partLabel = `Part ${partRoman(partNumber(book.chapters, index) ?? 0)}`;
+  const eyebrow =
+    kind === "body" ? `<p class="eyebrow">Chapter ${num}</p>` : kind === "part" ? `<p class="eyebrow">${esc(partLabel)}</p>` : "";
+  const headingText = kind === "part" ? chapter.title : chapter.title || (kind === "body" ? `Chapter ${num}` : "Untitled");
+  const heading = chapter.noTitle || (kind === "part" && !chapter.title) ? "" : `<h1>${esc(headingText)}</h1>`;
+  const docTitle = chapter.title || (kind === "part" ? partLabel : kind === "body" ? `Chapter ${num}` : "Untitled");
+  const epubType = kind === "body" ? "chapter" : kind === "part" ? "part" : kind === "front" ? "frontmatter" : "backmatter";
   return `<?xml version="1.0" encoding="UTF-8"?>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="${attr(book.metadata.language || "en")}">
   <head>
-    <title>${esc(title)}</title>
+    <title>${esc(docTitle)}</title>
     <link rel="stylesheet" type="text/css" href="style.css"/>
   </head>
-  <body epub:type="${kind === "body" ? "chapter" : kind === "front" ? "frontmatter" : "backmatter"}">
+  <body epub:type="${epubType}">
     <header class="chapter-opener">
       ${eyebrow}
       ${heading}
@@ -435,6 +442,18 @@ h2, h3 {
   margin: 3em 0 2.2em;
 }
 
+body[epub:type="part"] {
+  page-break-before: always;
+}
+
+body[epub:type="part"] .chapter-opener {
+  margin-top: 32vh;
+}
+
+body[epub:type="part"] .eyebrow {
+  font-size: 0.82em;
+}
+
 .eyebrow {
   text-transform: uppercase;
   letter-spacing: 0.28em;

src/export/typst.ts

@@ -1,5 +1,5 @@
 import type { JSONContent } from "@tiptap/core";
-import { type Book, type FigurePlacement, type TrimSize, FIGURE_WIDTH, bodyNumber, chapterKind, isResizablePlacement } from "../model/book";
+import { type Book, type FigurePlacement, type TrimSize, FIGURE_WIDTH, bodyNumber, chapterKind, isResizablePlacement, partNumber, partRoman } from "../model/book";
 import { fontFamilyName, fontsUsed } from "../model/fonts";
 import type { ImageInput } from "../ipc";
 
@@ -166,6 +166,20 @@ function preamble(book: Book): string {
   v(1.5em)
 }
 
+#let openpart(info) = {
+  pagebreak(to: "odd", weak: true)
+  [#metadata(info) <chap>]
+  v(3.1in)
+  align(center)[
+    #text(font: "Hanken Grotesk", size: 10pt, weight: "semibold", tracking: 0.34em)[#upper("Part " + info.numeral)]
+    #if not info.notitle and info.title != "" {
+      v(0.85em)
+      heading(level: 1, numbering: none, outlined: info.toc)[#info.title]
+    }
+  ]
+  v(1.5em)
+}
+
 #let pageof(loc) = {
   let pat = loc.page-numbering()
   if pat == none { pat = "1" }
@@ -186,6 +200,7 @@ function preamble(book: Book): string {
       let info = it.value
       let pg = pageof(it.location())
       let body = info.kind == "body"
+      let part = info.kind == "part"
       let gap = if prev != none and prev != info.kind { 1.7em } else { 0.95em }
       prev = info.kind
       block(width: 100%, above: gap, below: 0.95em, {
@@ -195,7 +210,9 @@ function preamble(book: Book): string {
           column-gutter: (0.65em, 1em),
           align: (right + top, left + top, right + top),
           if body { info.num } else { [] },
-          if body { info.title } else { emph(info.title) },
+          if part {
+            strong(if info.title != "" { "Part " + info.numeral + ": " + info.title } else { "Part " + info.numeral })
+          } else if body { info.title } else { emph(info.title) },
           pg,
         )]
       })
@@ -312,16 +329,23 @@ function normTitle(title: string): string {
 
 function inToc(book: Book, index: number): boolean {
   const chapter = book.chapters[index];
-  if (chapter.noTitle && chapterKind(chapter) !== "body") return false;
+  const kind = chapterKind(chapter);
+  if (kind === "part") return true;
+  if (chapter.noTitle && kind !== "body") return false;
   const title = cleanTitle(chapter.title) || "Untitled";
-  return !(chapterKind(chapter) === "front" && normTitle(title) === normTitle(book.metadata.title));
+  return !(kind === "front" && normTitle(title) === normTitle(book.metadata.title));
 }
 
 function openerCall(book: Book, index: number): string {
   const chapter = book.chapters[index];
   const kind = chapterKind(chapter);
-  const num = kind === "body" ? String(bodyNumber(book.chapters, index)) : "";
   const notitle = !!chapter.noTitle;
+  if (kind === "part") {
+    const numeral = partRoman(partNumber(book.chapters, index) ?? 0);
+    const title = notitle ? "" : cleanTitle(chapter.title);
+    return `#openpart((kind: "part", numeral: ${str(numeral)}, title: ${str(title)}, notitle: ${notitle}, toc: ${inToc(book, index)}))`;
+  }
+  const num = kind === "body" ? String(bodyNumber(book.chapters, index)) : "";
   const title = notitle ? "" : cleanTitle(chapter.title) || "Untitled";
   return `#openchapter((kind: ${str(kind)}, num: ${str(num)}, title: ${str(title)}, notitle: ${notitle}, toc: ${inToc(book, index)}))`;
 }
@@ -335,13 +359,13 @@ export function bookToTypst(book: Book, paths: Map<string, string> = new Map(),
 #set page(numbering: "i")
 #counter(page).update(1)`;
 
-  const firstBody = book.chapters.findIndex((c) => chapterKind(c) === "body");
+  const firstMain = book.chapters.findIndex((c) => chapterKind(c) === "body" || chapterKind(c) === "part");
   const firstToc = book.chapters.findIndex((_, i) => inToc(book, i));
 
   const body = book.chapters
     .map((chapter, i) => {
       const toc = i === firstToc ? `#contents()\n\n` : "";
-      const reset = i === firstBody ? `#set page(numbering: "1")\n#counter(page).update(1)\n` : "";
+      const reset = i === firstMain ? `#set page(numbering: "1")\n#counter(page).update(1)\n` : "";
       return `${toc}${reset}${openerCall(book, i)}\n\n${chapterBody(chapter.content, paths)}`;
     })
     .join("\n\n");

src/model/book.ts

@@ -64,7 +64,7 @@ export function trimRatio(trim: TrimSize): number {
   return w / h;
 }
 
-export type ChapterKind = "front" | "body" | "back";
+export type ChapterKind = "front" | "body" | "part" | "back";
 
 export interface Chapter {
   id: string;
@@ -107,6 +107,31 @@ export function bodyNumber(chapters: Chapter[], index: number): number | null {
   return n;
 }
 
+export function partNumber(chapters: Chapter[], index: number): number | null {
+  if (index < 0 || index >= chapters.length || chapterKind(chapters[index]) !== "part") return null;
+  let n = 0;
+  for (let i = 0; i <= index; i++) if (chapterKind(chapters[i]) === "part") n++;
+  return n;
+}
+
+const ROMAN: [number, string][] = [
+  [1000, "M"], [900, "CM"], [500, "D"], [400, "CD"], [100, "C"], [90, "XC"],
+  [50, "L"], [40, "XL"], [10, "X"], [9, "IX"], [5, "V"], [4, "IV"], [1, "I"],
+];
+
+export function partRoman(n: number): string {
+  if (n < 1) return String(n);
+  let num = n;
+  let out = "";
+  for (const [value, sym] of ROMAN) {
+    while (num >= value) {
+      out += sym;
+      num -= value;
+    }
+  }
+  return out;
+}
+
 export interface Book {
   schema: "margin/1";
   id: string;
@@ -141,6 +166,10 @@ export function createPage(group: "front" | "back", title: string): Chapter {
   return { id: crypto.randomUUID(), title, content: emptyDoc(), kind: group, updatedAt: Date.now() };
 }
 
+export function createPart(title = ""): Chapter {
+  return { id: crypto.randomUUID(), title, content: emptyDoc(), kind: "part", updatedAt: Date.now() };
+}
+
 export function cloneChapter(chapter: Chapter): Chapter {
   const title = chapter.noTitle || !chapter.title ? chapter.title : `${chapter.title} (copy)`;
   return { ...chapter, id: crypto.randomUUID(), title, content: structuredClone(chapter.content), updatedAt: Date.now() };

src/store/useBook.ts

@@ -10,6 +10,7 @@ import {
   cloneChapter,
   createChapter,
   createPage,
+  createPart,
   normalizeBook,
 } from "../model/book";
 import { loadActiveChapter, saveActiveChapter } from "../editor/positions";
@@ -34,6 +35,7 @@ interface BookState {
   setChapterNoTitle: (id: string, noTitle: boolean) => void;
   addChapter: () => void;
   addPage: (group: "front" | "back", title: string) => void;
+  addPart: () => void;
   duplicateChapter: (id: string) => void;
   deleteChapter: (id: string) => void;
   moveChapter: (from: number, to: number, toKind?: ChapterKind) => void;
@@ -107,6 +109,18 @@ export const useBook = create<BookState>((set, get) => ({
       chapters.splice(insertAt, 0, page);
       return { activeChapterId: page.id, dirty: true, book: { ...s.book, chapters } };
     }),
+  addPart: () =>
+    set((s) => {
+      if (!s.book) return {};
+      const part = createPart();
+      const chapters = [...s.book.chapters];
+      const bodyEnd = chapters.length - chapters.filter((c) => chapterKind(c) === "back").length;
+      const activeIdx = chapters.findIndex((c) => c.id === s.activeChapterId);
+      const activeKind = activeIdx >= 0 ? chapterKind(chapters[activeIdx]) : null;
+      const insertAt = activeKind === "body" || activeKind === "part" ? activeIdx + 1 : bodyEnd;
+      chapters.splice(insertAt, 0, part);
+      return { activeChapterId: part.id, dirty: true, book: { ...s.book, chapters } };
+    }),
   duplicateChapter: (id) =>
     set((s) => {
       if (!s.book) return {};
@@ -133,7 +147,7 @@ export const useBook = create<BookState>((set, get) => ({
       const chapters = [...s.book.chapters];
       if (from < 0 || from >= chapters.length) return {};
       const target = chapters[from];
-      const nextKind = toKind ?? chapterKind(target);
+      const nextKind = chapterKind(target) === "part" ? "part" : toKind ?? chapterKind(target);
       const dest = Math.max(0, Math.min(from < to ? to - 1 : to, chapters.length - 1));
       if (from === dest && chapterKind(target) === nextKind) return {};
       const [moved] = chapters.splice(from, 1);

src/styles/app.css

@@ -233,6 +233,37 @@ body.resizing {
   font-variant-numeric: tabular-nums;
 }
 
+.chapter[data-part="true"] {
+  margin-top: 7px;
+  align-items: center;
+}
+
+.chapter[data-part="true"] .text {
+  gap: 1px;
+}
+
+.chapter .part-eyebrow {
+  font-family: var(--font-ui);
+  font-size: var(--t-1);
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.chapter[data-part="true"][data-active="true"] .part-eyebrow {
+  color: var(--accent);
+}
+
+.chapter[data-part="true"] .title {
+  font-size: var(--t-2);
+  color: var(--ink-soft);
+}
+
+.chapter[data-indent="true"] {
+  padding-left: 26px;
+}
+
 .chapter[data-active="true"] .num {
   color: var(--accent);
 }