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>

apps/aelis-backend/src/engine/http.test.ts

@@ -0,0 +1,313 @@
+import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aelis/core"
+
+import { contextKey } from "@aelis/core"
+import { describe, expect, test } from "bun:test"
+import { Hono } from "hono"
+
+import { mockAuthSessionMiddleware } from "../auth/session-middleware.ts"
+import { UserSessionManager } from "../session/index.ts"
+import { registerFeedHttpHandlers } from "./http.ts"
+
+interface FeedResponse {
+	items: Array<{
+		id: string
+		type: string
+		priority: number
+		timestamp: string
+		data: Record<string, unknown>
+	}>
+	errors: Array<{ sourceId: string; error: string }>
+}
+
+function createStubSource(
+	id: string,
+	items: FeedItem[] = [],
+	contextEntries: readonly ContextEntry[] | null = null,
+): FeedSource {
+	return {
+		id,
+		async listActions(): Promise<Record<string, ActionDefinition>> {
+			return {}
+		},
+		async executeAction(): Promise<unknown> {
+			return undefined
+		},
+		async fetchContext(): Promise<readonly ContextEntry[] | null> {
+			return contextEntries
+		},
+		async fetchItems() {
+			return items
+		},
+	}
+}
+
+function buildTestApp(sessionManager: UserSessionManager, userId?: string) {
+	const app = new Hono()
+	registerFeedHttpHandlers(app, {
+		sessionManager,
+		authSessionMiddleware: mockAuthSessionMiddleware(userId),
+	})
+	return app
+}
+
+describe("GET /api/feed", () => {
+	test("returns 401 without auth", async () => {
+		const manager = new UserSessionManager({ providers: [] })
+		const app = buildTestApp(manager)
+
+		const res = await app.request("/api/feed")
+
+		expect(res.status).toBe(401)
+	})
+
+	test("returns cached feed when available", async () => {
+		const items: FeedItem[] = [
+			{
+				id: "item-1",
+				type: "test",
+				priority: 0.8,
+				timestamp: new Date("2025-01-01T00:00:00.000Z"),
+				data: { value: 42 },
+			},
+		]
+		const manager = new UserSessionManager({
+			providers: [() => createStubSource("test", items)],
+		})
+		const app = buildTestApp(manager, "user-1")
+
+		// Prime the cache
+		const session = manager.getOrCreate("user-1")
+		await session.engine.refresh()
+		expect(session.engine.lastFeed()).not.toBeNull()
+
+		const res = await app.request("/api/feed")
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as FeedResponse
+		expect(body.items).toHaveLength(1)
+		expect(body.items[0]!.id).toBe("item-1")
+		expect(body.items[0]!.type).toBe("test")
+		expect(body.items[0]!.priority).toBe(0.8)
+		expect(body.items[0]!.timestamp).toBe("2025-01-01T00:00:00.000Z")
+		expect(body.errors).toHaveLength(0)
+	})
+
+	test("forces refresh when no cached feed", async () => {
+		const items: FeedItem[] = [
+			{
+				id: "fresh-1",
+				type: "test",
+				priority: 0.5,
+				timestamp: new Date("2025-06-01T12:00:00.000Z"),
+				data: { fresh: true },
+			},
+		]
+		const manager = new UserSessionManager({
+			providers: [() => createStubSource("test", items)],
+		})
+		const app = buildTestApp(manager, "user-1")
+
+		// No prior refresh — lastFeed() returns null, handler should call refresh()
+		const res = await app.request("/api/feed")
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as FeedResponse
+		expect(body.items).toHaveLength(1)
+		expect(body.items[0]!.id).toBe("fresh-1")
+		expect(body.items[0]!.data.fresh).toBe(true)
+		expect(body.errors).toHaveLength(0)
+	})
+
+	test("serializes source errors as message strings", async () => {
+		const failingSource: FeedSource = {
+			id: "failing",
+			async listActions() {
+				return {}
+			},
+			async executeAction() {
+				return undefined
+			},
+			async fetchContext() {
+				return null
+			},
+			async fetchItems() {
+				throw new Error("connection timeout")
+			},
+		}
+		const manager = new UserSessionManager({ providers: [() => failingSource] })
+		const app = buildTestApp(manager, "user-1")
+
+		const res = await app.request("/api/feed")
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as FeedResponse
+		expect(body.items).toHaveLength(0)
+		expect(body.errors).toHaveLength(1)
+		expect(body.errors[0]!.sourceId).toBe("failing")
+		expect(body.errors[0]!.error).toBe("connection timeout")
+	})
+})
+
+describe("GET /api/context", () => {
+	const weatherKey = contextKey("aelis.weather", "weather")
+	const weatherData = { temperature: 20, condition: "Clear" }
+	const contextEntries: readonly ContextEntry[] = [[weatherKey, weatherData]]
+
+	// The mock auth middleware always injects this hardcoded user ID
+	const mockUserId = "k7Gx2mPqRvNwYs9TdLfA4bHcJeUo1iZn"
+
+	function buildContextApp(userId?: string) {
+		const manager = new UserSessionManager({
+			providers: [() => createStubSource("weather", [], contextEntries)],
+		})
+		const app = buildTestApp(manager, userId)
+		const session = manager.getOrCreate(mockUserId)
+		return { app, session }
+	}
+
+	test("returns 401 without auth", async () => {
+		const manager = new UserSessionManager({ providers: [] })
+		const app = buildTestApp(manager)
+
+		const res = await app.request('/api/context?key=["aelis.weather","weather"]')
+
+		expect(res.status).toBe(401)
+	})
+
+	test("returns 400 when key param is missing", async () => {
+		const { app } = buildContextApp("user-1")
+
+		const res = await app.request("/api/context")
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("key")
+	})
+
+	test("returns 400 when key is invalid JSON", async () => {
+		const { app } = buildContextApp("user-1")
+
+		const res = await app.request("/api/context?key=notjson")
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("key")
+	})
+
+	test("returns 400 when key is not an array", async () => {
+		const { app } = buildContextApp("user-1")
+
+		const res = await app.request('/api/context?key="string"')
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("key")
+	})
+
+	test("returns 400 when key contains invalid element types", async () => {
+		const { app } = buildContextApp("user-1")
+
+		const res = await app.request("/api/context?key=[true,null,[1,2]]")
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("key")
+	})
+
+	test("returns 400 when key is an empty array", async () => {
+		const { app } = buildContextApp("user-1")
+
+		const res = await app.request("/api/context?key=[]")
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("key")
+	})
+
+	test("returns 400 when match param is invalid", async () => {
+		const { app } = buildContextApp("user-1")
+
+		const res = await app.request('/api/context?key=["aelis.weather"]&match=invalid')
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("match")
+	})
+
+	test("returns exact match with match=exact", async () => {
+		const { app, session } = buildContextApp("user-1")
+		await session.engine.refresh()
+
+		const res = await app.request('/api/context?key=["aelis.weather","weather"]&match=exact')
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as { match: string; value: unknown }
+		expect(body.match).toBe("exact")
+		expect(body.value).toEqual(weatherData)
+	})
+
+	test("returns 404 with match=exact when only prefix would match", async () => {
+		const { app, session } = buildContextApp("user-1")
+		await session.engine.refresh()
+
+		const res = await app.request('/api/context?key=["aelis.weather"]&match=exact')
+
+		expect(res.status).toBe(404)
+	})
+
+	test("returns prefix match with match=prefix", async () => {
+		const { app, session } = buildContextApp("user-1")
+		await session.engine.refresh()
+
+		const res = await app.request('/api/context?key=["aelis.weather"]&match=prefix')
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as {
+			match: string
+			entries: Array<{ key: unknown[]; value: unknown }>
+		}
+		expect(body.match).toBe("prefix")
+		expect(body.entries).toHaveLength(1)
+		expect(body.entries[0]!.key).toEqual(["aelis.weather", "weather"])
+		expect(body.entries[0]!.value).toEqual(weatherData)
+	})
+
+	test("default mode returns exact match when available", async () => {
+		const { app, session } = buildContextApp("user-1")
+		await session.engine.refresh()
+
+		const res = await app.request('/api/context?key=["aelis.weather","weather"]')
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as { match: string; value: unknown }
+		expect(body.match).toBe("exact")
+		expect(body.value).toEqual(weatherData)
+	})
+
+	test("default mode falls back to prefix when no exact match", async () => {
+		const { app, session } = buildContextApp("user-1")
+		await session.engine.refresh()
+
+		const res = await app.request('/api/context?key=["aelis.weather"]')
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as {
+			match: string
+			entries: Array<{ key: unknown[]; value: unknown }>
+		}
+		expect(body.match).toBe("prefix")
+		expect(body.entries).toHaveLength(1)
+		expect(body.entries[0]!.value).toEqual(weatherData)
+	})
+
+	test("returns 404 when neither exact nor prefix matches", async () => {
+		const { app, session } = buildContextApp("user-1")
+		await session.engine.refresh()
+
+		const res = await app.request('/api/context?key=["nonexistent"]')
+
+		expect(res.status).toBe(404)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toBe("Context key not found")
+	})
+})

