@heyramzi/ui 1.54.1 → 2.0.0

package/src/tasks/kanban-drag.ts

@@ -0,0 +1,38 @@
+const FRAME_PAD = 16;
+
+/**
+ * Native drag shows a flat, faded snapshot. This hands the browser a tilted
+ * copy with a lifted shadow instead. Call it from `ondragstart`.
+ */
+export function liftDragImage(e: DragEvent, tilt = -3): void {
+  const source = e.currentTarget as HTMLElement | null;
+  if (!source || !e.dataTransfer) return;
+  const rect = source.getBoundingClientRect();
+
+  // The padded frame leaves room for the tilt and shadow, or the snapshot crops them.
+  const frame = document.createElement("div");
+  Object.assign(frame.style, {
+    position: "fixed",
+    top: "-10000px",
+    left: "-10000px",
+    padding: `${FRAME_PAD}px`,
+    pointerEvents: "none",
+  });
+
+  const ghost = source.cloneNode(true) as HTMLElement;
+  Object.assign(ghost.style, {
+    width: `${rect.width}px`,
+    opacity: "1",
+    rotate: `${tilt}deg`,
+    filter:
+      "drop-shadow(0 2px 4px rgb(35 35 35 / 0.08)) drop-shadow(0 10px 18px rgb(35 35 35 / 0.14))",
+  });
+  frame.appendChild(ghost);
+  document.body.appendChild(frame);
+  e.dataTransfer.setDragImage(
+    frame,
+    e.clientX - rect.left + FRAME_PAD,
+    e.clientY - rect.top + FRAME_PAD,
+  );
+  setTimeout(() => frame.remove());
+}

package/src/tasks/kanban-types.ts

@@ -0,0 +1,65 @@
+import type { Snippet } from "svelte";
+
+/** A column the board renders. `id` is the value `getColumn` returns for a card. */
+export type KanbanColumn = {
+  id: string;
+  label: string;
+  /** Any CSS color. Shown as a tint on the column while a card is held over it. */
+  hue?: string;
+  /** Screen-reader label for the column region. Defaults to `label`. */
+  ariaLabel?: string;
+  /**
+   * Set false to make the column a display-only lane: cards there cannot be
+   * dragged over or dropped onto (e.g. an Overdue lane). Defaults to true.
+   */
+  droppable?: boolean;
+};
+
+/** What the board asks the caller to persist after a drop. */
+export type KanbanMove = {
+  columnId: string;
+  /**
+   * Only set when the active sort is manual: a fractional key that places the
+   * card in its new slot. Ignore it when you persist order some other way.
+   */
+  boardOrder?: string;
+  /**
+   * The cards that sit above and below the drop slot once the dragged card is
+   * set aside. Set on manual drops only, null at an end. For a backend that
+   * orders by neighbour instead of by key.
+   */
+  beforeId?: string | null;
+  afterId?: string | null;
+};
+
+/** A named sort the board can apply instead of manual (`boardOrder`) ordering. */
+export type KanbanSortKey<T> = {
+  id: string;
+  label: string;
+  compare: (a: T, b: T) => number;
+};
+
+/** Second argument handed to the card snippet. */
+export type KanbanCardContext = {
+  columnId: string;
+  index: number;
+};
+
+/** Second argument handed to the column header and footer snippets. */
+export type KanbanColumnContext = {
+  /** Every card in the column, including the ones a `limit` keeps out of view. */
+  count: number;
+  /** A card is held over the column. */
+  active: boolean;
+  /** How many cards render. Fewer than `count` while the column is capped. */
+  shown: number;
+  /** The column's `limit` is hiding its tail. */
+  capped: boolean;
+  /** Fold the column into the hidden rail. Needs `hidden` or `onHiddenChange` on the board. */
+  hide: () => void;
+  /** Lift the `limit` so every card shows. */
+  expand: () => void;
+};
+
+/** The default header renderer when no `columnHeader` snippet is given. */
+export type KanbanCardSnippet<T> = Snippet<[T, KanbanCardContext]>;

