@agimon-ai/po-native-components 0.0.0-alpha.23 → 0.0.0-alpha.24

package/dist/components/AgentAvatar.d.mts

@@ -0,0 +1,14 @@
+//#region src/components/AgentAvatar.d.ts
+/** How an agent is doing, as the avatar's corner dot shows it. */
+export type AgentState = 'running' | 'waiting' | 'done' | 'failed';
+/** One letter for a first name, two for a hyphenated agent name (`po-developer` is PD). */
+export declare function agentInitials(name: string): string;
+/** An agent's face: its initials on a tint fixed by `seed`, with its state as a corner dot. */
+export declare function AgentAvatar({ name, seed, state, size }: {
+  name: string;
+  seed?: string;
+  state?: AgentState;
+  size?: 'sm' | 'md';
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=AgentAvatar.d.mts.map

package/dist/components/AgentAvatar.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentAvatar.d.mts","names":[],"sources":["../../src/components/AgentAvatar.tsx"],"mappings":";;YAQY;;wBAGI,cAAc;;wBA6Bd,cACd,MACA,MACA,OACA;EAEA;EACA;EACA,QAAQ;EACR;oBACD,IAAA"}

package/dist/components/AgentAvatar.mjs

@@ -0,0 +1,87 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { Dot } from "./Dot.mjs";
+import { View } from "react-native-unistyles/components/native/View";
+import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/AgentAvatar.tsx
+/** One letter for a first name, two for a hyphenated agent name (`po-developer` is PD). */
+function agentInitials(name) {
+	return name.split(/[-_.\s]+/u).filter(Boolean).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
+}
+const TINTS = [
+	"green",
+	"teal",
+	"blue",
+	"cyan",
+	"yellow",
+	"violet"
+];
+function tintFor(seed) {
+	let hash = 0;
+	for (const char of seed) hash = (hash * 31 + char.charCodeAt(0)) % 997;
+	return TINTS[hash % TINTS.length] ?? "green";
+}
+const RING = 2;
+const STATE_DOT = {
+	running: "green",
+	waiting: "yellow",
+	done: "neutral",
+	failed: "red"
+};
+/** An agent's face: its initials on a tint fixed by `seed`, with its state as a corner dot. */
+function AgentAvatar({ name, seed = name, state, size = "md" }) {
+	return /* @__PURE__ */ jsxs(View, {
+		accessible: true,
+		accessibilityRole: "image",
+		accessibilityLabel: state ? `${name}, ${state}` : name,
+		testID: "agent-avatar",
+		style: styles.frame,
+		children: [/* @__PURE__ */ jsx(View, {
+			style: styles.face(tintFor(seed), size === "sm" ? 24 : 32),
+			children: /* @__PURE__ */ jsx(Text, {
+				style: styles.initials,
+				children: agentInitials(name)
+			})
+		}), state ? /* @__PURE__ */ jsx(Dot, {
+			tone: STATE_DOT[state],
+			size: "md",
+			pulse: state === "running",
+			style: styles.dot
+		}) : null]
+	});
+}
+const styles = StyleSheet.create((theme) => ({
+	frame: { flexShrink: 0 },
+	face: (tint, side) => ({
+		width: side,
+		height: side,
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: theme.borderRadius.full,
+		backgroundColor: theme.colors[`tint-${tint}`],
+		uni__dependencies: [0]
+	}),
+	initials: {
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		color: theme.colors.hi,
+		uni__dependencies: [0]
+	},
+	dot: {
+		position: "absolute",
+		right: -4,
+		bottom: -4,
+		width: theme.spacing(2) + 4,
+		height: theme.spacing(2) + 4,
+		borderWidth: RING,
+		borderColor: theme.colors.panel,
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { AgentAvatar, agentInitials };
+//# sourceMappingURL=AgentAvatar.mjs.map

package/dist/components/AgentAvatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentAvatar.mjs","names":["DotTone","StyleSheet","fontOf","Dot","AgentState","agentInitials","name","split","filter","Boolean","slice","map","part","charAt","toUpperCase","join","TINTS","const","Tint","tintFor","seed","hash","char","charCodeAt","length","RING","STATE_DOT","Readonly","Record","running","waiting","done","failed","AgentAvatar","state","size","styles","frame","face","initials","dot","create","theme","flexShrink","tint","side","width","height","alignItems","justifyContent","borderRadius","full","backgroundColor","colors","uni__dependencies","fontFamily","sans","fontSize","sm","lineHeight","color","hi","position","right","bottom","spacing","borderWidth","borderColor","panel"],"sources":["../../src/components/AgentAvatar.tsx"],"sourcesContent":["import type { DotTone } from '@agimon-ai/po-web-components/nativeTheme';\nimport { Text, View } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { Dot } from './Dot';\n\n/** How an agent is doing, as the avatar's corner dot shows it. */\nexport type AgentState = 'running' | 'waiting' | 'done' | 'failed';\n\n/** One letter for a first name, two for a hyphenated agent name (`po-developer` is PD). */\nexport function agentInitials(name: string): string {\n  return name\n    .split(/[-_.\\s]+/u)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((part) => part.charAt(0).toUpperCase())\n    .join('');\n}\n\n// ponytail: mirrors po-web-components AgentAvatar's tint hash; keep the two in step so a seed reads the same tint.\nconst TINTS = ['green', 'teal', 'blue', 'cyan', 'yellow', 'violet'] as const;\ntype Tint = (typeof TINTS)[number];\n\nfunction tintFor(seed: string): Tint {\n  let hash = 0;\n  for (const char of seed) hash = (hash * 31 + char.charCodeAt(0)) % 997;\n  return TINTS[hash % TINTS.length] ?? 'green';\n}\n\nconst RING = 2;\n\nconst STATE_DOT: Readonly<Record<AgentState, DotTone>> = {\n  running: 'green',\n  waiting: 'yellow',\n  done: 'neutral',\n  failed: 'red',\n};\n\n/** An agent's face: its initials on a tint fixed by `seed`, with its state as a corner dot. */\nexport function AgentAvatar({\n  name,\n  seed = name,\n  state,\n  size = 'md',\n}: {\n  name: string;\n  seed?: string;\n  state?: AgentState;\n  size?: 'sm' | 'md';\n}) {\n  return (\n    <View\n      accessible\n      accessibilityRole=\"image\"\n      accessibilityLabel={state ? `${name}, ${state}` : name}\n      testID=\"agent-avatar\"\n      style={styles.frame}\n    >\n      <View style={styles.face(tintFor(seed), size === 'sm' ? 24 : 32)}>\n        <Text style={styles.initials}>{agentInitials(name)}</Text>\n      </View>\n      {state ? <Dot tone={STATE_DOT[state]} size=\"md\" pulse={state === 'running'} style={styles.dot} /> : null}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  frame: { flexShrink: 0 },\n  // `size-6` and `size-8`.\n  face: (tint: Tint, side: number) => ({\n    width: side,\n    height: side,\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: theme.borderRadius.full,\n    backgroundColor: theme.colors[`tint-${tint}`],\n  }),\n  initials: {\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeight.sm,\n    color: theme.colors.hi,\n  },\n  // `-right-0.5 -bottom-0.5 ring-2 ring-po-panel`: a ring sits outside the dot, a border inside, so the box grows by it.\n  dot: {\n    position: 'absolute',\n    right: -2 - RING,\n    bottom: -2 - RING,\n    width: theme.spacing(2) + 2 * RING,\n    height: theme.spacing(2) + 2 * RING,\n    borderWidth: RING,\n    borderColor: theme.colors.panel,\n  },\n}));\n"],"mappings":";;;;;;;;;AAWA,SAAgBK,cAAcC,MAAsB;CAClD,OAAOA,KACJC,MAAM,WAAW,CAAC,CAClBC,OAAOC,OAAO,CAAC,CACfC,MAAM,GAAG,CAAC,CAAC,CACXC,KAAKC,SAASA,KAAKC,OAAO,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAC3CC,KAAK,EAAE;AACZ;AAGA,MAAMC,QAAQ;CAAC;CAAS;CAAQ;CAAQ;CAAQ;CAAU;AAAQ;AAGlE,SAASG,QAAQC,MAAoB;CACnC,IAAIC,OAAO;CACX,KAAK,MAAMC,QAAQF,MAAMC,QAAQA,OAAO,KAAKC,KAAKC,WAAW,CAAC,KAAK;CACnE,OAAOP,MAAMK,OAAOL,MAAMQ,WAAW;AACvC;AAEA,MAAMC,OAAO;AAEb,MAAMC,YAAmD;CACvDG,SAAS;CACTC,SAAS;CACTC,MAAM;CACNC,QAAQ;AACV;;AAGA,SAAgBC,YAAY,EAC1B3B,MACAc,OAAOd,MACP4B,OACAC,OAAO,QAMN;CACD,OACE,qBAAC,MAAD;EACE;EACA,mBAAkB;EAClB,oBAAoBD,QAAQ,GAAG5B,KAAI,IAAK4B,UAAU5B;EAClD,QAAO;EACP,OAAO8B,OAAOC;YALhB,CAOE,oBAAC,MAAD;GAAM,OAAOD,OAAOE,KAAKnB,QAAQC,IAAI,GAAGe,SAAS,OAAO,KAAK,EAAE;aAC7D,oBAAC,MAAD;IAAM,OAAOC,OAAOG;cAAWlC,cAAcC,IAAI;GAAQ;EACrD,IACL4B,QAAQ,oBAAC,KAAD;GAAK,MAAMR,UAAUQ;GAAQ,MAAK;GAAK,OAAOA,UAAU;GAAW,OAAOE,OAAOI;EAAI,KAAM,IAChG;;AAEV;AAEA,MAAMJ,SAASnC,WAAWwC,QAAQC,WAAW;CAC3CL,OAAO,EAAEM,YAAY,EAAE;CAEvBL,OAAOM,MAAYC,UAAkB;EACnCC,OAAOD;EACPE,QAAQF;EACRG,YAAY;EACZC,gBAAgB;EAChBC,cAAcR,MAAMQ,aAAaC;EACjCC,iBAAiBV,MAAMW,OAAO,QAAQT;EAAOU,mBAAA,CAAA,CAAA;CAC/C;CACAf,UAAU;EACRgB,YAAYrD,OAAOwC,MAAMa,WAAWC,IAAI;EACxCC,UAAUf,MAAMe,SAASC;EACzBC,YAAYjB,MAAMiB,WAAWD;EAC7BE,OAAOlB,MAAMW,OAAOQ;EAAEP,mBAAA,CAAA,CAAA;CACxB;CAEAd,KAAK;EACHsB,UAAU;EACVC,OAAO;EACPC,QAAQ;EACRlB,OAAOJ,MAAMuB,QAAQ,CAAC,IAAI;EAC1BlB,QAAQL,MAAMuB,QAAQ,CAAC,IAAI;EAC3BC,aAAazC;EACb0C,aAAazB,MAAMW,OAAOe;EAAKd,mBAAA,CAAA,CAAA;CACjC;AACF,EAAE"}

package/dist/components/Badge.d.mts

@@ -1,5 +1,5 @@
-import { ChipTone } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleProp, ViewProps, ViewStyle } from "react-native";
+import { ChipTone } from "@agimon-ai/po-web-components/nativeTheme";
 import { ReactNode } from "react";
 //#region src/components/Badge.d.ts
 export type BadgeTone = ChipTone;

package/dist/components/Badge.mjs

@@ -2,8 +2,8 @@ import { fontOf } from "../lib/fonts.mjs";
 import { CHIP_INK } from "../lib/tone.mjs";
 import { wrapText } from "../lib/wrapText.mjs";
 import { View } from "react-native-unistyles/components/native/View";
-import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Badge.tsx

package/dist/components/Button.mjs

@@ -3,8 +3,8 @@ import { wrapText } from "../lib/wrapText.mjs";
 import { IconColorContext } from "../icons/IconColorContext.mjs";
 import { impactLight } from "../lib/haptics.mjs";
 import { Spinner } from "./Spinner.mjs";
-import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable } from "react-native-unistyles/components/native/Pressable";
 

package/dist/components/CodeBlock.mjs

@@ -1,8 +1,8 @@
 import { fontOf } from "../lib/fonts.mjs";
 import { CopyButton } from "./CopyButton.mjs";
 import { View } from "react-native-unistyles/components/native/View";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollView } from "react-native-unistyles/components/native/ScrollView";
 

package/dist/components/Dialog.mjs

@@ -4,14 +4,14 @@ import { Button } from "./Button.mjs";
 import { CloseIcon } from "../icons/icons.mjs";
 import { useControllable } from "../lib/useControllable.mjs";
 import { View } from "react-native-unistyles/components/native/View";
-import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
+import { Text } from "react-native-unistyles/components/native/Text";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { Easing, Modal, Platform } from "react-native";
-import { Text } from "react-native-unistyles/components/native/Text";
+import { Animated } from "react-native-unistyles/components/native/Animated";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { createContext, useContext, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable } from "react-native-unistyles/components/native/Pressable";
-import { Animated } from "react-native-unistyles/components/native/Animated";
 
 //#region src/components/Dialog.tsx
 /** `bg-po-deep/70`. */

package/dist/components/Dot.d.mts

@@ -1,5 +1,5 @@
-import { DotTone } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleProp, ViewStyle } from "react-native";
+import { DotTone } from "@agimon-ai/po-web-components/nativeTheme";
 //#region src/components/Dot.d.ts
 type DotTone$1 = DotTone;
 export type DotSize = 'xs' | 'sm' | 'md' | 'lg';

package/dist/components/Dot.mjs

@@ -1,8 +1,8 @@
-import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { Animated } from "react-native-unistyles/components/native/Animated";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Animated } from "react-native-unistyles/components/native/Animated";
 
 //#region src/components/Dot.tsx
 /** `bg-po-faint/40`: a thing that exists but is not live. */

package/dist/components/DropdownMenu.mjs

@@ -6,8 +6,8 @@ import { CheckIcon } from "../icons/icons.mjs";
 import { useControllable } from "../lib/useControllable.mjs";
 import { SheetFrame } from "./SheetFrame.mjs";
 import { View } from "react-native-unistyles/components/native/View";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable } from "react-native-unistyles/components/native/Pressable";