apps/aelis-backend/src/engine/http.ts

@@ -0,0 +1,118 @@
+import type { Context, Hono } from "hono"
+
+import { contextKey } from "@aelis/core"
+import { createMiddleware } from "hono/factory"
+
+import type { AuthSessionMiddleware } from "../auth/session-middleware.ts"
+import type { UserSessionManager } from "../session/index.ts"
+
+type Env = {
+	Variables: {
+		sessionManager: UserSessionManager
+	}
+}
+
+interface FeedHttpHandlersDeps {
+	sessionManager: UserSessionManager
+	authSessionMiddleware: AuthSessionMiddleware
+}
+
+export function registerFeedHttpHandlers(
+	app: Hono,
+	{ sessionManager, authSessionMiddleware }: FeedHttpHandlersDeps,
+) {
+	const inject = createMiddleware<Env>(async (c, next) => {
+		c.set("sessionManager", sessionManager)
+		await next()
+	})
+
+	app.get("/api/feed", inject, authSessionMiddleware, handleGetFeed)
+	app.get("/api/context", inject, authSessionMiddleware, handleGetContext)
+}
+
+async function handleGetFeed(c: Context<Env>) {
+	const user = c.get("user")!
+	const sessionManager = c.get("sessionManager")
+	const session = sessionManager.getOrCreate(user.id)
+
+	const feed = await session.feed()
+
+	return c.json({
+		items: feed.items,
+		errors: feed.errors.map((e) => ({
+			sourceId: e.sourceId,
+			error: e.error.message,
+		})),
+	})
+}
+
+function handleGetContext(c: Context<Env>) {
+	const keyParam = c.req.query("key")
+	if (!keyParam) {
+		return c.json({ error: 'Invalid or missing "key" parameter: must be a JSON array' }, 400)
+	}
+
+	let parsed: unknown
+	try {
+		parsed = JSON.parse(keyParam)
+	} catch {
+		return c.json({ error: 'Invalid or missing "key" parameter: must be a JSON array' }, 400)
+	}
+
+	if (!Array.isArray(parsed) || parsed.length === 0 || !parsed.every(isContextKeyPart)) {
+		return c.json({ error: 'Invalid or missing "key" parameter: must be a JSON array' }, 400)
+	}
+
+	const matchParam = c.req.query("match")
+	if (matchParam !== undefined && matchParam !== "exact" && matchParam !== "prefix") {
+		return c.json({ error: 'Invalid "match" parameter: must be "exact" or "prefix"' }, 400)
+	}
+
+	const user = c.get("user")!
+	const sessionManager = c.get("sessionManager")
+	const session = sessionManager.getOrCreate(user.id)
+	const context = session.engine.currentContext()
+	const key = contextKey(...parsed)
+
+	if (matchParam === "exact") {
+		const value = context.get(key)
+		if (value === undefined) {
+			return c.json({ error: "Context key not found" }, 404)
+		}
+		return c.json({ match: "exact", value })
+	}
+
+	if (matchParam === "prefix") {
+		const entries = context.find(key)
+		if (entries.length === 0) {
+			return c.json({ error: "Context key not found" }, 404)
+		}
+		return c.json({ match: "prefix", entries })
+	}
+
+	// Default: single find() covers both exact and prefix matches
+	const entries = context.find(key)
+	if (entries.length === 0) {
+		return c.json({ error: "Context key not found" }, 404)
+	}
+
+	// If exactly one result with the same key length, treat as exact match
+	if (entries.length === 1 && entries[0]!.key.length === parsed.length) {
+		return c.json({ match: "exact", value: entries[0]!.value })
+	}
+
+	return c.json({ match: "prefix", entries })
+}
+
+/** Validates that a value is a valid ContextKeyPart (string, number, or plain object of primitives). */
+function isContextKeyPart(value: unknown): boolean {
+	if (typeof value === "string" || typeof value === "number") {
+		return true
+	}
+	if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+		return Object.values(value).every(
+			(v) => typeof v === "string" || typeof v === "number" || typeof v === "boolean",
+		)
+	}
+	return false
+}

