@atelic-action/ui 0.6.1 → 0.7.0

package/README.md

@@ -162,6 +162,8 @@ 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.
+
 `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.
 
 `Masthead` takes an optional `meta` (`"Week 39 · 09/21 to 09/27"`) set in the eyebrow style at the right end of the row, so the title card no longer carries the week. It is a right aligned, unbroken block floated after the wordmark and title: on the same line while the row has room, and dropped under the title on its own line, still right aligned, when it does not (checked at 320 pixels). `Eyebrow` takes `strong`, which sets the label at 15px and weight 700 in ink rather than faint, with a slightly tighter tracking, so a section such as `MQL · 15` reads as a heading on a phone.
@@ -227,7 +229,7 @@ Where the jq takes a pre rendered html string (`$rows`, `$body_html`, `$cells_ht
 | `badge` | `Badge` | `letter` |
 | `day_strip` | `DayStrip` | `days`, `last` |
 | `stat_strip` | `StatStrip` | `stats`, each with an optional `delta` colored by its sign (the component wraps where the jq does not) |
-| none | `RecordStack` | `records`, each with an optional `badge` and `callout` (born here on 2026-09-24, with no jq counterpart) |
+| none | `RecordStack` | `records`, each with an optional `badge`, `callout`, and since 0.7.0 `badges`, `timeline` and `aside` (born here on 2026-09-24, with no jq counterpart) |
 | `records` | `Records` | `columns`, `rows`; a cell's `html` is a `ReactNode` |
 | `masthead` | `Masthead` | `title`, `wordmark` (defaults to `atelic`), `meta` (added 0.5.0, no jq counterpart) |
 | `title_card` | `TitleCard` | `eyebrowText`, `headlineLines`, `lede`, `stats` (the rows under the lede, in place of the jq's `$stats_html`) |
@@ -243,7 +245,7 @@ The plain text alternative part ports as plain functions with no React anywhere
 
 `@atelic-action/ui/tokens` carries the palette and the font stacks with no React import, so a build script or a plain text renderer can read them. `toThemeCSS(palette)` writes the palette out as the site token declarations (`--surface`, `--surface-dark`, `--card`, `--ink`, `--primary`), and `themeTokenMap` exposes which palette key each token takes.
 
-The palette carries two optional keys beyond the jq's eight: `up` (`#2F7A4B`, a calm green) and `down` (`#B23A2E`, a calm red, kept well apart from the orange accent), the colors a `StatStrip` delta wears by its sign. Both read on the cream card. They are optional so a client palette written before 0.5.0 still compiles, and a palette without them borrows the Atelic values. Neither maps to a site token.
+The palette carries three optional keys beyond the jq's eight: `up` (`#2F7A4B`, a calm green) and `down` (`#B23A2E`, a calm red, kept well apart from the orange accent), the colors a `StatStrip` delta wears by its sign, and `warm` (`#B7791F`, an amber between `up` and the accent) for a record's aside that is cooling but not cold. All three read on the cream card. They are optional so a client palette written before 0.5.0 still compiles, and a palette without them borrows the Atelic values. None maps to a site token.
 
 ## Releasing
 

package/package.json

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

package/src/email/index.ts

@@ -62,6 +62,10 @@ export {
 	type RecordsCell,
 	type RecordsColumn,
 	type RecordsProps,
+	RecordTimelineLegend,
+	type RecordTimelineLegendProps,
+	RecordTimelineStrip,
+	type RecordTimelineStripProps,
 	Scoreboard,
 	type ScoreboardProps,
 	StatStrip,
@@ -79,8 +83,15 @@ export {
 	asciiDowncase,
 	asciiUpcase,
 	lpad,
+	type RecordAside,
+	type RecordAsideTone,
+	type RecordBadge,
+	type RecordBadgeTone,
 	type RecordStackItem,
+	type RecordTimeline,
+	recordBadges,
 	recordStackText,
+	recordTimelineText,
 	rpad,
 	spaces,
 	type TextTarget,

package/src/email/scoreboard.tsx

@@ -1,6 +1,12 @@
 import { type CSSProperties, Fragment, type ReactNode } from "react";
 import { atelicPalette, type Palette } from "../tokens";
-import type { RecordStackItem } from "./text";
+import {
+	type RecordAsideTone,
+	type RecordBadgeTone,
+	type RecordStackItem,
+	type RecordTimeline,
+	recordBadges,
+} from "./text";
 import { eyebrowStyle, tableReset, useEmailTheme } from "./theme";
 
 /*
@@ -410,14 +416,17 @@ export function StatStrip({ stats }: StatStripProps) {
 	);
 }
 
-type RecordBadgeProps = { text: string };
+type RecordBadgeProps = { text: string; tone?: RecordBadgeTone };
 
 /**
- * A word in a small mono pill on a hairline, the Badge idiom sized for a stage
- * such as "Contacted". Only RecordStack wears it.
+ * The pill on a record's title line. Faint is the stage word as it always
+ * was, dim text in a hairline box; ink and accent are the Company Cards
+ * pills (2026-09-29), bold, drawn in their own color on a heavier border:
+ * the next touch in ink, New in the accent.
  */
-function RecordBadge({ text }: RecordBadgeProps) {
+function RecordBadge({ text, tone = "faint" }: RecordBadgeProps) {
 	const { palette, fonts } = useEmailTheme();
+	const color = tone === "ink" ? palette.ink : tone === "accent" ? palette.accent : palette.dim;
 	return (
 		<span
 			style={{
@@ -427,10 +436,11 @@ function RecordBadge({ text }: RecordBadgeProps) {
 				lineHeight: "14px",
 				letterSpacing: "0.08em",
 				textTransform: "uppercase",
+				fontWeight: tone === "faint" ? "normal" : "bold",
 				padding: "0 6px",
-				border: `1px solid ${palette.line}`,
+				border: tone === "faint" ? `1px solid ${palette.line}` : `1.5px solid ${color}`,
 				borderRadius: "3px",
-				color: palette.dim,
+				color,
 				whiteSpace: "nowrap",
 			}}
 		>
@@ -440,13 +450,119 @@ function RecordBadge({ text }: RecordBadgeProps) {
 }
 
 export type { RecordStackItem };
+
+/** The default for a palette written before `warm` existed: the cooling tone between `up` and the accent. */
+const WARM = "#B7791F";
+
+function asideColor(tone: RecordAsideTone | undefined, palette: Palette): string {
+	if (tone === "up") return palette.up ?? atelicPalette.up ?? palette.ink;
+	if (tone === "warm") return palette.warm ?? WARM;
+	if (tone === "accent") return palette.accent;
+	return palette.faint;
+}
+
+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).
+ */
+export function RecordTimelineStrip({ timeline }: RecordTimelineStripProps) {
+	const { palette } = 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);
+	return (
+		<table {...tableReset} width="100%" style={{ marginTop: "8px" }}>
+			<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>
+						);
+					})}
+				</tr>
+			</tbody>
+		</table>
+	);
+}
+
+export type RecordTimelineLegendProps = { days: number };
+
+/** What the marks on a timeline are, once above a list of records: the square, the dot, and the span. */
+export function RecordTimelineLegend({ days }: RecordTimelineLegendProps) {
+	const { palette, fonts } = useEmailTheme();
+	const mark = (style: CSSProperties) => (
+		<span
+			style={{ display: "inline-block", verticalAlign: "middle", marginRight: "5px", ...style }}
+		/>
+	);
+	return (
+		<div
+			style={{ fontFamily: fonts.mono, fontSize: "11px", lineHeight: "16px", color: palette.faint }}
+		>
+			{mark({ width: "8px", height: "8px", background: palette.ink })}
+			touch
+			<span style={{ display: "inline-block", width: "14px" }} />
+			{mark({ width: "5px", height: "5px", borderRadius: "50%", background: palette.accent })}
+			open
+			<span style={{ display: "inline-block", width: "14px" }} />
+			{`${days} days to today`}
+		</div>
+	);
+}
+
 export type RecordStackProps = { records: RecordStackItem[] };
 
 /**
- * One record per row, stacked: the title on its own line, a mono meta line
- * under it, an optional note under that. No column cells and no fixed widths,
- * so a name of any length wraps instead of squashing on a phone. A fixed
- * column table is for numbers alone; names go here.
+ * One record per row, stacked: the title on its own line with its pills
+ * beside it, an optional timeline, a mono meta line with an optional aside
+ * set right, an optional note under that, an optional callout last. No
+ * column cells and no fixed widths, so a name of any length wraps instead of
+ * squashing on a phone. A fixed column table is for numbers alone; names go
+ * here. The pills, the timeline and the aside are the Company Cards IA
+ * (2026-09-29); a record without them renders as it always did.
  */
 export function RecordStack({ records }: RecordStackProps) {
 	const { palette, fonts } = useEmailTheme();
@@ -457,12 +573,19 @@ export function RecordStack({ records }: RecordStackProps) {
 		color: palette.ink,
 		wordBreak: "break-word",
 	};
+	const metaStyle: CSSProperties = {
+		fontFamily: fonts.mono,
+		fontSize: "12px",
+		lineHeight: "1.5",
+		color: palette.faint,
+	};
 	return (
 		<table {...tableReset} width="100%" style={{ fontFamily: fonts.sans, color: palette.ink }}>
 			<tbody>
 				{records.map((record, i) => {
 					const last = i === records.length - 1;
 					const meta = record.meta.filter((m) => m !== "");
+					const badges = recordBadges(record);
 					const title = record.url ? (
 						<a
 							href={record.url}
@@ -477,6 +600,19 @@ export function RecordStack({ records }: RecordStackProps) {
 					) : (
 						record.title
 					);
+					const aside = record.aside ? (
+						<>
+							{record.aside.text}
+							{record.aside.strong ? (
+								<>
+									{" "}
+									<b style={{ color: asideColor(record.aside.tone, palette) }}>
+										{record.aside.strong}
+									</b>
+								</>
+							) : null}
+						</>
+					) : null;
 					return (
 						// biome-ignore lint/suspicious/noArrayIndexKey: a record's position is its identity
 						<tr key={i}>
@@ -487,7 +623,7 @@ export function RecordStack({ records }: RecordStackProps) {
 									...(last ? {} : { borderBottom: `1px solid ${palette.line}` }),
 								}}
 							>
-								{record.badge ? (
+								{badges.length > 0 ? (
 									<table {...tableReset} width="100%">
 										<tbody>
 											<tr>
@@ -502,7 +638,12 @@ export function RecordStack({ records }: RecordStackProps) {
 														paddingTop: "2px",
 													}}
 												>
-													<RecordBadge text={record.badge} />
+													{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" }}>
+															<RecordBadge text={badge.text} tone={badge.tone} />
+														</span>
+													))}
 												</td>
 											</tr>
 										</tbody>
@@ -510,18 +651,30 @@ export function RecordStack({ records }: RecordStackProps) {
 								) : (
 									<div style={titleStyle}>{title}</div>
 								)}
-								{meta.length > 0 ? (
-									<div
-										style={{
-											fontFamily: fonts.mono,
-											fontSize: "12px",
-											lineHeight: "1.5",
-											color: palette.faint,
-											marginTop: "4px",
-										}}
-									>
-										{meta.join(" · ")}
-									</div>
+								{record.timeline ? <RecordTimelineStrip timeline={record.timeline} /> : null}
+								{meta.length > 0 || aside ? (
+									aside ? (
+										<table {...tableReset} width="100%" style={{ marginTop: "4px" }}>
+											<tbody>
+												<tr>
+													<td style={metaStyle}>{meta.join(" · ")}</td>
+													<td
+														align="right"
+														style={{
+															...metaStyle,
+															textAlign: "right",
+															whiteSpace: "nowrap",
+															paddingLeft: "12px",
+														}}
+													>
+														{aside}
+													</td>
+												</tr>
+											</tbody>
+										</table>
+									) : (
+										<div style={{ ...metaStyle, marginTop: "4px" }}>{meta.join(" · ")}</div>
+									)
 								) : null}
 								{record.note ? (
 									<div

package/src/email/text.ts

@@ -124,6 +124,28 @@ export function textTable(cols: string[], rows: string[][], right: number[]): st
 	return textTableGrid(cols, rows, right, null);
 }
 
+/** A pill on a record's title line: faint is the quiet stage word, ink and accent are the Company Cards tones. */
+export type RecordBadgeTone = "faint" | "ink" | "accent";
+export type RecordBadge = { text: string; tone?: RecordBadgeTone };
+
+/**
+ * A record's last `days` days on one line, today at the right edge: each
+ * send as a day count back from today, and each known open the same way.
+ * The html draws squares and dots on a baseline; the text twin draws one
+ * character per day.
+ */
+export type RecordTimeline = {
+	days: number;
+	touches: number[];
+	opens: number[];
+};
+
+/** The color a record's aside number wears: `up` is fresh, `warm` is cooling, `accent` is cold. */
+export type RecordAsideTone = "up" | "warm" | "accent";
+
+/** A fact set right on the meta line, its number in a tone: "opened" and "6d". */
+export type RecordAside = { text: string; strong?: string; tone?: RecordAsideTone };
+
 /**
  * One record in a stack: what `RecordStack` renders and `recordStackText`
  * writes. It lives here, with no React, so a plain text renderer can import it.
@@ -137,14 +159,44 @@ export type RecordStackItem = {
 	note?: string;
 	/** A stage word on the title line, right aligned in a pill; "[Contacted]" in the text twin. */
 	badge?: string;
+	/** More pills after `badge`, each in its tone: New in the accent, the next touch in ink, Wait faint (Company Cards, 2026-09-29). */
+	badges?: RecordBadge[];
+	/** The record's recent days, drawn between the title and the meta line. */
+	timeline?: RecordTimeline;
+	/** A fact set right on the meta line, its number colored by its tone. */
+	aside?: RecordAside;
 	/** A short task under the record, an orange eyebrow over a line of text. */
 	callout?: { eyebrow: string; text: string };
 };
 
+/** Every pill on a record's title line, the quiet stage word first. */
+export function recordBadges(record: RecordStackItem): RecordBadge[] {
+	const badges: RecordBadge[] = record.badge ? [{ text: record.badge, tone: "faint" }] : [];
+	return [...badges, ...(record.badges ?? [])];
+}
+
+/**
+ * The timeline as one character per day, oldest on the left and today on the
+ * right: `#` a send, `o` an open, `@` both on one day, `·` nothing, then `|`
+ * for today's edge. "30d [#····o··@···|]" reads the same way the drawn one does.
+ */
+export function recordTimelineText(timeline: RecordTimeline): string {
+	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)));
+	let strip = "";
+	for (let ago = days - 1; ago >= 0; ago -= 1) {
+		strip +=
+			touch.has(ago) && open.has(ago) ? "@" : touch.has(ago) ? "#" : open.has(ago) ? "o" : "·";
+	}
+	return `${days}d [${strip}|]`;
+}
+
 /**
  * The plain text twin of `RecordStack`: each title on its own line under a
- * two space indent with any badge after it in square brackets, the meta joined
- * by middle dots and the note beneath it, both wrapped under a four space
+ * two space indent with every badge after it in square brackets, the
+ * timeline as a character strip, the meta joined by middle dots with the
+ * aside at its end and the note beneath it, all wrapped under a four space
  * indent, then any callout as its eyebrow in upper case over its text under
  * the same indent, a blank line between records. No line runs past
  * `textWidth`.
@@ -152,9 +204,14 @@ export type RecordStackItem = {
 export function recordStackText(records: RecordStackItem[]): string {
 	return records
 		.map((record) => {
-			const title = record.badge ? `${record.title} [${record.badge}]` : record.title;
-			const lines = [wrapIndented(title, 2)];
+			const badges = recordBadges(record)
+				.map((b) => ` [${b.text}]`)
+				.join("");
+			const lines = [wrapIndented(`${record.title}${badges}`, 2)];
+			if (record.timeline) lines.push(wrapIndented(recordTimelineText(record.timeline), 4));
 			const meta = record.meta.filter((m) => m !== "");
+			if (record.aside)
+				meta.push([record.aside.text, record.aside.strong ?? ""].filter((x) => x !== "").join(" "));
 			if (meta.length > 0) lines.push(wrapIndented(meta.join(" · "), 4));
 			if (record.note) lines.push(wrapIndented(record.note, 4));
 			if (record.callout) {

package/src/tokens/palettes.ts

@@ -32,6 +32,11 @@ export type Palette = {
 	up?: string;
 	/** A change for the worse, the negative delta's color. Optional the same way. */
 	down?: string;
+	/**
+	 * The cooling tone between `up` and the accent: a record opened inside two
+	 * weeks but not one (Company Cards, 0.7.0). Optional the same way.
+	 */
+	warm?: string;
 };
 
 export const atelicPalette: Palette = {
@@ -45,6 +50,7 @@ export const atelicPalette: Palette = {
 	hair: "#F0EAE0",
 	up: "#2F7A4B",
 	down: "#B23A2E",
+	warm: "#B7791F",
 };
 
 /**