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>

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/server.ts

@@ -2,7 +2,7 @@ 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-client/src/app/(tabs)/_layout.tsx

@@ -1,36 +0,0 @@
-import { Tabs } from "expo-router"
-import React from "react"
-
-import { HapticTab } from "@/components/haptic-tab"
-import { IconSymbol } from "@/components/ui/icon-symbol"
-import { Colors } from "@/constants/theme"
-import { useColorScheme } from "@/hooks/use-color-scheme"
-
-export default function TabLayout() {
-	const colorScheme = useColorScheme()
-
-	return (
-		<Tabs
-			screenOptions={{
-				tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
-				headerShown: false,
-				tabBarButton: HapticTab,
-			}}
-		>
-			<Tabs.Screen
-				name="index"
-				options={{
-					title: "Home",
-					tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
-				}}
-			/>
-			<Tabs.Screen
-				name="explore"
-				options={{
-					title: "Explore",
-					tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
-				}}
-			/>
-		</Tabs>
-	)
-}

apps/aelis-client/src/app/(tabs)/explore.tsx

@@ -1,114 +0,0 @@
-import { Image } from "expo-image"
-import { Platform, StyleSheet } from "react-native"
-
-import { ExternalLink } from "@/components/external-link"
-import ParallaxScrollView from "@/components/parallax-scroll-view"
-import { ThemedText } from "@/components/themed-text"
-import { ThemedView } from "@/components/themed-view"
-import { Collapsible } from "@/components/ui/collapsible"
-import { IconSymbol } from "@/components/ui/icon-symbol"
-import { Fonts } from "@/constants/theme"
-
-export default function TabTwoScreen() {
-	return (
-		<ParallaxScrollView
-			headerBackgroundColor={{ light: "#D0D0D0", dark: "#353636" }}
-			headerImage={
-				<IconSymbol
-					size={310}
-					color="#808080"
-					name="chevron.left.forwardslash.chevron.right"
-					style={styles.headerImage}
-				/>
-			}
-		>
-			<ThemedView style={styles.titleContainer}>
-				<ThemedText
-					type="title"
-					style={{
-						fontFamily: Fonts.rounded,
-					}}
-				>
-					Explore
-				</ThemedText>
-			</ThemedView>
-			<ThemedText>This app includes example code to help you get started.</ThemedText>
-			<Collapsible title="File-based routing">
-				<ThemedText>
-					This app has two screens:{" "}
-					<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{" "}
-					<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
-				</ThemedText>
-				<ThemedText>
-					The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{" "}
-					sets up the tab navigator.
-				</ThemedText>
-				<ExternalLink href="https://docs.expo.dev/router/introduction">
-					<ThemedText type="link">Learn more</ThemedText>
-				</ExternalLink>
-			</Collapsible>
-			<Collapsible title="Android, iOS, and web support">
-				<ThemedText>
-					You can open this project on Android, iOS, and the web. To open the web version, press{" "}
-					<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
-				</ThemedText>
-			</Collapsible>
-			<Collapsible title="Images">
-				<ThemedText>
-					For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{" "}
-					<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
-					different screen densities
-				</ThemedText>
-				<Image
-					source={require("@assets/images/react-logo.png")}
-					style={{ width: 100, height: 100, alignSelf: "center" }}
-				/>
-				<ExternalLink href="https://reactnative.dev/docs/images">
-					<ThemedText type="link">Learn more</ThemedText>
-				</ExternalLink>
-			</Collapsible>
-			<Collapsible title="Light and dark mode components">
-				<ThemedText>
-					This template has light and dark mode support. The{" "}
-					<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
-					what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
-				</ThemedText>
-				<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-					<ThemedText type="link">Learn more</ThemedText>
-				</ExternalLink>
-			</Collapsible>
-			<Collapsible title="Animations">
-				<ThemedText>
-					This template includes an example of an animated component. The{" "}
-					<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-					the powerful{" "}
-					<ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
-						react-native-reanimated
-					</ThemedText>{" "}
-					library to create a waving hand animation.
-				</ThemedText>
-				{Platform.select({
-					ios: (
-						<ThemedText>
-							The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{" "}
-							component provides a parallax effect for the header image.
-						</ThemedText>
-					),
-				})}
-			</Collapsible>
-		</ParallaxScrollView>
-	)
-}
-
-const styles = StyleSheet.create({
-	headerImage: {
-		color: "#808080",
-		bottom: -90,
-		left: -35,
-		position: "absolute",
-	},
-	titleContainer: {
-		flexDirection: "row",
-		gap: 8,
-	},
-})

