wiki-viewer 1.14.1 → 2.0.0

package/.next/standalone/src/components/editor/suggestion-card.tsx

@@ -1,206 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { authHeaders } from "@/lib/proof/client-auth";
-import { wsFetch } from "@/lib/workspace-client";
-import type { Suggestion } from "@/lib/proof/types";
-
-interface Props {
-	suggestion: Suggestion;
-	currentMarkdown: string; // current block content for replace diff
-	path: string;
-	baseRevision: number;
-	/** Return the freshest known revision (for 409 retry). */
-	getLatestRevision: () => number;
-	top: number;
-	left: number;
-	width: number;
-	onSettled: () => void; // called after accept or reject so parent can refresh
-	readOnly?: boolean;
-}
-
-function kindVerb(kind: Suggestion["kind"]): string {
-	switch (kind) {
-		case "replace": return "replacing this block";
-		case "insertAfter": return "inserting content after this block";
-		case "insertBefore": return "inserting content before this block";
-		case "delete": return "deleting this block";
-	}
-}
-
-async function postOp(
-	path: string,
-	baseRevision: number,
-	opType: "suggestion.accept" | "suggestion.reject",
-	suggestionId: string,
-): Promise<{ ok: boolean; status: number }> {
-	const encodedPath = encodeURIComponent(path).replace(/%2F/g, "/");
-	const res = await wsFetch(`/api/agent/files/${encodedPath}`, {
-		method: "POST",
-		headers: {
-			"Content-Type": "application/json",
-			"Idempotency-Key": crypto.randomUUID(),
-			...authHeaders(),
-		},
-		body: JSON.stringify({
-			baseRevision,
-			by: "human",
-			ops: [{ type: opType, suggestionId }],
-		}),
-	});
-	return { ok: res.ok, status: res.status };
-}
-
-/**
- * Inline suggestion card rendered as an absolutely-positioned sibling to
- * the ProseMirror editor. NOT mounted inside the editor DOM tree.
- *
- * Phase D coordination: this component uses `top`/`left`/`width` computed by
- * the editor's block-ref position tracker. Phase D's comment-pip uses the
- * same tracker (see editor.tsx: useBlockRefPositions).
- */
-export function SuggestionCard({
-	suggestion,
-	currentMarkdown,
-	path,
-	baseRevision,
-	getLatestRevision,
-	top,
-	left,
-	width,
-	onSettled,
-	readOnly,
-}: Props) {
-	const [busy, setBusy] = useState(false);
-
-	async function handleAccept() {
-		if (busy) return;
-		setBusy(true);
-		try {
-			let result = await postOp(path, baseRevision, "suggestion.accept", suggestion.id);
-			// On 409 retry once with latest known revision
-			if (!result.ok && result.status === 409) {
-				result = await postOp(path, getLatestRevision(), "suggestion.accept", suggestion.id);
-			}
-		} finally {
-			setBusy(false);
-			onSettled();
-		}
-	}
-
-	async function handleReject() {
-		if (busy) return;
-		setBusy(true);
-		try {
-			await postOp(path, baseRevision, "suggestion.reject", suggestion.id);
-		} finally {
-			setBusy(false);
-			onSettled();
-		}
-	}
-
-	const isDelete = suggestion.kind === "delete";
-	const isInsert = suggestion.kind === "insertAfter" || suggestion.kind === "insertBefore";
-
-	return (
-		<div
-			style={{
-				position: "absolute",
-				top,
-				left,
-				width: width > 0 ? width : undefined,
-				zIndex: 30,
-			}}
-			className="my-1 rounded-lg border border-border bg-card shadow-md text-[12px] overflow-hidden"
-			role="region"
-			aria-label={`Suggestion by ${suggestion.by}`}
-		>
-			{/* Header */}
-			<div className="flex items-center justify-between px-3 py-2 bg-muted/50 border-b border-border">
-				<span className="font-medium text-foreground">
-					<span className="text-primary">{suggestion.by}</span>
-					{" suggests "}
-					<span className="text-muted-foreground">{kindVerb(suggestion.kind)}</span>
-				</span>
-			</div>
-
-			{/* Body */}
-			<div className="p-3 space-y-2">
-				{/* replace: two-pane diff */}
-				{suggestion.kind === "replace" && (
-					<>
-						<div>
-							<p className="text-[10px] uppercase tracking-wider text-muted-foreground/60 mb-1">
-								─ current ─
-							</p>
-							<pre className="whitespace-pre-wrap font-mono text-[11px] text-muted-foreground bg-destructive/5 rounded px-2 py-1">
-								{currentMarkdown || "(empty)"}
-							</pre>
-						</div>
-						<div>
-							<p className="text-[10px] uppercase tracking-wider text-muted-foreground/60 mb-1">
-								─ proposed ─
-							</p>
-							<pre className="whitespace-pre-wrap font-mono text-[11px] text-foreground bg-primary/5 rounded px-2 py-1">
-								{suggestion.markdown ?? "(empty)"}
-							</pre>
-						</div>
-					</>
-				)}
-
-				{/* insert: proposed content with label */}
-				{isInsert && (
-					<div>
-						<p className="text-[10px] uppercase tracking-wider text-muted-foreground/60 mb-1">
-							─ will be inserted ─
-						</p>
-						<pre className="whitespace-pre-wrap font-mono text-[11px] text-foreground bg-primary/5 rounded px-2 py-1">
-							{suggestion.markdown ?? "(empty)"}
-						</pre>
-					</div>
-				)}
-
-				{/* delete: current content struck through */}
-				{isDelete && (
-					<div>
-						<p className="text-[10px] uppercase tracking-wider text-muted-foreground/60 mb-1">
-							─ will be deleted ─
-						</p>
-						<pre className="whitespace-pre-wrap font-mono text-[11px] text-muted-foreground line-through bg-destructive/5 rounded px-2 py-1">
-							{currentMarkdown || "(empty)"}
-						</pre>
-					</div>
-				)}
-
-				{/* Reason */}
-				{suggestion.basisDetail && (
-					<p className="italic text-muted-foreground/70 text-[11px]">
-						Reason: {suggestion.basisDetail}
-					</p>
-				)}
-			</div>
-
-			{/* Actions */}
-			{!readOnly && (
-			<div className="flex items-center gap-2 px-3 py-2 border-t border-border bg-muted/30">
-				<button
-					type="button"
-					disabled={busy}
-					onClick={() => void handleAccept()}
-					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 handleReject()}
-					className="flex-1 py-1 rounded-md border border-border text-[11px] font-medium hover:bg-accent disabled:opacity-50 transition-colors"
-				>
-					Reject
-				</button>
-			</div>
-			)}
-		</div>
-	);
-}

