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

package/dist/components/MessageItem.mjs

@@ -0,0 +1,361 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { STATUS_COLORS } from "../lib/tone.mjs";
+import { wrapText } from "../lib/wrapText.mjs";
+import { Spinner } from "./Spinner.mjs";
+import { Button } from "./Button.mjs";
+import { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, WrenchIcon } from "../icons/icons.mjs";
+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 { createContext, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Pressable } from "react-native-unistyles/components/native/Pressable";
+
+//#region src/components/MessageItem.tsx
+const MIN_ROW_HEIGHT = 44;
+const LEAD_CHIP = 36;
+const ROW_EDGE_WIDTH = 2;
+const MessageItemContext = createContext({
+	tone: "neutral",
+	expandable: false,
+	expanded: false,
+	toggle: () => void 0
+});
+/** The enclosing item's state, for a part that lives deeper than the item's render prop. */
+function useMessageItem() {
+	return useContext(MessageItemContext);
+}
+/** The group an item is a row of, or null for an item that is a card of its own. */
+const MessageItemGroupContext = createContext(null);
+/** The tone a tool call's item wears: running while the tool runs, then its outcome. */
+function toolTone(state) {
+	return state.running ? "running" : state.isError ? "error" : "ok";
+}
+/** The badge text a tone reads as when the header is not told otherwise; empty hides the badge. */
+const STATUS_LABEL = {
+	neutral: "",
+	running: "Running",
+	ok: "Completed",
+	error: "Failed",
+	info: "Info",
+	accent: "Note"
+};
+/** The glyph a tone reads as in a status line. */
+const STATUS_GLYPH = {
+	neutral: "…",
+	running: "◐",
+	ok: "✓",
+	error: "✗",
+	info: "●",
+	accent: "●"
+};
+/** A settled OK is the calm default and keeps the soft border; only work in flight or a failure colours the edge. */
+function cardEdge(tone) {
+	return tone === "ok" ? "border-soft" : STATUS_EDGE[tone];
+}
+/** As a row, a settled or neutral item keeps a quiet edge. */
+function rowEdge(tone) {
+	return tone === "ok" || tone === "neutral" ? void 0 : STATUS_EDGE[tone];
+}
+function MessageItem({ tone = "neutral", expandable = false, defaultExpanded = false, expanded, onExpandedChange, children, style, ...props }) {
+	const [current, setExpanded] = useControllable(expanded, defaultExpanded, onExpandedChange);
+	const group = useContext(MessageItemGroupContext);
+	const state = {
+		tone,
+		expandable,
+		expanded: current,
+		toggle: () => setExpanded(!current)
+	};
+	return /* @__PURE__ */ jsx(MessageItemContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ jsx(View, {
+			style: [group === null ? styles.cardEdge(cardEdge(tone)) : styles.rowEdge(rowEdge(tone)), style],
+			...props,
+			children: typeof children === "function" ? children(state) : children
+		})
+	});
+}
+/** The line beside the title; a bare string stays on one line and truncates, as the web's `truncate`. */
+function Summary({ children }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: styles.summary,
+		children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
+			numberOfLines: 1,
+			style: styles.summaryText,
+			children
+		}) : wrapText(children, styles.summaryText)
+	});
+}
+/** The card's lead: the tool chip, the "Tool call" caption, then the name and its summary on one line. */
+function ToolCallLead({ title, children }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(View, {
+		accessible: false,
+		style: styles.chip,
+		children: /* @__PURE__ */ jsx(WrenchIcon, { size: 16 })
+	}), /* @__PURE__ */ jsxs(View, {
+		style: styles.lead,
+		children: [/* @__PURE__ */ jsx(Text, {
+			style: styles.caption,
+			children: "Tool call"
+		}), /* @__PURE__ */ jsxs(View, {
+			style: styles.titleLine,
+			children: [wrapText(title, styles.title), /* @__PURE__ */ jsx(Summary, { children })]
+		})]
+	})] });
+}
+/** The sentence-case outcome pill, led by the tone's icon. */
+function OutcomeBadge({ tone, children }) {
+	const ink = STATUS_COLORS[tone].ink;
+	return /* @__PURE__ */ jsxs(StatusBadge, {
+		tone,
+		size: "md",
+		style: styles.outcome,
+		children: [
+			tone === "running" ? /* @__PURE__ */ jsx(Spinner, { color: ink }) : null,
+			tone === "ok" ? /* @__PURE__ */ jsx(CheckIcon, {
+				size: 12,
+				color: ink
+			}) : null,
+			tone === "error" ? /* @__PURE__ */ jsx(AlertIcon, {
+				size: 12,
+				color: ink
+			}) : null,
+			children
+		]
+	});
+}
+/**
+* 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.
+*/
+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 })]
+		})
+	});
+}
+/** Inside a group these two are the quiet outcome: the group's header has already said it. */
+const SILENT_IN_GROUP = /* @__PURE__ */ new Set(["ok", "neutral"]);
+/**
+* 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.
+*/
+function MessageItemHeader({ title, badge, children, style, ...props }) {
+	const { tone, expandable, expanded, toggle } = useMessageItem();
+	const group = useContext(MessageItemGroupContext);
+	const defaultLabel = group !== null && SILENT_IN_GROUP.has(tone) ? null : STATUS_LABEL[tone];
+	const label = badge === void 0 ? defaultLabel : badge;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		group === null ? /* @__PURE__ */ jsx(ToolCallLead, {
+			title,
+			children
+		}) : /* @__PURE__ */ jsx(Summary, { children }),
+		label !== null && label !== "" ? /* @__PURE__ */ jsx(OutcomeBadge, {
+			tone,
+			children: label
+		}) : null,
+		expandable ? expanded ? /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 }) : /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16 }) : null
+	] });
+	if (!expandable) return /* @__PURE__ */ jsx(View, {
+		style: [styles.header, style],
+		...props,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Pressable, {
+		accessibilityRole: "button",
+		accessibilityState: { expanded },
+		accessibilityHint: expanded ? "collapse" : "expand",
+		onPress: toggle,
+		style: ({ pressed }) => [
+			styles.header,
+			pressed && styles.headerPressed,
+			style
+		],
+		...props,
+		children: content
+	});
+}
+/** The body under the header, on the card's own surface. */
+function MessageItemBody({ children, style, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: [styles.body, style],
+		...props,
+		children: wrapText(children, styles.bodyText)
+	});
+}
+/** The one-line status under a body: `running`, `failed`, `done`, or the hint that more is hidden. */
+function MessageItemStatus({ tone = "neutral", glyph, expands = false, children, containerStyle, style, ...props }) {
+	const { toggle } = useMessageItem();
+	const line = /* @__PURE__ */ jsxs(Text, {
+		style: [styles.status, style],
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				style: styles.glyph(tone),
+				children: glyph ?? STATUS_GLYPH[tone]
+			}),
+			" ",
+			children
+		]
+	});
+	if (expands) return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "xs",
+		onPress: toggle,
+		style: [styles.more, containerStyle],
+		children: line
+	});
+	return /* @__PURE__ */ jsx(View, {
+		style: containerStyle,
+		children: line
+	});
+}
+const styles = StyleSheet.create((theme) => ({
+	cardEdge: (token) => ({
+		overflow: "hidden",
+		borderRadius: theme.borderRadius.lg,
+		borderWidth: 1,
+		borderColor: theme.colors[token],
+		uni__dependencies: [0]
+	}),
+	rowEdge: (token) => ({
+		overflow: "hidden",
+		borderTopWidth: 1,
+		borderTopColor: theme.colors["border-soft"],
+		borderLeftWidth: ROW_EDGE_WIDTH,
+		borderLeftColor: token === void 0 ? "transparent" : theme.colors[token],
+		uni__dependencies: [0]
+	}),
+	header: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(3),
+		minHeight: MIN_ROW_HEIGHT,
+		paddingHorizontal: theme.spacing(4),
+		paddingVertical: theme.spacing(3),
+		uni__dependencies: [0]
+	},
+	headerPressed: {
+		backgroundColor: theme.colors.panel,
+		uni__dependencies: [0]
+	},
+	chip: {
+		alignItems: "center",
+		justifyContent: "center",
+		width: LEAD_CHIP,
+		height: LEAD_CHIP,
+		flexShrink: 0,
+		borderRadius: theme.borderRadius.full,
+		backgroundColor: theme.colors.rail,
+		uni__dependencies: [0]
+	},
+	lead: {
+		flex: 1,
+		minWidth: 0
+	},
+	caption: {
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		uni__dependencies: [0]
+	},
+	titleLine: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(2),
+		minWidth: 0,
+		uni__dependencies: [0]
+	},
+	title: {
+		flexShrink: 0,
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		fontWeight: theme.fontWeight.semibold,
+		uni__dependencies: [0]
+	},
+	summary: {
+		flex: 1,
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(2),
+		minWidth: 0,
+		uni__dependencies: [0]
+	},
+	summaryText: {
+		flexShrink: 1,
+		color: theme.colors.faint,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		uni__dependencies: [0]
+	},
+	faint: {
+		flexShrink: 1,
+		color: theme.colors.faint,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		uni__dependencies: [0]
+	},
+	outcome: {
+		gap: theme.spacing(1),
+		uni__dependencies: [0]
+	},
+	body: {
+		gap: theme.spacing(1),
+		borderTopWidth: 1,
+		borderTopColor: theme.colors["border-soft"],
+		paddingHorizontal: theme.spacing(4),
+		paddingVertical: theme.spacing(3),
+		uni__dependencies: [0]
+	},
+	bodyText: {
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		uni__dependencies: [0]
+	},
+	status: {
+		color: theme.colors.faint,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		uni__dependencies: [0]
+	},
+	glyph: (tone) => ({
+		color: theme.colors[STATUS_COLORS[tone].ink],
+		uni__dependencies: [0]
+	}),
+	more: { alignSelf: "flex-start" }
+}));
+
+//#endregion
+export { MessageItem, MessageItemBody, MessageItemGroup, MessageItemHeader, MessageItemStatus, STATUS_GLYPH, STATUS_LABEL, toolTone, useMessageItem };
+//# sourceMappingURL=MessageItem.mjs.map