package/dist/components/HashlineLines.mjs

@@ -2,8 +2,8 @@ import { fontOf } from "../lib/fonts.mjs";
 import { SyntaxLine } from "./SyntaxLine.mjs";
 import { detectGrammar, hashlineGroups, hashlineGroupsKey, highlightToLines } from "@agimon-ai/po-web-components/text";
 import { View } from "react-native-unistyles/components/native/View";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/components/Input.mjs

@@ -1,7 +1,7 @@
 import { fontOf } from "../lib/fonts.mjs";
 import { useInsideSheet } from "../lib/insideSheet.mjs";
-import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { BottomSheetTextInput } from "@gorhom/bottom-sheet";

package/dist/components/Label.mjs

@@ -1,6 +1,6 @@
 import { fontOf } from "../lib/fonts.mjs";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Label.tsx

package/dist/components/List.mjs

@@ -1,9 +1,9 @@
 import { fontOf } from "../lib/fonts.mjs";
 import { ChevronRightIcon } from "../icons/icons.mjs";
 import { View } from "react-native-unistyles/components/native/View";
+import { Text } from "react-native-unistyles/components/native/Text";
 import { StyleSheet } from "react-native-unistyles";
 import { Platform } from "react-native";
-import { Text } from "react-native-unistyles/components/native/Text";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Pressable } from "react-native-unistyles/components/native/Pressable";
 import { FlashList } from "@shopify/flash-list";

