@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/unified-diff.jsx

@@ -0,0 +1,280 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, ScrollView, Text, View } 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. */
+
+/**
+ * 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
+};
+
+/** 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"
+};
+
+/** Web `text-emerald-600` (dark `text-emerald-400`), the `+n` of a diff stat. */
+const ADDED_TEXT = {
+  light: "#059669",
+  dark: "#34d399"
+};
+const SIGN = {
+  added: "+",
+  removed: "-",
+  context: " "
+};
+const TABULAR = {
+  fontVariant: ["tabular-nums"]
+};
+/**
+ * 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(t0) {
+  const $ = _c(30);
+  const {
+    lines,
+    onLinePress,
+    linePressHint,
+    markedLines,
+    className
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const fontSize = largerText ? LARGER_FONT_SIZE : UNIFIED_DIFF.fontSize;
+  let t1;
+  if ($[0] !== lines) {
+    t1 = lines.reduce(_temp, 0);
+    $[0] = lines;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const widest = t1;
+  const scale = fontSize / UNIFIED_DIFF.fontSize;
+  const gutter = String(widest).length * UNIFIED_DIFF.digitWidth * scale + UNIFIED_DIFF.gutterPadding * 2;
+  const t2 = UNIFIED_DIFF.lineHeight * scale;
+  let T0;
+  let T1;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  if ($[2] !== className || $[3] !== fontSize || $[4] !== gutter || $[5] !== linePressHint || $[6] !== lines || $[7] !== markedLines || $[8] !== onLinePress || $[9] !== scheme || $[10] !== t2) {
+    const mono = {
+      fontFamily: MONO_FONT,
+      fontSize,
+      lineHeight: t2
+    };
+    T1 = ScrollView;
+    t5 = true;
+    t6 = className;
+    if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = {
+        minWidth: "100%"
+      };
+      $[18] = t7;
+    } else {
+      t7 = $[18];
+    }
+    T0 = View;
+    if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = {
+        flexGrow: 1
+      };
+      $[19] = t3;
+    } else {
+      t3 = $[19];
+    }
+    t4 = lines.map((line_0, index) => {
+      if (line_0.kind === "hunk") {
+        return <Text key={index} numberOfLines={1} style={[mono, textStyle("muted", scheme), {
+          backgroundColor: tokens.color.surfaceSecondary[scheme],
+          paddingHorizontal: UNIFIED_DIFF.gutterPadding
+        }]}>{line_0.text}</Text>;
+      }
+      const tint = line_0.kind === "added" ? withAlpha(EMERALD.fill, 0.1) : line_0.kind === "removed" ? withAlpha(palette.danger[scheme], 0.1) : undefined;
+      const number = line_0.kind === "removed" ? line_0.oldLine : line_0.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_0.kind]} ${line_0.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} hitSlop={0} onPress={() => onLinePress(index)} className="flex-row active:opacity-60" style={{
+        backgroundColor: tint
+      }}>{cells}</Pressable>;
+    });
+    $[2] = className;
+    $[3] = fontSize;
+    $[4] = gutter;
+    $[5] = linePressHint;
+    $[6] = lines;
+    $[7] = markedLines;
+    $[8] = onLinePress;
+    $[9] = scheme;
+    $[10] = t2;
+    $[11] = T0;
+    $[12] = T1;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t7;
+  } else {
+    T0 = $[11];
+    T1 = $[12];
+    t3 = $[13];
+    t4 = $[14];
+    t5 = $[15];
+    t6 = $[16];
+    t7 = $[17];
+  }
+  let t8;
+  if ($[20] !== T0 || $[21] !== t3 || $[22] !== t4) {
+    t8 = <T0 style={t3}>{t4}</T0>;
+    $[20] = T0;
+    $[21] = t3;
+    $[22] = t4;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  let t9;
+  if ($[24] !== T1 || $[25] !== t5 || $[26] !== t6 || $[27] !== t7 || $[28] !== t8) {
+    t9 = <T1 horizontal={t5} className={t6} contentContainerStyle={t7}>{t8}</T1>;
+    $[24] = T1;
+    $[25] = t5;
+    $[26] = t6;
+    $[27] = t7;
+    $[28] = t8;
+    $[29] = t9;
+  } else {
+    t9 = $[29];
+  }
+  return t9;
+}
+function _temp(max, line) {
+  return line.kind === "hunk" ? max : Math.max(max, line.oldLine ?? 0, line.newLine ?? 0);
+}
+/** The web `PrDiffStat`: `+n` in emerald and `−m` in the destructive colour, tabular mono. */
+export function DiffStat(t0) {
+  const $ = _c(21);
+  const {
+    additions,
+    deletions,
+    hideZero: t1,
+    className
+  } = t0;
+  const hideZero = t1 === undefined ? false : t1;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let t2;
+  if ($[0] !== largerText) {
+    t2 = sizeStyle(chatTextSize("small", largerText));
+    $[0] = largerText;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      fontFamily: MONO_FONT
+    };
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== t2) {
+    t4 = [t2, TABULAR, t3];
+    $[3] = t2;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const stat = t4;
+  const t5 = `${additions} additions, ${deletions} deletions`;
+  let t6;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      flexDirection: "row",
+      flexShrink: 0,
+      gap: 4
+    };
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== additions || $[7] !== hideZero || $[8] !== scheme || $[9] !== stat) {
+    t7 = hideZero && additions === 0 ? null : <Text style={[stat, {
+      color: ADDED_TEXT[scheme]
+    }]}>{`+${additions.toLocaleString()}`}</Text>;
+    $[6] = additions;
+    $[7] = hideZero;
+    $[8] = scheme;
+    $[9] = stat;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== deletions || $[12] !== hideZero || $[13] !== scheme || $[14] !== stat) {
+    t8 = hideZero && deletions === 0 ? null : <Text style={[stat, {
+      color: palette.danger[scheme]
+    }]}>{`−${deletions.toLocaleString()}`}</Text>;
+    $[11] = deletions;
+    $[12] = hideZero;
+    $[13] = scheme;
+    $[14] = stat;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== className || $[17] !== t5 || $[18] !== t7 || $[19] !== t8) {
+    t9 = <View accessible={true} accessibilityLabel={t5} className={className} style={t6}>{t7}{t8}</View>;
+    $[16] = className;
+    $[17] = t5;
+    $[18] = t7;
+    $[19] = t8;
+    $[20] = t9;
+  } else {
+    t9 = $[20];
+  }
+  return t9;
+}

