@atelic-action/artifact 1.1.0 → 1.2.0

package/README.md

@@ -24,7 +24,7 @@ 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 |
+| `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; 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` |
 | `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 |
@@ -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.2.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,

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);

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>
-	);
-}