apps/aelis-backend/src/feed/http.test.ts

@@ -1,144 +0,0 @@
-import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aelis/core"
-
-import { describe, expect, test } from "bun:test"
-import { Hono } from "hono"
-
-import { mockAuthSessionMiddleware } from "../auth/session-middleware.ts"
-import { UserSessionManager } from "../session/index.ts"
-import { registerFeedHttpHandlers } from "./http.ts"
-
-interface FeedResponse {
-	items: Array<{
-		id: string
-		type: string
-		priority: number
-		timestamp: string
-		data: Record<string, unknown>
-	}>
-	errors: Array<{ sourceId: string; error: string }>
-}
-
-function createStubSource(id: string, items: FeedItem[] = []): FeedSource {
-	return {
-		id,
-		async listActions(): Promise<Record<string, ActionDefinition>> {
-			return {}
-		},
-		async executeAction(): Promise<unknown> {
-			return undefined
-		},
-		async fetchContext(): Promise<readonly ContextEntry[] | null> {
-			return null
-		},
-		async fetchItems() {
-			return items
-		},
-	}
-}
-
-function buildTestApp(sessionManager: UserSessionManager, userId?: string) {
-	const app = new Hono()
-	registerFeedHttpHandlers(app, {
-		sessionManager,
-		authSessionMiddleware: mockAuthSessionMiddleware(userId),
-	})
-	return app
-}
-
-describe("GET /api/feed", () => {
-	test("returns 401 without auth", async () => {
-		const manager = new UserSessionManager({ providers: [] })
-		const app = buildTestApp(manager)
-
-		const res = await app.request("/api/feed")
-
-		expect(res.status).toBe(401)
-	})
-
-	test("returns cached feed when available", async () => {
-		const items: FeedItem[] = [
-			{
-				id: "item-1",
-				type: "test",
-				priority: 0.8,
-				timestamp: new Date("2025-01-01T00:00:00.000Z"),
-				data: { value: 42 },
-			},
-		]
-		const manager = new UserSessionManager({
-			providers: [() => createStubSource("test", items)],
-		})
-		const app = buildTestApp(manager, "user-1")
-
-		// Prime the cache
-		const session = manager.getOrCreate("user-1")
-		await session.engine.refresh()
-		expect(session.engine.lastFeed()).not.toBeNull()
-
-		const res = await app.request("/api/feed")
-
-		expect(res.status).toBe(200)
-		const body = (await res.json()) as FeedResponse
-		expect(body.items).toHaveLength(1)
-		expect(body.items[0]!.id).toBe("item-1")
-		expect(body.items[0]!.type).toBe("test")
-		expect(body.items[0]!.priority).toBe(0.8)
-		expect(body.items[0]!.timestamp).toBe("2025-01-01T00:00:00.000Z")
-		expect(body.errors).toHaveLength(0)
-	})
-
-	test("forces refresh when no cached feed", async () => {
-		const items: FeedItem[] = [
-			{
-				id: "fresh-1",
-				type: "test",
-				priority: 0.5,
-				timestamp: new Date("2025-06-01T12:00:00.000Z"),
-				data: { fresh: true },
-			},
-		]
-		const manager = new UserSessionManager({
-			providers: [() => createStubSource("test", items)],
-		})
-		const app = buildTestApp(manager, "user-1")
-
-		// No prior refresh — lastFeed() returns null, handler should call refresh()
-		const res = await app.request("/api/feed")
-
-		expect(res.status).toBe(200)
-		const body = (await res.json()) as FeedResponse
-		expect(body.items).toHaveLength(1)
-		expect(body.items[0]!.id).toBe("fresh-1")
-		expect(body.items[0]!.data.fresh).toBe(true)
-		expect(body.errors).toHaveLength(0)
-	})
-
-	test("serializes source errors as message strings", async () => {
-		const failingSource: FeedSource = {
-			id: "failing",
-			async listActions() {
-				return {}
-			},
-			async executeAction() {
-				return undefined
-			},
-			async fetchContext() {
-				return null
-			},
-			async fetchItems() {
-				throw new Error("connection timeout")
-			},
-		}
-		const manager = new UserSessionManager({ providers: [() => failingSource] })
-		const app = buildTestApp(manager, "user-1")
-
-		const res = await app.request("/api/feed")
-
-		expect(res.status).toBe(200)
-		const body = (await res.json()) as FeedResponse
-		expect(body.items).toHaveLength(0)
-		expect(body.errors).toHaveLength(1)
-		expect(body.errors[0]!.sourceId).toBe("failing")
-		expect(body.errors[0]!.error).toBe("connection timeout")
-	})
-})

