@tangle-network/ui 11.24.0 → 11.26.0

package/dist/files/pdf-viewer.js

@@ -0,0 +1,567 @@
+import { focusRingInset } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { fieldPresentation } from "../lib/control-presentation.js";
+import { Button } from "../primitives/button.js";
+import { Alert, AlertDescription } from "../primitives/alert.js";
+import { FileCard } from "./file-card.js";
+import { isMissingPdfjsError, loadPdfjs, pdfAssetParams } from "./pdf-loader.js";
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, Download, Info, LoaderCircle, ZoomIn, ZoomOut } from "lucide-react";
+//#region src/files/pdf-viewer.tsx
+/**
+* PdfViewer — renders a PDF's pages to canvas with pdf.js, so a document reads
+* the same in every browser, phones included. A continuous column of pages
+* with page navigation, zoom and fit-to-width, and Download.
+*
+* Only pages within a screen of the visible area hold a canvas; the rest keep
+* their size and release theirs, so a long document stays inside the canvas
+* memory a phone allows.
+*
+* When pdf.js is not installed or cannot open the file, the viewer says so
+* and falls back to the browser's own viewer through `<object>`, and from
+* there to a FileCard where the browser has none (Android Chrome).
+*/
+/** pdf.js measures in points; CSS pixels are 96 to the inch. */
+const PDF_TO_CSS = 96 / 72;
+const ZOOM_STEPS = [
+	.25,
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	2,
+	3,
+	4
+];
+const MIN_ZOOM = ZOOM_STEPS[0];
+const MAX_ZOOM = ZOOM_STEPS[ZOOM_STEPS.length - 1];
+/** Matches the column's `p-3`. */
+const COLUMN_PADDING = 12;
+/**
+* iOS Safari refuses to draw a canvas above 4096 × 4096 pixels. Past that, a
+* page renders below the device pixel ratio, softer but whole.
+*/
+const MAX_CANVAS_PIXELS = 16777216;
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+/**
+* pdf.js streams an http(s) URL itself, with range requests, so the first
+* page shows before a long file finishes downloading. It reads other URLs
+* through XMLHttpRequest, which not every browser allows for a data URL, so
+* those are read here and handed over as bytes.
+*/
+async function documentSource(src, signal) {
+	if (/^https?:/i.test(new URL(src, document.baseURI).protocol)) return { url: src };
+	const response = await fetch(src, { signal });
+	if (!response.ok) throw new Error(`Reading the PDF failed with status ${response.status}.`);
+	return { data: new Uint8Array(await response.arrayBuffer()) };
+}
+/** What the reader is told when the viewer falls back, and whether retrying can help. */
+function fallbackFor(error) {
+	if (isMissingPdfjsError(error)) return {
+		notice: "This is the browser's PDF viewer, because this app does not include the page viewer.",
+		retry: false
+	};
+	const name = error instanceof Error ? error.name : "";
+	if (name === "PasswordException") return {
+		notice: "This PDF is password-protected, so it opens in the browser's PDF viewer.",
+		retry: false
+	};
+	if (name === "InvalidPDFException") return {
+		notice: "This file could not be read as a PDF.",
+		retry: false
+	};
+	const status = error?.status;
+	if (name === "ResponseException" && typeof status === "number" && status > 0) return {
+		notice: `The PDF could not be downloaded (HTTP ${status}).`,
+		retry: true
+	};
+	return {
+		notice: "The page viewer could not open this PDF, so this is the browser's PDF viewer.",
+		retry: true
+	};
+}
+function PdfViewer({ src, filename = "Document", size, onDownload, className }) {
+	const [attempt, setAttempt] = useState(0);
+	const [state, setState] = useState({ status: "loading" });
+	useEffect(() => {
+		let active = true;
+		let destroy;
+		const abort = new AbortController();
+		setState({ status: "loading" });
+		const fail = (error) => {
+			if (!active) return;
+			console.error(`PdfViewer: falling back to the browser's PDF viewer for ${filename}.`, error);
+			setState({
+				status: "fallback",
+				...fallbackFor(error)
+			});
+		};
+		(async () => {
+			const pdfjs = await loadPdfjs();
+			const source = await documentSource(src, abort.signal);
+			if (!active) return;
+			const task = pdfjs.getDocument({
+				...source,
+				...pdfAssetParams()
+			});
+			destroy = () => task.destroy();
+			task.onProgress = ({ loaded, total }) => {
+				if (active && total > 0) setState({
+					status: "loading",
+					percent: Math.min(100, Math.round(loaded / total * 100))
+				});
+			};
+			const doc = await task.promise;
+			if (active) setState({
+				status: "ready",
+				doc
+			});
+		})().catch(fail);
+		return () => {
+			active = false;
+			abort.abort();
+			destroy?.();
+		};
+	}, [src, attempt]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-state": state.status,
+		className: cn("flex max-h-[100dvh] min-h-0 flex-col overflow-hidden rounded-[var(--radius-md)] border border-border bg-card", className),
+		children: state.status === "ready" ? /* @__PURE__ */ jsx(PdfDocument, {
+			doc: state.doc,
+			filename,
+			onDownload
+		}) : state.status === "loading" ? /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			className: "flex min-h-[12rem] flex-1 flex-col items-center justify-center gap-3 p-6 text-sm text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(LoaderCircle, {
+				"aria-hidden": "true",
+				className: "size-5 animate-spin motion-reduce:animate-none"
+			}), /* @__PURE__ */ jsxs("span", { children: [
+				"Loading ",
+				filename,
+				state.percent === void 0 ? "…" : ` · ${state.percent}%`
+			] })]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto p-3",
+			children: [/* @__PURE__ */ jsxs(Alert, {
+				tone: "info",
+				icon: /* @__PURE__ */ jsx(Info, {}),
+				children: [/* @__PURE__ */ jsx(AlertDescription, { children: state.notice }), state.retry && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					onClick: () => setAttempt((n) => n + 1),
+					children: "Try again"
+				}) })]
+			}), /* @__PURE__ */ jsx("object", {
+				data: src,
+				type: "application/pdf",
+				title: filename,
+				className: "min-h-[20rem] w-full flex-1 rounded-[var(--radius-md)]",
+				children: /* @__PURE__ */ jsx(FileCard, {
+					filename,
+					mimeType: "application/pdf",
+					size,
+					description: "This browser does not show PDFs inline.",
+					onDownload,
+					className: "h-full"
+				})
+			})]
+		})
+	});
+}
+function PdfDocument({ doc, filename, onDownload }) {
+	const pageCount = doc.numPages;
+	const [scroller, setScroller] = useState(null);
+	const pageElements = useRef([]);
+	const [firstPage, setFirstPage] = useState(null);
+	const [availableWidth, setAvailableWidth] = useState(0);
+	const [zoomSetting, setZoomSetting] = useState({ mode: "fit" });
+	const [currentPage, setCurrentPage] = useState(1);
+	const anchor = useRef(null);
+	const registerPage = useCallback((pageNumber, element) => {
+		pageElements.current[pageNumber - 1] = element;
+	}, []);
+	useEffect(() => {
+		let active = true;
+		doc.getPage(1).then((page) => {
+			if (!active) return;
+			const { width, height } = page.getViewport({ scale: PDF_TO_CSS });
+			setFirstPage({
+				width,
+				height
+			});
+		}, () => {
+			if (active) setFirstPage({
+				width: 612 * PDF_TO_CSS,
+				height: 792 * PDF_TO_CSS
+			});
+		});
+		return () => {
+			active = false;
+		};
+	}, [doc]);
+	useLayoutEffect(() => {
+		if (!scroller) return;
+		setAvailableWidth(scroller.clientWidth);
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => setAvailableWidth(scroller.clientWidth));
+		observer.observe(scroller);
+		return () => observer.disconnect();
+	}, [scroller]);
+	const fitZoom = firstPage && availableWidth > 24 ? clamp((availableWidth - 24) / firstPage.width, MIN_ZOOM, MAX_ZOOM) : 1;
+	const zoom = zoomSetting.mode === "fit" ? fitZoom : zoomSetting.value;
+	const readPosition = useCallback(() => {
+		if (!scroller) return;
+		const top = scroller.scrollTop;
+		const bottom = top + scroller.clientHeight;
+		let best = 0;
+		let bestVisible = -1;
+		pageElements.current.forEach((element, index) => {
+			if (!element) return;
+			const visible = Math.min(bottom, element.offsetTop + element.offsetHeight) - Math.max(top, element.offsetTop);
+			if (visible > bestVisible) {
+				best = index;
+				bestVisible = visible;
+			}
+		});
+		if (top + scroller.clientHeight >= scroller.scrollHeight - 1 && top > 0) best = pageCount - 1;
+		const element = pageElements.current[best];
+		anchor.current = {
+			index: best,
+			fraction: element?.offsetHeight ? (top - element.offsetTop) / element.offsetHeight : 0
+		};
+		setCurrentPage(best + 1);
+	}, [scroller, pageCount]);
+	useLayoutEffect(() => {
+		const element = anchor.current && pageElements.current[anchor.current.index];
+		if (!scroller || !anchor.current || !element) return;
+		scroller.scrollTop = element.offsetTop + anchor.current.fraction * element.offsetHeight;
+		scroller.scrollLeft = (scroller.scrollWidth - scroller.clientWidth) / 2;
+	}, [scroller, zoom]);
+	const frame = useRef(0);
+	useEffect(() => () => cancelAnimationFrame(frame.current), []);
+	const onScroll = () => {
+		if (frame.current) return;
+		frame.current = requestAnimationFrame(() => {
+			frame.current = 0;
+			readPosition();
+		});
+	};
+	const goToPage = (pageNumber) => {
+		const target = clamp(pageNumber, 1, pageCount);
+		const element = pageElements.current[target - 1];
+		if (scroller && element) {
+			scroller.scrollTop = element.offsetTop - COLUMN_PADDING;
+			anchor.current = {
+				index: target - 1,
+				fraction: element.offsetHeight ? -12 / element.offsetHeight : 0
+			};
+		}
+		setCurrentPage(target);
+	};
+	const zoomBy = (direction) => {
+		readPosition();
+		const next = direction > 0 ? ZOOM_STEPS.find((step) => step > zoom + .001) ?? MAX_ZOOM : [...ZOOM_STEPS].reverse().find((step) => step < zoom - .001) ?? MIN_ZOOM;
+		setZoomSetting({
+			mode: "manual",
+			value: next
+		});
+	};
+	const percent = Math.round(zoom * 100);
+	const fitting = zoomSetting.mode === "fit";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": `${filename} controls`,
+		className: "flex shrink-0 items-center gap-0.5 overflow-x-auto border-b border-border px-1 py-1 [&>*]:shrink-0",
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				"aria-label": "Previous page",
+				title: "Previous page",
+				disabled: currentPage <= 1,
+				onClick: () => goToPage(currentPage - 1),
+				children: /* @__PURE__ */ jsx(ChevronLeft, {})
+			}),
+			/* @__PURE__ */ jsx(PageField, {
+				current: currentPage,
+				total: pageCount,
+				onCommit: goToPage
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				"aria-label": "Next page",
+				title: "Next page",
+				disabled: currentPage >= pageCount,
+				onClick: () => goToPage(currentPage + 1),
+				children: /* @__PURE__ */ jsx(ChevronRight, {})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex items-center gap-0.5",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						"aria-label": "Zoom out",
+						title: "Zoom out",
+						disabled: zoom <= MIN_ZOOM + .001,
+						onClick: () => zoomBy(-1),
+						children: /* @__PURE__ */ jsx(ZoomOut, {})
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						"aria-label": `${percent}%, fit to width`,
+						title: "Fit to width",
+						"aria-pressed": fitting,
+						className: cn("min-w-12 px-1.5 tabular-nums", fitting && "bg-primary/10 text-[var(--accent-text)] hover:text-[var(--accent-text)]"),
+						onClick: () => {
+							readPosition();
+							setZoomSetting({ mode: "fit" });
+						},
+						children: [percent, "%"]
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "sr-only",
+						"aria-live": "polite",
+						children: [
+							"Zoom ",
+							percent,
+							"%"
+						]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						"aria-label": "Zoom in",
+						title: "Zoom in",
+						disabled: zoom >= MAX_ZOOM - .001,
+						onClick: () => zoomBy(1),
+						children: /* @__PURE__ */ jsx(ZoomIn, {})
+					}),
+					onDownload && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						"aria-label": `Download ${filename}`,
+						title: "Download",
+						onClick: onDownload,
+						children: /* @__PURE__ */ jsx(Download, {})
+					})
+				]
+			})
+		]
+	}), /* @__PURE__ */ jsx("div", {
+		ref: setScroller,
+		tabIndex: 0,
+		role: "region",
+		"aria-label": filename,
+		onScroll,
+		className: cn("relative min-h-0 flex-1 overflow-auto overscroll-contain bg-muted [scrollbar-gutter:stable]", focusRingInset),
+		children: firstPage ? /* @__PURE__ */ jsx("div", {
+			className: "flex w-max min-w-full flex-col items-center gap-3 p-3",
+			children: Array.from({ length: pageCount }, (_, index) => /* @__PURE__ */ jsx(PdfPage, {
+				doc,
+				pageNumber: index + 1,
+				pageCount,
+				zoom,
+				placeholder: firstPage,
+				root: scroller,
+				register: registerPage
+			}, index))
+		}) : /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			className: "flex h-full min-h-[12rem] items-center justify-center text-sm text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(LoaderCircle, {
+				"aria-hidden": "true",
+				className: "size-5 animate-spin motion-reduce:animate-none"
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [
+					"Loading ",
+					filename,
+					"…"
+				]
+			})]
+		})
+	})] });
+}
+/**
+* The current page number, editable. A typed number applies on Enter or when
+* the field loses focus; Escape restores the current page.
+*/
+function PageField({ current, total, onCommit }) {
+	const [draft, setDraft] = useState(null);
+	const commit = () => {
+		if (draft === null) return;
+		const page = Number.parseInt(draft, 10);
+		setDraft(null);
+		if (Number.isFinite(page)) onCommit(page);
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center gap-1.5 text-sm text-muted-foreground",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "text",
+			inputMode: "numeric",
+			"aria-label": `Page, 1 to ${total}`,
+			value: draft ?? String(current),
+			onFocus: (event) => event.currentTarget.select(),
+			onChange: (event) => setDraft(event.currentTarget.value.replace(/\D/g, "")),
+			onBlur: commit,
+			onKeyDown: (event) => {
+				if (event.key === "Enter") commit();
+				if (event.key === "Escape") setDraft(null);
+			},
+			className: cn(fieldPresentation, "h-8 w-11 rounded-md border px-1 text-center text-base tabular-nums sm:text-sm")
+		}), /* @__PURE__ */ jsxs("span", {
+			"aria-hidden": "true",
+			className: "whitespace-nowrap tabular-nums",
+			children: ["/ ", total]
+		})]
+	});
+}
+function releaseCanvases(host) {
+	for (const canvas of host.querySelectorAll("canvas")) {
+		canvas.width = 0;
+		canvas.height = 0;
+	}
+	host.replaceChildren();
+}
+const PdfPage = memo(function PdfPage({ doc, pageNumber, pageCount, zoom, placeholder, root, register }) {
+	const [page, setPage] = useState(null);
+	const [near, setNear] = useState(false);
+	const [failed, setFailed] = useState(false);
+	const boxRef = useRef(null);
+	const hostRef = useRef(null);
+	const scale = zoom * PDF_TO_CSS;
+	useEffect(() => {
+		let active = true;
+		doc.getPage(pageNumber).then((loaded) => active && setPage(loaded), () => active && setFailed(true));
+		return () => {
+			active = false;
+		};
+	}, [doc, pageNumber]);
+	useEffect(() => {
+		const box = boxRef.current;
+		if (!box) return;
+		if (typeof IntersectionObserver === "undefined") {
+			setNear(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => setNear(entry?.isIntersecting ?? false), {
+			root,
+			rootMargin: "100% 0px"
+		});
+		observer.observe(box);
+		return () => observer.disconnect();
+	}, [root]);
+	useEffect(() => {
+		const host = hostRef.current;
+		if (!host || !page) return;
+		if (!near) {
+			releaseCanvases(host);
+			page.cleanup();
+			return;
+		}
+		const viewport = page.getViewport({ scale });
+		const ratio = Math.min(window.devicePixelRatio || 1, Math.sqrt(MAX_CANVAS_PIXELS / (viewport.width * viewport.height)));
+		const canvas = document.createElement("canvas");
+		canvas.width = Math.max(1, Math.floor(viewport.width * ratio));
+		canvas.height = Math.max(1, Math.floor(viewport.height * ratio));
+		canvas.style.cssText = "display:block;width:100%;height:100%";
+		canvas.setAttribute("aria-hidden", "true");
+		const task = page.render({
+			canvas,
+			viewport,
+			transform: ratio === 1 ? void 0 : [
+				ratio,
+				0,
+				0,
+				ratio,
+				0,
+				0
+			]
+		});
+		let finished = false;
+		task.promise.then(() => {
+			finished = true;
+			releaseCanvases(host);
+			host.append(canvas);
+			setFailed(false);
+		}, (error) => {
+			finished = true;
+			canvas.width = 0;
+			canvas.height = 0;
+			if (error?.name !== "RenderingCancelledException") setFailed(true);
+		});
+		return () => {
+			if (!finished) task.cancel();
+		};
+	}, [
+		page,
+		near,
+		scale
+	]);
+	useEffect(() => {
+		const host = hostRef.current;
+		return () => {
+			if (host) releaseCanvases(host);
+		};
+	}, []);
+	const box = useMemo(() => {
+		if (page) {
+			const { width, height } = page.getViewport({ scale });
+			return {
+				width,
+				height
+			};
+		}
+		return {
+			width: placeholder.width * zoom,
+			height: placeholder.height * zoom
+		};
+	}, [
+		page,
+		scale,
+		zoom,
+		placeholder
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: (element) => {
+			boxRef.current = element;
+			register(pageNumber, element);
+		},
+		role: "img",
+		"aria-label": `Page ${pageNumber} of ${pageCount}`,
+		"data-page-number": pageNumber,
+		style: {
+			width: Math.round(box.width),
+			height: Math.round(box.height)
+		},
+		className: "relative shrink-0 overflow-hidden bg-card shadow-sm ring-1 ring-border",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: hostRef,
+			className: "absolute inset-0"
+		}), failed && /* @__PURE__ */ jsxs("p", {
+			className: "absolute inset-0 flex items-center justify-center p-4 text-center text-sm text-muted-foreground",
+			children: [
+				"Page ",
+				pageNumber,
+				" could not be displayed."
+			]
+		})]
+	});
+});
+//#endregion
+export { PdfViewer };

