@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/Toast.jsx

@@ -0,0 +1,396 @@
+import { c as _c } from "react/compiler-runtime";
+import { Fragment, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { AccessibilityInfo, ActivityIndicator, Platform, Pressable, Text, View } from "react-native";
+import { FadeInUp, FadeOutUp, LinearTransition } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { notificationHaptic } from "./haptics";
+import { EASE_OUT } from "./motion";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import Svg, { Path } from "react-native-svg";
+import { cn } from "./cn";
+import { sizeStyle, textStyle, typeStyle } from "./controlStyles";
+import { FLOATING_INSET } from "./floating";
+import { TOAST_ICON_SIZE, TOAST_ICONS, toastIconColor, toastShadowStyle, toastSurfaceStyle } from "./toastChrome";
+import { tokens } from "./tokens";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+import { NativeOnlyAnimatedView } from "./primitives/native-only-animated-view";
+import { ToastDragContext } from "./toastDrag";
+import { getToasts, subscribeToasts, toast } from "./toastStore";
+
+// On iOS the overlay draws above RN `Modal`s, so toasts show over dialogs (as
+// sonner does on the web). On Android a `Modal` still covers them.
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : Fragment;
+const toastShadow = toastShadowStyle(Platform.OS);
+
+// Down from the top edge and back up the way it came, the exit 20% quicker:
+// the reader is done with it.
+const TOAST_ENTER = FadeInUp.duration(200).easing(EASE_OUT);
+const TOAST_EXIT = FadeOutUp.duration(160).easing(EASE_OUT);
+
+/**
+ * Renders the `toast()` queue at the top of the screen, inside the safe-area
+ * insets. Mount once, inside `SafeAreaProvider` and after the navigator.
+ */
+export function Toaster(t0) {
+  const $ = _c(9);
+  const {
+    offset: t1
+  } = t0;
+  const offset = t1 === undefined ? 8 : t1;
+  const items = useSyncExternalStore(subscribeToasts, getToasts, getToasts);
+  const insets = useSafeAreaInsets();
+  if (items.length === 0) {
+    return null;
+  }
+  const t2 = insets.top + offset;
+  const t3 = insets.left + FLOATING_INSET;
+  const t4 = insets.right + FLOATING_INSET;
+  let t5;
+  if ($[0] !== t2 || $[1] !== t3 || $[2] !== t4) {
+    t5 = {
+      position: "absolute",
+      top: t2,
+      left: t3,
+      right: t4,
+      zIndex: 50
+    };
+    $[0] = t2;
+    $[1] = t3;
+    $[2] = t4;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  let t6;
+  if ($[4] !== items) {
+    t6 = items.map(_temp);
+    $[4] = items;
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== t5 || $[7] !== t6) {
+    t7 = <FullWindowOverlay><View pointerEvents="box-none" className="gap-2" style={t5}>{t6}</View></FullWindowOverlay>;
+    $[6] = t5;
+    $[7] = t6;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  return t7;
+}
+
+/** The web filled 24 icons (`toastChrome`), or a spinner while loading. */
+function _temp(item) {
+  return <ToastCard key={item.id} item={item} />;
+}
+function ToastIcon(t0) {
+  const $ = _c(12);
+  const {
+    item
+  } = t0;
+  const scheme = useScheme();
+  if (item.variant === "loading") {
+    const t1 = tokens.color.muted[scheme];
+    let t2;
+    if ($[0] !== t1) {
+      t2 = <ActivityIndicator size="small" color={t1} />;
+      $[0] = t1;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    return t2;
+  }
+  if (item.variant === "default") {
+    return null;
+  }
+  const {
+    viewBox,
+    d,
+    evenOdd
+  } = TOAST_ICONS[item.variant];
+  const rule = evenOdd ? "evenodd" : undefined;
+  let t1;
+  if ($[2] !== item.variant || $[3] !== scheme) {
+    t1 = toastIconColor(item.variant, scheme);
+    $[2] = item.variant;
+    $[3] = scheme;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== d || $[6] !== rule || $[7] !== t1) {
+    t2 = <Path d={d} fill={t1} fillRule={rule} clipRule={rule} />;
+    $[5] = d;
+    $[6] = rule;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== t2 || $[10] !== viewBox) {
+    t3 = <Svg width={TOAST_ICON_SIZE} height={TOAST_ICON_SIZE} viewBox={viewBox}>{t2}</Svg>;
+    $[9] = t2;
+    $[10] = viewBox;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  return t3;
+}
+
+/**
+ * Closes `item` after its `duration`, counting only while it is not `held`:
+ * a finger on the toast pauses the time left, and lifting it resumes. A
+ * toast replaced in place (same id, new item) starts its own time afresh.
+ */
+function useToastTimer(item, held) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] !== item) {
+    t0 = {
+      item,
+      ms: item.duration
+    };
+    $[0] = item;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const left = useRef(t0);
+  let t1;
+  let t2;
+  if ($[2] !== held || $[3] !== item) {
+    t1 = () => {
+      if (left.current.item !== item) {
+        left.current = {
+          item,
+          ms: item.duration
+        };
+      }
+      if (held || !Number.isFinite(item.duration)) {
+        return;
+      }
+      const startedAt = Date.now();
+      const timer = setTimeout(() => toast.dismiss(item.id), left.current.ms);
+      return () => {
+        clearTimeout(timer);
+        left.current.ms = left.current.ms - (Date.now() - startedAt);
+      };
+    };
+    t2 = [item, held];
+    $[2] = held;
+    $[3] = item;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t1 = $[4];
+    t2 = $[5];
+  }
+  useEffect(t1, t2);
+}
+function ToastCard(t0) {
+  const $ = _c(56);
+  const {
+    item
+  } = t0;
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const Drag = useContext(ToastDragContext);
+  const [held, setHeld] = useState(false);
+  useToastTimer(item, held);
+  let t1;
+  if ($[0] !== item.variant) {
+    t1 = () => {
+      if (item.variant === "success" || item.variant === "error") {
+        notificationHaptic(item.variant);
+      }
+    };
+    $[0] = item.variant;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== item.id || $[3] !== item.variant) {
+    t2 = [item.id, item.variant];
+    $[2] = item.id;
+    $[3] = item.variant;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  let t3;
+  let t4;
+  if ($[5] !== item.description || $[6] !== item.title) {
+    t3 = () => {
+      AccessibilityInfo.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
+    };
+    t4 = [item.title, item.description];
+    $[5] = item.description;
+    $[6] = item.title;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t3 = $[7];
+    t4 = $[8];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[9] !== scheme) {
+    t5 = toastSurfaceStyle(scheme);
+    $[9] = scheme;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== t5) {
+    t6 = [t5, toastShadow];
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  const t7 = `toast-${item.id}`;
+  const t8 = !item.action;
+  let t9;
+  if ($[13] !== item.id) {
+    t9 = () => toast.dismiss(item.id);
+    $[13] = item.id;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  let t10;
+  if ($[15] !== item) {
+    t10 = <ToastIcon item={item} />;
+    $[15] = item;
+    $[16] = t10;
+  } else {
+    t10 = $[16];
+  }
+  const t11 = largerText ? "text-lg" : "text-sm";
+  let t12;
+  if ($[17] !== t11) {
+    t12 = cn("font-instrument-sans-medium", t11);
+    $[17] = t11;
+    $[18] = t12;
+  } else {
+    t12 = $[18];
+  }
+  let t13;
+  if ($[19] !== scheme) {
+    t13 = textStyle("foreground", scheme);
+    $[19] = scheme;
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  let t14;
+  if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = typeStyle("medium");
+    $[21] = t14;
+  } else {
+    t14 = $[21];
+  }
+  let t15;
+  if ($[22] !== largerText) {
+    t15 = largerText ? sizeStyle("text-lg") : sizeStyle("text-sm", "snug");
+    $[22] = largerText;
+    $[23] = t15;
+  } else {
+    t15 = $[23];
+  }
+  let t16;
+  if ($[24] !== t13 || $[25] !== t15) {
+    t16 = [t13, t14, t15];
+    $[24] = t13;
+    $[25] = t15;
+    $[26] = t16;
+  } else {
+    t16 = $[26];
+  }
+  let t17;
+  if ($[27] !== item.title || $[28] !== t12 || $[29] !== t16) {
+    t17 = <Text className={t12} style={t16}>{item.title}</Text>;
+    $[27] = item.title;
+    $[28] = t12;
+    $[29] = t16;
+    $[30] = t17;
+  } else {
+    t17 = $[30];
+  }
+  let t18;
+  if ($[31] !== item.description || $[32] !== largerText || $[33] !== scheme) {
+    t18 = item.description ? <Text className={cn("font-instrument-sans", largerText ? "text-base" : "text-sm")} style={textStyle("muted", scheme)}>{item.description}</Text> : null;
+    $[31] = item.description;
+    $[32] = largerText;
+    $[33] = scheme;
+    $[34] = t18;
+  } else {
+    t18 = $[34];
+  }
+  let t19;
+  if ($[35] !== t17 || $[36] !== t18) {
+    t19 = <View className="min-w-0 flex-1">{t17}{t18}</View>;
+    $[35] = t17;
+    $[36] = t18;
+    $[37] = t19;
+  } else {
+    t19 = $[37];
+  }
+  let t20;
+  if ($[38] !== item.action || $[39] !== item.id || $[40] !== scheme) {
+    t20 = item.action ? <Pressable accessibilityRole="button" hitSlop={8} onPress={() => {
+      item.action?.onPress();
+      toast.dismiss(item.id);
+    }} className="rounded-full bg-secondary px-3 py-1.5 active:opacity-70"><Text className="font-instrument-sans-semibold text-sm" style={[textStyle("foreground", scheme), typeStyle("semibold")]}>{item.action.label}</Text></Pressable> : null;
+    $[38] = item.action;
+    $[39] = item.id;
+    $[40] = scheme;
+    $[41] = t20;
+  } else {
+    t20 = $[41];
+  }
+  let t21;
+  if ($[42] !== t10 || $[43] !== t19 || $[44] !== t20 || $[45] !== t7 || $[46] !== t8 || $[47] !== t9) {
+    t21 = <Pressable testID={t7} accessible={t8} accessibilityRole="button" accessibilityHint="Closes the message" onPress={t9} className="flex-row items-center gap-3 px-4 py-3">{t10}{t19}{t20}</Pressable>;
+    $[42] = t10;
+    $[43] = t19;
+    $[44] = t20;
+    $[45] = t7;
+    $[46] = t8;
+    $[47] = t9;
+    $[48] = t21;
+  } else {
+    t21 = $[48];
+  }
+  let t22;
+  if ($[49] !== t21 || $[50] !== t6) {
+    t22 = <View style={t6}>{t21}</View>;
+    $[49] = t21;
+    $[50] = t6;
+    $[51] = t22;
+  } else {
+    t22 = $[51];
+  }
+  const surface = t22;
+  let t23;
+  if ($[52] !== Drag || $[53] !== item.id || $[54] !== surface) {
+    t23 = <NativeOnlyAnimatedView entering={TOAST_ENTER} exiting={TOAST_EXIT} layout={LinearTransition}>{Drag ? <Drag onDismiss={() => toast.dismiss(item.id)} onHoldChange={setHeld}>{surface}</Drag> : surface}</NativeOnlyAnimatedView>;
+    $[52] = Drag;
+    $[53] = item.id;
+    $[54] = surface;
+    $[55] = t23;
+  } else {
+    t23 = $[55];
+  }
+  return t23;
+}

package/dist/ai/activity-step-detail.jsx

@@ -0,0 +1,179 @@
+import { c as _c } from "react/compiler-runtime";
+import { Text, View } from "react-native";
+import { Badge } from "../Badge";
+import { sizeStyle, textStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { MONO_FONT, chatTextSize } from "./chat-text";
+import { EMERALD } from "./unified-diff";
+import { CodeBlock } from "./code-block";
+
+/** The step fields the detail reads: the web `ActivityStep` subset. */
+
+/**
+ * A tool step's body, as the web `ActivityStepDetail`: exit code and
+ * "Truncated" badges, the shell transcript (`$ command`, a blank line, then
+ * the output) in a `CodeBlock`, edits as a red before block over a green after
+ * block, and a written file's preview. While `hasHiddenDetail` is set and
+ * nothing has loaded, "Loading output...".
+ */
+export function ActivityStepDetail(t0) {
+  const $ = _c(46);
+  const {
+    step,
+    onCopy,
+    loadingLabel: t1
+  } = t0;
+  const loadingLabel = t1 === undefined ? "Loading output..." : t1;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let exitCode;
+  let mono;
+  let t2;
+  let t3;
+  let transcript;
+  if ($[0] !== largerText || $[1] !== loadingLabel || $[2] !== scheme || $[3] !== step.command || $[4] !== step.contentPreview || $[5] !== step.detail || $[6] !== step.edits?.length || $[7] !== step.hasHiddenDetail || $[8] !== step.output || $[9] !== step.type) {
+    const caption = chatTextSize("caption", largerText);
+    const command = step.command ?? (step.type === "bash" ? step.detail : undefined);
+    const t4 = command ? `$ ${command}` : null;
+    const t5 = step.output?.text ?? null;
+    let t6;
+    if ($[16] !== t4 || $[17] !== t5) {
+      t6 = [t4, t5].filter(_temp);
+      $[16] = t4;
+      $[17] = t5;
+      $[18] = t6;
+    } else {
+      t6 = $[18];
+    }
+    transcript = t6.join("\n\n");
+    const awaitingDetail = step.hasHiddenDetail === true && !step.output && !step.edits?.length && !step.contentPreview;
+    exitCode = step.output?.exitCode;
+    mono = [sizeStyle(caption), {
+      fontFamily: MONO_FONT
+    }];
+    T0 = View;
+    if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = {
+        gap: 8
+      };
+      $[19] = t2;
+    } else {
+      t2 = $[19];
+    }
+    t3 = awaitingDetail ? <Text className="font-instrument-sans" style={[sizeStyle(caption), textStyle("muted", scheme)]}>{loadingLabel}</Text> : null;
+    $[0] = largerText;
+    $[1] = loadingLabel;
+    $[2] = scheme;
+    $[3] = step.command;
+    $[4] = step.contentPreview;
+    $[5] = step.detail;
+    $[6] = step.edits?.length;
+    $[7] = step.hasHiddenDetail;
+    $[8] = step.output;
+    $[9] = step.type;
+    $[10] = T0;
+    $[11] = exitCode;
+    $[12] = mono;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = transcript;
+  } else {
+    T0 = $[10];
+    exitCode = $[11];
+    mono = $[12];
+    t2 = $[13];
+    t3 = $[14];
+    transcript = $[15];
+  }
+  let t4;
+  if ($[20] !== exitCode || $[21] !== step.output?.truncated) {
+    t4 = exitCode !== undefined || step.output?.truncated ? <View className="flex-row flex-wrap" style={{
+      gap: 6
+    }}>{exitCode !== undefined ? <Badge variant={exitCode === 0 ? "secondary" : "destructive"}>{`Exit code ${exitCode}`}</Badge> : null}{step.output?.truncated ? <Badge variant="outline">Truncated</Badge> : null}</View> : null;
+    $[20] = exitCode;
+    $[21] = step.output?.truncated;
+    $[22] = t4;
+  } else {
+    t4 = $[22];
+  }
+  let t5;
+  if ($[23] !== onCopy || $[24] !== transcript) {
+    t5 = transcript ? <CodeBlock code={transcript} language="shell" highlight={false} onCopy={onCopy} /> : null;
+    $[23] = onCopy;
+    $[24] = transcript;
+    $[25] = t5;
+  } else {
+    t5 = $[25];
+  }
+  let t6;
+  if ($[26] !== step.edits) {
+    t6 = step.edits ?? [];
+    $[26] = step.edits;
+    $[27] = t6;
+  } else {
+    t6 = $[27];
+  }
+  let t7;
+  if ($[28] !== mono || $[29] !== scheme || $[30] !== t6) {
+    let t8;
+    if ($[32] !== mono || $[33] !== scheme) {
+      t8 = (edit, index) => <View key={index} style={{
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: tokens.color.border[scheme],
+        overflow: "hidden"
+      }}><Text selectable={true} style={[mono, {
+          padding: 8,
+          color: palette.danger[scheme],
+          backgroundColor: withAlpha(palette.danger[scheme], 0.1)
+        }]}>{edit.oldText}</Text><Text selectable={true} style={[mono, {
+          padding: 8,
+          color: EMERALD[scheme],
+          backgroundColor: withAlpha(EMERALD.fill, 0.1)
+        }]}>{edit.newText}</Text></View>;
+      $[32] = mono;
+      $[33] = scheme;
+      $[34] = t8;
+    } else {
+      t8 = $[34];
+    }
+    t7 = t6.map(t8);
+    $[28] = mono;
+    $[29] = scheme;
+    $[30] = t6;
+    $[31] = t7;
+  } else {
+    t7 = $[31];
+  }
+  let t8;
+  if ($[35] !== onCopy || $[36] !== step.contentPreview) {
+    t8 = step.contentPreview ? <CodeBlock code={step.contentPreview} language="text" highlight={false} onCopy={onCopy} /> : null;
+    $[35] = onCopy;
+    $[36] = step.contentPreview;
+    $[37] = t8;
+  } else {
+    t8 = $[37];
+  }
+  let t9;
+  if ($[38] !== T0 || $[39] !== t2 || $[40] !== t3 || $[41] !== t4 || $[42] !== t5 || $[43] !== t7 || $[44] !== t8) {
+    t9 = <T0 style={t2}>{t3}{t4}{t5}{t7}{t8}</T0>;
+    $[38] = T0;
+    $[39] = t2;
+    $[40] = t3;
+    $[41] = t4;
+    $[42] = t5;
+    $[43] = t7;
+    $[44] = t8;
+    $[45] = t9;
+  } else {
+    t9 = $[45];
+  }
+  return t9;
+}
+function _temp(part) {
+  return Boolean(part);
+}