wiki-viewer 1.0.0

package/.next/standalone/src/components/editor/file-fallback-viewer.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Download, File, FolderOpen } from "lucide-react";
+import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
+import { Button } from "@/components/ui/button";
+
+interface FileFallbackViewerProps {
+	path: string;
+	title: string;
+}
+
+export function FileFallbackViewer({ path }: FileFallbackViewerProps) {
+	const assetUrl = `/api/assets/${path}`;
+	const filename = path.split("/").pop() || path;
+	const ext = filename.includes(".")
+		? filename.split(".").pop()?.toUpperCase()
+		: "";
+
+	const revealInFinder = async () => {
+		try {
+			await fetch("/api/system/reveal", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ path }),
+			});
+		} catch {
+			/* ignore */
+		}
+	};
+
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden">
+			<ViewerToolbar path={path} badge={ext || undefined} />
+			<div className="flex-1 flex items-center justify-center">
+				<div className="flex flex-col items-center gap-4 text-center max-w-sm">
+					<div className="flex size-16 items-center justify-center rounded-2xl bg-muted">
+						<File className="size-8 text-muted-foreground/50" />
+					</div>
+					<div className="space-y-1">
+						<p className="text-sm font-medium">{filename}</p>
+						<p className="text-xs text-muted-foreground">
+							This file type can&apos;t be previewed in Cabinet.
+						</p>
+					</div>
+					<div className="flex items-center gap-2">
+						<Button
+							variant="outline"
+							size="sm"
+							className="gap-2"
+							onClick={revealInFinder}
+						>
+							<FolderOpen className="h-4 w-4" />
+							Open in Finder
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							className="gap-2"
+							onClick={() => {
+								const a = document.createElement("a");
+								a.href = assetUrl;
+								a.download = filename;
+								a.click();
+							}}
+						>
+							<Download className="h-4 w-4" />
+							Download
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

