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

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.mts","names":[],"sources":["../../src/components/CodeBlock.tsx"],"mappings":";iBA4BiB;;EAEf;;EAEA;;wBAGc,YAAY,MAAM,YAAY,iCAAc,IAAA"}
+{"version":3,"file":"CodeBlock.d.mts","names":[],"sources":["../../src/components/CodeBlock.tsx"],"mappings":";iBAciB;;EAEf;;EAEA;;wBAGc,YAAY,MAAM,YAAY,iCAAc,IAAA"}

package/dist/components/CodeBlock.mjs

@@ -1,30 +1,13 @@
 import { fontOf } from "../lib/fonts.mjs";
-import { Button } from "./Button.mjs";
-import { CheckIcon, CopyIcon } from "../icons/icons.mjs";
+import { CopyButton } from "./CopyButton.mjs";
 import { View } from "react-native-unistyles/components/native/View";
 import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
-import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollView } from "react-native-unistyles/components/native/ScrollView";
-import { setStringAsync } from "expo-clipboard";
 
 //#region src/components/CodeBlock.tsx
-/** How long the control stays acknowledged before returning to its icon. */
-const FEEDBACK_MS = 1500;
-const LABELS = {
-	idle: "copy",
-	copied: "copied",
-	failed: "copying failed"
-};
 function CodeBlock({ text, language }) {
-	const [state, setState] = useState("idle");
-	useEffect(() => {
-		if (state === "idle") return void 0;
-		const timer = setTimeout(() => setState("idle"), FEEDBACK_MS);
-		return () => clearTimeout(timer);
-	}, [state]);
-	const label = LABELS[state];
 	return /* @__PURE__ */ jsxs(View, {
 		style: styles.block,
 		accessibilityLabel: language === void 0 ? void 0 : `${language} code`,
@@ -37,21 +20,9 @@ function CodeBlock({ text, language }) {
 				style: styles.code,
 				children: text
 			})
-		}), /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			size: "icon",
-			accessibilityLabel: label,
-			onPress: () => {
-				setStringAsync(text).then((saved) => setState(saved ? "copied" : "failed"), () => setState("failed"));
-			},
-			style: styles.copy,
-			children: state === "copied" ? /* @__PURE__ */ jsx(CheckIcon, {
-				size: 12,
-				color: "green"
-			}) : /* @__PURE__ */ jsx(CopyIcon, {
-				size: 12,
-				color: "faint"
-			})
+		}), /* @__PURE__ */ jsx(CopyButton, {
+			text,
+			style: styles.copy
 		})]
 	});
 }