package/src/tasks/presets/sales.ts

@@ -0,0 +1,16 @@
+import { defineStatuses } from "../define-statuses.js";
+
+/**
+ * An example status map for a sales pipeline. Names are neutral on purpose:
+ * swap the keys and labels for your own domain.
+ */
+export const salesStatuses = defineStatuses({
+	new: { label: "New", tone: "accent", variant: "open" },
+	contacted: { label: "Contacted", tone: "info", variant: "open" },
+	proposal: { label: "Proposal", tone: "accent", variant: "progress", progress: 0.25 },
+	negotiation: { label: "Negotiation", tone: "warning", variant: "progress", progress: 0.75 },
+	won: { label: "Won", tone: "success", variant: "completed" },
+	lost: { label: "Lost", tone: "destructive", variant: "lost" },
+});
+
+export type SalesStatus = (typeof salesStatuses.ids)[number];

package/src/tasks/record/demo-data.ts

@@ -0,0 +1,286 @@
+// Fake data for the demo and the screenshots. Every name here is invented.
+import type {
+	FieldDef,
+	FieldSectionDef,
+	FieldValue,
+	RecordEvent,
+	RecordSummary,
+	StageDef,
+	StepDef,
+	StepGroupDef,
+} from "./types.js";
+
+/** The demo's clock, so a screenshot reads the same on any day. */
+export const DEMO_NOW = new Date("2026-10-21T12:00:00Z");
+export const DEMO_TODAY = "2026-10-21";
+
+export const stages: StageDef[] = [
+	{ key: "lead", label: "Lead", tone: "neutral", category: "open" },
+	{ key: "sent", label: "Proposal sent", tone: "info", category: "proposal" },
+	{ key: "build", label: "In build", tone: "accent", category: "ongoing" },
+	{ key: "paid", label: "Paid", tone: "success", category: "completed" },
+	{ key: "lost", label: "Lost", tone: "destructive", category: "lost" },
+];
+
+export const stepGroups: StepGroupDef[] = [
+	{ key: "sales", label: "Sales" },
+	{ key: "delivery", label: "Delivery" },
+];
+
+export const websiteSteps: StepDef[] = [
+	{ id: "s1", label: "Discovery call", done: true, group: "sales", start: "2026-10-03" },
+	{ id: "s2", label: "Proposal", done: false, group: "sales", start: "2026-10-21" },
+	{ id: "s3", label: "Kickoff", done: false, group: "delivery", start: "2026-10-26" },
+	{ id: "s4", label: "Design review", done: false, group: "delivery", start: "2026-11-10" },
+	{ id: "s5", label: "Build", done: false, group: "delivery", start: "2026-11-12", end: "2026-12-04" },
+	{ id: "s6", label: "Cutover", done: false, group: "delivery", start: "2026-12-12", end: "2026-12-13" },
+	{ id: "s7", label: "Training", done: false, group: "delivery", hidden: true },
+];
+
+export const projectSections: FieldSectionDef[] = [
+	{ key: "scope", label: "Scope" },
+	{ key: "loss", label: "Loss" },
+];
+
+export const projectFields: FieldDef[] = [
+	{
+		key: "type",
+		label: "Type",
+		type: "choice",
+		section: "scope",
+		options: [
+			{ key: "strategy", label: "Strategy" },
+			{ key: "implementation", label: "Implementation" },
+		],
+	},
+	{ key: "budget", label: "Budget", type: "money", section: "scope" },
+	{
+		key: "urgency",
+		label: "Urgency",
+		type: "choice",
+		section: "scope",
+		options: [
+			{ key: "low", label: "Low", tone: "neutral" },
+			{ key: "high", label: "High", tone: "warning" },
+		],
+	},
+	{ key: "goLive", label: "Go live", type: "date", section: "scope" },
+	{ key: "context", label: "Context", type: "longtext", section: "scope" },
+	{
+		key: "reason",
+		label: "Reason",
+		type: "choice",
+		section: "loss",
+		showWhen: { key: "lossReasonOn", equals: "yes" },
+		options: [{ key: "price", label: "Price" }],
+	},
+];
+
+export const clientSections: FieldSectionDef[] = [{ key: "about", label: "About" }];
+
+export const clientFields: FieldDef[] = [
+	{ key: "business", label: "Business", type: "longtext", section: "about" },
+	{
+		key: "size",
+		label: "Size",
+		type: "choice",
+		section: "about",
+		options: [
+			{ key: "1-10", label: "1 to 10" },
+			{ key: "11-50", label: "11 to 50" },
+			{ key: "51+", label: "51 or more" },
+		],
+	},
+	{
+		key: "sector",
+		label: "Sector",
+		type: "choice",
+		section: "about",
+		options: ["Dental", "Legal", "Retail", "Logistics", "Education", "Finance", "Health", "Hospitality", "Media"].map(
+			(label) => ({ key: label.toLowerCase(), label }),
+		),
+	},
+	{
+		key: "needs",
+		label: "Needs",
+		type: "multi",
+		section: "about",
+		options: [
+			{ key: "site", label: "Website" },
+			{ key: "booking", label: "Booking" },
+			{ key: "crm", label: "CRM" },
+			{ key: "old", label: "Print", archived: true },
+		],
+	},
+	{ key: "site", label: "Website", type: "url", section: "about" },
+	{ key: "email", label: "Email", type: "email", section: "about" },
+	{ key: "tz", label: "Time zone", type: "timezone", section: "about" },
+];
+
+export const websiteValues: Record<string, FieldValue> = {
+	type: "implementation",
+	budget: 12000,
+	urgency: "high",
+	goLive: "2026-12-14",
+	context: "Replace the brochure site. Booking stays on the old tool until spring.",
+};
+
+export const clientValues: Record<string, FieldValue> = {
+	business: "A dental group in Lyon with 3 clinics and a shared front desk.",
+	size: "11-50",
+	sector: "dental",
+	needs: ["site", "booking", "old"],
+	site: "https://marlowfinch.example",
+	email: "jane@marlowfinch.example",
+	tz: "Europe/Paris",
+};
+
+const note = (id: string, at: string, title: string, body?: string): RecordEvent => ({
+	id,
+	kind: "note",
+	occurredAt: at,
+	title,
+	body,
+	actor: "Ramzi",
+});
+
+export const websiteEvents: RecordEvent[] = [
+	{
+		id: "w1",
+		kind: "status",
+		occurredAt: "2026-10-18T09:30:00Z",
+		title: "Sent SOW v2, legal is reviewing",
+		body: "The payment terms have 2 redlines. Sofia answers Monday and asks for the signature by the 26th, so the kickoff holds.",
+		actor: "Sofia",
+	},
+	{
+		id: "w2",
+		kind: "call",
+		occurredAt: "2026-10-21T08:15:00Z",
+		title: "Scoping review",
+		body: "45 minutes with Jane and the clinic manager. Booking stays out of scope. They want the new site to carry the clinic pages and nothing else.",
+		details: [
+			{ label: "Length", value: "45 min" },
+			{ label: "With", value: "Jane Roe, Tom Bell" },
+		],
+		href: "#call-scoping",
+	},
+	{
+		id: "w3",
+		kind: "stage",
+		occurredAt: "2026-10-12T14:00:00Z",
+		title: "Stage set to Proposal sent",
+		actor: "Sofia",
+	},
+	note("w4", "2026-10-09T16:40:00Z", "Their fear is another agency that vanishes", "Said it twice. Lead the proposal with who answers the phone."),
+	{
+		id: "w5",
+		kind: "invoice.sent",
+		occurredAt: "2026-10-06T10:00:00Z",
+		title: "Deposit invoice",
+		amount: 3600,
+		currency: "EUR",
+	},
+	{
+		id: "w6",
+		kind: "call",
+		occurredAt: "2026-10-03T13:00:00Z",
+		title: "Discovery call",
+		body: "Jane runs 3 clinics and the site is 4 years old.",
+	},
+	{ id: "w7", kind: "milestone.done", occurredAt: "2026-10-03T15:00:00Z", title: "Discovery call done" },
+	...Array.from({ length: 34 }, (_, i): RecordEvent => ({
+		id: `old${i}`,
+		kind: i % 3 === 0 ? "email" : "note",
+		occurredAt: new Date(Date.UTC(2026, 8, 28 - i, 9, 0)).toISOString(),
+		title: i % 3 === 0 ? "Re: clinic pages" : "Warm intro follow-up",
+		actor: "Ramzi",
+	})),
+];
+
+export const website: RecordSummary = {
+	id: "p-web",
+	name: "Website rebuild",
+	href: "#project-web",
+	stageKey: "sent",
+	value: 12000,
+	currency: "EUR",
+	startDate: "2026-11-01",
+	endDate: "2026-12-15",
+	whereWeAre: {
+		text: "Sent SOW v2, legal is reviewing. The payment terms have 2 redlines, Sofia answers Monday and asks for the signature by the 26th, so the kickoff holds.",
+		at: "2026-10-18T09:30:00Z",
+		actor: "Sofia",
+		health: { label: "Waiting", tone: "warning" },
+	},
+	next: { label: "Kickoff call", date: "2026-10-26", owner: "Ramzi" },
+	lastCallAt: "2026-10-21T08:15:00Z",
+	lastTouchAt: "2026-10-21T08:15:00Z",
+	progress: { done: 1, total: 6 },
+};
+
+export const audit: RecordSummary = {
+	id: "p-audit",
+	name: "Brand audit",
+	href: "#project-audit",
+	stageKey: "lost",
+	stageDetail: "Price",
+	value: 4500,
+	currency: "EUR",
+	whereWeAre: { text: "They went with a freelancer at half the fee.", at: "2026-06-11T10:00:00Z", actor: "Sofia" },
+	lastCallAt: "2026-06-04T10:00:00Z",
+	lastTouchAt: "2026-06-11T10:00:00Z",
+	progress: { done: 1, total: 3 },
+};
+
+export const portal: RecordSummary = {
+	id: "p-portal",
+	name: "Booking portal",
+	href: "#project-portal",
+	stageKey: "paid",
+	value: 18000,
+	paid: 18000,
+	currency: "EUR",
+	whereWeAre: { text: "Live since March. Final invoice paid.", at: "2026-04-02T10:00:00Z", actor: "Ramzi" },
+	lastCallAt: "2026-03-20T10:00:00Z",
+	lastTouchAt: "2026-04-02T10:00:00Z",
+	progress: { done: 5, total: 5 },
+};
+
+export const auditEvents: RecordEvent[] = [
+	{
+		id: "a1",
+		kind: "stage",
+		occurredAt: "2026-06-11T10:00:00Z",
+		title: "Stage set to Lost",
+		actor: "Sofia",
+		details: [
+			{ label: "Reason", value: "Price" },
+			{ label: "In their words", value: "A freelancer quoted half." },
+		],
+	},
+	{ id: "a2", kind: "call", occurredAt: "2026-06-04T10:00:00Z", title: "Proposal walk-through", body: "Jane liked the audit and balked at the fee." },
+];
+
+export const portalEvents: RecordEvent[] = [
+	{ id: "b1", kind: "payment", occurredAt: "2026-04-02T10:00:00Z", title: "Final invoice paid", amount: 9000, currency: "EUR" },
+	{ id: "b2", kind: "payment", occurredAt: "2026-02-10T10:00:00Z", title: "First instalment paid", amount: 9000, currency: "EUR" },
+	{ id: "b3", kind: "call", occurredAt: "2026-03-20T10:00:00Z", title: "Launch check", body: "Live. A few copy fixes after." },
+];
+
+/** Something that happened before any project existed: it belongs to the client. */
+export const clientOnlyEvents: RecordEvent[] = [
+	{
+		id: "c1",
+		kind: "form",
+		occurredAt: "2026-02-01T09:00:00Z",
+		title: "Contact form: asked about online booking",
+		body: "Calls pile up at lunch and the front desk can't keep up.",
+	},
+];
+
+export const clientProjects = [
+	{ summary: website, events: websiteEvents },
+	{ summary: audit, events: auditEvents },
+	{ summary: portal, events: portalEvents },
+];

