@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/index.js

@@ -0,0 +1,85 @@
+export { cn } from "./cn";
+export { tokens, NativeUiProvider, useNativeUi, useLargerText, useAccentColor, DEFAULT_ACCENT } from "./theme";
+export { palette, withAlpha } from "./palette";
+export { configureTheme } from "./configureTheme";
+export { fontClass, fontFamily } from "./typography";
+export { FLOATING_INSET, FLOATING_TAB_BAR_HEIGHT, FLOATING_TAB_BAR_HEIGHT_LARGE, FLOATING_RADIUS, FLOATING_ROW_RADIUS, FLOATING_PILL_RADIUS, floatingShadow, floatingHairline, floatingFill, floatingSolidFill, tabBarReserve } from "./floating";
+export { impactHaptic, notificationHaptic, selectionHaptic } from "./haptics";
+export { useReduceTransparency } from "./useReduceTransparency";
+export { FloatingSurface, GlassSheetBackground } from "./FloatingSurface";
+export { LiquidGlass, GlassBlurProvider, GlassBlurTarget } from "./LiquidGlass";
+export { AmbientBackground } from "./AmbientBackground";
+export { FloatingTabBar } from "./FloatingTabBar";
+export { FloatingFAB } from "./FloatingFAB";
+export { Button } from "./Button";
+export { Input } from "./Input";
+export { SearchInput } from "./SearchInput";
+export { PasswordInput } from "./PasswordInput";
+export { Textarea } from "./Textarea";
+export { Label } from "./Label";
+export { Select } from "./Select";
+export { Switch } from "./Switch";
+export { LabeledSwitchRow } from "./LabeledSwitchRow";
+export { Checkbox } from "./Checkbox";
+export { Badge } from "./Badge";
+export { StatusDot } from "./StatusDot";
+export { ColorSwatches } from "./ColorSwatches";
+export { StatGrid } from "./StatGrid";
+export { SectionLabel } from "./SectionLabel";
+export { SheetRow } from "./SheetRow";
+export { PageIndicator } from "./PageIndicator";
+export { IconButton } from "./IconButton";
+export { CaptureButton } from "./CaptureButton";
+export { Separator } from "./Separator";
+export { Progress } from "./Progress";
+export { Spinner, CenteredSpinner } from "./Spinner";
+export { KeyboardAvoidingView } from "./primitives/keyboard-parts";
+export { LoadingState } from "./LoadingState";
+export { Avatar, AvatarImage, AvatarFallback } from "./Avatar";
+export { initials } from "./initials";
+export { formatCompactRelativeTime } from "./relativeTime";
+export { Chip } from "./Chip";
+export { PillTabs } from "./PillTabs";
+export { Pager } from "./Pager";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./Tabs";
+export { ListRow } from "./ListRow";
+export { DividedList, ListDivider } from "./DividedList";
+export { SwipeableRow } from "./SwipeableRow";
+export { closeSwipeRows, swipeActionsAccessibility } from "./swipeRow";
+export { ImageGallery, ImageViewer } from "./media/ImageGallery";
+export { MediaCard } from "./media/MediaCard";
+export { imageAspect, imageGridTiles, imageViewerPage, MEDIA } from "./media/imageGrid";
+export { SurfaceRow, SURFACE_ROW } from "./SurfaceRow";
+export { HeaderIconButton } from "./HeaderIconButton";
+export { ThemeToggle } from "./ThemeToggle";
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./Card";
+export { Skeleton, CardSkeleton, SkeletonList, SkeletonRow } from "./Skeleton";
+export { EmptyState } from "./EmptyState";
+export { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter } from "./Dialog";
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "./AlertDialog";
+export { ConfirmDialog } from "./ConfirmDialog";
+export { BulkActionBar, BULK_BAR_LABEL_MIN_WIDTH } from "./BulkActionBar";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuRadioItem, DropdownMenuSeparator } from "./DropdownMenu";
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHandle, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter } from "./Sheet";
+export { Toaster } from "./Toast";
+export { toast } from "./toastStore";
+export { DateTimeField } from "./DateTimeField";
+export { BottomSheetContainer } from "./BottomSheetContainer";
+export { SafeAreaContainer } from "./SafeAreaContainer";
+export { ScreenContainer } from "./ScreenContainer";
+export { PageTitle, PageHeader } from "./PageTitle";
+export { StackPageHeader } from "./StackPageHeader";
+export { SettingsSection } from "./settings/SettingsSection";
+export { SettingsField } from "./settings/SettingsField";
+export { SettingsToggleRow } from "./settings/SettingsToggleRow";
+export { SettingsStack } from "./settings/SettingsStack";
+export { SettingsEmptyState } from "./settings/SettingsEmptyState";
+export { PinnedBotTile, BotPinGrid } from "./PinnedBotTile";
+export { ArtifactList } from "./ArtifactList";
+export { MoreFromProjectV, FromProjectV } from "./settings/MoreFromProjectV";
+export { PROJECT_V_MOBILE_APPS, projectVMobileApp, otherProjectVMobileApps, openProjectVApp, projectVAppOpenSteps, VSTORE_HOME_URL, androidIntentUrl } from "./settings/projectVMobileApps";
+export { PINK_50, PINK_100, PINK_600, PINK_700, NEUTRAL_100, NEUTRAL_500, NEUTRAL_900, Colors } from "./colors";
+// Family app marks and their pure data (copied from `@vvedantb/ui/brand`), and `GoogleMark`.
+export * from "./brand";
+export { UpgradeToProCard } from "./marketing/UpgradeToProCard";
+export { PricingModal } from "./marketing/PricingModal";