package/dist/components/Markdown.mjs

@@ -2,9 +2,9 @@ import { fontOf } from "../lib/fonts.mjs";
 import { CodeBlock } from "./CodeBlock.mjs";
 import { parseMarkdown } from "../lib/markdown.mjs";
 import { View } from "react-native-unistyles/components/native/View";
+import { Text } from "react-native-unistyles/components/native/Text";
 import { StyleSheet } from "react-native-unistyles";
 import { Linking } from "react-native";
-import { Text } from "react-native-unistyles/components/native/Text";
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollView } from "react-native-unistyles/components/native/ScrollView";

package/dist/components/MessageItem.mjs

@@ -7,8 +7,8 @@ import { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, WrenchIcon } f
 import { useControllable } from "../lib/useControllable.mjs";
 import { STATUS_EDGE, StatusBadge } from "./StatusBadge.mjs";
 import { View } from "react-native-unistyles/components/native/View";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
 import { createContext, useContext } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Pressable } from "react-native-unistyles/components/native/Pressable";

package/dist/components/SectionLabel.mjs

@@ -1,6 +1,6 @@
 import { fontOf } from "../lib/fonts.mjs";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/SectionLabel.tsx

package/dist/components/Sheet.mjs

@@ -5,8 +5,8 @@ import { CloseIcon } from "../icons/icons.mjs";
 import { useControllable } from "../lib/useControllable.mjs";
 import { SheetFrame } from "./SheetFrame.mjs";
 import { View } from "react-native-unistyles/components/native/View";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/components/SheetFrame.mjs