package/dist/components/CodeBlock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.mjs","names":["setStringAsync","useEffect","useState","StyleSheet","CheckIcon","CopyIcon","fontOf","Button","FEEDBACK_MS","CopyState","LABELS","Readonly","Record","idle","copied","failed","CodeBlockProps","text","language","CodeBlock","state","setState","undefined","timer","setTimeout","clearTimeout","label","styles","block","scroll","code","then","saved","copy","create","theme","borderRadius","DEFAULT","borderWidth","borderColor","colors","border","backgroundColor","deep","uni__dependencies","padding","spacing","paddingRight","color","fontFamily","mono","fontSize","sm","lineHeight","lineHeightRelaxed","position","top","right"],"sources":["../../src/components/CodeBlock.tsx"],"sourcesContent":["import { setStringAsync } from 'expo-clipboard';\nimport { useEffect, useState } from 'react';\nimport { ScrollView, Text, View } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { CheckIcon, CopyIcon } from '../icons/icons';\nimport { fontOf } from '../lib/fonts';\nimport { Button } from './Button';\n\n/*\n * A fenced code block: the source in selectable mono type that scrolls\n * sideways rather than wrapping, and a copy button that says when it worked.\n *\n * ponytail: no syntax colouring and no mermaid diagrams yet; a mermaid fence\n * shows its source, which is still the whole content.\n */\n\n/** How long the control stays acknowledged before returning to its icon. */\nconst FEEDBACK_MS = 1500;\n\ntype CopyState = 'idle' | 'copied' | 'failed';\n\nconst LABELS: Readonly<Record<CopyState, string>> = {\n  idle: 'copy',\n  copied: 'copied',\n  failed: 'copying failed',\n};\n\nexport interface CodeBlockProps {\n  /** The block's source, without the fence lines. */\n  text: string;\n  /** The fence's language word, such as `ts`; the web reads it from a `language-*` class. */\n  language?: string;\n}\n\nexport function CodeBlock({ text, language }: CodeBlockProps) {\n  const [state, setState] = useState<CopyState>('idle');\n\n  useEffect(() => {\n    if (state === 'idle') return undefined;\n    const timer = setTimeout(() => setState('idle'), FEEDBACK_MS);\n    return () => clearTimeout(timer);\n  }, [state]);\n\n  const label = LABELS[state];\n  return (\n    <View style={styles.block} accessibilityLabel={language === undefined ? undefined : `${language} code`}>\n      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scroll}>\n        <Text selectable style={styles.code}>\n          {text}\n        </Text>\n      </ScrollView>\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        accessibilityLabel={label}\n        onPress={() => {\n          setStringAsync(text).then(\n            (saved) => setState(saved ? 'copied' : 'failed'),\n            () => setState('failed'),\n          );\n        }}\n        style={styles.copy}\n      >\n        {state === 'copied' ? <CheckIcon size={12} color=\"green\" /> : <CopyIcon size={12} color=\"faint\" />}\n      </Button>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  block: {\n    borderRadius: theme.borderRadius.DEFAULT,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    backgroundColor: theme.colors.deep,\n  },\n  // The right padding keeps the first line clear of the copy button.\n  scroll: { padding: theme.spacing(2.5), paddingRight: theme.spacing(9) },\n  code: {\n    color: theme.colors.text,\n    fontFamily: fontOf(theme.fontFamily.mono),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeightRelaxed.sm,\n  },\n  copy: { position: 'absolute', top: theme.spacing(1.5), right: theme.spacing(1.5) },\n}));\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAMQ,cAAc;AAIpB,MAAME,SAA8C;CAClDG,MAAM;CACNC,QAAQ;CACRC,QAAQ;AACV;AASA,SAAgBI,UAAU,EAAEF,MAAMC,YAA4B;CAC5D,MAAM,CAACE,OAAOC,YAAYnB,SAAoB,MAAM;CAEpDD,gBAAgB;EACd,IAAImB,UAAU,QAAQ,OAAOE;EAC7B,MAAMC,QAAQC,iBAAiBH,SAAS,MAAM,GAAGb,WAAW;EAC5D,aAAaiB,aAAaF,KAAK;CACjC,GAAG,CAACH,KAAK,CAAC;CAEV,MAAMM,QAAQhB,OAAOU;CACrB,OACE,qBAAC,MAAD;EAAM,OAAOO,OAAOC;EAAO,oBAAoBV,aAAaI,SAAYA,SAAY,GAAGJ,SAAQ;YAA/F,CACE,oBAAC,YAAD;GAAY;GAAW,gCAAgC;GAAO,uBAAuBS,OAAOE;aAC1F,oBAAC,MAAD;IAAM;IAAW,OAAOF,OAAOG;cAC5Bb;GACG;EACI,IACZ,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,oBAAoBS;GACpB,eAAe;IACb1B,eAAeiB,IAAI,CAAC,CAACc,MAClBC,UAAUX,SAASW,QAAQ,WAAW,QAAQ,SACzCX,SAAS,QAAQ,CACzB;GACF;GACA,OAAOM,OAAOM;aAEbb,UAAU,WAAW,oBAAC,WAAD;IAAW,MAAM;IAAI,OAAM;GAAO,KAAM,oBAAC,UAAD;IAAU,MAAM;IAAI,OAAM;GAAO;EACzF,EACJ;;AAEV;AAEA,MAAMO,SAASxB,WAAW+B,QAAQC,WAAW;CAC3CP,OAAO;EACLQ,cAAcD,MAAMC,aAAaC;EACjCC,aAAa;EACbC,aAAaJ,MAAMK,OAAOC;EAC1BC,iBAAiBP,MAAMK,OAAOG;EAAIC,mBAAA,CAAA,CAAA;CACpC;CAEAf,QAAQ;EAAEgB,SAASV,MAAMW,QAAQ,GAAG;EAAGC,cAAcZ,MAAMW,QAAQ,CAAC;EAACF,mBAAA,CAAA,CAAA;CAAC;CACtEd,MAAM;EACJkB,OAAOb,MAAMK,OAAOvB;EACpBgC,YAAY3C,OAAO6B,MAAMc,WAAWC,IAAI;EACxCC,UAAUhB,MAAMgB,SAASC;EACzBC,YAAYlB,MAAMmB,kBAAkBF;EAAER,mBAAA,CAAA,CAAA;CACxC;CACAX,MAAM;EAAEsB,UAAU;EAAYC,KAAKrB,MAAMW,QAAQ,GAAG;EAAGW,OAAOtB,MAAMW,QAAQ,GAAG;EAACF,mBAAA,CAAA,CAAA;CAAC;AACnF,EAAE"}
+{"version":3,"file":"CodeBlock.mjs","names":["StyleSheet","fontOf","CopyButton","CodeBlockProps","text","language","CodeBlock","styles","block","undefined","scroll","code","copy","create","theme","borderRadius","DEFAULT","borderWidth","borderColor","colors","border","backgroundColor","deep","uni__dependencies","padding","spacing","paddingRight","color","fontFamily","mono","fontSize","sm","lineHeight","lineHeightRelaxed","position","top","right"],"sources":["../../src/components/CodeBlock.tsx"],"sourcesContent":["import { ScrollView, Text, View } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { CopyButton } from './CopyButton';\n\n/*\n * A fenced code block: the source in selectable mono type that scrolls\n * sideways rather than wrapping, and a copy button that says when it worked.\n *\n * ponytail: no syntax colouring and no mermaid diagrams yet; a mermaid fence\n * shows its source, which is still the whole content.\n */\n\nexport interface CodeBlockProps {\n  /** The block's source, without the fence lines. */\n  text: string;\n  /** The fence's language word, such as `ts`; the web reads it from a `language-*` class. */\n  language?: string;\n}\n\nexport function CodeBlock({ text, language }: CodeBlockProps) {\n  return (\n    <View style={styles.block} accessibilityLabel={language === undefined ? undefined : `${language} code`}>\n      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scroll}>\n        <Text selectable style={styles.code}>\n          {text}\n        </Text>\n      </ScrollView>\n      <CopyButton text={text} style={styles.copy} />\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  block: {\n    borderRadius: theme.borderRadius.DEFAULT,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    backgroundColor: theme.colors.deep,\n  },\n  // The right padding keeps the first line clear of the copy button.\n  scroll: { padding: theme.spacing(2.5), paddingRight: theme.spacing(9) },\n  code: {\n    color: theme.colors.text,\n    fontFamily: fontOf(theme.fontFamily.mono),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeightRelaxed.sm,\n  },\n  copy: { position: 'absolute', top: theme.spacing(1.5), right: theme.spacing(1.5) },\n}));\n"],"mappings":";;;;;;;;;AAqBA,SAAgBM,UAAU,EAAEF,MAAMC,YAA4B;CAC5D,OACE,qBAAC,MAAD;EAAM,OAAOE,OAAOC;EAAO,oBAAoBH,aAAaI,SAAYA,SAAY,GAAGJ,SAAQ;YAA/F,CACE,oBAAC,YAAD;GAAY;GAAW,gCAAgC;GAAO,uBAAuBE,OAAOG;aAC1F,oBAAC,MAAD;IAAM;IAAW,OAAOH,OAAOI;cAC5BP;GACG;EACI,IACZ,oBAAC,YAAD;GAAkBA;GAAM,OAAOG,OAAOK;EAAK,EACvC;;AAEV;AAEA,MAAML,SAASP,WAAWa,QAAQC,WAAW;CAC3CN,OAAO;EACLO,cAAcD,MAAMC,aAAaC;EACjCC,aAAa;EACbC,aAAaJ,MAAMK,OAAOC;EAC1BC,iBAAiBP,MAAMK,OAAOG;EAAIC,mBAAA,CAAA,CAAA;CACpC;CAEAb,QAAQ;EAAEc,SAASV,MAAMW,QAAQ,GAAG;EAAGC,cAAcZ,MAAMW,QAAQ,CAAC;EAACF,mBAAA,CAAA,CAAA;CAAC;CACtEZ,MAAM;EACJgB,OAAOb,MAAMK,OAAOf;EACpBwB,YAAY3B,OAAOa,MAAMc,WAAWC,IAAI;EACxCC,UAAUhB,MAAMgB,SAASC;EACzBC,YAAYlB,MAAMmB,kBAAkBF;EAAER,mBAAA,CAAA,CAAA;CACxC;CACAX,MAAM;EAAEsB,UAAU;EAAYC,KAAKrB,MAAMW,QAAQ,GAAG;EAAGW,OAAOtB,MAAMW,QAAQ,GAAG;EAACF,mBAAA,CAAA,CAAA;CAAC;AACnF,EAAE"}

package/dist/components/CopyButton.d.mts

@@ -0,0 +1,13 @@
+import { StyleProp, ViewStyle } from "react-native";
+//#region src/components/CopyButton.d.ts
+export interface CopyButtonProps {
+  /** The text the press puts on the clipboard. */
+  text: string;
+  /** What is copied, announced before the state, such as `path`. */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+}
+/** A quiet icon button that copies text and says, briefly, whether it worked. */
+export declare function CopyButton({ text, label, style }: CopyButtonProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=CopyButton.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.mts","names":[],"sources":["../../src/components/CopyButton.tsx"],"mappings":";;iBAkBiB;;EAEf;;EAEA;EACA,QAAQ,UAAU;;;wBAIJ,aAAa,MAAM,OAAO,SAAS,kCAAe,IAAA"}

package/dist/components/CopyButton.mjs

@@ -0,0 +1,43 @@
+import { Button } from "./Button.mjs";
+import { CheckIcon, CopyIcon } from "../icons/icons.mjs";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { setStringAsync } from "expo-clipboard";
+
+//#region src/components/CopyButton.tsx
+/** How long the control stays acknowledged before returning to its icon. */
+const FEEDBACK_MS = 1500;
+const LABELS = {
+	idle: "copy",
+	copied: "copied",
+	failed: "copying failed"
+};
+/** A quiet icon button that copies text and says, briefly, whether it worked. */
+function CopyButton({ text, label, style }) {
+	const [state, setState] = useState("idle");
+	useEffect(() => {
+		if (state === "idle") return void 0;
+		const timer = setTimeout(() => setState("idle"), FEEDBACK_MS);
+		return () => clearTimeout(timer);
+	}, [state]);
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		accessibilityLabel: label === void 0 ? LABELS[state] : `${LABELS[state]} ${label}`,
+		onPress: () => {
+			setStringAsync(text).then((saved) => setState(saved ? "copied" : "failed"), () => setState("failed"));
+		},
+		style,
+		children: state === "copied" ? /* @__PURE__ */ jsx(CheckIcon, {
+			size: 12,
+			color: "green"
+		}) : /* @__PURE__ */ jsx(CopyIcon, {
+			size: 12,
+			color: "faint"
+		})
+	});
+}
+
+//#endregion
+export { CopyButton };
+//# sourceMappingURL=CopyButton.mjs.map