package/.next/standalone/src/components/editor/table-menu.tsx

@@ -1,232 +0,0 @@
-"use client";
-
-import {
-	cellAround,
-	isInTable,
-	moveTableColumn,
-	moveTableRow,
-	selectedRect,
-} from "@tiptap/pm/tables";
-import type { Editor } from "@tiptap/react";
-import { BubbleMenu } from "@tiptap/react/menus";
-import {
-	ArrowDown,
-	ArrowLeft,
-	ArrowRight,
-	ArrowUp,
-	Columns3,
-	PanelLeft,
-	PanelTop,
-	Rows3,
-	Table,
-	Trash2,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-
-interface TableMenuProps {
-	editor: Editor | null;
-}
-
-interface TableButtonProps {
-	label: string;
-	icon: React.ComponentType<{ className?: string }>;
-	disabled?: boolean;
-	active?: boolean;
-	danger?: boolean;
-	onAction: () => void;
-}
-
-function TableButton({
-	label,
-	icon: Icon,
-	disabled,
-	active,
-	danger,
-	onAction,
-}: TableButtonProps) {
-	return (
-		<button
-			type="button"
-			aria-label={label}
-			title={label}
-			disabled={disabled}
-			onMouseDown={(event) => event.preventDefault()}
-			onClick={(event) => {
-				event.preventDefault();
-				onAction();
-			}}
-			className={cn(
-				"h-7 w-7 inline-flex items-center justify-center rounded text-foreground/80 hover:bg-accent transition-colors disabled:pointer-events-none disabled:opacity-35",
-				active && "bg-accent text-foreground",
-				danger && "text-destructive hover:bg-destructive/10",
-			)}
-		>
-			<Icon className="h-3.5 w-3.5" />
-		</button>
-	);
-}
-
-function Separator() {
-	return <div className="mx-1 h-5 w-px bg-border" />;
-}
-
-export function TableMenu({ editor }: TableMenuProps) {
-	if (!editor) return null;
-
-	const getRect = () => {
-		if (!isInTable(editor.state)) return null;
-		try {
-			return selectedRect(editor.state);
-		} catch {
-			return null;
-		}
-	};
-
-	const run = (action: () => boolean) => {
-		const ok = action();
-		if (ok) {
-			editor.commands.focus();
-			editor.commands.fixTables();
-		}
-	};
-
-	const moveRow = (direction: -1 | 1) => {
-		const rect = getRect();
-		if (!rect) return;
-		const from = rect.top;
-		const to = from + direction;
-		if (to < 0 || to >= rect.map.height) return;
-		moveTableRow({ from, to })(editor.state, editor.view.dispatch);
-		editor.commands.focus();
-	};
-
-	const moveColumn = (direction: -1 | 1) => {
-		const rect = getRect();
-		if (!rect) return;
-		const from = rect.left;
-		const to = from + direction;
-		if (to < 0 || to >= rect.map.width) return;
-		moveTableColumn({ from, to })(editor.state, editor.view.dispatch);
-		editor.commands.focus();
-	};
-
-	const selectCellText = () => {
-		const $cell = cellAround(editor.state.selection.$from);
-		const cell = $cell?.nodeAfter;
-		if (!$cell || !cell) return;
-		editor
-			.chain()
-			.focus()
-			.setTextSelection({
-				from: $cell.pos + 1,
-				to: $cell.pos + cell.nodeSize - 1,
-			})
-			.run();
-	};
-
-	const rect = getRect();
-	const canMoveRowUp = !!rect && rect.top > 0;
-	const canMoveRowDown = !!rect && rect.top < rect.map.height - 1;
-	const canMoveColumnLeft = !!rect && rect.left > 0;
-	const canMoveColumnRight = !!rect && rect.left < rect.map.width - 1;
-
-	return (
-		<BubbleMenu
-			editor={editor}
-			pluginKey="tableMenu"
-			options={{ placement: "top", offset: 10 }}
-			shouldShow={({ editor: activeEditor }) => activeEditor.isActive("table")}
-			className="flex items-center gap-0.5 rounded-md border border-border bg-popover px-1 py-1 shadow-lg"
-		>
-			<TableButton
-				label="Select cell text"
-				icon={Table}
-				onAction={selectCellText}
-			/>
-			<Separator />
-			<TableButton
-				label="Add row above"
-				icon={Rows3}
-				onAction={() => run(() => editor.chain().focus().addRowBefore().run())}
-			/>
-			<TableButton
-				label="Add row below"
-				icon={ArrowDown}
-				onAction={() => run(() => editor.chain().focus().addRowAfter().run())}
-			/>
-			<TableButton
-				label="Move row up"
-				icon={ArrowUp}
-				disabled={!canMoveRowUp}
-				onAction={() => moveRow(-1)}
-			/>
-			<TableButton
-				label="Move row down"
-				icon={ArrowDown}
-				disabled={!canMoveRowDown}
-				onAction={() => moveRow(1)}
-			/>
-			<TableButton
-				label="Delete row"
-				icon={Trash2}
-				danger
-				onAction={() => run(() => editor.chain().focus().deleteRow().run())}
-			/>
-			<Separator />
-			<TableButton
-				label="Add column before"
-				icon={Columns3}
-				onAction={() =>
-					run(() => editor.chain().focus().addColumnBefore().run())
-				}
-			/>
-			<TableButton
-				label="Add column after"
-				icon={ArrowRight}
-				onAction={() =>
-					run(() => editor.chain().focus().addColumnAfter().run())
-				}
-			/>
-			<TableButton
-				label="Move column left"
-				icon={ArrowLeft}
-				disabled={!canMoveColumnLeft}
-				onAction={() => moveColumn(-1)}
-			/>
-			<TableButton
-				label="Move column right"
-				icon={ArrowRight}
-				disabled={!canMoveColumnRight}
-				onAction={() => moveColumn(1)}
-			/>
-			<TableButton
-				label="Delete column"
-				icon={Trash2}
-				danger
-				onAction={() => run(() => editor.chain().focus().deleteColumn().run())}
-			/>
-			<Separator />
-			<TableButton
-				label="Toggle header row"
-				icon={PanelTop}
-				onAction={() =>
-					run(() => editor.chain().focus().toggleHeaderRow().run())
-				}
-			/>
-			<TableButton
-				label="Toggle header column"
-				icon={PanelLeft}
-				onAction={() =>
-					run(() => editor.chain().focus().toggleHeaderColumn().run())
-				}
-			/>
-			<Separator />
-			<TableButton
-				label="Delete table"
-				icon={Trash2}
-				danger
-				onAction={() => editor.chain().focus().deleteTable().run()}
-			/>
-		</BubbleMenu>
-	);
-}

package/.next/standalone/src/components/editor/view-mode-comment-button.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import { MessageCircle } from "lucide-react";
-import { type RefObject, useEffect, useState } from "react";
-
-interface Props {
-	/** The scrollable container that wraps the editor content. */
-	containerRef: RefObject<HTMLElement | null>;
-	onComment: () => void;
-}
-
-/**
- * Floating comment button for read-only view mode.
- *
- * TipTap's BubbleMenu doesn't fire when the editor is non-editable, so this
- * component listens to the native selectionchange event and positions a small
- * button above whatever the user has selected — as long as the selection is
- * inside the editor container.
- */
-export function ViewModeCommentButton({ containerRef, onComment }: Props) {
-	const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
-
-	useEffect(() => {
-		function update() {
-			const sel = window.getSelection();
-			if (!sel || sel.isCollapsed || sel.rangeCount === 0) {
-				setPos(null);
-				return;
-			}
-			const range = sel.getRangeAt(0);
-			const container = containerRef.current;
-			if (!container || !container.contains(range.commonAncestorContainer)) {
-				setPos(null);
-				return;
-			}
-			const rect = range.getBoundingClientRect();
-			// rect can be all-zeros for collapsed or invisible ranges
-			if (rect.width === 0 && rect.height === 0) {
-				setPos(null);
-				return;
-			}
-			setPos({
-				top: rect.top - 38,
-				left: rect.left + rect.width / 2,
-			});
-		}
-
-		document.addEventListener("selectionchange", update);
-		return () => document.removeEventListener("selectionchange", update);
-	}, [containerRef]);
-
-	if (!pos) return null;
-
-	return (
-		<button
-			type="button"
-			style={{
-				position: "fixed",
-				top: pos.top,
-				left: pos.left,
-				transform: "translateX(-50%)",
-				zIndex: 50,
-			}}
-			className="flex items-center gap-1 px-2 py-1 bg-popover border border-border rounded-sm shadow-lg text-[12px] text-foreground/80 hover:text-foreground hover:bg-accent transition-colors"
-			onMouseDown={(e) => e.preventDefault()}
-			onClick={() => {
-				onComment();
-				setPos(null);
-			}}
-			aria-label="Add comment"
-			title="Add comment"
-		>
-			<MessageCircle className="w-3.5 h-3.5" />
-			<span>Comment</span>
-		</button>
-	);
-}

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

@@ -1,75 +0,0 @@
-"use client";
-
-import { ArrowLeft, ExternalLink } from "lucide-react";
-import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
-import { Button } from "@/components/ui/button";
-import { withWs } from "@/lib/workspace-client";
-
-interface WebsiteViewerProps {
-	path: string;
-	title: string;
-	/** Override iframe src. Defaults to `/api/assets/{path}/index.html`. */
-	src?: string;
-	fullscreen?: boolean;
-	onExit?: () => void;
-}
-
-export function WebsiteViewer({
-	path,
-	title,
-	src,
-	fullscreen,
-	onExit,
-}: WebsiteViewerProps) {
-	const iframeSrc = withWs(src ?? `/api/assets/${path}/index.html`);
-	const exitButton =
-		fullscreen && onExit ? (
-			<Button
-				variant="ghost"
-				size="sm"
-				className="h-7 gap-1.5 text-xs"
-				onClick={onExit}
-				title="Exit app"
-			>
-				<ArrowLeft className="h-3.5 w-3.5" />
-				Exit app
-			</Button>
-		) : null;
-
-	return (
-		<div className="flex-1 flex flex-col overflow-hidden">
-			<ViewerToolbar
-				path={path}
-				badge={fullscreen ? "App" : undefined}
-				showBreadcrumb={!fullscreen}
-				leading={
-					fullscreen ? (
-						<>
-							{exitButton}
-							<span className="truncate text-[13px] font-medium text-foreground">
-								{title}
-							</span>
-						</>
-					) : null
-				}
-			>
-				<Button
-					variant="ghost"
-					size="sm"
-					className="h-7 gap-1.5 text-xs"
-					onClick={() => window.open(iframeSrc, "_blank")}
-				>
-					<ExternalLink className="h-3.5 w-3.5" />
-					Open in new tab
-				</Button>
-			</ViewerToolbar>
-
-			<iframe
-				src={iframeSrc}
-				className="flex-1 w-full border-0 bg-card"
-				title={title}
-				sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation-by-user-activation"
-			/>
-		</div>
-	);
-}