@vvedantb/native-ui 0.13.0 → 0.17.0

package/src/markdown/MarkdownTable.tsx

@@ -0,0 +1,188 @@
+import { useState, type ReactNode } from "react";
+import { Modal, ScrollView, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconCopy, IconMaximize, IconX } from "@tabler/icons-react-native";
+import { ChatIconButton } from "../ai/icon-button";
+import { withAlpha } from "../palette";
+import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle } from "../Sheet";
+import { SheetRow } from "../SheetRow";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import {
+  markdownTableColumnWidths,
+  markdownTableText,
+  type MarkdownTableData,
+  type MarkdownTableFormat,
+} from "./tableText";
+
+/**
+ * Web `.markdown table` and its Streamdown wrapper: text at 0.93em with
+ * line-height 1.5, cells `0.45rem 0.75rem`, header cells semibold, rows split
+ * by the border at 70% (the header's in the full border), the table 0.65rem
+ * inside the code-block panel (padding `0.25rem 0.3rem 0.4rem`), below the
+ * row of table actions (`flex justify-end gap-1`, 24 buttons, then `gap-2`).
+ */
+export const MARKDOWN_TABLE = {
+  fontScale: 0.93,
+  lineHeight: 1.5,
+  cellPaddingX: 12,
+  cellPaddingY: 7,
+  panelPadding: { top: 4, x: 5, bottom: 6 },
+  tableMargin: 10,
+  /** The web action row: 24 buttons in a 27 row. */
+  actionsHeight: 27,
+  /**
+   * The web buttons sit 4 apart; here 16, so each slops to 44 without
+   * taking its neighbour's taps.
+   */
+  actionsGap: 16,
+} as const;
+
+/**
+ * The full-screen table sizes each column to its text, as the web table does
+ * (`markdownTableColumnWidths`). 8.5 a character fits the 12 mono of inline
+ * code with its chip padding, so a code cell does not wrap; body text is narrower.
+ */
+const FULL_SCREEN_COLUMN = { charWidth: 8.5, min: 72, max: 320 } as const;
+
+/** The web Copy table menu, in its order. */
+const COPY_FORMATS: ReadonlyArray<{ format: MarkdownTableFormat; title: string }> = [
+  { format: "markdown", title: "Markdown" },
+  { format: "csv", title: "CSV" },
+  { format: "tsv", title: "TSV" },
+];
+
+export type MarkdownTableProps = {
+  /** Header cells, already styled. */
+  header: ReactNode[];
+  /** Body rows of cells, already styled. */
+  rows: ReactNode[][];
+  /** The same cells as plain text, for copying and for the full-screen column widths. */
+  data: MarkdownTableData;
+  /** The cell text colour. */
+  color: string;
+  /** With it, a Copy table button: a sheet of the web formats (Markdown, CSV, TSV). */
+  onCopy?: (text: string) => void | Promise<void>;
+};
+
+/**
+ * The cells as rows. `widths` gives every column its own width (the
+ * full-screen view, which scrolls sideways); without it the columns share the
+ * width equally and the cells wrap, so they line up in a chat column.
+ */
+function TableRows({ header, rows, color, widths }: Pick<MarkdownTableProps, "header" | "rows" | "color"> & { widths?: number[] }) {
+  const scheme = useScheme();
+  const { cellPaddingX, cellPaddingY } = MARKDOWN_TABLE;
+  // The header row is ruled off in the border colour, body rows at 70%.
+  const rule = (index: number) => (index === 1 ? tokens.color.border[scheme] : withAlpha(tokens.color.border[scheme], 0.7));
+  const row = (cells: ReactNode[], index: number) => (
+    <View key={index} style={{ flexDirection: "row", borderTopWidth: index > 0 ? 1 : 0, borderTopColor: rule(index) }}>
+      {cells.map((cell, cellIndex) => (
+        <View
+          key={cellIndex}
+          style={[{ paddingHorizontal: cellPaddingX, paddingVertical: cellPaddingY }, widths ? { width: widths[cellIndex] } : { flex: 1 }]}
+        >
+          <Text style={{ color }}>{cell}</Text>
+        </View>
+      ))}
+    </View>
+  );
+  return (
+    <>
+      {row(header, 0)}
+      {rows.map((cells, index) => row(cells, index + 1))}
+    </>
+  );
+}
+
+/**
+ * A markdown table on the web's panel, with the web table actions a phone
+ * can use: Copy table (a sheet of Markdown, CSV and TSV, as the web menu)
+ * and View fullscreen (the table at its own column widths, scrolling
+ * sideways, for a table too wide for the chat). The web's Download table is
+ * left out: a phone saves a file through a share sheet, which native-ui does
+ * not bundle, and the copy formats carry the same text.
+ */
+export function MarkdownTable({ header, rows, data, color, onCopy }: MarkdownTableProps) {
+  const scheme = useScheme();
+  const insets = useSafeAreaInsets();
+  const reduceMotion = useReduceMotion();
+  const [copyOpen, setCopyOpen] = useState(false);
+  const [fullScreen, setFullScreen] = useState(false);
+  const { panelPadding, tableMargin, actionsHeight, actionsGap } = MARKDOWN_TABLE;
+  const muted = tokens.color.muted[scheme];
+  const panel = {
+    borderRadius: tokens.radius.lg,
+    backgroundColor: tokens.color.surfaceSecondary[scheme],
+    paddingTop: panelPadding.top,
+    paddingHorizontal: panelPadding.x,
+    paddingBottom: panelPadding.bottom,
+  };
+  const copy = async (format: MarkdownTableFormat) => {
+    setCopyOpen(false);
+    await onCopy?.(markdownTableText(data, format));
+  };
+  const copyButton = onCopy ? (
+    <ChatIconButton icon={IconCopy} label="Copy table" size="xs" iconColor={muted} onPress={() => setCopyOpen(true)} />
+  ) : null;
+  const widths = markdownTableColumnWidths(data, { ...FULL_SCREEN_COLUMN, padding: MARKDOWN_TABLE.cellPaddingX * 2 });
+  return (
+    <View style={panel}>
+      <View className="flex-row items-center justify-end" style={{ height: actionsHeight, gap: actionsGap }}>
+        {copyButton}
+        <ChatIconButton icon={IconMaximize} label="View fullscreen" size="xs" iconColor={muted} onPress={() => setFullScreen(true)} />
+      </View>
+      <View style={{ marginTop: tableMargin, marginBottom: tableMargin }}>
+        <TableRows header={header} rows={rows} color={color} />
+      </View>
+      {onCopy ? (
+        <Sheet open={copyOpen} onOpenChange={setCopyOpen}>
+          <SheetContent className="gap-3 px-3">
+            <SheetHeader className="px-2">
+              <SheetTitle>Copy table</SheetTitle>
+            </SheetHeader>
+            <SheetBody contentContainerClassName="gap-3">
+              {COPY_FORMATS.map(({ format, title }) => (
+                <SheetRow key={format} title={title} onPress={() => void copy(format)} />
+              ))}
+            </SheetBody>
+          </SheetContent>
+        </Sheet>
+      ) : null}
+      <Modal
+        visible={fullScreen}
+        animationType={reduceMotion ? "none" : "fade"}
+        statusBarTranslucent
+        onRequestClose={() => setFullScreen(false)}
+      >
+        <View
+          className="flex-1"
+          accessibilityViewIsModal
+          style={{
+            backgroundColor: tokens.color.background[scheme],
+            paddingTop: insets.top,
+            paddingBottom: insets.bottom,
+            paddingLeft: insets.left,
+            paddingRight: insets.right,
+          }}
+        >
+          {/* Web: the actions top right, Exit fullscreen last. */}
+          <View className="flex-row items-center justify-end px-2 py-1.5" style={{ gap: actionsGap }}>
+            {copyButton}
+            <ChatIconButton icon={IconX} label="Exit fullscreen" iconColor={muted} onPress={() => setFullScreen(false)} />
+          </View>
+          <ScrollView contentContainerStyle={{ padding: 16 }}>
+            <ScrollView horizontal contentContainerStyle={{ flexGrow: 1 }}>
+              <View style={panel}>
+                <View style={{ marginVertical: tableMargin }}>
+                  <TableRows header={header} rows={rows} color={color} widths={widths} />
+                </View>
+              </View>
+            </ScrollView>
+          </ScrollView>
+        </View>
+      </Modal>
+    </View>
+  );
+}