package/dist/files.d.ts

@@ -1,7 +1,11 @@
 import { FileNode, FileTree, FileTreeProps, FileTreeVisibilityOptions, filterFileTree } from "./files/file-tree.js";
 import { RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars } from "./files/rich-file-tree.js";
 import { CSV_PREVIEW_ROW_LIMIT, FilePreview, FilePreviewProps, parseCsv } from "./files/file-preview.js";
+import { PdfViewer, PdfViewerProps } from "./files/pdf-viewer.js";
+import { PdfViewerConfig, configurePdfViewer } from "./files/pdf-loader.js";
+import { FileCard, FileCardProps, FileDetails, FileUploader } from "./files/file-card.js";
+import { FileList, FileListItem, FileListProps } from "./files/file-list.js";
 import { FileTabData, FileTabs, FileTabsProps } from "./files/file-tabs.js";
 import { FileArtifactPane, FileArtifactPaneProps } from "./files/file-artifact-pane.js";
 import { FileFormat, FilePreviewKind, detectFileFormat, fileExtension, getCodeLanguage, getFormatLabel, getSyntaxLanguage, resolveFilePreviewKind } from "./files/file-format.js";
-export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind };
+export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, PdfViewer, type PdfViewerConfig, type PdfViewerProps, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, configurePdfViewer, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind };

package/dist/files.js

@@ -1,7 +1,11 @@
 import { detectFileFormat, fileExtension, getCodeLanguage, getFormatLabel, getSyntaxLanguage, resolveFilePreviewKind } from "./files/file-format.js";
 import { FileTree, filterFileTree } from "./files/file-tree.js";
 import { RichFileTree } from "./files/rich-file-tree.js";
+import { FileCard } from "./files/file-card.js";
+import { configurePdfViewer } from "./files/pdf-loader.js";
+import { PdfViewer } from "./files/pdf-viewer.js";
 import { CSV_PREVIEW_ROW_LIMIT, FilePreview, parseCsv } from "./files/file-preview.js";
+import { FileList } from "./files/file-list.js";
 import { FileTabs } from "./files/file-tabs.js";
 import { FileArtifactPane } from "./files/file-artifact-pane.js";
-export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, FilePreview, FileTabs, FileTree, RichFileTree, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind };
+export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, PdfViewer, RichFileTree, configurePdfViewer, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
 import { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, SessionUser, UserMenu, UserMenuProps } from "./auth/auth.js";
 import { LoginLayout, LoginLayoutProps } from "./auth/login-layout.js";
 import "./auth.js";
-import { SessionMessage } from "./types/message.js";
+import { ChatAuthor, SessionMessage } from "./types/message.js";
 import { ReasoningPart, SessionPart, TextPart, ToolPart, ToolState, ToolStatus, ToolTime } from "./types/parts.js";
 import { AgentBranding } from "./types/branding.js";
 import { CustomToolRenderer, DisplayVariant, ToolDisplayMetadata } from "./types/tool-display.js";
