@atelic-action/ui 3.3.0 → 3.4.0

package/README.md

@@ -23,6 +23,7 @@ Every export, grouped by the entry it is imported from. The gallery column links
 | `IconList` | `@atelic-action/ui/components` | A list whose bullets are icons, one for the list or one per item, each in a tone | [#icon-list](https://ui.atelic.me/#icon-list) |
 | `DataTable` | `@atelic-action/ui/components` | A table whose first column names each row, sortable, stacking on a phone | [#data-table](https://ui.atelic.me/#data-table) |
 | `ReportCard` | `@atelic-action/ui/components` | A name, a grade, and a line per row, in labeled groups, each row a link to its section | [#report-card](https://ui.atelic.me/#report-card) |
+| `reportCardLabels`, `ReportCardLabels` | `@atelic-action/ui/components` | The words a screen reader hears around a report card's letters by default, and their type | none |
 | `Rank` | `@atelic-action/ui/components` | A figure with its badge in a tone, for a table cell: a rank, a place in an answer, or a dash | [#rank](https://ui.atelic.me/#rank) |
 | `StatRow` | `@atelic-action/ui/components` | A row of large figures with periods, deltas, and trends | [#stat-row](https://ui.atelic.me/#stat-row) |
 | `Callout` | `@atelic-action/ui/components` | One finding: an icon in its tone, the title, the explainer | [#callout](https://ui.atelic.me/#callout) |
@@ -365,7 +366,7 @@ The pieces import no stylesheet of their own. A site imports `@atelic-action/ui/
 // vite.config.ts
 import { artifactConfig } from "@atelic-action/ui/vite";
 
-export default artifactConfig({ pages: ["/writeup", "/proposal", "/report"] });
+export default artifactConfig({ pages: ["/the-read", "/proposal", "/report"] });
 ```
 
 `artifactConfig` returns the TanStack Start plugin with prerendering on, the crawler following links but kept out of `/images/` (where a prerendered page would overwrite a real file), one prerendered page for `/`, for each path the site names, and for `/404`, and no sitemap; the React plugin; `privateChunks()`; the `@` alias to the site's `src`, resolved from the directory Vite is run in; and `ssr.noExternal: ["@atelic-action/ui", "@atelic-action/artifact"]`, so the documents compile too. Nothing links to an artifact page, so a page a site leaves out of `pages` ships with no HTML in it. `artifactPages` is the list alone.
@@ -374,7 +375,7 @@ A site with a real need of its own passes `extend`, which is merged over the res
 
 ```ts
 export default artifactConfig({
-	pages: ["/writeup"],
+	pages: ["/the-read"],
 	extend: { server: { port: 5180 } },
 });
 ```
@@ -397,7 +398,7 @@ The package installs the scripts every artifact site used to carry as files, so
 | `atelic-stamp-health` | Writes `dist/client/health.json` with the status, the commit, and the build time | Last step of `build` |
 | `atelic-check-links` | Asks for every external link in the prerendered pages and exits 1 when one is dead | `check:links`, after a build |
 | `atelic-check-wall <host> [path ...]` | Asks a deployed host for each document and held file with no cookie, and passes only when the wall answers every one and the sign in functions respond | `check:wall`, before any private link goes out |
-| `atelic-reader-link <email> [path] [--token <token>] [--qr \| --no-qr]` | Mints a named reader: prints the sealed line for `analytics.identify` and the link to send, and writes `public/images/qr.png` for a public writeup's first reader | `reader` |
+| `atelic-reader-link <email> [path] [--token <token>] [--qr \| --no-qr]` | Mints a named reader: prints the sealed line for `analytics.identify` and the link to send, and writes `public/images/qr.png` for a public read's first reader | `reader` |
 | `atelic-serve-static` | Serves `dist/client` on `127.0.0.1` the way Vercel does, on `PORT` or 4173 | The `webServer` command in `playwright.config.ts` |
 | `atelic-print-sheets <url or dist/client> <out.pdf> [sheets] [page] [port]` | Prints a page to PDF with headless Chrome, reports the sheet count, and fails when a count is given and missed | `print` |
 | `atelic-seal-document <config.json> [out.json]` | Seals a document into the payload that `@atelic-action/artifact`'s `Gate` reads, one wrapped key for each reader. The payload names no one: no address, and readers numbered `r1`, `r2` whatever the config calls them | `seal` |

package/bin/atelic-print-sheets.sh

@@ -1,21 +1,21 @@
 #!/usr/bin/env bash
 # Print an artifact page to PDF with headless Chrome and report its sheet
-# count. The writeup flows across as many letter pages as it needs, its
+# count. The read flows across as many letter pages as it needs, its
 # native disclosures printed open, so its count is a record of the print and not a
 # layout check. The monthly page is one sheet by construction, so pass 1 for
 # it and the script fails when it prints as anything else.
 #
 # Usage: atelic-print-sheets <url | dist/client> <out.pdf> [expected sheets] [page] [port]
-#   atelic-print-sheets dist/client public/writeup.pdf
+#   atelic-print-sheets dist/client public/the-read.pdf
 #   atelic-print-sheets dist/client ../2026-10-01-report.pdf 1 /report
-#   atelic-print-sheets https://summit.atelic.me/writeup ../2026-09-10-writeup.pdf
+#   atelic-print-sheets https://summit.atelic.me/the-read ../2026-09-10-the-read.pdf
 # A site offers the same as `bun run print <...>`. Both paths are read from
 # the directory the command is run in, which is the site's root.
 #
 # A directory is served on a local port for the print (the page loads its
 # fonts and images by absolute path) and the server is stopped after; the
-# page is the path printed from it, /writeup unless named. A URL is printed
-# as given. The writeup's PDF belongs in public/ as writeup.pdf beside the
+# page is the path printed from it, /the-read unless named. A URL is printed
+# as given. The read's PDF belongs in public/ as the-read.pdf beside the
 # page (on a private artifact the wall holds it like the page, see
 # ACCESS-GATE.md), and a dated copy goes in the client folder of the
 # practice repo.
@@ -24,7 +24,7 @@ set -euo pipefail
 TARGET=${1:?url or built directory required}
 OUT=${2:?output pdf path required}
 EXPECT=${3:-}
-PAGE=${4:-/writeup}
+PAGE=${4:-/the-read}
 PORT=${5:-8765}
 CHROME=${CHROME:-"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"}
 [[ -x "$CHROME" ]] || { echo "Chrome not found at $CHROME" >&2; exit 1; }

package/dist/artifact/readers.js

@@ -110,7 +110,7 @@ export async function whoIsReading(visit) {
     return openReader(visit.readers, token);
 }
 /** The link to send a reader: the artifact's page with their token on it. */
-export function readerLink(siteURL, token, path = "/writeup") {
+export function readerLink(siteURL, token, path = "/the-read") {
     const url = new URL(path, siteURL);
     url.searchParams.set("k", token);
     return url.toString();

package/dist/vite/artifact-config.d.ts

@@ -1,7 +1,7 @@
 import { type UserConfig } from "vite";
 export interface ArtifactConfigOptions {
     /**
-     * The path of each artifact page the site carries, such as "/writeup".
+     * The path of each artifact page the site carries, such as "/the-read".
      * The root and the 404 page are always prerendered and need no entry.
      */
     pages: readonly string[];

package/dist/vite/artifact-config.js

@@ -5,7 +5,7 @@
  *
  *   import { artifactConfig } from "@atelic-action/ui/vite";
  *
- *   export default artifactConfig({ pages: ["/writeup", "/proposal", "/report"] });
+ *   export default artifactConfig({ pages: ["/the-read", "/proposal", "/report"] });
  *
  * The site's own paths (the `@` alias to its src) are found from the
  * directory Vite is run in, which is the site's root.
@@ -19,7 +19,7 @@ import { privateChunks } from "./private-chunks.js";
 export function artifactPages(pages) {
     const named = pages.filter((path) => path !== "/" && path !== "/404");
     return [
-        // The root holds no document: it sends the reader to /writeup
+        // The root holds no document: it sends the reader to /the-read
         // (vercel.json does the same on the host), and its prerendered
         // index.html is what a static preview serves at the bare host.
         { path: "/", prerender: { enabled: true } },
@@ -44,10 +44,10 @@ export function artifactConfig({ pages, extend }) {
                 prerender: {
                     enabled: true,
                     crawlLinks: true,
-                    // The writeup links each screenshot crop to its full image, and
+                    // The read links each screenshot crop to its full image, and
                     // the crawler follows every href it finds: without this filter it
                     // prerenders /images/<shot>.png as an HTML page and writes that
-                    // over the real file in dist/client (found on a client's writeup,
+                    // over the real file in dist/client (found on a client's read,
                     // 2026-09-24).
                     filter: ({ path }) => !path.startsWith("/images/"),
                 },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/ui",
-	"version": "3.3.0",
+	"version": "3.4.0",
 	"description": "Shared UI for the Atelic templates: site chrome, base styles, the component library, the access gate, and the app shell they install",
 	"type": "module",
 	"license": "UNLICENSED",

package/src/artifact/readers.ts

@@ -139,7 +139,7 @@ export async function whoIsReading(visit: {
 }
 
 /** The link to send a reader: the artifact's page with their token on it. */
-export function readerLink(siteURL: string, token: string, path = "/writeup"): string {
+export function readerLink(siteURL: string, token: string, path = "/the-read"): string {
 	const url = new URL(path, siteURL);
 	url.searchParams.set("k", token);
 	return url.toString();

package/src/scripts/check-wall.ts

@@ -6,9 +6,9 @@
  * readable by anyone holding the link, and a 5xx is a host that is down
  * rather than walled; both fail.
  *
- * The documents are /writeup, plus /report and /proposal when this repo
+ * The documents are /the-read, plus /report and /proposal when this repo
  * carries those routes. The wall holds files too (needsSession in @atelic-action/ui/gate), so it
- * also asks for the printed copy at /writeup.pdf, the first real screenshot
+ * also asks for the printed copy at /the-read.pdf, the first real screenshot
  * under public/images/, and, when the repo has been built, the first chunk
  * under /assets/doc/, where a document's content compiles to. Each of those
  * must answer with the same redirect: the wall holds a path whether or not
@@ -30,7 +30,7 @@
  * Usage: atelic-check-wall <host> [path ...], or `bun run check:wall <host>`
  * in a site, from the site's root
  *   bun run check:wall summit.atelic.me
- *   bun run check:wall https://summit.atelic.me /writeup /report
+ *   bun run check:wall https://summit.atelic.me /the-read /report
  * The sign in functions are asked only when no path is named.
  * Exits 1 unless every path answers as it must.
  */
@@ -93,10 +93,10 @@ export interface WallTargets {
 
 /** The paths to ask for: the documents this repo carries, the held files, then the open mark. */
 export function wallProbes({ hasRoute, image, docChunk, brand }: WallTargets): Probe[] {
-	const probes: Probe[] = [{ path: "/writeup", kind: "document" }];
+	const probes: Probe[] = [{ path: "/the-read", kind: "document" }];
 	if (hasRoute("report")) probes.push({ path: "/report", kind: "document" });
 	if (hasRoute("proposal")) probes.push({ path: "/proposal", kind: "document" });
-	probes.push({ path: "/writeup.pdf", kind: "file" });
+	probes.push({ path: "/the-read.pdf", kind: "file" });
 	if (image) probes.push({ path: image, kind: "file" });
 	if (docChunk) probes.push({ path: docChunk, kind: "file" });
 	if (brand) probes.push({ path: brand, kind: "open" });

package/src/scripts/reader-link.ts

@@ -8,7 +8,7 @@
  * email encrypted under it. The token itself appears only in the link, so
  * keep the link; it cannot be printed again.
  *
- * A writeup's reader also gets the printed copy's QR: public/images/qr.png
+ * A read's reader also gets the printed copy's QR: public/images/qr.png
  * is written to carry the same link, so a scan of the sheet lands on that
  * person's contact as an emailed open does. Mint the reader before printing.
  *
@@ -18,7 +18,7 @@
  *
  * Usage: atelic-reader-link <email> [path] [--token <existing token>] [--qr | --no-qr],
  *   or `bun run reader <email>` in a site, from the site's root.
- *   path defaults to /writeup. --token seals an email under a token that is
+ *   path defaults to /the-read. --token seals an email under a token that is
  *   already in a sent link, so that link keeps working. --qr writes the QR
  *   for this reader even when another is already named; --no-qr never writes it.
  */
@@ -51,8 +51,8 @@ export function parseReaderArgs(flags: string[]): ReaderArgs | undefined {
 	const at = args.indexOf("--token");
 	const given = at === -1 ? undefined : args[at + 1];
 	const rest = at === -1 ? args : args.filter((_, index) => index !== at && index !== at + 1);
-	const [email, givenPath = "/writeup"] = rest;
-	// "writeup", "/writeup", and "/writeup/" are one page.
+	const [email, givenPath = "/the-read"] = rest;
+	// "the-read", "/the-read", and "/the-read/" are one page.
 	const path = `/${givenPath.replace(/^\/+|\/+$/g, "")}`;
 
 	if (!email?.includes("@") || (at !== -1 && !given)) return undefined;
@@ -91,13 +91,13 @@ export async function main(flags: string[], cwd: string = process.cwd()): Promis
 	// in and never by a token, so its QR stays on the bare host.
 	const named = site.analytics?.identify.length ?? 0;
 	const sheetIsFree = named === 0 || forceQR;
-	if (path === "/writeup" && !noQR && site.access === "public" && !sheetIsFree) {
+	if (path === "/the-read" && !noQR && site.access === "public" && !sheetIsFree) {
 		console.log("");
 		console.log(
 			"Left public/images/qr.png alone: a reader is already named, and the sheet is theirs. Pass --qr to give the sheet to this reader.",
 		);
 	}
-	if (path === "/writeup" && !noQR && site.access === "public" && sheetIsFree) {
+	if (path === "/the-read" && !noQR && site.access === "public" && sheetIsFree) {
 		const qr = resolve(cwd, "public/images/qr.png");
 		await QRCode.toFile(qr, link, { width: 330, margin: 4, errorCorrectionLevel: "M" });
 		console.log("");

package/src/styles/components.css

@@ -661,11 +661,23 @@
 			grid-column: 4;
 		}
 	}
+	/* A clipping card can defeat a row's break-inside in print engines other
+	   than Chrome, so the card stops clipping there and the first group
+	   label rounds its own top corners instead. A label or a heading never
+	   ends a page alone. */
 	@media print {
 		.atelic-ui .rc-card {
+			overflow: visible;
 			box-shadow: none;
 			border-color: var(--neutral-200);
 		}
+		.atelic-ui .rc-card > .rc-group:first-child {
+			border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
+		}
+		.atelic-ui .rc-head,
+		.atelic-ui .rc-group {
+			break-after: avoid;
+		}
 		.atelic-ui .rc-row {
 			break-inside: avoid;
 		}

package/src/vite/artifact-config.ts

@@ -5,7 +5,7 @@
  *
  *   import { artifactConfig } from "@atelic-action/ui/vite";
  *
- *   export default artifactConfig({ pages: ["/writeup", "/proposal", "/report"] });
+ *   export default artifactConfig({ pages: ["/the-read", "/proposal", "/report"] });
  *
  * The site's own paths (the `@` alias to its src) are found from the
  * directory Vite is run in, which is the site's root.
@@ -18,7 +18,7 @@ import { privateChunks } from "./private-chunks.js";
 
 export interface ArtifactConfigOptions {
 	/**
-	 * The path of each artifact page the site carries, such as "/writeup".
+	 * The path of each artifact page the site carries, such as "/the-read".
 	 * The root and the 404 page are always prerendered and need no entry.
 	 */
 	pages: readonly string[];
@@ -40,7 +40,7 @@ export interface ArtifactPage {
 export function artifactPages(pages: readonly string[]): ArtifactPage[] {
 	const named = pages.filter((path) => path !== "/" && path !== "/404");
 	return [
-		// The root holds no document: it sends the reader to /writeup
+		// The root holds no document: it sends the reader to /the-read
 		// (vercel.json does the same on the host), and its prerendered
 		// index.html is what a static preview serves at the bare host.
 		{ path: "/", prerender: { enabled: true } },
@@ -66,10 +66,10 @@ export function artifactConfig({ pages, extend }: ArtifactConfigOptions): UserCo
 				prerender: {
 					enabled: true,
 					crawlLinks: true,
-					// The writeup links each screenshot crop to its full image, and
+					// The read links each screenshot crop to its full image, and
 					// the crawler follows every href it finds: without this filter it
 					// prerenders /images/<shot>.png as an HTML page and writes that
-					// over the real file in dist/client (found on a client's writeup,
+					// over the real file in dist/client (found on a client's read,
 					// 2026-09-24).
 					filter: ({ path }) => !path.startsWith("/images/"),
 				},