@atelic-action/artifact 1.1.0 → 1.3.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 **writeup** at `/writeup`, the graded document an owner gets, a web page first with its printed copy derived from it; the **read** at `/read`, what a customer gets at the end of an engagement's first week, the baseline's grades explained by cause with the plan in order; 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; and the **note** at `/notes`, the first touch for a business whose site publishes no email address, set as a short page. The bare host sends a reader to the writeup. 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 **writeup** at `/writeup`, the graded document an owner gets, a web page first with its printed copy derived from it; the **read** at `/the-read`, what a customer gets at the end of an engagement's first week, the baseline's grades explained by cause with the plan in order; 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; and the **note** at `/notes`, the first touch for a business whose site publishes no email address, set as a short page. The bare host sends a reader to the writeup. 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.
 
@@ -24,9 +24,9 @@ Every export of the package, all from the one entry, `@atelic-action/artifact`.
 | `Writeup`, `WriteupProps` | The graded document an owner gets: the overview, the three tiers of section cards, the close | `/writeup` |
 | `ratingCell` | A star rating table cell for a writeup table, sorted by its figure | `/writeup` |
 | `WriteupBlock`, `WriteupTopic`, `WriteupPart`, `WriteupSheet`, `WriteupSummary`, `WriteupSummaryRow`, `WriteupMarkets`, `WriteupRented`, `WriteupMark`, `WriteupCell`, `WriteupTone`, and the rest of the `Writeup*` types | The shapes a writeup's content is written in | none |
