@atelic-action/ui 0.17.0 → 0.17.2

package/README.md

@@ -248,7 +248,7 @@ export function ArtifactShell(props: Omit<ArtifactShellProps, "currentPath">) {
 }
 ```
 
-**The note** is the first touch for a business whose site publishes no email address, served at `/notes` and wrapped in `ArtifactShell` exactly as the writeup is. It is the writeup's sibling, not a variant: a title and a dateline, the opener, two lanes of findings (what the customer sees, what sits under the hood), the steps the work would start with, and the close over the shared `SignOff`. Every prop is plain data, so a routine can write a note as JSON; a paragraph is a string or an array of strings and `{ text, href }` links, and the sign off person's `role` is the one field that also takes a node. A finding is a `Callout` with its `WriteupShot` under it. It reads on a phone first, sets the two lanes side by side when wide and on paper, and prints to one letter sheet under the writeup's `@page`.
+**The note** is the first touch for a business whose site publishes no email address, served at `/notes` and wrapped in `ArtifactShell` exactly as the writeup is. It is the writeup's sibling, not a variant: a title and a dateline, the opener, two lanes of findings (what the customer sees, what sits under the hood), the steps the work would start with, and the close over the shared `SignOff`. Every prop is plain data, so a routine can write a note as JSON; a paragraph is a string or an array of strings and `{ text, href }` links, and the sign off person's `role` is the one field that also takes a node. A finding is a `Callout` with its `WriteupShot` under it. Its column is the writeup's 920px, centered under the header with the header's `--gutter`, and its text runs the column's full width. A finding sets its screen under its words on a phone and beside them, on the right, when wide and on paper. It reads on a phone first, stacks the two lanes as separate sections top to bottom at every width and on paper, never side by side, and prints to one letter sheet under the writeup's `@page`.
 
 The documents import no stylesheet of their own. A site imports `@atelic-action/ui/styles/artifact.css` in its base sheet after `gate.css` and before its `theme.css`, so every page carries the rules whichever route it is. 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; the order inside the sheet is the order the template's build bundled them in and is load bearing.
 

package/package.json

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

package/src/artifact/Note.tsx

@@ -121,7 +121,7 @@ function Paragraph({ paragraph, className }: { paragraph: NoteParagraph; classNa
 
 function Finding({ finding }: { finding: NoteFinding }) {
 	return (
-		<li className="nt-finding">
+		<li className={finding.shot ? "nt-finding has-shot" : "nt-finding"}>
 			<Callout
 				tone="warn"
 				title={

package/src/artifact/Shot.tsx

@@ -1,3 +1,4 @@
+import { Maximize2 } from "lucide-react";
 import { newTabProps } from "../lib/newTabProps";
 
 export interface WriteupShot {
@@ -12,14 +13,19 @@ export interface WriteupShot {
 /**
  * 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.
+ * 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} {...newTabProps(shot.href, true)}>
+				<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">

package/src/styles/artifact.css

@@ -1392,6 +1392,10 @@
 	:is(.mkt, .atelic-ui) .op-shot a {
 		cursor: zoom-in;
 	}
+	/* The expand badge on a linked crop: off here, the note turns it on. */
+	:is(.mkt, .atelic-ui) .op-shot-open {
+		display: none;
+	}
 	:is(.mkt, .atelic-ui) .op-shot img {
 		width: 100%;
 		height: auto;
@@ -1863,11 +1867,18 @@
 
 	/* =================================================================
 	   THE NOTE: the first touch set as a page (Note.tsx). A letter, not a
-	   report: one narrow column of running text, read on a phone first.
+	   report, read on a phone first. Its column is the writeup's 920px,
+	   centered under the header with the header's own gutters, and every
+	   line of text runs the column's full width.
 
-	   - Phone first: the base rules are the phone's. The two lanes stack,
-	     each finding a Callout with the owner's screen under it.
-	   - Wide (721px and up) and print: the two lanes sit side by side.
+	   - The two lanes are separate sections stacked top to bottom at
+	     every width and on paper, never side by side.
+	   - Phone first: a finding is its Callout with the owner's screen
+	     under it. Wide (721px and up) and on paper, a finding with a
+	     screen is one row, the words left and the screen right, top
+	     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
@@ -1887,10 +1898,12 @@
 		color: var(--ink);
 		background: var(--surface);
 	}
+	/* The writeup's column (.op-doc, 920px), centered under the header and
+	   held off the edges by the header's gutters (chrome.css, .nav-inner). */
 	:is(.mkt, .atelic-ui) .nt-doc {
-		max-width: 760px;
+		max-width: calc(920px + 2 * var(--gutter));
 		margin: 0 auto;
-		padding: calc(var(--nav-height) + 22px) 18px 48px;
+		padding: calc(var(--nav-height) + 22px) var(--gutter) 48px;
 		font-size: 17px;
 		line-height: 1.6;
 		print-color-adjust: exact;
@@ -1941,7 +1954,8 @@
 		text-wrap: pretty;
 	}
 
-	/* ---- the two lanes, each a heading and its findings ---- */
+	/* ---- the two lanes, each a heading and its findings, one above the
+	   other at every width ---- */
 	:is(.mkt, .atelic-ui) .nt-lanes {
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
@@ -1973,9 +1987,9 @@
 		font-size: 16px;
 		line-height: 1.5;
 	}
-	/* The screen sits under its finding, set in from the icon so it lines up
-	   with the words. It keeps its own shape, never wider than the lane and
-	   never so tall it carries the page. */
+	/* The screen is a thumbnail under its finding, set in from the icon so it
+	   lines up with the words. It keeps its own shape, held to 200px tall and
+	   never the lane's full width; a click opens the full picture. */
 	:is(.mkt, .atelic-ui) .nt-finding .op-shot {
 		margin: 10px 0 0 28px;
 	}
@@ -1986,10 +2000,45 @@
 	}
 	:is(.mkt, .atelic-ui) .nt-finding .op-shot img {
 		width: auto;
-		max-width: 100%;
-		max-height: 340px;
+		max-width: min(100%, 280px);
+		max-height: 200px;
+	}
+	/* A linked thumbnail says it opens: the badge in its corner, and the
+	   frame takes the accent on hover and focus. */
+	:is(.mkt, .atelic-ui) .nt-finding .op-shot a {
+		position: relative;
+		color: inherit;
+		text-decoration: none;
+		transition:
+			border-color 0.15s ease,
+			box-shadow 0.15s ease;
+	}
+	:is(.mkt, .atelic-ui) .nt-finding .op-shot a:hover,
+	:is(.mkt, .atelic-ui) .nt-finding .op-shot a:focus-visible {
+		border-color: var(--primary);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
 	}
+	:is(.mkt, .atelic-ui) .nt-finding .op-shot-open {
+		position: absolute;
+		right: 4px;
+		bottom: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background: color-mix(in srgb, var(--ink) 72%, transparent);
+		color: var(--surface);
+	}
+	:is(.mkt, .atelic-ui) .nt-finding .op-shot a:hover .op-shot-open,
+	:is(.mkt, .atelic-ui) .nt-finding .op-shot a:focus-visible .op-shot-open {
+		background: var(--primary);
+	}
+	/* The caption wraps to the picture's width and never sets the column's. */
 	:is(.mkt, .atelic-ui) .nt-finding .op-shot figcaption {
+		width: 0;
+		min-width: 100%;
 		font-size: 12.5px;
 		line-height: 1.45;
 		color: var(--neutral-500);
@@ -2057,21 +2106,49 @@
 		text-decoration: none;
 	}
 
-	/* ---- wide, and on paper: the two lanes side by side ---- */
-	@media print, (min-width: 721px) {
+	/* ---- wide: more room, and each screen beside its finding ---- */
+	@media (min-width: 721px) {
 		:is(.mkt, .atelic-ui) .nt-doc {
-			padding: calc(var(--nav-height) + 36px) 24px 64px;
+			padding-top: calc(var(--nav-height) + 36px);
+			padding-bottom: 64px;
 		}
 		:is(.mkt, .atelic-ui) .nt-lanes {
-			grid-template-columns: repeat(2, minmax(0, 1fr));
 			gap: 32px;
 		}
 	}
 
-	/* ---- print: one letter sheet ---- */
+	/* A finding with a screen is one row: the words left, the screen right,
+	   top aligned. The screen is a thumbnail about as tall as a three line
+	   finding, so a phone crop reads as a tall one about 80px wide and a
+	   wide card as a short wide one; the column shrinks to it, held to 45%
+	   of the row, with room enough for the caption under it. */
+	@media print, (min-width: 721px) {
+		:is(.mkt, .atelic-ui) .nt-finding.has-shot {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr) fit-content(45%);
+			column-gap: 32px;
+			align-items: start;
+		}
+		:is(.mkt, .atelic-ui) .nt-finding.has-shot .op-shot {
+			margin: 0;
+			min-width: 150px;
+		}
+		:is(.mkt, .atelic-ui) .nt-finding .op-shot img {
+			max-width: 100%;
+			max-height: 170px;
+		}
+		:is(.mkt, .atelic-ui) .nt-finding .op-shot figcaption {
+			font-size: 12px;
+		}
+	}
+
+	/* ---- 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
+	   are held short with room for their captions, and the badge drops. */
 	@media print {
 		html:has(:is(.mkt, .atelic-ui) .nt-doc) {
-			zoom: 0.8;
+			zoom: 0.74;
 		}
 		:is(.mkt, .atelic-ui) .nt {
 			background: none;
@@ -2080,26 +2157,63 @@
 			max-width: none;
 			padding: 0;
 			font-size: 15px;
-			line-height: 1.5;
+			line-height: 1.45;
+		}
+		:is(.mkt, .atelic-ui) .nt h1 {
+			font-size: 32px;
 		}
 		:is(.mkt, .atelic-ui) .nt-opener {
+			margin-top: 12px;
 			font-size: 16px;
 		}
 		:is(.mkt, .atelic-ui) .nt-lanes,
 		:is(.mkt, .atelic-ui) .nt-start,
 		:is(.mkt, .atelic-ui) .nt-close {
-			margin-top: 20px;
-			padding-top: 16px;
+			margin-top: 16px;
+			padding-top: 14px;
+		}
+		:is(.mkt, .atelic-ui) .nt-lanes {
+			gap: 18px;
+		}
+		:is(.mkt, .atelic-ui) .nt-lane h2 {
+			margin-bottom: 10px;
+			break-after: avoid;
+		}
+		:is(.mkt, .atelic-ui) .nt-findings {
+			gap: 14px;
 		}
 		:is(.mkt, .atelic-ui) .nt-finding .callout {
 			font-size: 14.5px;
 		}
+		:is(.mkt, .atelic-ui) .nt-finding.has-shot {
+			grid-template-columns: minmax(0, 1fr) fit-content(40%);
+			column-gap: 24px;
+		}
+		:is(.mkt, .atelic-ui) .nt-finding.has-shot .op-shot {
+			min-width: 1.6in;
+		}
 		:is(.mkt, .atelic-ui) .nt-finding .op-shot img {
-			max-height: 1.9in;
+			max-height: 1.5in;
+		}
+		:is(.mkt, .atelic-ui) .nt-finding .op-shot-open {
+			display: none;
+		}
+		:is(.mkt, .atelic-ui) .nt-finding .op-shot figcaption {
+			font-size: 11.5px;
+			line-height: 1.35;
 		}
 		:is(.mkt, .atelic-ui) .nt-finding .op-shot a {
 			cursor: auto;
 		}
+		:is(.mkt, .atelic-ui) .nt-start ul {
+			gap: 4px;
+		}
+		:is(.mkt, .atelic-ui) .nt-close p {
+			margin-bottom: 10px;
+		}
+		:is(.mkt, .atelic-ui) .nt-close .op-who {
+			margin-top: 14px;
+		}
 		:is(.mkt, .atelic-ui) .nt-finding,
 		:is(.mkt, .atelic-ui) .nt-start,
 		:is(.mkt, .atelic-ui) .nt-close {