package/dist/ai/use-streaming-disclosure.js

@@ -0,0 +1,70 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+const AUTO_CLOSE_DELAY_MS = 1000;
+
+/**
+ * Open state for a fold that follows a live stream: it opens when streaming
+ * starts so the text is readable as it lands, and closes once, a second after
+ * streaming stops. A reader's own toggle cancels a pending auto-close. A port
+ * of the web `useStreamingDisclosure`; spread the result on a `Collapsible`
+ * or `AgentTraceCollapsible`.
+ */
+export function useStreamingDisclosure(isStreaming) {
+  const $ = _c(6);
+  const [open, setOpen] = useState(isStreaming);
+  const [wasStreaming, setWasStreaming] = useState(isStreaming);
+  const [closeDue, setCloseDue] = useState(false);
+  if (isStreaming !== wasStreaming) {
+    setWasStreaming(isStreaming);
+    if (isStreaming) {
+      setOpen(true);
+      setCloseDue(false);
+    } else {
+      setCloseDue(true);
+    }
+  }
+  let t0;
+  let t1;
+  if ($[0] !== closeDue) {
+    t0 = () => {
+      if (!closeDue) {
+        return;
+      }
+      const timer = setTimeout(() => {
+        setOpen(false);
+        setCloseDue(false);
+      }, AUTO_CLOSE_DELAY_MS);
+      return () => clearTimeout(timer);
+    };
+    t1 = [closeDue];
+    $[0] = closeDue;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = next => {
+      setCloseDue(false);
+      setOpen(next);
+    };
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== open) {
+    t3 = {
+      open,
+      onOpenChange: t2
+    };
+    $[4] = open;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+}

package/dist/auth/AuthProviders.jsx

@@ -0,0 +1,27 @@
+import { ClerkLoaded, ClerkProvider, useAuth as useClerkAuth } from "@clerk/clerk-expo";
+import { ConvexProvider } from "convex/react";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+/**
+ * The Clerk and Convex providers from the apps' root `_layout.tsx`:
+ * `ClerkProvider` › `ConvexProviderWithClerk` (with `convex`) › `ClerkLoaded`
+ * (with `loaded`) › children.
+ */
+export function AuthProviders({
+  children,
+  publishableKey,
+  tokenCache,
+  convex,
+  useAuth = useClerkAuth,
+  loaded = true,
+  clerk = true
+}) {
+  if (!clerk) {
+    return convex ? <ConvexProvider client={convex}>{children}</ConvexProvider> : <>{children}</>;
+  }
+  const inner = loaded ? <ClerkLoaded>{children}</ClerkLoaded> : children;
+  return <ClerkProvider publishableKey={publishableKey} tokenCache={tokenCache}>
+      {convex ? <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+          {inner}
+        </ConvexProviderWithClerk> : inner}
+    </ClerkProvider>;
+}

package/dist/auth/AuthScreen.jsx

@@ -0,0 +1,292 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { Keyboard, KeyboardAvoidingView, ScrollView, StyleSheet, Text, View } from "react-native";
+import { cn } from "../cn";
+import { textStyle, typeStyle } from "../controlStyles";
+import { palette } from "../palette";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+/** Space under the form while the keyboard is open, on top of its height. */
+const KEYBOARD_EXTRA = 24;
+
+/** The height of the open soft keyboard, or 0. Edge-to-edge Android ignores `adjustResize`, so the screen pads itself. */
+function useKeyboardHeight() {
+  const $ = _c(2);
+  const [height, setHeight] = useState(0);
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      const show = event => setHeight(event.endCoordinates.height);
+      const hide = () => setHeight(0);
+      const subs = [Keyboard.addListener("keyboardWillShow", show), Keyboard.addListener("keyboardDidShow", show), Keyboard.addListener("keyboardWillHide", hide), Keyboard.addListener("keyboardDidHide", hide)];
+      return () => subs.forEach(_temp);
+    };
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  useEffect(t0, t1);
+  return height;
+}
+
+/**
+ * The sign-in and sign-up frame: a keyboard-avoiding scroll view on the
+ * background colour, with a title, subtitle and the form in a column of 16.
+ * The form is centred until the keyboard opens. Then it aligns to the top and
+ * the scroll content gains the keyboard height as bottom space, so the focused
+ * field and the submit button scroll above the keyboard.
+ */
+function _temp(sub) {
+  return sub.remove();
+}
+export function AuthScreen(t0) {
+  const $ = _c(39);
+  const {
+    title,
+    subtitle,
+    children,
+    header,
+    footer,
+    testID,
+    className
+  } = t0;
+  const scheme = useScheme();
+  const keyboardHeight = useKeyboardHeight();
+  const keyboardOpen = keyboardHeight > 0;
+  const t1 = tokens.color.background[scheme];
+  let t2;
+  if ($[0] !== t1) {
+    t2 = {
+      backgroundColor: t1
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = keyboardOpen ? "justify-start" : "justify-center";
+  let t4;
+  if ($[2] !== className || $[3] !== t3) {
+    t4 = cn("grow px-6 py-12", t3, className);
+    $[2] = className;
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== keyboardHeight || $[6] !== keyboardOpen) {
+    t5 = keyboardOpen ? {
+      paddingBottom: keyboardHeight + KEYBOARD_EXTRA
+    } : undefined;
+    $[5] = keyboardHeight;
+    $[6] = keyboardOpen;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== scheme) {
+    t6 = textStyle("foreground", scheme);
+    $[8] = scheme;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = typeStyle("semibold");
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== t6) {
+    t8 = [t6, t7];
+    $[11] = t6;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== t8 || $[14] !== title) {
+    t9 = <Text accessibilityRole="header" className="font-instrument-sans-semibold text-2xl" style={t8}>{title}</Text>;
+    $[13] = t8;
+    $[14] = title;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  let t10;
+  if ($[16] !== scheme || $[17] !== subtitle) {
+    t10 = subtitle ? <Text className="font-instrument-sans text-base" style={textStyle("muted", scheme)}>{subtitle}</Text> : null;
+    $[16] = scheme;
+    $[17] = subtitle;
+    $[18] = t10;
+  } else {
+    t10 = $[18];
+  }
+  let t11;
+  if ($[19] !== t10 || $[20] !== t9) {
+    t11 = <View className="gap-2">{t9}{t10}</View>;
+    $[19] = t10;
+    $[20] = t9;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  let t12;
+  if ($[22] !== children) {
+    t12 = <View className="gap-4">{children}</View>;
+    $[22] = children;
+    $[23] = t12;
+  } else {
+    t12 = $[23];
+  }
+  let t13;
+  if ($[24] !== footer) {
+    t13 = footer ? <View className="flex-row flex-wrap items-center justify-center gap-1">{footer}</View> : null;
+    $[24] = footer;
+    $[25] = t13;
+  } else {
+    t13 = $[25];
+  }
+  let t14;
+  if ($[26] !== header || $[27] !== t11 || $[28] !== t12 || $[29] !== t13) {
+    t14 = <View className="w-full max-w-sm self-center gap-6">{header}{t11}{t12}{t13}</View>;
+    $[26] = header;
+    $[27] = t11;
+    $[28] = t12;
+    $[29] = t13;
+    $[30] = t14;
+  } else {
+    t14 = $[30];
+  }
+  let t15;
+  if ($[31] !== t14 || $[32] !== t4 || $[33] !== t5 || $[34] !== testID) {
+    t15 = <ScrollView testID={testID} className="flex-1" contentContainerClassName={t4} contentContainerStyle={t5} keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag">{t14}</ScrollView>;
+    $[31] = t14;
+    $[32] = t4;
+    $[33] = t5;
+    $[34] = testID;
+    $[35] = t15;
+  } else {
+    t15 = $[35];
+  }
+  let t16;
+  if ($[36] !== t15 || $[37] !== t2) {
+    t16 = <KeyboardAvoidingView behavior="padding" className="flex-1" style={t2}>{t15}</KeyboardAvoidingView>;
+    $[36] = t15;
+    $[37] = t2;
+    $[38] = t16;
+  } else {
+    t16 = $[38];
+  }
+  return t16;
+}
+
+/** A separator, "or", a separator: between Google and the email fields. */
+export function OrDivider(t0) {
+  const $ = _c(15);
+  const {
+    label: t1
+  } = t0;
+  const label = t1 === undefined ? "or" : t1;
+  const scheme = useScheme();
+  const t2 = tokens.color.separator[scheme];
+  let t3;
+  if ($[0] !== t2) {
+    t3 = {
+      height: StyleSheet.hairlineWidth,
+      backgroundColor: t2
+    };
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const line = t3;
+  let t4;
+  if ($[2] !== line) {
+    t4 = <View className="flex-1" style={line} />;
+    $[2] = line;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  let t5;
+  if ($[4] !== scheme) {
+    t5 = textStyle("muted", scheme);
+    $[4] = scheme;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== label || $[7] !== t5) {
+    t6 = <Text className="font-instrument-sans text-sm" style={t5}>{label}</Text>;
+    $[6] = label;
+    $[7] = t5;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== line) {
+    t7 = <View className="flex-1" style={line} />;
+    $[9] = line;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== t4 || $[12] !== t6 || $[13] !== t7) {
+    t8 = <View className="flex-row items-center gap-3" accessibilityElementsHidden={true} importantForAccessibility="no-hide-descendants">{t4}{t6}{t7}</View>;
+    $[11] = t4;
+    $[12] = t6;
+    $[13] = t7;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  return t8;
+}
+
+/** An inline error under a form, read out when it appears. Nothing without a message. */
+export function FieldError(t0) {
+  const $ = _c(6);
+  const {
+    message,
+    testID
+  } = t0;
+  const scheme = useScheme();
+  if (!message) {
+    return null;
+  }
+  const t1 = palette.danger[scheme];
+  let t2;
+  if ($[0] !== t1) {
+    t2 = {
+      color: t1
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== message || $[3] !== t2 || $[4] !== testID) {
+    t3 = <Text testID={testID} accessibilityLiveRegion="polite" accessibilityRole="alert" className="font-instrument-sans text-sm" style={t2}>{message}</Text>;
+    $[2] = message;
+    $[3] = t2;
+    $[4] = testID;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+}