apps/aelis-client/src/app/(tabs)/index.tsx

@@ -1,96 +0,0 @@
-import { Image } from "expo-image"
-import { Link } from "expo-router"
-import { Platform, StyleSheet } from "react-native"
-
-import { HelloWave } from "@/components/hello-wave"
-import ParallaxScrollView from "@/components/parallax-scroll-view"
-import { ThemedText } from "@/components/themed-text"
-import { ThemedView } from "@/components/themed-view"
-
-export default function HomeScreen() {
-	return (
-		<ParallaxScrollView
-			headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
-			headerImage={
-				<Image source={require("@assets/images/partial-react-logo.png")} style={styles.reactLogo} />
-			}
-		>
-			<ThemedView style={styles.titleContainer}>
-				<ThemedText type="title">Welcome!</ThemedText>
-				<HelloWave />
-			</ThemedView>
-			<ThemedView style={styles.stepContainer}>
-				<ThemedText type="subtitle">Step 1: Try it</ThemedText>
-				<ThemedText>
-					Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
-					Press{" "}
-					<ThemedText type="defaultSemiBold">
-						{Platform.select({
-							ios: "cmd + d",
-							android: "cmd + m",
-							web: "F12",
-						})}
-					</ThemedText>{" "}
-					to open developer tools.
-				</ThemedText>
-			</ThemedView>
-			<ThemedView style={styles.stepContainer}>
-				<Link href="/modal">
-					<Link.Trigger>
-						<ThemedText type="subtitle">Step 2: Explore</ThemedText>
-					</Link.Trigger>
-					<Link.Preview />
-					<Link.Menu>
-						<Link.MenuAction title="Action" icon="cube" onPress={() => alert("Action pressed")} />
-						<Link.MenuAction
-							title="Share"
-							icon="square.and.arrow.up"
-							onPress={() => alert("Share pressed")}
-						/>
-						<Link.Menu title="More" icon="ellipsis">
-							<Link.MenuAction
-								title="Delete"
-								icon="trash"
-								destructive
-								onPress={() => alert("Delete pressed")}
-							/>
-						</Link.Menu>
-					</Link.Menu>
-				</Link>
-
-				<ThemedText>
-					{`Tap the Explore tab to learn more about what's included in this starter app.`}
-				</ThemedText>
-			</ThemedView>
-			<ThemedView style={styles.stepContainer}>
-				<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-				<ThemedText>
-					{`When you're ready, run `}
-					<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{" "}
-					<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{" "}
-					<ThemedText type="defaultSemiBold">app</ThemedText> to{" "}
-					<ThemedText type="defaultSemiBold">app-example</ThemedText>.
-				</ThemedText>
-			</ThemedView>
-		</ParallaxScrollView>
-	)
-}
-
-const styles = StyleSheet.create({
-	titleContainer: {
-		flexDirection: "row",
-		alignItems: "center",
-		gap: 8,
-	},
-	stepContainer: {
-		gap: 8,
-		marginBottom: 8,
-	},
-	reactLogo: {
-		height: 178,
-		width: 290,
-		bottom: 0,
-		left: 0,
-		position: "absolute",
-	},
-})

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

@@ -1,23 +1,45 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native"
+import "react-native-reanimated"
 import { Stack } from "expo-router"
 import { StatusBar } from "expo-status-bar"