package/src/markdown/tableText.ts

@@ -0,0 +1,58 @@
+/**
+ * A markdown table as text, for the table's copy actions: the formats and
+ * escaping of the web table controls (Streamdown's Copy table: Markdown, CSV
+ * and TSV), from each cell's plain text.
+ */
+export type MarkdownTableData = { headers: string[]; rows: string[][] };
+
+export type MarkdownTableFormat = "markdown" | "csv" | "tsv";
+
+/** CSV: a cell with a comma, quote or line break is quoted, its quotes doubled. Lines join with `\n`. */
+function toCsv({ headers, rows }: MarkdownTableData): string {
+  const cell = (text: string) => (/[",\n\r]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text);
+  return [...(headers.length > 0 ? [headers] : []), ...rows].map((row) => row.map(cell).join(",")).join("\n");
+}
+
+/** TSV: tabs and line breaks in a cell are written as `\t`, `\n` and `\r`. */
+function toTsv({ headers, rows }: MarkdownTableData): string {
+  const cell = (text: string) => text.replace(/\t/g, "\\t").replace(/\n/g, "\\n").replace(/\r/g, "\\r");
+  return [...(headers.length > 0 ? [headers] : []), ...rows].map((row) => row.map(cell).join("\t")).join("\n");
+}
+
+const MARKDOWN_ESCAPES: Record<string, string> = { "\\": "\\\\", "|": "\\|", "\n": "<br>", "&": "&amp;", "<": "&lt;", ">": "&gt;" };
+
+/** GitHub markdown: pipes and backslashes escaped, line breaks as `<br>`, short rows padded to the header. */
+function toMarkdown({ headers, rows }: MarkdownTableData): string {
+  if (headers.length === 0) return "";
+  const cell = (text: string) => text.replace(/[\\|\n&<>]/g, (char) => MARKDOWN_ESCAPES[char] ?? char);
+  const line = (cells: string[]) => `| ${cells.join(" | ")} |`;
+  return [
+    line(headers.map(cell)),
+    line(headers.map(() => "---")),
+    ...rows.map((row) => line(row.length < headers.length ? headers.map((_, index) => cell(row[index] ?? "")) : row.map(cell))),
+  ].join("\n");
+}
+
+/** The table in one of the copy formats. */
+export function markdownTableText(data: MarkdownTableData, format: MarkdownTableFormat): string {
+  if (format === "csv") return toCsv(data);
+  if (format === "tsv") return toTsv(data);
+  return toMarkdown(data);
+}
+
+/**
+ * Column widths for the full-screen table, where columns size to their text
+ * as the web table does: React Native has no table layout, so the longest
+ * line in each column, at `charWidth` a character plus the cell padding,
+ * clamped to `[min, max]`.
+ */
+export function markdownTableColumnWidths(
+  data: MarkdownTableData,
+  { charWidth, padding, min, max }: { charWidth: number; padding: number; min: number; max: number },
+): number[] {
+  return data.headers.map((header, column) => {
+    const cells = [header, ...data.rows.map((row) => row[column] ?? "")];
+    const longest = Math.max(...cells.flatMap((text) => text.split("\n").map((line) => line.length)));
+    return Math.min(max, Math.max(min, Math.ceil(longest * charWidth + padding)));
+  });
+}

package/src/marketing/UpgradeToProCard.tsx

@@ -46,8 +46,9 @@ export function UpgradeToProCard({
   const largerText = useLargerText();
   // Each class is also set as a style (`sizeStyle`): web `text-sm` is 14 / 20.
   const titleSize = largerText ? "text-lg" : "text-sm";
-  const ctaSize = largerText ? "text-base" : "text-xs";
-  // The web pill is a `Button` `sm` (`font-medium`) in `bg-foreground text-background`.
+  const ctaSize = largerText ? "text-base" : "text-sm";
+  // The web pill is a `Button` `sm` (`font-medium`) in `bg-foreground text-background`,
+  // at the phone `Button` `sm` size: 36 high with a 14 label (the web h-8 `text-xs`).
   const pill = (label: string, accessibilityLabel?: string) => (
     <Pressable
       testID={testID ? `${testID}-cta` : undefined}
@@ -57,7 +58,7 @@ export function UpgradeToProCard({
       hitSlop={HIT_SLOP}
       className={cn(
         "shrink-0 items-center justify-center rounded-full active:opacity-80",
-        largerText ? "min-h-12 px-4" : "min-h-8 px-3",
+        largerText ? "min-h-12 px-4" : "min-h-9 px-3",
       )}
       style={{ backgroundColor: tokens.color.foreground[scheme] }}
     >

package/src/media/ImageGallery.tsx

@@ -0,0 +1,224 @@
+import { useState } from "react";
+import { FlatList, Image, Modal, Pressable, Text, View, useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconExternalLink, IconX } from "@tabler/icons-react-native";
+import { typeStyle } from "../controlStyles";
+import { IconButton } from "../IconButton";
+import { withAlpha } from "../palette";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { imageAspect, imageGridTiles, imageViewerPage, MEDIA, type GalleryImage, type ImageGridTile } from "./imageGrid";
+
+export type ImageGalleryProps = {
+  images: GalleryImage[];
+  /** With it, the viewer has an "Open in browser" button that hands it the image's URL. */
+  onOpenImage?: (url: string) => void;
+  testID?: string;
+};
+
+/**
+ * The web `ImageGalleryPreview`: one image at its own shape (as wide as the
+ * column, at most 384 high), or up to a 2 x 2 grid of 4:3 tiles with "+N" on
+ * the fourth. A tap opens `ImageViewer` at that image. Images only; draw
+ * videos apart.
+ */
+export function ImageGallery({ images, onOpenImage, testID }: ImageGalleryProps) {
+  const [viewerIndex, setViewerIndex] = useState<number | null>(null);
+  const first = images[0];
+  if (!first) return null;
+  return (
+    <View testID={testID} className="w-full">
+      {images.length === 1 ? (
+        <SingleImage image={first} onOpen={() => setViewerIndex(0)} />
+      ) : (
+        <ImageGrid images={images} onOpen={setViewerIndex} />
+      )}
+      <ImageViewer
+        images={images}
+        index={viewerIndex}
+        onIndexChange={setViewerIndex}
+        onClose={() => setViewerIndex(null)}
+        onOpenImage={onOpenImage}
+      />
+    </View>
+  );
+}
+
+/** The hairline-ringed, rounded frame of a gallery image or grid. */
+function useMediaFrame() {
+  const scheme = useScheme();
+  return {
+    borderRadius: MEDIA.radius,
+    borderWidth: 1,
+    borderColor: MEDIA.outline[scheme],
+    overflow: "hidden" as const,
+    backgroundColor: tokens.color.surfaceSecondary[scheme],
+  };
+}
+
+/**
+ * A lone image, sized from the column and the image's own shape and capped
+ * at 384 high, so a tall capture keeps its shape instead of being cropped.
+ * Until both are known it holds a full-width 4:3 box.
+ */
+function SingleImage({ image, onOpen }: { image: GalleryImage; onOpen: () => void }) {
+  const frame = useMediaFrame();
+  const [columnWidth, setColumnWidth] = useState(0);
+  const [loadedSize, setLoadedSize] = useState<{ width: number; height: number } | null>(null);
+  const aspect = imageAspect(loadedSize);
+  const width = columnWidth > 0 ? Math.min(columnWidth, MEDIA.singleMaxHeight * aspect) : undefined;
+  return (
+    <View className="w-full" onLayout={(event) => setColumnWidth(event.nativeEvent.layout.width)}>
+      <Pressable
+        accessibilityRole="imagebutton"
+        accessibilityLabel={image.alt ?? "Image"}
+        accessibilityHint="Opens full screen"
+        onPress={onOpen}
+        className="active:opacity-90"
+        style={[frame, width === undefined ? { width: "100%", aspectRatio: aspect } : { width, height: width / aspect }]}
+      >
+        <Image
+          source={{ uri: image.url }}
+          resizeMode="cover"
+          style={{ width: "100%", height: "100%" }}
+          onLoad={(event) => setLoadedSize(event.nativeEvent.source)}
+        />
+      </Pressable>
+    </View>
+  );
+}
+
+/**
+ * Two columns of 4:3 tiles, filled as the web grid's rows are: tiles 0 and 2
+ * on the left, 1 and 3 on the right. With three, the first fills the left
+ * column, as tall as the two on the right.
+ */
+function ImageGrid({ images, onOpen }: { images: GalleryImage[]; onOpen: (index: number) => void }) {
+  const frame = useMediaFrame();
+  const tiles = imageGridTiles(images.length);
+  const spans = tiles[0]?.spansColumn === true;
+  const left = spans ? tiles.slice(0, 1) : tiles.filter((tile) => tile.index % 2 === 0);
+  const right = spans ? tiles.slice(1) : tiles.filter((tile) => tile.index % 2 === 1);
+  const tileStyle = { width: "100%" as const, aspectRatio: MEDIA.tileAspect };
+  const cell = (tile: ImageGridTile) => {
+    const image = images[tile.index];
+    if (!image) return null;
+    const name = image.alt ?? `Image ${tile.index + 1}`;
+    return (
+      <Pressable
+        key={tile.index}
+        accessibilityRole="imagebutton"
+        accessibilityLabel={tile.overflow > 0 ? `${name}, ${tile.overflow} more` : name}
+        accessibilityHint="Opens full screen"
+        onPress={() => onOpen(tile.index)}
+        className="active:opacity-90"
+        style={tile.spansColumn ? { width: "100%", flex: 1 } : tileStyle}
+      >
+        <Image source={{ uri: image.url }} resizeMode="cover" style={{ width: "100%", height: "100%" }} />
+        {tile.overflow > 0 ? (
+          <View className="absolute inset-0 items-center justify-center" style={{ backgroundColor: withAlpha(tokens.color.black, 0.6) }}>
+            <Text className="font-instrument-sans-semibold text-xl" style={[{ color: tokens.color.white }, typeStyle("semibold")]}>
+              {`+${tile.overflow}`}
+            </Text>
+          </View>
+        ) : null}
+      </Pressable>
+    );
+  };
+  return (
+    <View style={[frame, { flexDirection: "row", gap: MEDIA.gap }]}>
+      <View style={{ flex: 1, gap: MEDIA.gap }}>{left.map(cell)}</View>
+      <View style={{ flex: 1, gap: MEDIA.gap }}>{right.map(cell)}</View>
+    </View>
+  );
+}
+
+export type ImageViewerProps = {
+  images: GalleryImage[];
+  /** The image on screen; `null` while closed. */
+  index: number | null;
+  onIndexChange: (index: number) => void;
+  onClose: () => void;
+  /** With it, an "Open in browser" button hands it the image's URL. */
+  onOpenImage?: (url: string) => void;
+};
+
+/**
+ * The web `ImageLightbox` on a phone: the images full screen on black, one
+ * page each, swiped sideways (TalkBack and VoiceOver step with the adjustable
+ * actions). Close (X, or Android back) and "Open in browser" sit at the top,
+ * "2 / 5" at the bottom when there is more than one. No pinch zoom. It fades
+ * in, or appears at once with Reduce Motion.
+ */
+export function ImageViewer({ images, index, onIndexChange, onClose, onOpenImage }: ImageViewerProps) {
+  const reduceMotion = useReduceMotion();
+  if (index === null) return null;
+  return (
+    <Modal visible transparent statusBarTranslucent animationType={reduceMotion ? "none" : "fade"} onRequestClose={onClose}>
+      <ViewerPages images={images} index={index} onIndexChange={onIndexChange} onClose={onClose} onOpenImage={onOpenImage} />
+    </Modal>
+  );
+}
+
+function ViewerPages({ images, index, onIndexChange, onClose, onOpenImage }: Omit<ImageViewerProps, "index"> & { index: number }) {
+  const { width, height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const count = images.length;
+  const current = images[index];
+  const white = tokens.color.white;
+  return (
+    <View className="flex-1" style={{ backgroundColor: withAlpha(tokens.color.black, 0.92) }}>
+      <FlatList
+        data={images}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        initialScrollIndex={index}
+        getItemLayout={(_, item) => ({ length: width, offset: width * item, index: item })}
+        keyExtractor={(image, item) => `${item}:${image.url}`}
+        onMomentumScrollEnd={(event) => onIndexChange(imageViewerPage(event.nativeEvent.contentOffset.x, width, count))}
+        renderItem={({ item }) => (
+          <View style={{ width, height }} className="items-center justify-center">
+            <Image source={{ uri: item.url }} resizeMode="contain" style={{ width: "100%", height: "100%" }} accessibilityLabel={item.alt ?? "Image"} />
+          </View>
+        )}
+        accessibilityRole="adjustable"
+        accessibilityLabel={current?.alt ?? "Image"}
+        accessibilityValue={count > 1 ? { text: `${index + 1} of ${count}` } : undefined}
+        accessibilityActions={count > 1 ? [{ name: "increment" }, { name: "decrement" }] : undefined}
+        onAccessibilityAction={(event) => {
+          const next = event.nativeEvent.actionName === "increment" ? index + 1 : index - 1;
+          if (next >= 0 && next < count) onIndexChange(next);
+        }}
+      />
+      <View className="absolute left-0 right-0 flex-row items-center justify-between px-3" style={{ top: insets.top + 8 }}>
+        {onOpenImage && current ? (
+          <Pressable
+            accessibilityRole="link"
+            onPress={() => onOpenImage(current.url)}
+            className="min-h-11 flex-row items-center gap-1.5 rounded-full px-3 active:opacity-70"
+            style={{ backgroundColor: withAlpha(tokens.color.black, 0.6) }}
+          >
+            <IconExternalLink size={16} color={white} />
+            <Text className="font-instrument-sans text-sm" style={{ color: white }}>
+              Open in browser
+            </Text>
+          </Pressable>
+        ) : (
+          <View />
+        )}
+        <IconButton icon={IconX} label="Close" variant="overlay" size="lg" onPress={onClose} />
+      </View>
+      {count > 1 ? (
+        <View className="absolute left-0 right-0 items-center" style={{ bottom: insets.bottom + 16 }} pointerEvents="none">
+          <View className="rounded-full px-3 py-1" style={{ backgroundColor: withAlpha(tokens.color.black, 0.6) }}>
+            <Text className="font-instrument-sans text-sm" style={{ color: white, fontVariant: ["tabular-nums"] }}>
+              {`${index + 1} / ${count}`}
+            </Text>
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/media/MediaCard.tsx

@@ -0,0 +1,100 @@
+import type { ComponentType, ReactNode } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { IconProps } from "@tabler/icons-react-native";
+import { sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+
+export type MediaCardProps = {
+  icon: ComponentType<IconProps>;
+  title: string;
+  /** One muted line under the title. */
+  description?: string;
+  /** Makes the whole card one button. Then leave `action` out: a button cannot hold another. */
+  onPress?: () => void;
+  /** A control at the end, such as a delete button, for a card that is not itself a button. */
+  action?: ReactNode;
+  /** A glyph at the end of a pressable card, such as an open-in-browser arrow. Decorative. */
+  trailingIcon?: ComponentType<IconProps>;
+  /** Fill. Default `tokens.color.surface` (the web `bg-card`). */
+  backgroundColor?: string;
+  /** Title colour. Default the theme foreground. */
+  color?: string;
+  /** Icon and description colour. Default the theme muted. */
+  mutedColor?: string;
+  /** Names the pressable card. Default `title`. */
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  testID?: string;
+};
+
+/**
+ * A card for one thing a turn produced, such as a saved file or a report: an
+ * icon, a title and a muted line, on the surface fill at the surface radius
+ * (the web `Surface density="tight"`). It is at least 56 high. With `onPress`
+ * the whole card is a button that fades while pressed; otherwise `action`
+ * holds its control.
+ */
+export function MediaCard({
+  icon: Icon,
+  title,
+  description,
+  onPress,
+  action,
+  trailingIcon: Trailing,
+  backgroundColor,
+  color,
+  mutedColor,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+}: MediaCardProps) {
+  const scheme = useScheme();
+  const muted = mutedColor ?? tokens.color.muted[scheme];
+  const body = (
+    <>
+      <Icon size={18} color={muted} />
+      <View className="min-w-0 flex-1">
+        <Text
+          numberOfLines={1}
+          className="font-instrument-sans-medium"
+          style={[sizeStyle("text-sm"), typeStyle("medium"), color ? { color } : textStyle("foreground", scheme)]}
+        >
+          {title}
+        </Text>
+        {description ? (
+          <Text numberOfLines={1} className="font-instrument-sans" style={[sizeStyle("text-xs"), { color: muted }]}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      {Trailing ? <Trailing size={16} color={muted} /> : null}
+    </>
+  );
+  const frame = {
+    minHeight: 56,
+    borderRadius: tokens.radius.lg,
+    backgroundColor: backgroundColor ?? tokens.color.surface[scheme],
+  };
+  if (onPress) {
+    return (
+      <Pressable
+        testID={testID}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? title}
+        accessibilityHint={accessibilityHint}
+        onPress={onPress}
+        className="flex-row items-center gap-3 p-3 active:opacity-70"
+        style={frame}
+      >
+        {body}
+      </Pressable>
+    );
+  }
+  return (
+    <View testID={testID} className="flex-row items-center gap-3 p-3" style={frame}>
+      {body}
+      {action}
+    </View>
+  );
+}

package/src/media/imageGrid.ts

@@ -0,0 +1,51 @@
+import { tokens } from "../tokens";
+
+/** One image in a gallery or the full-screen viewer. */
+export type GalleryImage = { url: string; alt?: string };
+
+/**
+ * The web `ImageGalleryPreview` metrics: the surface radius, a 2 gap between
+ * tiles (`gap-0.5`), 4:3 tiles, a lone image at most 384 high (`max-h-96`) and
+ * the hairline ring (`ring-black/10`, `dark:ring-white/10`).
+ */
+export const MEDIA = {
+  radius: tokens.radius.lg,
+  gap: 2,
+  tileAspect: 4 / 3,
+  singleMaxHeight: 384,
+  outline: { light: "rgba(0, 0, 0, 0.1)", dark: "rgba(255, 255, 255, 0.1)" },
+} as const;
+
+/** One tile of the grid: which image, whether it fills the left column, and the "+N" it carries. */
+export type ImageGridTile = { index: number; spansColumn: boolean; overflow: number };
+
+/**
+ * The web gallery grid for `count` images: up to four tiles in two columns.
+ * With three, the first fills the left column. Past four, the fourth carries
+ * "+N" for the rest. One image is not a grid (see `ImageGallery`).
+ */
+export function imageGridTiles(count: number): ImageGridTile[] {
+  const shown = Math.min(count, 4);
+  const overflow = count - shown;
+  return Array.from({ length: shown }, (_, index) => ({
+    index,
+    spansColumn: count === 3 && index === 0,
+    overflow: index === shown - 1 ? overflow : 0,
+  }));
+}
+
+/**
+ * Width over height of a lone image, from its own size once loaded, kept
+ * between 1:2 and 3:1 so a very tall or wide capture still reads. 4:3 until
+ * the size is known.
+ */
+export function imageAspect(size: { width: number; height: number } | null): number {
+  if (!size || size.width <= 0 || size.height <= 0) return MEDIA.tileAspect;
+  return Math.min(3, Math.max(0.5, size.width / size.height));
+}
+
+/** The viewer's page for a scroll offset, kept in range. */
+export function imageViewerPage(offsetX: number, pageWidth: number, count: number): number {
+  if (pageWidth <= 0 || count <= 0) return 0;
+  return Math.min(count - 1, Math.max(0, Math.round(offsetX / pageWidth)));
+}

package/src/motion.ts

@@ -0,0 +1,33 @@
+import { Easing, ReduceMotion } from "react-native-reanimated";
+import { useReduceMotion } from "./useReduceMotion";
+
+// The kit's motion values, from the `animate-expo` tables, so every part
+// eases and springs in one family.
+
+/** Strong ease-out: things entering or leaving the screen. */
+export const EASE_OUT = Easing.bezier(0.23, 1, 0.32, 1);
+
+/** A sheet opened or closed by a tap: no finger, so no velocity and no bounce. */
+export const SHEET_SPRING = {
+  duration: 300,
+  dampingRatio: 1,
+  overshootClamping: true,
+  reduceMotion: ReduceMotion.System,
+} as const;
+
+/** A dragged sheet that springs home: a little bounce, as the finger applied force. Add the release `velocity`. */
+export const SHEET_SNAP_SPRING = {
+  duration: 300,
+  dampingRatio: 0.8,
+  reduceMotion: ReduceMotion.System,
+} as const;
+
+/**
+ * Press feedback on press-in, as a class for a `Pressable`: the 3% scale the
+ * `animate-expo` press recipe allows for something pressed this often (the
+ * web buttons and composer chips scale by 3-4%). With Reduce Motion, a dim
+ * instead of the scale.
+ */
+export function usePressFeedback(): string {
+  return useReduceMotion() ? "active:opacity-80" : "active:scale-[0.97]";
+}