wiki-viewer 1.14.1 → 2.0.0

package/.next/standalone/src/components/editor/office/docx-viewer.tsx

@@ -1,93 +0,0 @@
-"use client";
-
-import { Loader2 } from "lucide-react";
-import { wsFetch } from "@/lib/workspace-client";
-import { useEffect, useRef, useState } from "react";
-import { OfficeChrome } from "./office-chrome";
-
-interface Props {
-	path: string;
-	title: string;
-}
-
-export function DocxViewer({ path, title }: Props) {
-	const containerRef = useRef<HTMLDivElement | null>(null);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
-
-	useEffect(() => {
-		let cancelled = false;
-		const container = containerRef.current;
-		if (!container) return;
-
-		// Clear any previous render
-		container.innerHTML = "";
-
-		(async () => {
-			setLoading(true);
-			setError(null);
-			try {
-				const [{ renderAsync }, res] = await Promise.all([
-					import("docx-preview"),
-					wsFetch(`/api/assets/${path}`),
-				]);
-				if (cancelled) return;
-				if (!res.ok) throw new Error(`Failed to load file (${res.status})`);
-				const blob = await res.blob();
-				if (cancelled) return;
-				await renderAsync(blob, container, undefined, {
-					className: "docx-rendered",
-					inWrapper: true,
-					ignoreWidth: false,
-					ignoreHeight: false,
-					breakPages: true,
-					renderHeaders: true,
-					renderFooters: true,
-					renderFootnotes: true,
-					experimental: true,
-					useBase64URL: true,
-				});
-				if (!cancelled) setLoading(false);
-			} catch (err) {
-				if (!cancelled) {
-					setError(
-						err instanceof Error ? err.message : "Failed to render document",
-					);
-					setLoading(false);
-				}
-			}
-		})();
-
-		return () => {
-			cancelled = true;
-		};
-	}, [path]);
-
-	return (
-		<div className="flex-1 flex flex-col overflow-hidden">
-			<OfficeChrome path={path} title={title} extLabel="DOCX" />
-			<div className="flex-1 overflow-y-auto bg-muted/30">
-				{loading && !error && (
-					<div className="h-full flex items-center justify-center text-muted-foreground">
-						<Loader2 className="h-5 w-5 animate-spin mr-2" />
-						Rendering document…
-					</div>
-				)}
-				{error && (
-					<div className="h-full flex items-center justify-center">
-						<div className="text-center space-y-2">
-							<p className="text-sm text-destructive">{error}</p>
-							<p className="text-xs text-muted-foreground">
-								Try downloading the file and opening it externally.
-							</p>
-						</div>
-					</div>
-				)}
-				<div
-					ref={containerRef}
-					className="docx-viewer-body mx-auto max-w-5xl py-6 px-4"
-				/>
-			</div>
-		</div>
-	);
-}

package/.next/standalone/src/components/editor/office/office-chrome.tsx

@@ -1,83 +0,0 @@
-"use client";
-
-import { Download, ExternalLink, FolderOpen } from "lucide-react";
-import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
-import { Button } from "@/components/ui/button";
-import { withWs, wsFetch } from "@/lib/workspace-client";
-
-interface OfficeChromeProps {
-	path: string;
-	title: string;
-	extLabel: string;
-	/** Optional external "open in source" action (e.g. Open in Google). */
-	external?: { label: string; href: string };
-	/** Hide the "Open in Finder" button (useful for Google embeds that aren't on disk). */
-	hideFinder?: boolean;
-}
-
-export function OfficeChrome({
-	path,
-	extLabel,
-	external,
-	hideFinder,
-}: OfficeChromeProps) {
-	const assetUrl = withWs(`/api/assets/${path}`);
-	const filename = path.split("/").pop() || path;
-
-	const revealInFinder = async () => {
-		try {
-			await wsFetch("/api/system/reveal", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ path }),
-			});
-		} catch {
-			/* ignore */
-		}
-	};
-
-	return (
-		<ViewerToolbar path={path} badge={extLabel || undefined}>
-			{external && (
-				<a
-					href={external.href}
-					target="_blank"
-					rel="noreferrer noopener"
-					className="inline-flex items-center gap-1.5 text-[11px] h-7 px-2.5 rounded-md border border-border hover:bg-accent transition-colors"
-				>
-					<ExternalLink className="h-3.5 w-3.5" />
-					{external.label}
-				</a>
-			)}
-			{!hideFinder && (
-				<Button
-					variant="outline"
-					size="sm"
-					className="gap-1.5 text-[11px] h-7"
-					onClick={revealInFinder}
-					title="Open in Finder"
-				>
-					<FolderOpen className="h-3.5 w-3.5" />
-					Reveal
-				</Button>
-			)}
-			{!hideFinder && (
-				<Button
-					variant="outline"
-					size="sm"
-					className="gap-1.5 text-[11px] h-7"
-					onClick={() => {
-						const a = document.createElement("a");
-						a.href = assetUrl;
-						a.download = filename;
-						a.click();
-					}}
-					title="Download original"
-				>
-					<Download className="h-3.5 w-3.5" />
-					Download
-				</Button>
-			)}
-		</ViewerToolbar>
-	);
-}