-import "react-native-reanimated"
+import { useColorScheme } from "react-native"
-import { useColorScheme } from "@/hooks/use-color-scheme"
+import tw, { useDeviceContext } from "twrnc"
-
-export const unstable_settings = {
-	anchor: "(tabs)",
-}
 
 export default function RootLayout() {
+	useDeviceContext(tw)
 	const colorScheme = useColorScheme()
+	const headerBg = colorScheme === "dark" ? "#1c1917" : "#f5f5f4"
+	const headerTint = colorScheme === "dark" ? "#e7e5e4" : "#1c1917"
 
 	return (
-		<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+		<>
-			<Stack>
+			<Stack
-				<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+				screenOptions={{
-				<Stack.Screen name="modal" options={{ presentation: "modal", title: "Modal" }} />
+					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" />
-		</ThemeProvider>
+		</>
 	)
 }

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/app/modal.tsx

@@ -1,29 +0,0 @@
-import { Link } from "expo-router"
-import { StyleSheet } from "react-native"
-
-import { ThemedText } from "@/components/themed-text"
-import { ThemedView } from "@/components/themed-view"
-
-export default function ModalScreen() {
-	return (
-		<ThemedView style={styles.container}>
-			<ThemedText type="title">This is a modal</ThemedText>
-			<Link href="/" dismissTo style={styles.link}>
-				<ThemedText type="link">Go to home screen</ThemedText>
-			</Link>
-		</ThemedView>
-	)
-}
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		alignItems: "center",
-		justifyContent: "center",
-		padding: 20,
-	},
-	link: {
-		marginTop: 15,
-		paddingVertical: 15,
-	},
-})

apps/aelis-client/src/components/external-link.tsx

@@ -1,25 +0,0 @@
-import { Href, Link } from "expo-router"
-import { openBrowserAsync, WebBrowserPresentationStyle } from "expo-web-browser"
-import { type ComponentProps } from "react"
-
-type Props = Omit<ComponentProps<typeof Link>, "href"> & { href: Href & string }
-
-export function ExternalLink({ href, ...rest }: Props) {
-	return (
-		<Link
-			target="_blank"
-			{...rest}
-			href={href}
-			onPress={async (event) => {
-				if (process.env.EXPO_OS !== "web") {
-					// Prevent the default behavior of linking to the default browser on native.
-					event.preventDefault()
-					// Open the link in an in-app browser.
-					await openBrowserAsync(href, {
-						presentationStyle: WebBrowserPresentationStyle.AUTOMATIC,
-					})
-				}
-			}}
-		/>
-	)
-}

apps/aelis-client/src/components/haptic-tab.tsx

@@ -1,18 +0,0 @@
-import { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs"
-import { PlatformPressable } from "@react-navigation/elements"
-import * as Haptics from "expo-haptics"
-
-export function HapticTab(props: BottomTabBarButtonProps) {
-	return (
-		<PlatformPressable
-			{...props}
-			onPressIn={(ev) => {
-				if (process.env.EXPO_OS === "ios") {
-					// Add a soft haptic feedback when pressing down on the tabs.
-					Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
-				}
-				props.onPressIn?.(ev)
-			}}
-		/>
-	)
-}

apps/aelis-client/src/components/hello-wave.tsx

@@ -1,20 +0,0 @@
-import Animated from "react-native-reanimated"
-
-export function HelloWave() {
-	return (
-		<Animated.Text
-			style={{
-				fontSize: 28,
-				lineHeight: 32,
-				marginTop: -6,
-				animationName: {
-					"50%": { transform: [{ rotate: "25deg" }] },
-				},
-				animationIterationCount: 4,
-				animationDuration: "300ms",
-			}}
-		>
-			👋
-		</Animated.Text>
-	)
-}

apps/aelis-client/src/components/parallax-scroll-view.tsx

@@ -1,82 +0,0 @@
-import type { PropsWithChildren, ReactElement } from "react"
-
-import { StyleSheet } from "react-native"
-import Animated, {
-	interpolate,
-	useAnimatedRef,
-	useAnimatedStyle,
-	useScrollOffset,
-} from "react-native-reanimated"
-
-import { ThemedView } from "@/components/themed-view"
-import { useColorScheme } from "@/hooks/use-color-scheme"
-import { useThemeColor } from "@/hooks/use-theme-color"
-
-const HEADER_HEIGHT = 250
-
-type Props = PropsWithChildren<{
-	headerImage: ReactElement
-	headerBackgroundColor: { dark: string; light: string }
-}>
-
-export default function ParallaxScrollView({
-	children,
-	headerImage,
-	headerBackgroundColor,
-}: Props) {
-	const backgroundColor = useThemeColor({}, "background")
-	const colorScheme = useColorScheme() ?? "light"
-	const scrollRef = useAnimatedRef<Animated.ScrollView>()
-	const scrollOffset = useScrollOffset(scrollRef)
-	const headerAnimatedStyle = useAnimatedStyle(() => {
-		return {
-			transform: [
-				{
-					translateY: interpolate(
-						scrollOffset.value,
-						[-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-						[-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75],
-					),
-				},
-				{
-					scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
-				},
-			],
-		}
-	})
-
-	return (
-		<Animated.ScrollView
-			ref={scrollRef}
-			style={{ backgroundColor, flex: 1 }}
-			scrollEventThrottle={16}
-		>
-			<Animated.View
-				style={[
-					styles.header,
-					{ backgroundColor: headerBackgroundColor[colorScheme] },
-					headerAnimatedStyle,
-				]}
-			>
-				{headerImage}
-			</Animated.View>
-			<ThemedView style={styles.content}>{children}</ThemedView>
-		</Animated.ScrollView>
-	)
-}
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-	},
-	header: {
-		height: HEADER_HEIGHT,
-		overflow: "hidden",
-	},
-	content: {
-		flex: 1,
-		padding: 32,
-		gap: 16,
-		overflow: "hidden",
-	},
-})

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/themed-view.tsx

