@atelic-action/artifact 4.2.1 → 5.1.0

package/src/documents/documents.css

@@ -1,10 +1,11 @@
 /* The composed documents in this package: the sealed document stage (Gate),
-   the monthly page (Report), the writeup (Writeup), the note (Note), the
-   read (Read), and the first call sheet (FirstCall). Moved from @atelic-action/ui's styles/artifact.css with the
-   documents (ATE-671), in the order that sheet bundled them, which the two
-   @page rules depend on: the later one wins, and the writeup's is the later
-   one. The note, the read, and the first call sheet follow the writeup and
-   set no @page, so the writeup's stays the one that wins.
+   the monthly page (Report), the read (TheRead, with its section card in
+   Topic), the note (Note), and the first call sheet (FirstCall). Moved from
+   @atelic-action/ui's styles/artifact.css with the documents (ATE-671), in
+   the order that sheet bundled them, which the two @page rules depend on:
+   the later one wins, and the read's is the later one. The note and the
+   first call sheet follow the read and set no @page, so the read's stays
+   the one that wins.
 
    The pieces the documents share stay in @atelic-action/ui: the grade chip
    (.op-grade), the sign off (.op-who, .op-sign), the shot (.op-shot), the
@@ -456,7 +457,7 @@
 	.atelic-ui .gate-sign {
 		margin: 44px 0 18px;
 		/* The pitch surface sign off is the script face (voice.md rule 9),
-		   the same face the writeup and the monthly page close on, centered
+		   the same face the read and the monthly page close on, centered
 		   on the dark stage. */
 		font-family: var(--font-script);
 		font-size: clamp(38px, 5.5vw, 56px);
@@ -513,7 +514,7 @@
 
 	/* =================================================================
 	   THE MONTHLY PAGE: one letter sheet and its hosted twin. Three
-	   renderings of one DOM, the same as the writeup's:
+	   renderings of one DOM, the same as the read's:
 
 	   - Screen (wide): the sheet at letter width on the surface, under the
 	     artifact shell's dark header.
@@ -817,8 +818,10 @@
 	}
 
 	/* =================================================================
-	   THE WRITEUP: a web page first, and the printed copy from the same
-	   page.
+	   THE READ, the card and the column (.op): a web page first, and the
+	   printed copy from the same page. The .op rules are the document's
+	   frame, shared with every section card (Topic.tsx); the read's own
+	   beats (.rd) follow at the foot of this sheet.
 
 	   - Phone first: the base rules are the phone's. Each section is a card
 	     of small blocks in one column; a table's rows stack, each fact
@@ -1074,7 +1077,7 @@
 		background: var(--neutral-300);
 	}
 
-	/* The blocks are the shared package's components. These are the writeup's
+	/* The blocks are the shared package's components. These are the read's
 	   sizes for them. */
 	.atelic-ui .op-checks .checklist,
 	.atelic-ui .op-scale .threshold-scale {
@@ -1085,7 +1088,7 @@
 		font-size: 13px;
 	}
 
-	/* the table: its layout is the shared DataTable's; these are the writeup's
+	/* the table: its layout is the shared DataTable's; these are the read's
 	   own sizes and the two line row names. */
 	.atelic-ui .op-table .data-table {
 		font-size: 15px;
@@ -1115,6 +1118,58 @@
 	.atelic-ui .op-table td:has(.op-wrap) {
 		white-space: normal;
 	}
+	/* the phone test: a small grade chip before each run's score, at the
+	   column's left edge on a wide screen */
+	.atelic-ui .op-speed .op-grade {
+		display: inline-grid;
+		place-items: center;
+		width: 22px;
+		height: 22px;
+		margin: 0 8px 0 0;
+		padding: 0;
+		font-size: 12px;
+	}
+	.atelic-ui .op-speed-score {
+		display: inline-flex;
+		align-items: center;
+		font-variant-numeric: tabular-nums;
+	}
+	.atelic-ui .op-speed tbody th {
+		white-space: nowrap;
+		font-weight: 600;
+	}
+	@media print, (min-width: 721px) {
+		.atelic-ui .op-speed-score {
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+		}
+	}
+	/* the why over the table: one small line, the title run into the body */
+	.atelic-ui .op-speed-why {
+		margin-top: 12px;
+		font-size: 13px;
+		line-height: 1.45;
+		color: var(--op-ink-soft);
+	}
+	.atelic-ui .op-speed-why .callout-icon {
+		width: 14px;
+		height: 14px;
+		margin-top: 2px;
+	}
+	.atelic-ui .op-speed-why .callout-title,
+	.atelic-ui .op-speed-why .callout-body {
+		display: inline;
+		font-size: inherit;
+		line-height: inherit;
+	}
+	.atelic-ui .op-speed-why .callout-title {
+		font-weight: 600;
+		color: var(--op-ink);
+	}
+	.atelic-ui .op-speed-why .callout-title::after {
+		content: " ";
+	}
 	.atelic-ui .op-mark-cell {
 		display: inline-flex;
 		align-items: center;
@@ -1138,7 +1193,7 @@
 		fill: currentColor;
 	}
 
-	/* a few big numbers: the shared StatRow, at the writeup's sizes */
+	/* a few big numbers: the shared StatRow, at the read's sizes */
 	.atelic-ui .op-stats .stat-row {
 		gap: 18px 28px;
 	}
@@ -1183,7 +1238,7 @@
 		object-position: center;
 	}
 
-	/* the native disclosure: the shared one, at the writeup's sizes */
+	/* the native disclosure: the shared one, at the read's sizes */
 	.atelic-ui .op-block.disclosure.is-native {
 		border-top: 1px solid var(--op-rule);
 	}
@@ -1676,7 +1731,7 @@
 
 	/* =================================================================
 	   THE NOTE: the first touch set as a page (Note.tsx). A letter, not a
-	   report, read on a phone first. Its column is the writeup's 920px,
+	   report, read on a phone first. Its column is the read's 920px,
 	   centered under the header with the header's own gutters, and every
 	   line of text runs the column's full width.
 
@@ -1691,15 +1746,15 @@
 	   - Print: one letter sheet. The chrome steps aside (ui's artifact.css
 	     hides the header and the credit band on any artifact page), the
 	     type comes down, and the screens shrink. The note sets
-	     no @page of its own: the writeup's, the later one in this sheet,
+	     no @page of its own: the read's, the later one in this sheet,
 	     sets letter paper for every artifact page.
 
 	   Tokens only. The finding is the shared Callout (@atelic-action/ui's components.css),
 	   the screen the shared .op-shot, the sign off the shared .op-who;
 	   this sheet sets the letter around them and their sizes here.
 	   ================================================================= */
-	/* The shared .op-shot reads the writeup's own two tokens, mapped here as
-	   the writeup's .op root maps them. */
+	/* The shared .op-shot reads the read's own two tokens, mapped here as
+	   the read's .op root maps them. */
 	.atelic-ui .nt {
 		--op-card: var(--card);
 		--op-ink-faint: var(--neutral-500);
@@ -1707,7 +1762,7 @@
 		color: var(--ink);
 		background: var(--surface);
 	}
-	/* The writeup's column (.op-doc, 920px), centered under the header and
+	/* The read's column (.op-doc, 920px), centered under the header and
 	   held off the edges by the header's gutters (chrome.css, .nav-inner). */
 	.atelic-ui .nt-doc {
 		max-width: calc(920px + 2 * var(--gutter));
@@ -1909,7 +1964,7 @@
 		font-size: 24px;
 		margin-bottom: 8px;
 	}
-	/* The sign off's own links read as the writeup's do: quiet, in the text color. */
+	/* The sign off's own links read as the read's do: quiet, in the text color. */
 	.atelic-ui .nt-close .op-who a {
 		color: inherit;
 		text-decoration: none;
@@ -1953,7 +2008,7 @@
 
 	/* ---- print: one letter sheet ----
 	   The rows hold on paper, since they are shorter than the stacked page.
-	   The sheet is the page at the writeup's three quarters, the thumbnails
+	   The sheet is the page at the read's three quarters, the thumbnails
 	   are held short with room for their captions, and the badge drops. */
 	@media print {
 		html:has(.atelic-ui .nt-doc) {
@@ -2031,24 +2086,22 @@
 	}
 
 	/* =================================================================
-	   THE READ: the baseline's grades explained by cause (Read.tsx). The
-	   writeup's sibling: it sits inside the writeup's own .op root, so the
-	   column, the head, the grade chip and its key, the tier heading, the
-	   section card, the screen, the close, and every print rule of the
-	   writeup's are its own already. This block adds only what the read has
-	   and the writeup does not: the scorecard and the note over it, the
-	   two beats a section adds to the writeup's card (today and after, and
-	   what we recommend), and the numbered plan. It sets no @page; the writeup's, earlier in this sheet and the
-	   later of the two there, sets letter paper for every artifact page.
+	   THE READ, its own beats (.rd): what TheRead.tsx adds around the .op
+	   frame above, whose column, head, grade chip and key, tier heading,
+	   section card, screen, close, and print rules it already wears: the
+	   scorecard and the note over it, the two beats a section adds to the
+	   card (today and after, and what we recommend), and the numbered plan.
+	   It sets no @page; the frame's, earlier in this sheet and the later of
+	   the two there, sets letter paper for every artifact page.
 
 	   Tokens only (theme.css).
 	   ================================================================= */
 
-	/* The lede runs the full width of the page; the writeup's intro is the one that is capped. */
+	/* The lede runs the full width of the page; the frame's .op-intro is the one that is capped. */
 	.atelic-ui .rd-lede {
 		max-width: none;
 	}
-	/* Prose links read as links here, where the writeup's are quiet. */
+	/* Prose links read as links here, where the frame's are quiet. */
 	.atelic-ui .rd-lede a,
 	.atelic-ui .rd-note a,
 	.atelic-ui .rd-doc .op-why a,
@@ -2366,7 +2419,7 @@
 		}
 	}
 
-	/* ---- print: the writeup's rules carry the page; these hold the read's
+	/* ---- print: the frame's rules carry the page; these hold the read's
 	   own blocks whole ---- */
 	@media print {
 		.atelic-ui .rd-steps {
@@ -2387,7 +2440,7 @@
 		}
 	}
 
-	/* ---- the first call sheet (FirstCall): the writeup's topic and findings
+	/* ---- the first call sheet (FirstCall): the read's topic and findings
 	   blocks and the read's steps carry it; these are the few rules it adds
 	   (the Claude Design cut of 2026-10-23) ---- */
 	.atelic-ui .fc-units {

package/src/documents/index.ts

@@ -4,9 +4,35 @@
  * chip, the sign off, the page components, the button), which this package
  * depends on and never copies, and wears the styles in ./documents.css.
  */
+export type { WriteupGrade, WriteupPerson, WriteupShot } from "@atelic-action/ui/artifact";
 export * from "./FirstCall";
 export { Gate, type GatePayload, type GatePerson, type GateProps, normalizeEmail } from "./Gate";
 export * from "./Note";
-export * from "./Read";
 export * from "./Report";
-export * from "./Writeup";
+export * from "./TheRead";
+export {
+	type ReadBar,
+	type ReadBlock,
+	type ReadBullet,
+	type ReadCell,
+	type ReadChecks,
+	type ReadColumns,
+	type ReadFindings,
+	type ReadInnerBlock,
+	type ReadMark,
+	type ReadMore,
+	type ReadScale,
+	type ReadShots,
+	type ReadSorted,
+	type ReadSource,
+	type ReadSpeed,
+	type ReadSpeedLabels,
+	type ReadSpeedRun,
+	type ReadStats,
+	type ReadTable,
+	type ReadTone,
+	type ReadTopic,
+	ratingCell,
+	readSpeedLabels,
+	Topic,
+} from "./Topic";