package/dist/components/MessageItem.mjs.map

@@ -0,0 +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":";;;;;;;;;;;;;;;;AAsBA,MAAMuB,iBAAiB;AACvB,MAAMC,YAAY;AAClB,MAAMC,iBAAiB;AAUvB,MAAMM,qBAAqB9B,cAAgC;CACzD0B,MAAM;CACNC,YAAY;CACZC,UAAU;CACVC,cAAcE;AAChB,CAAC;;AAGD,SAAgBC,iBAAmC;CACjD,OAAO9B,WAAW4B,kBAAkB;AACtC;;AAGA,MAAMG,0BAA0BjC,cAA2C,IAAI;;AAG/E,SAAgBkC,SAASC,OAA2D;CAClF,OAAOA,MAAMC,UAAU,YAAYD,MAAME,UAAU,UAAU;AAC/D;;AAGA,MAAaC,eAAqD;CAChEG,SAAS;CACTL,SAAS;CACTM,IAAI;CACJC,OAAO;CACPC,MAAM;CACNC,QAAQ;AACV;;AAGA,MAAaC,eAAqD;CAChEL,SAAS;CACTL,SAAS;CACTM,IAAI;CACJC,OAAO;CACPC,MAAM;CACNC,QAAQ;AACV;;AAGA,SAASE,SAASrB,MAAoC;CACpD,OAAOA,SAAS,OAAO,gBAAgBP,YAAYO;AACrD;;AAGA,SAASsB,QAAQtB,MAAgD;CAC/D,OAAOA,SAAS,QAAQA,SAAS,YAAYK,SAAYZ,YAAYO;AACvE;AAeA,SAAgB6B,YAAY,EAC1B7B,OAAO,WACPC,aAAa,OACbwB,kBAAkB,OAClBvB,UACAwB,kBACAC,UACAC,OACA,GAAGE,SACgB;CACnB,MAAM,CAACC,SAASC,eAAe3C,gBAAgBa,UAAUuB,iBAAiBC,gBAAgB;CAC1F,MAAMO,QAAQzD,WAAW+B,uBAAuB;CAChD,MAAME,QAA0B;EAAET;EAAMC;EAAYC,UAAU6B;EAAS5B,cAAc6B,YAAY,CAACD,OAAO;CAAE;CAC3G,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAOtB;YAClC,oBAAC,MAAD;GACE,OAAO,CAACwB,UAAU,OAAOC,OAAOb,SAASA,SAASrB,IAAI,CAAC,IAAIkC,OAAOZ,QAAQA,QAAQtB,IAAI,CAAC,GAAG4B,KAAK;GAC/F,GAAIE;aAEH,OAAOH,aAAa,aAAaA,SAASlB,KAAK,IAAIkB;EAChD;CACqB;AAEjC;;AAGA,SAASQ,QAAQ,EAAER,YAAsC;CACvD,OACE,oBAAC,MAAD;EAAM,OAAOO,OAAOE;YACjB,OAAOT,aAAa,WACnB,oBAAC,MAAD;GAAM,eAAe;GAAG,OAAOO,OAAOG;GACnCV;EACG,KAENrC,SAASqC,UAAUO,OAAOG,WAAW;CAEnC;AAEV;;AAGA,SAASC,aAAa,EAAEC,OAAOZ,YAAwD;CACrF,OACE,4CACE,oBAAC,MAAD;EAAM,YAAY;EAAO,OAAOO,OAAOM;YACrC,oBAAC,YAAD,EAAY,MAAM,GAAG;CACjB,IACN,qBAAC,MAAD;EAAM,OAAON,OAAOO;YAApB,CACE,oBAAC,MAAD;GAAM,OAAOP,OAAOQ;aAAS;EAAe,IAC5C,qBAAC,MAAD;GAAM,OAAOR,OAAOS;aAApB,CACGrD,SAASiD,OAAOL,OAAOK,KAAK,GAC7B,oBAAC,SAAD,EAAUZ,SAAkB,EACxB;IACF;GACR;AAEJ;;AAGA,SAASiB,aAAa,EAAE5C,MAAM2B,YAAuD;CACnF,MAAMkB,MAAMzD,cAAcY,KAAK,CAAC6C;CAChC,OACE,qBAAC,aAAD;EAAmB7C;EAAM,MAAK;EAAK,OAAOkC,OAAOY;YAAjD;GACG9C,SAAS,YAAY,oBAAC,SAAD,EAAS,OAAO6C,IAAI,KAAM;GAC/C7C,SAAS,OAAO,oBAAC,WAAD;IAAW,MAAM;IAAI,OAAO6C;GAAI,KAAM;GACtD7C,SAAS,UAAU,oBAAC,WAAD;IAAW,MAAM;IAAI,OAAO6C;GAAI,KAAM;GACzDlB;EACU;;AAEjB;;;;;;AAmBA,SAAgBsB,iBAAiB,EAC/BjD,OAAO,WACPuC,OACAH,SACAY,OACArB,UACAC,OACA,GAAGE,SACqB;CACxB,MAAMoB,QAAQF,UAAU3C,SAAYO,aAAaZ,QAAQgD;CACzD,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO,EAAEhD,KAAK;YAC9C,qBAAC,MAAD;GAAM,OAAO,CAACkC,OAAOb,SAASA,SAASrB,IAAI,CAAC,GAAG4B,KAAK;GAAG,GAAIE;aAA3D,CACE,qBAAC,MAAD;IAAM,mBAAkB;IAAS,OAAOI,OAAOiB;cAA/C,CACE,oBAAC,cAAD;KAAqBZ;eAClB,OAAOH,YAAY,WAClB,oBAAC,MAAD;MAAM,eAAe;MAAG,OAAOF,OAAOkB;gBACnChB;KACG,KAENA;IAEU,IACbc,UAAU,QAAQA,UAAU,KAAK,oBAAC,cAAD;KAAoBlD;eAAOkD;IAAoB,KAAI,IACjF;OACN,oBAAC,MAAD,EAAOvB,SAAe,EAClB;;CAC0B;AAEtC;;AAaA,MAAM2B,kCAA2C,IAAIE,IAAgB,CAAC,MAAM,SAAS,CAAC;;;;;;AAOtF,SAAgBC,kBAAkB,EAAElB,OAAOS,OAAOrB,UAAUC,OAAO,GAAGE,SAAiC;CACrG,MAAM,EAAE9B,MAAMC,YAAYC,UAAUC,WAAWG,eAAe;CAC9D,MAAM2B,QAAQzD,WAAW+B,uBAAuB;CAChD,MAAMmD,eAAezB,UAAU,QAAQqB,gBAAgBK,IAAI3D,IAAI,IAAI,OAAOY,aAAaZ;CACvF,MAAMkD,QAAQF,UAAU3C,SAAYqD,eAAeV;CACnD,MAAMY,UACJ;EACG3B,UAAU,OAAO,oBAAC,cAAD;GAAqBM;GAAQZ;EAAuB,KAAI,oBAAC,SAAD,EAAUA,SAAkB;EACrGuB,UAAU,QAAQA,UAAU,KAAK,oBAAC,cAAD;GAAoBlD;aAAOkD;EAAoB,KAAI;EACpFjD,aAAaC,WAAW,oBAAC,iBAAD,EAAiB,MAAM,GAAG,KAAM,oBAAC,kBAAD,EAAkB,MAAM,GAAG,KAAM;CAC5F;CAEF,IAAI,CAACD,YACH,OACE,oBAAC,MAAD;EAAM,OAAO,CAACiC,OAAOiB,QAAQvB,KAAK;EAAG,GAAIE;YACtC8B;CACG;CAGV,OACE,oBAAC,WAAD;EACE,mBAAkB;EAClB,oBAAoB,EAAE1D,SAAS;EAC/B,mBAAmBA,WAAW,aAAa;EAC3C,SAASC;EACT,QAAQ,EAAE0D,cAAc;GAAC3B,OAAOiB;GAAQU,WAAW3B,OAAO4B;GAAelC;EAAK;EAC9E,GAAIE;YAEH8B;CACQ;AAEf;;AAQA,SAAgBI,gBAAgB,EAAErC,UAAUC,OAAO,GAAGE,SAA+B;CACnF,OACE,oBAAC,MAAD;EAAM,OAAO,CAACI,OAAO+B,MAAMrC,KAAK;EAAG,GAAIE;YACpCxC,SAASqC,UAAUO,OAAOgC,QAAQ;CAC/B;AAEV;;AAcA,SAAgBK,kBAAkB,EAChCvE,OAAO,WACPoE,OACAC,UAAU,OACV1C,UACA2C,gBACA1C,OACA,GAAGE,SACsB;CACzB,MAAM,EAAE3B,WAAWG,eAAe;CAClC,MAAMkE,OACJ,qBAAC,MAAD;EAAM,OAAO,CAACtC,OAAOuC,QAAQ7C,KAAK;EAAG,GAAIE;YAAzC;GACE,oBAAC,MAAD;IAAM,OAAOI,OAAOkC,MAAMpE,IAAI;cAAIoE,SAAShD,aAAapB;GAAY;GAAC;GAAE2B;EACnE;;CAER,IAAI0C,SACF,OACE,oBAAC,QAAD;EAAQ,SAAQ;EAAQ,MAAK;EAAK,SAASlE;EAAQ,OAAO,CAAC+B,OAAOwC,MAAMJ,cAAc;YACnFE;CACK;CAGZ,OAAO,oBAAC,MAAD;EAAM,OAAOF;YAAiBE;CAAW;AAClD;AAEA,MAAMtC,SAASrD,WAAW8F,QAAQC,WAAW;CAC3CvD,WAAWwD,WAA6B;EACtCC,UAAU;EACVC,cAAcH,MAAMG,aAAaC;EACjCC,aAAa;EACbC,aAAaN,MAAMO,OAAON;EAAMO,mBAAA,CAAA,CAAA;CAClC;CAEA9D,UAAUuD,WAAyC;EACjDC,UAAU;EACVO,gBAAgB;EAChBC,gBAAgBV,MAAMO,OAAO;EAC7BI,iBAAiBzF;EACjB0F,iBAAiBX,UAAUxE,SAAY,gBAAgBuE,MAAMO,OAAON;EAAMO,mBAAA,CAAA,CAAA;CAC5E;CACAjC,QAAQ;EACNsC,eAAe;EACfC,YAAY;EACZC,KAAKf,MAAMgB,QAAQ,CAAC;EACpBC,WAAWjG;EACXkG,mBAAmBlB,MAAMgB,QAAQ,CAAC;EAClCG,iBAAiBnB,MAAMgB,QAAQ,CAAC;EAACR,mBAAA,CAAA,CAAA;CACnC;CACAtB,eAAe;EAAEkC,iBAAiBpB,MAAMO,OAAOc;EAAKb,mBAAA,CAAA,CAAA;CAAC;CACrD5C,MAAM;EACJkD,YAAY;EACZQ,gBAAgB;EAChBC,OAAOtG;EACPuG,QAAQvG;EACRwG,YAAY;EACZtB,cAAcH,MAAMG,aAAauB;EACjCN,iBAAiBpB,MAAMO,OAAOoB;EAAInB,mBAAA,CAAA,CAAA;CACpC;CACA3C,MAAM;EAAE+D,MAAM;EAAGC,UAAU;CAAE;CAC7B/D,SAAS;EACPgE,OAAO9B,MAAMO,OAAOwB;EACpBC,YAAYzH,OAAOyF,MAAMgC,WAAWC,IAAI;EACxCC,UAAUlC,MAAMkC,SAASC;EACzBC,YAAYpC,MAAMoC,WAAWD;EAAE3B,mBAAA,CAAA,CAAA;CACjC;CACAzC,WAAW;EAAE8C,eAAe;EAAOC,YAAY;EAAUC,KAAKf,MAAMgB,QAAQ,CAAC;EAAGa,UAAU;EAACrB,mBAAA,CAAA,CAAA;CAAC;CAC5F7C,OAAO;EACL8D,YAAY;EACZK,OAAO9B,MAAMO,OAAO8B;EACpBL,YAAYzH,OAAOyF,MAAMgC,WAAWC,IAAI;EACxCC,UAAUlC,MAAMkC,SAASI;EACzBF,YAAYpC,MAAMoC,WAAWE;EAC7BC,YAAYvC,MAAMuC,WAAWC;EAAQhC,mBAAA,CAAA,CAAA;CACvC;CACAhD,SAAS;EAAEoE,MAAM;EAAGf,eAAe;EAAOC,YAAY;EAAUC,KAAKf,MAAMgB,QAAQ,CAAC;EAAGa,UAAU;EAACrB,mBAAA,CAAA,CAAA;CAAC;CACnG/C,aAAa;EACXgE,YAAY;EACZK,OAAO9B,MAAMO,OAAO/B;EACpBwD,YAAYzH,OAAOyF,MAAMgC,WAAWC,IAAI;EACxCC,UAAUlC,MAAMkC,SAASI;EACzBF,YAAYpC,MAAMoC,WAAWE;EAAI9B,mBAAA,CAAA,CAAA;CACnC;CACAhC,OAAO;EACLiD,YAAY;EACZK,OAAO9B,MAAMO,OAAO/B;EACpBwD,YAAYzH,OAAOyF,MAAMgC,WAAWC,IAAI;EACxCC,UAAUlC,MAAMkC,SAASI;EACzBF,YAAYpC,MAAMoC,WAAWE;EAAI9B,mBAAA,CAAA,CAAA;CACnC;CACAtC,SAAS;EAAE6C,KAAKf,MAAMgB,QAAQ,CAAC;EAACR,mBAAA,CAAA,CAAA;CAAC;CACjCnB,MAAM;EACJ0B,KAAKf,MAAMgB,QAAQ,CAAC;EACpBP,gBAAgB;EAChBC,gBAAgBV,MAAMO,OAAO;EAC7BW,mBAAmBlB,MAAMgB,QAAQ,CAAC;EAClCG,iBAAiBnB,MAAMgB,QAAQ,CAAC;EAACR,mBAAA,CAAA,CAAA;CACnC;CACAlB,UAAU;EACRwC,OAAO9B,MAAMO,OAAOwB;EACpBC,YAAYzH,OAAOyF,MAAMgC,WAAWC,IAAI;EACxCC,UAAUlC,MAAMkC,SAASI;EACzBF,YAAYpC,MAAMoC,WAAWE;EAAI9B,mBAAA,CAAA,CAAA;CACnC;CACAX,QAAQ;EACNiC,OAAO9B,MAAMO,OAAO/B;EACpBwD,YAAYzH,OAAOyF,MAAMgC,WAAWC,IAAI;EACxCC,UAAUlC,MAAMkC,SAASC;EACzBC,YAAYpC,MAAMoC,WAAWD;EAAE3B,mBAAA,CAAA,CAAA;CACjC;CACAhB,QAAQpE,UAAsB;EAAE0G,OAAO9B,MAAMO,OAAO/F,cAAcY,KAAK,CAAC6C;EAAIuC,mBAAA,CAAA,CAAA;CAAC;CAC7EV,MAAM,EAAE2C,WAAW,aAAa;AAClC,EAAE"}

