@agimon-ai/po-native-components 0.0.0-alpha.0

package/dist/components/List.mjs

@@ -0,0 +1,156 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { ChevronRightIcon } from "../icons/icons.mjs";
+import { View } from "react-native-unistyles/components/native/View";
+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";
+
+//#region src/components/List.tsx
+const MIN_ROW_HEIGHT = 44;
+const DISABLED_OPACITY = .4;
+/** How close to the bottom a reader must be for a new row to keep the list pinned, as a fraction of the visible height. */
+const PIN_THRESHOLD = .1;
+function Separator() {
+	return /* @__PURE__ */ jsx(View, { style: styles.separator });
+}
+function List({ data, renderItem, keyExtractor, startAtBottom = false, separators = true, empty, header, footer, onEndReached, accessibilityLabel, style, contentPadding }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: [styles.frame, style],
+		accessibilityLabel,
+		children: /* @__PURE__ */ jsx(FlashList, {
+			data,
+			renderItem: ({ item, index }) => renderItem(item, index),
+			keyExtractor,
+			ItemSeparatorComponent: separators ? Separator : null,
+			ListEmptyComponent: empty === void 0 ? null : /* @__PURE__ */ jsx(Fragment, { children: empty }),
+			ListHeaderComponent: header === void 0 ? null : /* @__PURE__ */ jsx(Fragment, { children: header }),
+			ListFooterComponent: footer === void 0 ? null : /* @__PURE__ */ jsx(Fragment, { children: footer }),
+			onEndReached,
+			contentInsetAdjustmentBehavior: "automatic",
+			contentContainerStyle: contentPadding === void 0 ? void 0 : { padding: contentPadding },
+			maintainVisibleContentPosition: startAtBottom ? {
+				startRenderingFromBottom: true,
+				autoscrollToBottomThreshold: PIN_THRESHOLD
+			} : void 0
+		})
+	});
+}
+/** One list row: 44pt tall, optional leading and trailing slots, pressable when it navigates. */
+function ListRow({ title, description, leading, trailing, selected = false, disabled = false, onPress, disclosure, accessibilityLabel, style }) {
+	const chevron = disclosure ?? (onPress !== void 0 && Platform.OS === "ios");
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		leading,
+		/* @__PURE__ */ jsxs(View, {
+			style: styles.text,
+			children: [typeof title === "string" ? /* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
+				style: [styles.title, selected && styles.titleSelected],
+				children: title
+			}) : title, typeof description === "string" ? /* @__PURE__ */ jsx(Text, {
+				numberOfLines: 2,
+				style: styles.description,
+				children: description
+			}) : description]
+		}),
+		trailing,
+		chevron ? /* @__PURE__ */ jsx(ChevronRightIcon, {
+			size: 14,
+			color: "faint"
+		}) : null
+	] });
+	if (onPress === void 0) return /* @__PURE__ */ jsx(View, {
+		accessibilityLabel,
+		accessibilityState: {
+			selected,
+			disabled
+		},
+		style: [
+			styles.row,
+			selected && styles.selected,
+			disabled && styles.disabled,
+			style
+		],
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Pressable, {
+		accessibilityRole: "button",
+		accessibilityLabel,
+		accessibilityState: {
+			selected,
+			disabled
+		},
+		disabled,
+		onPress,
+		style: ({ pressed }) => [
+			styles.row,
+			selected && styles.selected,
+			pressed && styles.pressed,
+			disabled && styles.disabled,
+			style
+		],
+		children: content
+	});
+}
+const styles = StyleSheet.create((theme) => ({
+	frame: {
+		flex: 1,
+		minHeight: 0
+	},
+	separator: {
+		height: StyleSheet.hairlineWidth,
+		marginLeft: theme.spacing(4),
+		backgroundColor: theme.colors["border-soft"],
+		uni__dependencies: [0]
+	},
+	row: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(3),
+		minHeight: MIN_ROW_HEIGHT,
+		paddingHorizontal: theme.spacing(4),
+		paddingVertical: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	selected: {
+		backgroundColor: theme.colors["tint-green"],
+		uni__dependencies: [0]
+	},
+	pressed: {
+		backgroundColor: theme.colors.panel,
+		uni__dependencies: [0]
+	},
+	disabled: { opacity: DISABLED_OPACITY },
+	text: {
+		flex: 1,
+		minWidth: 0,
+		gap: theme.spacing(.5),
+		uni__dependencies: [0]
+	},
+	title: {
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		fontWeight: theme.fontWeight.medium,
+		uni__dependencies: [0]
+	},
+	titleSelected: {
+		color: theme.colors.green,
+		fontWeight: theme.fontWeight.semibold,
+		uni__dependencies: [0]
+	},
+	description: {
+		color: theme.colors.faint,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { List, ListRow };
+//# sourceMappingURL=List.mjs.map

package/dist/components/List.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.mjs","names":["FlashList","ReactElement","ReactNode","Platform","StyleProp","ViewStyle","StyleSheet","ChevronRightIcon","fontOf","MIN_ROW_HEIGHT","DISABLED_OPACITY","PIN_THRESHOLD","ListProps","data","T","renderItem","item","index","keyExtractor","startAtBottom","separators","empty","header","footer","onEndReached","accessibilityLabel","style","contentPadding","Separator","styles","separator","List","frame","undefined","padding","startRenderingFromBottom","autoscrollToBottomThreshold","ListRowProps","title","description","leading","trailing","selected","disabled","onPress","disclosure","ListRow","chevron","OS","content","text","titleSelected","row","pressed","create","theme","flex","minHeight","height","hairlineWidth","marginLeft","spacing","backgroundColor","colors","uni__dependencies","flexDirection","alignItems","gap","paddingHorizontal","paddingVertical","panel","opacity","minWidth","color","hi","fontFamily","sans","fontSize","base","lineHeight","fontWeight","medium","green","semibold","faint","sm"],"sources":["../../src/components/List.tsx"],"sourcesContent":["import { FlashList } from '@shopify/flash-list';\nimport type { ReactElement, ReactNode } from 'react';\nimport { Platform, Pressable, type StyleProp, Text, View, type ViewStyle } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { ChevronRightIcon } from '../icons/icons';\nimport { fontOf } from '../lib/fonts';\n\n/*\n * A virtualised list on FlashList: sessions, devices, a transcript. Rows\n * recycle, separators are hairlines, and a chat list can start at the bottom\n * and stay pinned there as rows arrive. The public props are this package's\n * own, so FlashList's types never reach a caller.\n */\n\nconst MIN_ROW_HEIGHT = 44;\nconst DISABLED_OPACITY = 0.4;\n/** How close to the bottom a reader must be for a new row to keep the list pinned, as a fraction of the visible height. */\nconst PIN_THRESHOLD = 0.1;\n\nexport interface ListProps<T> {\n  data: readonly T[];\n  renderItem: (item: T, index: number) => ReactElement | null;\n  /** A stable key per row; FlashList recycles views by it. */\n  keyExtractor: (item: T, index: number) => string;\n  /**\n   * A chat list: render from the bottom and keep the newest row in view as\n   * rows arrive, while the reader is near the bottom.\n   */\n  startAtBottom?: boolean;\n  /** Hairline separators between rows. On by default. */\n  separators?: boolean;\n  /** Shown when `data` is empty. */\n  empty?: ReactNode;\n  header?: ReactNode;\n  footer?: ReactNode;\n  onEndReached?: () => void;\n  accessibilityLabel?: string;\n  /** The list's frame; give it a height or a flex parent, since a virtualised list needs bounds. */\n  style?: StyleProp<ViewStyle>;\n  /** Padding around the rows. */\n  contentPadding?: number;\n}\n\nfunction Separator() {\n  return <View style={styles.separator} />;\n}\n\nexport function List<T>({\n  data,\n  renderItem,\n  keyExtractor,\n  startAtBottom = false,\n  separators = true,\n  empty,\n  header,\n  footer,\n  onEndReached,\n  accessibilityLabel,\n  style,\n  contentPadding,\n}: ListProps<T>) {\n  return (\n    <View style={[styles.frame, style]} accessibilityLabel={accessibilityLabel}>\n      <FlashList\n        data={data}\n        renderItem={({ item, index }) => renderItem(item, index)}\n        keyExtractor={keyExtractor}\n        ItemSeparatorComponent={separators ? Separator : null}\n        ListEmptyComponent={empty === undefined ? null : <>{empty}</>}\n        ListHeaderComponent={header === undefined ? null : <>{header}</>}\n        ListFooterComponent={footer === undefined ? null : <>{footer}</>}\n        onEndReached={onEndReached}\n        // Lets UIKit inset the rows under a translucent or large-title header instead of drawing beneath it.\n        contentInsetAdjustmentBehavior=\"automatic\"\n        contentContainerStyle={contentPadding === undefined ? undefined : { padding: contentPadding }}\n        maintainVisibleContentPosition={\n          startAtBottom ? { startRenderingFromBottom: true, autoscrollToBottomThreshold: PIN_THRESHOLD } : undefined\n        }\n      />\n    </View>\n  );\n}\n\nexport interface ListRowProps {\n  title: ReactNode;\n  /** A second, quieter line under the title. */\n  description?: ReactNode;\n  /** Before the text: a Dot, an icon. */\n  leading?: ReactNode;\n  /** After the text: a Badge, a ghost button, a count. */\n  trailing?: ReactNode;\n  /** Selected rows sit on a green tint. */\n  selected?: boolean;\n  disabled?: boolean;\n  onPress?: () => void;\n  /** The iOS disclosure chevron. Defaults to on for a pressable row on iOS, where rows that navigate wear one. */\n  disclosure?: boolean;\n  accessibilityLabel?: string;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** One list row: 44pt tall, optional leading and trailing slots, pressable when it navigates. */\nexport function ListRow({\n  title,\n  description,\n  leading,\n  trailing,\n  selected = false,\n  disabled = false,\n  onPress,\n  disclosure,\n  accessibilityLabel,\n  style,\n}: ListRowProps) {\n  const chevron = disclosure ?? (onPress !== undefined && Platform.OS === 'ios');\n  const content = (\n    <>\n      {leading}\n      <View style={styles.text}>\n        {typeof title === 'string' ? (\n          <Text numberOfLines={1} style={[styles.title, selected && styles.titleSelected]}>\n            {title}\n          </Text>\n        ) : (\n          title\n        )}\n        {typeof description === 'string' ? (\n          <Text numberOfLines={2} style={styles.description}>\n            {description}\n          </Text>\n        ) : (\n          description\n        )}\n      </View>\n      {trailing}\n      {chevron ? <ChevronRightIcon size={14} color=\"faint\" /> : null}\n    </>\n  );\n  if (onPress === undefined) {\n    return (\n      <View\n        accessibilityLabel={accessibilityLabel}\n        accessibilityState={{ selected, disabled }}\n        style={[styles.row, selected && styles.selected, disabled && styles.disabled, style]}\n      >\n        {content}\n      </View>\n    );\n  }\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityLabel={accessibilityLabel}\n      accessibilityState={{ selected, disabled }}\n      disabled={disabled}\n      onPress={onPress}\n      style={({ pressed }) => [\n        styles.row,\n        selected && styles.selected,\n        pressed && styles.pressed,\n        disabled && styles.disabled,\n        style,\n      ]}\n    >\n      {content}\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  frame: { flex: 1, minHeight: 0 },\n  separator: {\n    height: StyleSheet.hairlineWidth,\n    marginLeft: theme.spacing(4),\n    backgroundColor: theme.colors['border-soft'],\n  },\n  row: {\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(2),\n  },\n  selected: { backgroundColor: theme.colors['tint-green'] },\n  pressed: { backgroundColor: theme.colors.panel },\n  disabled: { opacity: DISABLED_OPACITY },\n  text: { flex: 1, minWidth: 0, gap: theme.spacing(0.5) },\n  title: {\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.medium,\n  },\n  titleSelected: { color: theme.colors.green, fontWeight: theme.fontWeight.semibold },\n  description: {\n    color: theme.colors.faint,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeight.sm,\n  },\n}));\n"],"mappings":"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"}

package/dist/components/Markdown.d.mts

@@ -0,0 +1,15 @@
+//#region src/components/Markdown.d.ts
+/**
+ * What a piece of inline code or a relative link opens, when the host knows.
+ * Returning undefined leaves it as plain code or an ordinary link. The same
+ * contract as the web Markdown's handler.
+ */
+export type FileLinkHandler = (text: string, explicit?: boolean) => (() => void) | undefined;
+export interface MarkdownProps {
+  text: string;
+  onFileLink?: FileLinkHandler;
+}
+/** Markdown in Po's shared presentation, parsed by the package's own small parser. */
+export declare function Markdown({ text, onFileLink }: MarkdownProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Markdown.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.d.mts","names":[],"sources":["../../src/components/Markdown.tsx"],"mappings":";;;;;;YAqBY,mBAAmB,cAAc;iBAgH5B;EACf;EACA,aAAa;;;wBAIC,WAAW,MAAM,cAAc,gCAAa,IAAA"}

package/dist/components/Markdown.mjs

@@ -0,0 +1,219 @@
+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 { StyleSheet } from "react-native-unistyles";
+import { Linking } from "react-native";
+import { Text } from "react-native-unistyles/components/native/Text";
+import { createContext, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Markdown.tsx
+/** Passed by context so the inline renderers stay module functions. */
+const FileLinkContext = createContext(void 0);
+const URL_OR_ANCHOR = /^(?:[a-z][a-z\d+.-]*:|\/\/|#|\?)/i;
+function decoded(href) {
+	try {
+		return decodeURIComponent(href);
+	} catch {
+		return;
+	}
+}
+function InlineCode({ text }) {
+	const onFileLink = useContext(FileLinkContext);
+	const open = text.includes("\n") ? void 0 : onFileLink?.(text);
+	if (open !== void 0) return /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "link",
+		accessibilityHint: `open ${text}`,
+		onPress: open,
+		style: [styles.code, styles.fileLink],
+		children: text
+	});
+	return /* @__PURE__ */ jsx(Text, {
+		style: styles.code,
+		children: text
+	});
+}
+function InlineLink({ href, children }) {
+	const onFileLink = useContext(FileLinkContext);
+	const path = decoded(href);
+	const isFile = path !== void 0 && path !== "" && !URL_OR_ANCHOR.test(path);
+	const open = isFile ? onFileLink?.(path, true) : void 0;
+	return /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "link",
+		onPress: () => {
+			if (open !== void 0) open();
+			else if (!isFile) Linking.openURL(href).catch(() => void 0);
+		},
+		style: styles.link,
+		children
+	});
+}
+function renderInline(nodes) {
+	return nodes.map((node, index) => {
+		switch (node.type) {
+			case "text": return node.text;
+			case "code": return /* @__PURE__ */ jsx(InlineCode, { text: node.text }, index);
+			case "strong": return /* @__PURE__ */ jsx(Text, {
+				style: styles.strong,
+				children: renderInline(node.children)
+			}, index);
+			case "em": return /* @__PURE__ */ jsx(Text, {
+				style: styles.em,
+				children: renderInline(node.children)
+			}, index);
+			case "link": return /* @__PURE__ */ jsx(InlineLink, {
+				href: node.href,
+				children: renderInline(node.children)
+			}, index);
+		}
+	});
+}
+function Block({ block, first }) {
+	switch (block.type) {
+		case "heading": return /* @__PURE__ */ jsx(Text, {
+			accessibilityRole: "header",
+			style: [
+				styles.prose,
+				styles.heading(block.level),
+				first && styles.firstHeading
+			],
+			children: renderInline(block.children)
+		});
+		case "paragraph": return /* @__PURE__ */ jsx(Text, {
+			style: styles.prose,
+			children: renderInline(block.children)
+		});
+		case "list": return /* @__PURE__ */ jsx(View, {
+			accessibilityRole: "list",
+			style: styles.list,
+			children: block.items.map((item, index) => /* @__PURE__ */ jsxs(View, {
+				style: styles.item,
+				children: [/* @__PURE__ */ jsx(Text, {
+					style: [styles.prose, styles.marker],
+					children: block.ordered ? `${block.start + index}.` : "•"
+				}), /* @__PURE__ */ jsx(Text, {
+					style: [styles.prose, styles.itemText],
+					children: renderInline(item)
+				})]
+			}, index))
+		});
+		case "code": return /* @__PURE__ */ jsx(CodeBlock, {
+			text: block.text,
+			language: block.language
+		});
+		case "rule": return /* @__PURE__ */ jsx(View, {
+			accessible: false,
+			style: styles.rule
+		});
+	}
+}
+/** Markdown in Po's shared presentation, parsed by the package's own small parser. */
+function Markdown({ text, onFileLink }) {
+	const blocks = useMemo(() => parseMarkdown(text), [text]);
+	return /* @__PURE__ */ jsx(FileLinkContext.Provider, {
+		value: onFileLink,
+		children: /* @__PURE__ */ jsx(View, {
+			style: styles.root,
+			children: blocks.map((block, index) => /* @__PURE__ */ jsx(Block, {
+				block,
+				first: index === 0
+			}, index))
+		})
+	});
+}
+/**
+* Headings step up from the prose and never shrink below it; h4 to h6 keep
+* the prose size and lean on weight, fading from `hi` to `dim`.
+*/
+const HEADING_STEP = {
+	1: "2xl",
+	2: "xl",
+	3: "lg",
+	4: "base",
+	5: "base",
+	6: "base"
+};
+const HEADING_SPACE = {
+	1: 2,
+	2: 2,
+	3: 1,
+	4: 0,
+	5: 0,
+	6: 0
+};
+const HEADING_INK = {
+	1: "hi",
+	2: "hi",
+	3: "hi",
+	4: "hi",
+	5: "text",
+	6: "dim"
+};
+const styles = StyleSheet.create((theme) => ({
+	root: {
+		minWidth: 0,
+		gap: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	prose: {
+		color: theme.colors.text,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		uni__dependencies: [0]
+	},
+	heading: (level) => ({
+		marginTop: theme.spacing(HEADING_SPACE[level]),
+		fontSize: theme.fontSize[HEADING_STEP[level]],
+		lineHeight: theme.lineHeight[HEADING_STEP[level]],
+		letterSpacing: theme.letterSpacing[HEADING_STEP[level]],
+		fontWeight: theme.fontWeight.semibold,
+		color: theme.colors[HEADING_INK[level]],
+		uni__dependencies: [0]
+	}),
+	firstHeading: { marginTop: 0 },
+	strong: {
+		fontWeight: theme.fontWeight.semibold,
+		color: theme.colors.hi,
+		uni__dependencies: [0]
+	},
+	em: { fontStyle: "italic" },
+	code: {
+		backgroundColor: theme.colors.deep,
+		color: theme.colors.green,
+		fontFamily: fontOf(theme.fontFamily.mono),
+		uni__dependencies: [0]
+	},
+	fileLink: { textDecorationLine: "underline" },
+	link: {
+		color: theme.colors.blue,
+		textDecorationLine: "underline",
+		uni__dependencies: [0]
+	},
+	list: {
+		gap: theme.spacing(.5),
+		uni__dependencies: [0]
+	},
+	item: {
+		flexDirection: "row",
+		gap: theme.spacing(2),
+		paddingLeft: theme.spacing(1),
+		uni__dependencies: [0]
+	},
+	marker: {
+		minWidth: theme.spacing(3),
+		color: theme.colors.dim,
+		uni__dependencies: [0]
+	},
+	itemText: { flexShrink: 1 },
+	rule: {
+		height: 1,
+		backgroundColor: theme.colors["border-soft"],
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { Markdown };
+//# sourceMappingURL=Markdown.mjs.map

package/dist/components/Markdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.mjs","names":["createContext","ReactNode","useContext","useMemo","Linking","StyleSheet","fontOf","MarkdownBlock","MarkdownHeadingLevel","MarkdownInline","parseMarkdown","CodeBlock","FileLinkHandler","text","explicit","FileLinkContext","undefined","URL_OR_ANCHOR","decoded","href","decodeURIComponent","InlineCode","onFileLink","open","includes","styles","code","fileLink","InlineLink","children","path","isFile","test","openURL","catch","link","renderInline","nodes","map","node","index","type","strong","em","Block","block","first","prose","heading","level","firstHeading","list","items","item","marker","ordered","start","itemText","language","rule","MarkdownProps","Markdown","blocks","root","HEADING_STEP","const","HEADING_SPACE","HEADING_INK","create","theme","minWidth","gap","spacing","uni__dependencies","color","colors","fontFamily","sans","fontSize","base","lineHeight","marginTop","letterSpacing","fontWeight","semibold","hi","fontStyle","backgroundColor","deep","green","mono","textDecorationLine","blue","flexDirection","paddingLeft","dim","flexShrink","height"],"sources":["../../src/components/Markdown.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useMemo } from 'react';\nimport { Linking, Text, View } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { type MarkdownBlock, type MarkdownHeadingLevel, type MarkdownInline, parseMarkdown } from '../lib/markdown';\nimport { CodeBlock } from './CodeBlock';\n\n/*\n * Markdown in the web component's element styles, from the package's own\n * parser: headings, paragraphs, lists, code spans and fences, bold, italic\n * and links. Web links open with Linking; a file path goes to the host.\n *\n * ponytail: no tables, images or blockquotes yet; their source shows as text.\n */\n\n/**\n * What a piece of inline code or a relative link opens, when the host knows.\n * Returning undefined leaves it as plain code or an ordinary link. The same\n * contract as the web Markdown's handler.\n */\nexport type FileLinkHandler = (text: string, explicit?: boolean) => (() => void) | undefined;\n\n/** Passed by context so the inline renderers stay module functions. */\nconst FileLinkContext = createContext<FileLinkHandler | undefined>(undefined);\n\nconst URL_OR_ANCHOR = /^(?:[a-z][a-z\\d+.-]*:|\\/\\/|#|\\?)/i;\n\nfunction decoded(href: string): string | undefined {\n  try {\n    return decodeURIComponent(href);\n  } catch {\n    return undefined;\n  }\n}\n\nfunction InlineCode({ text }: { text: string }) {\n  const onFileLink = useContext(FileLinkContext);\n  const open = text.includes('\\n') ? undefined : onFileLink?.(text);\n  if (open !== undefined) {\n    return (\n      <Text\n        accessibilityRole=\"link\"\n        accessibilityHint={`open ${text}`}\n        onPress={open}\n        style={[styles.code, styles.fileLink]}\n      >\n        {text}\n      </Text>\n    );\n  }\n  return <Text style={styles.code}>{text}</Text>;\n}\n\nfunction InlineLink({ href, children }: { href: string; children: ReactNode }) {\n  const onFileLink = useContext(FileLinkContext);\n  const path = decoded(href);\n  const isFile = path !== undefined && path !== '' && !URL_OR_ANCHOR.test(path);\n  const open = isFile ? onFileLink?.(path, true) : undefined;\n  return (\n    <Text\n      accessibilityRole=\"link\"\n      onPress={() => {\n        if (open !== undefined) open();\n        else if (!isFile) Linking.openURL(href).catch(() => undefined);\n      }}\n      style={styles.link}\n    >\n      {children}\n    </Text>\n  );\n}\n\nfunction renderInline(nodes: readonly MarkdownInline[]): ReactNode[] {\n  return nodes.map((node, index) => {\n    switch (node.type) {\n      case 'text':\n        return node.text;\n      case 'code':\n        return <InlineCode key={index} text={node.text} />;\n      case 'strong':\n        return (\n          <Text key={index} style={styles.strong}>\n            {renderInline(node.children)}\n          </Text>\n        );\n      case 'em':\n        return (\n          <Text key={index} style={styles.em}>\n            {renderInline(node.children)}\n          </Text>\n        );\n      case 'link':\n        return (\n          <InlineLink key={index} href={node.href}>\n            {renderInline(node.children)}\n          </InlineLink>\n        );\n    }\n  });\n}\n\nfunction Block({ block, first }: { block: MarkdownBlock; first: boolean }) {\n  switch (block.type) {\n    case 'heading':\n      return (\n        <Text\n          accessibilityRole=\"header\"\n          style={[styles.prose, styles.heading(block.level), first && styles.firstHeading]}\n        >\n          {renderInline(block.children)}\n        </Text>\n      );\n    case 'paragraph':\n      return <Text style={styles.prose}>{renderInline(block.children)}</Text>;\n    case 'list':\n      return (\n        <View accessibilityRole=\"list\" style={styles.list}>\n          {block.items.map((item, index) => (\n            <View key={index} style={styles.item}>\n              <Text style={[styles.prose, styles.marker]}>{block.ordered ? `${block.start + index}.` : '\\u2022'}</Text>\n              <Text style={[styles.prose, styles.itemText]}>{renderInline(item)}</Text>\n            </View>\n          ))}\n        </View>\n      );\n    case 'code':\n      return <CodeBlock text={block.text} language={block.language} />;\n    case 'rule':\n      return <View accessible={false} style={styles.rule} />;\n  }\n}\n\nexport interface MarkdownProps {\n  text: string;\n  onFileLink?: FileLinkHandler;\n}\n\n/** Markdown in Po's shared presentation, parsed by the package's own small parser. */\nexport function Markdown({ text, onFileLink }: MarkdownProps) {\n  const blocks = useMemo(() => parseMarkdown(text), [text]);\n  return (\n    <FileLinkContext.Provider value={onFileLink}>\n      <View style={styles.root}>\n        {blocks.map((block, index) => (\n          <Block key={index} block={block} first={index === 0} />\n        ))}\n      </View>\n    </FileLinkContext.Provider>\n  );\n}\n\n/**\n * Headings step up from the prose and never shrink below it; h4 to h6 keep\n * the prose size and lean on weight, fading from `hi` to `dim`.\n */\nconst HEADING_STEP = { 1: '2xl', 2: 'xl', 3: 'lg', 4: 'base', 5: 'base', 6: 'base' } as const;\nconst HEADING_SPACE = { 1: 2, 2: 2, 3: 1, 4: 0, 5: 0, 6: 0 } as const;\nconst HEADING_INK = { 1: 'hi', 2: 'hi', 3: 'hi', 4: 'hi', 5: 'text', 6: 'dim' } as const;\n\nconst styles = StyleSheet.create((theme) => ({\n  root: { minWidth: 0, gap: theme.spacing(2) },\n  prose: {\n    color: theme.colors.text,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    lineHeight: theme.lineHeight.base,\n  },\n  heading: (level: MarkdownHeadingLevel) => ({\n    marginTop: theme.spacing(HEADING_SPACE[level]),\n    fontSize: theme.fontSize[HEADING_STEP[level]],\n    lineHeight: theme.lineHeight[HEADING_STEP[level]],\n    letterSpacing: theme.letterSpacing[HEADING_STEP[level]],\n    fontWeight: theme.fontWeight.semibold,\n    color: theme.colors[HEADING_INK[level]],\n  }),\n  firstHeading: { marginTop: 0 },\n  strong: { fontWeight: theme.fontWeight.semibold, color: theme.colors.hi },\n  em: { fontStyle: 'italic' },\n  code: {\n    backgroundColor: theme.colors.deep,\n    color: theme.colors.green,\n    fontFamily: fontOf(theme.fontFamily.mono),\n  },\n  fileLink: { textDecorationLine: 'underline' },\n  link: { color: theme.colors.blue, textDecorationLine: 'underline' },\n  list: { gap: theme.spacing(0.5) },\n  item: { flexDirection: 'row', gap: theme.spacing(2), paddingLeft: theme.spacing(1) },\n  marker: { minWidth: theme.spacing(3), color: theme.colors.dim },\n  itemText: { flexShrink: 1 },\n  rule: { height: 1, backgroundColor: theme.colors['border-soft'] },\n}));\n"],"mappings":"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"}

package/dist/components/MessageItem.d.mts

@@ -0,0 +1,87 @@
+import { StatusTone } from "./StatusBadge.mjs";
+import { StyleProp, TextProps, ViewProps, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+//#region src/components/MessageItem.d.ts
+export interface MessageItemState {
+  tone: StatusTone;
+  /** Whether the header offers the toggle; an item that hides nothing offers none. */
+  expandable: boolean;
+  expanded: boolean;
+  toggle: () => void;
+}
+/** The enclosing item's state, for a part that lives deeper than the item's render prop. */
+export declare function useMessageItem(): MessageItemState;
+/** The tone a tool call's item wears: running while the tool runs, then its outcome. */
+export declare function toolTone(state: {
+  running: boolean;
+  isError: boolean;
+}): StatusTone;
+/** The badge text a tone reads as when the header is not told otherwise; empty hides the badge. */
+export declare const STATUS_LABEL: Readonly<Record<StatusTone, string>>;
+/** The glyph a tone reads as in a status line. */
+export declare const STATUS_GLYPH: Readonly<Record<StatusTone, string>>;
+export interface MessageItemProps extends Omit<ViewProps, 'children' | 'style'> {
+  tone?: StatusTone;
+  /** Whether the header offers the expand toggle. A toggle that reveals nothing reads as broken, so the card decides. */
+  expandable?: boolean;
+  defaultExpanded?: boolean;
+  /** Controlled mode; pair with onExpandedChange. Omit it and the item keeps its own state. */
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Plain content, or a function of the item's state for a card that picks its lines by `expanded`. */
+  children?: ReactNode | ((state: MessageItemState) => ReactNode);
+  style?: StyleProp<ViewStyle>;
+}
+export declare function MessageItem({ tone, expandable, defaultExpanded, expanded, onExpandedChange, children, style, ...props }: MessageItemProps): import("react").JSX.Element;
+export interface MessageItemGroupProps extends Omit<ViewProps, 'children' | 'style'> {
+  tone?: StatusTone;
+  /** The bold label at the left of the group header: the tool the run belongs to. */
+  title: ReactNode;
+  /** The line beside it, such as how many calls the group holds. */
+  summary?: ReactNode;
+  /** The badge text; defaults to the tone's label, null hides the badge. */
+  badge?: ReactNode | null;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+/**
+ * One frame around a run of items that belong together. Each item inside
+ * 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 interface MessageItemHeaderProps extends Omit<ViewProps, 'children' | 'style'> {
+  /** The bold label at the left: the tool name. */
+  title: ReactNode;
+  /** The badge text; defaults to the tone's label, null hides the badge. */
+  badge?: ReactNode | null;
+  /** The summary beside the title; it gets the remaining width. */
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+/**
+ * The title row: label, summary, the tone's badge and, when the item is
+ * expandable, a chevron; the whole row is the toggle. A row inside a group
+ * drops its title and speaks up only when something failed or is running.
+ */
+export declare function MessageItemHeader({ title, badge, children, style, ...props }: MessageItemHeaderProps): import("react").JSX.Element;
+export interface MessageItemPartProps extends Omit<ViewProps, 'children' | 'style'> {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+/** The body under the header, on the card's own surface. */
+export declare function MessageItemBody({ children, style, ...props }: MessageItemPartProps): import("react").JSX.Element;
+export interface MessageItemStatusProps extends Omit<TextProps, 'children'> {
+  tone?: StatusTone;
+  /** Replaces the tone's glyph. */
+  glyph?: string;
+  /** Renders as a button that expands the item: the "N more line(s)" hint. */
+  expands?: boolean;
+  children?: ReactNode;
+  /** Applied to the row; with `expands`, to the button. */
+  containerStyle?: StyleProp<ViewStyle>;
+}
+/** The one-line status under a body: `running`, `failed`, `done`, or the hint that more is hidden. */
+export declare function MessageItemStatus({ tone, glyph, expands, children, containerStyle, style, ...props }: MessageItemStatusProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=MessageItem.d.mts.map

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

@@ -0,0 +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"}