feat(client): add Button.Icon subcomponent

Introduce Button.Icon to enforce consistent icon styling
(size, theme-aware color) instead of hardcoding Feather
props at each call site. Update showcase and json-render
registry to use it.

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

.github/workflows/test.yml

@@ -21,4 +21,4 @@ jobs:
         run: bun install --frozen-lockfile
 
       - name: Run tests
-        run: bun run test
+        run: bun test

bun.lock

@@ -6,7 +6,7 @@
       "name": "aelis",
       "devDependencies": {
         "@json-render/core": "^0.12.1",
-        "@nym.sh/jrx": "^0.2.0",
+        "@nym.sh/jrx": "^0.1.0",
         "@types/bun": "latest",
         "oxfmt": "^0.24.0",
         "oxlint": "^1.39.0",
@@ -110,14 +110,6 @@
         "vite-tsconfig-paths": "^5.1.4",
       },
     },
-    "packages/aelis-components": {
-      "name": "@aelis/components",
-      "version": "0.0.0",
-      "peerDependencies": {
-        "@json-render/core": "*",
-        "@nym.sh/jrx": "*",
-      },
-    },
     "packages/aelis-core": {
       "name": "@aelis/core",
       "version": "0.0.0",
@@ -177,15 +169,10 @@
       "name": "@aelis/source-tfl",
       "version": "0.0.0",
       "dependencies": {
-        "@aelis/components": "workspace:*",
         "@aelis/core": "workspace:*",
         "@aelis/source-location": "workspace:*",
         "arktype": "^2.1.0",
       },
-      "peerDependencies": {
-        "@json-render/core": "*",
-        "@nym.sh/jrx": "*",
-      },
     },
     "packages/aelis-source-weatherkit": {
       "name": "@aelis/source-weatherkit",
@@ -202,8 +189,6 @@
 
     "@aelis/backend": ["@aelis/backend@workspace:apps/aelis-backend"],
 
-    "@aelis/components": ["@aelis/components@workspace:packages/aelis-components"],
-
     "@aelis/core": ["@aelis/core@workspace:packages/aelis-core"],
 
     "@aelis/data-source-weatherkit": ["@aelis/data-source-weatherkit@workspace:packages/aelis-data-source-weatherkit"],
@@ -696,7 +681,7 @@
 
     "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],
 
-    "@nym.sh/jrx": ["@nym.sh/jrx@0.2.0", "", { "peerDependencies": { "@json-render/core": ">=0.10.0" } }, "sha512-jd7Z1Q6T21366MtSUnwCFiu6Yl1AdNc9s5m6HxeUg265P+0enZCiyyxOuHsFwvpUcSEs/2DVBsqfMptdca44lA=="],
+    "@nym.sh/jrx": ["@nym.sh/jrx@0.1.0", "", { "peerDependencies": { "@json-render/core": ">=0.10.0" } }, "sha512-mu6fkAP/TI9FuP8A4WMCrcucpUtWF5xBTcETnrjOtvEED9i+7sQKuoOyhJeF6QaSuUkAA/8t3Xx3kYUjcAPFbw=="],
 
     "@oclif/core": ["@oclif/core@4.8.4", "", { "dependencies": { "ansi-escapes": "^4.3.2", "ansis": "^3.17.0", "clean-stack": "^3.0.1", "cli-spinners": "^2.9.2", "debug": "^4.4.3", "ejs": "^3.1.10", "get-package-type": "^0.1.0", "indent-string": "^4.0.0", "is-wsl": "^2.2.0", "lilconfig": "^3.1.3", "minimatch": "^10.2.4", "semver": "^7.7.3", "string-width": "^4.2.3", "supports-color": "^8", "tinyglobby": "^0.2.14", "widest-line": "^3.1.0", "wordwrap": "^1.0.0", "wrap-ansi": "^7.0.0" } }, "sha512-UTAqwXJJyRvLBvosL+1uPZYSpr8lEHgUb/EVGbPXo5WZqUIBHfJ0sR2bkBEsrj00/ar4IegKxx4YK0wn2c8SQg=="],
 

package.json

@@ -15,7 +15,7 @@
 	},
 	"devDependencies": {
 		"@json-render/core": "^0.12.1",
-		"@nym.sh/jrx": "^0.2.0",
+		"@nym.sh/jrx": "^0.1.0",
 		"@types/bun": "latest",
 		"oxfmt": "^0.24.0",
 		"oxlint": "^1.39.0"

packages/aelis-components/package.json

@@ -1,14 +0,0 @@
-{
-	"name": "@aelis/components",
-	"version": "0.0.0",
-	"type": "module",
-	"main": "src/index.ts",
-	"types": "src/index.ts",
-	"scripts": {
-		"test": "bun test ./src"
-	},
-	"peerDependencies": {
-		"@json-render/core": "*",
-		"@nym.sh/jrx": "*"
-	}
-}

packages/aelis-components/src/button.ts

@@ -1,15 +0,0 @@
-import type { JrxNode } from "@nym.sh/jrx"
-
-import { jsx } from "@nym.sh/jrx/jsx-runtime"
-
-export type ButtonProps = {
-	label: string
-	leadingIcon?: string
-	trailingIcon?: string
-	style?: string
-	children?: JrxNode | JrxNode[]
-}
-
-export function Button(props: ButtonProps): JrxNode {
-	return jsx("Button", props)
-}

packages/aelis-components/src/components.test.tsx

@@ -1,155 +0,0 @@
-/** @jsxImportSource @nym.sh/jrx */
-
-import { render } from "@nym.sh/jrx"
-import { describe, expect, test } from "bun:test"
-
-import { Button } from "./button.ts"
-import { FeedCard } from "./feed-card.ts"
-import { MonospaceText } from "./monospace-text.ts"
-import { SansSerifText } from "./sans-serif-text.ts"
-import { SerifText } from "./serif-text.ts"
-
-describe("Button", () => {
-	test("renders with label", () => {
-		const spec = render(<Button label="Press me" />)
-
-		expect(spec.root).toStartWith("button-")
-		const root = spec.elements[spec.root]!
-		expect(root.type).toBe("Button")
-		expect(root.props).toEqual({ label: "Press me" })
-	})
-
-	test("renders with icon props", () => {
-		const spec = render(<Button label="Add" leadingIcon="plus" trailingIcon="arrow-right" />)
-
-		const root = spec.elements[spec.root]!
-		expect(root.type).toBe("Button")
-		expect(root.props).toEqual({
-			label: "Add",
-			leadingIcon: "plus",
-			trailingIcon: "arrow-right",
-		})
-	})
-
-	test("passes style as string prop", () => {
-		const spec = render(<Button label="Go" style="px-4 py-2" />)
-
-		const root = spec.elements[spec.root]!
-		expect(root.props.style).toBe("px-4 py-2")
-	})
-})
-
-describe("FeedCard", () => {
-	test("renders as container", () => {
-		const spec = render(<FeedCard />)
-
-		expect(spec.root).toStartWith("feedcard-")
-		const root = spec.elements[spec.root]!
-		expect(root.type).toBe("FeedCard")
-	})
-
-	test("renders with a single child", () => {
-		const spec = render(
-			<FeedCard>
-				<SansSerifText content="Only child" />
-			</FeedCard>,
-		)
-
-		const root = spec.elements[spec.root]!
-		expect(root.children).toHaveLength(1)
-		const child = spec.elements[root.children![0]!]!
-		expect(child.type).toBe("SansSerifText")
-		expect(child.props).toEqual({ content: "Only child" })
-	})
-
-	test("passes style as string prop", () => {
-		const spec = render(<FeedCard style="p-4 border rounded-lg" />)
-
-		const root = spec.elements[spec.root]!
-		expect(root.props.style).toBe("p-4 border rounded-lg")
-	})
-})
-
-describe("SansSerifText", () => {
-	test("renders with content prop", () => {
-		const spec = render(<SansSerifText content="Hello" />)
-
-		expect(spec.root).toStartWith("sansseriftext-")
-		const root = spec.elements[spec.root]!
-		expect(root.type).toBe("SansSerifText")
-		expect(root.props).toEqual({ content: "Hello" })
-	})
-
-	test("passes style as string prop", () => {
-		const spec = render(<SansSerifText content="Hello" style="text-sm text-stone-500" />)
-
-		const root = spec.elements[spec.root]!
-		expect(root.props.style).toBe("text-sm text-stone-500")
-	})
-})
-
-describe("SerifText", () => {
-	test("renders with content prop", () => {
-		const spec = render(<SerifText content="Title" />)
-
-		expect(spec.root).toStartWith("seriftext-")
-		const root = spec.elements[spec.root]!
-		expect(root.type).toBe("SerifText")
-		expect(root.props).toEqual({ content: "Title" })
-	})
-
-	test("passes style as string prop", () => {
-		const spec = render(<SerifText content="Title" style="text-xl" />)
-
-		const root = spec.elements[spec.root]!
-		expect(root.props.style).toBe("text-xl")
-	})
-})
-
-describe("MonospaceText", () => {
-	test("renders with content prop", () => {
-		const spec = render(<MonospaceText content="code()" />)
-
-		expect(spec.root).toStartWith("monospacetext-")
-		const root = spec.elements[spec.root]!
-		expect(root.type).toBe("MonospaceText")
-		expect(root.props).toEqual({ content: "code()" })
-	})
-
-	test("passes style as string prop", () => {
-		const spec = render(<MonospaceText content="code()" style="text-xs" />)
-
-		const root = spec.elements[spec.root]!
-		expect(root.props.style).toBe("text-xs")
-	})
-})
-
-describe("composite", () => {
-	test("FeedCard with nested children", () => {
-		const spec = render(
-			<FeedCard>
-				<SerifText content="Weather" />
-				<SansSerifText content="Sunny, 22C" />
-				<Button label="Details" />
-			</FeedCard>,
-		)
-
-		const root = spec.elements[spec.root]!
-		expect(root.type).toBe("FeedCard")
-		expect(root.children).toHaveLength(3)
-
-		const childKeys = root.children!
-		const child0 = spec.elements[childKeys[0]!]!
-		const child1 = spec.elements[childKeys[1]!]!
-		const child2 = spec.elements[childKeys[2]!]!
-
-		expect(child0.type).toBe("SerifText")
-		expect(child0.props).toEqual({ content: "Weather" })
-
-		expect(child1.type).toBe("SansSerifText")
-		expect(child1.props).toEqual({ content: "Sunny, 22C" })
-
-		expect(child2.type).toBe("Button")
-		expect(child2.props).toEqual({ label: "Details" })
-	})
-})

packages/aelis-components/src/feed-card.ts

@@ -1,12 +0,0 @@
-import type { JrxNode } from "@nym.sh/jrx"
-
-import { jsx } from "@nym.sh/jrx/jsx-runtime"
-
-export type FeedCardProps = {
-	style?: string
-	children?: JrxNode | JrxNode[]
-}
-
-export function FeedCard(props: FeedCardProps): JrxNode {
-	return jsx("FeedCard", props)
-}

packages/aelis-components/src/index.ts

@@ -1,14 +0,0 @@
-export type { ButtonProps } from "./button.ts"
-export { Button } from "./button.ts"
-
-export type { FeedCardProps } from "./feed-card.ts"
-export { FeedCard } from "./feed-card.ts"
-
-export type { SansSerifTextProps } from "./sans-serif-text.ts"
-export { SansSerifText } from "./sans-serif-text.ts"
-
-export type { SerifTextProps } from "./serif-text.ts"
-export { SerifText } from "./serif-text.ts"
-
-export type { MonospaceTextProps } from "./monospace-text.ts"
-export { MonospaceText } from "./monospace-text.ts"

packages/aelis-components/src/monospace-text.ts

@@ -1,13 +0,0 @@
-import type { JrxNode } from "@nym.sh/jrx"
-
-import { jsx } from "@nym.sh/jrx/jsx-runtime"
-
-export type MonospaceTextProps = {
-	content?: string
-	style?: string
-	children?: JrxNode | JrxNode[]
-}
-
-export function MonospaceText(props: MonospaceTextProps): JrxNode {
-	return jsx("MonospaceText", props)
-}

packages/aelis-components/src/sans-serif-text.ts

@@ -1,13 +0,0 @@
-import type { JrxNode } from "@nym.sh/jrx"
-
-import { jsx } from "@nym.sh/jrx/jsx-runtime"
-
-export type SansSerifTextProps = {
-	content?: string
-	style?: string
-	children?: JrxNode | JrxNode[]
-}
-
-export function SansSerifText(props: SansSerifTextProps): JrxNode {
-	return jsx("SansSerifText", props)
-}

packages/aelis-components/src/serif-text.ts

@@ -1,13 +0,0 @@
-import type { JrxNode } from "@nym.sh/jrx"
-
-import { jsx } from "@nym.sh/jrx/jsx-runtime"
-
-export type SerifTextProps = {
-	content?: string
-	style?: string
-	children?: JrxNode | JrxNode[]
-}
-
-export function SerifText(props: SerifTextProps): JrxNode {
-	return jsx("SerifText", props)
-}

packages/aelis-components/tsconfig.json

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

packages/aelis-core/src/feed.ts

@@ -79,12 +79,6 @@ export interface FeedItem<
 	slots?: Record<string, Slot>
 }
 
