feat(client): add component library and simplify routing

Remove tab layout, explore page, modal, and unused template
components. Replace with single-page layout and a dev component
showcase with per-component detail pages.

- Add Button with label prop, leading/trailing icon support
- Add FeedCard, SerifText, SansSerifText, MonospaceText
- Add colocated *.showcase.tsx files for each component
- Use Stack navigator with themed headers

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

.ona/automations.yaml

@@ -1,8 +1,8 @@
 services:
   expo:
     name: Expo Dev Server
-    description: Expo development server for aris-client
+    description: Expo development server for aelis-client
     triggeredBy:
       - postDevcontainerStart
     commands:
-      start: cd apps/aris-client && ./scripts/run-dev-server.sh
+      start: cd apps/aelis-client && ./scripts/run-dev-server.sh

AGENTS.md

@@ -2,7 +2,7 @@
 
 ## Project
 
-ARIS is an AI-powered personal assistant that aggregates data from various sources into a contextual feed. Monorepo with `packages/` (shared libraries) and `apps/` (applications).
+AELIS is an AI-powered personal assistant that aggregates data from various sources into a contextual feed. Monorepo with `packages/` (shared libraries) and `apps/` (applications).
 
 ## Commands
 

README.md

@@ -1,4 +1,4 @@
-# aris
+# aelis
 
 To install dependencies:
 
@@ -8,14 +8,14 @@ bun install
 
 ## Packages
 
-### @aris/source-tfl
+### @aelis/source-tfl
 
 TfL (Transport for London) feed source for tube, overground, and Elizabeth line alerts.
 
 #### Testing
 
 ```bash
-cd packages/aris-source-tfl
+cd packages/aelis-source-tfl
 bun run test
 ```
 

apps/aelis-backend/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "@aris/backend",
+	"name": "@aelis/backend",
 	"version": "0.0.0",
 	"type": "module",
 	"main": "src/server.ts",
@@ -9,12 +9,12 @@
 		"test": "bun test src/"
 	},
 	"dependencies": {
-		"@aris/core": "workspace:*",
-		"@aris/source-caldav": "workspace:*",
-		"@aris/source-google-calendar": "workspace:*",
-		"@aris/source-location": "workspace:*",
-		"@aris/source-tfl": "workspace:*",
-		"@aris/source-weatherkit": "workspace:*",
+		"@aelis/core": "workspace:*",
+		"@aelis/source-caldav": "workspace:*",
+		"@aelis/source-google-calendar": "workspace:*",
+		"@aelis/source-location": "workspace:*",
+		"@aelis/source-tfl": "workspace:*",
+		"@aelis/source-weatherkit": "workspace:*",
 		"@openrouter/sdk": "^0.9.11",
 		"arktype": "^2.1.29",
 		"better-auth": "^1",

apps/aelis-backend/src/auth/session-middleware.ts

@@ -61,7 +61,7 @@ export async function getSessionFromHeaders(
 }
 
 /**
- * Test-only middleware that injects a fake user and session.
+ * Dev/test middleware that injects a fake user and session.
  * Pass userId to simulate an authenticated request, or omit to get 401.
  */
 export function mockAuthSessionMiddleware(userId?: string): AuthSessionMiddleware {
@@ -69,8 +69,34 @@ export function mockAuthSessionMiddleware(userId?: string): AuthSessionMiddlewar
 		if (!userId) {
 			return c.json({ error: "Unauthorized" }, 401)
 		}
-		c.set("user", { id: userId } as AuthUser)
-		c.set("session", { id: "mock-session" } as AuthSession)
+
+		const now = new Date()
+		const expiresAt = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)
+
+		const user: AuthUser = {
+			id: "k7Gx2mPqRvNwYs9TdLfA4bHcJeUo1iZn",
+			name: "Dev User",
+			email: "dev@aelis.local",
+			emailVerified: true,
+			image: null,
+			createdAt: now,
+			updatedAt: now,
+		}
+
+		const session: AuthSession = {
+			id: "Wt3FvBpXaQrMhD8sKjE6LcYn0gUz5iRo",
+			userId: "k7Gx2mPqRvNwYs9TdLfA4bHcJeUo1iZn",
+			token: "Vb9CxNfRm2KwQs7TjPeA5dLhYg0UoZi4",
+			expiresAt,
+			ipAddress: "127.0.0.1",
+			userAgent: "aelis-dev",
+			createdAt: now,
+			updatedAt: now,
+		}
+
+		c.set("user", user)
+		c.set("session", session)
+
 		await next()
 	}
 }

