@atelic-action/ui 0.7.0 → 0.7.2

package/README.md

@@ -162,7 +162,7 @@ Runner emails are mobile first. A layout that squashes on a phone is fixed here,
 
 `RecordStack` takes `records`, each a `RecordStackItem` (`title`, `url`, `meta`, `note`, `badge`, `callout`), and renders one table row per record: the title on its own line at 15px, bold and wrapping freely, linked when `url` is set; a mono meta line beneath it with the items joined by middle dots (empty items drop); an optional note beneath that; a hairline between records and none after the last. No cell carries a width, so a name of any length wraps at 320 pixels instead of squashing. An optional `badge` (a stage word such as `"Contacted"`) sits on the title line in a small mono uppercase pill on a `line` hairline, in its own right aligned unbroken cell, so the title keeps wrapping beside it and the badge stays on the title's first line. An optional `callout` (`{ eyebrow, text }`) sets a short task under the meta and the note in the accented `Note` idiom: the eyebrow in the accent, the text at 13px, and a 2px accent rule down its left edge. A record with neither renders exactly as it did before. `recordStackText(records)` is its plain text twin: each title on its own line under a two space indent with any badge after it in square brackets (`Blue Heron Plumbing [Contacted]`), the meta and the note wrapped under a four space indent, any callout as its eyebrow in upper case over its text under that same indent, a blank line between records, and no line past `textWidth` (68 columns, indent included).
 
-The Company Cards additions (0.7.0, from the `Company Cards IA` design, 2026-09-29) ride on the same item and change nothing for a record without them. `badges` is a list of further pills after `badge`, each with a `tone`: `faint` is the quiet stage word, `ink` a bold pill in ink on a 1.5px border (the next touch), `accent` the same in the accent (New). `timeline` (`{ days, touches, opens }`, each day count back from today) draws the record's recent days between the title and the meta line as one table cell per day, an 8px ink square on each send day and a 5px accent dot on each known open day, the two stacked when they share a day, all standing on a `line` hairline with a 1.5px ink tick at today's edge; nothing is positioned, so it survives Gmail. `RecordTimelineStrip` renders one on its own and `RecordTimelineLegend` names the marks once above a list. `aside` (`{ text, strong, tone }`) sets a fact right on the meta line with its number in bold and colored by tone: `up` fresh, `warm` cooling, `accent` cold. In the text twin every pill follows the title in brackets, the timeline is one character per day (`10d [#······@·o|]`: `#` a send, `o` an open, `@` both, `·` nothing, `|` today), and the aside ends the meta line; `recordTimelineText` and `recordBadges` are the helpers it uses.
+The Company Cards additions (0.7.0, from the `Company Cards IA` design, 2026-09-29) ride on the same item and change nothing for a record without them. `badges` is a list of further pills after `badge`, each with a `tone`: `faint` is the quiet stage word, `ink` a bold pill in ink on a 1.5px border (the next touch), `accent` the same in the accent (New). `timeline` (`{ days, touches, opens }`, each day count back from today) draws the record's recent days between the title and the meta line as one table cell per marked day and one per run of empty days between them (seven cells for three marks, never thirty, since Gmail clips a message past about 100 KB), an 8px ink square on each send day and a 5px accent dot on each known open day, the two stacked when they share a day, all standing on a `line` hairline with a 1.5px ink tick at today's edge and an axis row beneath (`30d` on the left, `today` on the right); nothing is positioned, so it survives Gmail. `RecordTimelineStrip` renders one on its own and `RecordTimelineLegend` names the marks once above a list. `aside` (`{ text, strong, tone }`) sets a fact right on the meta line with its number in bold and colored by tone: `up` fresh, `warm` cooling, `accent` cold. In the text twin every pill follows the title in brackets, the timeline is one character per day (`10d [#······@·o|]`: `#` a send, `o` an open, `@` both, `·` nothing, `|` today), and the aside ends the meta line; `recordTimelineText` and `recordBadges` are the helpers it uses.
 
 `StatStrip` lays its stats out as inline block cells with an 88 pixel floor inside one centered cell, so six or seven stats flow onto a second row on a phone rather than shrinking. Each stat takes an optional `delta` (`"+3 (12%)"`), set small under its label and colored by its sign: one that opens on `+` wears the palette's `up`, one that opens on `-` its `down`, and anything else stays muted.
 

package/package.json

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

package/src/email/atoms.tsx