package/dist/components/CopyButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.mjs","names":["setStringAsync","useEffect","useState","StyleProp","ViewStyle","CheckIcon","CopyIcon","Button","FEEDBACK_MS","CopyState","LABELS","Readonly","Record","idle","copied","failed","CopyButtonProps","text","label","style","CopyButton","state","setState","undefined","timer","setTimeout","clearTimeout","then","saved"],"sources":["../../src/components/CopyButton.tsx"],"sourcesContent":["import { setStringAsync } from 'expo-clipboard';\nimport { useEffect, useState } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { CheckIcon, CopyIcon } from '../icons/icons';\nimport { Button } from './Button';\n\n/** How long the control stays acknowledged before returning to its icon. */\nconst FEEDBACK_MS = 1500;\n\ntype CopyState = 'idle' | 'copied' | 'failed';\n\nconst LABELS: Readonly<Record<CopyState, string>> = {\n  idle: 'copy',\n  copied: 'copied',\n  failed: 'copying failed',\n};\n\nexport interface CopyButtonProps {\n  /** The text the press puts on the clipboard. */\n  text: string;\n  /** What is copied, announced before the state, such as `path`. */\n  label?: string;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** A quiet icon button that copies text and says, briefly, whether it worked. */\nexport function CopyButton({ text, label, style }: CopyButtonProps) {\n  const [state, setState] = useState<CopyState>('idle');\n\n  useEffect(() => {\n    if (state === 'idle') return undefined;\n    const timer = setTimeout(() => setState('idle'), FEEDBACK_MS);\n    return () => clearTimeout(timer);\n  }, [state]);\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      accessibilityLabel={label === undefined ? LABELS[state] : `${LABELS[state]} ${label}`}\n      onPress={() => {\n        setStringAsync(text).then(\n          (saved) => setState(saved ? 'copied' : 'failed'),\n          () => setState('failed'),\n        );\n      }}\n      style={style}\n    >\n      {state === 'copied' ? <CheckIcon size={12} color=\"green\" /> : <CopyIcon size={12} color=\"faint\" />}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,MAAMQ,cAAc;AAIpB,MAAME,SAA8C;CAClDG,MAAM;CACNC,QAAQ;CACRC,QAAQ;AACV;;AAWA,SAAgBK,WAAW,EAAEH,MAAMC,OAAOC,SAA0B;CAClE,MAAM,CAACE,OAAOC,YAAYpB,SAAoB,MAAM;CAEpDD,gBAAgB;EACd,IAAIoB,UAAU,QAAQ,OAAOE;EAC7B,MAAMC,QAAQC,iBAAiBH,SAAS,MAAM,GAAGd,WAAW;EAC5D,aAAakB,aAAaF,KAAK;CACjC,GAAG,CAACH,KAAK,CAAC;CAEV,OACE,oBAAC,QAAD;EACE,SAAQ;EACR,MAAK;EACL,oBAAoBH,UAAUK,SAAYb,OAAOW,SAAS,GAAGX,OAAOW,OAAM,GAAIH;EAC9E,eAAe;GACblB,eAAeiB,IAAI,CAAC,CAACU,MAClBC,UAAUN,SAASM,QAAQ,WAAW,QAAQ,SACzCN,SAAS,QAAQ,CACzB;EACF;EACOH;YAENE,UAAU,WAAW,oBAAC,WAAD;GAAW,MAAM;GAAI,OAAM;EAAO,KAAM,oBAAC,UAAD;GAAU,MAAM;GAAI,OAAM;EAAO;CACzF;AAEZ"}

package/dist/components/HashlineLines.d.mts

@@ -0,0 +1,13 @@
+import { PresentedLine } from "@agimon-ai/po-web-components/text";
+import { ViewProps } from "react-native";
+//#region src/components/HashlineLines.d.ts
+export interface HashlineLinesProps extends Omit<ViewProps, 'children'> {
+  lines: readonly PresentedLine[];
+  /** Width of the line-number column, in characters, from `hashlineBody`. */
+  gutter: number;
+  /** The file a body of bare anchored lines came from, for highlighting. */
+  path?: string | undefined;
+}
+export declare function HashlineLines({ lines, gutter, path, style, ...props }: HashlineLinesProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=HashlineLines.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HashlineLines.d.mts","names":[],"sources":["../../src/components/HashlineLines.tsx"],"mappings":";;;iBA0BiB,2BAA2B,KAAK;EAC/C,gBAAgB;;EAEhB;;EAEA;;wBAsCc,gBAAgB,OAAO,QAAQ,MAAM,UAAU,SAAS,qCAAkB,IAAA"}

package/dist/components/HashlineLines.mjs

@@ -0,0 +1,137 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { SyntaxLine } from "./SyntaxLine.mjs";
+import { detectGrammar, hashlineGroups, hashlineGroupsKey, highlightToLines } from "@agimon-ai/po-web-components/text";
+import { View } from "react-native-unistyles/components/native/View";
+import { StyleSheet } from "react-native-unistyles";
+import { Text } from "react-native-unistyles/components/native/Text";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/HashlineLines.tsx
+const NO_SPANS = /* @__PURE__ */ new Map();
+/** Spans per presented-line index, kept with the body they belong to, as the web's hook. */
+function useHashlineSpans(lines, path) {
+	const groups = useMemo(() => hashlineGroups(lines, path), [lines, path]);
+	const key = hashlineGroupsKey(groups);
+	const [done, setDone] = useState();
+	useEffect(() => {
+		let live = true;
+		const next = /* @__PURE__ */ new Map();
+		const work = groups.map(async (group) => {
+			const grammar = detectGrammar({
+				path: group.path,
+				text: group.text
+			});
+			if (grammar === void 0) return;
+			const highlighted = await highlightToLines(group.text, grammar);
+			if (highlighted === void 0) return;
+			for (const [offset, index] of group.indices.entries()) {
+				const line = highlighted[offset];
+				if (line !== void 0) next.set(index, line);
+			}
+		});
+		Promise.allSettled(work).then(() => {
+			if (live && next.size > 0) setDone({
+				key,
+				spans: next
+			});
+		});
+		return () => {
+			live = false;
+		};
+	}, [key]);
+	return done?.key === key ? done.spans : NO_SPANS;
+}
+function HashlineLines({ lines, gutter, path, style, ...props }) {
+	const spans = useHashlineSpans(lines, path);
+	return /* @__PURE__ */ jsx(View, {
+		style,
+		...props,
+		children: lines.map((line, index) => {
+			if (line.type === "file") return /* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
+				style: [
+					styles.mono,
+					styles.faint,
+					index > 0 && styles.fileGap
+				],
+				children: line.path
+			}, index);
+			if (line.type === "plain") return /* @__PURE__ */ jsx(Text, {
+				selectable: true,
+				style: [styles.mono, styles.dim],
+				children: line.text
+			}, index);
+			const { value } = line;
+			const match = value.marker === "match";
+			return /* @__PURE__ */ jsxs(View, {
+				style: styles.row,
+				children: [
+					value.marker !== void 0 ? /* @__PURE__ */ jsx(Text, {
+						style: [styles.mono, match ? styles.marker : styles.faint],
+						children: match ? ">>" : "  "
+					}) : null,
+					/* @__PURE__ */ jsx(Text, {
+						style: [styles.mono, styles.faint],
+						children: String(value.line).padStart(gutter)
+					}),
+					/* @__PURE__ */ jsx(SyntaxLine, {
+						selectable: true,
+						spans: spans.get(index),
+						text: value.content,
+						style: [
+							styles.mono,
+							styles.content,
+							match ? styles.hi : styles.text
+						]
+					})
+				]
+			}, index);
+		})
+	});
+}
+const styles = StyleSheet.create((theme) => ({
+	row: {
+		flexDirection: "row",
+		gap: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	fileGap: {
+		marginTop: theme.spacing(1),
+		uni__dependencies: [0]
+	},
+	mono: {
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeightRelaxed.sm,
+		uni__dependencies: [0]
+	},
+	content: {
+		flex: 1,
+		minWidth: 0
+	},
+	marker: {
+		color: theme.colors.blue,
+		uni__dependencies: [0]
+	},
+	faint: {
+		color: theme.colors.faint,
+		uni__dependencies: [0]
+	},
+	dim: {
+		color: theme.colors.dim,
+		uni__dependencies: [0]
+	},
+	text: {
+		color: theme.colors.text,
+		uni__dependencies: [0]
+	},
+	hi: {
+		color: theme.colors.hi,
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { HashlineLines };
+//# sourceMappingURL=HashlineLines.mjs.map

package/dist/components/HashlineLines.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HashlineLines.mjs","names":["detectGrammar","hashlineGroups","hashlineGroupsKey","highlightToLines","PresentedLine","SyntaxSpan","useEffect","useMemo","useState","ViewProps","StyleSheet","fontOf","SyntaxLine","HashlineLinesProps","Omit","lines","gutter","path","NO_SPANS","ReadonlyMap","Map","useHashlineSpans","groups","key","done","setDone","spans","live","next","work","map","group","grammar","text","undefined","highlighted","offset","index","indices","entries","line","set","Promise","allSettled","then","size","HashlineLines","style","props","type","styles","mono","faint","fileGap","dim","value","match","marker","row","String","padStart","get","content","hi","create","theme","flexDirection","gap","spacing","uni__dependencies","marginTop","fontFamily","fontSize","sm","lineHeight","lineHeightRelaxed","flex","minWidth","color","colors","blue"],"sources":["../../src/components/HashlineLines.tsx"],"sourcesContent":["import {\n  detectGrammar,\n  hashlineGroups,\n  hashlineGroupsKey,\n  highlightToLines,\n  type PresentedLine,\n  type SyntaxSpan,\n} from '@agimon-ai/po-web-components/text';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Text, View, type ViewProps } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { SyntaxLine } from './SyntaxLine';\n\n/*\n * The anchored body shared by hashline results, as the web's HashlineLines: a\n * file heading per group, a right-aligned line-number gutter, and a `>>`\n * marker on grep matches. Mono type makes a padded number the gutter, so the\n * column needs no measuring.\n *\n * The anchored lines are coloured with the web's grammars and palette when the\n * body names a file, or when `path` names one. Colour arrives late and never\n * blocks the text: an unhighlighted body is the same body without the colours.\n */\n\nexport interface HashlineLinesProps extends Omit<ViewProps, 'children'> {\n  lines: readonly PresentedLine[];\n  /** Width of the line-number column, in characters, from `hashlineBody`. */\n  gutter: number;\n  /** The file a body of bare anchored lines came from, for highlighting. */\n  path?: string | undefined;\n}\n\nconst NO_SPANS: ReadonlyMap<number, readonly SyntaxSpan[]> = new Map();\n\n/** Spans per presented-line index, kept with the body they belong to, as the web's hook. */\nfunction useHashlineSpans(lines: readonly PresentedLine[], path: string | undefined) {\n  const groups = useMemo(() => hashlineGroups(lines, path), [lines, path]);\n  const key = hashlineGroupsKey(groups);\n  const [done, setDone] = useState<{ key: string; spans: ReadonlyMap<number, readonly SyntaxSpan[]> }>();\n\n  useEffect(() => {\n    let live = true;\n    const next = new Map<number, readonly SyntaxSpan[]>();\n    const work = groups.map(async (group) => {\n      const grammar = detectGrammar({ path: group.path, text: group.text });\n      if (grammar === undefined) return;\n      const highlighted = await highlightToLines(group.text, grammar);\n      if (highlighted === undefined) return;\n      for (const [offset, index] of group.indices.entries()) {\n        const line = highlighted[offset];\n        if (line !== undefined) next.set(index, line);\n      }\n    });\n    // A grammar that fails to load leaves its run plain: colour is decoration.\n    void Promise.allSettled(work).then(() => {\n      if (live && next.size > 0) setDone({ key, spans: next });\n    });\n    return () => {\n      live = false;\n    };\n    // The groups are rebuilt with the lines; their key is what actually changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key]);\n\n  return done?.key === key ? done.spans : NO_SPANS;\n}\n\nexport function HashlineLines({ lines, gutter, path, style, ...props }: HashlineLinesProps) {\n  const spans = useHashlineSpans(lines, path);\n  return (\n    <View style={style} {...props}>\n      {lines.map((line, index) => {\n        if (line.type === 'file') {\n          return (\n            <Text key={index} numberOfLines={1} style={[styles.mono, styles.faint, index > 0 && styles.fileGap]}>\n              {line.path}\n            </Text>\n          );\n        }\n        if (line.type === 'plain') {\n          return (\n            <Text key={index} selectable style={[styles.mono, styles.dim]}>\n              {line.text}\n            </Text>\n          );\n        }\n        const { value } = line;\n        const match = value.marker === 'match';\n        return (\n          <View key={index} style={styles.row}>\n            {value.marker !== undefined ? (\n              <Text style={[styles.mono, match ? styles.marker : styles.faint]}>{match ? '>>' : '  '}</Text>\n            ) : null}\n            <Text style={[styles.mono, styles.faint]}>{String(value.line).padStart(gutter)}</Text>\n            <SyntaxLine\n              selectable\n              spans={spans.get(index)}\n              text={value.content}\n              style={[styles.mono, styles.content, match ? styles.hi : styles.text]}\n            />\n          </View>\n        );\n      })}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  row: { flexDirection: 'row', gap: theme.spacing(2) },\n  fileGap: { marginTop: theme.spacing(1) },\n  mono: {\n    fontFamily: fontOf(theme.fontFamily.mono),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeightRelaxed.sm,\n  },\n  content: { flex: 1, minWidth: 0 },\n  marker: { color: theme.colors.blue },\n  faint: { color: theme.colors.faint },\n  dim: { color: theme.colors.dim },\n  text: { color: theme.colors.text },\n  hi: { color: theme.colors.hi },\n}));\n"],"mappings":"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"}

package/dist/components/Markdown.d.mts

@@ -5,11 +5,18 @@
  * contract as the web Markdown's handler.
  */
 export type FileLinkHandler = (text: string, explicit?: boolean) => (() => void) | undefined;
+/** Loads a relative image path from the host; the same contract as the web Markdown's `loadImage`. */
+export type MarkdownImageLoader = (path: string) => Promise<{
+  url: string;
+  dispose(): void;
+}>;
 export interface MarkdownProps {
   text: string;
   onFileLink?: FileLinkHandler;
+  /** Loads relative image paths; without it they show as unavailable. */
+  loadImage?: MarkdownImageLoader;
 }
 /** 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;
+export declare function Markdown({ text, onFileLink, loadImage }: MarkdownProps): import("react").JSX.Element;
 //#endregion
 //# sourceMappingURL=Markdown.d.mts.map

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

@@ -1 +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"}
+{"version":3,"file":"Markdown.d.mts","names":[],"sources":["../../src/components/Markdown.tsx"],"mappings":";;;;;;YAoBY,mBAAmB,cAAc;;YAMjC,uBAAuB,iBAAiB;EAAU;EAAa;;iBA0O1D;EACf;EACA,aAAa;;EAEb,YAAY;;;wBAIE,WAAW,MAAM,YAAY,aAAa,gCAAa,IAAA"}

package/dist/components/Markdown.mjs

@@ -5,13 +5,20 @@ 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 { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollView } from "react-native-unistyles/components/native/ScrollView";
+import { Image } from "react-native-unistyles/components/native/Image";
 
 //#region src/components/Markdown.tsx
 /** Passed by context so the inline renderers stay module functions. */
 const FileLinkContext = createContext(void 0);
+const ImageContext = createContext(void 0);
 const URL_OR_ANCHOR = /^(?:[a-z][a-z\d+.-]*:|\/\/|#|\?)/i;
+/** Sources an Image may load as written; any other scheme stays its alt text. */
+const DIRECT_IMAGE = /^(?:https?:|data:image\/)/i;
+/** Until the image reports its size, it holds a landscape box rather than collapsing. */
+const PLACEHOLDER_RATIO = 16 / 9;
 function decoded(href) {
 	try {
 		return decodeURIComponent(href);
@@ -49,6 +56,72 @@ function InlineLink({ href, children }) {
 		children
 	});
 }
+/** One image: a file path through the host's loader, or a web or data address as written. */
+function MarkdownImage({ src, alt }) {
+	const loader = useContext(ImageContext);
+	const path = URL_OR_ANCHOR.test(src) ? void 0 : decoded(src.split(/[?#]/u, 1)[0]) ?? "";
+	const [loaded, setLoaded] = useState();
+	const [ratio, setRatio] = useState(PLACEHOLDER_RATIO);
+	useEffect(() => {
+		if (loader === void 0 || path === void 0) return;
+		let active = true;
+		let asset;
+		Promise.resolve().then(() => {
+			if (path === "") throw new Error("Invalid image path.");
+			return loader(path);
+		}).then((result) => {
+			if (!active) return result.dispose();
+			asset = result;
+			setLoaded({
+				path,
+				url: result.url
+			});
+		}).catch(() => {
+			if (active) setLoaded({
+				path,
+				failed: true
+			});
+		});
+		return () => {
+			active = false;
+			asset?.dispose();
+		};
+	}, [path, loader]);
+	const current = loaded?.path === path ? loaded : void 0;
+	const uri = path === void 0 ? DIRECT_IMAGE.test(src) ? src : void 0 : current?.url;
+	if (uri === void 0 || current?.failed) {
+		const waiting = path !== void 0 && loader !== void 0 && current === void 0;
+		return /* @__PURE__ */ jsxs(Text, {
+			style: [styles.prose, styles.imageState],
+			accessibilityRole: waiting ? "text" : "alert",
+			children: [
+				alt || path || "Image",
+				" (",
+				waiting ? "loading…" : "unavailable",
+				")"
+			]
+		});
+	}
+	return /* @__PURE__ */ jsx(Image, {
+		source: { uri },
+		accessibilityLabel: alt || "Image",
+		accessibilityIgnoresInvertColors: true,
+		resizeMode: "contain",
+		onLoad: ({ nativeEvent }) => {
+			const fit = (width, height) => {
+				if (width > 0 && height > 0) setRatio(width / height);
+			};
+			const size = nativeEvent?.source;
+			if (size !== void 0) fit(size.width, size.height);
+			else Image.getSize(uri, fit, () => void 0);
+		},
+		onError: () => setLoaded({
+			path: path ?? src,
+			failed: true
+		}),
+		style: [styles.image, { aspectRatio: ratio }]
+	});
+}
 function renderInline(nodes) {
 	return nodes.map((node, index) => {
 		switch (node.type) {
@@ -66,34 +139,84 @@ function renderInline(nodes) {
 				href: node.href,
 				children: renderInline(node.children)
 			}, index);
+			case "image": return node.alt;
 		}
 	});
 }
-function Block({ block, first }) {
+/**
+* A table read column by column: every cell keeps to one line inside the sideways scroll, so each
+* column takes its widest cell and the rows line up without a table layout.
+*/
+function MarkdownTable({ header, rows }) {
+	return /* @__PURE__ */ jsx(ScrollView, {
+		horizontal: true,
+		showsHorizontalScrollIndicator: false,
+		children: /* @__PURE__ */ jsx(View, {
+			style: styles.table,
+			children: header.map((cell, column) => /* @__PURE__ */ jsxs(View, { children: [/* @__PURE__ */ jsx(Text, {
+				style: [
+					styles.prose,
+					styles.cell,
+					styles.headCell
+				],
+				children: renderInline(cell)
+			}), rows.map((row, index) => /* @__PURE__ */ jsx(Text, {
+				style: [styles.prose, styles.cell],
+				children: renderInline(row[column] ?? [])
+			}, index))] }, column))
+		})
+	});
+}
+function Block({ block, first, quoted = false }) {
+	const prose = [styles.prose, quoted && styles.quoted];
 	switch (block.type) {
 		case "heading": return /* @__PURE__ */ jsx(Text, {
 			accessibilityRole: "header",
 			style: [
-				styles.prose,
+				...prose,
 				styles.heading(block.level),
-				first && styles.firstHeading
+				first && styles.firstHeading,
+				quoted && styles.quoted
 			],
 			children: renderInline(block.children)
 		});
-		case "paragraph": return /* @__PURE__ */ jsx(Text, {
-			style: styles.prose,
-			children: renderInline(block.children)
-		});
+		case "paragraph": {
+			const parts = [];
+			let run = [];
+			const flush = () => {
+				if (run.length > 0) parts.push(/* @__PURE__ */ jsx(Text, {
+					style: prose,
+					children: renderInline(run)
+				}, parts.length));
+				run = [];
+			};
+			for (const node of block.children) {
+				if (node.type !== "image") {
+					run.push(node);
+					continue;
+				}
+				flush();
+				parts.push(/* @__PURE__ */ jsx(MarkdownImage, {
+					src: node.src,
+					alt: node.alt
+				}, parts.length));
+			}
+			flush();
+			return parts.length === 1 ? parts[0] : /* @__PURE__ */ jsx(View, {
+				style: styles.root,
+				children: parts
+			});
+		}
 		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],
+					style: [...prose, styles.marker],
 					children: block.ordered ? `${block.start + index}.` : "•"
 				}), /* @__PURE__ */ jsx(Text, {
-					style: [styles.prose, styles.itemText],
+					style: [...prose, styles.itemText],
 					children: renderInline(item)
 				})]
 			}, index))
@@ -106,19 +229,34 @@ function Block({ block, first }) {
 			accessible: false,
 			style: styles.rule
 		});
+		case "quote": return /* @__PURE__ */ jsx(View, {
+			style: [styles.root, styles.quote],
+			children: block.children.map((child, index) => /* @__PURE__ */ jsx(Block, {
+				block: child,
+				first: index === 0,
+				quoted: true
+			}, index))
+		});
+		case "table": return /* @__PURE__ */ jsx(MarkdownTable, {
+			header: block.header,
+			rows: block.rows
+		});
 	}
 }
 /** Markdown in Po's shared presentation, parsed by the package's own small parser. */
-function Markdown({ text, onFileLink }) {
+function Markdown({ text, onFileLink, loadImage }) {
 	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))
+		children: /* @__PURE__ */ jsx(ImageContext.Provider, {
+			value: loadImage,
+			children: /* @__PURE__ */ jsx(View, {
+				style: styles.root,
+				children: blocks.map((block, index) => /* @__PURE__ */ jsx(Block, {
+					block,
+					first: index === 0
+				}, index))
+			})
 		})
 	});
 }
@@ -211,6 +349,49 @@ const styles = StyleSheet.create((theme) => ({
 		height: 1,
 		backgroundColor: theme.colors["border-soft"],
 		uni__dependencies: [0]
+	},
+	quote: {
+		borderLeftWidth: 2,
+		borderLeftColor: theme.colors.border,
+		paddingLeft: theme.spacing(3),
+		uni__dependencies: [0]
+	},
+	quoted: {
+		color: theme.colors.dim,
+		uni__dependencies: [0]
+	},
+	table: {
+		flexDirection: "row",
+		borderTopWidth: 1,
+		borderLeftWidth: 1,
+		borderColor: theme.colors.border,
+		uni__dependencies: [0]
+	},
+	cell: {
+		paddingHorizontal: theme.spacing(2),
+		paddingVertical: theme.spacing(1),
+		borderRightWidth: 1,
+		borderBottomWidth: 1,
+		borderColor: theme.colors.border,
+		uni__dependencies: [0]
+	},
+	headCell: {
+		backgroundColor: theme.colors.deep,
+		fontWeight: theme.fontWeight.semibold,
+		color: theme.colors.hi,
+		uni__dependencies: [0]
+	},
+	image: {
+		width: "100%",
+		maxHeight: 480,
+		borderRadius: theme.borderRadius.md,
+		borderWidth: 1,
+		borderColor: theme.colors.border,
+		uni__dependencies: [0]
+	},
+	imageState: {
+		color: theme.colors.dim,
+		uni__dependencies: [0]
 	}
 }));