@@ -1,14 +0,0 @@
-import { View, type ViewProps } from "react-native"
-
-import { useThemeColor } from "@/hooks/use-theme-color"
-
-export type ThemedViewProps = ViewProps & {
-	lightColor?: string
-	darkColor?: string
-}
-
-export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
-	const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, "background")
-
-	return <View style={[{ backgroundColor }, style]} {...otherProps} />
-}

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/collapsible.tsx

@@ -1,46 +0,0 @@
-import { PropsWithChildren, useState } from "react"
-import { StyleSheet, TouchableOpacity } from "react-native"
-
-import { ThemedText } from "@/components/themed-text"
-import { ThemedView } from "@/components/themed-view"
-import { IconSymbol } from "@/components/ui/icon-symbol"
-import { Colors } from "@/constants/theme"
-import { useColorScheme } from "@/hooks/use-color-scheme"
-
-export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
-	const [isOpen, setIsOpen] = useState(false)
-	const theme = useColorScheme() ?? "light"
-
-	return (
-		<ThemedView>
-			<TouchableOpacity
-				style={styles.heading}
-				onPress={() => setIsOpen((value) => !value)}
-				activeOpacity={0.8}
-			>
-				<IconSymbol
-					name="chevron.right"
-					size={18}
-					weight="medium"
-					color={theme === "light" ? Colors.light.icon : Colors.dark.icon}
-					style={{ transform: [{ rotate: isOpen ? "90deg" : "0deg" }] }}
-				/>
-
-				<ThemedText type="defaultSemiBold">{title}</ThemedText>
-			</TouchableOpacity>
-			{isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
-		</ThemedView>
-	)
-}
-
-const styles = StyleSheet.create({
-	heading: {
-		flexDirection: "row",
-		alignItems: "center",
-		gap: 6,
-	},
-	content: {
-		marginTop: 6,
-		marginLeft: 24,
-	},
-})

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/icon-symbol.ios.tsx

@@ -1,32 +0,0 @@
-import { SymbolView, SymbolViewProps, SymbolWeight } from "expo-symbols"
-import { StyleProp, ViewStyle } from "react-native"
-
-export function IconSymbol({
-	name,
-	size = 24,
-	color,
-	style,
-	weight = "regular",
-}: {
-	name: SymbolViewProps["name"]
-	size?: number
-	color: string
-	style?: StyleProp<ViewStyle>
-	weight?: SymbolWeight
-}) {
-	return (
-		<SymbolView
-			weight={weight}
-			tintColor={color}
-			resizeMode="scaleAspectFit"
-			name={name}
-			style={[
-				{
-					width: size,
-					height: size,
-				},
-				style,
-			]}
-		/>
-	)
-}

apps/aelis-client/src/components/ui/icon-symbol.tsx