apps/aelis-backend/src/feed/http.ts

@@ -1,45 +0,0 @@
-import type { Context, Hono } from "hono"
-
-import { createMiddleware } from "hono/factory"
-
-import type { AuthSessionMiddleware } from "../auth/session-middleware.ts"
-import type { UserSessionManager } from "../session/index.ts"
-
-type Env = {
-	Variables: {
-		sessionManager: UserSessionManager
-	}
-}
-
-interface FeedHttpHandlersDeps {
-	sessionManager: UserSessionManager
-	authSessionMiddleware: AuthSessionMiddleware
-}
-
-export function registerFeedHttpHandlers(
-	app: Hono,
-	{ sessionManager, authSessionMiddleware }: FeedHttpHandlersDeps,
-) {
-	const inject = createMiddleware<Env>(async (c, next) => {
-		c.set("sessionManager", sessionManager)
-		await next()
-	})
-
-	app.get("/api/feed", inject, authSessionMiddleware, handleGetFeed)
-}
-
-async function handleGetFeed(c: Context<Env>) {
-	const user = c.get("user")!
-	const sessionManager = c.get("sessionManager")
-	const session = sessionManager.getOrCreate(user.id)
-
-	const feed = await session.feed()
-
-	return c.json({
-		items: feed.items,
-		errors: feed.errors.map((e) => ({
-			sourceId: e.sourceId,
-			error: e.error.message,
-		})),
-	})
-}