-| `WriteupGrade`, `WriteupPerson`, `WriteupShot` | The grade letter, the sign off person, and the owner's screen, shared by every document (the first two are re exported from ui) | none |
-| `Read`, `ReadProps` | The baseline's grades explained by cause: the gist table; each section read top to bottom as where we looked (the tools, linked, at the top), what it showed (a short paragraph or two, a compact table of facts, lists of examples under their own headings, and any proof pictures), why (one sentence on a tinted panel), today and after (a two column table), and what we recommend (a checklist); then the plan in order. A beat with no data is left out, heading and all | `/read` |
-| `readLabels`, `ReadLabels` | The fixed words the read sets (Prepared for, the gist table's columns, Where We Looked, What It Showed, Why, Today, After, What We Recommend, the plan's heading), each overridable through `labels` | `/read` |
+| `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 | none |
+| `Read`, `ReadProps` | The baseline's grades explained by cause: the gist table, with an optional `note` callout under it for what the read leaves out; each section under its trade name with the owner's question beneath it, read top to bottom as where we looked (the tools, linked, at the top), what it showed (a short paragraph or two, a compact table of facts, lists of examples under their own headings, and any proof pictures), why (one sentence on a tinted panel), today and after (a two column table), and what we recommend (a checklist); then the plan in order. A beat with no data is left out, heading and all | `/the-read` |
+| `readLabels`, `ReadLabels` | The fixed words the read sets (Prepared for, the gist table's columns, Where We Looked, What It Showed, Why, Today, After, What We Recommend, the plan's heading), each overridable through `labels` | `/the-read` |
 | `ReadTier`, `ReadSection`, `ReadTool`, `ReadFact`, `ReadExamples`, `ReadChange`, `ReadStep`, `ReadPlan`, `ReadClose`, `ReadLink`, `ReadParagraph` | The shapes a read's content is written in, all plain data so a routine can write a read as JSON. A section's `tools` were its `sources` in 1.0.0; `sources` is still read, and rendered at the top as tools, and `ReadSource` names the same shape as `ReadTool` | 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 |
@@ -36,7 +36,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`, 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. Two small helpers live here unexported, because ui 1.1.0 does not export them: `Shot` (the owner's screen, in the writeup, the note, and the read) and `Paragraph` (the plain data paragraph of the note and the read).
+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.
 
 ## Install
 
@@ -44,7 +44,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 `^1.1.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 `^2.0.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 { Writeup } from "@atelic-action/artifact";
@@ -57,13 +57,13 @@ The documents' sheet goes after every ui sheet and before the site's `theme.css`
 
 1. The site's fonts (`fonts.css`)
 2. `@atelic-action/ui/styles/base.css`, `chrome.css`, `components.css`, `primitives.css`, and `gate.css`, in that order
-3. `@atelic-action/ui/styles/artifact.css`, the pieces the documents share (the grade chip, the sign off, the shell's logo)
+3. `@atelic-action/ui/styles/artifact.css`, the pieces the documents share (the grade chip, the sign off, the shot, the shell's logo, and the shell's print rules that drop the header, the credit band, and the skip link); it sets no `@page`
 4. `@atelic-action/artifact/styles/documents.css`
 5. The site's `theme.css`, last
 
 Every rule in the sheet sits in the `atelic-ui` layer and under the `.atelic-ui` root class, exactly as ui's sheets do, so any rule a site writes outside a layer still wins over it. The sheet holds two `@page` rules, the monthly page's and then the writeup's, and the later one wins for every page a site prints; their order is load bearing.
 
-Under ui 1.x the overlap is deliberate: ui's `artifact.css` still carries the documents' rules beside the pieces, so a site importing both sheets carries those rules twice, identical and in the same order, until ui 2.0.0 drops them from its sheet (ATE-671, step 3). On the template that is about 39 KB of the built base sheet, 6 KB gzipped.
+From 1.2.0 the two sheets do not overlap: ui 2.0.0's `artifact.css` holds only the pieces, and this sheet holds only the documents and both `@page` rules. A site on ui 1.x stays on artifact 1.1.x, which carries the shot's rules and the shell's print rules itself.
 
 ## Tech Stack
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/artifact",
-	"version": "1.1.0",
+	"version": "1.3.0",
 	"description": "The composed documents the Atelic practice hands or sends a business (the writeup, the read, the monthly page, the note, 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": "^1.1.0",
+		"@atelic-action/ui": "^2.0.0",
 		"lucide-react": "^1.23.0",
 		"react": "^19.0.0"
 	},
 	"devDependencies": {
-		"@atelic-action/ui": "^1.1.0",
+		"@atelic-action/ui": "^2.0.0",
 		"@biomejs/biome": "^2.0.0",
 		"@playwright/test": "^1.60.0",
 		"@sentry/react": "^10.0.0",

package/src/documents/Note.tsx

@@ -1,13 +1,15 @@
-import { SignOff, type WriteupPerson } from "@atelic-action/ui/artifact";
-import { Callout } from "@atelic-action/ui/components";
 import {
 	type ArtifactLink,
 	type ArtifactParagraph,
 	isEmpty,
 	ArtifactAnchor as NoteAnchor,
 	Paragraph,
-} from "./Paragraph";
-import { Shot, type WriteupShot } from "./Shot";
+	Shot,
+	SignOff,
+	type WriteupPerson,
+	type WriteupShot,
+} from "@atelic-action/ui/artifact";
+import { Callout } from "@atelic-action/ui/components";
 
 /**
  * The note: the first touch, for a business whose site publishes no email

package/src/documents/Read.tsx

@@ -1,14 +1,19 @@
 import {
+	type ArtifactLink,
+	type ArtifactParagraph,
 	GradeChip,
 	gradeLabel,
+	isEmpty,
 	newTabProps,
+	Paragraph,
+	Runs,
+	Shot,
 	SignOff,
 	type WriteupGrade,
 	type WriteupPerson,
+	type WriteupShot,
 } from "@atelic-action/ui/artifact";
 import { ArrowUpRight, Check } from "lucide-react";
-import { type ArtifactLink, type ArtifactParagraph, isEmpty, Paragraph, Runs } from "./Paragraph";
-import { Shot, type WriteupShot } from "./Shot";
 
 /**
  * The read: what a customer gets at the end of an engagement's first week,
@@ -19,7 +24,8 @@ import { Shot, type WriteupShot } from "./Shot";
  * plan, in order; then one closing line and the sign off.
  *
  * Each section reads as an aggregator of the tools we looked through, top to
- * bottom: where we looked (the tools, linked, each with an optional line);
+ * bottom, under its trade name with the owner's question beneath it: where
+ * we looked (the tools, linked, each with an optional line);
  * what it showed (a short paragraph or two, a compact table of facts, lists
  * of examples, and any proof pictures); why, in one sentence on a tinted
  * panel; today and after, a two column table of what a thing is and what it
@@ -31,7 +37,8 @@ import { Shot, type WriteupShot } from "./Shot";
  * (the `.op` classes), and adds only what is its own (the `.rd` classes).
  * The gist table is drawn from the tiers, so a tier added later (Conversion,
  * once the analytics access lands) is one more entry in `tiers` and appears
- * in the table and the body alike, with no change to the props. Every prop
+ * in the table and the body alike, with no change to the props; until then
+ * `note` says so in a callout under the table. Every prop
  * is plain data, so a routine can write a read as JSON; the one exception is
  * the sign off person's `role`, which takes a node and is equally happy with
  * a string.
@@ -76,9 +83,9 @@ export interface ReadChange {
 export interface ReadSection {
 	/** The anchor the gist table links to, e.g. "technical-seo". */
 	id: string;
-	/** The section's trade name, e.g. "Technical SEO": the gist table's Section column, and the line over the question. */
+	/** The section's trade name, e.g. "Technical SEO": the section's heading, and the gist table's Section column. */
 	name: string;
-	/** The question the section answers, in the owner's words, e.g. "Can Google read the site?". The section's heading. */
+	/** The question the section answers, in the owner's words, e.g. "Can Google read the site?", set under the heading. */
 	question: string;
 	/** The baseline's grade. Omit for a section not yet graded; the table shows a quiet dash. */
 	grade?: WriteupGrade;
@@ -195,6 +202,8 @@ export interface ReadProps {
 	lede: ReadParagraph;
 	/** The heading over the gist table, e.g. "At a Glance". */
 	gistTitle?: string;
+	/** A callout under the gist table, e.g. what the read leaves out and when it follows. */
+	note?: ReadParagraph;
 	/** The key: what each letter means, in a few words each. */
 	gradeKey?: Array<{ grade: WriteupGrade; label: string }>;
 	/** The tiers in order. Each section appears in the gist table and in the body. */
@@ -403,8 +412,8 @@ function Section({ section, labels }: { section: ReadSection; labels: ReadLabels
 		<section className="op-topic rd-section" id={section.id}>
 			<header className="op-topic-head">
 				<div>
-					<p className="rd-name">{section.name}</p>
-					<h3>{section.question}</h3>
+					<h3>{section.name}</h3>
+					<p className="rd-question">{section.question}</p>
 				</div>
 				{section.grade && (
 					<>
@@ -495,6 +504,7 @@ export function Read({
 	date,
 	lede,
 	gistTitle,
+	note,
 	gradeKey,
 	tiers,
 	plan,
@@ -518,7 +528,14 @@ export function Read({
 					{filled(lede) && <Paragraph paragraph={lede} className="op-intro rd-lede" />}
 				</header>
 				{shownTiers.length > 0 && (
-					<Gist tiers={shownTiers} title={gistTitle} gradeKey={gradeKey} labels={labels} />
+					<>
+						<Gist tiers={shownTiers} title={gistTitle} gradeKey={gradeKey} labels={labels} />
+						{filled(note) && (
+							<div className="rd-note" role="note">
+								<Paragraph paragraph={note} />
+							</div>
+						)}
+					</>
 				)}
 				{shownTiers.map((tier) => (
 					<div className="rd-tier" key={tier.title}>

package/src/documents/Writeup.tsx

@@ -2,9 +2,11 @@ import {
 	GradeChip,
 	gradeLabel,
 	newTabProps,
+	Shot,
 	SignOff,
 	type WriteupGrade,
 	type WriteupPerson,
+	type WriteupShot,
 } from "@atelic-action/ui/artifact";
 import {
 	Callout,
@@ -25,10 +27,8 @@ import {
 } from "@atelic-action/ui/components";
 import { ArrowUpRight, ChevronRight, CircleAlert, CircleCheck, CircleX, Star } from "lucide-react";
 import type { ReactNode } from "react";
-import { Shot, type WriteupShot } from "./Shot";
 
-export type { WriteupGrade, WriteupPerson } from "@atelic-action/ui/artifact";
-export type { WriteupShot } from "./Shot";
+export type { WriteupGrade, WriteupPerson, WriteupShot } from "@atelic-action/ui/artifact";
 
 /**
  * The writeup: the graded document an owner gets. It is a web page first: an

package/src/documents/documents.css

@@ -7,11 +7,14 @@
    writeup'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), and the shell's logo rule,
-   in its styles/artifact.css; the login screen's vocabulary the sealed stage
-   reuses, in its styles/gate.css; the page components (the callout, the
-   checklist, the table, the charts), in its styles/components.css. Import
-   this sheet after all of them and before the site's theme.css.
+   (.op-grade), the sign off (.op-who, .op-sign), the shot (.op-shot), the
+   shell's logo rule, and the shell's print rules that drop the header, the
+   credit band, and the skip link on every artifact page, in its
+   styles/artifact.css, which sets no @page; the login screen's vocabulary
+   the sealed stage reuses, in its styles/gate.css; the page components (the
+   callout, the checklist, the table, the charts), in its
+   styles/components.css. Import this sheet after all of them and before the
+   site's theme.css. Both @page rules live only here.
 
    Every rule sits in the same atelic-ui layer as the package sheets, so any
    rule a site writes outside a layer still wins over it whatever its
@@ -521,7 +524,8 @@
 	     never reflowed, so a print of one sheet is the check.
 
 	   Tokens only (theme.css), except the printed sheet's white. The grade
-	   chip and the sign off are the shared classes in @atelic-action/ui's
+	   chip, the sign off, and the print rule that drops the header and the
+	   credit band are the shared classes in @atelic-action/ui's
 	   styles/artifact.css.
 	   ================================================================= */
 	.atelic-ui .rp {
@@ -797,11 +801,6 @@
 			padding: 0;
 			background: none;
 		}
-		.atelic-ui:has(.rp) .nav,
-		.atelic-ui:has(.rp) .skip-link,
-		.atelic-ui:has(.rp) .credit-bar {
-			display: none;
-		}
 		.atelic-ui .rp {
 			padding: 0;
 			background: none;
@@ -1345,33 +1344,6 @@
 		gap: 14px;
 		max-width: 340px;
 	}
-	.atelic-ui .op-shot {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-		margin: 0;
-	}
-	.atelic-ui .op-shot a,
-	.atelic-ui .op-shot-frame {
-		display: block;
-		width: 100%;
-		border-radius: var(--radius-sm);
-		overflow: hidden;
-		border: 1px solid var(--neutral-200);
-		background: var(--op-card);
-	}
-	.atelic-ui .op-shot a {
-		cursor: zoom-in;
-	}
-	/* The expand badge on a linked crop: off here, the note turns it on. */
-	.atelic-ui .op-shot-open {
-		display: none;
-	}
-	.atelic-ui .op-shot img {
-		width: 100%;
-		height: auto;
-		display: block;
-	}
 	.atelic-ui .op-shot-brief {
 		display: grid;
 		place-items: center;
@@ -1384,11 +1356,6 @@
 		padding: 12px;
 		text-align: center;
 	}
-	.atelic-ui .op-shot figcaption {
-		font-size: 12.5px;
-		line-height: 1.45;
-		color: var(--op-ink-faint);
-	}
 
 	/* sources: the tools the readings came from */
 	.atelic-ui .op-sources {
@@ -1715,9 +1682,6 @@
 		html:has(.atelic-ui .op-doc) {
 			zoom: 0.74;
 		}
-		.atelic-ui .nav,
-		.atelic-ui .credit-bar,
-		.atelic-ui .skip-link,
 		.atelic-ui .op-ov-go,
 		.atelic-ui .op-topic h3 a svg {
 			display: none;
@@ -1808,9 +1772,6 @@
 		.atelic-ui .data-table thead {
 			break-after: avoid;
 		}
-		.atelic-ui .op-shot a {
-			cursor: auto;
-		}
 		.atelic-ui .op-twin {
 			display: flex;
 			align-items: center;
@@ -1851,17 +1812,17 @@
 	     aligned; the screen's column sizes to the picture, a phone crop
 	     about 260px and a wide card up to 45% of the row. A finding
 	     with no screen takes the full width.
-	   - Print: one letter sheet. The chrome steps aside (the writeup's print
-	     rules already hide the header and the credit band on any artifact
-	     page), the type comes down, and the screens shrink. The note sets
+	   - 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,
 	     sets letter paper for every artifact page.
 
 	   Tokens only. The finding is the shared Callout (@atelic-action/ui's components.css),
-	   the screen the writeup's .op-shot, the sign off the shared .op-who;
+	   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 borrowed .op-shot reads the writeup's own two tokens, mapped here as
+	/* The shared .op-shot reads the writeup's own two tokens, mapped here as
 	   the writeup's .op root maps them. */
 	.atelic-ui .nt {
 		--op-card: var(--card);
@@ -2210,6 +2171,7 @@
 
 	/* Prose links read as links here, where the writeup's are quiet. */
 	.atelic-ui .rd-lede a,
+	.atelic-ui .rd-note a,
 	.atelic-ui .rd-beat a,
 	.atelic-ui .rd-gist-read a,
 	.atelic-ui .rd-plan a,
@@ -2290,13 +2252,13 @@
 	}
 
 	/* ---- a section: the trade name over the question, then its beats ---- */
-	.atelic-ui .rd-name {
-		margin: 0 0 4px;
-		font-family: var(--font-mono);
-		font-size: 11.5px;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
-		color: var(--op-ink-faint);
+	/* The owner's question sits under the section's name. */
+	.atelic-ui .rd-question {
+		margin: 4px 0 0;
+		font-size: 15.5px;
+		line-height: 1.4;
+		color: var(--op-ink-soft);
+		text-wrap: pretty;
 	}
 	.atelic-ui .rd-grade .op-grade {
 		width: 42px;
@@ -2422,6 +2384,20 @@
 	.atelic-ui .rd-examples li + li {
 		margin-top: 4px;
 	}
+	/* The note under the gist table: what the read leaves out, on the why panel's tint. */
+	.atelic-ui .rd-note {
+		margin-top: 18px;
+		padding: 12px 14px;
+		border-left: 3px solid var(--op-accent);
+		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+		background: var(--surface-alt);
+	}
+	.atelic-ui .rd-note p {
+		font-size: 15.5px;
+		line-height: 1.5;
+		color: var(--op-ink);
+		text-wrap: pretty;
+	}
 	/* Why is one sentence, set apart: a tinted panel with the accent's rule. */
 	.atelic-ui .rd-why {
 		padding: 12px 14px;
@@ -2707,6 +2683,7 @@
 		.atelic-ui .rd-tools,
 		.atelic-ui .rd-checks li,
 		.atelic-ui .rd-closing,
+		.atelic-ui .rd-note,
 		.atelic-ui .rd-why,
 		.atelic-ui .rd-step,
 		.atelic-ui .rd-close,

package/src/documents/Paragraph.tsx

@@ -1,65 +0,0 @@
-import { newTabProps } from "@atelic-action/ui/artifact";
-
-/**
- * Plain data text for the documents a routine can write as JSON (the note
- * and the read): a paragraph is a string, or runs of text and links in
- * order. A link opens in a new tab when it leaves the page, and in place
- * when it is an anchor or a mail link.
- */
-
-/** A link inside running text: the words the reader clicks and where they go. */
-export interface ArtifactLink {
-	text: string;
-	href: string;
-}
-
-/** A paragraph: a plain string, or runs of text and links in order. */
-export type ArtifactParagraph = string | Array<string | ArtifactLink>;
-
-/** A link opens in a new tab when it leaves the page, and in place when it is an anchor or a mail link. */
-export function ArtifactAnchor({ href, children }: { href: string; children: string }) {
-	return (
-		<a href={href} {...newTabProps(href, /^https?:/i.test(href))}>
-			{children}
-		</a>
-	);
-}
-
-/** A paragraph with nothing to read: a blank string, or runs that are all blank strings. A link always counts. */
-export function isEmpty(paragraph: ArtifactParagraph): boolean {
-	const runs = typeof paragraph === "string" ? [paragraph] : paragraph;
-	return runs.every((run) => typeof run === "string" && run.trim() === "");
-}
-
-/** The runs alone, for a container that is not a paragraph (a list item, a table cell). */
-export function Runs({ paragraph }: { paragraph: ArtifactParagraph }) {
-	const runs = typeof paragraph === "string" ? [paragraph] : paragraph;
-	return (
-		<>
-			{runs.map((run, i) =>
-				typeof run === "string" ? (
-					run
-				) : (
-					// biome-ignore lint/suspicious/noArrayIndexKey: runs are static content in a fixed order
-					<ArtifactAnchor href={run.href} key={i}>
-						{run.text}
-					</ArtifactAnchor>
-				),
-			)}
-		</>
-	);
-}
-
-export function Paragraph({
-	paragraph,
-	className,
-}: {
-	paragraph: ArtifactParagraph;
-	className?: string;
-}) {
-	return (
-		<p className={className}>
-			<Runs paragraph={paragraph} />
-		</p>
-	);
-}

package/src/documents/Shot.tsx

@@ -1,38 +0,0 @@
-import { newTabProps } from "@atelic-action/ui/artifact";
-import { Maximize2 } from "lucide-react";
-
-export interface WriteupShot {
-	/** The crop shown on the page. */
-	src: string;
-	alt: string;
-	/** The full screenshot the crop opens in a new tab; omit to render the crop alone. */
-	href?: string;
-	caption: string;
-}
-
-/**
- * The owner's own screen: the crop, opening the full screenshot in a new tab
- * when it has one, over its caption. The writeup and the note both wear it;
- * its styles (.op-shot) are the writeup's, and the note only sizes it. A
- * linked crop says it opens: a hover title, and an expand badge the note
- * shows on its thumbnails and the writeup keeps hidden.
- */
-export function Shot({ shot }: { shot: WriteupShot }) {
-	return (
-		<figure className="op-shot">
-			{shot.href ? (
-				<a href={shot.href} title="Open the full picture" {...newTabProps(shot.href, true)}>
-					<img src={shot.src} alt={shot.alt} loading="lazy" />
-					<span className="op-shot-open" aria-hidden="true">
-						<Maximize2 size={12} />
-					</span>
-				</a>
-			) : (
-				<span className="op-shot-frame">
-					<img src={shot.src} alt={shot.alt} loading="lazy" />
-				</span>
-			)}
-			<figcaption>{shot.caption}</figcaption>
-		</figure>
-	);
-}