@vvedantb/native-ui 0.13.0 → 0.17.1

package/src/loadingGrid.ts

@@ -0,0 +1,75 @@
+/**
+ * The web `LoadingState` `Drive` pixel grid (`packages/ui/src/ui/loading-state.tsx`)
+ * as plain numbers, so the timing stays testable apart from Reanimated. Each
+ * function is a worklet: the grid runs it on the UI thread every frame.
+ *
+ * Nine cells in a 3x3 grid pulse in a chevron wavefront that drives right.
+ * The 650 ms cycle is shorter than the sweep (0-360 ms of delays), so two
+ * fronts are always in flight.
+ */
+
+/** One pulse of a cell, in ms: the web `PATTERNS.Drive.dur`. */
+export const DRIVE_CYCLE_MS = 650;
+
+/** A cell's opacity at the low and high keyframes. */
+const LOW = 0.12;
+const HIGH = 1;
+/** A cell's still opacity before its delay ends: the web inline `opacity: 0.15`. */
+export const DRIVE_IDLE_OPACITY = 0.15;
+
+/**
+ * Each cell's start delay in ms, row by row: column plus distance from the
+ * middle row, times 90. The middle row leads, so the front is a chevron.
+ */
+export const DRIVE_DELAYS: readonly number[] = Array.from({ length: 9 }, (_, i) => {
+  const row = Math.floor(i / 3);
+  const column = i % 3;
+  return (column + Math.abs(row - 1)) * 90;
+});
+
+/** The web `size` tokens in points: `sm` is an 11 pt grid, `default` 15 pt. */
+export const DRIVE_SIZES = {
+  sm: { cell: 3, gap: 1, radius: 0.5 },
+  default: { cell: 4, gap: 1.5, radius: 1 },
+} as const;
+export type LoadingStateSize = keyof typeof DRIVE_SIZES;
+
+/**
+ * The frame held with Reduce Motion: mid-sweep, so the still grid reads as
+ * the chevron (left column bright, right column dim), not nine flat cells.
+ */
+export const DRIVE_STILL_FRAME_MS = DRIVE_CYCLE_MS * 1.5;
+
+/** CSS `ease-in-out`, `cubic-bezier(0.42, 0, 0.58, 1)`, at progress `x` (0-1). */
+export function cssEaseInOut(x: number): number {
+  "worklet";
+  if (x <= 0) return 0;
+  if (x >= 1) return 1;
+  // x(t) = 3(1-t)^2 t x1 + 3(1-t) t^2 x2 + t^3 rises with t, so bisect for t.
+  const curve = (t: number, p1: number, p2: number) =>
+    3 * (1 - t) * (1 - t) * t * p1 + 3 * (1 - t) * t * t * p2 + t * t * t;
+  let lo = 0;
+  let hi = 1;
+  let t = x;
+  for (let i = 0; i < 20; i++) {
+    t = (lo + hi) / 2;
+    if (curve(t, 0.42, 0.58) < x) lo = t;
+    else hi = t;
+  }
+  return curve(t, 0, 1);
+}
+
+/**
+ * A cell's opacity `elapsedMs` after the grid mounted, as the web WAAPI pulse:
+ * still at 0.15 during its delay, then 0.12 -> 1 -> 0.12 every cycle, each
+ * half eased `ease-in-out`.
+ */
+export function driveCellOpacity(elapsedMs: number, delayMs: number): number {
+  "worklet";
+  const local = elapsedMs - delayMs;
+  if (local < 0) return DRIVE_IDLE_OPACITY;
+  const progress = (local % DRIVE_CYCLE_MS) / DRIVE_CYCLE_MS;
+  return progress < 0.5
+    ? LOW + (HIGH - LOW) * cssEaseInOut(progress * 2)
+    : HIGH - (HIGH - LOW) * cssEaseInOut((progress - 0.5) * 2);
+}

package/src/markdown/Markdown.tsx

