@olympusoss/canvas 4.0.0 → 5.0.0

package/src/molecules/grid-lists/grid-lists.md

@@ -0,0 +1,114 @@
+# Grid Lists
+
+Tiled card grids for people directories, item collections, and image galleries.
+
+## Usage
+
+```tsx
+<GridList
+  items={[
+    { title: "Rachel Chen", subtitle: "Engineering Lead", avatar: "/rachel-chen.jpg", actions: [
+      { label: "Message", outline: true },
+      { label: "View", ghost: true }
+    ] },
+    { title: "Ada Lovelace", subtitle: "Staff Engineer", avatar: "/ada-lovelace.jpg", actions: [
+      { label: "Message", outline: true },
+      { label: "View", ghost: true }
+    ] },
+    { title: "Kevin Turner", subtitle: "Product Designer", avatar: "KT", actions: [
+      { label: "Message", outline: true },
+      { label: "View", ghost: true }
+    ] }
+  ]}
+  cols2
+/>
+```
+
+## Variants
+
+### Variant - gallery
+
+```tsx
+<GridList
+  items={[
+    { title: "hero-banner.png", subtitle: "1.2 MB", color: "primary" },
+    { title: "icon-set.svg", subtitle: "340 KB", color: "blue-500" },
+    { title: "product-shot.jpg", subtitle: "2.8 MB", color: "emerald-500" },
+    { title: "avatar-default.png", subtitle: "96 KB", color: "amber-500" }
+  ]}
+  gallery
+  cols3
+/>
+```
+
+## Do & Don't
+
+### People (card grid)
+
+**Do** — Let auto-fill minmax columns size to the available width so cards wrap cleanly at any breakpoint.
+
+```tsx
+<GridList cols2 items={[
+    { title: "Rachel Chen", subtitle: "Engineering Lead", avatar: "RC" },
+    { title: "Ada Lovelace", subtitle: "Staff Engineer", avatar: "AL" },
+    { title: "Kevin Turner", subtitle: "Product Designer", avatar: "KT" }
+  ]} />
+```
+
+**Don't** — A fixed column count with hard-width cards overflows the row on narrow viewports instead of reflowing.
+
+```tsx
+<View style={{ flexDirection: "row", gap: 14 }}>
+  <View style={{ width: 200, alignItems: "center", gap: 8, padding: 20, borderRadius: 8, borderWidth: 1, borderColor: tokens.border, backgroundColor: tokens.card, ...shadow("sm") }}>
+    <Avatar large name="Rachel Chen">RC</Avatar>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "600", color: tokens["card-foreground"] }}>Rachel Chen</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Engineering Lead</Text>
+  </View>
+  <View style={{ width: 200, alignItems: "center", gap: 8, padding: 20, borderRadius: 8, borderWidth: 1, borderColor: tokens.border, backgroundColor: tokens.card, ...shadow("sm") }}>
+    <Avatar large name="Ada Lovelace">AL</Avatar>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "600", color: tokens["card-foreground"] }}>Ada Lovelace</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Staff Engineer</Text>
+  </View>
+  <View style={{ width: 200, alignItems: "center", gap: 8, padding: 20, borderRadius: 8, borderWidth: 1, borderColor: tokens.border, backgroundColor: tokens.card, ...shadow("sm") }}>
+    <Avatar large name="Kevin Turner">KT</Avatar>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "600", color: tokens["card-foreground"] }}>Kevin Turner</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Product Designer</Text>
+  </View>
+</View>
+```
+
+### Image gallery
+
+**Do** — Lock a consistent aspect ratio so the grid stays even and nothing reflows once thumbnails load.
+
+```tsx
+<GridList gallery cols3 items={[
+    { title: "hero-banner.png", subtitle: "1.2 MB", color: "primary" },
+    { title: "icon-set.svg", subtitle: "340 KB", color: "blue-500" },
+    { title: "product-shot.jpg", subtitle: "2.8 MB", color: "emerald-500" },
+    { title: "avatar-default.png", subtitle: "96 KB", color: "amber-500" }
+  ]} />
+```
+
+**Don't** — Letting each thumbnail keep its intrinsic height makes a ragged grid and shifts the layout as images load.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", gap: 12 }}>
+  <View style={{ width: 140 }}>
+    <View style={{ width: "100%", height: 96, borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.2) }} />
+    <Text style={{ marginTop: 8, fontSize: 12.5, fontWeight: "500", color: tokens["card-foreground"] }}>hero-banner.png</Text>
+  </View>
+  <View style={{ width: 140 }}>
+    <View style={{ width: "100%", height: 160, borderRadius: 6, backgroundColor: alpha(palette["blue-500"], 0.2) }} />
+    <Text style={{ marginTop: 8, fontSize: 12.5, fontWeight: "500", color: tokens["card-foreground"] }}>icon-set.svg</Text>
+  </View>
+  <View style={{ width: 140 }}>
+    <View style={{ width: "100%", height: 64, borderRadius: 6, backgroundColor: alpha(palette["emerald-500"], 0.2) }} />
+    <Text style={{ marginTop: 8, fontSize: 12.5, fontWeight: "500", color: tokens["card-foreground"] }}>product-shot.jpg</Text>
+  </View>
+  <View style={{ width: 140 }}>
+    <View style={{ width: "100%", height: 128, borderRadius: 6, backgroundColor: alpha(palette["amber-500"], 0.2) }} />
+    <Text style={{ marginTop: 8, fontSize: 12.5, fontWeight: "500", color: tokens["card-foreground"] }}>avatar-default.png</Text>
+  </View>
+</View>
+```

package/src/molecules/grid-lists/grid-lists.styles.ts

@@ -0,0 +1,79 @@
+import { type ViewStyle, type TextStyle, type DimensionValue } from "react-native";
+import { type ColorTokens, palette, alpha } from "../../style/index.js";
+
+// Co-located GridList styles. Layout-only fragments are static objects; anything
+// that reads a color is a function of the active tokens, so the tiles follow
+// light/dark and read as glass when the ThemeProvider's surface is "glass"
+// (since tokens.card / tokens.muted swap at the theming level).
+
+export type Columns = "cols2" | "cols3";
+
+// Per-tile width share per column count (the desktop, `base` value). The
+// fraction leaves room for the gap; `grow` (applied alongside) lets a trailing
+// tile expand to fill, and the responsive `sm` value (`sm:w-full`) collapses
+// each tile to a single column on phones and below (desktop-first).
+export const TILE_WIDTH: Record<Columns, DimensionValue> = {
+  cols2: "48%",
+  cols3: "31%",
+};
+
+// Container: a wrapping flex row. `compact` tightens the inter-tile gap
+// (gap-2 -> 8) from the default (gap-3.5 -> 14).
+export const container: ViewStyle = { flexDirection: "row", flexWrap: "wrap" };
+export function containerGap(compact: boolean): ViewStyle {
+  return { gap: compact ? 8 : 14 };
+}
+
+// Each tile grows to share the row; the width share is layered in by the tile.
+export const tileGrow: ViewStyle = { flexGrow: 1 };
+
+// --- gallery mode -----------------------------------------------------------
+
+// The square color block: full width, fixed height, rounded. The tint is the
+// item color at 20% (bg-{color}/20), falling back to the muted surface.
+export const galleryBlock: ViewStyle = { width: "100%", height: 128, borderRadius: 6 };
+
+export function galleryBlockFill(tokens: ColorTokens, color?: string): ViewStyle {
+  return { backgroundColor: color != null ? alpha(resolveColor(tokens, color), 0.2) : tokens.muted };
+}
+
+export const galleryMeta: ViewStyle = { marginTop: 8 };
+
+export function galleryTitle(tokens: ColorTokens): TextStyle {
+  return { fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens["card-foreground"] };
+}
+
+export function gallerySubtitle(tokens: ColorTokens): TextStyle {
+  return { fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] };
+}
+
+// --- people / card mode -----------------------------------------------------
+
+// Card tile surface composition: grow + center + width share + padding
+// (p-4 -> 16 compact, p-5 -> 20). The width share is layered in by the tile.
+export function tilePad(compact: boolean): ViewStyle {
+  return { flexGrow: 1, alignItems: "center", padding: compact ? 16 : 20 };
+}
+
+export const cardInner: ViewStyle = { alignItems: "center", gap: 8 };
+
+export function cardTitle(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, fontWeight: "600", color: tokens["card-foreground"] };
+}
+
+export function cardSubtitle(tokens: ColorTokens): TextStyle {
+  return { fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] };
+}
+
+export const badgeSpacing: ViewStyle = { marginTop: 4 };
+
+export const actions: ViewStyle = { flexDirection: "row", gap: 8, marginTop: 8 };
+
+// Resolve a color name (a semantic token key like "primary" or a Tailwind
+// palette key like "blue-500") to its hex. Falls back to the muted-foreground
+// token for an unknown name, so any tint composes safely.
+function resolveColor(tokens: ColorTokens, color: string): string {
+  if (color in tokens) return tokens[color as keyof ColorTokens];
+  if (color in palette) return palette[color];
+  return tokens["muted-foreground"];
+}

package/src/molecules/grid-lists/grid-lists.tsx

@@ -0,0 +1,157 @@
+import { type DimensionValue } from "react-native";
+import { View, Text, useTheme, useResponsive, type StyleProp, type ViewStyle } from "../../style/index.js";
+import { Card } from "../card/card.js";
+import { Avatar } from "../../atoms/avatar/avatar.js";
+import { Badge } from "../../atoms/badge/badge.js";
+import { Button } from "../../atoms/button/button.js";
+import * as s from "./grid-lists.styles.js";
+import { type Columns } from "./grid-lists.styles.js";
+
+// GridList: a responsive grid of card tiles for a people directory, a project
+// or file collection, or any tiled gallery. Each item renders as a bordered
+// card tile with a leading avatar, a title, and supporting text or a badge.
+//
+// RN has no CSS grid, so the grid is built from a flex-row flex-wrap container
+// whose tiles carry a fractional flex-basis (48% / 31% width) plus grow, so they
+// share the row evenly and reflow as the row fills. Tiles are authored
+// desktop-first: they take their column share on wide viewports and collapse to
+// full width on phones and below (the `sm` responsive width).
+//
+// Boolean-prop API: one boolean per option, grouped by axis, first-match
+// precedence within an axis (mirrors Button's intentOf).
+//
+// - Columns (pick one; default is two-up): `cols3` packs three tiles per row,
+//   `cols2` is the explicit two-up. With neither set the grid is two-up.
+// - Density: `compact` tightens the gap and per-tile padding for denser grids.
+
+/** A trailing tile action, rendered as a Button in people mode. */
+export interface GridListAction {
+  /** Button label (e.g. "Message"). */
+  label: string;
+  /** Render as an outline button (the default look is solid). */
+  outline?: boolean;
+  /** Render as a ghost button. */
+  ghost?: boolean;
+}
+
+export interface GridListItem {
+  /** Primary label for the tile (a name, project, or file). */
+  title: string;
+  /** Optional supporting line beneath the title (a role, path, or size). */
+  subtitle?: string;
+  /** Optional avatar photo URL or initials source for the leading avatar. */
+  avatar?: string;
+  /** Optional status word rendered as a trailing badge (e.g. "Active"). */
+  badge?: string;
+  /**
+   * Gallery-tile block tint: a palette or token color name (e.g. "primary",
+   * "blue-500"). Painted at 20% behind the filename in gallery mode.
+   */
+  color?: string;
+  /**
+   * Trailing actions rendered as a button row beneath the title (people mode),
+   * e.g. an outline "Message" and a ghost "View".
+   */
+  actions?: GridListAction[];
+}
+
+export interface GridListProps {
+  /** The tiles to render, one card per entry. */
+  items: GridListItem[];
+  // Columns (pick one; default is two-up).
+  cols3?: boolean;
+  cols2?: boolean;
+  /**
+   * Gallery mode: render each tile as a borderless thumbnail (a square color
+   * block from `item.color`, with a left-aligned filename and size below).
+   * Avatars, badges, and actions are not shown in this mode. Omit for the
+   * default people/card tile.
+   */
+  gallery?: boolean;
+  // Density modifier: tighter gap and tile padding.
+  compact?: boolean;
+  /** Escape hatch for layout/positioning composition (mainly width). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Column precedence when more than one is passed: first match wins.
+function columnsOf(p: GridListProps): Columns {
+  if (p.cols3) return "cols3";
+  if (p.cols2) return "cols2";
+  return "cols2";
+}
+
+// A borderless gallery thumbnail: a square color block with a filename and size
+// below. Owns the responsive width so it collapses to full width on phones.
+function GalleryTile({ item, columns }: { item: GridListItem; columns: Columns }) {
+  const { tokens } = useTheme();
+  const width = useResponsive<DimensionValue>({ base: s.TILE_WIDTH[columns], sm: "100%" });
+  return (
+    <View style={[s.tileGrow, { width }]}>
+      {/* Square color block. A single translucent tint stands in for the legacy
+          gradient swatch. */}
+      <View style={[s.galleryBlock, s.galleryBlockFill(tokens, item.color)]} />
+      <View style={s.galleryMeta}>
+        <Text style={s.galleryTitle(tokens)}>{item.title}</Text>
+        {item.subtitle != null ? <Text style={s.gallerySubtitle(tokens)}>{item.subtitle}</Text> : null}
+      </View>
+    </View>
+  );
+}
+
+// A bordered people card tile: a leading avatar, a title, supporting text, an
+// optional badge, and an optional action row. Owns the responsive width so it
+// collapses to full width on phones.
+function PeopleTile({ item, columns, compact }: { item: GridListItem; columns: Columns; compact: boolean }) {
+  const { tokens } = useTheme();
+  const width = useResponsive<DimensionValue>({ base: s.TILE_WIDTH[columns], sm: "100%" });
+  return (
+    <Card style={[s.tilePad(compact), { width }]}>
+      <View style={s.cardInner}>
+        <Avatar large src={isPhoto(item.avatar) ? item.avatar : undefined} name={item.title}>
+          {item.avatar && !isPhoto(item.avatar) ? item.avatar : undefined}
+        </Avatar>
+        <Text style={s.cardTitle(tokens)}>{item.title}</Text>
+        {item.subtitle != null ? <Text style={s.cardSubtitle(tokens)}>{item.subtitle}</Text> : null}
+        {item.badge != null ? (
+          <View style={s.badgeSpacing}>
+            <Badge secondary>{item.badge}</Badge>
+          </View>
+        ) : null}
+        {item.actions != null && item.actions.length > 0 ? (
+          <View style={s.actions}>
+            {item.actions.map((action, i) => (
+              <Button key={`${action.label}-${i}`} small outline={action.outline} ghost={action.ghost}>
+                {action.label}
+              </Button>
+            ))}
+          </View>
+        ) : null}
+      </View>
+    </Card>
+  );
+}
+
+export function GridList(props: GridListProps) {
+  const { items, gallery, compact, style } = props;
+  const columns = columnsOf(props);
+
+  return (
+    <View style={[s.container, s.containerGap(!!compact), style]}>
+      {items.map((item, index) =>
+        gallery ? (
+          <GalleryTile key={`${item.title}-${index}`} item={item} columns={columns} />
+        ) : (
+          <PeopleTile key={`${item.title}-${index}`} item={item} columns={columns} compact={!!compact} />
+        ),
+      )}
+    </View>
+  );
+}
+
+// Treat anything that looks like a URL or path as a photo source; otherwise the
+// value is initials, handed to the Avatar fallback.
+function isPhoto(value?: string): value is string {
+  if (!value) return false;
+  return value.startsWith("http") || value.startsWith("/") || value.startsWith("data:");
+}

package/src/molecules/index.ts

@@ -0,0 +1,16 @@
+// Molecules: the React Native UI kit components at the molecules atomic level.
+export * from "./action-panels/action-panels.js";
+export * from "./alert/alert.js";
+export * from "./alert-dialog/alert-dialog.js";
+export * from "./card/card.js";
+export * from "./code-block/code-block.js";
+export * from "./description-lists/description-lists.js";
+export * from "./empty-state/empty-state.js";
+export * from "./feeds/feeds.js";
+export * from "./field/field.js";
+export * from "./fieldset/fieldset.js";
+export * from "./form/form.js";
+export * from "./grid-lists/grid-lists.js";
+export * from "./media-objects/media-objects.js";
+export * from "./stacked-lists/stacked-lists.js";
+export * from "./stats/stats.js";

package/src/molecules/media-objects/media-objects.md

@@ -0,0 +1,87 @@
+# Media Objects
+
+Image or icon paired with text content. The fundamental building block for list items, notifications, and comment layouts.
+
+## Usage
+
+```tsx
+<MediaObject
+  avatar="RC"
+  title="Rachel Chen"
+  description="Engineering Lead"
+  body="Reviewed the latest pull request and left comments on the auth middleware changes."
+  start
+  bordered
+/>
+```
+
+## Variants
+
+### Variant - icon
+
+```tsx
+<View style={{ maxWidth: 560, gap: 12 }}>
+  <MediaObject bordered start title="Security first" description="End-to-end encryption with automatic key rotation." icon={<Icon shield primary size={18} />} />
+  <MediaObject bordered start title="Real-time analytics" description="Live dashboards with sub-second refresh latency." icon={<Icon activity primary size={18} />} />
+</View>
+```
+
+### Variant - action
+
+```tsx
+<View style={{ maxWidth: 480 }}>
+  <MediaObject bordered center truncate src="/ada-lovelace.jpg" title="Ada Lovelace" description="ada@example.com" action={<Button outline small>Invite</Button>} />
+</View>
+```
+
+## Do & Don't
+
+### Avatar
+
+**Do** — Top-align with items-start so the avatar anchors to the first line of the title.
+
+```tsx
+<MediaObject bordered start style={{ maxWidth: 480 }} src="/rachel-chen.jpg" title="Rachel Chen" description="Engineering Lead" body="Reviewed the latest pull request and left comments on the auth middleware changes. Need to discuss the token rotation approach before merging." />
+```
+
+**Don't** — Centering the avatar against a multi-line body leaves it floating beside the middle of the text.
+
+```tsx
+<MediaObject bordered center style={{ maxWidth: 480 }} src="/rachel-chen.jpg" title="Rachel Chen" description="Engineering Lead" body="Reviewed the latest pull request and left comments on the auth middleware changes. Need to discuss the token rotation approach before merging." />
+```
+
+### Icon
+
+**Do** — Fix the icon box at h-9 w-9 with an 18px glyph so it reads as a tidy lead affordance.
+
+```tsx
+<MediaObject bordered start style={{ maxWidth: 480 }} title="Security first" description="End-to-end encryption with automatic key rotation." icon={<Icon shield primary size={18} />} />
+```
+
+**Don't** — An oversized icon box throws off the optical balance with the two-line text.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "flex-start", gap: 12, borderRadius: 8, borderWidth: 1, borderColor: tokens.border, backgroundColor: tokens.card, padding: 16, maxWidth: 480 }}>
+  <View style={{ flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: 6, backgroundColor: alpha(tokens.primary, 0.15), padding: 8 }}>
+    <Icon shield primary size={32} />
+  </View>
+  <View style={{ minWidth: 0, flexGrow: 1, flexShrink: 1, flexBasis: "0%", gap: 2 }}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "600", color: tokens.foreground }}>Security first</Text>
+    <Text style={{ fontSize: 12, lineHeight: 18, color: tokens["muted-foreground"] }}>End-to-end encryption with automatic key rotation.</Text>
+  </View>
+</View>
+```
+
+### Action
+
+**Do** — Use min-w-0 + truncate on the text and shrink-0 on the button to keep the action pinned right.
+
+```tsx
+<MediaObject bordered center truncate style={{ maxWidth: 480 }} src="/ada-lovelace.jpg" title="Ada Lovelace" description="ada.lovelace@analytical-engine.example.com" action={<Button outline small>Invite</Button>} />
+```
+
+**Don't** — Without truncation a long email wraps and pushes the trailing button out of alignment.
+
+```tsx
+<MediaObject bordered center style={{ maxWidth: 480 }} src="/ada-lovelace.jpg" title="Ada Lovelace" description="ada.lovelace@analytical-engine.example.com" action={<Button outline small>Invite</Button>} />
+```

