@vvedantb/native-ui 0.13.0 → 0.17.0

package/src/index.ts

@@ -12,7 +12,8 @@ export { palette, withAlpha } from "./palette";
 export type { Palette } from "./palette";
 export { configureTheme } from "./configureTheme";
 export type { ThemeConfig, ThemeColors, ThemePalette } from "./configureTheme";
-export { fontClass } from "./typography";
+export { fontClass, fontFamily } from "./typography";
+export type { ThemeFonts } from "./typography";
 export {
   FLOATING_INSET,
   FLOATING_TAB_BAR_HEIGHT,
@@ -26,7 +27,7 @@ export {
   floatingSolidFill,
   tabBarReserve,
 } from "./floating";
-export { selectionHaptic } from "./haptics";
+export { impactHaptic, notificationHaptic, selectionHaptic } from "./haptics";
 export { useReduceTransparency } from "./useReduceTransparency";
 export { FloatingSurface, GlassSheetBackground } from "./FloatingSurface";
 export {
@@ -82,12 +83,20 @@ export type { SeparatorProps } from "./Separator";
 export { Progress } from "./Progress";
 export type { ProgressProps } from "./Progress";
 export { Spinner, CenteredSpinner } from "./Spinner";
+export { KeyboardAvoidingView } from "./primitives/keyboard-parts";
+export type { KeyboardAvoidingViewProps } from "./primitives/keyboard-parts";
 export type { SpinnerProps } from "./Spinner";
+export { LoadingState } from "./LoadingState";
+export type { LoadingStateProps, LoadingStateSize } from "./LoadingState";
 export { Avatar, AvatarImage, AvatarFallback } from "./Avatar";
 export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from "./Avatar";
 export { initials } from "./initials";
+export { formatCompactRelativeTime } from "./relativeTime";
+export type { CompactRelativeTimeOptions } from "./relativeTime";
 export { Chip } from "./Chip";
 export { PillTabs } from "./PillTabs";
+export { Pager } from "./Pager";
+export type { PagerProps } from "./Pager";
 export { Tabs, TabsList, TabsTrigger, TabsContent } from "./Tabs";
 export type {
   TabsProps,
@@ -97,9 +106,21 @@ export type {
   TabsContentProps,
 } from "./Tabs";
 export { ListRow } from "./ListRow";
-export { DividedList } from "./DividedList";
+export { DividedList, ListDivider } from "./DividedList";
 export type { DividedListProps } from "./DividedList";
 export type { ListRowProps } from "./ListRow";
+export { SwipeableRow } from "./SwipeableRow";
+export type { SwipeableRowProps } from "./SwipeableRow";
+export { closeSwipeRows, swipeActionsAccessibility } from "./swipeRow";
+export type { SwipeAction } from "./swipeRow";
+export { ImageGallery, ImageViewer } from "./media/ImageGallery";
+export type { ImageGalleryProps, ImageViewerProps } from "./media/ImageGallery";
+export { MediaCard } from "./media/MediaCard";
+export type { MediaCardProps } from "./media/MediaCard";
+export { imageAspect, imageGridTiles, imageViewerPage, MEDIA } from "./media/imageGrid";
+export type { GalleryImage, ImageGridTile } from "./media/imageGrid";
+export { SurfaceRow, SURFACE_ROW } from "./SurfaceRow";
+export type { SurfaceRowProps } from "./SurfaceRow";
 export { HeaderIconButton } from "./HeaderIconButton";
 export { ThemeToggle } from "./ThemeToggle";
 export type { ThemeToggleProps } from "./ThemeToggle";
@@ -112,7 +133,8 @@ export {
   CardFooter,
 } from "./Card";
 export type { CardProps } from "./Card";
-export { Skeleton, CardSkeleton } from "./Skeleton";
+export { Skeleton, CardSkeleton, SkeletonList, SkeletonRow } from "./Skeleton";
+export type { SkeletonListProps, SkeletonRowProps } from "./Skeleton";
 export { EmptyState } from "./EmptyState";
 export type { EmptyStateVariant } from "./EmptyState";
 export {
@@ -141,7 +163,7 @@ export {
 export type { AlertDialogProps, AlertDialogContentProps } from "./AlertDialog";
 export { ConfirmDialog } from "./ConfirmDialog";
 export { BulkActionBar, BULK_BAR_LABEL_MIN_WIDTH } from "./BulkActionBar";
-export type { BulkActionBarProps, BulkBarAction } from "./BulkActionBar";
+export type { BulkActionBarProps, BulkBarAction, BulkBarPlacement } from "./BulkActionBar";
 export {
   DropdownMenu,
   DropdownMenuTrigger,

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