@atelic-action/ui 3.6.0 → 3.7.0

package/README.md

@@ -98,7 +98,7 @@ Every export, grouped by the entry it is imported from. The gallery column links
 | `SocialStrip` | `@atelic-action/ui/sections` | A static grid of the business's social photos linking to the profile, never a live embed | [#social-strip](https://ui.atelic.me/#social-strip) |
 | `SplitSection` | `@atelic-action/ui/sections` | The two column band: copy beside copy, or media beside copy | [#split-section](https://ui.atelic.me/#split-section) |
 | `SiteConfig` and its member types, `formatClock`, `formatHoursRange`, `isClosed`, `isHoneypotFilled`, `trackEvent` | `@atelic-action/ui/sections` | The site contract the sections read, and the hours, honeypot, and lead event helpers | none |
-| `ImageFrame`, `ProseBlocks`, `QuoteCard`, `StarRow`, `TickList` | `@atelic-action/ui/primitives` | The marketing primitives: a framed image, prose blocks (headings at two levels, paragraphs, lists, and a figure that is an image or a silent looping clip played only while on screen), a quote card, a row of filled stars, a tick list | [#marketing-primitives](https://ui.atelic.me/#marketing-primitives) |
+| `ImageFrame`, `ProseBlocks`, `QuoteCard`, `StarRow`, `TickList` | `@atelic-action/ui/primitives` | The marketing primitives: a framed image, prose blocks (headings at two levels, paragraphs, lists, and figures: small captioned tiles in rows, an image or a silent looping clip played only while on screen, each opening large in a dialog), a quote card, a row of filled stars, a tick list | [#marketing-primitives](https://ui.atelic.me/#marketing-primitives) |
 | `SiteShell` | `@atelic-action/ui/chrome` | A marketing page's whole chrome: skip link, header, main, footer, sticky bar, mounting the base path provider | none |
 | `BasePathProvider`, `useBasePath`, `useWithBase`, `joinBase`, `stripBase`, `hasBase`, `normalizeBasePath` | `@atelic-action/ui/routing` | The base path a site is served under, read by Button, Chip, and every section that builds a link | none |
 | `joinBase`, `stripBase`, `hasBase`, `normalizeBasePath` | `@atelic-action/ui/routing/base-path` | The same four pure helpers, built, for what Node runs (a Playwright spec, a script) | none |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/ui",
-	"version": "3.6.0",
+	"version": "3.7.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/primitives/ProseBlocks.tsx

@@ -1,3 +1,4 @@
+import { X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useWithBase } from "../routing/BasePathProvider";
 
@@ -32,8 +33,8 @@ export interface ProseBlock {
 	caption?: string;
 	/**
 	 * For "figure": the file's own width and height in pixels. With both, the
-	 * figure holds its shape before the file arrives (no layout shift), and a
-	 * tall one is narrowed so it never runs taller than most of the screen.
+	 * tile keeps the file's shape at the row's height and holds it before the
+	 * file arrives (no layout shift); without them it is 4 by 5.
 	 */
 	width?: number;
 	height?: number;
@@ -43,17 +44,9 @@ export interface ProseBlock {
 
 const CLIP = /\.(mp4|webm)([?#].*)?$/i;
 
-/**
- * The box a figure's file draws in: its own shape, and never taller than most
- * of the screen, so a portrait clip in a text column does not fill a desktop
- * from top to bottom. Nothing without both dimensions.
- */
-function frameStyle(width?: number, height?: number) {
-	if (!width || !height) return undefined;
-	return {
-		aspectRatio: `${width} / ${height}`,
-		maxWidth: `min(100%, calc(75vh * ${width} / ${height}))`,
-	};
+/** A tile keeps its file's shape; the row sets its height. */
+function tileStyle(width?: number, height?: number) {
+	return { aspectRatio: width && height ? `${width} / ${height}` : "4 / 5" };
 }
 
 /**
@@ -66,12 +59,13 @@ function Clip({
 	src,
 	alt,
 	poster,
-	style,
+	inTile = false,
 }: {
 	src: string;
 	alt?: string;
 	poster?: string;
-	style?: ReturnType<typeof frameStyle>;
+	/** Inside a button, where native controls would nest interactive content; the lightbox has them. */
+	inTile?: boolean;
 }) {
 	const ref = useRef<HTMLVideoElement>(null);
 	const [still, setStill] = useState(false);
@@ -113,17 +107,147 @@ function Clip({
 			src={src}
 			poster={poster}
 			aria-label={alt}
-			style={style}
 			loop
 			muted
 			playsInline
-			controls={still}
+			controls={still && !inTile}
 			// A still clip never plays, so without a poster it needs its first frame loaded.
 			preload={still && !poster ? "metadata" : "none"}
 		/>
 	);
 }
 
+/**
+ * One figure: a small tile, the caption laid over its foot, that opens the
+ * file large in a modal dialog. The platform's dialog gives Escape, focus
+ * containment, and focus return to the tile; a click on the backdrop closes
+ * it too. The large clip mounts only while the dialog is open, so it costs
+ * nothing until a reader asks for it.
+ */
+function Figure({ block, withBase }: { block: ProseBlock; withBase: (path: string) => string }) {
+	const dialogRef = useRef<HTMLDialogElement>(null);
+	const [open, setOpen] = useState(false);
+	const src = block.src ? withBase(block.src) : "";
+	const poster = block.poster ? withBase(block.poster) : undefined;
+	const clip = CLIP.test(src);
+	// The description names the tile; the caption is laid over it and read from the figcaption.
+	const label = block.alt || block.caption || "Figure";
+	// A reader who asked for reduced motion gets the large clip still, with controls.
+	const [reduceMotion, setReduceMotion] = useState(false);
+
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		if (open && !dialog.open) dialog.showModal();
+		if (!open && dialog.open) dialog.close();
+	}, [open]);
+
+	if (!src) {
+		return (
+			<figure className="pb-figure">
+				<div className="ph" style={tileStyle(block.width, block.height)}>
+					{block.alt ?? "Figure"}
+				</div>
+				{block.caption ? <figcaption className="pb-caption">{block.caption}</figcaption> : null}
+			</figure>
+		);
+	}
+
+	return (
+		<figure className="pb-figure">
+			{/* biome-ignore lint/a11y/useKeyWithClickEvents: the backdrop click is a pointer shortcut; the dialog closes on Escape natively and has a close button */}
+			<dialog
+				ref={dialogRef}
+				className="pb-lightbox"
+				aria-label={label}
+				onClose={() => setOpen(false)}
+				onClick={(event) => {
+					// A click that lands outside the panel's box is a click on the backdrop; the
+					// panel's own padding and blank areas also target the dialog, so test coordinates.
+					if (event.target !== event.currentTarget) return;
+					const box = event.currentTarget.getBoundingClientRect();
+					const outside =
+						event.clientX < box.left ||
+						event.clientX > box.right ||
+						event.clientY < box.top ||
+						event.clientY > box.bottom;
+					if (outside) setOpen(false);
+				}}
+			>
+				<button
+					type="button"
+					className="pb-lightbox-close"
+					aria-label="Close"
+					onClick={() => setOpen(false)}
+				>
+					<X size={20} strokeWidth={2} aria-hidden="true" />
+				</button>
+				{open ? (
+					clip ? (
+						// biome-ignore lint/a11y/useMediaCaption: a silent loop has no audio to caption; the caption below carries the words
+						<video
+							src={src}
+							poster={poster}
+							aria-label={block.alt}
+							width={block.width}
+							height={block.height}
+							autoPlay={!reduceMotion}
+							loop
+							muted
+							playsInline
+							controls
+						/>
+					) : (
+						<img src={src} alt={block.alt ?? ""} width={block.width} height={block.height} />
+					)
+				) : null}
+				{open && block.caption ? <p className="pb-lightbox-caption">{block.caption}</p> : null}
+			</dialog>
+			<button
+				type="button"
+				className="pb-tile"
+				style={tileStyle(block.width, block.height)}
+				aria-label={`Open larger: ${label}`}
+				onClick={() => {
+					setReduceMotion(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false);
+					setOpen(true);
+				}}
+			>
+				{clip ? (
+					<Clip src={src} alt={block.alt} poster={poster} inTile />
+				) : (
+					<img
+						src={src}
+						alt={block.alt ?? ""}
+						width={block.width}
+						height={block.height}
+						loading="lazy"
+						decoding="async"
+					/>
+				)}
+			</button>
+			{block.caption ? <figcaption className="pb-caption">{block.caption}</figcaption> : null}
+		</figure>
+	);
+}
+
+/** Runs of consecutive figures become one row of tiles; everything else stands alone. */
+function segments(blocks: ProseBlock[]) {
+	const out: Array<
+		{ figures: ProseBlock[]; start: number } | { block: ProseBlock; index: number }
+	> = [];
+	blocks.forEach((block, index) => {
+		const last = out[out.length - 1];
+		if (block.type === "figure") {
+			if (last && "figures" in last) last.figures.push(block);
+			else out.push({ figures: [block], start: index });
+		} else {
+			out.push({ block, index });
+		}
+	});
+	return out;
+}
+
 export interface ProseBlocksProps {
 	blocks: ProseBlock[];
 	/**
@@ -148,7 +272,18 @@ export function ProseBlocks({ blocks, headingLevel = "h2", className }: ProseBlo
 	const withBase = useWithBase();
 	return (
 		<div className={["prose-blocks", className].filter(Boolean).join(" ")}>
-			{blocks.map((block, i) => {
+			{segments(blocks).map((segment) => {
+				if ("figures" in segment) {
+					return (
+						<div className="pb-figures" key={`figures-${segment.start}`}>
+							{segment.figures.map((block, j) => (
+								// biome-ignore lint/suspicious/noArrayIndexKey: static prose; position plus file is the stable key (see above)
+								<Figure block={block} withBase={withBase} key={`figure-${j}-${block.src ?? ""}`} />
+							))}
+						</div>
+					);
+				}
+				const { block, index: i } = segment;
 				if (block.type === "h") {
 					const Tag = block.level ? (`h${block.level}` as const) : Heading;
 					return (
@@ -161,38 +296,6 @@ export function ProseBlocks({ blocks, headingLevel = "h2", className }: ProseBlo
 						</Tag>
 					);
 				}
-				if (block.type === "figure") {
-					const src = block.src ? withBase(block.src) : "";
-					const style = frameStyle(block.width, block.height);
-					return (
-						// biome-ignore lint/suspicious/noArrayIndexKey: static ported prose; position plus content is the stable key (see above)
-						<figure className="pb-figure" key={`figure-${i}-${src.slice(-24)}`}>
-							{!src ? (
-								<div className="ph">{block.alt ?? "Figure"}</div>
-							) : CLIP.test(src) ? (
-								<Clip
-									src={src}
-									alt={block.alt}
-									poster={block.poster ? withBase(block.poster) : undefined}
-									style={style}
-								/>
-							) : (
-								<img
-									src={src}
-									alt={block.alt ?? ""}
-									width={block.width}
-									height={block.height}
-									style={style}
-									loading="lazy"
-									decoding="async"
-								/>
-							)}
-							{block.caption ? (
-								<figcaption className="pb-caption">{block.caption}</figcaption>
-							) : null}
-						</figure>
-					);
-				}
 				if (block.type === "ul") {
 					return (
 						// biome-ignore lint/suspicious/noArrayIndexKey: static ported prose; position plus content is the stable key (see above)

package/src/sections/BlogIndex.tsx

@@ -1,4 +1,3 @@
-import { ArrowUpRight } from "lucide-react";
 import { displayDate } from "../lib/displayDate";
 import { useWithBase } from "../routing/BasePathProvider";
 
@@ -42,10 +41,7 @@ export function BlogIndex({ items, basePath = "/blog", id, className }: BlogInde
 									<time dateTime={item.publishedAt}>{displayDate(item.publishedAt)}</time>
 									{item.readingMinutes ? <span> · {item.readingMinutes} min read</span> : null}
 								</span>
-								<h2 className="bi-title">
-									{item.title}
-									<ArrowUpRight className="bi-arrow" size={20} strokeWidth={2} aria-hidden="true" />
-								</h2>
+								<h2 className="bi-title">{item.title}</h2>
 								{item.description && <p className="bi-excerpt">{item.description}</p>}
 							</a>
 						</li>

package/src/styles/primitives.css

@@ -204,13 +204,10 @@
 	}
 
 	/* ---- ProseBlocks (prose-blocks.css) ---- */
-	/* Body prose for ported documents: legal pages and blog posts. Measure is
-	   capped tighter than the marketing sections and the type steps down, because
-	   this is read continuously rather than scanned. Tokens only. */
-
-	.atelic-ui .prose-blocks {
-		max-width: 70ch;
-	}
+	/* Body prose for documents carried as data: legal pages and blog posts. It
+	   takes the width of the page it sits in, the site's own, rather than a
+	   measure of its own, so no page or site wears a column of its own size
+	   (2026-10-26). Tokens only. */
 
 	.atelic-ui .pb-heading {
 		margin: 40px 0 14px;
@@ -229,28 +226,137 @@
 		font-size: 1.02rem;
 	}
 
-	/* A figure in running prose: the image or the silent clip at the column's
-	   width, a rounded frame, and a caption in the body's quiet color. */
+	/* Figures in running prose sit as small tiles in a row, each at the row's
+	   height and its own shape, with the caption laid over its foot. A tile
+	   opens its file large in a dialog. A run of figures in the data is one
+	   row; the row wraps on a narrow screen. */
+	.atelic-ui .pb-figures {
+		--pb-tile-height: 240px;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px;
+		margin: 20px 0 28px;
+	}
+
+	@media (max-width: 600px) {
+		.atelic-ui .pb-figures {
+			--pb-tile-height: 190px;
+			gap: 8px;
+		}
+	}
+
 	.atelic-ui .pb-figure {
-		margin: 24px 0;
+		position: relative;
+		margin: 0;
+		height: var(--pb-tile-height);
+		min-width: 0;
+		max-width: 100%;
+	}
+
+	/* A placeholder keeps its own look and takes only the tile's shape. */
+	.atelic-ui .pb-figure .ph {
+		height: 100%;
+		max-width: 100%;
 	}
 
-	.atelic-ui .pb-figure img,
-	.atelic-ui .pb-figure video {
+	.atelic-ui .pb-tile {
+		display: block;
+		height: 100%;
+		max-width: 100%;
+		padding: 0;
+		border: 0;
+		border-radius: 12px;
+		overflow: hidden;
+		background: var(--surface-alt, var(--surface));
+		cursor: zoom-in;
+	}
+
+	.atelic-ui .pb-tile:focus-visible {
+		outline: 2px solid var(--primary);
+		outline-offset: 3px;
+	}
+
+	.atelic-ui .pb-tile img,
+	.atelic-ui .pb-tile video {
 		display: block;
 		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	/* The caption sits over the tile's foot on a shade, and lets a tap through. */
+	.atelic-ui .pb-figure .pb-caption {
+		position: absolute;
+		inset: auto 0 0;
+		margin: 0;
+		padding: 22px 10px 0;
+		border-bottom: 8px solid transparent;
+		border-radius: 0 0 12px 12px;
+		background: linear-gradient(to top, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0));
+		color: #fff;
+		font-size: 0.78rem;
+		font-weight: 600;
+		line-height: 1.3;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 3;
+		overflow: hidden;
+		pointer-events: none;
+	}
+
+	/* The panel fits what it shows, so a portrait clip is not adrift in a wide frame. */
+	.atelic-ui .pb-lightbox {
+		width: fit-content;
+		max-width: min(92vw, 1100px);
+		max-height: 92vh;
+		padding: 16px;
+		border: 0;
+		border-radius: 16px;
+		background: var(--surface);
+		color: var(--ink);
+	}
+
+	/* Page scroll holds still while the lightbox is open. */
+	html:has(dialog.pb-lightbox[open]) {
+		overflow: hidden;
+	}
+
+	.atelic-ui .pb-lightbox::backdrop {
+		background: rgb(0 0 0 / 0.72);
+	}
+
+	.atelic-ui .pb-lightbox img,
+	.atelic-ui .pb-lightbox video {
+		display: block;
+		max-width: 100%;
+		max-height: calc(92vh - 120px);
+		width: auto;
 		height: auto;
 		margin-inline: auto;
-		object-fit: cover;
-		border-radius: 14px;
-		background: var(--surface-alt, var(--surface));
+		border-radius: 10px;
+	}
+
+	.atelic-ui .pb-lightbox-close {
+		display: flex;
+		margin: 0 0 10px auto;
+		padding: 6px;
+		border: 0;
+		border-radius: 999px;
+		background: transparent;
+		color: var(--ink);
+		cursor: pointer;
+	}
+
+	.atelic-ui .pb-lightbox-close:focus-visible {
+		outline: 2px solid var(--primary);
+		outline-offset: 2px;
 	}
 
-	.atelic-ui .pb-caption {
-		margin-top: 10px;
+	.atelic-ui .pb-lightbox-caption {
+		margin: 10px 0 0;
+		text-align: center;
 		font-size: 0.9rem;
-		line-height: 1.5;
-		color: var(--neutral-600, var(--neutral-700));
+		color: var(--neutral-700);
 	}
 
 	.atelic-ui .pb-body {

package/src/styles/sections.css

@@ -13,7 +13,6 @@
 		margin: 0;
 		padding: 0;
 		list-style: none;
-		max-width: 760px;
 	}
 
 	.atelic-ui .bi-item {
@@ -42,42 +41,22 @@
 		color: var(--neutral-500);
 	}
 
+	/* A title fills the line before it wraps, where the base headings balance
+	   their lines; pretty still keeps a last word from standing alone. */
 	.atelic-ui .bi-title {
 		margin: 0 0 10px;
 		font-size: 1.4rem;
 		line-height: 1.25;
-	}
-
-	.atelic-ui .bi-arrow {
-		margin-left: 8px;
-		vertical-align: baseline;
-		opacity: 0;
-		transform: translate(-4px, 2px);
-		transition:
-			opacity 0.18s ease,
-			transform 0.18s ease;
-	}
-
-	.atelic-ui .bi-link:hover .bi-arrow,
-	.atelic-ui .bi-link:focus-visible .bi-arrow {
-		opacity: 1;
-		transform: translate(0, 2px);
+		text-wrap: pretty;
 	}
 
 	.atelic-ui .bi-excerpt {
 		margin: 0;
-		max-width: 62ch;
 		font-size: 0.98rem;
 		line-height: 1.65;
 		color: var(--neutral-700);
 	}
 
-	@media (prefers-reduced-motion: reduce) {
-		.atelic-ui .bi-arrow {
-			transition: none;
-		}
-	}
-
 	@media (max-width: 600px) {
 		.atelic-ui .bi-title {
 			font-size: 1.2rem;
@@ -88,8 +67,12 @@
 	/* A single article. The title is the content, so it sits in the flow rather
 	   than inside a hero band that would push the writing below the fold. */
 
-	.atelic-ui .bp-wrap {
-		max-width: 760px;
+	/* The article takes the site's own width, like every other page, so no
+	   page or site wears a column of its own size (Forni, 2026-10-26). The
+	   body steps up a size on a wide screen to suit the longer line. */
+	.atelic-ui .bp-body .pb-body,
+	.atelic-ui .bp-body .pb-list li {
+		font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
 	}
 
 	.atelic-ui .bp-back {
@@ -112,6 +95,7 @@
 		margin: 0 0 14px;
 		font-size: clamp(1.9rem, 4vw, 2.6rem);
 		line-height: 1.15;
+		text-wrap: pretty;
 	}
 
 	.atelic-ui .bp-meta {