package/dist/initials.js

@@ -0,0 +1,4 @@
+/** Up to `max` uppercase initials from a name: "Ada Lovelace" → "AL", "  cher " → "C". Empty for a blank name. */
+export function initials(name, max = 2) {
+  return name.trim().split(/\s+/).filter(Boolean).slice(0, max).map(word => Array.from(word)[0].toUpperCase()).join("");
+}

package/dist/loadingGrid.js

@@ -0,0 +1,81 @@
+/**
+ * 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 = 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
+  }
+};
+/**
+ * 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) {
+  "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, p1, p2) => 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, delayMs) {
+  "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/dist/markdown/Markdown.jsx

@@ -0,0 +1,515 @@
+import { c as _c } from "react/compiler-runtime";
+import { Children, cloneElement, Fragment, isValidElement, useContext } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { Renderer, useMarkdown } 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, 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";
+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, 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,
+  h2: 1.29,
+  h3: 1.14,
+  h4: 1,
+  inlineCode: 0.86,
+  headingLineHeight: 1.3,
+  blockGap: 16
+};
+/**
+ * Markdown at chat size, styled as the web `.markdown` (Streamdown) block:
+ * compact headings, primary links underlined at 30%, inline code on a 6%
+ * foreground wash at radius 6, and fenced code as `CodeBlock` (the flat
+ * `surface-secondary` panel with a language and copy header). Text takes the
+ * enclosing `MessageContent` colour, like `ResponseText`.
+ *
+ * Needs the optional peer `react-native-marked` (it renders through
+ * `useMarkdown`, so it nests in a `ScrollView` without a `FlatList`).
+ */
+export function Markdown(t0) {
+  const $ = _c(28);
+  const {
+    children,
+    onCopyCode,
+    onCopyTable,
+    leading: t1,
+    renderLink,
+    headings: t2
+  } = t0;
+  const leading = t1 === undefined ? "relaxed" : t1;
+  const headings = t2 === undefined ? "default" : t2;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const inherited = useContext(ChatTextColorContext);
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  if ($[0] !== children || $[1] !== headings || $[2] !== inherited || $[3] !== largerText || $[4] !== leading || $[5] !== onCopyCode || $[6] !== onCopyTable || $[7] !== renderLink || $[8] !== scheme) {
+    const body = sizeStyle(chatTextSize("body", largerText), leading === "relaxed" ? "relaxed" : undefined);
+    const color = inherited ?? tokens.color.foreground[scheme];
+    const renderer = new NativeUiMarkdownRenderer(scheme, body.fontSize, color, onCopyCode, onCopyTable, renderLink);
+    t7 = useMarkdown;
+    t8 = children;
+    t3 = scheme;
+    t4 = renderer;
+    const t9 = palette.primary[scheme];
+    const t10 = tokens.color.surfaceSecondary[scheme];
+    const t11 = tokens.color.border[scheme];
+    if ($[15] !== color || $[16] !== t10 || $[17] !== t11 || $[18] !== t9) {
+      t5 = {
+        colors: {
+          text: color,
+          link: t9,
+          code: t10,
+          border: t11
+        }
+      };
+      $[15] = color;
+      $[16] = t10;
+      $[17] = t11;
+      $[18] = t9;
+      $[19] = t5;
+    } else {
+      t5 = $[19];
+    }
+    t6 = markdownStyles(scheme, body, color, headings);
+    $[0] = children;
+    $[1] = headings;
+    $[2] = inherited;
+    $[3] = largerText;
+    $[4] = leading;
+    $[5] = onCopyCode;
+    $[6] = onCopyTable;
+    $[7] = renderLink;
+    $[8] = scheme;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = t7;
+    $[14] = t8;
+  } else {
+    t3 = $[9];
+    t4 = $[10];
+    t5 = $[11];
+    t6 = $[12];
+    t7 = $[13];
+    t8 = $[14];
+  }
+  let t9;
+  if ($[20] !== t3 || $[21] !== t4 || $[22] !== t5 || $[23] !== t6) {
+    t9 = {
+      colorScheme: t3,
+      renderer: t4,
+      theme: t5,
+      styles: t6
+    };
+    $[20] = t3;
+    $[21] = t4;
+    $[22] = t5;
+    $[23] = t6;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  const elements = t7(t8, t9);
+  let t10;
+  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = {
+      marginVertical: -MARKDOWN_SCALE.blockGap / 2
+    };
+    $[25] = t10;
+  } else {
+    t10 = $[25];
+  }
+  let t11;
+  if ($[26] !== elements) {
+    t11 = <View style={t10}>{elements}</View>;
+    $[26] = elements;
+    $[27] = t11;
+  } else {
+    t11 = $[27];
+  }
+  return t11;
+}
+
+/** The style map `useMarkdown` takes, from the web scale. Exported for tests. */
+export function markdownStyles(scheme, body, color, headings = "default") {
+  const label = {
+    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 => ({
+    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,
+    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 => 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: fontFamily.regular,
+      ...inline,
+      color
+    },
+    paragraph: {
+      ...gap,
+      paddingVertical: 0
+    },
+    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)
+    },
+    h1: heading(MARKDOWN_SCALE.h1),
+    h2: heading(MARKDOWN_SCALE.h2),
+    h3: heading(MARKDOWN_SCALE.h3),
+    h4: heading(MARKDOWN_SCALE.h4),
+    h5: heading(MARKDOWN_SCALE.h4),
+    h6: {
+      ...heading(MARKDOWN_SCALE.h4),
+      color: tokens.color.muted[scheme]
+    },
+    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: {
+      ...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,
+ * in the text colour (`color`, else the platform default).
+ */
+export function inlineCodeStyle(scheme, fontSize, color) {
+  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(t0) {
+  const $ = _c(3);
+  const {
+    style,
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== style) {
+    t1 = <View style={style}>{children}</View>;
+    $[0] = children;
+    $[1] = style;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+/**
+ * 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(t0) {
+  const $ = _c(3);
+  const {
+    style,
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== style) {
+    t1 = <Text selectable={true} style={style}>{children}</Text>;
+    $[0] = children;
+    $[1] = style;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+/**
+ * `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, map) {
+  return Children.map(node, child => {
+    if (!isValidElement(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) {
+  let out = "";
+  Children.forEach(node, child => {
+    if (typeof child === "string" || typeof child === "number") out += String(child);else if (isValidElement(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) {
+  return nodeText(cell).trim();
+}
+function nodeText(node) {
+  return Children.toArray(node).map(child => {
+    if (typeof child === "string" || typeof child === "number") return String(child);
+    if (!isValidElement(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
+};
+
+/**
+ * `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). Links,
+ * quotes and tables are drawn here too.
+ */
+class NativeUiMarkdownRenderer extends Renderer {
+  constructor(scheme, fontSize, color, onCopyCode, onCopyTable, renderLink) {
+    super();
+    this.scheme = scheme;
+    this.fontSize = fontSize;
+    this.color = color;
+    this.onCopyCode = onCopyCode;
+    this.onCopyTable = onCopyTable;
+    this.renderLink = renderLink;
+  }
+
+  /**
+   * 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.
+   */
+  link(children, href, styles, title) {
+    const custom = this.renderLink?.(href, plainText(children));
+    if (custom !== undefined) return <Fragment key={this.getKey()}>{custom}</Fragment>;
+    const medium = style => ({
+      ...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. */
+  blockquote(children, styles) {
+    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.
+   */
+  table(header, rows) {
+    const {
+      fontScale,
+      lineHeight
+    } = MARKDOWN_TABLE;
+    const small = style => {
+      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 => ({
+      ...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>;
+  }
+  paragraph(children, styles) {
+    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.
+   */
+  listItem(children, styles) {
+    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>;
+  }
+  code(text, language) {
+    return <CodeBlock key={this.getKey()} variant="markdown" code={text} language={language || undefined} onCopy={this.onCopyCode} />;
+  }
+  codespan(text) {
+    // Text in Text takes no padding: no-break spaces pad the chip and keep it on one line.
+    return <InlineCode key={this.getKey()} style={inlineCodeStyle(this.scheme, this.fontSize, this.color)}>
+        {`\u00A0${text}\u00A0`}
+      </InlineCode>;
+  }
+  list(ordered, li, _listStyle, textStyle, startIndex = 1) {
+    const muted = tokens.color.muted[this.scheme];
+    const lineHeight = typeof textStyle?.lineHeight === "number" ? textStyle.lineHeight : 24;
+    // A drawn disc: the font's bullet glyph is far smaller than the web `disc` marker.
+    const disc = MARKDOWN_LIST.disc;
+    return <View key={this.getKey()} style={{
+      marginVertical: MARKDOWN_SCALE.blockGap / 2,
+      gap: MARKDOWN_LIST.itemGap
+    }}>
+        {li.map((item, index) => <View key={index} style={{
+        flexDirection: "row"
+      }}>
+            {ordered ? <Text style={[textStyle, {
+          width: MARKDOWN_LIST.indent,
+          color: muted,
+          fontVariant: ["tabular-nums"]
+        }]}>
+                {`${startIndex + index}.`}
+              </Text> : <View style={{
+          width: MARKDOWN_LIST.indent,
+          paddingTop: (lineHeight - disc) / 2
+        }}>
+                <View style={{
+            width: disc,
+            height: disc,
+            borderRadius: disc / 2,
+            backgroundColor: muted
+          }} />
+              </View>}
+            <View style={{
+          flex: 1
+        }}>{item}</View>
+          </View>)}
+      </View>;
+  }
+}