package/.next/standalone/src/components/editor/office/pptx-viewer.tsx

@@ -1,104 +0,0 @@
-"use client";
-
-import { Loader2 } from "lucide-react";
-import { wsFetch } from "@/lib/workspace-client";
-import { useEffect, useRef, useState } from "react";
-import { OfficeChrome } from "./office-chrome";
-
-interface Props {
-	path: string;
-	title: string;
-}
-
-export function PptxViewer({ path, title }: Props) {
-	const containerRef = useRef<HTMLDivElement | null>(null);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
-
-	useEffect(() => {
-		let cancelled = false;
-		const container = containerRef.current;
-		if (!container) return;
-		container.innerHTML = "";
-
-		let previewer: { destroy?: () => void } | null = null;
-
-		(async () => {
-			setLoading(true);
-			setError(null);
-			try {
-				const [{ init }, res] = await Promise.all([
-					import("pptx-preview"),
-					wsFetch(`/api/assets/${path}`),
-				]);
-				if (cancelled) return;
-				if (!res.ok) throw new Error(`Failed to load file (${res.status})`);
-				const buf = await res.arrayBuffer();
-				if (cancelled) return;
-
-				const width = container.clientWidth || 960;
-				const height = Math.round((width * 9) / 16);
-				previewer = init(container, {
-					width,
-					height,
-					mode: "list",
-				}) as unknown as {
-					destroy?: () => void;
-					preview: (buf: ArrayBuffer) => Promise<unknown>;
-				};
-				await (
-					previewer as unknown as {
-						preview: (b: ArrayBuffer) => Promise<unknown>;
-					}
-				).preview(buf);
-				if (!cancelled) setLoading(false);
-			} catch (err) {
-				if (!cancelled) {
-					setError(
-						err instanceof Error
-							? err.message
-							: "Failed to render presentation",
-					);
-					setLoading(false);
-				}
-			}
-		})();
-
-		return () => {
-			cancelled = true;
-			try {
-				previewer?.destroy?.();
-			} catch {
-				/* ignore */
-			}
-		};
-	}, [path]);
-
-	return (
-		<div className="flex-1 flex flex-col overflow-hidden">
-			<OfficeChrome path={path} title={title} extLabel="PPTX" />
-			<div className="flex-1 overflow-auto bg-muted/30 py-4">
-				{loading && !error && (
-					<div className="h-[60vh] flex items-center justify-center text-muted-foreground">
-						<Loader2 className="h-5 w-5 animate-spin mr-2" />
-						Rendering slides…
-					</div>
-				)}
-				{error && (
-					<div className="h-[60vh] flex items-center justify-center">
-						<div className="text-center space-y-2">
-							<p className="text-sm text-destructive">{error}</p>
-							<p className="text-xs text-muted-foreground">
-								Try downloading the file and opening it externally.
-							</p>
-						</div>
-					</div>
-				)}
-				<div
-					ref={containerRef}
-					className="pptx-viewer-body mx-auto max-w-5xl px-4"
-				/>
-			</div>
-		</div>
-	);
-}

package/.next/standalone/src/components/editor/office/xlsx-viewer.tsx