-/** Takes a FeedItem and returns a JRX node tree for rendering. */
-export type FeedItemRenderer<
-	TType extends string = string,
-	TData extends Record<string, unknown> = Record<string, unknown>,
-> = (item: FeedItem<TType, TData>) => JrxNode
-
 /** A FeedItem with a JRX UI tree attached for client-side rendering. */
 export interface RenderedFeedItem<
 	TType extends string = string,

packages/aelis-core/src/index.ts

@@ -7,7 +7,7 @@ export type { ActionDefinition } from "./action"
 export { UnknownActionError } from "./action"
 
 // Feed
-export type { FeedItem, FeedItemRenderer, FeedItemSignals, RenderedFeedItem, Slot } from "./feed"
+export type { FeedItem, FeedItemSignals, RenderedFeedItem, Slot } from "./feed"
 export { TimeRelevance } from "./feed"
 
 // Feed Source

packages/aelis-source-tfl/package.json

@@ -10,12 +10,7 @@
 	},
 	"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,4 +11,3 @@ export {
 	type TflLineStatus,
 	type TflSourceOptions,
 } from "./types.ts"
-export { renderTflAlert } from "./renderer.tsx"

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

@@ -1,103 +0,0 @@
-/** @jsxImportSource @nym.sh/jrx */
-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("formats near-1km boundary as km not meters", () => {
-		const node = renderTflAlert(makeItem({ closestStationDistance: 0.9999 }))
-		const spec = render(node)
-
-		const root = spec.elements[spec.root]!
-		const caption = spec.elements[root.children![2]!]!
-		expect(caption.props.content).toBe("Nearest station: 1.0km 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

@@ -1,40 +0,0 @@
-/** @jsxImportSource @nym.sh/jrx */
-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 {
-	const meters = Math.round(km * 1000)
-	if (meters < 1000) {
-		return `${meters}m away`
-	}
-	return `${(meters / 1000).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

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