feat(tfl): add FeedItemRenderer for TfL alerts

Implement renderTflAlert using JRX and @aelis/components.
Upgrade @nym.sh/jrx to 0.2.0 for null child support.

Co-authored-by: Ona <no-reply@ona.com>

packages/aelis-source-tfl/package.json

@@ -10,7 +10,12 @@
 	},
 	"dependencies": {
 		"@aelis/core": "workspace:*",
+		"@aelis/components": "workspace:*",
 		"@aelis/source-location": "workspace:*",
 		"arktype": "^2.1.0"
+	},
+	"peerDependencies": {
+		"@json-render/core": "*",
+		"@nym.sh/jrx": "*"
 	}
 }

packages/aelis-source-tfl/src/index.ts

@@ -11,3 +11,4 @@ export {
 	type TflLineStatus,
 	type TflSourceOptions,
 } from "./types.ts"
+export { renderTflAlert } from "./renderer.tsx"

packages/aelis-source-tfl/src/renderer.test.tsx

@@ -0,0 +1,93 @@
+import { render } from "@nym.sh/jrx"
+import { describe, expect, test } from "bun:test"
+
+import type { TflAlertFeedItem } from "./types.ts"
+
+import { renderTflAlert } from "./renderer.tsx"
+
+function makeItem(overrides: Partial<TflAlertFeedItem["data"]> = {}): TflAlertFeedItem {
+	return {
+		id: "tfl-alert-northern-minor-delays",
+		type: "tfl-alert",
+		timestamp: new Date("2026-01-15T12:00:00Z"),
+		data: {
+			line: "northern",
+			lineName: "Northern",
+			severity: "minor-delays",
+			description: "Minor delays due to signal failure",
+			closestStationDistance: null,
+			...overrides,
+		},
+	}
+}
+
+describe("renderTflAlert", () => {
+	test("renders a FeedCard with title and description", () => {
+		const node = renderTflAlert(makeItem())
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("FeedCard")
+		expect(root.children!.length).toBeGreaterThanOrEqual(2)
+
+		const title = spec.elements[root.children![0]!]!
+		expect(title.type).toBe("SansSerifText")
+		expect(title.props.content).toBe("Northern · Minor delays")
+
+		const body = spec.elements[root.children![1]!]!
+		expect(body.type).toBe("SansSerifText")
+		expect(body.props.content).toBe("Minor delays due to signal failure")
+	})
+
+	test("shows nearest station distance when available", () => {
+		const node = renderTflAlert(makeItem({ closestStationDistance: 0.35 }))
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		expect(root.children).toHaveLength(3)
+
+		const caption = spec.elements[root.children![2]!]!
+		expect(caption.type).toBe("SansSerifText")
+		expect(caption.props.content).toBe("Nearest station: 350m away")
+	})
+
+	test("formats distance in km when >= 1km", () => {
+		const node = renderTflAlert(makeItem({ closestStationDistance: 2.456 }))
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		const caption = spec.elements[root.children![2]!]!
+		expect(caption.props.content).toBe("Nearest station: 2.5km away")
+	})
+
+	test("omits station distance when null", () => {
+		const node = renderTflAlert(makeItem({ closestStationDistance: null }))
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		// Title + body only, no caption (empty fragment doesn't produce a child)
+		const children = root.children!.filter((key) => {
+			const el = spec.elements[key]
+			return el && el.type !== "Fragment"
+		})
+		expect(children).toHaveLength(2)
+	})
+
+	test("renders closure severity label", () => {
+		const node = renderTflAlert(makeItem({ severity: "closure", lineName: "Central" }))
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		const title = spec.elements[root.children![0]!]!
+		expect(title.props.content).toBe("Central · Closed")
+	})
+
+	test("renders major delays severity label", () => {
+		const node = renderTflAlert(makeItem({ severity: "major-delays", lineName: "Jubilee" }))
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		const title = spec.elements[root.children![0]!]!
+		expect(title.props.content).toBe("Jubilee · Major delays")
+	})
+})

packages/aelis-source-tfl/src/renderer.tsx

@@ -0,0 +1,38 @@
+import type { FeedItemRenderer } from "@aelis/core"
+
+import { FeedCard, SansSerifText } from "@aelis/components"
+
+import type { TflAlertData } from "./types.ts"
+
+import { TflAlertSeverity } from "./types.ts"
+
+const SEVERITY_LABEL: Record<TflAlertSeverity, string> = {
+	[TflAlertSeverity.Closure]: "Closed",
+	[TflAlertSeverity.MajorDelays]: "Major delays",
+	[TflAlertSeverity.MinorDelays]: "Minor delays",
+}
+
+function formatDistance(km: number): string {
+	if (km < 1) {
+		return `${Math.round(km * 1000)}m away`
+	}
+	return `${km.toFixed(1)}km away`
+}
+
+export const renderTflAlert: FeedItemRenderer<"tfl-alert", TflAlertData> = (item) => {
+	const { lineName, severity, description, closestStationDistance } = item.data
+	const severityLabel = SEVERITY_LABEL[severity]
+
+	return (
+		<FeedCard>
+			<SansSerifText content={`${lineName} · ${severityLabel}`} style="text-base font-semibold" />
+			<SansSerifText content={description} style="text-sm" />
+			{closestStationDistance !== null ? (
+				<SansSerifText
+					content={`Nearest station: ${formatDistance(closestStationDistance)}`}
+					style="text-xs text-stone-500"
+				/>
+			) : null}
+		</FeedCard>
+	)
+}

packages/aelis-source-tfl/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"jsxImportSource": "@nym.sh/jrx"
+	},
+	"include": ["src"]
+}