@vvedantb/native-ui 0.13.0 → 0.17.0

package/src/ai/trace.tsx

@@ -2,7 +2,7 @@ import { createContext, useContext, type ComponentType, type ReactNode } from "r
 import { Pressable, Text, View, type ViewProps } from "react-native";
 import type { IconProps } from "@tabler/icons-react-native";
 import { cn } from "../cn";
-import { sizeStyle, touchSlop } from "../controlStyles";
+import { sizeStyle } from "../controlStyles";
 import { palette } from "../palette";
 import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
@@ -40,9 +40,13 @@ function useTraceColor() {
   return useContext(TraceLineColorContext) ?? tokens.color.muted[scheme];
 }
 
-/** A column of trace lines (web `flex w-full flex-col gap-2`). */
+/**
+ * A column of trace lines (web `flex w-full flex-col gap-2`). Each line is 28
+ * high (its `py-1` around the 20 text) with no gap, so the rows keep the web
+ * 28 pitch and each is its whole tap area, without slop over its neighbours.
+ */
 export function AgentTrace({ className, ...props }: ViewProps & { className?: string }) {
-  return <View className={cn("w-full min-w-0 gap-2", className)} {...props} />;
+  return <View className={cn("w-full min-w-0", className)} {...props} />;
 }
 
 export type AgentTraceLineProps = ViewProps & {
@@ -50,13 +54,13 @@ export type AgentTraceLineProps = ViewProps & {
   className?: string;
 };
 
-/** One line: a row of icon, title and description. `pending` fades it to 60%, `error` turns it the danger colour. */
+/** One line, 28 high (`py-1`): a row of icon, title and description. `pending` fades it to 60%, `error` turns it the danger colour. */
 export function AgentTraceLine({ status, className, style, ...props }: AgentTraceLineProps) {
   const scheme = useScheme();
   return (
     <TraceLineColorContext.Provider value={traceLineColor(status, scheme)}>
       <View
-        className={cn("min-w-0 max-w-full shrink flex-row items-center gap-2", className)}
+        className={cn("min-w-0 max-w-full shrink flex-row items-center gap-2 py-1", className)}
         style={[status === "pending" ? { opacity: 0.6 } : null, style]}
         {...props}
       />
@@ -149,7 +153,17 @@ export type AgentTraceCollapsibleTriggerProps = CollapsibleTriggerProps & {
   trailing?: ReactNode;
 };
 
-/** The line as a toggle, with a chevron after it that turns down when open. */
+/** No slop: the 28 high line is the whole target, as trace lines stack with no gap. */
+const LINE_SLOP = { top: 0, bottom: 0, left: 0, right: 0 } as const;
+
+/** The chevron's slop: 4 back toward the line, 14 on past it (a 34 wide target), none above or below. */
+const CHEVRON_SLOP = { top: 0, bottom: 0, left: 4, right: 14 } as const;
+
+/**
+ * The line as a toggle, with a chevron after it that turns down when open.
+ * The trigger stretches to the line's 28 height and takes no slop above or
+ * below, so a tap under one line never opens the next.
+ */
 export function AgentTraceCollapsibleTrigger({
   children,
   trailing,
@@ -166,6 +180,7 @@ export function AgentTraceCollapsibleTrigger({
   if (trailing === undefined) {
     return (
       <CollapsibleTrigger
+        hitSlop={LINE_SLOP}
         className={cn("max-w-full flex-row items-center gap-1 self-start", className)}
         {...props}
       >
@@ -176,7 +191,7 @@ export function AgentTraceCollapsibleTrigger({
   }
   return (
     <View className={cn("max-w-full flex-row items-center gap-2 self-start", className)}>
-      <CollapsibleTrigger className="min-w-0 shrink flex-row items-center" {...props}>
+      <CollapsibleTrigger hitSlop={LINE_SLOP} className="min-w-0 shrink flex-row items-center self-stretch" {...props}>
         {children}
       </CollapsibleTrigger>
       {trailing}
@@ -184,8 +199,9 @@ export function AgentTraceCollapsibleTrigger({
       <Pressable
         accessible={false}
         importantForAccessibility="no-hide-descendants"
-        hitSlop={touchSlop(iconSize)}
+        hitSlop={CHEVRON_SLOP}
         onPress={() => setOpen(!open)}
+        className="self-stretch justify-center"
       >
         {chevron}
       </Pressable>
@@ -210,7 +226,7 @@ export function AgentTraceCollapsibleContent({
   return (
     <CollapsibleContent>
       <View
-        className={cn("mb-1 mt-2 min-w-0 pl-4 pr-1", className)}
+        className={cn("mb-2 mt-1 min-w-0 pl-4 pr-1", className)}
         style={[
           {
             marginLeft: iconSize / 2 - 1,
@@ -234,31 +250,52 @@ export function AgentTraceCollapsibleContent({
 }
 
 export type AgentTraceFoldProps = Omit<CollapsibleProps, "children"> & {
-  /** How long the turn ran, in seconds. The title reads "Worked for 1m 5s". */
-  seconds: number;
   /** The settled turn's steps, shown in an `AgentTrace` when open. */
   children: ReactNode;
-};
+} & (
+    | {
+        /** How long the turn ran, in seconds. The title reads "Worked for 1m 5s" (`formatElapsed`). */
+        seconds: number;
+        duration?: never;
+      }
+    | {
+        /**
+         * The duration already formatted, as the web `ActivityTasks` `duration`:
+         * the title reads "Worked for " and this. For an app's own formatter.
+         */
+        duration: string;
+        seconds?: never;
+      }
+  );
 
 /**
  * A settled turn folded behind one line, as the web `ActivityTasks` in its
  * folded (Codex-style) mode: "Worked for …" over a hairline
- * (`border-b border-border pb-1.5`), closed by default, and the steps in an
+ * 6 below the text (web `border-b border-border pb-1.5`: the line's own 4 and
+ * 2 more), closed by default, and the steps in an
  * `AgentTrace` 8 below when open.
  */
-export function AgentTraceFold({ seconds, children, defaultOpen = false, className, ...props }: AgentTraceFoldProps) {
+export function AgentTraceFold({
+  seconds,
+  duration,
+  children,
+  defaultOpen = false,
+  className,
+  ...props
+}: AgentTraceFoldProps) {
   const scheme = useScheme();
+  const elapsed = duration ?? formatElapsed(seconds ?? 0);
   return (
     <Collapsible className={cn("w-full min-w-0", className)} defaultOpen={defaultOpen} {...props}>
-      <View style={{ borderBottomWidth: 1, borderBottomColor: tokens.color.border[scheme], paddingBottom: 6 }}>
+      <View style={{ borderBottomWidth: 1, borderBottomColor: tokens.color.border[scheme], paddingBottom: 2 }}>
         <AgentTraceCollapsibleTrigger>
           <AgentTraceLine>
-            <AgentTraceTitle>{`Worked for ${formatElapsed(seconds)}`}</AgentTraceTitle>
+            <AgentTraceTitle>{`Worked for ${elapsed}`}</AgentTraceTitle>
           </AgentTraceLine>
         </AgentTraceCollapsibleTrigger>
       </View>
       <CollapsibleContent>
-        <AgentTrace className="mt-2">{children}</AgentTrace>
+        <AgentTrace className="mt-1">{children}</AgentTrace>
       </CollapsibleContent>
     </Collapsible>
   );

package/src/ai/unified-diff.tsx

@@ -0,0 +1,182 @@
+import { Pressable, ScrollView, Text, View, type TextStyle } from "react-native";
+import { sizeStyle, textStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { tokens } from "../tokens";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { MONO_FONT, chatTextSize } from "./chat-text";
+
+/** One row of a unified diff: a hunk separator, or a line with its old and new line numbers. */
+export type UnifiedDiffLine =
+  | { readonly kind: "hunk"; readonly text: string }
+  | {
+      readonly kind: "added" | "removed" | "context";
+      /** The line's content, without its `+`/`-`/space marker. */
+      readonly text: string;
+      /** Null for an added line. */
+      readonly oldLine: number | null;
+      /** Null for a removed line. */
+      readonly newLine: number | null;
+    };
+
+/**
+ * The web Code tab type (`--diffs-font-size: 14px`, `--diffs-line-height: 22px`),
+ * the gutter padding and the width of one gutter digit.
+ */
+export const UNIFIED_DIFF = { fontSize: 14, lineHeight: 22, gutterPadding: 8, digitWidth: 8.5 } as const;
+
+/** Larger text steps the code up as `chatTextSize("small")` does (`text-lg`), keeping the 22/14 leading. */
+const LARGER_FONT_SIZE = 18;
+
+/** Web `bg-emerald-500/10` and `text-emerald-700` (dark `text-emerald-300`): edit and diff added lines. */
+export const EMERALD = { fill: "#10b981", light: "#047857", dark: "#6ee7b7" } as const;
+
+/** Web `text-emerald-600` (dark `text-emerald-400`), the `+n` of a diff stat. */
+const ADDED_TEXT = { light: "#059669", dark: "#34d399" } as const;
+
+const SIGN = { added: "+", removed: "-", context: " " } as const;
+
+const TABULAR: TextStyle = { fontVariant: ["tabular-nums"] };
+
+export type UnifiedDiffProps = {
+  lines: ReadonlyArray<UnifiedDiffLine>;
+  /**
+   * Makes each code row (not a hunk header) a button: a tap calls this with
+   * the row's index in `lines`. The code is then not selectable, so a tap
+   * always lands.
+   */
+  onLinePress?: (index: number) => void;
+  /** What a row's button does, for a screen reader (`accessibilityHint`). */
+  linePressHint?: string;
+  /** Indexes in `lines` of the rows to mark, such as those with a comment: their gutter fills. */
+  markedLines?: ReadonlySet<number>;
+  className?: string;
+};
+
+/**
+ * One file's diff in one column, as the web Code tab draws it in unified view
+ * (`@pierre/diffs`): a line number gutter (the old number on a removed line,
+ * the new one otherwise), the `+`/`-` marker, and the line in mono 14 / 22.
+ * Added lines tint green and removed lines red, each at 10%; a hunk header is
+ * a muted row on the secondary surface. Long lines do not wrap: the whole
+ * diff scrolls sideways, and every row spans the widest line. With
+ * `onLinePress` a code row is a button (`Line N`); `markedLines` fills the
+ * gutter of the rows it names at 12% of the primary colour.
+ */
+export function UnifiedDiff({ lines, onLinePress, linePressHint, markedLines, className }: UnifiedDiffProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const fontSize = largerText ? LARGER_FONT_SIZE : UNIFIED_DIFF.fontSize;
+  const widest = lines.reduce(
+    (max, line) => (line.kind === "hunk" ? max : Math.max(max, line.oldLine ?? 0, line.newLine ?? 0)),
+    0,
+  );
+  const scale = fontSize / UNIFIED_DIFF.fontSize;
+  const gutter = String(widest).length * UNIFIED_DIFF.digitWidth * scale + UNIFIED_DIFF.gutterPadding * 2;
+  const mono = { fontFamily: MONO_FONT, fontSize, lineHeight: UNIFIED_DIFF.lineHeight * scale };
+  return (
+    <ScrollView horizontal className={className} contentContainerStyle={{ minWidth: "100%" }}>
+      <View style={{ flexGrow: 1 }}>
+        {lines.map((line, index) => {
+          if (line.kind === "hunk") {
+            return (
+              <Text
+                key={index}
+                numberOfLines={1}
+                style={[
+                  mono,
+                  textStyle("muted", scheme),
+                  { backgroundColor: tokens.color.surfaceSecondary[scheme], paddingHorizontal: UNIFIED_DIFF.gutterPadding },
+                ]}
+              >
+                {line.text}
+              </Text>
+            );
+          }
+          const tint =
+            line.kind === "added"
+              ? withAlpha(EMERALD.fill, 0.1)
+              : line.kind === "removed"
+                ? withAlpha(palette.danger[scheme], 0.1)
+                : undefined;
+          const number = line.kind === "removed" ? line.oldLine : line.newLine;
+          const cells = [
+            <Text
+              key="gutter"
+              style={[
+                mono,
+                textStyle(markedLines?.has(index) ? "foreground" : "muted", scheme),
+                TABULAR,
+                { width: gutter, paddingHorizontal: UNIFIED_DIFF.gutterPadding, textAlign: "right" },
+                markedLines?.has(index) ? { backgroundColor: withAlpha(palette.primary[scheme], 0.12) } : null,
+              ]}
+            >
+              {number ?? ""}
+            </Text>,
+            <Text
+              key="code"
+              selectable={onLinePress === undefined}
+              style={[mono, textStyle("foreground", scheme), { paddingRight: UNIFIED_DIFF.gutterPadding * 2 }]}
+            >
+              {`${SIGN[line.kind]} ${line.text}`}
+            </Text>,
+          ];
+          if (onLinePress === undefined) {
+            return (
+              <View key={index} className="flex-row" style={{ backgroundColor: tint }}>
+                {cells}
+              </View>
+            );
+          }
+          return (
+            <Pressable
+              key={index}
+              accessibilityRole="button"
+              accessibilityLabel={`Line ${number ?? ""}`}
+              accessibilityHint={linePressHint}
+              // No slop: rows tile the diff edge to edge, so any slop would take
+              // the next line's taps. Each row is a full-width 22 high target,
+              // as dense as the code it holds.
+              hitSlop={0}
+              onPress={() => onLinePress(index)}
+              className="flex-row active:opacity-60"
+              style={{ backgroundColor: tint }}
+            >
+              {cells}
+            </Pressable>
+          );
+        })}
+      </View>
+    </ScrollView>
+  );
+}
+
+export type DiffStatProps = {
+  additions: number;
+  deletions: number;
+  /** Drop a side that is zero, so a pure addition reads `+2`, not `+2 −0`. */
+  hideZero?: boolean;
+  className?: string;
+};
+
+/** The web `PrDiffStat`: `+n` in emerald and `−m` in the destructive colour, tabular mono. */
+export function DiffStat({ additions, deletions, hideZero = false, className }: DiffStatProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const stat = [sizeStyle(chatTextSize("small", largerText)), TABULAR, { fontFamily: MONO_FONT }];
+  return (
+    <View
+      accessible
+      accessibilityLabel={`${additions} additions, ${deletions} deletions`}
+      className={className}
+      style={{ flexDirection: "row", flexShrink: 0, gap: 4 }}
+    >
+      {hideZero && additions === 0 ? null : (
+        <Text style={[stat, { color: ADDED_TEXT[scheme] }]}>{`+${additions.toLocaleString()}`}</Text>
+      )}
+      {hideZero && deletions === 0 ? null : (
+        <Text style={[stat, { color: palette.danger[scheme] }]}>{`−${deletions.toLocaleString()}`}</Text>
+      )}
+    </View>
+  );
+}

package/src/auth/GoogleSignInButton.tsx

@@ -3,7 +3,7 @@ import { Platform } from "react-native";
 import { useSSO } from "@clerk/clerk-expo";
 import * as AuthSession from "expo-auth-session";
 import * as WebBrowser from "expo-web-browser";
-import { useRouter, type Href, type Router } from "expo-router";
+import { useRouter, type Href } from "expo-router";
 import { GoogleMark } from "../brand/GoogleMark";
 import { Button, type ButtonProps } from "../Button";
 import { toast } from "../toastStore";
@@ -17,8 +17,11 @@ export const GOOGLE_ERROR_MESSAGE = "Could not continue with Google";
 export type AuthNavigationOptions = {
   /** Where to go after a session starts. Default `"/"`. */
   afterAuthHref?: Href;
-  /** Passed to `router.replace`, such as `{ withAnchor: true }`. */
-  replaceOptions?: Parameters<Router["replace"]>[1];
+  /**
+   * Passed to `router.replace`, such as `{ withAnchor: true }`. Typed from
+   * `useRouter`, as expo-router 57 exports no `Router` type.
+   */
+  replaceOptions?: Parameters<ReturnType<typeof useRouter>["replace"]>[1];
   /** Called after a session starts, in place of `router.replace`. */
   onSuccess?: () => void;
 };

package/src/auth/SignInScreen.tsx

@@ -1,5 +1,5 @@
-import { useState, type ReactNode } from "react";
-import { Text, View } from "react-native";
+import { useRef, useState, type ReactNode } from "react";
+import { Text, View, type TextInput } from "react-native";
 import { useSignIn, useSignUp } from "@clerk/clerk-expo";
 import { useRouter, type Href } from "expo-router";
 import { Button } from "../Button";
@@ -203,6 +203,9 @@ export function SignInScreen({
   const secondFactor = useSecondFactor({ stageTimeoutMs });
   const [error, setError] = useState("");
   const [submitting, setSubmitting] = useState(false);
+  // The field each "next" key moves to.
+  const passwordField = useRef<TextInput>(null);
+  const confirmField = useRef<TextInput>(null);
   const signUp = mode === "sign-up";
   const id = (name: string) => `${testIDPrefix ?? mode}-${name}`;
 
@@ -481,12 +484,15 @@ export function SignInScreen({
           textContentType="newPassword"
           autoFocus
           returnKeyType="next"
+          submitBehavior="submit"
+          onSubmitEditing={() => confirmField.current?.focus()}
           value={newPassword}
           placeholder={AUTH_MESSAGES.newPasswordLabel}
           onChangeText={setNewPassword}
         />
         <PasswordInput
           testID={id("confirm-password")}
+          ref={confirmField}
           accessibilityLabel={AUTH_MESSAGES.confirmPasswordLabel}
           autoCapitalize="none"
           autoComplete="new-password"
@@ -661,12 +667,15 @@ export function SignInScreen({
         textContentType="emailAddress"
         keyboardType="email-address"
         returnKeyType="next"
+        submitBehavior="submit"
+        onSubmitEditing={() => passwordField.current?.focus()}
         value={email}
         placeholder="Email"
         onChangeText={setEmail}
       />
       <PasswordInput
         testID={id("password")}
+        ref={passwordField}
         accessibilityLabel="Password"
         autoCapitalize="none"
         autoComplete={signUp ? "new-password" : "password"}

package/src/brand/ProviderIcon.tsx

@@ -0,0 +1,136 @@
+import { Platform, type ViewProps } from "react-native";
+import Svg, { Path, Rect } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
+import { useScheme } from "../useScheme";
+
+/** A fill that follows the colour scheme, as the web `text-black dark:text-white`. */
+type SchemeFill = string | { light: string; dark: string };
+
+type ProviderMarkLayer =
+  | { d: string; fill: SchemeFill; evenOdd?: boolean }
+  /** A full-bleed square behind the glyph (the OpenCode tile). */
+  | { square: number; fill: SchemeFill };
+
+export type ProviderMark = { viewBox: string; layers: readonly ProviderMarkLayer[] };
+
+/** Providers with a mark. Any other provider draws the Claude mark, as the web. */
+export type ProviderIconProvider = "claude" | "codex" | "opencode" | "cursor";
+
+/**
+ * The provider marks of the web `ProviderIcon` (`@vvedantb/ui`
+ * `ai-elements/provider-icon.tsx`): the same path data, viewBoxes and fills.
+ * A test checks them against the web source.
+ */
+export const PROVIDER_MARKS: Record<ProviderIconProvider, ProviderMark> = {
+  claude: {
+    viewBox: "0 0 24 24",
+    layers: [
+      {
+        fill: "#D97757",
+        d: "m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z",
+      },
+    ],
+  },
+  codex: {
+    viewBox: "0 0 256 260",
+    layers: [
+      {
+        fill: { light: "#000", dark: "#fff" },
+        d: "M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z",
+      },
+    ],
+  },
+  opencode: {
+    viewBox: "0 0 512 512",
+    layers: [
+      { square: 512, fill: "#FDFCFC" },
+      { d: "M320 224V352H192V224H320Z", fill: "#E6E5E6" },
+      { d: "M384 416H128V96H384V416ZM320 160H192V352H320V160Z", fill: "#17181C", evenOdd: true },
+    ],
+  },
+  cursor: {
+    viewBox: "0 0 466.73 532.09",
+    layers: [
+      {
+        fill: { light: "#26251E", dark: "#EDECEC" },
+        d: "M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z",
+      },
+    ],
+  },
+};
+
+/** The mark for `provider`, the Claude mark for an unknown one (web `ProviderIcon` default). */
+export function providerMark(provider: string): ProviderMark {
+  switch (provider) {
+    case "codex":
+    case "opencode":
+    case "cursor":
+      return PROVIDER_MARKS[provider];
+    default:
+      return PROVIDER_MARKS.claude;
+  }
+}
+
+/**
+ * The provider's name in a model picker, as the web `getProviderLabel`
+ * (`ai-elements/model-picker-types.ts`): "Claude", "GPT" for Codex,
+ * "Opencode", "Cursor", and any other provider as given.
+ */
+export function providerLabel(provider: string): string {
+  switch (provider) {
+    case "claude":
+      return "Claude";
+    case "codex":
+      return "GPT";
+    case "opencode":
+      return "Opencode";
+    case "cursor":
+      return "Cursor";
+    default:
+      return provider;
+  }
+}
+
+export type ProviderIconProps = {
+  /** "claude", "codex", "opencode" or "cursor". Any other value draws the Claude mark, as the web. */
+  provider: string;
+  /** Width and height in points. Default 14, as the web. */
+  size?: number;
+  /** Accessible name. Without it the mark is hidden from assistive tech (web `aria-hidden`). */
+  title?: string;
+  /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
+  testID?: string;
+  style?: ViewProps["style"];
+};
+
+/**
+ * The brand mark of an AI provider, as the web `ProviderIcon`. The marks keep
+ * their brand colours; the OpenAI and Cursor marks switch with the scheme.
+ */
+export function ProviderIcon({ provider, size = 14, title, testID, style }: ProviderIconProps) {
+  const scheme = useScheme();
+  const { viewBox, layers } = providerMark(provider);
+  const paint = (fill: SchemeFill) => (typeof fill === "string" ? fill : fill[scheme]);
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={viewBox}
+      {...svgA11yProps({ title, testID }, Platform.OS)}
+      style={style}
+    >
+      {layers.map((layer, index) =>
+        "square" in layer ? (
+          <Rect key={index} width={layer.square} height={layer.square} fill={paint(layer.fill)} />
+        ) : (
+          <Path
+            key={index}
+            d={layer.d}
+            fill={paint(layer.fill)}
+            {...(layer.evenOdd ? { fillRule: "evenodd", clipRule: "evenodd" } : {})}
+          />
+        ),
+      )}
+    </Svg>
+  );
+}

package/src/brand/index.ts

@@ -9,6 +9,8 @@ export { AppWordmark } from "./AppWordmark";
 export type { AppWordmarkProps, ProductAppName } from "./AppWordmark";
 export { GoogleMark } from "./GoogleMark";
 export type { GoogleMarkProps } from "./GoogleMark";
+export { PROVIDER_MARKS, ProviderIcon, providerLabel, providerMark } from "./ProviderIcon";
+export type { ProviderIconProps, ProviderIconProvider, ProviderMark } from "./ProviderIcon";
 export {
   APP_MARKS,
   APP_MARK_CROP_VIEWBOX,

package/src/configureTheme.ts

@@ -1,5 +1,6 @@
 import { palette, type Palette } from "./palette";
 import { tokens, type Tokens } from "./tokens";
+import { fontFamily, type ThemeFonts } from "./typography";
 
 /** `tokens` and `palette` value types with the literal hex widened to `string` and `readonly` dropped. */
 type Widen<T> = T extends string ? string : { -readonly [K in keyof T]: Widen<T[K]> };
@@ -15,6 +16,8 @@ export type ThemeConfig = {
   color?: Partial<ThemeColors>;
   /** Overrides for `palette` (primary, danger, overlay and the other web semantic colours). */
   palette?: Partial<ThemePalette>;
+  /** Overrides for `fontFamily`: the family name for each weight, as the app loads the fonts. */
+  font?: Partial<ThemeFonts>;
 };
 
 type ColorValue = string | { light: string; dark: string };
@@ -24,7 +27,7 @@ type ColorValue = string | { light: string; dark: string };
  * the existing pair object, so values that hold the pair (`floatingFill`,
  * `floatingHairline`, `floatingSolidFill`) follow it.
  */
-function assignColors(
+function assignValues(
   target: { readonly [key: string]: ColorValue },
   source: { readonly [key: string]: ColorValue | undefined },
 ) {
@@ -36,25 +39,50 @@ function assignColors(
   }
 }
 
+/** Bumped by each `configureTheme` call; `useScheme` redraws on it. */
+let themeVersion = 0;
+const themeListeners = new Set<() => void>();
+
+/** Calls `listener` after each `configureTheme`. Returns the unsubscribe. */
+export function subscribeTheme(listener: () => void): () => void {
+  themeListeners.add(listener);
+  return () => {
+    themeListeners.delete(listener);
+  };
+}
+
+/** The number of `configureTheme` calls so far, a snapshot for `useSyncExternalStore`. */
+export function getThemeVersion(): number {
+  return themeVersion;
+}
+
 /**
- * Sets the app's own colours. It writes into the shared `tokens.color` and
- * `palette` objects, which every component reads at render, so call it once at
- * app start, before the first render (for example at the top of the root
- * `_layout.tsx`, outside the component). A call after the first render does not
- * redraw mounted components. Each pair gives both schemes:
+ * Sets the app's own colours and fonts. It writes into the shared
+ * `tokens.color`, `palette` and `fontFamily` objects, which every component
+ * reads at render. Call it once at app start, before the first render (for
+ * example at the top of the root `_layout.tsx`, outside the component). A
+ * later call (for example a second dark palette the user picks) redraws the
+ * mounted components under `NativeUiProvider` that read the scheme (`useScheme`); app code that copies
+ * values out, or memoises on the scheme alone, must redraw on its own. Each
+ * pair gives both schemes:
  *
  * ```ts
  * configureTheme({
  *   color: { background: { light: "#f4f5f6", dark: "#020202" } },
  *   palette: { primary: { light: "#09090b", dark: "#fafafa" } },
+ *   font: { regular: "Inter_400Regular", semibold: "Inter_600SemiBold" },
  * });
  * ```
  *
- * Only the JS colours change. NativeWind classes keep the app's Tailwind theme
- * (`tailwind-preset` reads the package values from source), and constants copied
- * out before the call (`NEUTRAL_500`) keep the package value.
+ * Only the JS values change. NativeWind classes keep the app's Tailwind theme
+ * (`tailwind-preset` reads the package values from source; pass the same
+ * family names to `nativeUiPreset({ font })`), and constants copied out before
+ * the call (`NEUTRAL_500`) keep the package value. The app loads the font files.
  */
 export function configureTheme(config: ThemeConfig): void {
-  if (config.color) assignColors(tokens.color, config.color);
-  if (config.palette) assignColors(palette, config.palette);
+  if (config.color) assignValues(tokens.color, config.color);
+  if (config.palette) assignValues(palette, config.palette);
+  if (config.font) assignValues(fontFamily, config.font);
+  themeVersion += 1;
+  for (const listener of themeListeners) listener();
 }