@atelic-action/artifact 5.1.2 → 5.2.0

package/README.md

@@ -7,7 +7,7 @@ The documents the practice hands or sends a business, as a published package and
 
 Three layers, each a version the next depends on (ATE-671): `@atelic-action/ui` holds the pieces, this package holds the documents built from them, and each business's folder holds only its content, routes, and config. A document fix reaches a folder by bumping this package; a piece fix by bumping ui here, then this package in the folder.
 
-Five artifacts live in the template site: the **read** at `/the-read`, the graded document a business gets from the practice, built from one snapshot at one of two depths (a prospect's, from public readings alone; a customer's, from their own consoles as well), a web page first with its printed copy derived from it, the grades explained by cause with the plan in order between the scorecard and the cards; the **proposal** at `/proposal`, sealed into the page and opened by the reader's own email address; the **monthly page** at `/report`, what an Operate client gets each month on one letter sheet; the **note** at `/notes`, the first touch for a business whose site publishes no email address, set as a short page; and the **first call sheet** at `/first-call`, the desk's page for the first call with a business that booked off a cold first touch, used to guide the call and not sent for now, written so it could be shared with them later. The bare host sends a reader to the read. Every artifact prerenders to static HTML, stays out of every index, and carries the practice's brand by default.
+Five artifacts live in the template site: the **read** at `/the-read`, the graded document a business gets from the practice, built from one snapshot at one of two depths (a prospect's, from public readings alone; a customer's, from their own consoles as well), a web page first with its printed copy derived from it, the grades explained by cause, and the plan for the work set in a tab of its own ahead of the read; the **proposal** at `/proposal`, sealed into the page and opened by the reader's own email address; the **monthly page** at `/report`, what an Operate client gets each month on one letter sheet; the **note** at `/notes`, the first touch for a business whose site publishes no email address, set as a short page; and the **first call sheet** at `/first-call`, the desk's page for the first call with a business that booked off a cold first touch, used to guide the call and not sent for now, written so it could be shared with them later. The bare host sends a reader to the read. Every artifact prerenders to static HTML, stays out of every index, and carries the practice's brand by default.
 
 The method behind them (the seven sections, the four grades from A to D, the rented line, what moved, and when an artifact is private) is the practice repo's `FOOTPRINT.md`. This repo builds to it and never restates it.
 
@@ -21,9 +21,11 @@ Every export of the package, all from the one entry, `@atelic-action/artifact`.
 
 | Export | What it is | Route |
 |---|---|---|