apps/aelis-backend/src/server.ts

@@ -5,7 +5,7 @@ import { registerAuthHandlers } from "./auth/http.ts"
 import { mockAuthSessionMiddleware, requireSession } from "./auth/session-middleware.ts"
 import { createFeedEnhancer } from "./enhancement/enhance-feed.ts"
 import { createLlmClient } from "./enhancement/llm-client.ts"
-import { registerFeedHttpHandlers } from "./feed/http.ts"
+import { registerFeedHttpHandlers } from "./engine/http.ts"
 import { registerLocationHttpHandlers } from "./location/http.ts"
 import { UserSessionManager } from "./session/index.ts"
 import { WeatherSourceProvider } from "./weather/provider.ts"

apps/aelis-client/package.json

@@ -18,6 +18,7 @@
 		"@expo-google-fonts/inter": "^0.4.2",
 		"@expo-google-fonts/source-serif-4": "^0.4.1",
 		"@expo/vector-icons": "^15.0.3",
+		"@json-render/react-native": "^0.13.0",
 		"@react-navigation/bottom-tabs": "^7.4.0",
 		"@react-navigation/elements": "^2.6.3",
 		"@react-navigation/native": "^7.1.8",
@@ -45,7 +46,8 @@
 		"react-native-svg": "15.12.1",
 		"react-native-web": "~0.21.0",
 		"react-native-worklets": "0.5.1",
-		"twrnc": "^4.16.0"
+		"twrnc": "^4.16.0",
+		"zod": "^4.3.6"
 	},
 	"devDependencies": {
 		"@types/react": "~19.1.0",

apps/aelis-client/src/app/components/[name].tsx

@@ -38,9 +38,11 @@ export default function ComponentDetailScreen() {
 		)
 	}
 
+	const ShowcaseComponent = showcase.component
+
 	return (
 		<ScrollView style={tw`bg-stone-100 dark:bg-stone-900 flex-1`} contentContainerStyle={tw`px-5 pb-10 pt-4 gap-6`}>
-			{showcase.component()}
+			<ShowcaseComponent />
 		</ScrollView>
 	)
 }

apps/aelis-client/src/components/showcase.tsx

