fix(mobile): three-digit list numbers no longer lose their first digit

apps/mobile/src/lib/orderedListMarkers.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { wideOrderedListMarkerDigits } from "./orderedListMarkers";
+
+const numberedList = (count: number, marker = (index: number) => `${index + 1}.`) =>
+  Array.from({ length: count }, (_, index) => `${marker(index)} item`).join("\n");
+
+describe("wideOrderedListMarkerDigits", () => {
+  it("returns 0 while every number fits in two digits", () => {
+    expect(wideOrderedListMarkerDigits("just a message")).toBe(0);
+    expect(wideOrderedListMarkerDigits("- one\n- two")).toBe(0);
+    expect(wideOrderedListMarkerDigits(numberedList(99))).toBe(0);
+    expect(wideOrderedListMarkerDigits("We shipped it in 2026. More later.")).toBe(0);
+    expect(wideOrderedListMarkerDigits("Version 1.2 is out")).toBe(0);
+    const withSubLists = Array.from(
+      { length: 60 },
+      (_, index) => `${index + 1}. item\n    1. sub\n    2. sub`,
+    ).join("\n");
+    expect(wideOrderedListMarkerDigits(withSubLists)).toBe(0);
+  });
+
+  it("measures the widest written number", () => {
+    expect(wideOrderedListMarkerDigits(numberedList(130))).toBe(3);
+    expect(wideOrderedListMarkerDigits("1000) a")).toBe(4);
+    expect(wideOrderedListMarkerDigits("text\r\n\r\n100.\r\n")).toBe(3);
+    expect(wideOrderedListMarkerDigits("007. agent")).toBe(0);
+  });
+
+  it("covers lists the renderer numbers itself", () => {
+    expect(wideOrderedListMarkerDigits(numberedList(101, () => "1."))).toBe(3);
+  });
+
+  it("finds lists nested in other blocks", () => {
+    expect(wideOrderedListMarkerDigits("- 100000. nested")).toBe(6);
+    expect(wideOrderedListMarkerDigits("> > 250. quoted")).toBe(3);
+    expect(wideOrderedListMarkerDigits("1. a\n\n   100. nested")).toBe(3);
+  });
+
+  it("stays linear on long runs of bullets and spaces", () => {
+    expect(wideOrderedListMarkerDigits(`${"-    ".repeat(40)}x`)).toBe(0);
+  });
+});

apps/mobile/src/lib/orderedListMarkers.ts

@@ -0,0 +1,28 @@
+// A line that may start an ordered-list item, including one nested after quote
+// or list markers. Group 1 is everything before the number. Each repeat starts
+// with a marker or `>`, which keeps matching linear.
+const ORDERED_MARKER_LINE =
+  /^([ \t>]*(?:(?:[-+*]|\d{1,9}[.)])[ \t]+(?:>[ \t>]*)?)*)(\d{1,9})[.)](?:[ \t\r]|$)/;
+const TOP_LEVEL_PREFIX = /^ {0,3}$/;
+
+/**
+ * Digit count of the widest ordered-list number in `markdown`, when that is
+ * three or more digits; otherwise 0.
+ *
+ * Agents write their list numbers out, so the largest written number covers
+ * normal replies. Counting top-level items also covers lists the renderer
+ * numbers itself, such as `1.` on every line. Code blocks are not skipped; a
+ * stray match there only widens the gutter.
+ */
+export function wideOrderedListMarkerDigits(markdown: string): number {
+  let widest = 0;
+  let topLevelItems = 0;
+  for (const line of markdown.split("\n")) {
+    const marker = ORDERED_MARKER_LINE.exec(line);
+    if (!marker) continue;
+    widest = Math.max(widest, Number(marker[2]));
+    if (TOP_LEVEL_PREFIX.test(marker[1]!)) topLevelItems += 1;
+  }
+  const digits = String(Math.max(widest, topLevelItems)).length;
+  return digits >= 3 ? digits : 0;
+}

apps/mobile/src/native/EnrichedMarkdownText.tsx

@@ -5,8 +5,16 @@ import {
   formatComposerContextReference,
 } from "@t3tools/shared/composerContextReferences";
 import { markdownWithHtml } from "../lib/markdownDocument";
+import { wideOrderedListMarkerDigits } from "../lib/orderedListMarkers";
 import { useCallback, useMemo, useState } from "react";
-import { ActionSheetIOS, Platform, Share, StyleSheet, View } from "react-native";
+import {
+  ActionSheetIOS,
+  Platform,
+  Share,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from "react-native";
 import {
   EnrichedMarkdownText,
   type DocumentAssetsEvent,
@@ -25,9 +33,18 @@ import {
   enrichedLinkVariantPattern,
 } from "../lib/enrichedLinkPresentation";
 
+// The native list gutter only fits "99.", so wider numbers draw past the left
+// edge. DM Sans digits are at most 0.71em wide and the period 0.26em, in every
+// weight; the gutter is in dp while the marker scales with the system font size.
+function orderedListMarkerMinWidth(digits: number, fontSize: number, fontScale: number): number {
+  if (digits === 0) return 0;
+  return Math.ceil((digits * 0.71 + 0.26) * fontSize * fontScale);
+}
+
 function enrichedStyle(
   style: SelectableMarkdownTextProps["textStyle"],
   dark: boolean,
+  orderedListMarker: { digits: number; fontScale: number },
 ): MarkdownStyle {
   const monospace = Platform.OS === "ios" ? "Menlo" : "monospace";
   // Keep the radius modest: iOS clips square table-cell borders without stroking the corner arcs.
@@ -116,7 +133,17 @@ function enrichedStyle(
       borderWidth: 2,
       gapWidth: 12,
     },
-    list: { ...body, bulletColor: style.mutedColor, markerColor: style.mutedColor, gapWidth: 6 },
+    list: {
+      ...body,
+      bulletColor: style.mutedColor,
+      markerColor: style.mutedColor,
+      gapWidth: 6,
+      markerMinWidth: orderedListMarkerMinWidth(
+        orderedListMarker.digits,
+        style.fontSize,
+        orderedListMarker.fontScale,
+      ),
+    },
     thematicBreak: { color: style.dividerColor, height: 1, marginTop: 8, marginBottom: 8 },
     table: {
       ...body,
@@ -239,9 +266,17 @@ export function MobileEnrichedMarkdownText(props: SelectableMarkdownTextProps) {
       mimeTypes: { "app.t3.context-fragment": props.contextClipboardFragment! },
     };
   }, [props.contextClipboardFragment, props.markdown]);
+  const { fontScale } = useWindowDimensions();
+  const orderedListMarkerDigits = useMemo(() => wideOrderedListMarkerDigits(markdown), [markdown]);
   const markdownStyle = useMemo(
-    () => ({ ...enrichedStyle(props.textStyle, themeAppearance === "dark"), linkVariants }),
-    [props.textStyle, themeAppearance, linkVariants],
+    () => ({
+      ...enrichedStyle(props.textStyle, themeAppearance === "dark", {
+        digits: orderedListMarkerDigits,
+        fontScale,
+      }),
+      linkVariants,
+    }),
+    [props.textStyle, themeAppearance, orderedListMarkerDigits, fontScale, linkVariants],
   );
   const renderMedia = useCallback(
     (asset: MarkdownMediaAsset) =>