-| `TheRead`, `TheReadProps` | The graded document a business gets, built from one snapshot: the dated lede; the scorecard, a `ReportCard` with each row a link to its card and the earlier letter beside a row that moved, with an optional `note` callout over it for what the read leaves out; the plan, numbered and in order, between the scorecard and the cards, so the whole program reads before any one card's detail; then the tiers, each section on the card (the trade name linked to its definition, the one liner, the grade, the why line as the summary, the blocks, and the sources at the foot) plus the read's own today and after (a two column table) and what we recommend (a checklist), a tier opening on a `markets` table of letters and closing on the `rented` line when it has them; the closing line and the sign off. `access` says which depth it is (`"public"`, from public readings alone, or `"private"`, from the owner's consoles too), and a public read with no note gets the `publicNote` label over its scorecard. `print` adds the lockup and the twin's QR to the printed copy. A beat with no data is left out | `/the-read` |
-| `readLabels`, `ReadLabels` | The fixed words the read sets (Prepared for, the scorecard's screen reader words, Before, Rented, Today, After, Recommendations, the plan's heading, the public note), each overridable through `labels` | `/the-read` |
-| `ReadAccess`, `ReadTier`, `ReadSection`, `ReadChange`, `ReadRecommendation`, `ReadMarkets`, `ReadMarketRow`, `ReadRented`, `ReadStep`, `ReadPlan`, `ReadClose`, `ReadPrint`, `ReadLink`, `ReadParagraph` | The shapes a read's content is written in. `ReadSection` is a `ReadTopic` plus `gist`, `before`, `changes`, and `recommend`; its `why`, a finding's `body`, a market row's `read`, and the rented `text` take a paragraph (a string, or runs of text and links) as well as a node, so a routine can write a read as JSON | none |
+| `TheRead`, `TheReadProps` | The graded document a business gets, built from one snapshot: the dated lede; the scorecard, a `ReportCard` with each row a link to its card and the earlier letter beside a row that moved, with an optional `note` callout over it for what the read leaves out; the plan's numbered steps between the scorecard and the cards when `plan` has any (superseded by the plan tab, and removed at the next major); then the tiers, each section on the card (the trade name linked to its definition, the one liner, the grade, the why line as the summary, the blocks, and the sources at the foot) plus the read's own today and after (a two column table) and what we recommend (a checklist), a tier opening on a `markets` table of letters and closing on the `rented` line when it has them; the closing line and the sign off. `access` says which depth it is (`"public"`, from public readings alone, or `"private"`, from the owner's consoles too), and a public read with no note gets the `publicNote` label over its scorecard. `print` adds the lockup and the twin's QR to the printed copy. A beat with no data is left out. Given a `planDocument`, the page becomes two tabs under the shared head, The Plan first and open, then The Read, which holds everything that sat between the head and the sign off; the sign off stays under both. The tabs are ui's `Tabs`, so a link or a hash naming a card in the read opens the read tab and lands on it, and on paper the plan prints first and the read starts a new page, each under its tab's name. `selectedTab` and `onSelectTab` let a route hold the open tab, for instance to swap the header's stops with it; left out, the plan tab opens first. Without a `planDocument` the page is the one it always was | `/the-read` |
+| `readLabels`, `ReadLabels` | The fixed words the read sets (Prepared for, the scorecard's screen reader words, Before, Rented, Today, After, Recommendations, the plan's heading, the public note, the two tabs' names, and the tab row's name for a screen reader), each overridable through `labels` | `/the-read` |
+| `PlanDocument`, `PlanSection`, `PlanPart`, `PlanBlock` | The shapes the plan tab is written in, all plain data, so a routine can write a plan as JSON. A plan is an optional lede and its sections; a section is an `id` (the anchor a header stop points at), a `heading`, an optional `timeline` line set small under the heading (when the work happens and whose it is), its blocks in order, and any parts, each a smaller heading with the same body. A block is a paragraph, a bulleted or numbered list, or a table with an optional head row, and every piece of text in one is a paragraph, so a link into the read is a run whose `href` is a card's anchor. A block with nothing in it is left out. On a phone a table's rows stack, each cell wearing its column's name | `/the-read` |
+| `thePlanTabId`, `theReadTabId` | The two tabs' ids (`"plan"`, unless the plan document names its own, and `"read"`), so a route compares the open tab without a string of its own. No anchor on the page may share either | none |
+| `ReadAccess`, `ReadTier`, `ReadSection`, `ReadChange`, `ReadRecommendation`, `ReadMarkets`, `ReadMarketRow`, `ReadRented`, `ReadStep`, `ReadPlan` (both superseded by the plan tab), `ReadClose`, `ReadPrint`, `ReadLink`, `ReadParagraph` | The shapes a read's content is written in. `ReadSection` is a `ReadTopic` plus `gist`, `before`, `changes`, and `recommend`; its `why`, a finding's `body`, a market row's `read`, and the rented `text` take a paragraph (a string, or runs of text and links) as well as a node, so a routine can write a read as JSON | none |
 | `Topic` | The section card on its own: the trade name linked to its definition, the one liner, the grade, the why line, the blocks, and the sources, with an `extra` slot after the blocks. The read renders every section through it | `/the-read` |
 | `ratingCell` | A star rating table cell for a `table` block, sorted by its figure | `/the-read` |
 | `ReadTopic`, `ReadBlock`, `ReadInnerBlock`, `ReadChecks`, `ReadTable`, `ReadBar`, `ReadScale`, `ReadStats`, `ReadColumns`, `ReadFindings`, `ReadShots`, `ReadMore`, `ReadBullet`, `ReadSource`, `ReadMark`, `ReadCell`, `ReadSorted`, `ReadTone` | The shapes a section card and its blocks are written in. In a `table` block, a cell past the first given as `null` is empty: it reaches ui's `DataTable` untouched, draws its short gray rule, reads the column's `emptyLabel` (or "None") to a screen reader, and sorts last either way, while a typed dash stays content, since it can mean unchanged. A `none` mark draws the same rule with its own `text` but sorts as a mark, lowest of the four, and the markets table's unread grade draws it too | none |
@@ -40,7 +42,7 @@ Every export of the package, all from the one entry, `@atelic-action/artifact`.
 | `normalizeEmail` | How a typed address becomes the key a payload opens with; the sealing command mirrors it | none |
 | `documents.css` | The documents' styles, at `@atelic-action/artifact/styles/documents.css` | every route |
 
-What a document is built from stays in `@atelic-action/ui`, and this package imports it rather than copying it: `GradeChip`, `gradeLabel`, `SignOff`, `Shot` (the owner's screen), `Paragraph`, `Runs`, `isEmpty`, `ArtifactAnchor` (the plain data paragraph of the note and the read), and `newTabProps` from `@atelic-action/ui/artifact`; `Callout`, `Checklist`, `ColumnChart`, `DataTable`, `Disclosure`, `StackedBar`, `StatRow`, `ThresholdScale`, and their types from `@atelic-action/ui/components`; `Button` from `@atelic-action/ui/primitives`. The shell around a page (`ArtifactShell`), the head (`buildPageHead`), the contract (`ArtifactConfig`), the reader helpers, the error boundary, the access wall, the Vite configuration, and the commands are ui's too, and a site imports them from there.
+What a document is built from stays in `@atelic-action/ui`, and this package imports it rather than copying it: `GradeChip`, `gradeLabel`, `SignOff`, `Shot` (the owner's screen), `Paragraph`, `Runs`, `isEmpty`, `ArtifactAnchor` (the plain data paragraph of the note and the read), and `newTabProps` from `@atelic-action/ui/artifact`; `Callout`, `Checklist`, `ColumnChart`, `DataTable`, `Disclosure`, `StackedBar`, `StatRow`, `Tabs`, `ThresholdScale`, and their types from `@atelic-action/ui/components`; `Button` from `@atelic-action/ui/primitives`. The shell around a page (`ArtifactShell`), the head (`buildPageHead`), the contract (`ArtifactConfig`), the reader helpers, the error boundary, the access wall, the Vite configuration, and the commands are ui's too, and a site imports them from there.
 
 ## Install
 
@@ -48,7 +50,7 @@ What a document is built from stays in `@atelic-action/ui`, and this package imp
 bun add @atelic-action/artifact @atelic-action/ui
 ```
 
-Peer dependencies: `@atelic-action/ui` at `^3.9.1`, `react` at `^19.0.0`, and `lucide-react` at `^1.23.0`. The package ships TSX and CSS as source, compiled inside the site's own Vite like ui's; a site whose `vite.config.ts` is one `artifactConfig` call from `@atelic-action/ui/vite` needs nothing more, for the build, the prerender, and the dev server alike. The default labels a document sets live in the document: the read's `readLabels` and the sealed document's gate copy are overridden through props, and the monthly page's four questions are fixed on purpose, since they are its contract with the Statement of Work.
+Peer dependencies: `@atelic-action/ui` at `^3.10.0`, `react` at `^19.0.0`, and `lucide-react` at `^1.23.0`. The package ships TSX and CSS as source, compiled inside the site's own Vite like ui's; a site whose `vite.config.ts` is one `artifactConfig` call from `@atelic-action/ui/vite` needs nothing more, for the build, the prerender, and the dev server alike. The default labels a document sets live in the document: the read's `readLabels` and the sealed document's gate copy are overridden through props, and the monthly page's four questions are fixed on purpose, since they are its contract with the Statement of Work.
 
 ```tsx
 import { TheRead } from "@atelic-action/artifact";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/artifact",
-	"version": "5.1.2",
+	"version": "5.2.0",
 	"description": "The composed documents the Atelic practice hands or sends a business (the read, the monthly page, the note, the first call sheet, and the sealed document), built from the pieces in @atelic-action/ui",
 	"type": "module",
 	"license": "MIT",
@@ -37,12 +37,12 @@
 		"format": "biome format . --write"
 	},
 	"peerDependencies": {
-		"@atelic-action/ui": "^3.9.1",
+		"@atelic-action/ui": "^3.10.0",
 		"lucide-react": "^1.23.0",
 		"react": "^19.0.0"
 	},
 	"devDependencies": {
-		"@atelic-action/ui": "^3.9.1",
+		"@atelic-action/ui": "^3.10.0",
 		"@biomejs/biome": "^2.0.0",
 		"@playwright/test": "^1.60.0",
 		"@sentry/react": "^10.0.0",

package/src/documents/TheRead.tsx

@@ -11,7 +11,7 @@ import {
 	type WriteupGrade,
 	type WriteupPerson,
 } from "@atelic-action/ui/artifact";
-import { IconList, ReportCard, type Tone } from "@atelic-action/ui/components";
+import { IconList, ReportCard, Tabs, type Tone } from "@atelic-action/ui/components";
 import { ArrowUpRight, Check } from "lucide-react";
 import type { ReactNode } from "react";
 import { isRuns, type ReadTopic, Topic } from "./Topic";
@@ -42,6 +42,16 @@ import { isRuns, type ReadTopic, Topic } from "./Topic";
  * routine can write a read as JSON. `print` is the printed copy's own: the
  * sender and recipient lockup where the header was, and the pointer to the
  * hosted twin with its QR under the sign off.
+ *
+ * A read may carry a plan document beside it. Then the head stays on top,
+ * a row of two tabs follows, The Plan first and The Read second, and the
+ * sign off stays at the foot under both. The plan tab holds the plan as a
+ * document of its own: a lede, then sections, each a heading, an optional
+ * timeline line, and paragraphs, lists, and tables, with parts under it. The
+ * read tab holds everything that sat between the head and the foot before.
+ * On paper there are no tabs: the plan prints first, then the read on a new
+ * page, each under its tab's name. Without a plan document the page is the
+ * one it always was.
  */
 
 /** Whether anything on the page came from the owner's own consoles. */
@@ -137,7 +147,11 @@ export interface ReadStep {
 	cards?: ReadLink[];
 }
 
-/** The plan: the steps in order, numbered, between the gist and the cards, so the whole program reads before any one card's detail. */
+/**
+ * The plan: the steps in order, numbered, between the gist and the cards, so the whole program reads before any one card's detail.
+ *
+ * Superseded by the plan tab (`planDocument`), and to be removed at the next major.
+ */
 export interface ReadPlan {
 	/** The anchor a header stop points at, e.g. "plan". */
 	id?: string;
@@ -148,6 +162,51 @@ export interface ReadPlan {
 	steps: ReadStep[];
 }
 
+/**
+ * One block of the plan document's running text: a paragraph, a bulleted or
+ * numbered list, or a table with an optional head row. Every piece of text is
+ * a paragraph, so a link into the read is a run with an anchor, e.g.
+ * `{ text: "the map", href: "#local-seo" }`. A block with nothing in it is
+ * left out.
+ */
+export type PlanBlock =
+	| { kind: "paragraph"; text: ReadParagraph }
+	| { kind: "bullets"; items: ReadParagraph[] }
+	| { kind: "numbered"; items: ReadParagraph[] }
+	| { kind: "table"; head?: string[]; rows: ReadParagraph[][] };
+
+/** A part of a plan section: a smaller heading under the section's, with its own body. */
+export interface PlanPart {
+	/** The anchor a header stop or a link points at, e.g. "month-one". */
+	id: string;
+	heading: string;
+	/** A short line under the heading saying when and whose, e.g. "2026-11, on me". */
+	timeline?: string;
+	blocks: PlanBlock[];
+}
+
+/** A section of the plan document: a heading, an optional timeline line, its blocks, then its parts. */
+export interface PlanSection extends PlanPart {
+	parts?: PlanPart[];
+}
+
+/** The plan as a document of its own, set in the plan tab ahead of the read. */
+export interface PlanDocument {
+	/** The tab's id, so `#plan` opens it; `thePlanTabId` when left out. Never the read tab's id. */
+	id?: string;
+	/** The tab's name; the `planTab` label when left out. */
+	title?: string;
+	/** A paragraph over the sections. */
+	lede?: ReadParagraph;
+	sections: PlanSection[];
+}
+
+/** The read tab's id, so a route holding the selected tab can tell the two apart. */
+export const theReadTabId = "read";
+
+/** The plan tab's id when the plan document names none. */
+export const thePlanTabId = "plan";
+
 /** The close: one line, then the sign off. */
 export interface ReadClose {
 	/** One sentence, e.g. what follows and when. */
@@ -194,9 +253,15 @@ export interface ReadLabels {
 	plan: string;
 	/** The note over the scorecard on a public read that sets none: what the read leaves out. */
 	publicNote: string;
+	/** The plan tab's name when the plan document names none. */
+	planTab?: string;
+	/** The read tab's name. */
+	readTab?: string;
+	/** What a screen reader calls the row of tabs. */
+	tabsLabel?: string;
 }
 
-export const readLabels: ReadLabels = {
+export const readLabels: Required<ReadLabels> = {
 	preparedFor: "Prepared for",
 	gist: "The Gist",
 	grade: "Grade",
@@ -211,6 +276,9 @@ export const readLabels: ReadLabels = {
 	plan: "The Plan",
 	publicNote:
 		"This page is read from the outside, through what anyone can open. A customer's read adds what the owner's own consoles show.",
+	planTab: "The Plan",
+	readTab: "The Read",
+	tabsLabel: "The plan and the read",
 };
 
 export interface TheReadProps {
@@ -235,7 +303,14 @@ export interface TheReadProps {
 	gradeKey?: Array<{ grade: WriteupGrade; label: string }>;
 	/** The tiers in order. Each section appears on the scorecard and in the body. */
 	tiers: ReadTier[];
+	/** The numbered steps between the scorecard and the cards. Superseded by `planDocument`, and to be removed at the next major. */
 	plan: ReadPlan;
+	/** The plan as a document of its own: set, the page becomes two tabs, The Plan first and The Read second. */
+	planDocument?: PlanDocument;
+	/** Held by the caller: the open tab's id. Pass `onSelectTab` with it; the plan tab opens first when left out. */
+	selectedTab?: string;
+	/** Called with a tab's id whenever the reader, a link, or a hash opens it, e.g. to swap the header's stops. */
+	onSelectTab?: (id: string) => void;
 	close: ReadClose;
 	labels?: Partial<ReadLabels>;
 	/** The printed copy's lockup and twin; the page prints without them when left out. */
@@ -512,6 +587,111 @@ function Plan({ plan, labels }: { plan: ReadPlan; labels: ReadLabels }) {
 	);
 }
 
+/** The plan document's blocks in order, each left out when it has nothing in it. */
+function PlanBlocks({ blocks }: { blocks: PlanBlock[] | undefined }) {
+	return (
+		<>
+			{(blocks ?? []).map((block, i) => (
+				// biome-ignore lint/suspicious/noArrayIndexKey: blocks are static content in a fixed order
+				<PlanBlockView block={block} key={i} />
+			))}
+		</>
+	);
+}
+
+function PlanBlockView({ block }: { block: PlanBlock | undefined | null }) {
+	if (!block) return null;
+	if (block.kind === "paragraph") {
+		return filled(block.text) ? <Paragraph paragraph={block.text} /> : null;
+	}
+	if (block.kind === "bullets" || block.kind === "numbered") {
+		const items = (block.items ?? []).filter(filled);
+		if (items.length === 0) return null;
+		const List = block.kind === "bullets" ? "ul" : "ol";
+		return (
+			<List className="rd-plan-list">
+				{items.map((item, i) => (
+					// biome-ignore lint/suspicious/noArrayIndexKey: items are static content in a fixed order
+					<li key={i}>
+						<Runs paragraph={item} />
+					</li>
+				))}
+			</List>
+		);
+	}
+	if (block.kind === "table") {
+		const rows = (block.rows ?? []).filter((row) => (row ?? []).some(filled));
+		if (rows.length === 0) return null;
+		const head = (block.head ?? []).some((cell) => cell?.trim()) ? (block.head ?? []) : undefined;
+		const columns = Math.max(head?.length ?? 0, ...rows.map((row) => row.length));
+		return (
+			<table className="rd-plan-table">
+				{head && (
+					<thead>
+						<tr>
+							{Array.from({ length: columns }, (_, i) => (
+								// biome-ignore lint/suspicious/noArrayIndexKey: columns are static content in a fixed order
+								<th scope="col" key={i}>
+									{head[i] ?? ""}
+								</th>
+							))}
+						</tr>
+					</thead>
+				)}
+				<tbody>
+					{rows.map((row, r) => (
+						// biome-ignore lint/suspicious/noArrayIndexKey: rows are static content in a fixed order
+						<tr key={r}>
+							{Array.from({ length: columns }, (_, i) => {
+								const cell = row[i];
+								const label = head?.[i]?.trim();
+								return (
+									// biome-ignore lint/suspicious/noArrayIndexKey: cells are static content in a fixed order
+									<td key={i} data-label={label || undefined}>
+										{filled(cell) && <Runs paragraph={cell} />}
+									</td>
+								);
+							})}
+						</tr>
+					))}
+				</tbody>
+			</table>
+		);
+	}
+	return null;
+}
+
+/** A section's or a part's body under its heading: the timeline line, then the blocks. */
+function PlanBody({ part }: { part: PlanPart }) {
+	return (
+		<>
+			{part.timeline?.trim() && <p className="rd-plan-timeline">{part.timeline}</p>}
+			<PlanBlocks blocks={part.blocks} />
+		</>
+	);
+}
+
+/** The plan tab's panel: the lede, then each section under its heading, its parts under theirs. */
+function PlanDocumentView({ doc }: { doc: PlanDocument }) {
+	return (
+		<div className="rd-plan-doc">
+			{filled(doc.lede) && <Paragraph paragraph={doc.lede} className="rd-plan-doc-lede" />}
+			{(doc.sections ?? []).filter(Boolean).map((section) => (
+				<section className="rd-plan-section" id={section.id} key={section.id}>
+					<h2>{section.heading}</h2>
+					<PlanBody part={section} />
+					{(section.parts ?? []).filter(Boolean).map((part) => (
+						<section className="rd-plan-part" id={part.id} key={part.id}>
+							<h3>{part.heading}</h3>
+							<PlanBody part={part} />
+						</section>
+					))}
+				</section>
+			))}
+		</div>
+	);
+}
+
 function Tier({ tier, labels }: { tier: ReadTier; labels: ReadLabels }) {
 	const rented =
 		tier.rented && (isRuns(tier.rented.text) ? filled(tier.rented.text) : tier.rented.text != null)
@@ -554,6 +734,9 @@ export function TheRead({
 	gradeKey,
 	tiers,
 	plan,
+	planDocument,
+	selectedTab,
+	onSelectTab,
 	close,
 	labels: overrides,
 	print,
@@ -562,6 +745,29 @@ export function TheRead({
 	const shownTiers = tiers.filter((tier) => tier.sections.length > 0);
 	const shownNote = filled(note) ? note : access === "public" ? labels.publicNote : undefined;
 	const signOff = Boolean(close.signOff && close.person);
+	const planTab = planDocument?.id?.trim() || thePlanTabId;
+	// Everything between the head and the foot: the whole page without a plan
+	// document, the read tab's panel with one.
+	const body = (
+		<>
+			{shownTiers.length > 0 && (
+				<Gist
+					tiers={shownTiers}
+					id={gistId}
+					title={gistTitle}
+					lead={gistLead}
+					note={shownNote}
+					gradeKey={gradeKey}
+					labels={labels}
+				/>
+			)}
+			{plan.steps.length > 0 && <Plan plan={plan} labels={labels} />}
+			{shownTiers.map((tier) => (
+				<Tier tier={tier} labels={labels} key={tier.title} />
+			))}
+			{filled(close.line) && <Paragraph paragraph={close.line} className="rd-closing" />}
+		</>
+	);
 	return (
 		<div className="op rd" data-access={access}>
 			<article className="op-doc rd-doc">
@@ -596,22 +802,26 @@ export function TheRead({
 					<h1>{title}</h1>
 					{filled(lede) && <Paragraph paragraph={lede} className="op-intro rd-lede" />}
 				</header>
-				{shownTiers.length > 0 && (
-					<Gist
-						tiers={shownTiers}
-						id={gistId}
-						title={gistTitle}
-						lead={gistLead}
-						note={shownNote}
-						gradeKey={gradeKey}
-						labels={labels}
+				{planDocument ? (
+					<Tabs
+						className="rd-tabs"
+						ariaLabel={labels.tabsLabel ?? readLabels.tabsLabel}
+						headingLevel={2}
+						defaultId={planTab}
+						selectedId={selectedTab}
+						onSelect={onSelectTab}
+						tabs={[
+							{
+								id: planTab,
+								label: planDocument.title?.trim() || (labels.planTab ?? readLabels.planTab),
+								content: <PlanDocumentView doc={planDocument} />,
+							},
+							{ id: theReadTabId, label: labels.readTab ?? readLabels.readTab, content: body },
+						]}
 					/>
+				) : (
+					body
 				)}
-				{plan.steps.length > 0 && <Plan plan={plan} labels={labels} />}
-				{shownTiers.map((tier) => (
-					<Tier tier={tier} labels={labels} key={tier.title} />
-				))}
-				{filled(close.line) && <Paragraph paragraph={close.line} className="rd-closing" />}
 				{(signOff || print?.twin) && (
 					<footer className="op-close rd-close">
 						{signOff && close.signOff && close.person && (

package/src/documents/documents.css

@@ -935,7 +935,8 @@
 		margin: 34px 0 10px;
 		scroll-margin-top: calc(var(--nav-height) + 16px);
 	}
-	.atelic-ui .op-part h2 {
+	.atelic-ui .op-part h2,
+	.atelic-ui .rd-plan-section > h2 {
 		font-size: 27px;
 		font-weight: 650;
 		letter-spacing: -0.025em;
@@ -1494,7 +1495,8 @@
 		.atelic-ui .op-part {
 			margin: 40px 0 12px;
 		}
-		.atelic-ui .op-part h2 {
+		.atelic-ui .op-part h2,
+		.atelic-ui .rd-plan-section > h2 {
 			font-size: 30px;
 		}
 		.atelic-ui .op-part p {
@@ -2100,6 +2102,7 @@
 	.atelic-ui .rd-doc .op-why a,
 	.atelic-ui .rd-beat a,
 	.atelic-ui .rd-plan a,
+	.atelic-ui .rd-plan-doc a,
 	.atelic-ui .rd-closing a {
 		color: var(--op-accent);
 		text-decoration: underline;
@@ -2154,13 +2157,15 @@
 
 	/* Today and after: what a thing is, and what it becomes. Two columns
 	   wide; on a phone each row stacks, each half wearing its label. */
-	.atelic-ui .rd-changes-table {
+	.atelic-ui .rd-changes-table,
+	.atelic-ui .rd-plan-table {
 		width: 100%;
 		border-collapse: collapse;
 		font-size: 15px;
 		line-height: 1.45;
 	}
-	.atelic-ui .rd-changes-table thead {
+	.atelic-ui .rd-changes-table thead,
+	.atelic-ui .rd-plan-table thead {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -2171,28 +2176,38 @@
 	.atelic-ui .rd-changes-table,
 	.atelic-ui .rd-changes-table tbody,
 	.atelic-ui .rd-changes-table tr,
-	.atelic-ui .rd-changes-table td {
+	.atelic-ui .rd-changes-table td,
+	.atelic-ui .rd-plan-table,
+	.atelic-ui .rd-plan-table tbody,
+	.atelic-ui .rd-plan-table tr,
+	.atelic-ui .rd-plan-table td {
 		display: block;
 	}
-	.atelic-ui .rd-changes-table tbody tr {
+	.atelic-ui .rd-changes-table tbody tr,
+	.atelic-ui .rd-plan-table tbody tr {
 		padding: 10px 0;
 		border-bottom: 1px solid var(--neutral-100);
 	}
-	.atelic-ui .rd-changes-table tbody tr:first-child {
+	.atelic-ui .rd-changes-table tbody tr:first-child,
+	.atelic-ui .rd-plan-table tbody tr:first-child {
 		border-top: 1.5px solid var(--op-ink);
 	}
-	.atelic-ui .rd-changes-table tbody tr:last-child {
+	.atelic-ui .rd-changes-table tbody tr:last-child,
+	.atelic-ui .rd-plan-table tbody tr:last-child {
 		border-bottom: 0;
 		padding-bottom: 0;
 	}
-	.atelic-ui .rd-changes-table td {
+	.atelic-ui .rd-changes-table td,
+	.atelic-ui .rd-plan-table td {
 		text-align: left;
 		text-wrap: pretty;
 	}
-	.atelic-ui .rd-changes-table td + td {
+	.atelic-ui .rd-changes-table td + td,
+	.atelic-ui .rd-plan-table td + td {
 		margin-top: 6px;
 	}
-	.atelic-ui .rd-changes-table td::before {
+	.atelic-ui .rd-changes-table td::before,
+	.atelic-ui .rd-plan-table td[data-label]::before {
 		content: attr(data-label);
 		display: block;
 		margin-bottom: 1px;
@@ -2339,6 +2354,78 @@
 		color: var(--op-ink-soft);
 	}
 
+	/* ---- the plan tab: the row of tabs under the head, and the plan as a
+	   document, its sections set as the tiers are and its tables the today
+	   and after table's ---- */
+	.atelic-ui .rd-tabs {
+		margin-top: 28px;
+	}
+	.atelic-ui .rd-plan-doc-lede {
+		margin: 0;
+		max-width: 68ch;
+		font-size: 16.5px;
+		line-height: 1.5;
+		color: var(--op-ink-soft);
+		text-wrap: pretty;
+	}
+	.atelic-ui .rd-plan-section {
+		margin-top: 34px;
+		scroll-margin-top: calc(var(--nav-height) + 16px);
+	}
+	.atelic-ui .rd-plan-doc > .rd-plan-section:first-child {
+		margin-top: 0;
+	}
+	.atelic-ui .rd-plan-part {
+		margin-top: 24px;
+		scroll-margin-top: calc(var(--nav-height) + 16px);
+	}
+	.atelic-ui .rd-plan-part > h3 {
+		margin: 0;
+		font-size: 20px;
+		font-weight: 650;
+		letter-spacing: -0.015em;
+		line-height: 1.2;
+		color: var(--op-ink);
+	}
+	.atelic-ui .rd-plan-timeline {
+		margin: 6px 0 0;
+		font-family: var(--font-mono);
+		font-size: 12.5px;
+		letter-spacing: 0.04em;
+		color: var(--op-ink-faint);
+	}
+	.atelic-ui .rd-plan-section > p:not(.rd-plan-timeline),
+	.atelic-ui .rd-plan-part > p:not(.rd-plan-timeline) {
+		margin: 12px 0 0;
+		max-width: 68ch;
+		color: var(--op-ink);
+		text-wrap: pretty;
+	}
+	.atelic-ui .rd-plan-list {
+		margin: 12px 0 0;
+		padding-left: 1.4em;
+		max-width: 68ch;
+		color: var(--op-ink);
+	}
+	.atelic-ui ul.rd-plan-list {
+		list-style: disc;
+	}
+	.atelic-ui ol.rd-plan-list {
+		list-style: decimal;
+	}
+	.atelic-ui .rd-plan-list li + li {
+		margin-top: 6px;
+	}
+	.atelic-ui .rd-plan-list li::marker {
+		color: var(--op-accent);
+	}
+	.atelic-ui .rd-plan-table {
+		margin-top: 14px;
+	}
+	.atelic-ui .rd-plan-table td {
+		color: var(--op-ink);
+	}
+
 	/* ---- the close: one line, then the sign off under its rule ---- */
 	.atelic-ui .rd-closing {
 		margin: 34px 0 0;
@@ -2354,7 +2441,11 @@
 			display: table;
 			table-layout: fixed;
 		}
-		.atelic-ui .rd-changes-table thead {
+		.atelic-ui .rd-plan-table {
+			display: table;
+		}
+		.atelic-ui .rd-changes-table thead,
+		.atelic-ui .rd-plan-table thead {
 			display: table-header-group;
 			position: static;
 			width: auto;
@@ -2362,17 +2453,22 @@
 			overflow: visible;
 			clip: auto;
 		}
-		.atelic-ui .rd-changes-table tbody {
+		.atelic-ui .rd-changes-table tbody,
+		.atelic-ui .rd-plan-table tbody {
 			display: table-row-group;
 		}
 		.atelic-ui .rd-changes-table tr,
-		.atelic-ui .rd-changes-table tbody tr {
+		.atelic-ui .rd-changes-table tbody tr,
+		.atelic-ui .rd-plan-table tr,
+		.atelic-ui .rd-plan-table tbody tr {
 			display: table-row;
 			padding: 0;
 			border: 0;
 		}
 		.atelic-ui .rd-changes-table th,
-		.atelic-ui .rd-changes-table td {
+		.atelic-ui .rd-changes-table td,
+		.atelic-ui .rd-plan-table th,
+		.atelic-ui .rd-plan-table td {
 			display: table-cell;
 			width: 50%;
 			padding: 9px 18px 9px 0;
@@ -2380,20 +2476,34 @@
 			text-align: left;
 			vertical-align: top;
 		}
+		/* Today and after splits in half; the plan's columns take what they need. */
+		.atelic-ui .rd-plan-table th,
+		.atelic-ui .rd-plan-table td {
+			width: auto;
+		}
 		.atelic-ui .rd-changes-table th + th,
-		.atelic-ui .rd-changes-table td + td {
+		.atelic-ui .rd-changes-table td + td,
+		.atelic-ui .rd-plan-table th + th,
+		.atelic-ui .rd-plan-table td + td {
 			margin-top: 0;
 			padding-left: 18px;
 			padding-right: 0;
 			border-left: 1px solid var(--neutral-100);
 		}
-		.atelic-ui .rd-changes-table td::before {
+		.atelic-ui .rd-changes-table td::before,
+		.atelic-ui .rd-plan-table td[data-label]::before {
 			content: none;
 		}
-		.atelic-ui .rd-changes-table tbody tr:first-child {
+		.atelic-ui .rd-changes-table tbody tr:first-child,
+		.atelic-ui .rd-plan-table tbody tr:first-child {
 			border-top: 0;
 		}
-		.atelic-ui .rd-changes-table thead th {
+		/* A plan table with no head row keeps its rule over the first row. */
+		.atelic-ui .rd-plan-table:not(:has(thead)) tbody tr:first-child td {
+			border-top: 1.5px solid var(--op-ink);
+		}
+		.atelic-ui .rd-changes-table thead th,
+		.atelic-ui .rd-plan-table thead th {
 			padding-top: 0;
 			padding-bottom: 8px;
 			border-bottom: 1.5px solid var(--op-ink);
@@ -2407,7 +2517,8 @@
 		.atelic-ui .rd-changes-table thead th.rd-after {
 			color: var(--op-accent);
 		}
-		.atelic-ui .rd-changes-table tbody tr:last-child td {
+		.atelic-ui .rd-changes-table tbody tr:last-child td,
+		.atelic-ui .rd-plan-table tbody tr:last-child td {
 			border-bottom: 0;
 		}
 	}
@@ -2420,6 +2531,8 @@
 			border-color: var(--neutral-200);
 		}
 		.atelic-ui .rd-changes-table tr,
+		.atelic-ui .rd-plan-table tr,
+		.atelic-ui .rd-plan-list li,
 		.atelic-ui .rd-checks li,
 		.atelic-ui .rd-closing,
 		.atelic-ui .rd-note,
@@ -2428,9 +2541,27 @@
 			break-inside: avoid;
 		}
 		.atelic-ui .rd-beat h4,
-		.atelic-ui .rd-plan h2 {
+		.atelic-ui .rd-plan h2,
+		.atelic-ui .rd-plan-section h2,
+		.atelic-ui .rd-plan-part h3,
+		.atelic-ui .rd-plan-timeline,
+		.atelic-ui .rd-tabs .tabs-print-heading {
 			break-after: avoid;
 		}
+		/* The plan prints first and the read starts a page of its own, each
+		   under its tab's name, set as a tier's heading is. */
+		.atelic-ui .rd-tabs > .tabs-panel + .tabs-panel {
+			break-before: page;
+			margin-top: 0;
+		}
+		.atelic-ui .rd-tabs .tabs-print-heading {
+			margin: 0 0 18px;
+			font-size: 30px;
+			font-weight: 650;
+			letter-spacing: -0.025em;
+			line-height: 1.1;
+			color: var(--op-ink);
+		}
 	}
 
 	/* ---- the first call sheet (FirstCall): the read's topic and findings