package/src/tasks/record/field-section.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { cn } from "../../lib/utils.js";
+import { fieldRow, groupFields, type FieldValues } from "./fields.js";
+import InfoList from "./info-list.svelte";
+import type {
+	FieldDef,
+	FieldSectionDef,
+	FieldValue,
+	RecordLabels,
+} from "./types.js";
+
+// =========================
+// PROPS
+// =========================
+interface Props {
+	/** What a module declares for this record. */
+	fields: FieldDef[];
+	/** Section headings in the order to draw them. A section with no field isn't drawn. */
+	sections?: FieldSectionDef[];
+	values: FieldValues;
+	/** Without it every field is read-only and an empty one is left out. */
+	onSave?: (key: string, value: FieldValue) => void | Promise<void>;
+	/** For a money field that names none. */
+	currency?: string;
+	labels?: Partial<RecordLabels>;
+	locale?: string;
+	class?: string;
+}
+let { fields, sections = [], values, onSave, currency, labels, locale, class: className }: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+let groups = $derived(groupFields(fields, sections, values));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#if groups.length > 0}
+	<div class={cn("flex flex-col gap-5", className)}>
+		{#each groups as group (group.key)}
+			<InfoList
+				title={group.label}
+				{labels}
+				rows={group.fields.map((f) => fieldRow(f, values[f.key], { locale, currency, onSave }))}
+			/>
+		{/each}
+	</div>
+{/if}

package/src/tasks/record/fields.ts

@@ -0,0 +1,142 @@
+// Turns a module's field declarations and a record's values into rows to draw.
+import { formatDay, formatMoney } from "./format.js";
+import type {
+	FieldDef,
+	FieldOption,
+	FieldSectionDef,
+	FieldValue,
+	InfoRow,
+} from "./types.js";
+
+export type FieldValues = Record<string, FieldValue | undefined>;
+
+function isEmpty(value: FieldValue | undefined): boolean {
+	return value == null || value === "" || (Array.isArray(value) && value.length === 0);
+}
+
+/** A field shows unless its `showWhen` names a field that doesn't hold the wanted value. */
+export function isFieldVisible(field: FieldDef, values: FieldValues): boolean {
+	const rule = field.showWhen;
+	if (!rule) return true;
+	const current = values[rule.key];
+	if (rule.equals === undefined) return !isEmpty(current);
+	const wanted = Array.isArray(rule.equals) ? rule.equals : [rule.equals];
+	const held = Array.isArray(current) ? current : current == null ? [] : [String(current)];
+	return held.some((v) => wanted.includes(v));
+}
+
+/**
+ * The options a picker offers: an archived one is left out unless it is what the
+ * record already holds, so an old value still reads and is never chosen again.
+ */
+export function pickableOptions(field: FieldDef, value: FieldValue | undefined): FieldOption[] {
+	const held = Array.isArray(value) ? value : value == null ? [] : [String(value)];
+	return (field.options ?? []).filter((o) => !o.archived || held.includes(o.key));
+}
+
+export type FieldGroup = { key: string; label: string | null; fields: FieldDef[] };
+
+/**
+ * Visible fields bucketed by section in the declared order. A section with no
+ * field is not drawn. Fields with no or an unknown section go last under no heading.
+ */
+export function groupFields(
+	fields: readonly FieldDef[],
+	sections: readonly FieldSectionDef[],
+	values: FieldValues,
+): FieldGroup[] {
+	const visible = fields.filter((f) => isFieldVisible(f, values));
+	const known = new Set(sections.map((s) => s.key));
+	const groups: FieldGroup[] = sections
+		.map((s) => ({ key: s.key, label: s.label as string | null, fields: visible.filter((f) => f.section === s.key) }))
+		.filter((g) => g.fields.length > 0);
+	const loose = visible.filter((f) => !f.section || !known.has(f.section));
+	if (loose.length > 0) groups.push({ key: "", label: null, fields: loose });
+	return groups;
+}
+
+/** What the editor hands back, as the type the field declares. Empty text is null. */
+export function parseSaved(field: FieldDef, raw: string | string[]): FieldValue {
+	if (Array.isArray(raw)) return raw;
+	const text = raw.trim();
+	if (text === "") return null;
+	if (field.type === "money") {
+		const n = Number(text.replace(",", "."));
+		return Number.isFinite(n) ? n : null;
+	}
+	return text;
+}
+
+export type RowContext = {
+	locale?: string;
+	/** The record's currency, for a money field with none of its own. */
+	currency?: string;
+	onSave?: (key: string, value: FieldValue) => void | Promise<void>;
+};
+
+const INPUT: Record<FieldDef["type"], NonNullable<InfoRow["input"]>> = {
+	text: "text",
+	longtext: "longtext",
+	choice: "select",
+	multi: "multi",
+	money: "number",
+	date: "date",
+	url: "url",
+	email: "email",
+	timezone: "text",
+};
+
+/** One field and its value as an `InfoRow`. */
+export function fieldRow(field: FieldDef, value: FieldValue | undefined, ctx: RowContext = {}): InfoRow {
+	const row: InfoRow = {
+		id: field.key,
+		label: field.label,
+		input: INPUT[field.type],
+		placeholder: field.placeholder,
+		required: field.required,
+	};
+	const optionOf = (key: string) => field.options?.find((o) => o.key === key);
+
+	if (!isEmpty(value)) {
+		switch (field.type) {
+			case "choice": {
+				const option = optionOf(String(value));
+				row.value = option?.label ?? String(value);
+				row.tone = option?.tone;
+				break;
+			}
+			case "multi": {
+				const keys = Array.isArray(value) ? value : [String(value)];
+				row.chips = keys.map((k) => ({ label: optionOf(k)?.label ?? k, tone: optionOf(k)?.tone }));
+				break;
+			}
+			case "money":
+				row.value = formatMoney(Number(value), field.currency ?? ctx.currency, ctx.locale);
+				break;
+			case "date":
+				row.value = formatDay(String(value), ctx.locale);
+				break;
+			case "url":
+				row.value = String(value).replace(/^https?:\/\/(www\.)?/, "").replace(/\/$/, "");
+				row.href = String(value);
+				break;
+			case "email":
+				row.value = String(value);
+				row.href = `mailto:${value}`;
+				break;
+			default:
+				row.value = String(value);
+		}
+	}
+
+	if (field.type === "choice" || field.type === "multi") {
+		row.options = pickableOptions(field, value).map((o) => ({ value: o.key, label: o.label, tone: o.tone }));
+		row.editValue = Array.isArray(value) ? value : value == null ? (field.type === "multi" ? [] : "") : String(value);
+	} else if (!isEmpty(value)) {
+		row.editValue = String(value);
+	}
+
+	const onSave = ctx.onSave;
+	if (onSave) row.onSave = (raw) => onSave(field.key, parseSaved(field, raw));
+	return row;
+}

package/src/tasks/record/format.ts

@@ -0,0 +1,87 @@
+// Display formatting through Intl, so a locale string is all a host passes.
+// A date-only value ("2026-10-26") is a calendar day, read in UTC so no zone shifts it.
+
+const DAY_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+
+function parse(iso: string): { date: Date; timeZone?: string } {
+	return DAY_ONLY.test(iso)
+		? { date: new Date(`${iso}T00:00:00Z`), timeZone: "UTC" }
+		: { date: new Date(iso) };
+}
+
+/** "Mon 26 Oct". */
+export function formatDay(iso: string, locale = "en-GB"): string {
+	const { date, timeZone } = parse(iso);
+	return new Intl.DateTimeFormat(locale, {
+		weekday: "short",
+		day: "numeric",
+		month: "short",
+		timeZone,
+	}).format(date);
+}
+
+/** "Sat 24 to Sun 25 Oct" in one month, two full days across months, one day when the ends match. */
+export function formatRange(start: string, end: string | null | undefined, locale = "en-GB"): string {
+	if (!end || end.slice(0, 10) === start.slice(0, 10)) return formatDay(start, locale);
+	const a = parse(start);
+	const b = parse(end);
+	const sameMonth =
+		a.date.getUTCFullYear() === b.date.getUTCFullYear() && a.date.getUTCMonth() === b.date.getUTCMonth();
+	if (!sameMonth) return `${formatDay(start, locale)} to ${formatDay(end, locale)}`;
+	const part = (d: Date) =>
+		new Intl.DateTimeFormat(locale, { weekday: "short", day: "numeric", timeZone: "UTC" }).format(d);
+	const month = new Intl.DateTimeFormat(locale, { month: "short", timeZone: "UTC" }).format(b.date);
+	return `${part(a.date)} to ${part(b.date)} ${month}`;
+}
+
+/** "Oct 21" without a weekday, for a timeline day header. */
+export function formatDayHeader(day: string, locale = "en-GB"): string {
+	return new Intl.DateTimeFormat(locale, {
+		weekday: "short",
+		day: "numeric",
+		month: "short",
+		year: "numeric",
+		timeZone: "UTC",
+	}).format(new Date(`${day}T00:00:00Z`));
+}
+
+/** "14:30" in the viewer's zone, or the given one. */
+export function formatTime(iso: string, locale = "en-GB", timeZone?: string): string {
+	return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", timeZone }).format(
+		new Date(iso),
+	);
+}
+
+/** "3 days ago", "in 2 weeks", "now". */
+export function formatAge(iso: string, now: Date | number = Date.now(), locale = "en-GB"): string {
+	const seconds = Math.round((new Date(iso).getTime() - new Date(now).getTime()) / 1000);
+	const abs = Math.abs(seconds);
+	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "long" });
+	const units: [number, Intl.RelativeTimeFormatUnit][] = [
+		[31_536_000, "year"],
+		[2_592_000, "month"],
+		[604_800, "week"],
+		[86_400, "day"],
+		[3_600, "hour"],
+		[60, "minute"],
+	];
+	for (const [size, unit] of units) {
+		if (abs >= size) return rtf.format(Math.round(seconds / size), unit);
+	}
+	return rtf.format(0, "second");
+}
+
+/** "€12,000". `compact` gives "€12K". */
+export function formatMoney(
+	amount: number,
+	currency = "EUR",
+	locale = "en-GB",
+	compact = false,
+): string {
+	return new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency,
+		maximumFractionDigits: compact || Number.isInteger(amount) ? 0 : 2,
+		notation: compact ? "compact" : "standard",
+	}).format(amount);
+}

package/src/tasks/record/gutter.ts

@@ -0,0 +1,2 @@
+/** The record's horizontal padding, shared by the header, banner, tabs and body so they line up. */
+export const gutterClass = "px-4 @3xl:px-6";