@agimon-ai/po-native-components 0.0.0-alpha.7 → 0.0.0-alpha.71

package/dist/components/AnnotationSurface.mjs

@@ -0,0 +1,426 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { selectionTick } from "../lib/haptics.mjs";
+import { View } from "react-native-unistyles/components/native/View";
+import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Pressable } from "react-native-unistyles/components/native/Pressable";
+
+//#region src/components/AnnotationSurface.tsx
+const clamp = (value) => Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
+const MAX_POINTS = 128;
+function Stroke({ points, width, height, highlight = false }) {
+	const thickness = highlight ? 16 : 3;
+	const bounded = points.slice(0, MAX_POINTS);
+	return bounded.map((point, index) => {
+		const previous = bounded[index - 1];
+		if (!previous || ![
+			point.x,
+			point.y,
+			previous.x,
+			previous.y
+		].every(Number.isFinite)) return null;
+		const x = clamp(previous.x) * width;
+		const y = clamp(previous.y) * height;
+		const dx = clamp(point.x) * width - x;
+		const dy = clamp(point.y) * height - y;
+		const length = Math.hypot(dx, dy);
+		return /* @__PURE__ */ jsx(View, { style: [
+			styles.segment,
+			highlight && styles.highlight,
+			{
+				left: x + dx / 2 - length / 2,
+				top: y + dy / 2 - thickness / 2,
+				width: length,
+				transform: [{ rotate: `${Math.atan2(dy, dx)}rad` }]
+			}
+		] }, index);
+	});
+}
+/**
+* Tap to pin a note on whatever it wraps. Each pin is its own 44pt button, so a
+* screen reader can reach every note; the surface's own element sits behind the
+* content, so text and controls inside stay readable, and activating it places a
+* note at its centre.
+*/
+function AnnotationSurface({ children, marks, selectedId, onPlace, onDraw, onSelectMark, accessibilityLabel, zoomable = false, onViewportChange, navigation = false, viewport: controlledViewport, drawingHighlight = false, style }) {
+	const [size, setSize] = useState({
+		width: 0,
+		height: 0
+	});
+	const [viewport, setViewport] = useState({
+		scale: 1,
+		x: 0,
+		y: 0
+	});
+	const transform = useRef(viewport);
+	const pinch = useRef(null);
+	const suppressTap = useRef(false);
+	const pressedPoint = useRef(void 0);
+	const navigating = useRef(false);
+	const reportViewport = (next, dimensions = size) => {
+		onViewportChange?.({
+			...dimensions,
+			zoom: next.scale,
+			originX: dimensions.width * (1 - next.scale) / 2 + next.x,
+			originY: dimensions.height * (1 - next.scale) / 2 + next.y
+		});
+	};
+	const boundViewport = (request, dimensions = size) => {
+		const scale = zoomable && Number.isFinite(request.zoom) ? Math.max(1, Math.min(4, request.zoom)) : 1;
+		const maxX = dimensions.width * (scale - 1) / 2;
+		const maxY = dimensions.height * (scale - 1) / 2;
+		return {
+			scale,
+			x: Math.max(-maxX, Math.min(maxX, (Number.isFinite(request.originX) ? request.originX : 0) + maxX)),
+			y: Math.max(-maxY, Math.min(maxY, (Number.isFinite(request.originY) ? request.originY : 0) + maxY))
+		};
+	};
+	const resetViewport = (dimensions = size) => {
+		pinch.current = null;
+		transform.current = boundViewport(controlledViewport ?? {
+			zoom: 1,
+			originX: 0,
+			originY: 0
+		}, dimensions);
+		setViewport(transform.current);
+		reportViewport(transform.current, dimensions);
+	};
+	useLayoutEffect(() => {
+		const next = boundViewport(controlledViewport ?? {
+			zoom: 1,
+			originX: 0,
+			originY: 0
+		});
+		if (next.scale !== transform.current.scale || Math.abs(next.x - transform.current.x) > 1e-6 || Math.abs(next.y - transform.current.y) > 1e-6) resetViewport();
+	}, [
+		zoomable,
+		controlledViewport?.zoom,
+		controlledViewport?.originX,
+		controlledViewport?.originY
+	]);
+	useLayoutEffect(() => {
+		reportViewport(transform.current);
+	}, [size, onViewportChange]);
+	const sourcePoint = (x, y) => {
+		const current = transform.current;
+		return {
+			x: clamp((x - size.width / 2 - current.x) / current.scale / size.width + .5),
+			y: clamp((y - size.height / 2 - current.y) / current.scale / size.height + .5)
+		};
+	};
+	const moveViewport = (event) => {
+		const { touches } = event.nativeEvent;
+		const [first, second] = touches;
+		const count = touches.length;
+		if (!zoomable || !first || count !== 2 && !(navigation && count === 1) || size.width <= 0 || size.height <= 0) {
+			pinch.current = null;
+			return;
+		}
+		cancel();
+		suppressTap.current = true;
+		const x = second ? (first.pageX + second.pageX) / 2 : first.pageX;
+		const y = second ? (first.pageY + second.pageY) / 2 : first.pageY;
+		const distance = second ? Math.hypot(first.pageX - second.pageX, first.pageY - second.pageY) : 1;
+		if (![
+			x,
+			y,
+			distance
+		].every(Number.isFinite) || distance <= 0) {
+			pinch.current = null;
+			return;
+		}
+		if (!pinch.current || pinch.current.count !== count) {
+			const focalX = Number.isFinite(first.locationX) ? first.locationX + x - first.pageX : x;
+			const focalY = Number.isFinite(first.locationY) ? first.locationY + y - first.pageY : y;
+			pinch.current = {
+				count,
+				focalX,
+				focalY,
+				x,
+				y,
+				distance,
+				scale: transform.current.scale,
+				offsetX: transform.current.x,
+				offsetY: transform.current.y
+			};
+			return;
+		}
+		const start = pinch.current;
+		const scale = Math.max(1, Math.min(4, start.scale * distance / start.distance));
+		const ratio = scale / start.scale;
+		const maxX = size.width * (scale - 1) / 2;
+		const maxY = size.height * (scale - 1) / 2;
+		transform.current = {
+			scale,
+			x: Math.max(-maxX, Math.min(maxX, start.offsetX * ratio + (start.focalX - size.width / 2) * (1 - ratio) + x - start.x)),
+			y: Math.max(-maxY, Math.min(maxY, start.offsetY * ratio + (start.focalY - size.height / 2) * (1 - ratio) + y - start.y))
+		};
+		reportViewport(transform.current);
+		setViewport(transform.current);
+	};
+	const [live, setLive] = useState([]);
+	const stroke = useRef(null);
+	const draw = useRef(onDraw);
+	draw.current = onDraw;
+	const drawing = onDraw !== void 0;
+	const cancel = () => {
+		stroke.current = null;
+		pressedPoint.current = void 0;
+		setLive([]);
+	};
+	useEffect(() => {
+		stroke.current = null;
+		setLive([]);
+		return () => {
+			stroke.current = null;
+		};
+	}, [
+		drawing,
+		navigation,
+		drawingHighlight,
+		controlledViewport?.zoom,
+		controlledViewport?.originX,
+		controlledViewport?.originY
+	]);
+	const append = (event) => {
+		if (!stroke.current || !draw.current) return cancel();
+		const { locationX, locationY, touches } = event.nativeEvent;
+		if (touches.length > 1 || ![
+			locationX,
+			locationY,
+			size.width,
+			size.height
+		].every(Number.isFinite) || size.width <= 0 || size.height <= 0) return cancel();
+		const point = sourcePoint(locationX, locationY);
+		const last = stroke.current[stroke.current.length - 1];
+		if (last?.x === point.x && last.y === point.y) return;
+		if (stroke.current.length < MAX_POINTS) stroke.current.push(point);
+		else stroke.current[127] = point;
+		setLive([...stroke.current]);
+	};
+	const place = (event) => {
+		if (!onPlace || onDraw || navigation || suppressTap.current) return;
+		const { locationX, locationY } = event.nativeEvent;
+		const point = size.width > 0 && size.height > 0 && Number.isFinite(locationX) && Number.isFinite(locationY) ? sourcePoint(locationX, locationY) : pressedPoint.current ?? {
+			x: .5,
+			y: .5
+		};
+		pressedPoint.current = void 0;
+		selectionTick();
+		onPlace(point);
+	};
+	return /* @__PURE__ */ jsxs(View, {
+		style: [
+			styles.frame,
+			zoomable && { overflow: "hidden" },
+			style
+		],
+		onStartShouldSetResponderCapture: (event) => zoomable && (navigation || event.nativeEvent.touches.length > 1),
+		onMoveShouldSetResponderCapture: (event) => zoomable && (navigation || event.nativeEvent.touches.length > 1),
+		onResponderGrant: zoomable ? (event) => {
+			cancel();
+			navigating.current = true;
+			suppressTap.current = true;
+			moveViewport(event);
+		} : void 0,
+		onResponderStart: zoomable ? (event) => {
+			cancel();
+			moveViewport(event);
+		} : void 0,
+		onResponderEnd: zoomable ? (event) => {
+			cancel();
+			moveViewport(event);
+		} : void 0,
+		onResponderMove: zoomable ? moveViewport : void 0,
+		onResponderRelease: zoomable ? () => {
+			navigating.current = false;
+			pinch.current = null;
+		} : void 0,
+		onResponderTerminationRequest: () => true,
+		onResponderTerminate: zoomable ? () => {
+			navigating.current = false;
+			pinch.current = null;
+			cancel();
+		} : void 0,
+		onLayout: (event) => {
+			cancel();
+			const { width, height } = event.nativeEvent.layout;
+			const dimensions = {
+				width: Number.isFinite(width) ? Math.max(0, width) : 0,
+				height: Number.isFinite(height) ? Math.max(0, height) : 0
+			};
+			resetViewport(dimensions);
+			setSize(dimensions);
+		},
+		children: [
+			/* @__PURE__ */ jsx(View, {
+				pointerEvents: "none",
+				style: styles.overlay,
+				accessible: true,
+				accessibilityRole: onPlace && !onDraw ? "button" : "image",
+				accessibilityLabel,
+				accessibilityHint: onPlace && !onDraw ? "Double tap to add a note here. Use the Note on whole image action to mark the whole image." : void 0,
+				accessibilityActions: onPlace ? [...onDraw ? [] : [{ name: "activate" }], {
+					name: "noteWholeImage",
+					label: "Note on whole image"
+				}] : void 0,
+				onAccessibilityAction: (event) => {
+					const { actionName } = event.nativeEvent;
+					if (actionName === "noteWholeImage" || actionName === "activate" && !onDraw) onPlace?.({
+						x: .5,
+						y: .5
+					});
+				}
+			}),
+			/* @__PURE__ */ jsx(Pressable, {
+				accessible: false,
+				disabled: !onPlace || !!onDraw || navigation,
+				onPressIn: (event) => {
+					pressedPoint.current = void 0;
+					if (navigating.current) return;
+					suppressTap.current = false;
+					const { locationX, locationY } = event.nativeEvent;
+					if (size.width > 0 && size.height > 0 && Number.isFinite(locationX) && Number.isFinite(locationY)) pressedPoint.current = sourcePoint(locationX, locationY);
+				},
+				onPress: place,
+				children: /* @__PURE__ */ jsxs(View, {
+					pointerEvents: zoomable && viewport.scale > 1 ? "none" : "auto",
+					style: zoomable ? { transform: [
+						{ translateX: viewport.x },
+						{ translateY: viewport.y },
+						{ scale: viewport.scale }
+					] } : void 0,
+					children: [children, /* @__PURE__ */ jsxs(View, {
+						pointerEvents: "none",
+						accessible: false,
+						style: styles.overlay,
+						children: [marks.map((mark) => mark.points && /* @__PURE__ */ jsx(Stroke, {
+							points: mark.points,
+							width: size.width,
+							height: size.height,
+							highlight: mark.highlight
+						}, mark.id)), onDraw && /* @__PURE__ */ jsx(Stroke, {
+							points: live,
+							width: size.width,
+							height: size.height,
+							highlight: drawingHighlight
+						})]
+					})]
+				})
+			}),
+			onDraw && !navigation && /* @__PURE__ */ jsx(View, {
+				accessible: false,
+				collapsable: false,
+				style: styles.overlay,
+				onStartShouldSetResponder: () => true,
+				onResponderGrant: (event) => {
+					stroke.current = [];
+					append(event);
+				},
+				onResponderStart: (event) => {
+					if (event.nativeEvent.touches.length > 1) cancel();
+				},
+				onResponderMove: append,
+				onResponderRelease: (event) => {
+					append(event);
+					const points = stroke.current;
+					cancel();
+					if (points && points.length >= 2 && points.some((point) => point.x !== points[0].x || point.y !== points[0].y)) draw.current?.(points);
+				},
+				onResponderTerminationRequest: () => true,
+				onResponderTerminate: cancel
+			}),
+			marks.map((mark) => {
+				const selected = mark.id === selectedId;
+				return /* @__PURE__ */ jsx(Pressable, {
+					accessibilityRole: "button",
+					accessibilityLabel: `Note ${mark.label}${mark.description ? `: ${mark.description}` : ""}`,
+					accessibilityState: { selected },
+					onPress: () => onSelectMark?.(mark.id),
+					style: [styles.hit, zoomable ? {
+						left: size.width / 2 + (clamp(mark.x) - .5) * size.width * viewport.scale + viewport.x,
+						top: size.height / 2 + (clamp(mark.y) - .5) * size.height * viewport.scale + viewport.y
+					} : {
+						left: `${clamp(mark.x) * 100}%`,
+						top: `${clamp(mark.y) * 100}%`
+					}],
+					children: /* @__PURE__ */ jsx(View, {
+						style: [styles.pin, selected && styles.pinSelected],
+						children: /* @__PURE__ */ jsx(Text, {
+							style: [styles.label, selected && styles.labelSelected],
+							children: mark.label
+						})
+					})
+				}, mark.id);
+			})
+		]
+	});
+}
+const HIT = 44;
+const PIN = 28;
+const styles = StyleSheet.create((theme) => ({
+	frame: {
+		position: "relative",
+		alignSelf: "stretch"
+	},
+	overlay: {
+		position: "absolute",
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	},
+	segment: {
+		position: "absolute",
+		height: 3,
+		borderRadius: 1.5,
+		backgroundColor: theme.colors.magenta,
+		uni__dependencies: [0]
+	},
+	highlight: {
+		height: 16,
+		borderRadius: 8,
+		opacity: .3
+	},
+	hit: {
+		position: "absolute",
+		width: HIT,
+		height: HIT,
+		marginLeft: -22,
+		marginTop: -22,
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	pin: {
+		width: PIN,
+		height: PIN,
+		borderRadius: PIN / 2,
+		alignItems: "center",
+		justifyContent: "center",
+		borderWidth: 2,
+		borderColor: theme.colors.magenta,
+		backgroundColor: theme.colors.bg,
+		uni__dependencies: [0]
+	},
+	pinSelected: {
+		backgroundColor: theme.colors.magenta,
+		uni__dependencies: [0]
+	},
+	label: {
+		color: theme.colors.magenta,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		fontWeight: theme.fontWeight.semibold,
+		uni__dependencies: [0]
+	},
+	labelSelected: {
+		color: theme.colors.bg,
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { AnnotationSurface };
+//# sourceMappingURL=AnnotationSurface.mjs.map

package/dist/components/AnnotationSurface.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationSurface.mjs","names":["ReactNode","useEffect","useLayoutEffect","useRef","useState","GestureResponderEvent","StyleProp","ViewStyle","StyleSheet","fontOf","selectionTick","AnnotationMark","id","x","y","label","description","points","highlight","AnnotationSurfaceProps","children","marks","selectedId","onPlace","point","onDraw","onSelectMark","accessibilityLabel","zoomable","navigation","viewport","zoom","originX","originY","drawingHighlight","onViewportChange","width","height","style","clamp","value","Number","isFinite","Math","min","max","MAX_POINTS","Point","Stroke","thickness","bounded","slice","map","index","previous","every","dx","dy","length","hypot","styles","segment","left","top","transform","rotate","atan2","AnnotationSurface","controlledViewport","size","setSize","setViewport","scale","pinch","count","focalX","focalY","distance","offsetX","offsetY","suppressTap","pressedPoint","undefined","navigating","reportViewport","next","dimensions","boundViewport","request","NonNullable","maxX","maxY","resetViewport","current","abs","sourcePoint","moveViewport","event","touches","nativeEvent","first","second","cancel","pageX","pageY","locationX","locationY","start","ratio","live","setLive","stroke","draw","drawing","append","last","push","place","known","frame","overflow","layout","overlay","name","actionName","translateX","translateY","mark","some","selected","hit","pin","pinSelected","labelSelected","HIT","PIN","create","theme","position","alignSelf","right","bottom","borderRadius","backgroundColor","colors","magenta","uni__dependencies","opacity","marginLeft","marginTop","alignItems","justifyContent","borderWidth","borderColor","bg","color","fontFamily","sans","fontSize","sm","fontWeight","semibold"],"sources":["../../src/components/AnnotationSurface.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { type GestureResponderEvent, Pressable, type StyleProp, Text, View, type ViewStyle } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { selectionTick } from '../lib/haptics';\n\n/** One note pinned to the content, with an optional stroke, in fractions (0 to 1) of the surface's width and height. */\nexport interface AnnotationMark {\n  id: string;\n  x: number;\n  y: number;\n  /** The short text drawn on the pin, such as \"1\". */\n  label: string;\n  /** What a screen reader announces for the pin, such as the note text. */\n  description?: string;\n  /** Optional normalized freehand stroke. At most 128 finite points are rendered. */\n  points?: readonly { x: number; y: number }[];\n  /** A translucent, thick rose stroke over the content. */\n  highlight?: boolean;\n}\n\nexport interface AnnotationSurfaceProps {\n  /** The content being marked up: an image, a page, a block of text. */\n  children: ReactNode;\n  marks: readonly AnnotationMark[];\n  selectedId?: string;\n  /** A tap places a note there. Without onPlace or onDraw the surface is read-only. */\n  onPlace?: (point: { x: number; y: number }) => void;\n  /** Enables drawing instead of tap placement. Receives 2 to 128 finite [0,1] points only on a completed stroke. */\n  onDraw?: (points: { x: number; y: number }[]) => void;\n  onSelectMark?: (id: string) => void;\n  /** What the content is, such as \"hero.png\". */\n  accessibilityLabel: string;\n  /** Image surfaces can pinch and move with two fingers on both native platforms. */\n  zoomable?: boolean;\n  /** Explicit one-finger pan instead of placing or drawing marks. */\n  navigation?: boolean;\n  /** Controlled transform. Origins are unscaled RN layout positions, not raster pixels. */\n  viewport?: { zoom: number; originX: number; originY: number };\n  /** Render the in-progress stroke as a highlight. */\n  drawingHighlight?: boolean;\n  /** Viewport dimensions and source-layout-to-viewport transform, all in RN layout units, not raster pixels. */\n  onViewportChange?: (viewport: {\n    width: number;\n    height: number;\n    zoom: number;\n    originX: number;\n    originY: number;\n  }) => void;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst clamp = (value: number) => (Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0);\nconst MAX_POINTS = 128;\ntype Point = { x: number; y: number };\n\nfunction Stroke({\n  points,\n  width,\n  height,\n  highlight = false,\n}: {\n  points: readonly Point[];\n  width: number;\n  height: number;\n  highlight?: boolean;\n}) {\n  const thickness = highlight ? 16 : 3;\n  // Slice before processing so even externally supplied strokes have bounded work.\n  const bounded = points.slice(0, MAX_POINTS);\n  return bounded.map((point, index) => {\n    const previous = bounded[index - 1];\n    if (!previous || ![point.x, point.y, previous.x, previous.y].every(Number.isFinite)) return null;\n    const x = clamp(previous.x) * width;\n    const y = clamp(previous.y) * height;\n    const dx = clamp(point.x) * width - x;\n    const dy = clamp(point.y) * height - y;\n    const length = Math.hypot(dx, dy);\n    return (\n      <View\n        key={index}\n        style={[\n          styles.segment,\n          highlight && styles.highlight,\n          {\n            left: x + dx / 2 - length / 2,\n            top: y + dy / 2 - thickness / 2,\n            width: length,\n            transform: [{ rotate: `${Math.atan2(dy, dx)}rad` }],\n          },\n        ]}\n      />\n    );\n  });\n}\n\n/**\n * Tap to pin a note on whatever it wraps. Each pin is its own 44pt button, so a\n * screen reader can reach every note; the surface's own element sits behind the\n * content, so text and controls inside stay readable, and activating it places a\n * note at its centre.\n */\nexport function AnnotationSurface({\n  children,\n  marks,\n  selectedId,\n  onPlace,\n  onDraw,\n  onSelectMark,\n  accessibilityLabel,\n  zoomable = false,\n  onViewportChange,\n  navigation = false,\n  viewport: controlledViewport,\n  drawingHighlight = false,\n  style,\n}: AnnotationSurfaceProps) {\n  const [size, setSize] = useState({ width: 0, height: 0 });\n  const [viewport, setViewport] = useState({ scale: 1, x: 0, y: 0 });\n  const transform = useRef(viewport);\n  const pinch = useRef<{\n    count: number;\n    focalX: number;\n    focalY: number;\n    distance: number;\n    x: number;\n    y: number;\n    scale: number;\n    offsetX: number;\n    offsetY: number;\n  } | null>(null);\n  const suppressTap = useRef(false);\n  const pressedPoint = useRef<Point | undefined>(undefined);\n  const navigating = useRef(false);\n  const reportViewport = (next: typeof viewport, dimensions = size) => {\n    onViewportChange?.({\n      ...dimensions,\n      zoom: next.scale,\n      originX: (dimensions.width * (1 - next.scale)) / 2 + next.x,\n      originY: (dimensions.height * (1 - next.scale)) / 2 + next.y,\n    });\n  };\n  const boundViewport = (request: NonNullable<AnnotationSurfaceProps['viewport']>, dimensions = size) => {\n    const scale = zoomable && Number.isFinite(request.zoom) ? Math.max(1, Math.min(4, request.zoom)) : 1;\n    const maxX = (dimensions.width * (scale - 1)) / 2;\n    const maxY = (dimensions.height * (scale - 1)) / 2;\n    return {\n      scale,\n      x: Math.max(-maxX, Math.min(maxX, (Number.isFinite(request.originX) ? request.originX : 0) + maxX)),\n      y: Math.max(-maxY, Math.min(maxY, (Number.isFinite(request.originY) ? request.originY : 0) + maxY)),\n    };\n  };\n  const resetViewport = (dimensions = size) => {\n    pinch.current = null;\n    transform.current = boundViewport(controlledViewport ?? { zoom: 1, originX: 0, originY: 0 }, dimensions);\n    setViewport(transform.current);\n    reportViewport(transform.current, dimensions);\n  };\n  // Layout effects publish programmatic zoom/Fit/focus before a parent's capture effect.\n  useLayoutEffect(() => {\n    const next = boundViewport(controlledViewport ?? { zoom: 1, originX: 0, originY: 0 });\n    // A controlled parent's gesture echo is not a new navigation command.\n    if (\n      next.scale !== transform.current.scale ||\n      Math.abs(next.x - transform.current.x) > 1e-6 ||\n      Math.abs(next.y - transform.current.y) > 1e-6\n    )\n      resetViewport();\n  }, [zoomable, controlledViewport?.zoom, controlledViewport?.originX, controlledViewport?.originY]);\n  useLayoutEffect(() => {\n    reportViewport(transform.current);\n  }, [size, onViewportChange]);\n  const sourcePoint = (x: number, y: number) => {\n    const current = transform.current;\n    return {\n      x: clamp((x - size.width / 2 - current.x) / current.scale / size.width + 0.5),\n      y: clamp((y - size.height / 2 - current.y) / current.scale / size.height + 0.5),\n    };\n  };\n  const moveViewport = (event: GestureResponderEvent) => {\n    const { touches } = event.nativeEvent;\n    const [first, second] = touches;\n    const count = touches.length;\n    if (!zoomable || !first || (count !== 2 && !(navigation && count === 1)) || size.width <= 0 || size.height <= 0) {\n      pinch.current = null;\n      return;\n    }\n    cancel();\n    suppressTap.current = true;\n    const x = second ? (first.pageX + second.pageX) / 2 : first.pageX;\n    const y = second ? (first.pageY + second.pageY) / 2 : first.pageY;\n    const distance = second ? Math.hypot(first.pageX - second.pageX, first.pageY - second.pageY) : 1;\n    if (![x, y, distance].every(Number.isFinite) || distance <= 0) {\n      pinch.current = null;\n      return;\n    }\n    if (!pinch.current || pinch.current.count !== count) {\n      // Touch locations are frame-local; page positions are used only for movement deltas.\n      const focalX = Number.isFinite(first.locationX) ? first.locationX + x - first.pageX : x;\n      const focalY = Number.isFinite(first.locationY) ? first.locationY + y - first.pageY : y;\n      pinch.current = {\n        count,\n        focalX,\n        focalY,\n        x,\n        y,\n        distance,\n        scale: transform.current.scale,\n        offsetX: transform.current.x,\n        offsetY: transform.current.y,\n      };\n      return;\n    }\n    const start = pinch.current;\n    const scale = Math.max(1, Math.min(4, (start.scale * distance) / start.distance));\n    const ratio = scale / start.scale;\n    const maxX = (size.width * (scale - 1)) / 2;\n    const maxY = (size.height * (scale - 1)) / 2;\n    transform.current = {\n      scale,\n      x: Math.max(\n        -maxX,\n        Math.min(maxX, start.offsetX * ratio + (start.focalX - size.width / 2) * (1 - ratio) + x - start.x),\n      ),\n      y: Math.max(\n        -maxY,\n        Math.min(maxY, start.offsetY * ratio + (start.focalY - size.height / 2) * (1 - ratio) + y - start.y),\n      ),\n    };\n    // Publish synchronously so capture can reject a gesture even before React renders it.\n    reportViewport(transform.current);\n    setViewport(transform.current);\n  };\n  const [live, setLive] = useState<readonly Point[]>([]);\n  const stroke = useRef<Point[] | null>(null);\n  // Callers pass inline callbacks, so a new identity is not a new tool: only switching drawing off or on cancels.\n  const draw = useRef(onDraw);\n  draw.current = onDraw;\n  const drawing = onDraw !== undefined;\n  const cancel = () => {\n    stroke.current = null;\n    pressedPoint.current = undefined;\n    setLive([]);\n  };\n  useEffect(() => {\n    stroke.current = null;\n    setLive([]);\n    return () => {\n      stroke.current = null;\n    };\n  }, [\n    drawing,\n    navigation,\n    drawingHighlight,\n    controlledViewport?.zoom,\n    controlledViewport?.originX,\n    controlledViewport?.originY,\n  ]);\n  const append = (event: GestureResponderEvent) => {\n    if (!stroke.current || !draw.current) return cancel();\n    const { locationX, locationY, touches } = event.nativeEvent;\n    if (\n      touches.length > 1 ||\n      ![locationX, locationY, size.width, size.height].every(Number.isFinite) ||\n      size.width <= 0 ||\n      size.height <= 0\n    )\n      return cancel();\n    const point = sourcePoint(locationX, locationY);\n    const last = stroke.current[stroke.current.length - 1];\n    if (last?.x === point.x && last.y === point.y) return;\n    // Keep the start and a bounded prefix; update the last point once full.\n    if (stroke.current.length < MAX_POINTS) stroke.current.push(point);\n    else stroke.current[MAX_POINTS - 1] = point;\n    setLive([...stroke.current]);\n  };\n  const place = (event: GestureResponderEvent) => {\n    if (!onPlace || onDraw || navigation || suppressTap.current) return;\n    const { locationX, locationY } = event.nativeEvent;\n    const known = size.width > 0 && size.height > 0 && Number.isFinite(locationX) && Number.isFinite(locationY);\n    const point = known ? sourcePoint(locationX, locationY) : (pressedPoint.current ?? { x: 0.5, y: 0.5 });\n    pressedPoint.current = undefined;\n    selectionTick();\n    onPlace(point);\n  };\n  return (\n    <View\n      style={[styles.frame, zoomable && { overflow: 'hidden' }, style]}\n      onStartShouldSetResponderCapture={(event) => zoomable && (navigation || event.nativeEvent.touches.length > 1)}\n      onMoveShouldSetResponderCapture={(event) => zoomable && (navigation || event.nativeEvent.touches.length > 1)}\n      onResponderGrant={\n        zoomable\n          ? (event) => {\n              cancel();\n              navigating.current = true;\n              suppressTap.current = true;\n              moveViewport(event);\n            }\n          : undefined\n      }\n      onResponderStart={\n        zoomable\n          ? (event) => {\n              cancel();\n              moveViewport(event);\n            }\n          : undefined\n      }\n      onResponderEnd={\n        zoomable\n          ? (event) => {\n              cancel();\n              moveViewport(event);\n            }\n          : undefined\n      }\n      onResponderMove={zoomable ? moveViewport : undefined}\n      onResponderRelease={\n        zoomable\n          ? () => {\n              navigating.current = false;\n              pinch.current = null;\n            }\n          : undefined\n      }\n      onResponderTerminationRequest={() => true}\n      onResponderTerminate={\n        zoomable\n          ? () => {\n              navigating.current = false;\n              pinch.current = null;\n              cancel();\n            }\n          : undefined\n      }\n      onLayout={(event) => {\n        cancel();\n        const { width, height } = event.nativeEvent.layout;\n        const dimensions = {\n          width: Number.isFinite(width) ? Math.max(0, width) : 0,\n          height: Number.isFinite(height) ? Math.max(0, height) : 0,\n        };\n        resetViewport(dimensions);\n        setSize(dimensions);\n      }}\n    >\n      <View\n        pointerEvents=\"none\"\n        style={styles.overlay}\n        accessible\n        accessibilityRole={onPlace && !onDraw ? 'button' : 'image'}\n        accessibilityLabel={accessibilityLabel}\n        accessibilityHint={\n          onPlace && !onDraw\n            ? 'Double tap to add a note here. Use the Note on whole image action to mark the whole image.'\n            : undefined\n        }\n        accessibilityActions={\n          onPlace\n            ? [...(onDraw ? [] : [{ name: 'activate' }]), { name: 'noteWholeImage', label: 'Note on whole image' }]\n            : undefined\n        }\n        onAccessibilityAction={(event) => {\n          const { actionName } = event.nativeEvent;\n          if (actionName === 'noteWholeImage' || (actionName === 'activate' && !onDraw)) onPlace?.({ x: 0.5, y: 0.5 });\n        }}\n      />\n      <Pressable\n        accessible={false}\n        disabled={!onPlace || !!onDraw || navigation}\n        onPressIn={(event) => {\n          pressedPoint.current = undefined;\n          if (navigating.current) return;\n          suppressTap.current = false;\n          // react-native-web onPress is a MouseEvent; its responder start retains the native location.\n          const { locationX, locationY } = event.nativeEvent;\n          if (size.width > 0 && size.height > 0 && Number.isFinite(locationX) && Number.isFinite(locationY))\n            pressedPoint.current = sourcePoint(locationX, locationY);\n        }}\n        onPress={place}\n      >\n        {/* Zoomed content is only a picture, so every touch maps through the frame. At 1x it keeps its own controls, such as PDF page buttons. */}\n        <View\n          pointerEvents={zoomable && viewport.scale > 1 ? 'none' : 'auto'}\n          style={\n            zoomable\n              ? { transform: [{ translateX: viewport.x }, { translateY: viewport.y }, { scale: viewport.scale }] }\n              : undefined\n          }\n        >\n          {children}\n          <View pointerEvents=\"none\" accessible={false} style={styles.overlay}>\n            {marks.map(\n              (mark) =>\n                mark.points && (\n                  <Stroke\n                    key={mark.id}\n                    points={mark.points}\n                    width={size.width}\n                    height={size.height}\n                    highlight={mark.highlight}\n                  />\n                ),\n            )}\n            {onDraw && <Stroke points={live} width={size.width} height={size.height} highlight={drawingHighlight} />}\n          </View>\n        </View>\n      </Pressable>\n      {onDraw && !navigation && (\n        <View\n          accessible={false}\n          // Only JS responder props, which Fabric may flatten out of the native tree; keep it hit-testable.\n          collapsable={false}\n          style={styles.overlay}\n          onStartShouldSetResponder={() => true}\n          onResponderGrant={(event) => {\n            stroke.current = [];\n            append(event);\n          }}\n          onResponderStart={(event) => {\n            if (event.nativeEvent.touches.length > 1) cancel();\n          }}\n          onResponderMove={append}\n          onResponderRelease={(event) => {\n            append(event);\n            const points = stroke.current;\n            cancel();\n            if (\n              points &&\n              points.length >= 2 &&\n              points.some((point) => point.x !== points[0].x || point.y !== points[0].y)\n            ) {\n              draw.current?.(points);\n            }\n          }}\n          onResponderTerminationRequest={() => true}\n          onResponderTerminate={cancel}\n        />\n      )}\n      {marks.map((mark) => {\n        const selected = mark.id === selectedId;\n        return (\n          <Pressable\n            key={mark.id}\n            accessibilityRole=\"button\"\n            accessibilityLabel={`Note ${mark.label}${mark.description ? `: ${mark.description}` : ''}`}\n            accessibilityState={{ selected }}\n            onPress={() => onSelectMark?.(mark.id)}\n            style={[\n              styles.hit,\n              zoomable\n                ? {\n                    left: size.width / 2 + (clamp(mark.x) - 0.5) * size.width * viewport.scale + viewport.x,\n                    top: size.height / 2 + (clamp(mark.y) - 0.5) * size.height * viewport.scale + viewport.y,\n                  }\n                : { left: `${clamp(mark.x) * 100}%`, top: `${clamp(mark.y) * 100}%` },\n            ]}\n          >\n            <View style={[styles.pin, selected && styles.pinSelected]}>\n              <Text style={[styles.label, selected && styles.labelSelected]}>{mark.label}</Text>\n            </View>\n          </Pressable>\n        );\n      })}\n    </View>\n  );\n}\n\nconst HIT = 44;\nconst PIN = 28;\n\nconst styles = StyleSheet.create((theme) => ({\n  frame: { position: 'relative', alignSelf: 'stretch' },\n  overlay: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 },\n  segment: { position: 'absolute', height: 3, borderRadius: 1.5, backgroundColor: theme.colors.magenta },\n  highlight: { height: 16, borderRadius: 8, opacity: 0.3 },\n  hit: {\n    position: 'absolute',\n    width: HIT,\n    height: HIT,\n    marginLeft: -HIT / 2,\n    marginTop: -HIT / 2,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  pin: {\n    width: PIN,\n    height: PIN,\n    borderRadius: PIN / 2,\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderWidth: 2,\n    borderColor: theme.colors.magenta,\n    backgroundColor: theme.colors.bg,\n  },\n  pinSelected: { backgroundColor: theme.colors.magenta },\n  label: {\n    color: theme.colors.magenta,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    fontWeight: theme.fontWeight.semibold,\n  },\n  labelSelected: { color: theme.colors.bg },\n}));\n"],"mappings":"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"}

package/dist/components/Badge.d.mts

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

package/dist/components/Badge.mjs

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

package/dist/components/Button.mjs

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

package/dist/components/CodeBlock.d.mts

@@ -4,7 +4,9 @@ export interface CodeBlockProps {
   text: string;
   /** The fence's language word, such as `ts`; the web reads it from a `language-*` class. */
   language?: string;
+  /** Initial reveal pages, useful for a reader restored to a known position. */
+  initialPage?: number;
 }
-export declare function CodeBlock({ text, language }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ text, language, initialPage }: CodeBlockProps): import("react").JSX.Element;
 //#endregion
 //# sourceMappingURL=CodeBlock.d.mts.map

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":";iBAiBiB;;EAEf;;EAEA;;EAEA;;wBAGc,YAAY,MAAM,UAAU,eAAmB,iCAAc,IAAA"}

package/dist/components/CodeBlock.mjs

@@ -1,61 +1,49 @@
 import { fontOf } from "../lib/fonts.mjs";
-import { Button } from "./Button.mjs";
-import { CheckIcon, CopyIcon } from "../icons/icons.mjs";
+import { codePrefix } from "../lib/reading.mjs";
+import { useReadingPage } from "../lib/useReadingPage.mjs";
+import { CopyButton } from "./CopyButton.mjs";
+import { ShowMore } from "./ShowMore.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 { StyleSheet } from "react-native-unistyles";
 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];
+function CodeBlock({ text, language, initialPage = 1 }) {
+	const { page, reveal } = useReadingPage(text, initialPage);
+	const visible = codePrefix(text, page);
 	return /* @__PURE__ */ jsxs(View, {
-		style: styles.block,
-		accessibilityLabel: language === void 0 ? void 0 : `${language} code`,
-		children: [/* @__PURE__ */ jsx(ScrollView, {
-			horizontal: true,
-			showsHorizontalScrollIndicator: false,
-			contentContainerStyle: styles.scroll,
-			children: /* @__PURE__ */ jsx(Text, {
-				selectable: true,
-				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"
-			})
-		})]
+		style: styles.root,
+		children: [/* @__PURE__ */ jsxs(View, {
+			style: styles.block,
+			accessibilityLabel: language === void 0 ? void 0 : `${language} code`,
+			children: [/* @__PURE__ */ jsx(ScrollView, {
+				horizontal: true,
+				showsHorizontalScrollIndicator: false,
+				contentContainerStyle: styles.scroll,
+				children: /* @__PURE__ */ jsx(Text, {
+					selectable: true,
+					style: styles.code,
+					children: visible
+				})
+			}), /* @__PURE__ */ jsx(CopyButton, {
+				text,
+				style: styles.copy
+			})]
+		}), visible.length < text.length ? /* @__PURE__ */ jsx(ShowMore, {
+			label: "Show more code",
+			summary: `${visible.length} of ${text.length} characters · ${visible.split("\n").length} of ${text.split("\n").length} lines`,
+			onPress: reveal
+		}) : null]
 	});
 }
 const styles = StyleSheet.create((theme) => ({
+	root: {
+		gap: theme.spacing(2),
+		minWidth: 0,
+		uni__dependencies: [0]
+	},
 	block: {
 		borderRadius: theme.borderRadius.DEFAULT,
 		borderWidth: 1,