@@ -1,7 +1,7 @@
 import { InsideSheetContext } from "../lib/insideSheet.mjs";
-import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { BackHandler } from "react-native";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { useCallback, useContext, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView } from "@gorhom/bottom-sheet";

package/dist/components/Spinner.d.mts

@@ -1,5 +1,5 @@
-import { NativeColorToken } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleProp, ViewStyle } from "react-native";
+import { NativeColorToken } from "@agimon-ai/po-web-components/nativeTheme";
 //#region src/components/Spinner.d.ts
 export interface SpinnerProps {
   /**

package/dist/components/StatusBadge.d.mts

@@ -1,5 +1,5 @@
-import { NativeColorToken, StatusTone } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleProp, ViewProps, ViewStyle } from "react-native";
+import { NativeColorToken, StatusTone } from "@agimon-ai/po-web-components/nativeTheme";
 import { ReactNode } from "react";
 //#region src/components/StatusBadge.d.ts
 type StatusTone$1 = StatusTone;

package/dist/components/SyntaxLine.mjs

@@ -1,6 +1,6 @@
 import { detectGrammar, highlightToLines } from "@agimon-ai/po-web-components/text";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/Tabs.mjs

@@ -3,8 +3,8 @@ import { wrapText } from "../lib/wrapText.mjs";
 import { selectionTick } from "../lib/haptics.mjs";
 import { useControllable } from "../lib/useControllable.mjs";
 import { View } from "react-native-unistyles/components/native/View";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Pressable } from "react-native-unistyles/components/native/Pressable";

package/dist/components/ToolPathLink.mjs

@@ -1,6 +1,6 @@
 import { fontOf } from "../lib/fonts.mjs";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/ToolPathLink.tsx

package/dist/icons/icons.d.mts

@@ -1,5 +1,5 @@
-import { NativeColorToken } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleProp, ViewStyle } from "react-native";
+import { NativeColorToken } from "@agimon-ai/po-web-components/nativeTheme";
 //#region src/icons/icons.d.ts
 export interface IconProps {
   /** Edge length in points. */

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+import { AgentAvatar, AgentState, agentInitials } from "./components/AgentAvatar.mjs";
 import { Badge, BadgeProps, BadgeSize, BadgeTone } from "./components/Badge.mjs";
 import { Button, ButtonProps, ButtonSize, ButtonVariant } from "./components/Button.mjs";
 import { CodeBlock, CodeBlockProps } from "./components/CodeBlock.mjs";
@@ -29,4 +30,4 @@ import { fontOf } from "./lib/fonts.mjs";
 import { IconColorContext } from "./icons/IconColorContext.mjs";
 import { impactLight, selectionTick } from "./lib/haptics.mjs";
 import { AnsiSpan, PresentedLine, ReviewComment, ansiSpans, buildReviewPrompt, collapseLines, hashlineBody, resultTextLines } from "@agimon-ai/po-web-components/text";
-export { ActivityIcon, AlertIcon, type AnsiSpan, ArrowRightIcon, Badge, type BadgeProps, type BadgeSize, type BadgeTone, BranchIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CodeBlock, type CodeBlockProps, CopyButton, type CopyButtonProps, CopyIcon, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, type DialogFooterProps, type DialogFooterVariant, DialogHeader, type DialogHeaderProps, type DialogPartProps, type DialogProps, DialogTitle, DialogTrigger, type DialogWidth, Dot, type DotProps, type DotSize, type DotTone, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuPartProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EditIcon, EmptyState, type EmptyStateProps, type FieldSize, type FieldVariant, FileIcon, type FileLinkHandler, FolderIcon, ForkIcon, GearIcon, HashlineLines, type HashlineLinesProps, HomeIcon, IconColorContext, type IconName, type IconProps, ImageIcon, Input, type InputProps, KebabIcon, Label, type LabelProps, LightbulbIcon, List, type ListProps, ListRow, type ListRowProps, LockIcon, Markdown, type MarkdownImageLoader, type MarkdownProps, MessageIcon, MessageItem, MessageItemBody, MessageItemGroup, type MessageItemGroupProps, MessageItemHeader, type MessageItemHeaderProps, type MessageItemPartProps, type MessageItemProps, type MessageItemState, MessageItemStatus, type MessageItemStatusProps, MicIcon, PaletteIcon, Panel, PanelBody, PanelHeader, type PanelPartProps, PlayCircleIcon, PlusIcon, PoNativeProvider, type PoNativeProviderProps, type PresentedLine, type ReviewComment, STATUS_EDGE, STATUS_GLYPH, STATUS_LABEL, SearchIcon, SectionLabel, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SendIcon, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, type SheetPartProps, type SheetProps, SheetTitle, SheetTrigger, SlidersIcon, SparklesIcon, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusTone, StopIcon, SyntaxLine, type SyntaxLineProps, TabBadge, type TabBadgeProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TaskIcon, Textarea, type TextareaProps, ToolPathLink, type ToolPathLinkProps, TrashIcon, UsersIcon, WorkflowIcon, WrenchIcon, ansiSpans, buildReviewPrompt, collapseLines, fontOf, hashlineBody, impactLight, resultTextLines, selectionTick, toolTone, useMessageItem, useSyntaxLines };
+export { ActivityIcon, AgentAvatar, type AgentState, AlertIcon, type AnsiSpan, ArrowRightIcon, Badge, type BadgeProps, type BadgeSize, type BadgeTone, BranchIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CodeBlock, type CodeBlockProps, CopyButton, type CopyButtonProps, CopyIcon, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, type DialogFooterProps, type DialogFooterVariant, DialogHeader, type DialogHeaderProps, type DialogPartProps, type DialogProps, DialogTitle, DialogTrigger, type DialogWidth, Dot, type DotProps, type DotSize, type DotTone, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuPartProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EditIcon, EmptyState, type EmptyStateProps, type FieldSize, type FieldVariant, FileIcon, type FileLinkHandler, FolderIcon, ForkIcon, GearIcon, HashlineLines, type HashlineLinesProps, HomeIcon, IconColorContext, type IconName, type IconProps, ImageIcon, Input, type InputProps, KebabIcon, Label, type LabelProps, LightbulbIcon, List, type ListProps, ListRow, type ListRowProps, LockIcon, Markdown, type MarkdownImageLoader, type MarkdownProps, MessageIcon, MessageItem, MessageItemBody, MessageItemGroup, type MessageItemGroupProps, MessageItemHeader, type MessageItemHeaderProps, type MessageItemPartProps, type MessageItemProps, type MessageItemState, MessageItemStatus, type MessageItemStatusProps, MicIcon, PaletteIcon, Panel, PanelBody, PanelHeader, type PanelPartProps, PlayCircleIcon, PlusIcon, PoNativeProvider, type PoNativeProviderProps, type PresentedLine, type ReviewComment, STATUS_EDGE, STATUS_GLYPH, STATUS_LABEL, SearchIcon, SectionLabel, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SendIcon, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, type SheetPartProps, type SheetProps, SheetTitle, SheetTrigger, SlidersIcon, SparklesIcon, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusTone, StopIcon, SyntaxLine, type SyntaxLineProps, TabBadge, type TabBadgeProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TaskIcon, Textarea, type TextareaProps, ToolPathLink, type ToolPathLinkProps, TrashIcon, UsersIcon, WorkflowIcon, WrenchIcon, agentInitials, ansiSpans, buildReviewPrompt, collapseLines, fontOf, hashlineBody, impactLight, resultTextLines, selectionTick, toolTone, useMessageItem, useSyntaxLines };

package/dist/index.mjs

@@ -1,4 +1,6 @@
 import { fontOf } from "./lib/fonts.mjs";
+import { Dot } from "./components/Dot.mjs";
+import { AgentAvatar, agentInitials } from "./components/AgentAvatar.mjs";
 import { Badge } from "./components/Badge.mjs";
 import { IconColorContext } from "./icons/IconColorContext.mjs";
 import { impactLight, selectionTick } from "./lib/haptics.mjs";
@@ -8,7 +10,6 @@ import { ActivityIcon, AlertIcon, ArrowRightIcon, BranchIcon, CheckIcon, Chevron
 import { CopyButton } from "./components/CopyButton.mjs";
 import { CodeBlock } from "./components/CodeBlock.mjs";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./components/Dialog.mjs";
-import { Dot } from "./components/Dot.mjs";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "./components/DropdownMenu.mjs";
 import { EmptyState } from "./components/EmptyState.mjs";
 import { SyntaxLine, useSyntaxLines } from "./components/SyntaxLine.mjs";
@@ -29,4 +30,4 @@ import { Textarea } from "./components/Textarea.mjs";
 import { ToolPathLink } from "./components/ToolPathLink.mjs";
 import { ansiSpans, buildReviewPrompt, collapseLines, hashlineBody, resultTextLines } from "@agimon-ai/po-web-components/text";
 
-export { ActivityIcon, AlertIcon, ArrowRightIcon, Badge, BranchIcon, Button, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CodeBlock, CopyButton, CopyIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Dot, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EditIcon, EmptyState, FileIcon, FolderIcon, ForkIcon, GearIcon, HashlineLines, HomeIcon, IconColorContext, ImageIcon, Input, KebabIcon, Label, LightbulbIcon, List, ListRow, LockIcon, Markdown, MessageIcon, MessageItem, MessageItemBody, MessageItemGroup, MessageItemHeader, MessageItemStatus, MicIcon, PaletteIcon, Panel, PanelBody, PanelHeader, PlayCircleIcon, PlusIcon, PoNativeProvider, STATUS_EDGE, STATUS_GLYPH, STATUS_LABEL, SearchIcon, SectionLabel, SegmentedControl, SendIcon, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SlidersIcon, SparklesIcon, Spinner, StatusBadge, StopIcon, SyntaxLine, TabBadge, Tabs, TabsContent, TabsList, TabsTrigger, TaskIcon, Textarea, ToolPathLink, TrashIcon, UsersIcon, WorkflowIcon, WrenchIcon, ansiSpans, buildReviewPrompt, collapseLines, fontOf, hashlineBody, impactLight, resultTextLines, selectionTick, toolTone, useMessageItem, useSyntaxLines };
+export { ActivityIcon, AgentAvatar, AlertIcon, ArrowRightIcon, Badge, BranchIcon, Button, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CodeBlock, CopyButton, CopyIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Dot, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EditIcon, EmptyState, FileIcon, FolderIcon, ForkIcon, GearIcon, HashlineLines, HomeIcon, IconColorContext, ImageIcon, Input, KebabIcon, Label, LightbulbIcon, List, ListRow, LockIcon, Markdown, MessageIcon, MessageItem, MessageItemBody, MessageItemGroup, MessageItemHeader, MessageItemStatus, MicIcon, PaletteIcon, Panel, PanelBody, PanelHeader, PlayCircleIcon, PlusIcon, PoNativeProvider, STATUS_EDGE, STATUS_GLYPH, STATUS_LABEL, SearchIcon, SectionLabel, SegmentedControl, SendIcon, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SlidersIcon, SparklesIcon, Spinner, StatusBadge, StopIcon, SyntaxLine, TabBadge, Tabs, TabsContent, TabsList, TabsTrigger, TaskIcon, Textarea, ToolPathLink, TrashIcon, UsersIcon, WorkflowIcon, WrenchIcon, agentInitials, ansiSpans, buildReviewPrompt, collapseLines, fontOf, hashlineBody, impactLight, resultTextLines, selectionTick, toolTone, useMessageItem, useSyntaxLines };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/po-native-components",
-  "version": "0.0.0-alpha.23",
+  "version": "0.0.0-alpha.24",
   "description": "Shared React Native components for Po and its native plugins: the web component library's look and API on native parts, tuned to the Po palette.",
   "keywords": [
     "ai",
@@ -45,11 +45,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@agimon-ai/po-web-components": "0.0.0-alpha.23"
+    "@agimon-ai/po-web-components": "0.0.0-alpha.24"
   },
   "devDependencies": {
-    "@agimon-ai/po-build": "0.0.0-alpha.23",
-    "@agimon-ai/vibe-lint-plugin-po-web": "0.0.0-alpha.23",
+    "@agimon-ai/po-build": "0.0.0-alpha.24",
+    "@agimon-ai/vibe-lint-plugin-po-web": "0.0.0-alpha.24",
     "@babel/core": "7.29.7",
     "@expo/vector-icons": "15.1.1",
     "@gorhom/bottom-sheet": "5.2.14",