@@ -5,7 +5,7 @@ import { SansSerifText } from "./ui/sans-serif-text"
 
 export type Showcase = {
 	title: string
-	component: () => React.ReactNode
+	component: React.ComponentType
 }
 
 export function Section({ title, children }: { title: string; children: React.ReactNode }) {

apps/aelis-client/src/components/themed-text.tsx

@@ -1,60 +0,0 @@
-import { StyleSheet, Text, type TextProps } from "react-native"
-
-import { useThemeColor } from "@/hooks/use-theme-color"
-
-export type ThemedTextProps = TextProps & {
-	lightColor?: string
-	darkColor?: string
-	type?: "default" | "title" | "defaultSemiBold" | "subtitle" | "link"
-}
-
-export function ThemedText({
-	style,
-	lightColor,
-	darkColor,
-	type = "default",
-	...rest
-}: ThemedTextProps) {
-	const color = useThemeColor({ light: lightColor, dark: darkColor }, "text")
-
-	return (
-		<Text
-			style={[
-				{ color },
-				type === "default" ? styles.default : undefined,
-				type === "title" ? styles.title : undefined,
-				type === "defaultSemiBold" ? styles.defaultSemiBold : undefined,
-				type === "subtitle" ? styles.subtitle : undefined,
-				type === "link" ? styles.link : undefined,
-				style,
-			]}
-			{...rest}
-		/>
-	)
-}
-
-const styles = StyleSheet.create({
-	default: {
-		fontSize: 16,
-		lineHeight: 24,
-	},
-	defaultSemiBold: {
-		fontSize: 16,
-		lineHeight: 24,
-		fontWeight: "600",
-	},
-	title: {
-		fontSize: 32,
-		fontWeight: "bold",
-		lineHeight: 32,
-	},
-	subtitle: {
-		fontSize: 20,
-		fontWeight: "bold",
-	},
-	link: {
-		lineHeight: 30,
-		fontSize: 16,
-		color: "#0a7ea4",
-	},
-})

apps/aelis-client/src/components/ui/button.showcase.tsx

@@ -1,4 +1,3 @@
-import Feather from "@expo/vector-icons/Feather"
 import { View } from "react-native"
 import tw from "twrnc"
 
@@ -15,22 +14,22 @@ function ButtonShowcase() {
 				<Button
 					style={tw`self-start`}
 					label="Add item"
-					leadingIcon={<Feather name="plus" size={18} color="#e7e5e4" />}
+					leadingIcon={<Button.Icon name="plus" />}
 				/>
 			</Section>
 			<Section title="Trailing icon">
 				<Button
 					style={tw`self-start`}
 					label="Next"
-					trailingIcon={<Feather name="arrow-right" size={18} color="#e7e5e4" />}
+					trailingIcon={<Button.Icon name="arrow-right" />}
 				/>
 			</Section>
 			<Section title="Both icons">
 				<Button
 					style={tw`self-start`}
 					label="Download"
-					leadingIcon={<Feather name="download" size={18} color="#e7e5e4" />}
+					leadingIcon={<Button.Icon name="download" />}
-					trailingIcon={<Feather name="chevron-down" size={18} color="#e7e5e4" />}
+					trailingIcon={<Button.Icon name="chevron-down" />}
 				/>
 			</Section>
 		</View>

apps/aelis-client/src/components/ui/button.tsx

@@ -1,8 +1,19 @@
+import Feather from "@expo/vector-icons/Feather"
 import { type PressableProps, Pressable, View } from "react-native"
 import tw from "twrnc"
 
 import { SansSerifText } from "./sans-serif-text"
 
+type FeatherIconName = React.ComponentProps<typeof Feather>["name"]
+
+type ButtonIconProps = {
+	name: FeatherIconName
+}
+
+function ButtonIcon({ name }: ButtonIconProps) {
+	return <Feather name={name} size={18} color={tw.color("text-stone-100 dark:text-stone-200")} />
+}
+
 type ButtonProps = Omit<PressableProps, "children"> & {
 	label: string
 	leadingIcon?: React.ReactNode
@@ -12,7 +23,7 @@ type ButtonProps = Omit<PressableProps, "children"> & {
 export function Button({ style, label, leadingIcon, trailingIcon, ...props }: ButtonProps) {
 	const hasIcons = leadingIcon != null || trailingIcon != null
 
-	const textElement = <SansSerifText style={tw`text-stone-200 font-medium`}>{label}</SansSerifText>
+	const textElement = <SansSerifText style={tw`text-stone-100 dark:text-stone-200 font-medium`}>{label}</SansSerifText>
 
 	return (
 		<Pressable style={[tw`rounded-full bg-teal-600 px-4 py-3 w-fit`, style]} {...props}>
@@ -28,3 +39,5 @@ export function Button({ style, label, leadingIcon, trailingIcon, ...props }: Bu
 		</Pressable>
 	)
 }
+
+Button.Icon = ButtonIcon

apps/aelis-client/src/constants/theme.ts

@@ -1,53 +0,0 @@
-/**
- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
- */
-
-import { Platform } from "react-native"
-
-const tintColorLight = "#0a7ea4"
-const tintColorDark = "#fff"
-
-export const Colors = {
-	light: {
-		text: "#11181C",
-		background: "#fff",
-		tint: tintColorLight,
-		icon: "#687076",
-		tabIconDefault: "#687076",
-		tabIconSelected: tintColorLight,
-	},
-	dark: {
-		text: "#ECEDEE",
-		background: "#151718",
-		tint: tintColorDark,
-		icon: "#9BA1A6",
-		tabIconDefault: "#9BA1A6",
-		tabIconSelected: tintColorDark,
-	},
-}
-
-export const Fonts = Platform.select({
-	ios: {
-		/** iOS `UIFontDescriptorSystemDesignDefault` */
-		sans: "system-ui",
-		/** iOS `UIFontDescriptorSystemDesignSerif` */
-		serif: "ui-serif",
-		/** iOS `UIFontDescriptorSystemDesignRounded` */
-		rounded: "ui-rounded",
-		/** iOS `UIFontDescriptorSystemDesignMonospaced` */
-		mono: "ui-monospace",
-	},
-	default: {
-		sans: "normal",
-		serif: "serif",
-		rounded: "normal",
-		mono: "monospace",
-	},
-	web: {
-		sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-		serif: "Georgia, 'Times New Roman', serif",
-		rounded: "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
-		mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-	},
-})

apps/aelis-client/src/hooks/use-color-scheme.ts

@@ -1 +0,0 @@
-export { useColorScheme } from "react-native"

apps/aelis-client/src/hooks/use-color-scheme.web.ts

@@ -1,21 +0,0 @@
-import { useEffect, useState } from "react"
-import { useColorScheme as useRNColorScheme } from "react-native"
-
-/**
- * To support static rendering, this value needs to be re-calculated on the client side for web
- */
-export function useColorScheme() {
-	const [hasHydrated, setHasHydrated] = useState(false)
-
-	useEffect(() => {
-		setHasHydrated(true)
-	}, [])
-
-	const colorScheme = useRNColorScheme()
-
-	if (hasHydrated) {
-		return colorScheme
-	}
-
-	return "light"
-}

apps/aelis-client/src/hooks/use-theme-color.ts

@@ -1,21 +0,0 @@
-/**
- * Learn more about light and dark modes:
- * https://docs.expo.dev/guides/color-schemes/
- */
-
-import { Colors } from "@/constants/theme"
-import { useColorScheme } from "@/hooks/use-color-scheme"
-
-export function useThemeColor(
-	props: { light?: string; dark?: string },
-	colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
-) {
-	const theme = useColorScheme() ?? "light"
-	const colorFromProps = props[theme]
-
-	if (colorFromProps) {
-		return colorFromProps
-	} else {
-		return Colors[theme][colorName]
-	}
-}

apps/aelis-client/src/json-render/catalog.ts

@@ -0,0 +1,68 @@
+import { defineCatalog } from "@json-render/core"
+import { schema } from "@json-render/react-native/schema"
+import { z } from "zod"
+
+export const catalog = defineCatalog(schema, {
+	components: {
+		View: {
+			props: z.object({
+				style: z.string().nullable(),
+			}),
+			slots: ["default"],
+			description:
+				"Generic layout container. The style prop accepts a twrnc class string (e.g. 'flex-row gap-2 p-4 items-center').",
+			example: { style: "flex-row gap-2 p-4" },
+		},
+		Button: {
+			props: z.object({
+				label: z.string(),
+				leadingIcon: z.string().nullable(),
+				trailingIcon: z.string().nullable(),
+			}),
+			events: ["press"],
+			slots: [],
+			description:
+				"Pressable button with a label and optional Feather icons. Icon values are Feather icon names (e.g. 'plus', 'arrow-right'). Bind on.press to trigger an action.",
+			example: { label: "Add item", leadingIcon: "plus", trailingIcon: null },
+		},
+		FeedCard: {
+			props: z.object({
+				style: z.string().nullable(),
+			}),
+			slots: ["default"],
+			description: "Bordered card container for feed content. The style prop accepts a twrnc class string.",
+			example: { style: "p-4 gap-2" },
+		},
+		SansSerifText: {
+			props: z.object({
+				text: z.string(),
+				style: z.string().nullable(),
+			}),
+			slots: [],
+			description:
+				"Sans-serif text (Inter font). The style prop accepts a twrnc class string for size, weight, color, etc.",
+			example: { text: "Hello world", style: "text-base font-medium" },
+		},
+		SerifText: {
+			props: z.object({
+				text: z.string(),
+				style: z.string().nullable(),
+			}),
+			slots: [],
+			description:
+				"Serif text (Source Serif 4 font). The style prop accepts a twrnc class string for size, color, etc.",
+			example: { text: "Heading", style: "text-xl" },
+		},
+		MonospaceText: {
+			props: z.object({
+				text: z.string(),
+				style: z.string().nullable(),
+			}),
+			slots: [],
+			description:
+				"Monospace text (Menlo font). The style prop accepts a twrnc class string for size, color, etc.",
+			example: { text: "const x = 42", style: "text-sm" },
+		},
+	},
+	actions: {},
+})

apps/aelis-client/src/json-render/index.ts

@@ -0,0 +1,2 @@
+export { catalog } from "./catalog"
+export { registry } from "./registry"

apps/aelis-client/src/json-render/registry.tsx

@@ -0,0 +1,39 @@
+import { defineRegistry } from "@json-render/react-native"
+import { View } from "react-native"
+import tw from "twrnc"
+
+import { Button } from "@/components/ui/button"
+import { FeedCard } from "@/components/ui/feed-card"
+import { MonospaceText } from "@/components/ui/monospace-text"
+import { SansSerifText } from "@/components/ui/sans-serif-text"
+import { SerifText } from "@/components/ui/serif-text"
+
+import { catalog } from "./catalog"
+
+type ButtonIconName = React.ComponentProps<typeof Button.Icon>["name"]
+
+export const { registry } = defineRegistry(catalog, {
+	components: {
+		View: ({ props, children }) => <View style={props.style ? tw`${props.style}` : undefined}>{children}</View>,
+		Button: ({ props, emit }) => (
+			<Button
+				label={props.label}
+				leadingIcon={props.leadingIcon ? <Button.Icon name={props.leadingIcon as ButtonIconName} /> : undefined}
+				trailingIcon={props.trailingIcon ? <Button.Icon name={props.trailingIcon as ButtonIconName} /> : undefined}
+				onPress={() => emit("press")}
+			/>
+		),
+		FeedCard: ({ props, children }) => (
+			<FeedCard style={props.style ? tw`${props.style}` : undefined}>{children}</FeedCard>
+		),
+		SansSerifText: ({ props }) => (
+			<SansSerifText style={props.style ? tw`${props.style}` : undefined}>{props.text}</SansSerifText>
+		),
+		SerifText: ({ props }) => (
+			<SerifText style={props.style ? tw`${props.style}` : undefined}>{props.text}</SerifText>
+		),
+		MonospaceText: ({ props }) => (
+			<MonospaceText style={props.style ? tw`${props.style}` : undefined}>{props.text}</MonospaceText>
+		),
+	},
+})

bun.lock

@@ -42,6 +42,7 @@
         "@expo-google-fonts/inter": "^0.4.2",
         "@expo-google-fonts/source-serif-4": "^0.4.1",
         "@expo/vector-icons": "^15.0.3",
+        "@json-render/react-native": "^0.13.0",
         "@react-navigation/bottom-tabs": "^7.4.0",
         "@react-navigation/elements": "^2.6.3",
         "@react-navigation/native": "^7.1.8",
@@ -70,6 +71,7 @@
         "react-native-web": "~0.21.0",
         "react-native-worklets": "0.5.1",
         "twrnc": "^4.16.0",
+        "zod": "^4.3.6",
       },
       "devDependencies": {
         "@types/react": "~19.1.0",
@@ -657,6 +659,8 @@
 
     "@json-render/core": ["@json-render/core@0.12.1", "", { "dependencies": { "zod": "^4.3.6" } }, "sha512-1tV/481GPHmIRd6lXfWcTaIslQusmDg5lzcSBzWLkSXjF9sjjyOQL090in7uHT4tOMWkdmlEJOW5H9C72PsUEQ=="],
 
+    "@json-render/react-native": ["@json-render/react-native@0.13.0", "", { "dependencies": { "@json-render/core": "0.13.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-native": ">=0.71.0", "zod": "^4.0.0" } }, "sha512-uUrK28xPb7LuyYsi9cTnvrnXnVBG0OwU5Up35aaXwcWMLrfqxJ7oWfF97HlDvZIckQtm0VEngAXhHMW97qBEkg=="],
+
     "@mjackson/node-fetch-server": ["@mjackson/node-fetch-server@0.2.0", "", {}, "sha512-EMlH1e30yzmTpGLQjlFmaDAjyOeZhng1/XCd7DExR8PNAnG/G1tyruZxEoUe11ClnwGhGrtsdnyyUx1frSzjng=="],
 
     "@mongodb-js/saslprep": ["@mongodb-js/saslprep@1.4.6", "", { "dependencies": { "sparse-bitfield": "^3.0.3" } }, "sha512-y+x3H1xBZd38n10NZF/rEBlvDOOMQ6LKUTHqr8R9VkJ+mmQOYtJFxIlkkK8fZrtOiL6VixbOBWMbZGBdal3Z1g=="],
@@ -3457,6 +3461,8 @@
 
     "@jest/transform/write-file-atomic": ["write-file-atomic@4.0.2", "", { "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^3.0.7" } }, "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg=="],
 
+    "@json-render/react-native/@json-render/core": ["@json-render/core@0.13.0", "", { "dependencies": { "zod": "^4.3.6" } }, "sha512-CXmCsc8BHDRq45ScVd+qgvjTbwZHPVpVD05WnTqgDxqfY3LGXu5vxaQRSwYoEodg/DGcZq/4HSj4ipVvrzy3qQ=="],
+
     "@mrleebo/prisma-ast/lilconfig": ["lilconfig@2.1.0", "", {}, "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="],
 
     "@oclif/core/minimatch": ["minimatch@10.2.4", "", { "dependencies": { "brace-expansion": "^5.0.2" } }, "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg=="],