@@ -1,41 +0,0 @@
-// Fallback for using MaterialIcons on Android and web.
-
-import MaterialIcons from "@expo/vector-icons/MaterialIcons"
-import { SymbolWeight, SymbolViewProps } from "expo-symbols"
-import { ComponentProps } from "react"
-import { OpaqueColorValue, type StyleProp, type TextStyle } from "react-native"
-
-type IconMapping = Record<SymbolViewProps["name"], ComponentProps<typeof MaterialIcons>["name"]>
-type IconSymbolName = keyof typeof MAPPING
-
-/**
- * Add your SF Symbols to Material Icons mappings here.
- * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
- * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
- */
-const MAPPING = {
-	"house.fill": "home",
-	"paperplane.fill": "send",
-	"chevron.left.forwardslash.chevron.right": "code",
-	"chevron.right": "chevron-right",
-} as IconMapping
-
-/**
- * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
- * This ensures a consistent look across platforms, and optimal resource usage.
- * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
- */
-export function IconSymbol({
-	name,
-	size = 24,
-	color,
-	style,
-}: {
-	name: IconSymbolName
-	size?: number
-	color: string | OpaqueColorValue
-	style?: StyleProp<TextStyle>
-	weight?: SymbolWeight
-}) {
-	return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />
-}

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,
+}

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

@@ -0,0 +1,10 @@
+import { Text, type TextProps } from "react-native"
+import tw from "twrnc"
+
+export function MonospaceText({ children, style, ...props }: TextProps) {
+	return (
+		<Text style={[tw`text-stone-800 dark:text-stone-200`, { fontFamily: "Menlo" }, style]} {...props}>
+			{children}
+		</Text>
+	)
+}

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

@@ -0,0 +1,34 @@
+import { View } from "react-native"
+import tw from "twrnc"
+
+import { SansSerifText } from "./sans-serif-text"
+import { type Showcase, Section } from "../showcase"
+
+function SansSerifTextShowcase() {
+	return (
+		<View style={tw`gap-6`}>
+			<Section title="Sizes">
+				<View style={tw`gap-2`}>
+					<SansSerifText style={tw`text-sm`}>Small sans-serif text</SansSerifText>
+					<SansSerifText style={tw`text-base`}>Base sans-serif text</SansSerifText>
+					<SansSerifText style={tw`text-xl`}>Extra large sans-serif text</SansSerifText>
+					<SansSerifText style={tw`text-3xl`}>3XL sans-serif text</SansSerifText>
+				</View>
+			</Section>
+			<Section title="Weights">
+				<View style={tw`gap-2`}>
+					<SansSerifText style={tw`font-light`}>Light weight</SansSerifText>
+					<SansSerifText style={tw`font-normal`}>Normal weight</SansSerifText>
+					<SansSerifText style={tw`font-medium`}>Medium weight</SansSerifText>
+					<SansSerifText style={tw`font-semibold`}>Semibold weight</SansSerifText>
+					<SansSerifText style={tw`font-bold`}>Bold weight</SansSerifText>
+				</View>
+			</Section>
+		</View>
+	)
+}
+
+export const sansSerifTextShowcase: Showcase = {
+	title: "SansSerifText",
+	component: SansSerifTextShowcase,
+}

apps/aelis-client/src/components/ui/sans-serif-text.tsx

@@ -0,0 +1,10 @@
+import { Text, type TextProps } from "react-native"
+import tw from "twrnc"
+
+export function SansSerifText({ children, style, ...props }: TextProps) {
+	return (
+		<Text style={[tw`text-stone-800 dark:text-stone-200`, { fontFamily: "Inter" }, style]} {...props}>
+			{children}
+		</Text>
+	)
+}

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

@@ -0,0 +1,25 @@
+import { View } from "react-native"
+import tw from "twrnc"
+
+import { SerifText } from "./serif-text"
+import { type Showcase, Section } from "../showcase"
+
+function SerifTextShowcase() {
+	return (
+		<View style={tw`gap-6`}>
+			<Section title="Sizes">
+				<View style={tw`gap-2`}>
+					<SerifText style={tw`text-sm`}>Small serif text</SerifText>
+					<SerifText style={tw`text-base`}>Base serif text</SerifText>
+					<SerifText style={tw`text-xl`}>Extra large serif text</SerifText>
+					<SerifText style={tw`text-3xl`}>3XL serif text</SerifText>
+				</View>
+			</Section>
+		</View>
+	)
+}
+
+export const serifTextShowcase: Showcase = {
+	title: "SerifText",
+	component: SerifTextShowcase,
+}