@@ -13,6 +13,7 @@ import { ChatContainer, ChatContainerProps } from "./chat/chat-container.js";
 import { MessageList, MessageListProps } from "./chat/message-list.js";
 import { UserMessage, UserMessageProps } from "./chat/user-message.js";
 import { ChatMessage, ChatMessageProps, MessageRole } from "./chat/chat-message.js";
+import { MessageAuthor, MessageAuthorProps, isViewerMessage } from "./chat/message-author.js";
 import { ThinkingIndicator, ThinkingIndicatorProps } from "./chat/thinking-indicator.js";
 import { ToolCallStatus, ToolCallType } from "./run/tool-call-step.js";
 import { FeedSegment, ToolCallData, ToolCallFeed, ToolCallFeedProps, parseToolEvent } from "./run/tool-call-feed.js";
@@ -22,6 +23,12 @@ import { ArtifactPane, ArtifactPaneProps } from "./primitives/artifact-pane.js";
 import { FileNode, FileTree, FileTreeProps, FileTreeVisibilityOptions, filterFileTree } from "./files/file-tree.js";
 import { RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars } from "./files/rich-file-tree.js";
 import { CSV_PREVIEW_ROW_LIMIT, FilePreview, FilePreviewProps, parseCsv } from "./files/file-preview.js";