@@ -1,192 +0,0 @@
-"use client";
-
-import { Loader2 } from "lucide-react";
-import { wsFetch } from "@/lib/workspace-client";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { cn } from "@/lib/utils";
-import { OfficeChrome } from "./office-chrome";
-
-interface Props {
-	path: string;
-	title: string;
-}
-
-interface Sheet {
-	name: string;
-	// Built lazily on first view; sheet_to_html over a huge sheet freezes the tab.
-	html: string | null;
-	rows: number; // total rows, for the truncation banner
-	truncated: boolean;
-}
-
-// Sheets longer than this are clamped before conversion to cap DOM size.
-const MAX_ROWS = 2000;
-
-export function XlsxViewer({ path, title }: Props) {
-	const [sheets, setSheets] = useState<Sheet[] | null>(null);
-	const [active, setActive] = useState(0);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
-	const wbRef = useRef<{
-		wb: import("xlsx").WorkBook;
-		toHtml: (ws: import("xlsx").WorkSheet) => {
-			html: string;
-			rows: number;
-			truncated: boolean;
-		};
-	} | null>(null);
-
-	// Build the active sheet's HTML the first time it is viewed.
-	useEffect(() => {
-		if (!sheets || !wbRef.current) return;
-		const s = sheets[active];
-		if (!s || s.html !== null) return;
-		const { wb, toHtml } = wbRef.current;
-		const r = toHtml(wb.Sheets[s.name]);
-		setSheets((prev) => {
-			if (!prev) return prev;
-			const next = [...prev];
-			next[active] = {
-				...next[active],
-				html: r.html,
-				rows: r.rows,
-				truncated: r.truncated,
-			};
-			return next;
-		});
-	}, [sheets, active]);
-
-	useEffect(() => {
-		let cancelled = false;
-		setLoading(true);
-		setError(null);
-		setSheets(null);
-		(async () => {
-			try {
-				const [XLSX, res] = await Promise.all([
-					import("xlsx"),
-					wsFetch(`/api/assets/${path}`),
-				]);
-				if (cancelled) return;
-				if (!res.ok) throw new Error(`Failed to load file (${res.status})`);
-				const buf = await res.arrayBuffer();
-				if (cancelled) return;
-				const wb = XLSX.read(buf, {
-					type: "array",
-					cellDates: true,
-					cellStyles: true,
-				});
-				// Convert one worksheet to HTML, clamping its row range to MAX_ROWS.
-				// Returns the HTML plus whether it was truncated and the true row
-				// count. Kept here so it closes over the dynamically-imported XLSX.
-				// sheet_to_html has no range option; it honors the sheet's own !ref.
-				// For oversized sheets we shrink a copied !ref so only MAX_ROWS emit.
-				const toHtml = (ws: import("xlsx").WorkSheet) => {
-					const ref = ws["!ref"];
-					const range = ref ? XLSX.utils.decode_range(ref) : null;
-					const totalRows = range ? range.e.r - range.s.r + 1 : 0;
-					if (!range || totalRows <= MAX_ROWS) {
-						return {
-							html: XLSX.utils.sheet_to_html(ws, { editable: false }),
-							rows: totalRows,
-							truncated: false,
-						};
-					}
-					const clampedWs = {
-						...ws,
-						"!ref": XLSX.utils.encode_range({
-							s: range.s,
-							e: { r: range.s.r + MAX_ROWS - 1, c: range.e.c },
-						}),
-					};
-					return {
-						html: XLSX.utils.sheet_to_html(clampedWs, { editable: false }),
-						rows: totalRows,
-						truncated: true,
-					};
-				};
-				if (cancelled) return;
-				// Sheets render lazily via the active-sheet effect, so start them empty.
-				wbRef.current = { wb, toHtml };
-				setSheets(
-					wb.SheetNames.map((name) => ({
-						name,
-						html: null,
-						rows: 0,
-						truncated: false,
-					})),
-				);
-				setActive(0);
-				setLoading(false);
-			} catch (err) {
-				if (!cancelled) {
-					setError(
-						err instanceof Error ? err.message : "Failed to parse spreadsheet",
-					);
-					setLoading(false);
-				}
-			}
-		})();
-		return () => {
-			cancelled = true;
-		};
-	}, [path]);
-
-	const current = useMemo(() => sheets?.[active] ?? null, [sheets, active]);
-
-	return (
-		<div className="flex-1 flex flex-col overflow-hidden">
-			<OfficeChrome path={path} title={title} extLabel="XLSX" />
-			{sheets && sheets.length > 1 && (
-				<div className="flex items-center gap-0.5 border-b border-border bg-muted/40 px-2 overflow-x-auto scrollbar-none">
-					{sheets.map((s, i) => (
-						<button
-							key={s.name + i}
-							type="button"
-							onClick={() => setActive(i)}
-							className={cn(
-								"px-3 py-1.5 text-[12px] rounded-t whitespace-nowrap transition-colors",
-								i === active
-									? "bg-background text-foreground font-medium border-t border-x border-border -mb-px"
-									: "text-muted-foreground hover:text-foreground",
-							)}
-						>
-							{s.name}
-						</button>
-					))}
-				</div>
-			)}
-			<div className="flex-1 overflow-auto">
-				{loading && !error && (
-					<div className="h-full flex items-center justify-center text-muted-foreground">
-						<Loader2 className="h-5 w-5 animate-spin mr-2" />
-						Parsing spreadsheet…
-					</div>
-				)}
-				{error && (
-					<div className="h-full flex items-center justify-center">
-						<div className="text-center space-y-2">
-							<p className="text-sm text-destructive">{error}</p>
-							<p className="text-xs text-muted-foreground">
-								Try downloading the file and opening it externally.
-							</p>
-						</div>
-					</div>
-				)}
-				{current?.truncated && (
-					<div className="px-3 py-2 text-[11px] text-amber-600 dark:text-amber-400 border-b border-border">
-						Large sheet ({current.rows.toLocaleString()} rows). Showing first{" "}
-						{MAX_ROWS.toLocaleString()} for performance. Download the file to
-						see everything.
-					</div>
-				)}
-				{current?.html != null && (
-					<div
-						className="xlsx-sheet p-3 text-[12px]"
-						dangerouslySetInnerHTML={{ __html: current.html }}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}

package/.next/standalone/src/components/editor/pdf-viewer.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import { ExternalLink } from "lucide-react";
-import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
-import { Button } from "@/components/ui/button";
-import { withWs } from "@/lib/workspace-client";
-
-interface PdfViewerProps {
-	path: string;
-	title: string;
-}
-
-export function PdfViewer({ path, title }: PdfViewerProps) {
-	const pdfSrc = withWs(`/api/assets/${path}`);
-
-	return (
-		<div className="flex-1 flex flex-col overflow-hidden">
-			<ViewerToolbar path={path} badge="PDF">
-				<Button
-					variant="ghost"
-					size="sm"
-					className="h-7 gap-1.5 text-xs"
-					onClick={() => window.open(pdfSrc, "_blank")}
-				>
-					<ExternalLink className="h-3.5 w-3.5" />
-					Open in new tab
-				</Button>
-			</ViewerToolbar>
-			<iframe src={pdfSrc} className="flex-1 w-full border-0" title={title} />
-		</div>
-	);
-}

package/.next/standalone/src/components/editor/proof-span-popover.tsx

@@ -1,162 +0,0 @@
-"use client";
-
-import * as Popover from "@radix-ui/react-popover";
-import { useEffect, useState } from "react";
-import { authHeaders } from "@/lib/proof/client-auth";
-import { wsFetch } from "@/lib/workspace-client";
-
-interface SpanMeta {
-	spanId: string;
-	origin: string | null;
-	basis: string | null;
-	basisDetail: string | null;
-	by: string | null;
-	at: string | null;
-}
-
-function readMeta(el: HTMLElement): SpanMeta {
-	return {
-		spanId: el.getAttribute("id") ?? "",
-		origin: el.getAttribute("origin"),
-		basis: el.getAttribute("basis"),
-		basisDetail: el.getAttribute("basis-detail"),
-		by: el.getAttribute("by"),
-		at: el.getAttribute("at"),
-	};
-}
-
-function timeAgo(iso: string | null): string {
-	if (!iso) return "";
-	const diff = Date.now() - new Date(iso).getTime();
-	const secs = Math.floor(diff / 1000);
-	if (secs < 60) return `${secs}s ago`;
-	const mins = Math.floor(secs / 60);
-	if (mins < 60) return `${mins}m ago`;
-	const hrs = Math.floor(mins / 60);
-	if (hrs < 24) return `${hrs}h ago`;
-	return `${Math.floor(hrs / 24)}d ago`;
-}
-
-interface Props {
-	targetEl: HTMLElement | null;
-	path: string;
-	onClose: () => void;
-	onComment?: () => void;
-}
-
-export function ProofSpanPopover({ targetEl, path, onClose, onComment }: Props) {
-	const [anchor, setAnchor] = useState<{ top: number; left: number } | null>(null);
-	const [meta, setMeta] = useState<SpanMeta | null>(null);
-	const [busy, setBusy] = useState(false);
-
-	useEffect(() => {
-		if (!targetEl) {
-			setAnchor(null);
-			setMeta(null);
-			return;
-		}
-		const rect = targetEl.getBoundingClientRect();
-		setAnchor({ top: rect.bottom + window.scrollY + 4, left: rect.left + window.scrollX });
-		setMeta(readMeta(targetEl));
-	}, [targetEl]);
-
-	useEffect(() => {
-		if (!targetEl) return;
-		const onKey = (e: KeyboardEvent) => {
-			if (e.key === "Escape") onClose();
-		};
-		window.addEventListener("keydown", onKey);
-		return () => window.removeEventListener("keydown", onKey);
-	}, [targetEl, onClose]);
-
-	if (!targetEl || !anchor || !meta) return null;
-
-	async function sendAction(action: "accept" | "revert") {
-		if (busy || !meta) return;
-		setBusy(true);
-		try {
-			await wsFetch("/api/agent/internal/span", {
-				method: "POST",
-				headers: { "Content-Type": "application/json", ...authHeaders() },
-				body: JSON.stringify({
-					path,
-					spanId: meta.spanId,
-					action,
-					idempotencyKey: crypto.randomUUID(),
-				}),
-			});
-		} finally {
-			setBusy(false);
-			onClose();
-		}
-	}
-
-	return (
-		<Popover.Root open>
-			<Popover.Anchor asChild>
-				<span
-					aria-hidden="true"
-					style={{
-						position: "fixed",
-						top: anchor.top,
-						left: anchor.left,
-						width: 0,
-						height: 0,
-						pointerEvents: "none",
-					}}
-				/>
-			</Popover.Anchor>
-			<Popover.Portal>
-				<Popover.Content
-					side="bottom"
-					align="start"
-					sideOffset={4}
-					collisionPadding={8}
-					onInteractOutside={onClose}
-					className="z-50 w-[min(16rem,calc(100vw-1rem))] bg-popover border border-border rounded-lg shadow-xl p-3 space-y-2 text-[12px] focus:outline-none"
-				>
-					<div className="space-y-0.5">
-						<p className="font-medium text-foreground truncate">
-							{meta.by ?? "unknown"} · {meta.basis ?? "—"} · {timeAgo(meta.at)}
-						</p>
-						{meta.basisDetail && (
-							<p className="text-muted-foreground italic truncate">
-								&ldquo;{meta.basisDetail}&rdquo;
-							</p>
-						)}
-						{meta.origin && (
-							<p className="text-muted-foreground/60">origin: {meta.origin}</p>
-						)}
-					</div>
-					<div className="flex items-center gap-1.5 pt-1">
-						<button
-							type="button"
-							disabled={busy}
-							onClick={() => void sendAction("accept")}
-							className="flex-1 py-1 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
-						>
-							Accept
-						</button>
-						<button
-							type="button"
-							disabled={busy}
-							onClick={() => void sendAction("revert")}
-							className="flex-1 py-1 rounded-md border border-border text-[11px] font-medium hover:bg-accent disabled:opacity-50 transition-colors"
-						>
-							Revert
-						</button>
-						<button
-							type="button"
-							disabled={busy}
-							onClick={() => { onComment?.(); onClose(); }}
-							className="flex-1 py-1 rounded-md border border-border text-[11px] font-medium hover:bg-accent disabled:opacity-50 transition-colors"
-						>
-							Comment
-						</button>
-					</div>
-					<Popover.Arrow className="fill-border" />
-				</Popover.Content>
-			</Popover.Portal>
-		</Popover.Root>
-	);
-}