@atelic-action/ui 0.17.0 → 0.17.1

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. 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.1",
 	"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/styles/artifact.css

@@ -1865,9 +1865,10 @@
 	   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.
 
-	   - 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.
+	   - Phone first, and the one layout: the two lanes are separate
+	     sections stacked top to bottom at every width and on paper, never
+	     side by side, each finding a Callout with the owner's screen
+	     under it. Wide (721px and up) only gives the page more room.
 	   - 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
@@ -1941,7 +1942,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);
@@ -2057,13 +2059,12 @@
 		text-decoration: none;
 	}
 
-	/* ---- wide, and on paper: the two lanes side by side ---- */
-	@media print, (min-width: 721px) {
+	/* ---- wide: the same stacked page with room ---- */
+	@media (min-width: 721px) {
 		:is(.mkt, .atelic-ui) .nt-doc {
 			padding: calc(var(--nav-height) + 36px) 24px 64px;
 		}
 		:is(.mkt, .atelic-ui) .nt-lanes {
-			grid-template-columns: repeat(2, minmax(0, 1fr));
 			gap: 32px;
 		}
 	}