@agimon-ai/po-native-components 0.0.0-alpha.29 → 0.0.0-alpha.30

package/dist/components/MessageItem.d.mts

@@ -41,6 +41,7 @@ export interface MessageItemGroupProps extends Omit<ViewProps, 'children' | 'sty
   summary?: ReactNode;
   /** The badge text; defaults to the tone's label, null hides the badge. */
   badge?: ReactNode | null;
+  defaultExpanded?: boolean;
   children?: ReactNode;
   style?: StyleProp<ViewStyle>;
 }
@@ -49,7 +50,7 @@ export interface MessageItemGroupProps extends Omit<ViewProps, 'children' | 'sty
  * becomes a row: same header, same expand, no card of its own, and its tone
  * an edge down its left side.
  */
-export declare function MessageItemGroup({ tone, title, summary, badge, children, style, ...props }: MessageItemGroupProps): import("react").JSX.Element;
+export declare function MessageItemGroup({ tone, title, summary, badge, children, defaultExpanded, style, ...props }: MessageItemGroupProps): import("react").JSX.Element;
 export interface MessageItemHeaderProps extends Omit<ViewProps, 'children' | 'style'> {
   /** The bold label at the left: the tool name. */
   title: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.d.mts","names":[],"sources":["../../src/components/MessageItem.tsx"],"mappings":";;;;iBA0BiB;EACf,MAAM;;EAEN;EACA;EACA;;;wBAWc,kBAAkB;;wBAQlB,SAAS;EAAS;EAAkB;IAAqB;;qBAK5D,cAAc,SAAS,OAAO;;qBAU9B,cAAc,SAAS,OAAO;iBAmB1B,yBAAyB,KAAK;EAC7C,OAAO;;EAEP;EACA;;EAEA;EACA,oBAAoB;;EAEpB,WAAW,cAAc,OAAO,qBAAqB;EACrD,QAAQ,UAAU;;wBAGJ,cACd,MACA,YACA,iBACA,UACA,kBACA,UACA,UACG,SACF,mCAAgB,IAAA;iBA8DF,8BAA8B,KAAK;EAClD,OAAO;;EAEP,OAAO;;EAEP,UAAU;;EAEV,QAAQ;EACR,WAAW;EACX,QAAQ,UAAU;;;;;;;wBAQJ,mBACd,MACA,OACA,SACA,OACA,UACA,UACG,SACF,wCAAqB,IAAA;iBAuBP,+BAA+B,KAAK;;EAEnD,OAAO;;EAEP,QAAQ;;EAER,WAAW;EACX,QAAQ,UAAU;;;;;;;wBAWJ,oBAAoB,OAAO,OAAO,UAAU,UAAU,SAAS,yCAAsB,IAAA;iBAiCpF,6BAA6B,KAAK;EACjD,WAAW;EACX,QAAQ,UAAU;;;wBAIJ,kBAAkB,UAAU,UAAU,SAAS,uCAAoB,IAAA;iBAQlE,+BAA+B,KAAK;EACnD,OAAO;;EAEP;;EAEA;EACA,WAAW;;EAEX,iBAAiB,UAAU;;;wBAIb,oBACd,MACA,OACA,SACA,UACA,gBACA,UACG,SACF,yCAAsB,IAAA"}
+{"version":3,"file":"MessageItem.d.mts","names":[],"sources":["../../src/components/MessageItem.tsx"],"mappings":";;;;iBA0BiB;EACf,MAAM;;EAEN;EACA;EACA;;;wBAWc,kBAAkB;;wBAQlB,SAAS;EAAS;EAAkB;IAAqB;;qBAK5D,cAAc,SAAS,OAAO;;qBAU9B,cAAc,SAAS,OAAO;iBAmB1B,yBAAyB,KAAK;EAC7C,OAAO;;EAEP;EACA;;EAEA;EACA,oBAAoB;;EAEpB,WAAW,cAAc,OAAO,qBAAqB;EACrD,QAAQ,UAAU;;wBAGJ,cACd,MACA,YACA,iBACA,UACA,kBACA,UACA,UACG,SACF,mCAAgB,IAAA;iBA8DF,8BAA8B,KAAK;EAClD,OAAO;;EAEP,OAAO;;EAEP,UAAU;;EAEV,QAAQ;EACR;EACA,WAAW;EACX,QAAQ,UAAU;;;;;;;wBAQJ,mBACd,MACA,OACA,SACA,OACA,UACA,iBACA,UACG,SACF,wCAAqB,IAAA;iBAyBP,+BAA+B,KAAK;;EAEnD,OAAO;;EAEP,QAAQ;;EAER,WAAW;EACX,QAAQ,UAAU;;;;;;;wBAWJ,oBAAoB,OAAO,OAAO,UAAU,UAAU,SAAS,yCAAsB,IAAA;iBAiCpF,6BAA6B,KAAK;EACjD,WAAW;EACX,QAAQ,UAAU;;;wBAIJ,kBAAkB,UAAU,UAAU,SAAS,uCAAoB,IAAA;iBAQlE,+BAA+B,KAAK;EACnD,OAAO;;EAEP;;EAEA;EACA,WAAW;;EAEX,iBAAiB,UAAU;;;wBAIb,oBACd,MACA,OACA,SACA,UACA,gBACA,UACG,SACF,yCAAsB,IAAA"}

package/dist/components/MessageItem.mjs

@@ -131,29 +131,25 @@ function OutcomeBadge({ tone, children }) {
 * becomes a row: same header, same expand, no card of its own, and its tone
 * an edge down its left side.
 */
-function MessageItemGroup({ tone = "neutral", title, summary, badge, children, style, ...props }) {
-	const label = badge === void 0 ? STATUS_LABEL[tone] : badge;
-	return /* @__PURE__ */ jsx(MessageItemGroupContext.Provider, {
-		value: { tone },
-		children: /* @__PURE__ */ jsxs(View, {
-			style: [styles.cardEdge(cardEdge(tone)), style],
-			...props,
-			children: [/* @__PURE__ */ jsxs(View, {
-				accessibilityRole: "header",
-				style: styles.header,
-				children: [/* @__PURE__ */ jsx(ToolCallLead, {
-					title,
-					children: typeof summary === "string" ? /* @__PURE__ */ jsx(Text, {
-						numberOfLines: 1,
-						style: styles.faint,
-						children: summary
-					}) : summary
-				}), label !== null && label !== "" ? /* @__PURE__ */ jsx(OutcomeBadge, {
-					tone,
-					children: label
-				}) : null]
-			}), /* @__PURE__ */ jsx(View, { children })]
-		})
+function MessageItemGroup({ tone = "neutral", title, summary, badge, children, defaultExpanded = false, style, ...props }) {
+	return /* @__PURE__ */ jsx(MessageItem, {
+		tone,
+		expandable: true,
+		defaultExpanded,
+		style,
+		...props,
+		children: ({ expanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MessageItemHeader, {
+			title,
+			badge,
+			children: typeof summary === "string" ? /* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
+				style: styles.faint,
+				children: summary
+			}) : summary
+		}), expanded ? /* @__PURE__ */ jsx(MessageItemGroupContext.Provider, {
+			value: { tone },
+			children: /* @__PURE__ */ jsx(View, { children })
+		}) : null] })
 	});
 }
 /** Inside a group these two are the quiet outcome: the group's header has already said it. */

package/dist/components/MessageItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.mjs","names":["NativeColorToken","createContext","ReactNode","useContext","StyleProp","TextProps","ViewProps","ViewStyle","StyleSheet","AlertIcon","CheckIcon","ChevronDownIcon","ChevronRightIcon","WrenchIcon","fontOf","STATUS_COLORS","useControllable","wrapText","Button","Spinner","STATUS_EDGE","StatusBadge","StatusTone","MIN_ROW_HEIGHT","LEAD_CHIP","ROW_EDGE_WIDTH","MessageItemState","tone","expandable","expanded","toggle","MessageItemContext","undefined","useMessageItem","MessageItemGroupContext","toolTone","state","running","isError","STATUS_LABEL","Readonly","Record","neutral","ok","error","info","accent","STATUS_GLYPH","cardEdge","rowEdge","MessageItemProps","Omit","defaultExpanded","onExpandedChange","children","style","MessageItem","props","current","setExpanded","group","styles","Summary","summary","summaryText","ToolCallLead","title","chip","lead","caption","titleLine","OutcomeBadge","ink","outcome","MessageItemGroupProps","badge","MessageItemGroup","label","header","faint","MessageItemHeaderProps","SILENT_IN_GROUP","ReadonlySet","Set","MessageItemHeader","defaultLabel","has","content","pressed","headerPressed","MessageItemPartProps","MessageItemBody","body","bodyText","MessageItemStatusProps","glyph","expands","containerStyle","MessageItemStatus","line","status","more","create","theme","token","overflow","borderRadius","lg","borderWidth","borderColor","colors","uni__dependencies","borderTopWidth","borderTopColor","borderLeftWidth","borderLeftColor","flexDirection","alignItems","gap","spacing","minHeight","paddingHorizontal","paddingVertical","backgroundColor","panel","justifyContent","width","height","flexShrink","full","rail","flex","minWidth","color","dim","fontFamily","sans","fontSize","sm","lineHeight","hi","base","fontWeight","semibold","alignSelf"],"sources":["../../src/components/MessageItem.tsx"],"sourcesContent":["import type { NativeColorToken } from '@agimon-ai/po-web-components/nativeTheme';\nimport { createContext, type ReactNode, useContext } from 'react';\nimport { Pressable, type StyleProp, Text, type TextProps, View, type ViewProps, type ViewStyle } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, WrenchIcon } from '../icons/icons';\nimport { fontOf } from '../lib/fonts';\nimport { STATUS_COLORS } from '../lib/tone';\nimport { useControllable } from '../lib/useControllable';\nimport { wrapText } from '../lib/wrapText';\nimport { Button } from './Button';\nimport { Spinner } from './Spinner';\nimport { STATUS_EDGE, StatusBadge, type StatusTone } from './StatusBadge';\n\n/*\n * The message item: the timeline card a tool call, a run or a notice sits in.\n * The item owns its outcome tone and its expand state; the header, body and\n * status parts read both from it, so a card composes the parts and never\n * threads `expanded` by hand. The header is one Pressable that expands the\n * item, the native stand-in for the web's small chevron button.\n */\n\nconst MIN_ROW_HEIGHT = 44;\nconst LEAD_CHIP = 36;\nconst ROW_EDGE_WIDTH = 2;\n\nexport interface MessageItemState {\n  tone: StatusTone;\n  /** Whether the header offers the toggle; an item that hides nothing offers none. */\n  expandable: boolean;\n  expanded: boolean;\n  toggle: () => void;\n}\n\nconst MessageItemContext = createContext<MessageItemState>({\n  tone: 'neutral',\n  expandable: false,\n  expanded: false,\n  toggle: () => undefined,\n});\n\n/** The enclosing item's state, for a part that lives deeper than the item's render prop. */\nexport function useMessageItem(): MessageItemState {\n  return useContext(MessageItemContext);\n}\n\n/** The group an item is a row of, or null for an item that is a card of its own. */\nconst MessageItemGroupContext = createContext<{ tone: StatusTone } | null>(null);\n\n/** The tone a tool call's item wears: running while the tool runs, then its outcome. */\nexport function toolTone(state: { running: boolean; isError: boolean }): StatusTone {\n  return state.running ? 'running' : state.isError ? 'error' : 'ok';\n}\n\n/** The badge text a tone reads as when the header is not told otherwise; empty hides the badge. */\nexport const STATUS_LABEL: Readonly<Record<StatusTone, string>> = {\n  neutral: '',\n  running: 'Running',\n  ok: 'Completed',\n  error: 'Failed',\n  info: 'Info',\n  accent: 'Note',\n};\n\n/** The glyph a tone reads as in a status line. */\nexport const STATUS_GLYPH: Readonly<Record<StatusTone, string>> = {\n  neutral: '\\u2026',\n  running: '\\u25d0',\n  ok: '\\u2713',\n  error: '\\u2717',\n  info: '\\u25cf',\n  accent: '\\u25cf',\n};\n\n/** A settled OK is the calm default and keeps the soft border; only work in flight or a failure colours the edge. */\nfunction cardEdge(tone: StatusTone): NativeColorToken {\n  return tone === 'ok' ? 'border-soft' : STATUS_EDGE[tone];\n}\n\n/** As a row, a settled or neutral item keeps a quiet edge. */\nfunction rowEdge(tone: StatusTone): NativeColorToken | undefined {\n  return tone === 'ok' || tone === 'neutral' ? undefined : STATUS_EDGE[tone];\n}\n\nexport interface MessageItemProps extends Omit<ViewProps, 'children' | 'style'> {\n  tone?: StatusTone;\n  /** Whether the header offers the expand toggle. A toggle that reveals nothing reads as broken, so the card decides. */\n  expandable?: boolean;\n  defaultExpanded?: boolean;\n  /** Controlled mode; pair with onExpandedChange. Omit it and the item keeps its own state. */\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Plain content, or a function of the item's state for a card that picks its lines by `expanded`. */\n  children?: ReactNode | ((state: MessageItemState) => ReactNode);\n  style?: StyleProp<ViewStyle>;\n}\n\nexport function MessageItem({\n  tone = 'neutral',\n  expandable = false,\n  defaultExpanded = false,\n  expanded,\n  onExpandedChange,\n  children,\n  style,\n  ...props\n}: MessageItemProps) {\n  const [current, setExpanded] = useControllable(expanded, defaultExpanded, onExpandedChange);\n  const group = useContext(MessageItemGroupContext);\n  const state: MessageItemState = { tone, expandable, expanded: current, toggle: () => setExpanded(!current) };\n  return (\n    <MessageItemContext.Provider value={state}>\n      <View\n        style={[group === null ? styles.cardEdge(cardEdge(tone)) : styles.rowEdge(rowEdge(tone)), style]}\n        {...props}\n      >\n        {typeof children === 'function' ? children(state) : children}\n      </View>\n    </MessageItemContext.Provider>\n  );\n}\n\n/** The line beside the title; a bare string stays on one line and truncates, as the web's `truncate`. */\nfunction Summary({ children }: { children?: ReactNode }) {\n  return (\n    <View style={styles.summary}>\n      {typeof children === 'string' ? (\n        <Text numberOfLines={1} style={styles.summaryText}>\n          {children}\n        </Text>\n      ) : (\n        wrapText(children, styles.summaryText)\n      )}\n    </View>\n  );\n}\n\n/** The card's lead: the tool chip, the \"Tool call\" caption, then the name and its summary on one line. */\nfunction ToolCallLead({ title, children }: { title: ReactNode; children?: ReactNode }) {\n  return (\n    <>\n      <View accessible={false} style={styles.chip}>\n        <WrenchIcon size={16} />\n      </View>\n      <View style={styles.lead}>\n        <Text style={styles.caption}>Tool call</Text>\n        <View style={styles.titleLine}>\n          {wrapText(title, styles.title)}\n          <Summary>{children}</Summary>\n        </View>\n      </View>\n    </>\n  );\n}\n\n/** The sentence-case outcome pill, led by the tone's icon. */\nfunction OutcomeBadge({ tone, children }: { tone: StatusTone; children: ReactNode }) {\n  const ink = STATUS_COLORS[tone].ink;\n  return (\n    <StatusBadge tone={tone} size=\"md\" style={styles.outcome}>\n      {tone === 'running' ? <Spinner color={ink} /> : null}\n      {tone === 'ok' ? <CheckIcon size={12} color={ink} /> : null}\n      {tone === 'error' ? <AlertIcon size={12} color={ink} /> : null}\n      {children}\n    </StatusBadge>\n  );\n}\n\nexport interface MessageItemGroupProps extends Omit<ViewProps, 'children' | 'style'> {\n  tone?: StatusTone;\n  /** The bold label at the left of the group header: the tool the run belongs to. */\n  title: ReactNode;\n  /** The line beside it, such as how many calls the group holds. */\n  summary?: ReactNode;\n  /** The badge text; defaults to the tone's label, null hides the badge. */\n  badge?: ReactNode | null;\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/**\n * One frame around a run of items that belong together. Each item inside\n * becomes a row: same header, same expand, no card of its own, and its tone\n * an edge down its left side.\n */\nexport function MessageItemGroup({\n  tone = 'neutral',\n  title,\n  summary,\n  badge,\n  children,\n  style,\n  ...props\n}: MessageItemGroupProps) {\n  const label = badge === undefined ? STATUS_LABEL[tone] : badge;\n  return (\n    <MessageItemGroupContext.Provider value={{ tone }}>\n      <View style={[styles.cardEdge(cardEdge(tone)), style]} {...props}>\n        <View accessibilityRole=\"header\" style={styles.header}>\n          <ToolCallLead title={title}>\n            {typeof summary === 'string' ? (\n              <Text numberOfLines={1} style={styles.faint}>\n                {summary}\n              </Text>\n            ) : (\n              summary\n            )}\n          </ToolCallLead>\n          {label !== null && label !== '' ? <OutcomeBadge tone={tone}>{label}</OutcomeBadge> : null}\n        </View>\n        <View>{children}</View>\n      </View>\n    </MessageItemGroupContext.Provider>\n  );\n}\n\nexport interface MessageItemHeaderProps extends Omit<ViewProps, 'children' | 'style'> {\n  /** The bold label at the left: the tool name. */\n  title: ReactNode;\n  /** The badge text; defaults to the tone's label, null hides the badge. */\n  badge?: ReactNode | null;\n  /** The summary beside the title; it gets the remaining width. */\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** Inside a group these two are the quiet outcome: the group's header has already said it. */\nconst SILENT_IN_GROUP: ReadonlySet<StatusTone> = new Set<StatusTone>(['ok', 'neutral']);\n\n/**\n * The title row: label, summary, the tone's badge and, when the item is\n * expandable, a chevron; the whole row is the toggle. A row inside a group\n * drops its title and speaks up only when something failed or is running.\n */\nexport function MessageItemHeader({ title, badge, children, style, ...props }: MessageItemHeaderProps) {\n  const { tone, expandable, expanded, toggle } = useMessageItem();\n  const group = useContext(MessageItemGroupContext);\n  const defaultLabel = group !== null && SILENT_IN_GROUP.has(tone) ? null : STATUS_LABEL[tone];\n  const label = badge === undefined ? defaultLabel : badge;\n  const content = (\n    <>\n      {group === null ? <ToolCallLead title={title}>{children}</ToolCallLead> : <Summary>{children}</Summary>}\n      {label !== null && label !== '' ? <OutcomeBadge tone={tone}>{label}</OutcomeBadge> : null}\n      {expandable ? expanded ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} /> : null}\n    </>\n  );\n  if (!expandable) {\n    return (\n      <View style={[styles.header, style]} {...props}>\n        {content}\n      </View>\n    );\n  }\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityState={{ expanded }}\n      accessibilityHint={expanded ? 'collapse' : 'expand'}\n      onPress={toggle}\n      style={({ pressed }) => [styles.header, pressed && styles.headerPressed, style]}\n      {...props}\n    >\n      {content}\n    </Pressable>\n  );\n}\n\nexport interface MessageItemPartProps extends Omit<ViewProps, 'children' | 'style'> {\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The body under the header, on the card's own surface. */\nexport function MessageItemBody({ children, style, ...props }: MessageItemPartProps) {\n  return (\n    <View style={[styles.body, style]} {...props}>\n      {wrapText(children, styles.bodyText)}\n    </View>\n  );\n}\n\nexport interface MessageItemStatusProps extends Omit<TextProps, 'children'> {\n  tone?: StatusTone;\n  /** Replaces the tone's glyph. */\n  glyph?: string;\n  /** Renders as a button that expands the item: the \"N more line(s)\" hint. */\n  expands?: boolean;\n  children?: ReactNode;\n  /** Applied to the row; with `expands`, to the button. */\n  containerStyle?: StyleProp<ViewStyle>;\n}\n\n/** The one-line status under a body: `running`, `failed`, `done`, or the hint that more is hidden. */\nexport function MessageItemStatus({\n  tone = 'neutral',\n  glyph,\n  expands = false,\n  children,\n  containerStyle,\n  style,\n  ...props\n}: MessageItemStatusProps) {\n  const { toggle } = useMessageItem();\n  const line = (\n    <Text style={[styles.status, style]} {...props}>\n      <Text style={styles.glyph(tone)}>{glyph ?? STATUS_GLYPH[tone]}</Text> {children}\n    </Text>\n  );\n  if (expands) {\n    return (\n      <Button variant=\"ghost\" size=\"xs\" onPress={toggle} style={[styles.more, containerStyle]}>\n        {line}\n      </Button>\n    );\n  }\n  return <View style={containerStyle}>{line}</View>;\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  cardEdge: (token: NativeColorToken) => ({\n    overflow: 'hidden',\n    borderRadius: theme.borderRadius.lg,\n    borderWidth: 1,\n    borderColor: theme.colors[token],\n  }),\n  // A row's top rule is the group's separator; its left edge carries the tone.\n  rowEdge: (token: NativeColorToken | undefined) => ({\n    overflow: 'hidden',\n    borderTopWidth: 1,\n    borderTopColor: theme.colors['border-soft'],\n    borderLeftWidth: ROW_EDGE_WIDTH,\n    borderLeftColor: token === undefined ? 'transparent' : theme.colors[token],\n  }),\n  header: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n    minHeight: MIN_ROW_HEIGHT,\n    paddingHorizontal: theme.spacing(4),\n    paddingVertical: theme.spacing(3),\n  },\n  headerPressed: { backgroundColor: theme.colors.panel },\n  chip: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: LEAD_CHIP,\n    height: LEAD_CHIP,\n    flexShrink: 0,\n    borderRadius: theme.borderRadius.full,\n    backgroundColor: theme.colors.rail,\n  },\n  lead: { flex: 1, minWidth: 0 },\n  caption: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeight.sm,\n  },\n  titleLine: { flexDirection: 'row', alignItems: 'center', gap: theme.spacing(2), minWidth: 0 },\n  title: {\n    flexShrink: 0,\n    color: theme.colors.hi,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    lineHeight: theme.lineHeight.base,\n    fontWeight: theme.fontWeight.semibold,\n  },\n  summary: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: theme.spacing(2), minWidth: 0 },\n  summaryText: {\n    flexShrink: 1,\n    color: theme.colors.faint,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    lineHeight: theme.lineHeight.base,\n  },\n  faint: {\n    flexShrink: 1,\n    color: theme.colors.faint,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    lineHeight: theme.lineHeight.base,\n  },\n  outcome: { gap: theme.spacing(1) },\n  body: {\n    gap: theme.spacing(1),\n    borderTopWidth: 1,\n    borderTopColor: theme.colors['border-soft'],\n    paddingHorizontal: theme.spacing(4),\n    paddingVertical: theme.spacing(3),\n  },\n  bodyText: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    lineHeight: theme.lineHeight.base,\n  },\n  status: {\n    color: theme.colors.faint,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeight.sm,\n  },\n  glyph: (tone: StatusTone) => ({ color: theme.colors[STATUS_COLORS[tone].ink] }),\n  more: { alignSelf: 'flex-start' },\n}));\n"],"mappings":"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"}
+{"version":3,"file":"MessageItem.mjs","names":["NativeColorToken","createContext","ReactNode","useContext","StyleProp","TextProps","ViewProps","ViewStyle","StyleSheet","AlertIcon","CheckIcon","ChevronDownIcon","ChevronRightIcon","WrenchIcon","fontOf","STATUS_COLORS","useControllable","wrapText","Button","Spinner","STATUS_EDGE","StatusBadge","StatusTone","MIN_ROW_HEIGHT","LEAD_CHIP","ROW_EDGE_WIDTH","MessageItemState","tone","expandable","expanded","toggle","MessageItemContext","undefined","useMessageItem","MessageItemGroupContext","toolTone","state","running","isError","STATUS_LABEL","Readonly","Record","neutral","ok","error","info","accent","STATUS_GLYPH","cardEdge","rowEdge","MessageItemProps","Omit","defaultExpanded","onExpandedChange","children","style","MessageItem","props","current","setExpanded","group","styles","Summary","summary","summaryText","ToolCallLead","title","chip","lead","caption","titleLine","OutcomeBadge","ink","outcome","MessageItemGroupProps","badge","MessageItemGroup","faint","MessageItemHeaderProps","SILENT_IN_GROUP","ReadonlySet","Set","MessageItemHeader","defaultLabel","has","label","content","header","pressed","headerPressed","MessageItemPartProps","MessageItemBody","body","bodyText","MessageItemStatusProps","glyph","expands","containerStyle","MessageItemStatus","line","status","more","create","theme","token","overflow","borderRadius","lg","borderWidth","borderColor","colors","uni__dependencies","borderTopWidth","borderTopColor","borderLeftWidth","borderLeftColor","flexDirection","alignItems","gap","spacing","minHeight","paddingHorizontal","paddingVertical","backgroundColor","panel","justifyContent","width","height","flexShrink","full","rail","flex","minWidth","color","dim","fontFamily","sans","fontSize","sm","lineHeight","hi","base","fontWeight","semibold","alignSelf"],"sources":["../../src/components/MessageItem.tsx"],"sourcesContent":["import type { NativeColorToken } from '@agimon-ai/po-web-components/nativeTheme';\nimport { createContext, type ReactNode, useContext } from 'react';\nimport { Pressable, type StyleProp, Text, type TextProps, View, type ViewProps, type ViewStyle } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, WrenchIcon } from '../icons/icons';\nimport { fontOf } from '../lib/fonts';\nimport { STATUS_COLORS } from '../lib/tone';\nimport { useControllable } from '../lib/useControllable';\nimport { wrapText } from '../lib/wrapText';\nimport { Button } from './Button';\nimport { Spinner } from './Spinner';\nimport { STATUS_EDGE, StatusBadge, type StatusTone } from './StatusBadge';\n\n/*\n * The message item: the timeline card a tool call, a run or a notice sits in.\n * The item owns its outcome tone and its expand state; the header, body and\n * status parts read both from it, so a card composes the parts and never\n * threads `expanded` by hand. The header is one Pressable that expands the\n * item, the native stand-in for the web's small chevron button.\n */\n\nconst MIN_ROW_HEIGHT = 44;\nconst LEAD_CHIP = 36;\nconst ROW_EDGE_WIDTH = 2;\n\nexport interface MessageItemState {\n  tone: StatusTone;\n  /** Whether the header offers the toggle; an item that hides nothing offers none. */\n  expandable: boolean;\n  expanded: boolean;\n  toggle: () => void;\n}\n\nconst MessageItemContext = createContext<MessageItemState>({\n  tone: 'neutral',\n  expandable: false,\n  expanded: false,\n  toggle: () => undefined,\n});\n\n/** The enclosing item's state, for a part that lives deeper than the item's render prop. */\nexport function useMessageItem(): MessageItemState {\n  return useContext(MessageItemContext);\n}\n\n/** The group an item is a row of, or null for an item that is a card of its own. */\nconst MessageItemGroupContext = createContext<{ tone: StatusTone } | null>(null);\n\n/** The tone a tool call's item wears: running while the tool runs, then its outcome. */\nexport function toolTone(state: { running: boolean; isError: boolean }): StatusTone {\n  return state.running ? 'running' : state.isError ? 'error' : 'ok';\n}\n\n/** The badge text a tone reads as when the header is not told otherwise; empty hides the badge. */\nexport const STATUS_LABEL: Readonly<Record<StatusTone, string>> = {\n  neutral: '',\n  running: 'Running',\n  ok: 'Completed',\n  error: 'Failed',\n  info: 'Info',\n  accent: 'Note',\n};\n\n/** The glyph a tone reads as in a status line. */\nexport const STATUS_GLYPH: Readonly<Record<StatusTone, string>> = {\n  neutral: '\\u2026',\n  running: '\\u25d0',\n  ok: '\\u2713',\n  error: '\\u2717',\n  info: '\\u25cf',\n  accent: '\\u25cf',\n};\n\n/** A settled OK is the calm default and keeps the soft border; only work in flight or a failure colours the edge. */\nfunction cardEdge(tone: StatusTone): NativeColorToken {\n  return tone === 'ok' ? 'border-soft' : STATUS_EDGE[tone];\n}\n\n/** As a row, a settled or neutral item keeps a quiet edge. */\nfunction rowEdge(tone: StatusTone): NativeColorToken | undefined {\n  return tone === 'ok' || tone === 'neutral' ? undefined : STATUS_EDGE[tone];\n}\n\nexport interface MessageItemProps extends Omit<ViewProps, 'children' | 'style'> {\n  tone?: StatusTone;\n  /** Whether the header offers the expand toggle. A toggle that reveals nothing reads as broken, so the card decides. */\n  expandable?: boolean;\n  defaultExpanded?: boolean;\n  /** Controlled mode; pair with onExpandedChange. Omit it and the item keeps its own state. */\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Plain content, or a function of the item's state for a card that picks its lines by `expanded`. */\n  children?: ReactNode | ((state: MessageItemState) => ReactNode);\n  style?: StyleProp<ViewStyle>;\n}\n\nexport function MessageItem({\n  tone = 'neutral',\n  expandable = false,\n  defaultExpanded = false,\n  expanded,\n  onExpandedChange,\n  children,\n  style,\n  ...props\n}: MessageItemProps) {\n  const [current, setExpanded] = useControllable(expanded, defaultExpanded, onExpandedChange);\n  const group = useContext(MessageItemGroupContext);\n  const state: MessageItemState = { tone, expandable, expanded: current, toggle: () => setExpanded(!current) };\n  return (\n    <MessageItemContext.Provider value={state}>\n      <View\n        style={[group === null ? styles.cardEdge(cardEdge(tone)) : styles.rowEdge(rowEdge(tone)), style]}\n        {...props}\n      >\n        {typeof children === 'function' ? children(state) : children}\n      </View>\n    </MessageItemContext.Provider>\n  );\n}\n\n/** The line beside the title; a bare string stays on one line and truncates, as the web's `truncate`. */\nfunction Summary({ children }: { children?: ReactNode }) {\n  return (\n    <View style={styles.summary}>\n      {typeof children === 'string' ? (\n        <Text numberOfLines={1} style={styles.summaryText}>\n          {children}\n        </Text>\n      ) : (\n        wrapText(children, styles.summaryText)\n      )}\n    </View>\n  );\n}\n\n/** The card's lead: the tool chip, the \"Tool call\" caption, then the name and its summary on one line. */\nfunction ToolCallLead({ title, children }: { title: ReactNode; children?: ReactNode }) {\n  return (\n    <>\n      <View accessible={false} style={styles.chip}>\n        <WrenchIcon size={16} />\n      </View>\n      <View style={styles.lead}>\n        <Text style={styles.caption}>Tool call</Text>\n        <View style={styles.titleLine}>\n          {wrapText(title, styles.title)}\n          <Summary>{children}</Summary>\n        </View>\n      </View>\n    </>\n  );\n}\n\n/** The sentence-case outcome pill, led by the tone's icon. */\nfunction OutcomeBadge({ tone, children }: { tone: StatusTone; children: ReactNode }) {\n  const ink = STATUS_COLORS[tone].ink;\n  return (\n    <StatusBadge tone={tone} size=\"md\" style={styles.outcome}>\n      {tone === 'running' ? <Spinner color={ink} /> : null}\n      {tone === 'ok' ? <CheckIcon size={12} color={ink} /> : null}\n      {tone === 'error' ? <AlertIcon size={12} color={ink} /> : null}\n      {children}\n    </StatusBadge>\n  );\n}\n\nexport interface MessageItemGroupProps extends Omit<ViewProps, 'children' | 'style'> {\n  tone?: StatusTone;\n  /** The bold label at the left of the group header: the tool the run belongs to. */\n  title: ReactNode;\n  /** The line beside it, such as how many calls the group holds. */\n  summary?: ReactNode;\n  /** The badge text; defaults to the tone's label, null hides the badge. */\n  badge?: ReactNode | null;\n  defaultExpanded?: boolean;\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/**\n * One frame around a run of items that belong together. Each item inside\n * becomes a row: same header, same expand, no card of its own, and its tone\n * an edge down its left side.\n */\nexport function MessageItemGroup({\n  tone = 'neutral',\n  title,\n  summary,\n  badge,\n  children,\n  defaultExpanded = false,\n  style,\n  ...props\n}: MessageItemGroupProps) {\n  return (\n    <MessageItem tone={tone} expandable defaultExpanded={defaultExpanded} style={style} {...props}>\n      {({ expanded }) => (\n        <>\n          <MessageItemHeader title={title} badge={badge}>\n            {typeof summary === 'string' ? (\n              <Text numberOfLines={1} style={styles.faint}>\n                {summary}\n              </Text>\n            ) : (\n              summary\n            )}\n          </MessageItemHeader>\n          {expanded ? (\n            <MessageItemGroupContext.Provider value={{ tone }}>\n              <View>{children}</View>\n            </MessageItemGroupContext.Provider>\n          ) : null}\n        </>\n      )}\n    </MessageItem>\n  );\n}\n\nexport interface MessageItemHeaderProps extends Omit<ViewProps, 'children' | 'style'> {\n  /** The bold label at the left: the tool name. */\n  title: ReactNode;\n  /** The badge text; defaults to the tone's label, null hides the badge. */\n  badge?: ReactNode | null;\n  /** The summary beside the title; it gets the remaining width. */\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** Inside a group these two are the quiet outcome: the group's header has already said it. */\nconst SILENT_IN_GROUP: ReadonlySet<StatusTone> = new Set<StatusTone>(['ok', 'neutral']);\n\n/**\n * The title row: label, summary, the tone's badge and, when the item is\n * expandable, a chevron; the whole row is the toggle. A row inside a group\n * drops its title and speaks up only when something failed or is running.\n */\nexport function MessageItemHeader({ title, badge, children, style, ...props }: MessageItemHeaderProps) {\n  const { tone, expandable, expanded, toggle } = useMessageItem();\n  const group = useContext(MessageItemGroupContext);\n  const defaultLabel = group !== null && SILENT_IN_GROUP.has(tone) ? null : STATUS_LABEL[tone];\n  const label = badge === undefined ? defaultLabel : badge;\n  const content = (\n    <>\n      {group === null ? <ToolCallLead title={title}>{children}</ToolCallLead> : <Summary>{children}</Summary>}\n      {label !== null && label !== '' ? <OutcomeBadge tone={tone}>{label}</OutcomeBadge> : null}\n      {expandable ? expanded ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} /> : null}\n    </>\n  );\n  if (!expandable) {\n    return (\n      <View style={[styles.header, style]} {...props}>\n        {content}\n      </View>\n    );\n  }\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityState={{ expanded }}\n      accessibilityHint={expanded ? 'collapse' : 'expand'}\n      onPress={toggle}\n      style={({ pressed }) => [styles.header, pressed && styles.headerPressed, style]}\n      {...props}\n    >\n      {content}\n    </Pressable>\n  );\n}\n\nexport interface MessageItemPartProps extends Omit<ViewProps, 'children' | 'style'> {\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The body under the header, on the card's own surface. */\nexport function MessageItemBody({ children, style, ...props }: MessageItemPartProps) {\n  return (\n    <View style={[styles.body, style]} {...props}>\n      {wrapText(children, styles.bodyText)}\n    </View>\n  );\n}\n\nexport interface MessageItemStatusProps extends Omit<TextProps, 'children'> {\n  tone?: StatusTone;\n  /** Replaces the tone's glyph. */\n  glyph?: string;\n  /** Renders as a button that expands the item: the \"N more line(s)\" hint. */\n  expands?: boolean;\n  children?: ReactNode;\n  /** Applied to the row; with `expands`, to the button. */\n  containerStyle?: StyleProp<ViewStyle>;\n}\n\n/** The one-line status under a body: `running`, `failed`, `done`, or the hint that more is hidden. */\nexport function MessageItemStatus({\n  tone = 'neutral',\n  glyph,\n  expands = false,\n  children,\n  containerStyle,\n  style,\n  ...props\n}: MessageItemStatusProps) {\n  const { toggle } = useMessageItem();\n  const line = (\n    <Text style={[styles.status, style]} {...props}>\n      <Text style={styles.glyph(tone)}>{glyph ?? STATUS_GLYPH[tone]}</Text> {children}\n    </Text>\n  );\n  if (expands) {\n    return (\n      <Button variant=\"ghost\" size=\"xs\" onPress={toggle} style={[styles.more, containerStyle]}>\n        {line}\n      </Button>\n    );\n  }\n  return <View style={containerStyle}>{line}</View>;\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  cardEdge: (token: NativeColorToken) => ({\n    overflow: 'hidden',\n    borderRadius: theme.borderRadius.lg,\n    borderWidth: 1,\n    borderColor: theme.colors[token],\n  }),\n  // A row's top rule is the group's separator; its left edge carries the tone.\n  rowEdge: (token: NativeColorToken | undefined) => ({\n    overflow: 'hidden',\n    borderTopWidth: 1,\n    borderTopColor: theme.colors['border-soft'],\n    borderLeftWidth: ROW_EDGE_WIDTH,\n    borderLeftColor: token === undefined ? 'transparent' : theme.colors[token],\n  }),\n  header: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n    minHeight: MIN_ROW_HEIGHT,\n    paddingHorizontal: theme.spacing(4),\n    paddingVertical: theme.spacing(3),\n  },\n  headerPressed: { backgroundColor: theme.colors.panel },\n  chip: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: LEAD_CHIP,\n    height: LEAD_CHIP,\n    flexShrink: 0,\n    borderRadius: theme.borderRadius.full,\n    backgroundColor: theme.colors.rail,\n  },\n  lead: { flex: 1, minWidth: 0 },\n  caption: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeight.sm,\n  },\n  titleLine: { flexDirection: 'row', alignItems: 'center', gap: theme.spacing(2), minWidth: 0 },\n  title: {\n    flexShrink: 0,\n    color: theme.colors.hi,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    lineHeight: theme.lineHeight.base,\n    fontWeight: theme.fontWeight.semibold,\n  },\n  summary: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: theme.spacing(2), minWidth: 0 },\n  summaryText: {\n    flexShrink: 1,\n    color: theme.colors.faint,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    lineHeight: theme.lineHeight.base,\n  },\n  faint: {\n    flexShrink: 1,\n    color: theme.colors.faint,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    lineHeight: theme.lineHeight.base,\n  },\n  outcome: { gap: theme.spacing(1) },\n  body: {\n    gap: theme.spacing(1),\n    borderTopWidth: 1,\n    borderTopColor: theme.colors['border-soft'],\n    paddingHorizontal: theme.spacing(4),\n    paddingVertical: theme.spacing(3),\n  },\n  bodyText: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    lineHeight: theme.lineHeight.base,\n  },\n  status: {\n    color: theme.colors.faint,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeight.sm,\n  },\n  glyph: (tone: StatusTone) => ({ color: theme.colors[STATUS_COLORS[tone].ink] }),\n  more: { alignSelf: 'flex-start' },\n}));\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/po-native-components",
-  "version": "0.0.0-alpha.29",
+  "version": "0.0.0-alpha.30",
   "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.29"
+    "@agimon-ai/po-web-components": "0.0.0-alpha.30"
   },
   "devDependencies": {
-    "@agimon-ai/po-build": "0.0.0-alpha.29",
-    "@agimon-ai/vibe-lint-plugin-po-web": "0.0.0-alpha.29",
+    "@agimon-ai/po-build": "0.0.0-alpha.30",
+    "@agimon-ai/vibe-lint-plugin-po-web": "0.0.0-alpha.30",
     "@babel/core": "7.29.7",
     "@expo/vector-icons": "15.1.1",
     "@fontsource-variable/ibm-plex-sans": "5.3.0",
@@ -60,7 +60,7 @@
     "@types/node": "26.6.5",
     "@types/react": "~19.2.4",
     "expo": "57.0.27",
-    "expo-clipboard": "~57.0.2",
+    "expo-clipboard": "~58.0.3",
     "expo-font": "~57.0.4",
     "expo-haptics": "~57.0.3",
     "expo-modules-core": "57.0.21",