@@ -14,10 +14,12 @@ export type EyebrowProps = {
 	text: string;
 	/** Reads as a heading on a phone: larger, bold, in ink rather than faint. */
 	strong?: boolean;
+	/** Something small set right on the same line: a legend, a count. */
+	aside?: ReactNode;
 };
 
 /** A section label between cards. */
-export function Eyebrow({ text, strong = false }: EyebrowProps) {
+export function Eyebrow({ text, strong = false, aside }: EyebrowProps) {
 	const { palette, fonts } = useEmailTheme();
 	const look = strong
 		? {
@@ -28,9 +30,31 @@ export function Eyebrow({ text, strong = false }: EyebrowProps) {
 				color: palette.ink,
 			}
 		: { ...eyebrowStyle(fonts), color: palette.faint };
+	if (aside === undefined || aside === null) {
+		return (
+			<tr>
+				<td style={{ padding: "36px 8px 12px", ...look }}>{text}</td>
+			</tr>
+		);
+	}
+	// With an aside (a legend, a count) the eyebrow keeps its cell and the
+	// aside sits right on the same line, bottom aligned to the text.
 	return (
 		<tr>
-			<td style={{ padding: "36px 8px 12px", ...look }}>{text}</td>
+			<td style={{ padding: "36px 8px 12px" }}>
+				<table {...tableReset} width="100%">
+					<tbody>
+						<tr>
+							<td valign="bottom" style={look}>
+								{text}
+							</td>
+							<td valign="bottom" align="right" style={{ textAlign: "right" }}>
+								{aside}
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</td>
 		</tr>
 	);
 }

package/src/email/scoreboard.tsx

@@ -441,7 +441,6 @@ function RecordBadge({ text, tone = "faint" }: RecordBadgeProps) {
 				border: tone === "faint" ? `1px solid ${palette.line}` : `1.5px solid ${color}`,
 				borderRadius: "3px",
 				color,
-				whiteSpace: "nowrap",
 			}}
 		>
 			{text}
@@ -467,61 +466,88 @@ export type RecordTimelineStripProps = { timeline: RecordTimeline };
  * A record's recent days on one line, today at the right edge: an ink square
  * on each day a send went out, an accent dot on each day an open is known,
  * the two stacked when they share a day, all standing on a hairline with a
- * tick for today. One table cell per day and nothing positioned, so it
- * survives every mail client (Company Cards IA, 2026-09-29).
+ * tick for today. One cell per marked day and one per run of empty days
+ * between them, so a record with three marks is seven cells rather than
+ * thirty: Gmail clips a message past about 100 KB and a stage list carries
+ * dozens of records. Nothing is positioned, so it survives every mail client
+ * (Company Cards IA, 2026-09-29).
  */
 export function RecordTimelineStrip({ timeline }: RecordTimelineStripProps) {
-	const { palette } = useEmailTheme();
+	const { palette, fonts } = useEmailTheme();
 	const days = Math.max(1, Math.round(timeline.days));
 	const touch = new Set(timeline.touches.map((d) => Math.round(d)));
 	const open = new Set(timeline.opens.map((d) => Math.round(d)));
-	const cells = Array.from({ length: days }, (_, i) => days - 1 - i);
+	const cells: { ago: number; span: number; sent: boolean; opened: boolean }[] = [];
+	for (let ago = days - 1; ago >= 0; ago -= 1) {
+		const sent = touch.has(ago);
+		const opened = open.has(ago);
+		const last = cells[cells.length - 1];
+		if (!sent && !opened && last && !last.sent && !last.opened) last.span += 1;
+		else cells.push({ ago, span: 1, sent, opened });
+	}
+	const unit = 100 / days;
+	// The axis under the strip: how far back it reaches on the left, today on
+	// the right (Forni, 2026-09-29, asking whether it was a thirty day strip).
+	const axisStyle: CSSProperties = {
+		fontFamily: fonts.mono,
+		fontSize: "9px",
+		lineHeight: "12px",
+		color: palette.faint,
+		paddingTop: "2px",
+	};
 	return (
-		<table {...tableReset} width="100%" style={{ marginTop: "8px" }}>
+		<table
+			{...tableReset}
+			width="100%"
+			style={{
+				marginTop: "8px",
+				textAlign: "center",
+			}}
+		>
 			<tbody>
 				<tr>
-					{cells.map((ago) => {
-						const sent = touch.has(ago);
-						const opened = open.has(ago);
-						return (
-							<td
-								key={ago}
-								width={`${100 / days}%`}
-								style={{
-									height: "16px",
-									verticalAlign: "bottom",
-									textAlign: "center",
-									borderBottom: `1px solid ${palette.line}`,
-									...(ago === 0 ? { borderRight: `1.5px solid ${palette.ink}` } : {}),
-								}}
-							>
-								{sent ? (
-									<div
-										style={{
-											width: "8px",
-											height: "8px",
-											margin: "0 auto",
-											background: palette.ink,
-										}}
-									/>
-								) : null}
-								{opened ? (
-									<div
-										style={{
-											width: "5px",
-											height: "5px",
-											margin: `${sent ? "2px" : "0"} auto 0`,
-											borderRadius: "50%",
-											background: palette.accent,
-										}}
-									/>
-								) : null}
-								{sent || opened ? null : (
-									<div style={{ height: "1px", fontSize: "1px", lineHeight: "1px" }}>&nbsp;</div>
-								)}
-							</td>
-						);
-					})}
+					{cells.map((cell, i) => (
+						<td
+							key={cell.ago}
+							valign="bottom"
+							colSpan={cell.span}
+							width={`${Math.round(unit * cell.span * 100) / 100}%`}
+							height="14"
+							style={{
+								borderBottom: `1px solid ${palette.line}`,
+								...(i === cells.length - 1 ? { borderRight: `1.5px solid ${palette.ink}` } : {}),
+							}}
+						>
+							{cell.sent ? (
+								<div
+									style={{ width: "8px", height: "8px", margin: "0 auto", background: palette.ink }}
+								/>
+							) : null}
+							{cell.opened ? (
+								<div
+									style={{
+										width: "5px",
+										height: "5px",
+										margin: `${cell.sent ? "2px" : "0"} auto 0`,
+										borderRadius: "50%",
+										background: palette.accent,
+									}}
+								/>
+							) : null}
+						</td>
+					))}
+				</tr>
+				<tr>
+					<td colSpan={Math.max(1, Math.ceil(days / 2))} align="left" style={axisStyle}>
+						{`${days}d`}
+					</td>
+					<td
+						colSpan={Math.max(1, Math.floor(days / 2))}
+						align="right"
+						style={{ ...axisStyle, textAlign: "right" }}
+					>
+						today
+					</td>
 				</tr>
 			</tbody>
 		</table>
@@ -624,25 +650,26 @@ export function RecordStack({ records }: RecordStackProps) {
 								}}
 							>
 								{badges.length > 0 ? (
-									<table {...tableReset} width="100%">
+									<table {...tableReset} width="100%" style={titleStyle}>
 										<tbody>
 											<tr>
-												<td style={{ ...titleStyle, verticalAlign: "top" }}>{title}</td>
+												<td valign="top">{title}</td>
 												<td
 													align="right"
+													valign="top"
 													style={{
 														textAlign: "right",
 														whiteSpace: "nowrap",
-														verticalAlign: "top",
 														paddingLeft: "12px",
 														paddingTop: "2px",
 													}}
 												>
 													{badges.map((badge, j) => (
 														// biome-ignore lint/suspicious/noArrayIndexKey: a pill's position is its identity
-														<span key={j} style={{ marginLeft: j === 0 ? "0" : "4px" }}>
+														<Fragment key={j}>
+															{j === 0 ? null : " "}
 															<RecordBadge text={badge.text} tone={badge.tone} />
-														</span>
+														</Fragment>
 													))}
 												</td>
 											</tr>
@@ -654,19 +681,11 @@ export function RecordStack({ records }: RecordStackProps) {
 								{record.timeline ? <RecordTimelineStrip timeline={record.timeline} /> : null}
 								{meta.length > 0 || aside ? (
 									aside ? (
-										<table {...tableReset} width="100%" style={{ marginTop: "4px" }}>
+										<table {...tableReset} width="100%" style={{ ...metaStyle, marginTop: "4px" }}>
 											<tbody>
 												<tr>
-													<td style={metaStyle}>{meta.join(" · ")}</td>
-													<td
-														align="right"
-														style={{
-															...metaStyle,
-															textAlign: "right",
-															whiteSpace: "nowrap",
-															paddingLeft: "12px",
-														}}
-													>
+													<td>{meta.join(" · ")}</td>
+													<td align="right" style={{ whiteSpace: "nowrap", paddingLeft: "12px" }}>
 														{aside}
 													</td>
 												</tr>