@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/file-chip.jsx

@@ -0,0 +1,198 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, Text, View } from "react-native";
+import { IconFile } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop } from "../controlStyles";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { MONO_FONT, chatTextSize } from "./chat-text";
+
+/** A `text-xs` line with the web `py-0.5` and border: 22 high. The slop brings it to 44. */
+const CHIP_HEIGHT = 22;
+function FileChipLabel(t0) {
+  const $ = _c(36);
+  const {
+    name
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let T1;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  if ($[0] !== largerText || $[1] !== scheme) {
+    const size = chatTextSize("caption", largerText);
+    T1 = View;
+    t5 = "max-w-full flex-row items-center gap-1.5 self-start border px-1.5 py-0.5";
+    const t8 = tokens.color.border[scheme];
+    const t9 = palette.default[scheme];
+    if ($[11] !== t8 || $[12] !== t9) {
+      t6 = {
+        borderRadius: tokens.radius.md,
+        borderColor: t8,
+        backgroundColor: t9
+      };
+      $[11] = t8;
+      $[12] = t9;
+      $[13] = t6;
+    } else {
+      t6 = $[13];
+    }
+    const t10 = largerText ? 16 : 12;
+    const t11 = tokens.color.foreground[scheme];
+    if ($[14] !== t10 || $[15] !== t11) {
+      t7 = <IconFile size={t10} color={t11} />;
+      $[14] = t10;
+      $[15] = t11;
+      $[16] = t7;
+    } else {
+      t7 = $[16];
+    }
+    T0 = Text;
+    t2 = 1;
+    t3 = "middle";
+    t4 = cn(size, "shrink");
+    t1 = sizeStyle(size);
+    $[0] = largerText;
+    $[1] = scheme;
+    $[2] = T0;
+    $[3] = T1;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+    $[10] = t7;
+  } else {
+    T0 = $[2];
+    T1 = $[3];
+    t1 = $[4];
+    t2 = $[5];
+    t3 = $[6];
+    t4 = $[7];
+    t5 = $[8];
+    t6 = $[9];
+    t7 = $[10];
+  }
+  let t8;
+  if ($[17] !== scheme) {
+    t8 = textStyle("foreground", scheme);
+    $[17] = scheme;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {
+      fontFamily: MONO_FONT
+    };
+    $[19] = t9;
+  } else {
+    t9 = $[19];
+  }
+  let t10;
+  if ($[20] !== t1 || $[21] !== t8) {
+    t10 = [t1, t8, t9];
+    $[20] = t1;
+    $[21] = t8;
+    $[22] = t10;
+  } else {
+    t10 = $[22];
+  }
+  let t11;
+  if ($[23] !== T0 || $[24] !== name || $[25] !== t10 || $[26] !== t2 || $[27] !== t3 || $[28] !== t4) {
+    t11 = <T0 numberOfLines={t2} ellipsizeMode={t3} className={t4} style={t10}>{name}</T0>;
+    $[23] = T0;
+    $[24] = name;
+    $[25] = t10;
+    $[26] = t2;
+    $[27] = t3;
+    $[28] = t4;
+    $[29] = t11;
+  } else {
+    t11 = $[29];
+  }
+  let t12;
+  if ($[30] !== T1 || $[31] !== t11 || $[32] !== t5 || $[33] !== t6 || $[34] !== t7) {
+    t12 = <T1 className={t5} style={t6}>{t7}{t11}</T1>;
+    $[30] = T1;
+    $[31] = t11;
+    $[32] = t5;
+    $[33] = t6;
+    $[34] = t7;
+    $[35] = t12;
+  } else {
+    t12 = $[35];
+  }
+  return t12;
+}
+/**
+ * A file name in a trace line or step body: the web `rounded-md border
+ * bg-secondary px-1.5 py-0.5 font-mono text-xs` chip. It is a button that
+ * opens the file when both `path` and `onOpenFile` are given, and plain text
+ * otherwise. Long names are cut in the middle, so the extension shows.
+ */
+export function FileChip(t0) {
+  const $ = _c(13);
+  const {
+    name,
+    path,
+    onOpenFile
+  } = t0;
+  if (!path || !onOpenFile) {
+    let t1;
+    if ($[0] !== name) {
+      t1 = <FileChipLabel name={name} />;
+      $[0] = name;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = touchSlop(MIN_TOUCH_TARGET, CHIP_HEIGHT);
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== onOpenFile || $[4] !== path) {
+    t2 = () => onOpenFile(path);
+    $[3] = onOpenFile;
+    $[4] = path;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== name) {
+    t3 = <FileChipLabel name={name} />;
+    $[6] = name;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== name || $[9] !== path || $[10] !== t2 || $[11] !== t3) {
+    t4 = <Pressable accessibilityRole="button" accessibilityLabel={name} accessibilityHint={path} hitSlop={t1} onPress={t2} className="min-w-0 max-w-full active:opacity-70">{t3}</Pressable>;
+    $[8] = name;
+    $[9] = path;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
+}

package/dist/ai/icon-button.jsx

@@ -0,0 +1,179 @@
+import { c as _c } from "react/compiler-runtime";
+import { Button } from "../Button";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, buttonColors, touchSlop } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+
+/** The web `icon-sm` button: 32 square with a 16 icon. */
+export const CHAT_ICON_BUTTON_SIZE = 32;
+
+/**
+ * Side and icon per size: `sm` is the web `icon-sm` (32, 16 icon), `xs` the
+ * web `icon-xs` (28, 14 icon) and `md` the web `size-9` (36, 16 icon), Eva's
+ * composer send button. `touch` has no web twin: a 44 square with a 16 icon,
+ * for a row of ghost buttons a thumb taps (the message actions), where the
+ * web 28 squares 2 apart are a mouse's density.
+ */
+const CHAT_ICON_BUTTON = {
+  xs: {
+    side: 28,
+    icon: 14,
+    className: "h-7 w-7"
+  },
+  sm: {
+    side: CHAT_ICON_BUTTON_SIZE,
+    icon: 16,
+    className: "h-8 w-8"
+  },
+  md: {
+    side: 36,
+    icon: 16,
+    className: "h-9 w-9"
+  },
+  touch: {
+    side: MIN_TOUCH_TARGET,
+    icon: 16,
+    className: "h-11 w-11"
+  }
+};
+/**
+ * A round `Button` at the web `icon-sm` size (32), or another
+ * `ChatIconButtonSize`, with the slop to 44. With larger text it is painted
+ * 44 with a 20 icon. The message
+ * actions, the composer tools and its send button, and the code copy button.
+ * Round from the `Button` pill default; `shape="rounded"` gives radius 16.
+ */
+export function ChatIconButton(t0) {
+  const $ = _c(42);
+  let Icon;
+  let className;
+  let iconColor;
+  let label;
+  let props;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      icon: Icon,
+      label,
+      iconColor,
+      variant: t1,
+      size: t2,
+      slop: t3,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = Icon;
+    $[2] = className;
+    $[3] = iconColor;
+    $[4] = label;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    Icon = $[1];
+    className = $[2];
+    iconColor = $[3];
+    label = $[4];
+    props = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+  }
+  const variant = t1 === undefined ? "ghost" : t1;
+  const size = t2 === undefined ? "sm" : t2;
+  const slop = t3 === undefined ? "square" : t3;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let color;
+  let metrics;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  if ($[9] !== className || $[10] !== iconColor || $[11] !== label || $[12] !== largerText || $[13] !== scheme || $[14] !== size || $[15] !== slop || $[16] !== variant) {
+    metrics = largerText ? {
+      side: MIN_TOUCH_TARGET,
+      icon: 20,
+      className: "h-11 w-11"
+    } : CHAT_ICON_BUTTON[size];
+    let t9;
+    if ($[25] !== iconColor || $[26] !== scheme || $[27] !== variant) {
+      t9 = iconColor ?? buttonColors(variant, scheme)?.color ?? tokens.color.foreground[scheme];
+      $[25] = iconColor;
+      $[26] = scheme;
+      $[27] = variant;
+      $[28] = t9;
+    } else {
+      t9 = $[28];
+    }
+    color = t9;
+    T0 = Button;
+    t4 = variant;
+    t5 = "icon";
+    t6 = label;
+    t7 = slop === "square" ? touchSlop(metrics.side) : {
+      ...touchSlop(MIN_TOUCH_TARGET, metrics.side),
+      ...(slop === "vertical" ? null : slop)
+    };
+    t8 = cn(metrics.className, className);
+    $[9] = className;
+    $[10] = iconColor;
+    $[11] = label;
+    $[12] = largerText;
+    $[13] = scheme;
+    $[14] = size;
+    $[15] = slop;
+    $[16] = variant;
+    $[17] = T0;
+    $[18] = color;
+    $[19] = metrics;
+    $[20] = t4;
+    $[21] = t5;
+    $[22] = t6;
+    $[23] = t7;
+    $[24] = t8;
+  } else {
+    T0 = $[17];
+    color = $[18];
+    metrics = $[19];
+    t4 = $[20];
+    t5 = $[21];
+    t6 = $[22];
+    t7 = $[23];
+    t8 = $[24];
+  }
+  let t9;
+  if ($[29] !== Icon || $[30] !== color || $[31] !== metrics.icon) {
+    t9 = <Icon size={metrics.icon} color={color} />;
+    $[29] = Icon;
+    $[30] = color;
+    $[31] = metrics.icon;
+    $[32] = t9;
+  } else {
+    t9 = $[32];
+  }
+  let t10;
+  if ($[33] !== T0 || $[34] !== props || $[35] !== t4 || $[36] !== t5 || $[37] !== t6 || $[38] !== t7 || $[39] !== t8 || $[40] !== t9) {
+    t10 = <T0 variant={t4} size={t5} accessibilityLabel={t6} hitSlop={t7} className={t8} {...props}>{t9}</T0>;
+    $[33] = T0;
+    $[34] = props;
+    $[35] = t4;
+    $[36] = t5;
+    $[37] = t6;
+    $[38] = t7;
+    $[39] = t8;
+    $[40] = t9;
+    $[41] = t10;
+  } else {
+    t10 = $[41];
+  }
+  return t10;
+}

package/dist/ai/index.js

@@ -0,0 +1,37 @@
+// AI chat parts, ported from the `@vvedantb/ui` AI elements for touch. On the
+// `@vvedantb/native-ui/ai` entry only, so apps without a chat do not bundle
+// them. Generic: no model names and no app logic.
+export { useStreamingDisclosure } from "./use-streaming-disclosure";
+export { chatTextSize, formatElapsed, META_TEXT_STYLE, MONO_FONT } from "./chat-text";
+export { Shimmer, SHIMMER_LOW_OPACITY } from "./shimmer";
+export { Collapsible, CollapsibleTrigger, CollapsibleContent, CollapsibleChevron, useCollapsible } from "./collapsible";
+export { Conversation, ConversationContent, ConversationList, ConversationEmptyState, ConversationScrollButton, ConversationDock, useConversation, isScrolledToBottom, AT_BOTTOM_THRESHOLD } from "./conversation";
+export { Message, MessageContent, MessageActionsBar, MessageAction, MessageMeta, MessageBotLabel, MESSAGE_ACTIONS, MESSAGE_HIGHLIGHT_MS, userBubbleStyle, tintBubbleStyle } from "./message";
+export { MessageActionSheet } from "./message-action-sheet";
+export { ReplyQuoteChip } from "./reply-quote-chip";
+export { MessageQuote, QUOTE_MAX_LINES } from "./message-quote";
+export { Reasoning, ReasoningTrigger, ReasoningContent, useReasoning, reasoningMessage } from "./reasoning";
+export { AgentTrace, AgentTraceLine, AgentTraceIcon, AgentTraceTitle, AgentTraceDescription, AgentTraceCollapsible, AgentTraceCollapsibleTrigger, AgentTraceCollapsibleContent, AgentTraceFold, traceLineColor } from "./trace";
+export { ChainOfThought, ChainOfThoughtHeader, ChainOfThoughtContent, ChainOfThoughtStep, ChainOfThoughtSearchResults, ChainOfThoughtSearchResult } from "./chain-of-thought";
+export { ActivityStep } from "./activity-step";
+// The web timeline's pure logic (byte-identical copies) and its folded rules.
+// The step type is `ActivityTimelineStep` here: `ActivityStep` is the line above.
+export { activityStepHasRichDetail } from "./activity-step-types";
+export { deriveActionGroupSummary, deriveReadableCommandDisplay, deriveStepRowPresentation, resolveCommandVisualKind } from "./activity-step-label";
+export { activityRowKey, activitySegmentKey, buildActivityRows, groupActivityRows } from "./activity-tasks-utils";
+export { ACTIVITY_MAX_VISIBLE_BLOCKS, ACTIVITY_MAX_VISIBLE_CHILDREN, activityChildRows, activityStepSeconds, foldedActivitySegments } from "./activity-timeline";
+export { PromptInput, PromptInputButton, PromptInputChip, PromptInputSubmit, PROMPT_INPUT_CHIP, isGenerating } from "./prompt-input";
+export { PromptInputMenu, PromptInputMenuItem, PROMPT_INPUT_MENU, promptInputMenuHeight } from "./prompt-input-menu";
+export { Suggestions, Suggestion } from "./suggestion";
+export { Sources, SourcesTrigger, SourcesContent, Source, sourcesLabel } from "./sources";
+export { FileChip } from "./file-chip";
+export { Attachments, Attachment, getMediaCategory, getAttachmentLabel, ATTACHMENT_PRESS_TARGET } from "./attachments";
+export { ChatThread } from "./chat-thread";
+export { ChatJumpRail } from "./chat-jump-rail";
+export { CodeBlock, CodeBlockCopyButton } from "./code-block";
+export { ResponseText, ChatTextColorContext } from "./response-text";
+export { ChoiceQuestion, choiceAnswers } from "./choice-question";
+export { ActivityStepDetail } from "./activity-step-detail";
+export { UnifiedDiff, DiffStat, UNIFIED_DIFF } from "./unified-diff";
+export { ToolApprovalCard, ToolDraftCard, summarizeArgs, ARGS_MAX_CHARS, changedDraftEdits, DRAFT_ROLE_LABELS } from "./tool-approval-card";
+export { SubagentRunCard, SubagentResultCard, subagentStatusColors } from "./subagent-cards";