package/dist/components/Panel.d.mts

@@ -0,0 +1,15 @@
+import { StyleProp, ViewProps, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+//#region src/components/Panel.d.ts
+export interface PanelPartProps extends Omit<ViewProps, 'children' | 'style'> {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+/** The bordered card surface: a tool card, a run card, a device row. */
+export declare function Panel({ style, children, ...props }: PanelPartProps): import("react").JSX.Element;
+/** A panel's title row; it carries the header role. */
+export declare function PanelHeader({ style, children, ...props }: PanelPartProps): import("react").JSX.Element;
+/** A panel's recessed body: the deep well the header sits above. */
+export declare function PanelBody({ style, children, ...props }: PanelPartProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Panel.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.mts","names":[],"sources":["../../src/components/Panel.tsx"],"mappings":";;;iBAOiB,uBAAuB,KAAK;EAC3C,WAAW;EACX,QAAQ,UAAU;;;wBAIJ,QAAQ,OAAO,aAAa,SAAS,iCAAc,IAAA;;wBASnD,cAAc,OAAO,aAAa,SAAS,iCAAc,IAAA;;wBASzD,YAAY,OAAO,aAAa,SAAS,iCAAc,IAAA"}

package/dist/components/Panel.mjs

@@ -0,0 +1,77 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { wrapText } from "../lib/wrapText.mjs";
+import { View } from "react-native-unistyles/components/native/View";
+import { StyleSheet } from "react-native-unistyles";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Panel.tsx
+/** The bordered card surface: a tool card, a run card, a device row. */
+function Panel({ style, children, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: [styles.panel, style],
+		...props,
+		children: wrapText(children, styles.text)
+	});
+}
+/** A panel's title row; it carries the header role. */
+function PanelHeader({ style, children, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		accessibilityRole: "header",
+		style: [styles.header, style],
+		...props,
+		children: wrapText(children, styles.title)
+	});
+}
+/** A panel's recessed body: the deep well the header sits above. */
+function PanelBody({ style, children, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: [styles.body, style],
+		...props,
+		children: wrapText(children, styles.text)
+	});
+}
+const styles = StyleSheet.create((theme) => ({
+	panel: {
+		overflow: "hidden",
+		borderRadius: theme.borderRadius.md,
+		borderWidth: 1,
+		borderColor: theme.colors.border,
+		backgroundColor: theme.colors.panel,
+		uni__dependencies: [0]
+	},
+	header: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(2),
+		minHeight: theme.spacing(8),
+		paddingHorizontal: 11,
+		uni__dependencies: [0]
+	},
+	body: {
+		borderTopWidth: 1,
+		borderTopColor: theme.colors["border-soft"],
+		backgroundColor: theme.colors.deep,
+		paddingHorizontal: theme.spacing(3),
+		paddingVertical: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	title: {
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		fontWeight: theme.fontWeight.semibold,
+		uni__dependencies: [0]
+	},
+	text: {
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { Panel, PanelBody, PanelHeader };
+//# sourceMappingURL=Panel.mjs.map

package/dist/components/Panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.mjs","names":["ReactNode","StyleProp","ViewProps","ViewStyle","StyleSheet","fontOf","wrapText","PanelPartProps","Omit","children","style","Panel","props","styles","panel","text","PanelHeader","header","title","PanelBody","body","create","theme","overflow","borderRadius","md","borderWidth","borderColor","colors","border","backgroundColor","uni__dependencies","flexDirection","alignItems","gap","spacing","minHeight","paddingHorizontal","borderTopWidth","borderTopColor","deep","paddingVertical","color","hi","fontFamily","sans","fontSize","base","lineHeight","fontWeight","semibold","dim","sm"],"sources":["../../src/components/Panel.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { wrapText } from '../lib/wrapText';\n\nexport interface PanelPartProps extends Omit<ViewProps, 'children' | 'style'> {\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The bordered card surface: a tool card, a run card, a device row. */\nexport function Panel({ style, children, ...props }: PanelPartProps) {\n  return (\n    <View style={[styles.panel, style]} {...props}>\n      {wrapText(children, styles.text)}\n    </View>\n  );\n}\n\n/** A panel's title row; it carries the header role. */\nexport function PanelHeader({ style, children, ...props }: PanelPartProps) {\n  return (\n    <View accessibilityRole=\"header\" style={[styles.header, style]} {...props}>\n      {wrapText(children, styles.title)}\n    </View>\n  );\n}\n\n/** A panel's recessed body: the deep well the header sits above. */\nexport function PanelBody({ style, children, ...props }: PanelPartProps) {\n  return (\n    <View style={[styles.body, style]} {...props}>\n      {wrapText(children, styles.text)}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  panel: {\n    overflow: 'hidden',\n    borderRadius: theme.borderRadius.md,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    backgroundColor: theme.colors.panel,\n  },\n  header: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    minHeight: theme.spacing(8),\n    paddingHorizontal: 11,\n  },\n  body: {\n    borderTopWidth: 1,\n    borderTopColor: theme.colors['border-soft'],\n    backgroundColor: theme.colors.deep,\n    paddingHorizontal: theme.spacing(3),\n    paddingVertical: theme.spacing(2),\n  },\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.semibold,\n  },\n  text: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeight.sm,\n  },\n}));\n"],"mappings":";;;;;;;;AAaA,SAAgBW,MAAM,EAAED,OAAOD,UAAU,GAAGG,SAAyB;CACnE,OACE,oBAAC,MAAD;EAAM,OAAO,CAACC,OAAOC,OAAOJ,KAAK;EAAG,GAAIE;YACrCN,SAASG,UAAUI,OAAOE,IAAI;CAC3B;AAEV;;AAGA,SAAgBC,YAAY,EAAEN,OAAOD,UAAU,GAAGG,SAAyB;CACzE,OACE,oBAAC,MAAD;EAAM,mBAAkB;EAAS,OAAO,CAACC,OAAOI,QAAQP,KAAK;EAAG,GAAIE;YACjEN,SAASG,UAAUI,OAAOK,KAAK;CAC5B;AAEV;;AAGA,SAAgBC,UAAU,EAAET,OAAOD,UAAU,GAAGG,SAAyB;CACvE,OACE,oBAAC,MAAD;EAAM,OAAO,CAACC,OAAOO,MAAMV,KAAK;EAAG,GAAIE;YACpCN,SAASG,UAAUI,OAAOE,IAAI;CAC3B;AAEV;AAEA,MAAMF,SAAST,WAAWiB,QAAQC,WAAW;CAC3CR,OAAO;EACLS,UAAU;EACVC,cAAcF,MAAME,aAAaC;EACjCC,aAAa;EACbC,aAAaL,MAAMM,OAAOC;EAC1BC,iBAAiBR,MAAMM,OAAOd;EAAKiB,mBAAA,CAAA,CAAA;CACrC;CACAd,QAAQ;EACNe,eAAe;EACfC,YAAY;EACZC,KAAKZ,MAAMa,QAAQ,CAAC;EACpBC,WAAWd,MAAMa,QAAQ,CAAC;EAC1BE,mBAAmB;EAAEN,mBAAA,CAAA,CAAA;CACvB;CACAX,MAAM;EACJkB,gBAAgB;EAChBC,gBAAgBjB,MAAMM,OAAO;EAC7BE,iBAAiBR,MAAMM,OAAOY;EAC9BH,mBAAmBf,MAAMa,QAAQ,CAAC;EAClCM,iBAAiBnB,MAAMa,QAAQ,CAAC;EAACJ,mBAAA,CAAA,CAAA;CACnC;CACAb,OAAO;EACLwB,OAAOpB,MAAMM,OAAOe;EACpBC,YAAYvC,OAAOiB,MAAMsB,WAAWC,IAAI;EACxCC,UAAUxB,MAAMwB,SAASC;EACzBC,YAAY1B,MAAM0B,WAAWD;EAC7BE,YAAY3B,MAAM2B,WAAWC;EAAQnB,mBAAA,CAAA,CAAA;CACvC;CACAhB,MAAM;EACJ2B,OAAOpB,MAAMM,OAAOuB;EACpBP,YAAYvC,OAAOiB,MAAMsB,WAAWC,IAAI;EACxCC,UAAUxB,MAAMwB,SAASM;EACzBJ,YAAY1B,MAAM0B,WAAWI;EAAErB,mBAAA,CAAA,CAAA;CACjC;AACF,EAAE"}

package/dist/components/PoNativeProvider.d.mts

@@ -0,0 +1,15 @@
+import { StyleProp, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+//#region src/components/PoNativeProvider.d.ts
+export interface PoNativeProviderProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+/**
+ * The roots every native component needs once: gesture handling and the
+ * bottom sheet host. Mount it once at the app root, inside SafeAreaProvider,
+ * and around any story that renders a sheet, dialog or menu.
+ */
+export declare function PoNativeProvider({ children, style }: PoNativeProviderProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=PoNativeProvider.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PoNativeProvider.d.mts","names":[],"sources":["../../src/components/PoNativeProvider.tsx"],"mappings":";;;iBAMiB;EACf,WAAW;EACX,QAAQ,UAAU;;;;;;;wBAQJ,mBAAmB,UAAU,SAAS,wCAAqB,IAAA"}

package/dist/components/PoNativeProvider.mjs

@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native-unistyles";
+import { jsx } from "react/jsx-runtime";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+
+//#region src/components/PoNativeProvider.tsx
+/**
+* The roots every native component needs once: gesture handling and the
+* bottom sheet host. Mount it once at the app root, inside SafeAreaProvider,
+* and around any story that renders a sheet, dialog or menu.
+*/
+function PoNativeProvider({ children, style }) {
+	return /* @__PURE__ */ jsx(GestureHandlerRootView, {
+		style: [styles.root, style],
+		children: /* @__PURE__ */ jsx(BottomSheetModalProvider, { children })
+	});
+}
+const styles = StyleSheet.create({ root: { flex: 1 } });
+
+//#endregion
+export { PoNativeProvider };
+//# sourceMappingURL=PoNativeProvider.mjs.map

package/dist/components/PoNativeProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PoNativeProvider.mjs","names":["BottomSheetModalProvider","ReactNode","StyleProp","ViewStyle","GestureHandlerRootView","StyleSheet","PoNativeProviderProps","children","style","PoNativeProvider","styles","root","create","flex"],"sources":["../../src/components/PoNativeProvider.tsx"],"sourcesContent":["import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';\nimport type { ReactNode } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\nimport { StyleSheet } from 'react-native-unistyles';\n\nexport interface PoNativeProviderProps {\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/**\n * The roots every native component needs once: gesture handling and the\n * bottom sheet host. Mount it once at the app root, inside SafeAreaProvider,\n * and around any story that renders a sheet, dialog or menu.\n */\nexport function PoNativeProvider({ children, style }: PoNativeProviderProps) {\n  return (\n    <GestureHandlerRootView style={[styles.root, style]}>\n      <BottomSheetModalProvider>{children}</BottomSheetModalProvider>\n    </GestureHandlerRootView>\n  );\n}\n\nconst styles = StyleSheet.create({ root: { flex: 1 } });\n"],"mappings":";;;;;;;;;;;AAgBA,SAAgBS,iBAAiB,EAAEF,UAAUC,SAAgC;CAC3E,OACE,oBAAC,wBAAD;EAAwB,OAAO,CAACE,OAAOC,MAAMH,KAAK;YAChD,oBAAC,0BAAD,EAA2BD,SAAmC;CACxC;AAE5B;AAEA,MAAMG,SAASL,WAAWO,OAAO,EAAED,MAAM,EAAEE,MAAM,EAAE,EAAE,CAAC"}

package/dist/components/SectionLabel.d.mts

@@ -0,0 +1,6 @@
+import { TextProps } from "react-native";
+//#region src/components/SectionLabel.d.ts
+/** The quiet sentence-case heading over a section (Sessions, Activity, Devices). */
+export declare function SectionLabel({ style, children, ...props }: TextProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=SectionLabel.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionLabel.d.mts","names":[],"sources":["../../src/components/SectionLabel.tsx"],"mappings":";;;wBAuBgB,eAAe,OAAO,aAAa,SAAS,4BAAS,IAAA"}

package/dist/components/SectionLabel.mjs

@@ -0,0 +1,40 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { StyleSheet } from "react-native-unistyles";
+import { Text } from "react-native-unistyles/components/native/Text";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SectionLabel.tsx
+function raiseFirst(text) {
+	return text.charAt(0).toUpperCase() + text.slice(1);
+}
+/**
+* Native Text has no `first-letter`, so the label is raised to sentence case
+* here: a lone string, or the leading string of mixed children such as
+* `size {size}`.
+*/
+function sentenceCase(children) {
+	if (typeof children === "string") return raiseFirst(children);
+	if (Array.isArray(children) && typeof children[0] === "string") return [raiseFirst(children[0]), ...children.slice(1)];
+	return children;
+}
+/** The quiet sentence-case heading over a section (Sessions, Activity, Devices). */
+function SectionLabel({ style, children, ...props }) {
+	return /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "header",
+		style: [styles.label, style],
+		...props,
+		children: sentenceCase(children)
+	});
+}
+const styles = StyleSheet.create((theme) => ({ label: {
+	color: theme.colors.dim,
+	fontFamily: fontOf(theme.fontFamily.sans),
+	fontSize: theme.fontSize.sm,
+	lineHeight: theme.lineHeight.sm,
+	fontWeight: theme.fontWeight.semibold,
+	uni__dependencies: [0]
+} }));
+
+//#endregion
+export { SectionLabel };
+//# sourceMappingURL=SectionLabel.mjs.map

package/dist/components/SectionLabel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionLabel.mjs","names":["TextProps","StyleSheet","fontOf","raiseFirst","text","charAt","toUpperCase","slice","sentenceCase","children","Array","isArray","SectionLabel","style","props","styles","label","create","theme","color","colors","dim","fontFamily","sans","fontSize","sm","lineHeight","fontWeight","semibold","uni__dependencies"],"sources":["../../src/components/SectionLabel.tsx"],"sourcesContent":["import { Text, type TextProps } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\n\nfunction raiseFirst(text: string): string {\n  return text.charAt(0).toUpperCase() + text.slice(1);\n}\n\n/**\n * Native Text has no `first-letter`, so the label is raised to sentence case\n * here: a lone string, or the leading string of mixed children such as\n * `size {size}`.\n */\nfunction sentenceCase(children: TextProps['children']): TextProps['children'] {\n  if (typeof children === 'string') return raiseFirst(children);\n  if (Array.isArray(children) && typeof children[0] === 'string') {\n    return [raiseFirst(children[0]), ...children.slice(1)];\n  }\n  return children;\n}\n\n/** The quiet sentence-case heading over a section (Sessions, Activity, Devices). */\nexport function SectionLabel({ style, children, ...props }: TextProps) {\n  return (\n    <Text accessibilityRole=\"header\" style={[styles.label, style]} {...props}>\n      {sentenceCase(children)}\n    </Text>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  label: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeight.sm,\n    fontWeight: theme.fontWeight.semibold,\n  },\n}));\n"],"mappings":";;;;;;AAKA,SAASG,WAAWC,MAAsB;CACxC,OAAOA,KAAKC,OAAO,CAAC,CAAC,CAACC,YAAY,IAAIF,KAAKG,MAAM,CAAC;AACpD;;;;;;AAOA,SAASC,aAAaC,UAAwD;CAC5E,IAAI,OAAOA,aAAa,UAAU,OAAON,WAAWM,QAAQ;CAC5D,IAAIC,MAAMC,QAAQF,QAAQ,KAAK,OAAOA,SAAS,OAAO,UACpD,OAAO,CAACN,WAAWM,SAAS,EAAE,GAAG,GAAGA,SAASF,MAAM,CAAC,CAAC;CAEvD,OAAOE;AACT;;AAGA,SAAgBG,aAAa,EAAEC,OAAOJ,UAAU,GAAGK,SAAoB;CACrE,OACE,oBAAC,MAAD;EAAM,mBAAkB;EAAS,OAAO,CAACC,OAAOC,OAAOH,KAAK;EAAG,GAAIC;YAChEN,aAAaC,QAAQ;CAClB;AAEV;AAEA,MAAMM,SAASd,WAAWgB,QAAQC,WAAW,EAC3CF,OAAO;CACLG,OAAOD,MAAME,OAAOC;CACpBC,YAAYpB,OAAOgB,MAAMI,WAAWC,IAAI;CACxCC,UAAUN,MAAMM,SAASC;CACzBC,YAAYR,MAAMQ,WAAWD;CAC7BE,YAAYT,MAAMS,WAAWC;CAAQC,mBAAA,CAAA,CAAA;AACvC,EACF,EAAE"}

package/dist/components/SegmentedControl.d.mts

@@ -0,0 +1,26 @@
+import { StyleProp, ViewStyle } from "react-native";
+//#region src/components/SegmentedControl.d.ts
+export interface SegmentedControlOption {
+  value: string;
+  label: string;
+}
+export interface SegmentedControlProps {
+  /** The segments, in order. */
+  options: readonly SegmentedControlOption[];
+  /** The selected option's value. */
+  value: string;
+  onValueChange: (value: string) => void;
+  disabled?: boolean;
+  /** What the control is for, such as "Status". */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+/**
+ * A short exclusive choice, such as a task's status: the platform's own
+ * segmented control on iOS, the library's drawn fallback elsewhere, with a
+ * selection tick on each change. It is the native stand-in for a web Select
+ * with a handful of options.
+ */
+export declare function SegmentedControl({ options, value, onValueChange, disabled, accessibilityLabel, style }: SegmentedControlProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=SegmentedControl.d.mts.map