wiki-viewer 1.0.0

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

@@ -0,0 +1,92 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+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"),
+					fetch(`/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

@@ -0,0 +1,82 @@
+"use client";
+
+import { Download, ExternalLink, FolderOpen } from "lucide-react";
+import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
+import { Button } from "@/components/ui/button";
+
+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 = `/api/assets/${path}`;
+	const filename = path.split("/").pop() || path;
+
+	const revealInFinder = async () => {
+		try {
+			await fetch("/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

@@ -0,0 +1,103 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+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"),
+					fetch(`/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

@@ -0,0 +1,116 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { cn } from "@/lib/utils";
+import { OfficeChrome } from "./office-chrome";
+
+interface Props {
+	path: string;
+	title: string;
+}
+
+interface Sheet {
+	name: string;
+	html: string;
+}
+
+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);
+
+	useEffect(() => {
+		let cancelled = false;
+		setLoading(true);
+		setError(null);
+		setSheets(null);
+		(async () => {
+			try {
+				const [XLSX, res] = await Promise.all([
+					import("xlsx"),
+					fetch(`/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,
+				});
+				const result: Sheet[] = wb.SheetNames.map((name) => ({
+					name,
+					html: XLSX.utils.sheet_to_html(wb.Sheets[name], { editable: false }),
+				}));
+				if (cancelled) return;
+				setSheets(result);
+				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 && (
+					<div
+						className="xlsx-sheet p-3 text-[12px]"
+						dangerouslySetInnerHTML={{ __html: current.html }}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,31 @@
+"use client";
+
+import { ExternalLink } from "lucide-react";
+import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
+import { Button } from "@/components/ui/button";
+
+interface PdfViewerProps {
+	path: string;
+	title: string;
+}
+
+export function PdfViewer({ path, title }: PdfViewerProps) {
+	const pdfSrc = `/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>
+	);
+}