apps/aelis-client/src/components/ui/serif-text.tsx

@@ -0,0 +1,10 @@
+import { Text, type TextProps } from "react-native"
+import tw from "twrnc"
+
+export function SerifText({ children, style, ...props }: TextProps) {
+	return (
+		<Text style={[tw`text-stone-800 dark:text-stone-200`, { fontFamily: "Source Serif 4" }, style]} {...props}>
+			{children}
+		</Text>
+	)
+}

bun.lock

@@ -5,6 +5,8 @@
     "": {
       "name": "aelis",
       "devDependencies": {
+        "@json-render/core": "^0.12.1",
+        "@nym.sh/jrx": "^0.1.0",
         "@types/bun": "latest",
         "oxfmt": "^0.24.0",
         "oxlint": "^1.39.0",
@@ -112,6 +114,10 @@
       "dependencies": {
         "@standard-schema/spec": "^1.1.0",
       },
+      "peerDependencies": {
+        "@json-render/core": "*",
+        "@nym.sh/jrx": "*",
+      },
     },
     "packages/aelis-data-source-weatherkit": {
       "name": "@aelis/data-source-weatherkit",
@@ -649,6 +655,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@json-render/core": ["@json-render/core@0.12.1", "", { "dependencies": { "zod": "^4.3.6" } }, "sha512-1tV/481GPHmIRd6lXfWcTaIslQusmDg5lzcSBzWLkSXjF9sjjyOQL090in7uHT4tOMWkdmlEJOW5H9C72PsUEQ=="],
+
     "@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=="],
@@ -669,6 +677,8 @@
 
     "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],
 
+    "@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=="],
 
     "@oclif/plugin-autocomplete": ["@oclif/plugin-autocomplete@3.2.40", "", { "dependencies": { "@oclif/core": "^4", "ansis": "^3.16.0", "debug": "^4.4.1", "ejs": "^3.1.10" } }, "sha512-HCfDuUV3l5F5Wz7SKkaoFb+OMQ5vKul8zvsPNgI0QbZcQuGHmn3svk+392wSfXboyA1gq8kzEmKPAoQK6r6UNw=="],
@@ -2027,7 +2037,7 @@
 
     "ical.js": ["ical.js@2.2.1", "", {}, "sha512-yK/UlPbEs316igb/tjRgbFA8ZV75rCsBJp/hWOatpyaPNlgw0dGDmU+FoicOcwX4xXkeXOkYiOmCqNPFpNPkQg=="],
 