@@ -1,25 +1,23 @@
-import { useContext, type ReactNode } from "react";
-import { Text, View, type TextStyle, type ViewStyle } from "react-native";
+import { Children, cloneElement, Fragment, isValidElement, useContext, type ReactNode } from "react";
+import { StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import { Renderer, useMarkdown, type MarkedStyles } from "react-native-marked";
 import { CodeBlock } from "../ai/code-block";
 import { MONO_FONT, chatTextSize } from "../ai/chat-text";
 import { ChatTextColorContext } from "../ai/response-text";
-import { sizeStyle } from "../controlStyles";
+import { sizeStyle, trackingStyle, typeStyle } from "../controlStyles";
 import { palette, withAlpha } from "../palette";
 import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
+import { fontFamily } from "../typography";
 import { useScheme } from "../useScheme";
-
-/** Instrument Sans faces, as the app loads them (see `INSTRUMENT_SANS` in tailwind-preset.cjs). */
-const FONT = {
-  regular: "InstrumentSans_400Regular",
-  semibold: "InstrumentSans_600SemiBold",
-} as const;
+import { MARKDOWN_TABLE, MarkdownTable } from "./MarkdownTable";
 
 /**
  * Sizes from the web `markdown.css` (`@vvedantb/ui/tokens/css/markdown.css`),
  * in em of the body size: h1 1.43, h2 1.29, h3 1.14, h4-h6 1; inline code
- * 0.86. Headings line-height 1.3; blocks 0.65rem apart.
+ * 0.86. Headings line-height 1.3. Blocks, headings included, are 16 apart:
+ * Streamdown's root `space-y-4` (a utility) wins over the `.markdown` block
+ * margins (a component layer), so the web draws 1rem between every block.
  */
 export const MARKDOWN_SCALE = {
   h1: 1.43,
@@ -28,7 +26,7 @@ export const MARKDOWN_SCALE = {
   h4: 1,
   inlineCode: 0.86,
   headingLineHeight: 1.3,
-  blockGap: 10,
+  blockGap: 16,
 } as const;
 
 export type MarkdownProps = {
@@ -36,8 +34,30 @@ export type MarkdownProps = {
   children: string;
   /** With it, fenced code blocks get a copy button (native-ui adds no clipboard package). */
   onCopyCode?: (code: string) => void | Promise<void>;
+  /** With it, tables get the web Copy table button: the table as Markdown, CSV or TSV. */
+  onCopyTable?: (text: string) => void | Promise<void>;
+  /**
+   * Body line height. Default `relaxed`, the web `.markdown` 1.625 (14 / 22.75).
+   * `normal` is the text size's own (14 / 20), as a web `Markdown` with
+   * `text-sm` on it: Eva's user bubbles.
+   */
+  leading?: "relaxed" | "normal";
+  /**
+   * Draws a link your way (an app's mention chip): called with the link's
+   * href and plain text; return undefined to keep the default link.
+   */
+  renderLink?: (href: string, text: string) => ReactNode | undefined;
+  /**
+   * Heading look. Default `default`, the web `.markdown` scale. `label`
+   * demotes every heading to a quiet section label (`text-xs` medium,
+   * uppercase, `tracking-wide`, muted, 16 above and 8 below), as a digest
+   * of short themed lists (Eva's standup cards) styles its `###` headings.
+   */
+  headings?: MarkdownHeadings;
 };
 
+export type MarkdownHeadings = "default" | "label";
+
 /**
  * Markdown at chat size, styled as the web `.markdown` (Streamdown) block:
  * compact headings, primary links underlined at 30%, inline code on a 6%
@@ -48,13 +68,13 @@ export type MarkdownProps = {
  * Needs the optional peer `react-native-marked` (it renders through
  * `useMarkdown`, so it nests in a `ScrollView` without a `FlatList`).
  */
-export function Markdown({ children, onCopyCode }: MarkdownProps) {
+export function Markdown({ children, onCopyCode, onCopyTable, leading = "relaxed", renderLink, headings = "default" }: MarkdownProps) {
   const scheme = useScheme();
   const largerText = useLargerText();
   const inherited = useContext(ChatTextColorContext);
-  const body = sizeStyle(chatTextSize("body", largerText));
+  const body = sizeStyle(chatTextSize("body", largerText), leading === "relaxed" ? "relaxed" : undefined);
   const color = inherited ?? tokens.color.foreground[scheme];
-  const renderer = new NativeUiMarkdownRenderer(scheme, body.fontSize, onCopyCode);
+  const renderer = new NativeUiMarkdownRenderer(scheme, body.fontSize, color, onCopyCode, onCopyTable, renderLink);
   const elements = useMarkdown(children, {
     colorScheme: scheme,
     renderer,
@@ -66,9 +86,12 @@ export function Markdown({ children, onCopyCode }: MarkdownProps) {
         border: tokens.color.border[scheme],
       },
     },
-    styles: markdownStyles(scheme, body, color),
+    styles: markdownStyles(scheme, body, color, headings),
   });
-  return <>{elements}</>;
+  // Every block has half the gap above and below (React Native margins do not
+  // collapse), so 16 between blocks; this takes the outer halves off, as the
+  // web `first-child:mt-0` and `last-child:mb-0`.
+  return <View style={{ marginVertical: -MARKDOWN_SCALE.blockGap / 2 }}>{elements}</View>;
 }
 
 /** The style map `useMarkdown` takes, from the web scale. Exported for tests. */
@@ -76,24 +99,48 @@ export function markdownStyles(
   scheme: "light" | "dark",
   body: { fontSize: number; lineHeight: number },
   color: string,
+  headings: MarkdownHeadings = "default",
 ): MarkedStyles {
-  const heading = (scale: number): TextStyle => ({
-    fontFamily: FONT.semibold,
+  const label: TextStyle = {
+    fontFamily: fontFamily.medium,
+    ...typeStyle("medium"),
+    ...sizeStyle("text-xs"),
+    ...trackingStyle(12, "wide"),
+    textTransform: "uppercase",
+    color: tokens.color.muted[scheme],
+    // With the half gap each block keeps (margins do not collapse): 16 above,
+    // the next block's 8 below (the web `mt-4 mb-1.5`, collapsed).
+    marginTop: MARKDOWN_SCALE.blockGap / 2,
+    marginBottom: 0,
+    paddingBottom: 0,
+    borderBottomWidth: 0,
+  };
+  const scaled = (scale: number): TextStyle => ({
+    fontFamily: fontFamily.semibold,
     fontWeight: "600",
     fontSize: Math.round(body.fontSize * scale),
     lineHeight: Math.round(body.fontSize * scale * MARKDOWN_SCALE.headingLineHeight),
     letterSpacing: -0.01 * body.fontSize * scale,
     color,
-    marginTop: 20,
-    marginBottom: 8,
+    marginVertical: MARKDOWN_SCALE.blockGap / 2,
+    // `react-native-marked` rules h1 and h2 off; the web has no rule.
+    paddingBottom: 0,
+    borderBottomWidth: 0,
   });
+  const heading = (scale: number): TextStyle => (headings === "label" ? label : scaled(scale));
   const gap = { marginVertical: MARKDOWN_SCALE.blockGap / 2 };
+  // The library's inline styles start from its own 16 / 24 text, so each one
+  // restates the body size, or a bold or linked word grows the line.
+  const inline = { fontSize: body.fontSize, lineHeight: body.lineHeight };
   return {
-    text: { fontFamily: FONT.regular, fontSize: body.fontSize, lineHeight: body.lineHeight, color },
+    text: { fontFamily: fontFamily.regular, ...inline, color },
     paragraph: { ...gap, paddingVertical: 0 },
-    strong: { fontFamily: FONT.semibold, fontWeight: "600" },
-    em: { fontStyle: "italic" },
+    strong: { ...inline, fontFamily: fontFamily.semibold, fontWeight: "600" },
+    em: { ...inline, fontStyle: "italic" },
+    strikethrough: { ...inline, textDecorationLine: "line-through" },
     link: {
+      ...inline,
+      fontStyle: "normal",
       color: palette.primary[scheme],
       textDecorationLine: "underline",
       textDecorationColor: withAlpha(palette.primary[scheme], 0.3),
@@ -104,57 +151,212 @@ export function markdownStyles(
     h4: heading(MARKDOWN_SCALE.h4),
     h5: heading(MARKDOWN_SCALE.h4),
     h6: { ...heading(MARKDOWN_SCALE.h4), color: tokens.color.muted[scheme] },
-    li: { fontFamily: FONT.regular, fontSize: body.fontSize, lineHeight: body.lineHeight, color },
+    li: { fontFamily: fontFamily.regular, fontSize: body.fontSize, lineHeight: body.lineHeight, color },
     blockquote: {
       ...gap,
       paddingLeft: 13,
       borderLeftWidth: 2,
       borderLeftColor: tokens.color.border[scheme],
       backgroundColor: "transparent",
+      opacity: 1,
     },
-    hr: { marginVertical: 20, height: 1, backgroundColor: tokens.color.border[scheme] },
-    codespan: inlineCodeStyle(scheme, body.fontSize),
+    hr: { ...gap, height: 1, borderBottomWidth: 0, backgroundColor: tokens.color.border[scheme] },
+    codespan: inlineCodeStyle(scheme, body.fontSize, color),
   };
 }
 
-/** Web `.markdown-inline-code`: 0.86em mono on a 6% foreground wash, radius 6. */
-export function inlineCodeStyle(scheme: "light" | "dark", fontSize: number): TextStyle {
+/**
+ * Web `.markdown-inline-code`: 0.86em mono on a 6% foreground wash, radius 6,
+ * in the text colour (`color`, else the platform default).
+ */
+export function inlineCodeStyle(scheme: "light" | "dark", fontSize: number, color?: string): TextStyle {
   return {
     fontFamily: MONO_FONT,
     fontStyle: "normal",
     fontSize: Math.round(fontSize * MARKDOWN_SCALE.inlineCode),
     backgroundColor: withAlpha(tokens.color.foreground[scheme], 0.06),
     borderRadius: 6,
+    ...(color ? { color } : null),
   };
 }
 
+/**
+ * A paragraph block. A component of its own so `listItem` can find it in a
+ * loose list (the parser's own paragraph is a plain `View`).
+ */
+function Paragraph({ style, children }: { style?: StyleProp<ViewStyle>; children?: ReactNode }) {
+  return <View style={style}>{children}</View>;
+}
+
+type StyledNodeProps ={ children?: ReactNode; style?: StyleProp<TextStyle>; accessibilityRole?: string };
+
+/**
+ * An inline-code chip (see `codespan`). A component of its own so
+ * `restyleText` can find it: NativeWind's JSX swaps a `Text` made in this
+ * file for its own wrapper, so the type no longer equals `Text`.
+ */
+function InlineCode({ style, children }: { style?: StyleProp<TextStyle>; children: string }) {
+  return (
+    <Text selectable style={style}>
+      {children}
+    </Text>
+  );
+}
+
+/**
+ * `node` with `map` applied to the style of every `Text` in it. The parser
+ * bakes the text style into each `Text`, and React Native text takes no
+ * style from a parent view, so a block that restyles its text (a quote, a
+ * table) rewrites it here. Links keep their own style.
+ */
+function restyleText(node: ReactNode, map: (style: TextStyle) => TextStyle): ReactNode {
+  return Children.map(node, (child) => {
+    if (!isValidElement<StyledNodeProps>(child)) return child;
+    if (child.props.accessibilityRole === "link") return child;
+    const children = child.props.children === undefined ? undefined : restyleText(child.props.children, map);
+    if (child.type === Text || child.type === InlineCode) {
+      return cloneElement(child, { style: map(StyleSheet.flatten(child.props.style) ?? {}) }, children);
+    }
+    return children === undefined ? child : cloneElement(child, {}, children);
+  });
+}
+
+/** A link's text with its styling stripped: the strings in it, in order. */
+function plainText(node: ReactNode): string {
+  let out = "";
+  Children.forEach(node, (child) => {
+    if (typeof child === "string" || typeof child === "number") out += String(child);
+    else if (isValidElement<StyledNodeProps>(child)) out += plainText(child.props.children);
+  });
+  return out;
+}
+
+/**
+ * A cell's plain text, as the web reads a cell's `textContent` for Copy
+ * table: inline code without the no-break spaces that pad its chip.
+ */
+function cellText(cell: ReactNode): string {
+  return nodeText(cell).trim();
+}
+
+function nodeText(node: ReactNode): string {
+  return Children.toArray(node)
+    .map((child) => {
+      if (typeof child === "string" || typeof child === "number") return String(child);
+      if (!isValidElement<StyledNodeProps>(child)) return "";
+      const text = nodeText(child.props.children);
+      return child.type === InlineCode ? text.replace(/^\u00A0|\u00A0$/g, "") : text;
+    })
+    .join("");
+}
+
 /** Web `.markdown` lists: 1.25rem (20) indent, 0.25rem (4) between items, muted markers (a 5-wide disc). */
 export const MARKDOWN_LIST = { indent: 20, itemGap: 4, disc: 5 } as const;
 
 /**
  * `react-native-marked`'s renderer with native-ui code and lists: `CodeBlock`
  * panels, inline-code chips, and lists drawn as the web `.markdown` lists
- * (the library's own markers apply its marker style to every item).
+ * (the library's own markers apply its marker style to every item). Links,
+ * quotes and tables are drawn here too.
  */
 class NativeUiMarkdownRenderer extends Renderer {
   constructor(
     private readonly scheme: "light" | "dark",
     private readonly fontSize: number,
+    private readonly color: string,
     private readonly onCopyCode: MarkdownProps["onCopyCode"],
+    private readonly onCopyTable: MarkdownProps["onCopyTable"],
+    private readonly renderLink: MarkdownProps["renderLink"],
   ) {
     super();
   }
 
+  /**
+   * Web `.markdown-link`, medium weight. The parser gives a link the
+   * paragraph's regular face, so the face is set here, on the link and the
+   * text in it.
+   */
+  override link(children: string | ReactNode[], href: string, styles?: TextStyle, title?: string): ReactNode {
+    const custom = this.renderLink?.(href, plainText(children));
+    if (custom !== undefined) return <Fragment key={this.getKey()}>{custom}</Fragment>;
+    const medium = (style: TextStyle): TextStyle => ({ ...style, fontFamily: fontFamily.medium, ...typeStyle("medium") });
+    const content = typeof children === "string" ? children : Children.toArray(restyleText(children, medium));
+    return super.link(content, href, medium(styles ?? {}), title);
+  }
+
+  /** Web `.markdown blockquote`: the left rule, and the text in the muted colour. */
+  override blockquote(children: ReactNode[], styles?: ViewStyle): ReactNode {
+    const muted = tokens.color.muted[this.scheme];
+    // The inner blocks' outer margins come off, as web margins collapse into the quote's.
+    return (
+      <View key={this.getKey()} style={styles}>
+        <View style={{ marginVertical: -MARKDOWN_SCALE.blockGap / 2 }}>
+          {restyleText(children, (style) => ({ ...style, color: muted }))}
+        </View>
+      </View>
+    );
+  }
+
+  /**
+   * The web table on its panel (`MarkdownTable`): header cells semibold,
+   * rows split by a 70% border, and the table actions above it.
+   */
+  override table(header: ReactNode[][], rows: ReactNode[][][]): ReactNode {
+    const { fontScale, lineHeight } = MARKDOWN_TABLE;
+    const small = (style: TextStyle): TextStyle => {
+      const size = typeof style.fontSize === "number" ? style.fontSize * fontScale : this.fontSize * fontScale;
+      // Body text takes the table line height; inline code keeps its own.
+      return style.fontFamily === MONO_FONT
+        ? { ...style, fontSize: size }
+        : { ...style, fontSize: size, lineHeight: size * lineHeight };
+    };
+    const semibold = (style: TextStyle): TextStyle => ({ ...small(style), fontFamily: fontFamily.semibold, ...typeStyle("semibold") });
+    return (
+      <View key={this.getKey()} style={{ marginVertical: MARKDOWN_SCALE.blockGap / 2 }}>
+        <MarkdownTable
+          header={header.map((cell) => restyleText(cell, semibold))}
+          rows={rows.map((cells) => cells.map((cell) => restyleText(cell, small)))}
+          data={{ headers: header.map(cellText), rows: rows.map((cells) => cells.map(cellText)) }}
+          color={this.color}
+          onCopy={this.onCopyTable}
+        />
+      </View>
+    );
+  }
+
+  override paragraph(children: ReactNode[], styles?: ViewStyle): ReactNode {
+    return (
+      <Paragraph key={this.getKey()} style={styles}>
+        {children}
+      </Paragraph>
+    );
+  }
+
+  /**
+   * A loose list (items a blank line apart, as Eva's doc editor writes them)
+   * puts each item's text in a paragraph. Its outer margins come off, as in
+   * a quote, so the text sits on the marker's line, as the tight list.
+   */
+  override listItem(children: ReactNode[], styles?: ViewStyle): ReactNode {
+    const loose = children.some((child) => isValidElement(child) && child.type === Paragraph);
+    if (!loose) return super.listItem(children, styles);
+    return (
+      <View key={this.getKey()} style={styles}>
+        <View style={{ marginVertical: -MARKDOWN_SCALE.blockGap / 2 }}>{children}</View>
+      </View>
+    );
+  }
+
   override code(text: string, language?: string): ReactNode {
-    return <CodeBlock key={this.getKey()} code={text} language={language || undefined} onCopy={this.onCopyCode} />;
+    return <CodeBlock key={this.getKey()} variant="markdown" code={text} language={language || undefined} onCopy={this.onCopyCode} />;
   }
 
   override codespan(text: string): ReactNode {
     // Text in Text takes no padding: no-break spaces pad the chip and keep it on one line.
     return (
-      <Text key={this.getKey()} selectable style={inlineCodeStyle(this.scheme, this.fontSize)}>
+      <InlineCode key={this.getKey()} style={inlineCodeStyle(this.scheme, this.fontSize, this.color)}>
         {`\u00A0${text}\u00A0`}
-      </Text>
+      </InlineCode>
     );
   }
 

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>
+  );
+}