package/.next/standalone/src/components/editor/folder-index.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import {
+	AppWindow,
+	FileAudio,
+	FileCode2,
+	FileImage,
+	FileSpreadsheet,
+	FileText,
+	FileVideo,
+	Folder,
+	Globe,
+	LayoutGrid,
+	List as ListIcon,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import { useEditorStore } from "@/stores/editor-store";
+import { useTreeStore } from "@/stores/tree-store";
+import type { TreeNode } from "@/types";
+
+type ViewMode = "list" | "gallery";
+
+const VIEW_MODE_KEY = "kb-folder-view-mode";
+
+function loadModePref(path: string): ViewMode | null {
+	if (typeof window === "undefined") return null;
+	try {
+		const raw = localStorage.getItem(VIEW_MODE_KEY);
+		if (!raw) return null;
+		const parsed = JSON.parse(raw) as Record<string, ViewMode>;
+		return parsed[path] ?? null;
+	} catch {
+		return null;
+	}
+}
+
+function saveModePref(path: string, mode: ViewMode) {
+	if (typeof window === "undefined") return;
+	try {
+		const raw = localStorage.getItem(VIEW_MODE_KEY);
+		const parsed = raw ? (JSON.parse(raw) as Record<string, ViewMode>) : {};
+		parsed[path] = mode;
+		localStorage.setItem(VIEW_MODE_KEY, JSON.stringify(parsed));
+	} catch {
+		// ignore quota / parse errors
+	}
+}
+
+function isImageChild(node: TreeNode): boolean {
+	return node.type === "image";
+}
+
+// A folder is "image-heavy" when it has enough images to make a gallery feel
+// useful AND images dominate the child set. Tuned for moodboards and
+// screenshot dumps without surprising mixed folders.
+function isImageHeavy(children: TreeNode[]): boolean {
+	if (children.length === 0) return false;
+	const images = children.filter(isImageChild).length;
+	return images >= 4 && images / children.length >= 0.6;
+}
+
+function iconFor(node: TreeNode) {
+	switch (node.type) {
+		case "directory":
+		case "cabinet":
+			return Folder;
+		case "image":
+			return FileImage;
+		case "video":
+			return FileVideo;
+		case "audio":
+			return FileAudio;
+		case "code":
+			return FileCode2;
+		case "csv":
+		case "xlsx":
+			return FileSpreadsheet;
+		case "website":
+			return Globe;
+		case "app":
+			return AppWindow;
+		default:
+			return FileText;
+	}
+}
+
+function navigateTo(path: string) {
+	const { selectPage, expandPath } = useTreeStore.getState();
+	const parts = path.split("/");
+	for (let i = 1; i < parts.length; i++) {
+		expandPath(parts.slice(0, i).join("/"));
+	}
+	selectPage(path);
+	void useEditorStore.getState().loadPage(path);
+}
+
+interface FolderIndexProps {
+	folderPath: string;
+	entries: TreeNode[];
+}
+
+// The parent passes a `key={folderPath}` so this component remounts when the
+// folder changes — that's why state can safely seed from the path on mount
+// without a re-sync effect.
+export function FolderIndex({ folderPath, entries }: FolderIndexProps) {
+	const imageHeavy = useMemo(() => isImageHeavy(entries), [entries]);
+
+	const [mode, setMode] = useState<ViewMode>(() => {
+		const saved = loadModePref(folderPath);
+		if (saved) return saved;
+		return imageHeavy ? "gallery" : "list";
+	});
+
+	const onSetMode = (next: ViewMode) => {
+		setMode(next);
+		saveModePref(folderPath, next);
+	};
+
+	// Sort: directories first, then by name. Stable so siblings stay grouped.
+	const sorted = useMemo(() => {
+		const copy = [...entries];
+		copy.sort((a, b) => {
+			const aDir = a.type === "directory" || a.type === "cabinet";
+			const bDir = b.type === "directory" || b.type === "cabinet";
+			if (aDir !== bDir) return aDir ? -1 : 1;
+			return a.name.localeCompare(b.name);
+		});
+		return copy;
+	}, [entries]);
+
+	return (
+		<div className="space-y-3">
+			<div className="flex items-center justify-between">
+				<p className="text-[11px] uppercase tracking-wider text-muted-foreground/70">
+					{sorted.length} {sorted.length === 1 ? "item" : "items"}
+				</p>
+				<div className="inline-flex items-center rounded-md border border-border p-0.5 text-[11px]">
+					<button
+						onClick={() => onSetMode("list")}
+						className={`flex items-center gap-1 px-2 py-1 rounded transition-colors ${
+							mode === "list"
+								? "bg-accent text-foreground"
+								: "text-muted-foreground hover:text-foreground"
+						}`}
+						aria-pressed={mode === "list"}
+						title="List view"
+					>
+						<ListIcon className="h-3 w-3" />
+						List
+					</button>
+					<button
+						onClick={() => onSetMode("gallery")}
+						className={`flex items-center gap-1 px-2 py-1 rounded transition-colors ${
+							mode === "gallery"
+								? "bg-accent text-foreground"
+								: "text-muted-foreground hover:text-foreground"
+						}`}
+						aria-pressed={mode === "gallery"}
+						title="Gallery view"
+					>
+						<LayoutGrid className="h-3 w-3" />
+						Gallery
+					</button>
+				</div>
+			</div>
+
+			{mode === "list" ? (
+				<ul className="divide-y divide-border rounded-md border border-border overflow-hidden">
+					{sorted.map((child) => {
+						const Icon = iconFor(child);
+						const title = child.frontmatter?.title || child.name;
+						return (
+							<li key={child.path}>
+								<button
+									onClick={() => navigateTo(child.path)}
+									className="w-full flex items-center gap-3 px-3 py-2 text-left text-sm hover:bg-accent/50 transition-colors"
+								>
+									<Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
+									<span className="flex-1 truncate">{title}</span>
+									<span className="text-[11px] text-muted-foreground/60 capitalize">
+										{child.type}
+									</span>
+								</button>
+							</li>
+						);
+					})}
+				</ul>
+			) : (
+				<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
+					{sorted.map((child) => {
+						const title = child.frontmatter?.title || child.name;
+						if (isImageChild(child)) {
+							return (
+								<button
+									key={child.path}
+									onClick={() => navigateTo(child.path)}
+									className="group flex flex-col gap-1.5 text-left"
+									title={title}
+								>
+									<div className="aspect-square w-full overflow-hidden rounded-md border border-border bg-muted">
+										<img
+											src={`/api/assets/${child.path}`}
+											alt={title}
+											loading="lazy"
+											className="h-full w-full object-cover transition-transform group-hover:scale-[1.02]"
+										/>
+									</div>
+									<span className="truncate text-[12px] text-muted-foreground group-hover:text-foreground">
+										{title}
+									</span>
+								</button>
+							);
+						}
+						const Icon = iconFor(child);
+						return (
+							<button
+								key={child.path}
+								onClick={() => navigateTo(child.path)}
+								className="group flex flex-col gap-1.5 text-left"
+								title={title}
+							>
+								<div className="aspect-square w-full flex items-center justify-center rounded-md border border-border bg-muted/40 group-hover:bg-muted transition-colors">
+									<Icon className="h-8 w-8 text-muted-foreground/60" />
+								</div>
+								<span className="truncate text-[12px] text-muted-foreground group-hover:text-foreground">
+									{title}
+								</span>
+							</button>
+						);
+					})}
+				</div>
+			)}
+		</div>
+	);
+}

package/.next/standalone/src/components/editor/google-doc-viewer.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Info } from "lucide-react";
+import { useMemo } from "react";
+import {
+	detectGoogle,
+	type GoogleKind,
+	googleKindLabel,
+} from "@/lib/google/detect";
+import type { GoogleFrontmatter } from "@/types";
+import { OfficeChrome } from "./office/office-chrome";
+
+interface Props {
+	path: string;
+	title: string;
+	google: GoogleFrontmatter;
+}
+
+export function GoogleDocViewer({ path, title, google }: Props) {
+	const resolved = useMemo(() => detectGoogle(google.url || ""), [google.url]);
+	const embedUrl = google.embedUrl ?? resolved?.embedUrl ?? "";
+	const openUrl = resolved?.openUrl ?? google.url ?? "";
+	const kind: GoogleKind =
+		(google.kind as GoogleKind) ?? resolved?.kind ?? "docs";
+	const label = googleKindLabel(kind).toUpperCase();
+
+	if (!embedUrl) {
+		return (
+			<div className="flex-1 flex flex-col overflow-hidden">
+				<OfficeChrome path={path} title={title} extLabel="GOOGLE" hideFinder />
+				<div className="flex-1 flex items-center justify-center p-6">
+					<div className="max-w-md text-center space-y-2">
+						<p className="text-sm font-medium">No Google URL set</p>
+						<p className="text-xs text-muted-foreground">
+							Add a <code>google.url</code> field to this page&apos;s
+							frontmatter pointing to a Google Sheets, Slides, Docs or Forms
+							link.
+						</p>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden">
+			<OfficeChrome
+				path={path}
+				title={title}
+				extLabel={label}
+				hideFinder
+				external={
+					openUrl ? { label: "Open in Google", href: openUrl } : undefined
+				}
+			/>
+			<div className="px-4 py-1.5 border-b border-border bg-muted/30 text-[11px] text-muted-foreground flex items-center gap-1.5">
+				<Info className="h-3 w-3 shrink-0" />
+				Embed requires the doc&apos;s sharing to be{" "}
+				<strong className="text-foreground/80">Anyone with the link</strong> or{" "}
+				<strong className="text-foreground/80">Published to the web</strong>.
+			</div>
+			<div className="flex-1 relative bg-muted/30">
+				<iframe
+					key={embedUrl}
+					src={embedUrl}
+					className="absolute inset-0 w-full h-full border-0 bg-background"
+					allow="clipboard-write; fullscreen"
+					title={title}
+				/>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { Download, ExternalLink } from "lucide-react";
+import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
+import { Button } from "@/components/ui/button";
+
+interface ImageViewerProps {
+	path: string;
+	title: string;
+}
+
+export function ImageViewer({ path, title }: ImageViewerProps) {
+	const src = `/api/assets/${path}`;
+	const filename = path.split("/").pop() || path;
+	const ext = filename.includes(".")
+		? filename.split(".").pop()?.toUpperCase()
+		: "IMG";
+
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden">
+			<ViewerToolbar path={path} badge={ext}>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-7 gap-1.5 text-xs"
+					onClick={() => {
+						const a = document.createElement("a");
+						a.href = src;
+						a.download = filename;
+						a.click();
+					}}
+				>
+					<Download className="h-3.5 w-3.5" />
+					Download
+				</Button>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-7 gap-1.5 text-xs"
+					onClick={() => window.open(src, "_blank")}
+				>
+					<ExternalLink className="h-3.5 w-3.5" />
+					Open in new tab
+				</Button>
+			</ViewerToolbar>
+			<div className="flex-1 overflow-auto flex items-center justify-center bg-[#1a1a1a] p-8">
+				<img
+					src={src}
+					alt={title}
+					className="max-w-full max-h-full object-contain rounded-md shadow-lg"
+					style={{ imageRendering: "auto" }}
+				/>
+			</div>
+		</div>
+	);
+}

package/.next/standalone/src/components/editor/link-popover.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { ExternalLink, Link as LinkIcon, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+
+interface Props {
+	anchor: { top: number; left: number };
+	initialUrl?: string;
+	onCancel: () => void;
+	onApply: (url: string) => void;
+	onRemove?: () => void;
+}
+
+export function LinkPopover({
+	anchor,
+	initialUrl = "",
+	onCancel,
+	onApply,
+	onRemove,
+}: Props) {
+	const [url, setUrl] = useState(initialUrl);
+
+	useEffect(() => {
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === "Escape") onCancel();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [onCancel]);
+
+	const apply = () => {
+		const trimmed = url.trim();
+		if (!trimmed) {
+			onCancel();
+			return;
+		}
+		onApply(trimmed);
+	};
+
+	return (
+		<div
+			className="absolute z-50 w-[340px] bg-popover border border-border rounded-lg shadow-xl overflow-hidden"
+			style={{ top: anchor.top, left: anchor.left }}
+			onMouseDown={(e) => e.stopPropagation()}
+		>
+			<div className="flex items-center justify-between px-3 py-2 border-b border-border">
+				<div className="flex items-center gap-1.5 text-[12px] font-medium">
+					<LinkIcon className="w-3.5 h-3.5" />
+					{initialUrl ? "Edit link" : "Add link"}
+				</div>
+				<button
+					type="button"
+					onClick={onCancel}
+					className="text-[11px] text-muted-foreground hover:text-foreground"
+				>
+					Cancel
+				</button>
+			</div>
+
+			<div className="p-3 space-y-2">
+				<input
+					type="url"
+					autoFocus
+					value={url}
+					placeholder="https://example.com"
+					onChange={(e) => setUrl(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter") {
+							e.preventDefault();
+							apply();
+						}
+					}}
+					className="w-full bg-background border border-border rounded-md px-2.5 py-1.5 text-[12px] focus:outline-none focus:ring-2 focus:ring-primary/30"
+				/>
+				<div className="flex items-center gap-2">
+					<button
+						type="button"
+						onClick={apply}
+						disabled={!url.trim()}
+						className="flex-1 py-1.5 text-[12px] rounded-md bg-primary text-primary-foreground disabled:opacity-50 hover:bg-primary/90"
+					>
+						{initialUrl ? "Update" : "Add link"}
+					</button>
+					{initialUrl && (
+						<>
+							<a
+								href={initialUrl}
+								target="_blank"
+								rel="noreferrer noopener"
+								className="p-1.5 rounded-md border border-border hover:bg-accent text-muted-foreground hover:text-foreground"
+								title="Open link"
+							>
+								<ExternalLink className="w-3.5 h-3.5" />
+							</a>
+							{onRemove && (
+								<button
+									type="button"
+									onClick={onRemove}
+									className="p-1.5 rounded-md border border-border hover:bg-accent text-destructive"
+									title="Remove link"
+								>
+									<Trash2 className="w-3.5 h-3.5" />
+								</button>
+							)}
+						</>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}