import { Platform, Text as NativeText, View } from "react-native"; import { cn } from "../../lib/cn";import { MOBILE_CODE_SURFACE } from "../../lib/typography"; import type { ReviewRenderableLineRow } from "./reviewModel";import type { ReviewHighlightedToken } from "./shikiReviewHighlighter"; export const REVIEW_MONO_FONT_FAMILY = Platform.select({  ios: "ui-monospace",  android: "monospace",  default: "monospace",}); export const REVIEW_DIFF_LINE_HEIGHT = MOBILE_CODE_SURFACE.rowHeight;const REVIEW_DELETE_STRIPE_COUNT = REVIEW_DIFF_LINE_HEIGHT / 2; export function renderVisibleWhitespace(value: string): string {  const expandedTabs = value.replace(/\t/g, "    ");  return expandedTabs.replace(/^( +)/, (leading) => leading.replaceAll(" ", "\u00A0"));} export function changeTone(change: ReviewRenderableLineRow["change"]): string {  if (change === "add") return "bg-emerald-500/10";  if (change === "delete") return "bg-rose-500/10";  return "bg-card";} export function changeBarTone(change: ReviewRenderableLineRow["change"]): string {  if (change === "add") return "bg-emerald-400";  if (change === "delete") return "bg-rose-400";  return "bg-border/50";} function diffHighlightColor(change: ReviewRenderableLineRow["change"]): string | undefined {  if (change === "add") return "rgba(16, 185, 129, 0.24)";  if (change === "delete") return "rgba(244, 63, 94, 0.24)";  return undefined;} export function ReviewChangeBar(props: { readonly change: ReviewRenderableLineRow["change"] }) {  if (props.change === "delete") {    return (      <View className="w-[5px] overflow-hidden" style={{ height: REVIEW_DIFF_LINE_HEIGHT }}>        <View>          {Array.from({ length: REVIEW_DELETE_STRIPE_COUNT }, (_, index) => (            <View key={index}>              <View className="w-[5px] bg-rose-400" style={{ height: 1 }} />              <View style={{ height: 1 }} />            </View>          ))}        </View>      </View>    );  }   return (    <View className="w-[5px] overflow-hidden" style={{ height: REVIEW_DIFF_LINE_HEIGHT }}>      <View className={cn("h-full w-[5px] flex-1", changeBarTone(props.change))} />    </View>  );} export function DiffTokenText(props: {  readonly tokens: ReadonlyArray<ReviewHighlightedToken> | null;  readonly fallback: string;  readonly change?: ReviewRenderableLineRow["change"];  readonly className?: string;}) {  if (!props.tokens || props.tokens.length === 0) {    return (      <NativeText        numberOfLines={1}        selectable        className={cn("font-normal text-foreground", props.className)}        style={{          fontFamily: REVIEW_MONO_FONT_FAMILY,          fontSize: MOBILE_CODE_SURFACE.fontSize,          lineHeight: MOBILE_CODE_SURFACE.rowHeight,        }}      >        {renderVisibleWhitespace(props.fallback || " ")}      </NativeText>    );  }   return (    <NativeText      numberOfLines={1}      selectable      className={cn("font-normal text-foreground", props.className)}      style={{        fontFamily: REVIEW_MONO_FONT_FAMILY,        fontSize: MOBILE_CODE_SURFACE.fontSize,        lineHeight: MOBILE_CODE_SURFACE.rowHeight,      }}    >      {(() => {        let offset = 0;         return props.tokens.map((token) => {          const start = offset;          offset += token.content.length;           const fontWeight =            token.fontStyle !== null && (token.fontStyle & 2) === 2              ? ("700" as const)              : ("500" as const);          const fontStyle =            token.fontStyle !== null && (token.fontStyle & 1) === 1              ? ("italic" as const)              : ("normal" as const);           return (            <NativeText              key={`${start}:${token.content.length}:${token.color ?? ""}:${token.fontStyle ?? ""}`}              selectable              style={{                color: token.color ?? undefined,                fontFamily: REVIEW_MONO_FONT_FAMILY,                fontWeight,                fontStyle,                backgroundColor:                  token.diffHighlight && props.change                    ? diffHighlightColor(props.change)                    : undefined,                borderRadius: token.diffHighlight ? 4 : undefined,              }}            >              {token.content.length > 0 ? renderVisibleWhitespace(token.content) : " "}            </NativeText>          );        });      })()}    </NativeText>  );}