wiki-viewer 1.14.1 → 2.0.0

package/.next/standalone/src/components/editor/extensions.ts

@@ -1,150 +0,0 @@
-import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
-import Link from "@tiptap/extension-link";
-import Placeholder from "@tiptap/extension-placeholder";
-import Subscript from "@tiptap/extension-subscript";
-import Superscript from "@tiptap/extension-superscript";
-import { Table } from "@tiptap/extension-table";
-import { TableCell } from "@tiptap/extension-table-cell";
-import { TableHeader } from "@tiptap/extension-table-header";
-import { TableRow } from "@tiptap/extension-table-row";
-import TaskItem from "@tiptap/extension-task-item";
-import TaskList from "@tiptap/extension-task-list";
-import TextAlign from "@tiptap/extension-text-align";
-import StarterKit from "@tiptap/starter-kit";
-import bash from "highlight.js/lib/languages/bash";
-import css from "highlight.js/lib/languages/css";
-import go from "highlight.js/lib/languages/go";
-import javascript from "highlight.js/lib/languages/javascript";
-import json from "highlight.js/lib/languages/json";
-import markdown from "highlight.js/lib/languages/markdown";
-import python from "highlight.js/lib/languages/python";
-import rust from "highlight.js/lib/languages/rust";
-import shell from "highlight.js/lib/languages/shell";
-import sql from "highlight.js/lib/languages/sql";
-import typescript from "highlight.js/lib/languages/typescript";
-import xml from "highlight.js/lib/languages/xml";
-import yaml from "highlight.js/lib/languages/yaml";
-import { createLowlight } from "lowlight";
-import { CalloutExtension } from "./callout-extension";
-import { DragHandle } from "./extensions/drag-handle";
-import { HeadingAnchors } from "./extensions/heading-anchors";
-import { ProofSpan } from "./extensions/proof-span";
-import { ResizableImage } from "./extensions/resizable-image";
-import { WikiLink } from "./wiki-link-extension";
-
-// Curated language set: covers ~95% of real-world snippets. The full `common`
-// import bundles 35+ language parsers (~70 kB gzipped) that users
-// rarely touch — swapping it for this 13-language list cuts the editor chunk
-// meaningfully. Add languages as demand grows.
-const lowlight = createLowlight({
-	bash,
-	css,
-	go,
-	javascript,
-	json,
-	markdown,
-	python,
-	rust,
-	shell,
-	sql,
-	typescript,
-	xml,
-	yaml,
-});
-
-export const editorExtensions = [
-	StarterKit.configure({
-		heading: { levels: [1, 2, 3, 4] },
-		codeBlock: false, // replaced by CodeBlockLowlight
-		// StarterKit v3 bundles Link + Underline — we register our own customized
-		// versions below, so disable the bundled copies to avoid duplicate-extension warnings.
-		link: false,
-		underline: false,
-	}),
-	CodeBlockLowlight.configure({
-		lowlight,
-		HTMLAttributes: {
-			class: "rounded-md bg-muted p-4 font-mono text-sm",
-		},
-	}),
-	Placeholder.configure({
-		placeholder: "Start writing, or press '/' for commands...",
-	}),
-	ResizableImage.configure({
-		HTMLAttributes: {
-			class: "rounded-lg max-w-full",
-		},
-		allowBase64: false,
-	}),
-	Table.configure({
-		resizable: true,
-		lastColumnResizable: false,
-		HTMLAttributes: {
-			class: "border-collapse w-full",
-		},
-	}),
-	TableRow,
-	TableCell,
-	TableHeader,
-	TaskList.configure({
-		HTMLAttributes: {
-			class: "task-list",
-		},
-	}),
-	TaskItem.configure({
-		nested: true,
-	}),
-	Link.configure({
-		openOnClick: false, // we handle clicks ourselves in the editor
-		HTMLAttributes: {
-			class: "text-primary underline cursor-pointer",
-		},
-	}).extend({
-		parseHTML() {
-			return [
-				{
-					tag: 'a[href]:not([data-wiki-link="true"])',
-				},
-			];
-		},
-		// Move the link shortcut off Mod-K — that key is owned by the global
-		// search palette everywhere in the app, including inside the editor.
-		addKeyboardShortcuts() {
-			return {
-				"Mod-e": () => {
-					const { state } = this.editor;
-					const { from, to } = state.selection;
-					if (from === to) return false;
-					const prevUrl = this.editor.getAttributes("link").href ?? "";
-					const url =
-						typeof window !== "undefined"
-							? window.prompt("Link URL", prevUrl)
-							: null;
-					if (url === null) return false;
-					if (url === "") {
-						return this.editor
-							.chain()
-							.focus()
-							.extendMarkRange("link")
-							.unsetLink()
-							.run();
-					}
-					return this.editor
-						.chain()
-						.focus()
-						.extendMarkRange("link")
-						.setLink({ href: url })
-						.run();
-				},
-			};
-		},
-	}),
-	CalloutExtension,
-	ProofSpan,
-	TextAlign.configure({ types: ["heading", "paragraph"] }),
-	Subscript,
-	Superscript,
-	DragHandle,
-	HeadingAnchors,
-	WikiLink,
-];

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

@@ -1,75 +0,0 @@
-"use client";
-
-import { Download, File, 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 FileFallbackViewerProps {
-	path: string;
-	title: string;
-}
-
-export function FileFallbackViewer({ path }: FileFallbackViewerProps) {
-	const assetUrl = withWs(`/api/assets/${path}`);
-	const filename = path.split("/").pop() || path;
-	const ext = filename.includes(".")
-		? filename.split(".").pop()?.toUpperCase()
-		: "";
-
-	const revealInFinder = async () => {
-		try {
-			await wsFetch("/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

@@ -1,236 +0,0 @@
-"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";
-import { withWs } from "@/lib/workspace-client";
-
-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={withWs(`/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

@@ -1,73 +0,0 @@
-"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

@@ -1,57 +0,0 @@
-"use client";
-
-import { Download, ExternalLink } from "lucide-react";
-import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
-import { Button } from "@/components/ui/button";
-import { withWs } from "@/lib/workspace-client";
-
-interface ImageViewerProps {
-	path: string;
-	title: string;
-}
-
-export function ImageViewer({ path, title }: ImageViewerProps) {
-	const src = withWs(`/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/large-file-gate.tsx

@@ -1,108 +0,0 @@
-"use client";
-
-import { Download, ExternalLink, FileWarning, 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 LargeFileGateProps {
-	path: string;
-	size: number;
-	/** Mount the real viewer. */
-	onOpen: () => void;
-}
-
-function formatSize(bytes: number): string {
-	if (bytes >= 1024 * 1024 * 1024)
-		return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
-	if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-	if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`;
-	return `${bytes} B`;
-}
-
-/**
- * Confirmation shown before mounting a viewer that loads and renders a whole
- * large file. Sits above the viewer dispatch, so it guards every unsafe viewer
- * in one place. The user can open it anyway, download it, or open the raw bytes.
- */
-export function LargeFileGate({ path, size, onOpen }: LargeFileGateProps) {
-	const assetUrl = withWs(`/api/assets/${path}`);
-	const filename = path.split("/").pop() || path;
-	const ext = filename.includes(".")
-		? filename.split(".").pop()?.toUpperCase()
-		: "";
-
-	const revealInFinder = async () => {
-		try {
-			await wsFetch("/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-amber-500/10">
-						<FileWarning className="size-8 text-amber-500" />
-					</div>
-					<div className="space-y-1">
-						<p className="text-sm font-medium">{filename}</p>
-						<p className="text-xs text-muted-foreground">
-							This file is {formatSize(size)}. Opening it in the viewer may
-							freeze the tab while it loads and renders.
-						</p>
-					</div>
-					<div className="flex flex-wrap items-center justify-center gap-2">
-						<Button
-							variant="default"
-							size="sm"
-							className="gap-2"
-							onClick={onOpen}
-						>
-							Open anyway
-						</Button>
-						<Button
-							variant="outline"
-							size="sm"
-							className="gap-2"
-							onClick={() => window.open(assetUrl, "_blank")}
-						>
-							<ExternalLink className="h-4 w-4" />
-							Raw
-						</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>
-						<Button
-							variant="outline"
-							size="sm"
-							className="gap-2"
-							onClick={revealInFinder}
-						>
-							<FolderOpen className="h-4 w-4" />
-							Open in Finder
-						</Button>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}