+import { PdfViewer, PdfViewerProps } from "./files/pdf-viewer.js";
+import { PdfViewerConfig, configurePdfViewer } from "./files/pdf-loader.js";
+import { CATEGORY_TONES, CategoryTone, TONE_CLASSES, Tone, ToneClasses, toneFor } from "./primitives/tone.js";
+import { IconTile, IconTileProps, initialsOf } from "./primitives/icon-tile.js";
+import { FileCard, FileCardProps, FileDetails, FileUploader } from "./files/file-card.js";
+import { FileList, FileListItem, FileListProps } from "./files/file-list.js";
 import { FileTabData, FileTabs, FileTabsProps } from "./files/file-tabs.js";
 import { FileArtifactPane, FileArtifactPaneProps } from "./files/file-artifact-pane.js";
 import { FileFormat, FilePreviewKind, detectFileFormat, fileExtension, getCodeLanguage, getFormatLabel, getSyntaxLanguage, resolveFilePreviewKind } from "./files/file-format.js";
@@ -78,10 +85,8 @@ import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
 import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
 import { Pagination, PaginationProps } from "./primitives/pagination.js";
-import { CATEGORY_TONES, CategoryTone, TONE_CLASSES, Tone, ToneClasses, toneFor } from "./primitives/tone.js";
 import { Tag, TagProps } from "./primitives/tag.js";
 import { Chip, ChipProps } from "./primitives/chip.js";
-import { IconTile, IconTileProps, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { Logo, LogoProps, TangleKnot } from "./primitives.js";
@@ -114,4 +119,4 @@ import { QuestionPreview, QuestionPreviewProps } from "./tool-previews/question-
 import { DiffPreview, DiffPreviewProps } from "./tool-previews/diff-preview.js";
 import { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from "./redaction/redacted-document.js";
 import "./redaction.js";
-export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, AppendUserMessageOptions, ApplySdkEventOptions, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CustomToolRenderer, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, AppendUserMessageOptions, ApplySdkEventOptions, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CustomToolRenderer, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };