@atelic-action/artifact 5.1.0 → 5.1.2

package/README.md

@@ -26,7 +26,7 @@ Every export of the package, all from the one entry, `@atelic-action/artifact`.
 | `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 |
 | `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 | none |
+| `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 |
 | `WriteupGrade`, `WriteupPerson`, `WriteupShot` | The grade letter, the sign off person, and the owner's screen, shared by every document, all three re exported from ui under ui's names | none |
 | `Report`, `ReportProps` | The monthly page: the four questions, the seven grades now and before, the sign off, on one letter sheet | `/report` |
 | `ReportLead`, `ReportLeads`, `ReportGradeRow` | The shapes a monthly page's content is written in | none |
@@ -48,7 +48,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.4.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.
+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.
 
 ```tsx
 import { TheRead } from "@atelic-action/artifact";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/artifact",
-	"version": "5.1.0",
+	"version": "5.1.2",
 	"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.5.0",
+		"@atelic-action/ui": "^3.9.1",
 		"lucide-react": "^1.23.0",
 		"react": "^19.0.0"
 	},
 	"devDependencies": {
-		"@atelic-action/ui": "^3.5.0",
+		"@atelic-action/ui": "^3.9.1",
 		"@biomejs/biome": "^2.0.0",
 		"@playwright/test": "^1.60.0",
 		"@sentry/react": "^10.0.0",

package/src/documents/TheRead.tsx

@@ -454,8 +454,8 @@ function Markets({ markets }: { markets: ReadMarkets }) {
 											</>
 										) : (
 											<>
-												<span className="op-sr-only">{`${column}, not read`}</span>
-												<span className="op-dash" aria-hidden="true" />
+												<span className="data-table-empty" aria-hidden="true" />
+												<span className="data-table-empty-label">{`${column}, not read`}</span>
 											</>
 										)}
 									</td>

package/src/documents/Topic.tsx

@@ -82,7 +82,15 @@ export interface ReadSorted {
 	sort: number | string;
 }
 
-export type ReadCell = ReactNode | ReadMark | ReadSorted;
+/**
+ * A table cell: a node, a mark, or a sorted pair. `null` past the first
+ * column (which names the row, so is never empty) is an empty cell,
+ * passed to the shared table untouched: it draws the table's short gray rule,
+ * reads its column's `emptyLabel` to a screen reader, and sorts last either
+ * way. A typed dash is a string and stays content, since a dash can mean
+ * "unchanged".
+ */
+export type ReadCell = ReactNode | ReadMark | ReadSorted | null;
 
 function isMark(cell: ReadCell): cell is ReadMark {
 	return typeof cell === "object" && cell !== null && "mark" in cell;
@@ -112,6 +120,8 @@ export interface ReadTable extends BlockBase {
 		firstSort?: "asc" | "desc";
 		/** The column hugs its content, for a swatch or a mark. */
 		fit?: boolean;
+		/** What a screen reader hears for an empty cell in this column; defaults to "None". */
+		emptyLabel?: string;
 	}>;
 	rows: Array<{ cells: ReadCell[]; tone?: ReadTone }>;
 	/** The sort the table opens in. */
@@ -298,12 +308,15 @@ const toneIcon = {
 } as const;
 
 function Mark({ cell }: { cell: ReadMark }) {
+	// The none mark is ui's empty cell dash and nothing around it: the same
+	// markup DataTable draws for a null cell, so the two sit on one line. A
+	// flex wrapper would center the dash in the icon's box instead.
 	if (cell.mark === "none") {
 		return (
-			<span className="op-mark-cell" data-tone="muted">
-				<span className="op-dash" aria-hidden="true" />
-				<span className="op-sr-only">{cell.text}</span>
-			</span>
+			<>
+				<span className="data-table-empty" aria-hidden="true" />
+				<span className="data-table-empty-label">{cell.text}</span>
+			</>
 		);
 	}
 	const Icon = toneIcon[cell.mark];

package/src/documents/documents.css

@@ -1069,13 +1069,6 @@
 		color: var(--op-ink);
 		font-weight: 600;
 	}
-	.atelic-ui .op-dash {
-		display: inline-block;
-		width: 14px;
-		height: 1.5px;
-		vertical-align: 0.3em;
-		background: var(--neutral-300);
-	}
 
 	/* The blocks are the shared package's components. These are the read's
 	   sizes for them. */