apps/aelis-backend/src/enhancement/enhance-feed.ts

@@ -1,4 +1,4 @@
-import type { FeedItem } from "@aris/core"
+import type { FeedItem } from "@aelis/core"
 
 import type { LlmClient } from "./llm-client.ts"
 

apps/aelis-backend/src/enhancement/merge.test.ts

@@ -1,4 +1,4 @@
-import type { FeedItem } from "@aris/core"
+import type { FeedItem } from "@aelis/core"
 
 import { describe, expect, test } from "bun:test"
 

apps/aelis-backend/src/enhancement/merge.ts

@@ -1,4 +1,4 @@
-import type { FeedItem } from "@aris/core"
+import type { FeedItem } from "@aelis/core"
 
 import type { EnhancementResult } from "./schema.ts"
 

apps/aelis-backend/src/enhancement/prompt-builder.test.ts

@@ -1,4 +1,4 @@
-import type { FeedItem } from "@aris/core"
+import type { FeedItem } from "@aelis/core"
 
 import { describe, expect, test } from "bun:test"
 

apps/aelis-backend/src/enhancement/prompt-builder.ts

@@ -1,7 +1,7 @@
-import type { FeedItem } from "@aris/core"
+import type { FeedItem } from "@aelis/core"
 
-import { CalDavFeedItemType } from "@aris/source-caldav"
-import { CalendarFeedItemType } from "@aris/source-google-calendar"
+import { CalDavFeedItemType } from "@aelis/source-caldav"
+import { CalendarFeedItemType } from "@aelis/source-google-calendar"
 
 import systemPromptBase from "./prompts/system.txt"
 

apps/aelis-backend/src/enhancement/prompts/system.txt

@@ -1,4 +1,4 @@
-You are ARIS, a personal assistant. You enhance a user's feed by filling slots and optionally generating synthetic items.
+You are AELIS, a personal assistant. You enhance a user's feed by filling slots and optionally generating synthetic items.
 
 The user message is a JSON object with:
 - "items": feed items with data and named slots to fill. Each slot has a description of what to write.

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

@@ -1,4 +1,4 @@
-import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aris/core"
+import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aelis/core"
 
 import { describe, expect, test } from "bun:test"
 import { Hono } from "hono"

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