package/src/molecules/media-objects/media-objects.styles.ts

@@ -0,0 +1,94 @@
+import { type ViewStyle, type TextStyle, type ImageStyle } from "react-native";
+import { type ColorTokens, alpha } from "../../style/index.js";
+
+// Co-located MediaObject styles. Layout-only fragments are static objects; parts
+// that read a color are functions of the active tokens, so the bordered card
+// surface follows light/dark (and reads as glass when the ThemeProvider's
+// surface is "glass", since tokens.card is swapped translucent at the theming
+// level) and the tinted icon box derives from the brand primary.
+
+export type Align = "center" | "start";
+export type Direction = "reversed" | "leading";
+
+// flexDirection per direction (flex-row vs flex-row-reverse).
+export const DIRECTION_ROW: Record<Direction, ViewStyle["flexDirection"]> = {
+  leading: "row",
+  reversed: "row-reverse",
+};
+
+// alignItems per alignment (items-center vs items-start).
+export const ALIGN_ITEMS: Record<Align, ViewStyle["alignItems"]> = {
+  center: "center",
+  start: "flex-start",
+};
+
+// The bare row: flex-row(-reverse) + gap-3 + items-*. The base layout-only part;
+// flexDirection/alignItems are composed on top from the axis records above.
+export const containerBase: ViewStyle = { gap: 12 };
+
+// bordered: wraps the row in the card surface (rounded-lg border border-border
+// bg-card p-4). tokens.card goes translucent under glass.
+export function borderedSurface(tokens: ColorTokens): ViewStyle {
+  return { borderRadius: 8, borderWidth: 1, borderColor: tokens.border, backgroundColor: tokens.card, padding: 16 };
+}
+
+// Leading photo wrapper: shrink-0 w-10 h-10 overflow-hidden rounded-full bg-muted.
+export function photoBox(tokens: ColorTokens): ViewStyle {
+  return {
+    flexShrink: 0,
+    width: 40,
+    height: 40,
+    overflow: "hidden",
+    borderRadius: 9999,
+    backgroundColor: tokens.muted,
+  };
+}
+
+// The photo itself: w-full h-full rounded-full.
+export const photoImage: ImageStyle = { width: "100%", height: "100%", borderRadius: 9999 };
+
+// The leading icon box: shrink-0 items-center justify-center w-9 h-9 rounded-md
+// bg-primary/15 — a fixed tinted square with the glyph centered.
+export function iconBox(tokens: ColorTokens): ViewStyle {
+  return {
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    width: 36,
+    height: 36,
+    borderRadius: 6,
+    backgroundColor: alpha(tokens.primary, 0.15),
+  };
+}
+
+// The glyph inside the icon box: text-primary text-base font-semibold.
+export function iconGlyph(tokens: ColorTokens): TextStyle {
+  return { color: tokens.primary, fontSize: 16, lineHeight: 24, fontWeight: "600" };
+}
+
+// Content column: min-w-0 flex-1 gap-0.5 — lets the text truncate instead of
+// pushing a trailing action out of alignment.
+export const content: ViewStyle = { minWidth: 0, flexGrow: 1, flexShrink: 1, flexBasis: "0%", gap: 2 };
+
+// Title line: text-sm font-semibold text-foreground.
+export function title(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, fontWeight: "600", color: tokens.foreground };
+}
+
+// Description line: text-xs text-muted-foreground.
+export function description(tokens: ColorTokens): TextStyle {
+  return { fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] };
+}
+
+// Body paragraph: text-sm text-foreground leading-relaxed.
+export function body(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 28, color: tokens.foreground };
+}
+
+// Trailing meta text: shrink-0 text-xs text-muted-foreground.
+export function meta(tokens: ColorTokens): TextStyle {
+  return { flexShrink: 0, fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] };
+}
+
+// Trailing action wrapper: shrink-0.
+export const actionBox: ViewStyle = { flexShrink: 0 };