@atelic-action/ui 0.7.1 → 0.8.0

package/src/components/ThresholdScale.tsx

@@ -0,0 +1,89 @@
+import type { Tone } from "./tone";
+
+export interface ThresholdZone {
+	label: string;
+	/** Where the zone ends, in the reading's unit; the last zone runs to `max`. */
+	upTo?: number;
+	tone: Tone;
+}
+
+export interface ThresholdReading {
+	label: string;
+	value: number;
+	/** The figure as printed, e.g. "5.9 s". */
+	display: string;
+	tone: Tone;
+}
+
+export interface ThresholdScaleProps {
+	/** The far end of the scale, in the reading's unit. */
+	max: number;
+	/** Zones in order, e.g. good, slow, poor. */
+	zones: ThresholdZone[];
+	/** The lines between zones, labeled, e.g. "2.5 s" at 2.5. */
+	ticks?: Array<{ at: number; label: string }>;
+	/** One line a reading, each a pin on the scale. */
+	readings: ThresholdReading[];
+	className?: string;
+}
+
+/**
+ * A scale with zones and one line a reading: where a number sits against
+ * the lines that decide good, slow, and poor.
+ */
+export function ThresholdScale({ max, zones, ticks, readings, className }: ThresholdScaleProps) {
+	let from = 0;
+	const sized = zones.map((zone) => {
+		const to = zone.upTo ?? max;
+		const width = ((to - from) / max) * 100;
+		from = to;
+		return { ...zone, width };
+	});
+	return (
+		<div className={["threshold-scale", className].filter(Boolean).join(" ")}>
+			{readings.map((reading) => (
+				<div className="threshold-scale-row" key={reading.label}>
+					<span className="threshold-scale-label">{reading.label}</span>
+					<span
+						className="threshold-scale-track"
+						role="img"
+						aria-label={`${reading.label}: ${reading.display}`}
+					>
+						{sized.map((zone) => (
+							<span
+								className="threshold-scale-zone"
+								key={zone.label}
+								data-tone={zone.tone}
+								style={{ width: `${zone.width}%` }}
+							/>
+						))}
+						<span
+							className="threshold-scale-pin"
+							data-tone={reading.tone}
+							style={{ left: `${Math.min(reading.value / max, 1) * 100}%` }}
+						/>
+					</span>
+					<b className="threshold-scale-value" data-tone={reading.tone}>
+						{reading.display}
+					</b>
+				</div>
+			))}
+			<div className="threshold-scale-row is-axis" aria-hidden="true">
+				<span className="threshold-scale-label" />
+				<span className="threshold-scale-axis">
+					{sized.map((zone) => (
+						<span key={zone.label} data-tone={zone.tone} style={{ width: `${zone.width}%` }}>
+							{zone.label}
+						</span>
+					))}
+					{ticks?.map((tick) => (
+						<i key={tick.label} style={{ left: `${(tick.at / max) * 100}%` }}>
+							{tick.label}
+						</i>
+					))}
+				</span>
+				<span className="threshold-scale-value" />
+			</div>
+		</div>
+	);
+}

package/src/components/index.ts

@@ -1 +1,34 @@
+export { Callout, type CalloutProps } from "./Callout";
+export { Checklist, type ChecklistItem, type ChecklistProps } from "./Checklist";
+export { Collapsible, type CollapsibleProps } from "./Collapsible";
+export {
+	ColumnChart,
+	type ColumnChartBar,
+	type ColumnChartGroup,
+	type ColumnChartProps,
+} from "./ColumnChart";
+export {
+	DataTable,
+	type DataTableCell,
+	type DataTableColumn,
+	type DataTableProps,
+	type DataTableRow,
+	type DataTableValueCell,
+	type SortDirection,
+} from "./DataTable";
 export { NotFound, type NotFoundProps } from "./NotFound";
+export { StackedBar, type StackedBarProps, type StackedBarSegment } from "./StackedBar";
+export {
+	type StatDelta,
+	type StatDirection,
+	type StatItem,
+	StatRow,
+	type StatRowProps,
+} from "./StatRow";
+export {
+	type ThresholdReading,
+	ThresholdScale,
+	type ThresholdScaleProps,
+	type ThresholdZone,
+} from "./ThresholdScale";
+export type { Tone } from "./tone";

package/src/components/tone.ts

@@ -0,0 +1,7 @@
+/**
+ * How a figure, a mark, or a bar reads: good, a warning, broken, plain
+ * information, or quiet. A component sets it as `data-tone`, and
+ * `styles/components.css` turns it into `--tone`, `--tone-fill`, and
+ * `--tone-bg` for whatever sits inside.
+ */
+export type Tone = "good" | "warn" | "bad" | "info" | "muted";

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

@@ -473,7 +473,7 @@ export type RecordTimelineStripProps = { timeline: RecordTimeline };
  * (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)));
@@ -486,26 +486,37 @@ export function RecordTimelineStrip({ timeline }: RecordTimelineStripProps) {
 		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",
-				height: "14px",
 				textAlign: "center",
-				borderBottom: `1px solid ${palette.line}`,
-				borderRight: `1.5px solid ${palette.ink}`,
 			}}
 		>
 			<tbody>
 				<tr>
-					{cells.map((cell) => (
+					{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
@@ -526,6 +537,18 @@ export function RecordTimelineStrip({ timeline }: RecordTimelineStripProps) {
 						</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>
 	);