@@ -45,7 +45,7 @@ async function handleUpdateLocation(c: Context<Env>) {
 	const user = c.get("user")!
 	const sessionManager = c.get("sessionManager")
 	const session = sessionManager.getOrCreate(user.id)
-	await session.engine.executeAction("aris.location", "update-location", {
+	await session.engine.executeAction("aelis.location", "update-location", {
 		lat: result.lat,
 		lng: result.lng,
 		accuracy: result.accuracy,

apps/aelis-backend/src/server.ts

@@ -1,8 +1,8 @@
-import { LocationSource } from "@aris/source-location"
+import { LocationSource } from "@aelis/source-location"
 import { Hono } from "hono"
 
 import { registerAuthHandlers } from "./auth/http.ts"
-import { requireSession } from "./auth/session-middleware.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"
@@ -43,10 +43,16 @@ function main() {
 
 	app.get("/health", (c) => c.json({ status: "ok" }))
 
-	registerAuthHandlers(app)
+	const isDev = process.env.NODE_ENV !== "production"
+	const authSessionMiddleware = isDev ? mockAuthSessionMiddleware("dev-user") : requireSession
+
+	if (!isDev) {
+		registerAuthHandlers(app)
+	}
+
 	registerFeedHttpHandlers(app, {
 		sessionManager,
-		authSessionMiddleware: requireSession,
+		authSessionMiddleware,
 	})
 	registerLocationHttpHandlers(app, { sessionManager })
 

apps/aelis-backend/src/session/feed-source-provider.ts

@@ -1,4 +1,4 @@
-import type { FeedSource } from "@aris/core"
+import type { FeedSource } from "@aelis/core"
 
 export interface FeedSourceProvider {
 	feedSourceForUser(userId: string): FeedSource

apps/aelis-backend/src/session/user-session-manager.test.ts

@@ -1,6 +1,6 @@
-import type { WeatherKitClient, WeatherKitResponse } from "@aris/source-weatherkit"
+import type { WeatherKitClient, WeatherKitResponse } from "@aelis/source-weatherkit"
 
-import { LocationSource } from "@aris/source-location"
+import { LocationSource } from "@aelis/source-location"
 import { describe, expect, mock, test } from "bun:test"
 
 import { WeatherSourceProvider } from "../weather/provider.ts"
@@ -44,8 +44,8 @@ describe("UserSessionManager", () => {
 		const session1 = manager.getOrCreate("user-1")
 		const session2 = manager.getOrCreate("user-2")
 
-		const source1 = session1.getSource<LocationSource>("aris.location")
-		const source2 = session2.getSource<LocationSource>("aris.location")
+		const source1 = session1.getSource<LocationSource>("aelis.location")
+		const source2 = session2.getSource<LocationSource>("aelis.location")
 
 		expect(source1).not.toBe(source2)
 	})
@@ -83,7 +83,7 @@ describe("UserSessionManager", () => {
 
 		const session = manager.getOrCreate("user-1")
 
-		expect(session.getSource("aris.weather")).toBeDefined()
+		expect(session.getSource("aelis.weather")).toBeDefined()
 	})
 
 	test("accepts mixed providers", () => {
@@ -94,8 +94,8 @@ describe("UserSessionManager", () => {
 
 		const session = manager.getOrCreate("user-1")
 
-		expect(session.getSource("aris.location")).toBeDefined()
-		expect(session.getSource("aris.weather")).toBeDefined()
+		expect(session.getSource("aelis.location")).toBeDefined()
+		expect(session.getSource("aelis.weather")).toBeDefined()
 	})
 
 	test("refresh returns feed result through session", async () => {
@@ -114,14 +114,14 @@ describe("UserSessionManager", () => {
 		const manager = new UserSessionManager({ providers: [() => new LocationSource()] })
 
 		const session = manager.getOrCreate("user-1")
-		await session.engine.executeAction("aris.location", "update-location", {
+		await session.engine.executeAction("aelis.location", "update-location", {
 			lat: 51.5074,
 			lng: -0.1278,
 			accuracy: 10,
 			timestamp: new Date(),
 		})
 
-		const source = session.getSource<LocationSource>("aris.location")
+		const source = session.getSource<LocationSource>("aelis.location")
 		expect(source?.lastLocation?.lat).toBe(51.5074)
 	})
 
@@ -132,7 +132,7 @@ describe("UserSessionManager", () => {
 		const session = manager.getOrCreate("user-1")
 		session.engine.subscribe(callback)
 
-		await session.engine.executeAction("aris.location", "update-location", {
+		await session.engine.executeAction("aelis.location", "update-location", {
 			lat: 51.5074,
 			lng: -0.1278,
 			accuracy: 10,
@@ -156,7 +156,7 @@ describe("UserSessionManager", () => {
 
 		// Create new session and push location — old callback should not fire
 		const session2 = manager.getOrCreate("user-1")
-		await session2.engine.executeAction("aris.location", "update-location", {
+		await session2.engine.executeAction("aelis.location", "update-location", {
 			lat: 51.5074,
 			lng: -0.1278,
 			accuracy: 10,

apps/aelis-backend/src/session/user-session.test.ts

@@ -1,6 +1,6 @@
-import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aris/core"
+import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aelis/core"
 
-import { LocationSource } from "@aris/source-location"
+import { LocationSource } from "@aelis/source-location"
 import { describe, expect, test } from "bun:test"
 
 import { UserSession } from "./user-session.ts"
@@ -36,7 +36,7 @@ describe("UserSession", () => {
 		const location = new LocationSource()
 		const session = new UserSession([location])
 
-		const result = session.getSource<LocationSource>("aris.location")
+		const result = session.getSource<LocationSource>("aelis.location")
 
 		expect(result).toBe(location)
 	})
@@ -59,7 +59,7 @@ describe("UserSession", () => {
 		const location = new LocationSource()
 		const session = new UserSession([location])
 
-		await session.engine.executeAction("aris.location", "update-location", {
+		await session.engine.executeAction("aelis.location", "update-location", {
 			lat: 51.5,
 			lng: -0.1,
 			accuracy: 10,

apps/aelis-backend/src/session/user-session.ts

@@ -1,4 +1,4 @@
-import { FeedEngine, type FeedItem, type FeedResult, type FeedSource } from "@aris/core"
+import { FeedEngine, type FeedItem, type FeedResult, type FeedSource } from "@aelis/core"
 
 import type { FeedEnhancer } from "../enhancement/enhance-feed.ts"
 

apps/aelis-backend/src/tfl/provider.ts

@@ -1,4 +1,4 @@
-import { TflSource, type ITflApi } from "@aris/source-tfl"
+import { TflSource, type ITflApi } from "@aelis/source-tfl"
 
 import type { FeedSourceProvider } from "../session/feed-source-provider.ts"
 

apps/aelis-backend/src/weather/provider.ts

@@ -1,4 +1,4 @@
-import { WeatherSource, type WeatherSourceOptions } from "@aris/source-weatherkit"
+import { WeatherSource, type WeatherSourceOptions } from "@aelis/source-weatherkit"
 
 import type { FeedSourceProvider } from "../session/feed-source-provider.ts"
 

apps/aelis-client/app.json

@@ -1,11 +1,11 @@
 {
 	"expo": {
-		"name": "Aris",
-		"slug": "aris-client",
+		"name": "Aelis",
+		"slug": "aelis-client",
 		"version": "1.0.0",
 		"orientation": "portrait",
 		"icon": "./assets/images/icon.png",
-		"scheme": "aris",
+		"scheme": "aelis",
 		"userInterfaceStyle": "automatic",
 		"newArchEnabled": true,
 		"ios": {
@@ -15,7 +15,7 @@
 				},
 				"ITSAppUsesNonExemptEncryption": false
 			},
-			"bundleIdentifier": "sh.nym.aris"
+			"bundleIdentifier": "sh.nym.aelis"
 		},
 		"android": {
 			"adaptiveIcon": {
@@ -26,7 +26,7 @@
 			},
 			"edgeToEdgeEnabled": true,
 			"predictiveBackGestureEnabled": false,
-			"package": "sh.nym.aris"
+			"package": "sh.nym.aelis"
 		},
 		"web": {
 			"output": "static",

apps/aelis-client/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "aris-client",
+	"name": "aelis-client",
 	"version": "1.0.0",
 	"private": true,
 	"main": "expo-router/entry",

apps/aelis-client/src/app/_layout.tsx

@@ -0,0 +1,45 @@
+import "react-native-reanimated"
+import { Stack } from "expo-router"
+import { StatusBar } from "expo-status-bar"
+import { useColorScheme } from "react-native"
+import tw, { useDeviceContext } from "twrnc"
+
+export default function RootLayout() {
+	useDeviceContext(tw)
+	const colorScheme = useColorScheme()
+	const headerBg = colorScheme === "dark" ? "#1c1917" : "#f5f5f4"
+	const headerTint = colorScheme === "dark" ? "#e7e5e4" : "#1c1917"
+
+	return (
+		<>
+			<Stack
+				screenOptions={{
+					headerShown: false,
+					contentStyle: { backgroundColor: headerBg },
+				}}
+			>
+				<Stack.Screen
+					name="components/index"
+					options={{
+						headerShown: true,
+						title: "Components",
+						headerStyle: { backgroundColor: headerBg },
+						headerTintColor: headerTint,
+						headerShadowVisible: false,
+					}}
+				/>
+				<Stack.Screen
+					name="components/[name]"
+					options={{
+						headerShown: true,
+						title: "",
+						headerStyle: { backgroundColor: headerBg },
+						headerTintColor: headerTint,
+						headerShadowVisible: false,
+					}}
+				/>
+			</Stack>
+			<StatusBar style="auto" />
+		</>
+	)
+}

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

@@ -0,0 +1,46 @@
+import { useLocalSearchParams, useNavigation } from "expo-router"
+import { useEffect } from "react"
+import { ScrollView, View } from "react-native"
+import tw from "twrnc"
+
+import { buttonShowcase } from "@/components/ui/button.showcase"
+import { feedCardShowcase } from "@/components/ui/feed-card.showcase"
+import { monospaceTextShowcase } from "@/components/ui/monospace-text.showcase"
+import { sansSerifTextShowcase } from "@/components/ui/sans-serif-text.showcase"
+import { serifTextShowcase } from "@/components/ui/serif-text.showcase"
+import { type Showcase } from "@/components/showcase"
+import { SansSerifText } from "@/components/ui/sans-serif-text"
+
+const showcases: Record<string, Showcase> = {
+	button: buttonShowcase,
+	"feed-card": feedCardShowcase,
+	"serif-text": serifTextShowcase,
+	"sans-serif-text": sansSerifTextShowcase,
+	"monospace-text": monospaceTextShowcase,
+}
+
+export default function ComponentDetailScreen() {
+	const { name } = useLocalSearchParams<{ name: string }>()
+	const navigation = useNavigation()
+	const showcase = showcases[name]
+
+	useEffect(() => {
+		if (showcase) {
+			navigation.setOptions({ title: showcase.title })
+		}
+	}, [navigation, showcase])
+
+	if (!showcase) {
+		return (
+			<View style={tw`bg-stone-100 dark:bg-stone-900 flex-1 items-center justify-center`}>
+				<SansSerifText>Component not found</SansSerifText>
+			</View>
+		)
+	}
+
+	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()}
+		</ScrollView>
+	)
+}

apps/aelis-client/src/app/components/index.tsx

@@ -0,0 +1,37 @@
+import { Link } from "expo-router"
+import { FlatList, Pressable, View } from "react-native"
+import tw from "twrnc"
+
+import { SansSerifText } from "@/components/ui/sans-serif-text"
+
+const components = [
+	{ name: "button", label: "Button" },
+	{ name: "feed-card", label: "FeedCard" },
+	{ name: "serif-text", label: "SerifText" },
+	{ name: "sans-serif-text", label: "SansSerifText" },
+	{ name: "monospace-text", label: "MonospaceText" },
+] as const
+
+export default function ComponentsScreen() {
+	return (
+		<View style={tw`flex-1`}>
+			<View style={tw`mx-4 mt-4 rounded-xl border border-stone-200 dark:border-stone-800 overflow-hidden`}>
+				<FlatList
+					data={components}
+					keyExtractor={(item) => item.name}
+					scrollEnabled={false}
+					ItemSeparatorComponent={() => (
+						<View style={tw`border-b border-stone-200 dark:border-stone-800`} />
+					)}
+					renderItem={({ item }) => (
+						<Link href={`/components/${item.name}`} asChild>
+							<Pressable style={tw`px-4 py-3`}>
+								<SansSerifText style={tw`text-base`}>{item.label}</SansSerifText>
+							</Pressable>
+						</Link>
+					)}
+				/>
+			</View>
+		</View>
+	)
+}

apps/aelis-client/src/app/index.tsx

@@ -0,0 +1,28 @@
+import { Link } from "expo-router"
+import { Pressable } from "react-native"
+import { SafeAreaView } from "react-native-safe-area-context"
+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"
+
+export default function HomeScreen() {
+	return (
+		<SafeAreaView style={tw`bg-stone-100 dark:bg-stone-900 flex-1 px-5 pt-6 gap-4`}>
+			<FeedCard>
+				<SerifText style={tw`text-4xl`}>Hello world asdsadsa</SerifText>
+				<SansSerifText style={tw`text-4xl font-bold`}>Hello world</SansSerifText>
+				<MonospaceText style={tw`text-4xl`}>asdjsakljdl</MonospaceText>
+				<Button style={tw`self-start`} label="Test" />
+			</FeedCard>
+			<Link href="/components" asChild>
+				<Pressable>
+					<SansSerifText style={tw`text-teal-600`}>View component library</SansSerifText>
+				</Pressable>
+			</Link>
+		</SafeAreaView>
+	)
+}

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

@@ -0,0 +1,18 @@
+import { View } from "react-native"
+import tw from "twrnc"
+
+import { SansSerifText } from "./ui/sans-serif-text"
+
+export type Showcase = {
+	title: string
+	component: () => React.ReactNode
+}
+
+export function Section({ title, children }: { title: string; children: React.ReactNode }) {
+	return (
+		<View style={tw`gap-3`}>
+			<SansSerifText style={tw`text-sm text-stone-500 dark:text-stone-400`}>{title}</SansSerifText>
+			{children}
+		</View>
+	)
+}

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

@@ -0,0 +1,43 @@
+import Feather from "@expo/vector-icons/Feather"
+import { View } from "react-native"
+import tw from "twrnc"
+
+import { Button } from "./button"
+import { type Showcase, Section } from "../showcase"
+
+function ButtonShowcase() {
+	return (
+		<View style={tw`gap-6`}>
+			<Section title="Default">
+				<Button style={tw`self-start`} label="Press me" />
+			</Section>
+			<Section title="Leading icon">
+				<Button
+					style={tw`self-start`}
+					label="Add item"
+					leadingIcon={<Feather name="plus" size={18} color="#e7e5e4" />}
+				/>
+			</Section>
+			<Section title="Trailing icon">
+				<Button
+					style={tw`self-start`}
+					label="Next"
+					trailingIcon={<Feather name="arrow-right" size={18} color="#e7e5e4" />}
+				/>
+			</Section>
+			<Section title="Both icons">
+				<Button
+					style={tw`self-start`}
+					label="Download"
+					leadingIcon={<Feather name="download" size={18} color="#e7e5e4" />}
+					trailingIcon={<Feather name="chevron-down" size={18} color="#e7e5e4" />}
+				/>
+			</Section>
+		</View>
+	)
+}
+
+export const buttonShowcase: Showcase = {
+	title: "Button",
+	component: ButtonShowcase,
+}

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

@@ -0,0 +1,30 @@
+import { type PressableProps, Pressable, View } from "react-native"
+import tw from "twrnc"
+
+import { SansSerifText } from "./sans-serif-text"
+
+type ButtonProps = Omit<PressableProps, "children"> & {
+	label: string
+	leadingIcon?: React.ReactNode
+	trailingIcon?: React.ReactNode
+}
+
+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>
+
+	return (
+		<Pressable style={[tw`rounded-full bg-teal-600 px-4 py-3 w-fit`, style]} {...props}>
+			{hasIcons ? (
+				<View style={tw`flex-row items-center gap-1.5`}>
+					{leadingIcon}
+					{textElement}
+					{trailingIcon}
+				</View>
+			) : (
+				textElement
+			)}
+		</Pressable>
+	)
+}

apps/aelis-client/src/components/ui/feed-card.showcase.tsx

@@ -0,0 +1,32 @@
+import { View } from "react-native"
+import tw from "twrnc"
+
+import { Button } from "./button"
+import { FeedCard } from "./feed-card"
+import { SansSerifText } from "./sans-serif-text"
+import { SerifText } from "./serif-text"
+import { type Showcase, Section } from "../showcase"
+
+function FeedCardShowcase() {
+	return (
+		<View style={tw`gap-6`}>
+			<Section title="Default">
+				<FeedCard style={tw`p-4`}>
+					<SansSerifText>Card content goes here</SansSerifText>
+				</FeedCard>
+			</Section>
+			<Section title="With mixed content">
+				<FeedCard style={tw`p-4 gap-2`}>
+					<SerifText style={tw`text-xl`}>Title</SerifText>
+					<SansSerifText>Body text inside a feed card.</SansSerifText>
+					<Button style={tw`self-start mt-2`} label="Action" />
+				</FeedCard>
+			</Section>
+		</View>
+	)
+}
+
+export const feedCardShowcase: Showcase = {
+	title: "FeedCard",
+	component: FeedCardShowcase,
+}

apps/aelis-client/src/components/ui/feed-card.tsx

@@ -0,0 +1,6 @@
+import { View, type ViewProps } from "react-native"
+import tw from "twrnc"
+
+export function FeedCard({ style, ...props }: ViewProps) {
+	return <View style={[tw`border border-stone-200 dark:border-stone-800 rounded-lg`, style]} {...props} />
+}

apps/aelis-client/src/components/ui/monospace-text.showcase.tsx

@@ -0,0 +1,31 @@
+import { View } from "react-native"
+import tw from "twrnc"
+
+import { MonospaceText } from "./monospace-text"
+import { type Showcase, Section } from "../showcase"
+
+function MonospaceTextShowcase() {
+	return (
+		<View style={tw`gap-6`}>
+			<Section title="Sizes">
+				<View style={tw`gap-2`}>
+					<MonospaceText style={tw`text-sm`}>Small monospace text</MonospaceText>
+					<MonospaceText style={tw`text-base`}>Base monospace text</MonospaceText>
+					<MonospaceText style={tw`text-xl`}>Extra large monospace text</MonospaceText>
+					<MonospaceText style={tw`text-3xl`}>3XL monospace text</MonospaceText>
+				</View>
+			</Section>
+			<Section title="Code-like usage">
+				<View style={tw`bg-stone-200 dark:bg-stone-800 rounded-lg p-3`}>
+					<MonospaceText style={tw`text-sm`}>{"const x = 42;"}</MonospaceText>
+					<MonospaceText style={tw`text-sm`}>{"console.log(x);"}</MonospaceText>
+				</View>
+			</Section>
+		</View>
+	)
+}
+
+export const monospaceTextShowcase: Showcase = {
+	title: "MonospaceText",
+	component: MonospaceTextShowcase,
+}