-    "iconv-lite": ["iconv-lite@0.4.24", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3" } }, "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="],
+    "iconv-lite": ["iconv-lite@0.7.2", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw=="],
 
     "ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],
 
@@ -3523,6 +3533,8 @@
 
     "body-parser/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
 
+    "body-parser/iconv-lite": ["iconv-lite@0.4.24", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3" } }, "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="],
+
     "c12/dotenv": ["dotenv@16.6.1", "", {}, "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow=="],
 
     "c12/jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
@@ -3673,8 +3685,6 @@
 
     "mv/rimraf": ["rimraf@2.4.5", "", { "dependencies": { "glob": "^6.0.1" }, "bin": { "rimraf": "./bin.js" } }, "sha512-J5xnxTyqaiw06JjMftq7L9ouA448dw/E7dKghkP9WpKNuwmARNNg+Gk8/u5ryb9N/Yo2+z3MCwuqFK/+qPOPfQ=="],
 
-    "mysql2/iconv-lite": ["iconv-lite@0.7.2", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw=="],
-
     "node-exports-info/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
     "npm-package-arg/semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
@@ -3709,6 +3719,8 @@
 
     "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
+    "raw-body/iconv-lite": ["iconv-lite@0.4.24", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3" } }, "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="],
+
     "rc/strip-json-comments": ["strip-json-comments@2.0.1", "", {}, "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="],
 
     "react-devtools-core/ws": ["ws@7.5.10", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": "^5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ=="],

package.json

@@ -14,6 +14,8 @@
 		"format:check": "oxfmt --check ."
 	},
 	"devDependencies": {
+		"@json-render/core": "^0.12.1",
+		"@nym.sh/jrx": "^0.1.0",
 		"@types/bun": "latest",
 		"oxfmt": "^0.24.0",
 		"oxlint": "^1.39.0"

packages/aelis-core/package.json

@@ -7,6 +7,10 @@
 	"scripts": {
 		"test": "bun test ."
 	},
+	"peerDependencies": {
+		"@nym.sh/jrx": "*",
+		"@json-render/core": "*"
+	},
 	"dependencies": {
 		"@standard-schema/spec": "^1.1.0"
 	}

packages/aelis-core/src/feed.ts

@@ -1,3 +1,5 @@
+import type { JrxNode } from "@nym.sh/jrx"
+
 /**
  * Source-provided hints for post-processors.
  *
@@ -76,3 +78,12 @@ export interface FeedItem<
 	/** Named slots for LLM-fillable content. Keys are slot names. */
 	slots?: Record<string, Slot>
 }
+
+/** A FeedItem with a JRX UI tree attached for client-side rendering. */
+export interface RenderedFeedItem<
+	TType extends string = string,
+	TData extends Record<string, unknown> = Record<string, unknown>,
+> extends FeedItem<TType, TData> {
+	/** JRX node tree describing how to render this item */
+	ui: JrxNode
+}

packages/aelis-core/src/index.ts

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

packages/aelis-source-caldav/src/caldav-source.test.ts

@@ -534,4 +534,68 @@ describe("computeSignals", () => {
 	})
 })
 
+describe("CalDavSource feed item slots", () => {
+	const EXPECTED_SLOT_NAMES = ["insight", "preparation", "crossSource"]
 
+	test("timed event has all three slots with null content", async () => {
+		const objects: Record<string, CalDavDAVObject[]> = {
+			"/cal/work": [{ url: "/cal/work/event1.ics", data: loadFixture("single-event.ics") }],
+		}
+		const client = new MockDAVClient([{ url: "/cal/work", displayName: "Work" }], objects)
+		const source = createSource(client)
+
+		const items = await source.fetchItems(createContext(new Date("2026-01-15T12:00:00Z")))
+
+		expect(items).toHaveLength(1)
+		const item = items[0]!
+		expect(item.slots).toBeDefined()
+		expect(Object.keys(item.slots!).sort()).toEqual([...EXPECTED_SLOT_NAMES].sort())
+
+		for (const name of EXPECTED_SLOT_NAMES) {
+			const slot = item.slots![name]!
+			expect(slot.content).toBeNull()
+			expect(typeof slot.description).toBe("string")
+			expect(slot.description.length).toBeGreaterThan(0)
+		}
+	})
+
+	test("all-day event has all three slots with null content", async () => {
+		const objects: Record<string, CalDavDAVObject[]> = {
+			"/cal/work": [{ url: "/cal/work/allday.ics", data: loadFixture("all-day-event.ics") }],
+		}
+		const client = new MockDAVClient([{ url: "/cal/work", displayName: "Work" }], objects)
+		const source = createSource(client)
+
+		const items = await source.fetchItems(createContext(new Date("2026-01-15T12:00:00Z")))
+
+		expect(items).toHaveLength(1)
+		const item = items[0]!
+		expect(item.data.isAllDay).toBe(true)
+		expect(item.slots).toBeDefined()
+		expect(Object.keys(item.slots!).sort()).toEqual([...EXPECTED_SLOT_NAMES].sort())
+
+		for (const name of EXPECTED_SLOT_NAMES) {
+			expect(item.slots![name]!.content).toBeNull()
+		}
+	})
+
+	test("cancelled event has all three slots with null content", async () => {
+		const objects: Record<string, CalDavDAVObject[]> = {
+			"/cal/work": [{ url: "/cal/work/cancelled.ics", data: loadFixture("cancelled-event.ics") }],
+		}
+		const client = new MockDAVClient([{ url: "/cal/work", displayName: "Work" }], objects)
+		const source = createSource(client)
+
+		const items = await source.fetchItems(createContext(new Date("2026-01-15T12:00:00Z")))
+
+		expect(items).toHaveLength(1)
+		const item = items[0]!
+		expect(item.data.status).toBe("cancelled")
+		expect(item.slots).toBeDefined()
+		expect(Object.keys(item.slots!).sort()).toEqual([...EXPECTED_SLOT_NAMES].sort())
+
+		for (const name of EXPECTED_SLOT_NAMES) {
+			expect(item.slots![name]!.content).toBeNull()
+		}
+	})
+})

packages/aelis-source-caldav/src/caldav-source.ts

@@ -1,4 +1,4 @@
-import type { ActionDefinition, ContextEntry, FeedItemSignals, FeedSource } from "@aelis/core"
+import type { ActionDefinition, ContextEntry, FeedItemSignals, FeedSource, Slot } from "@aelis/core"
 
 import { Context, TimeRelevance, UnknownActionError } from "@aelis/core"
 import { DAVClient } from "tsdav"
@@ -7,6 +7,9 @@ import type { CalDavDAVClient, CalDavEventData, CalDavFeedItem } from "./types.t
 
 import { CalDavCalendarKey, type CalendarContext } from "./calendar-context.ts"
 import { parseICalEvents } from "./ical-parser.ts"
+import crossSourcePrompt from "./prompts/cross-source.txt"
+import insightPrompt from "./prompts/insight.txt"
+import preparationPrompt from "./prompts/preparation.txt"
 import { CalDavEventStatus, CalDavFeedItemType } from "./types.ts"
 
 // -- Source options --
@@ -340,6 +343,14 @@ export function computeSignals(
 	return { urgency: 0.2, timeRelevance: TimeRelevance.Ambient }
 }
 
+function createEventSlots(): Record<string, Slot> {
+	return {
+		insight: { description: insightPrompt, content: null },
+		preparation: { description: preparationPrompt, content: null },
+		crossSource: { description: crossSourcePrompt, content: null },
+	}
+}
+
 function createFeedItem(event: CalDavEventData, now: Date, timeZone?: string): CalDavFeedItem {
 	return {
 		id: `caldav-event-${event.uid}${event.recurrenceId ? `-${event.recurrenceId}` : ""}`,
@@ -347,5 +358,6 @@ function createFeedItem(event: CalDavEventData, now: Date, timeZone?: string): C
 		timestamp: now,
 		data: event,
 		signals: computeSignals(event, now, timeZone),
+		slots: createEventSlots(),
 	}
 }

packages/aelis-source-caldav/src/prompts/cross-source.txt

@@ -0,0 +1,8 @@
+If other feed data (weather, transit, nearby events) would disrupt or materially affect this event, state the connection in one sentence. Infer whether the event is indoor/outdoor/virtual from the title and location. Weather is only relevant if it affects getting to the event or the activity itself (e.g., rain for outdoor events, extreme conditions for physical activities). Return null for indoor or virtual events where weather has no impact. Do not fabricate information you don't have — only reference data present in the feed.
+
+Examples:
+- "rain expected at 5pm — bring an umbrella for the walk to Tooley Street"
+- "Northern line has delays — leave 15 minutes early"
+- "your next event is across town — the 40 min gap may not be enough"
+- null (indoor guitar class with wind outside — weather doesn't affect the event)
+- null

packages/aelis-source-caldav/src/prompts/insight.txt

@@ -0,0 +1,7 @@
+One sentence of actionable insight the user can't already see from the event title, time, and location. Do not restate event details. Do not fabricate information you don't have. Return null if there's nothing non-obvious to say.
+
+Examples:
+- "you have 2 hours free before this starts"
+- "all 8 attendees accepted — expect a full room"
+- "third time this has been rescheduled"
+- null

packages/aelis-source-caldav/src/prompts/preparation.txt

@@ -0,0 +1,6 @@
+A concrete preparation step — something the user should do, bring, or review before this event. Infer only from available event and feed data. Do not restate event details. Do not fabricate information you don't have. Return null if no useful preparation comes to mind.
+
+Examples:
+- "different building from your previous meeting — allow travel time"
+- "recurring meeting you declined last week — check if you need to attend"
+- null

packages/aelis-source-caldav/src/text.d.ts

@@ -0,0 +1,4 @@
+declare module "*.txt" {
+	const content: string
+	export default content
+}