@flanksource/clicky-ui 0.3.55 → 0.3.56

package/dist/file-findings/file-review/FileReview.js

@@ -0,0 +1,863 @@
+import { cn } from "../../lib/utils.js";
+import { DEFAULT_COMMENT_STATUSES } from "../../comments/comment-types.js";
+import { getRoots, selectAnchorThreads } from "../../comments/comment-utils.js";
+import { resolveCommentStage, selectCommentThreadsByStage } from "../../lib/comment-stage.js";
+import { UiEye } from "../../icons/components/UiEye.js";
+import { UiDotsVertical } from "../../icons/components/UiDotsVertical.js";
+import { UiCheck } from "../../icons/components/UiCheck.js";
+import { UiFileCode } from "../../icons/components/UiFileCode.js";
+import { UiGitCommit } from "../../icons/components/UiGitCommit.js";
+import { UiListChecks } from "../../icons/components/UiListChecks.js";
+import { useResolvedTheme } from "../../hooks/use-theme.js";
+import { Icon } from "../../data/Icon.js";
+import { Button } from "../../components/button.js";
+import { DropdownMenu } from "../../overlay/DropdownMenu.js";
+import { highlightToLines, languageFromPath } from "../../data/code-highlight.js";
+import { Markdown } from "../../data/Markdown.js";
+import { Tabs } from "../../layout/Tabs.js";
+import { ProblemActions } from "../../data/diagnostics/ProblemActions.js";
+import { CommentThread } from "../../comments/CommentThread.js";
+import { FINDINGS_COMMENT_CONFIG, findingsToComments, lineAnchor } from "../findings-comments.js";
+import { AnnotatedCode } from "../LazyAnnotatedCode.js";
+import { blankMdxPreamble } from "../mdx-source.js";
+import { describeQuote, locateSelection, locateSourceSelection, parseQuoteAnchor, quoteAnchor, sourceSpans } from "./quote-anchor.js";
+import { layoutCards } from "./geometry.js";
+import { useAnchorBoxes, useCardHeights, useNarrow } from "./hooks.js";
+import { SEVERITY_MARK, SEVERITY_RANK, severityOf, squiggle } from "./marks.js";
+import { ProblemsList } from "./ProblemsList.js";
+import { blameLines } from "./blame.js";
+import { markAnchors, sourceRangeOf, sourceSpanOf } from "./source-marks.js";
+import { SourceView } from "./SourceView.js";
+import { describeSource, locateSource, parseSourceAnchor, resolveSource, sourceAnchor } from "./source-anchor.js";
+import { InlineThread } from "./InlineThread.js";
+import { InlineAuthors } from "./InlineAuthors.js";
+import { CommentDraft } from "./CommentDraft.js";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/file-findings/file-review/FileReview.tsx
+var DEFAULT_CONFIG = { statuses: DEFAULT_COMMENT_STATUSES };
+var ESTIMATED_CARD_HEIGHT = 96;
+/** How long the pointer rests on a highlight before its inline box opens. */
+var HOVER_OPEN_MS = 450;
+/** Grace period for the pointer to travel from a highlight into its inline box. */
+var HOVER_CLOSE_MS = 300;
+/** Width left of a block, over its severity bar, that previews a finding on hover. */
+var BAR_HOVER_WIDTH = 16;
+var NO_FINDINGS = [];
+var NO_COMMENTS = [];
+var NO_CALLBACKS = {};
+/** Findings anchor on their line (`lineAnchor`); people's threads on a quote. */
+var FINDING_ANCHOR_PREFIX = lineAnchor(1).replace(/\d+$/, "");
+var isFindingAnchor = (anchor) => anchor.startsWith(FINDING_ANCHOR_PREFIX);
+var isMarkdownPath = (path) => /\.mdx?$/i.test(path);
+/** Anchors on quoted text: words in rendered markdown (`q:`) or characters in a source file (`s:`). */
+var isTextAnchor = (anchor) => anchor.startsWith("q:") || anchor.startsWith("s:");
+var quoteDraft = (locator) => ({
+	anchor: quoteAnchor(locator),
+	label: describeQuote(locator)
+});
+function boxClass({ mode, active }) {
+	if (mode === "block") return cn("border-l-[3px] border-amber-400", active ? "bg-amber-200/50 [[data-theme=dark]_&]:bg-amber-400/20" : "bg-amber-100/30 [[data-theme=dark]_&]:bg-amber-400/5");
+	return cn("rounded-sm", active ? "bg-amber-300 [[data-theme=dark]_&]:bg-amber-400/50" : "bg-amber-200/60 [[data-theme=dark]_&]:bg-amber-400/25");
+}
+function anchorLabel(anchor, found) {
+	const label = anchor.startsWith("q:") ? describeQuote(parseQuoteAnchor(anchor)) : anchor.startsWith("s:") ? describeSource(parseSourceAnchor(anchor)) : anchor.replace("line:", "line ");
+	return found ? label : `Text not found · ${label}`;
+}
+var WORD = /[\p{L}\p{N}'’-]/u;
+/** The word under a viewport point, or null when the point is not over a word. */
+function wordAt(x, y) {
+	const caret = document.caretRangeFromPoint?.(x, y);
+	const node = caret?.startContainer;
+	if (!caret || !node || node.nodeType !== Node.TEXT_NODE) return null;
+	const text = node.textContent ?? "";
+	let start = caret.startOffset;
+	let end = caret.startOffset;
+	while (start > 0 && WORD.test(text[start - 1])) start--;
+	while (end < text.length && WORD.test(text[end])) end++;
+	if (start === end) return null;
+	const range = document.createRange();
+	range.setStart(node, start);
+	range.setEnd(node, end);
+	return range;
+}
+var LAYOUTS = [{
+	id: "inline",
+	label: "Inline comments"
+}, {
+	id: "margin",
+	label: "Comment sidebar"
+}];
+var SIDEBAR_ALIGNS = [{
+	id: "line",
+	label: "Align to line"
+}, {
+	id: "stack",
+	label: "Stacked list"
+}];
+/** Space kept above a target scrolled into view. */
+var REVEAL_OFFSET = 48;
+/**
+* Google Docs-style review of one file. Markdown gets a rendered Preview with
+* threads in the margin or inline; any file gets a syntax-highlighted Source
+* listing with threads under their lines. Each feature is on when its prop is
+* given: lint `findings` (rail, squiggles, Problems), people's `comments`
+* (quote highlights and threads), text selection to comment, `blame`, and an
+* editable source.
+*/
+function FileReview({ path, source: raw, view, onViewChange, findings: findingsProp, problemFilters, onProblemFiltersChange, comments, mode = "text", selectToComment = false, authorFilter = false, layout = "margin", onLayoutChange, onSourceChange, blame, line, onLineChange, getFindingActions, toolbar, className }) {
+	const lint = findingsProp !== void 0;
+	const findings = findingsProp ?? NO_FINDINGS;
+	const prose = isMarkdownPath(path);
+	if (view === "problems" && !lint) throw new Error("FileReview: view \"problems\" needs `findings`");
+	if (view === "problems" && (!problemFilters || !onProblemFiltersChange)) throw new Error("FileReview: view \"problems\" needs `problemFilters` and `onProblemFiltersChange`");
+	if (view === "preview" && !prose) throw new Error(`FileReview: view "preview" needs a markdown file, got ${path}`);
+	const [showBlame, setShowBlame] = useState(false);
+	const [showFindings, setShowFindings] = useState(true);
+	const blaming = showBlame && blame !== void 0;
+	const editing = onSourceChange !== void 0 && !blaming;
+	const people = comments?.items ?? NO_COMMENTS;
+	const callbacks = comments?.callbacks ?? NO_CALLBACKS;
+	const hostConfig = comments?.config ?? DEFAULT_CONFIG;
+	const config = useMemo(() => ({
+		...hostConfig,
+		statuses: [...hostConfig.statuses, ...FINDINGS_COMMENT_CONFIG.statuses],
+		facets: [...hostConfig.facets ?? [], ...(FINDINGS_COMMENT_CONFIG.facets ?? []).filter((facet) => facet.key !== "severity")]
+	}), [hostConfig]);
+	const canComment = selectToComment && Boolean(callbacks.onCreate);
+	const source = useMemo(() => path.endsWith(".mdx") ? blankMdxPreamble(raw) : raw, [path, raw]);
+	const sourceLines = useMemo(() => source.split("\n"), [source]);
+	const blamed = useMemo(() => blaming ? blameLines(blame, sourceLines.length) : null, [
+		blaming,
+		blame,
+		sourceLines.length
+	]);
+	const theme = useResolvedTheme();
+	const tokenized = view === "source" && !editing || view === "problems";
+	const [tokens, setTokens] = useState(null);
+	useEffect(() => {
+		if (!tokenized) return;
+		let current = true;
+		const shiki = theme === "dark" ? "github-dark" : "github-light";
+		highlightToLines(source, {
+			lang: languageFromPath(path),
+			theme: shiki
+		}).then((lines) => current && setTokens({
+			source,
+			lines
+		}));
+		return () => {
+			current = false;
+		};
+	}, [
+		tokenized,
+		source,
+		path,
+		theme
+	]);
+	const sourceTokens = tokens?.source === source ? tokens.lines : null;
+	const [align, setAlign] = useState("line");
+	const [focused, setFocused] = useState(null);
+	const [hovered, setHovered] = useState(null);
+	const [draft, setDraft] = useState(null);
+	const [filter, setFilter] = useState("all");
+	const [editorLine, setEditorLine] = useState(void 0);
+	/** A finding picked from Source or Problems: the preview scrolls to it once its box is measured. */
+	const [revealing, setRevealing] = useState(null);
+	const scroller = useRef(null);
+	/** The rendered document's own scroll pane, beside the sidebar's (wide layouts only). */
+	const bodyPane = useRef(null);
+	const sidebarPane = useRef(null);
+	const outer = useRef(null);
+	const origin = useRef(null);
+	const markdown = useRef(null);
+	const narrow = useNarrow(outer);
+	const { heights, refFor } = useCardHeights();
+	const findingComments = useMemo(() => findingsToComments(findings), [findings]);
+	const all = useMemo(() => [...findingComments, ...people], [findingComments, people]);
+	const findingById = useMemo(() => new Map(findingComments.map((c, i) => [c.id, findings[i]])), [findingComments, findings]);
+	const renderRootDetails = useMemo(() => {
+		if (!getFindingActions) return void 0;
+		return (comment) => {
+			const finding = findingById.get(comment.id);
+			return finding ? /* @__PURE__ */ jsx(ProblemActions, { items: getFindingActions(finding) }) : null;
+		};
+	}, [getFindingActions, findingById]);
+	const filtered = useMemo(() => all.filter((c) => c.parentId || filter === "all" || (c.author?.kind ?? "user") === filter), [all, filter]);
+	const open = useMemo(() => selectCommentThreadsByStage(filtered, config, "active"), [filtered, config]);
+	const resolvedCount = getRoots(filtered).filter((c) => resolveCommentStage(config, c.status) !== "active").length;
+	const threadAnchors = useMemo(() => [...new Set(getRoots(open).map((c) => c.anchor ?? ""))].filter(Boolean), [open]);
+	const draftAnchor = draft?.expanded ? draft.anchor : null;
+	const unposted = draftAnchor && !threadAnchors.includes(draftAnchor) ? draftAnchor : null;
+	const anchors = useMemo(() => unposted ? [...threadAnchors, unposted] : threadAnchors, [threadAnchors, unposted]);
+	const severity = useMemo(() => {
+		const worst = /* @__PURE__ */ new Map();
+		for (const c of getRoots(open)) {
+			if (!c.anchor || !isFindingAnchor(c.anchor)) continue;
+			const level = severityOf(c.status);
+			const current = worst.get(c.anchor);
+			if (!current || SEVERITY_RANK[level] > SEVERITY_RANK[current]) worst.set(c.anchor, level);
+		}
+		return worst;
+	}, [open]);
+	const { boxes, height, width } = useAnchorBoxes({
+		origin,
+		markdown,
+		anchors,
+		mode,
+		visible: view === "preview"
+	});
+	const sourceOrigin = useRef(null);
+	const [sourceWidth, setSourceWidth] = useState(0);
+	const [sourceMarks, setSourceMarks] = useState([]);
+	useLayoutEffect(() => {
+		if (view !== "source" || !sourceOrigin.current) return;
+		const root = markdown.current;
+		const mark = () => setSourceMarks(anchors.flatMap((anchor) => {
+			if (anchor.startsWith("s:")) return [{
+				anchor,
+				spans: resolveSource(source, parseSourceAnchor(anchor))
+			}];
+			if (root && anchor.startsWith("q:")) return [{
+				anchor,
+				spans: sourceSpans(root, sourceLines, parseQuoteAnchor(anchor))
+			}];
+			return [];
+		}).filter((m) => m.spans.length > 0));
+		mark();
+		const renders = new MutationObserver(mark);
+		if (root) renders.observe(root, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		const el = sourceOrigin.current;
+		const resizes = new ResizeObserver(() => setSourceWidth(el.offsetWidth));
+		resizes.observe(el);
+		return () => {
+			renders.disconnect();
+			resizes.disconnect();
+		};
+	}, [
+		view,
+		anchors,
+		source,
+		sourceLines,
+		editing
+	]);
+	const hoverTimer = useRef(null);
+	/** The anchor the pointer is heading for; `hovered` catches up once the timer fires. */
+	const intended = useRef(null);
+	const inlineAnchor = focused ?? hovered;
+	useEffect(() => () => clearTimeout(hoverTimer.current ?? void 0), []);
+	/** The hovered or pinned quote thread in Source, floating under its highlighted words. */
+	const [sourceThread, setSourceThread] = useState(null);
+	useLayoutEffect(() => {
+		const root = sourceOrigin.current;
+		if (view !== "source" || !root || !inlineAnchor || !isTextAnchor(inlineAnchor)) return setSourceThread(null);
+		const base = root.getBoundingClientRect();
+		const boxes = [...root.querySelectorAll("[data-source-comment]")].filter((el) => markAnchors(el).includes(inlineAnchor)).flatMap((el) => [...el.getClientRects()]).map((r) => ({
+			top: r.top - base.top,
+			left: r.left - base.left,
+			width: r.width,
+			height: r.height
+		}));
+		setSourceThread(boxes.length > 0 ? {
+			anchor: inlineAnchor,
+			boxes
+		} : null);
+	}, [
+		view,
+		inlineAnchor,
+		sourceMarks,
+		sourceWidth
+	]);
+	const target = revealing ? boxes.get(revealing)?.[0] : void 0;
+	useEffect(() => {
+		const pane = (narrow ? scroller : bodyPane).current;
+		if (view !== "preview" || !target || !pane || !origin.current) return;
+		const top = origin.current.getBoundingClientRect().top - pane.getBoundingClientRect().top + pane.scrollTop + target.top;
+		if (!(top >= pane.scrollTop && top + target.height <= pane.scrollTop + pane.clientHeight)) pane.scrollTop = top - REVEAL_OFFSET;
+		setRevealing(null);
+	}, [
+		view,
+		target,
+		narrow
+	]);
+	useEffect(() => {
+		const pane = scroller.current;
+		if (view !== "source" || !revealing || !pane) return;
+		const line = isFindingAnchor(revealing) ? revealing.slice(FINDING_ANCHOR_PREFIX.length) : null;
+		const row = line ? pane.querySelector(`[data-source-line="${line}"]`) : null;
+		if (row) {
+			const top = row.getBoundingClientRect().top - pane.getBoundingClientRect().top + pane.scrollTop;
+			if (!(top >= pane.scrollTop && top + row.offsetHeight <= pane.scrollTop + pane.clientHeight)) pane.scrollTop = top - REVEAL_OFFSET;
+		}
+		setRevealing(null);
+	}, [view, revealing]);
+	const sidebarScrolls = layout === "margin" && !narrow;
+	/** Aligned cards sit at their anchor's offset, so matching the document's scroll puts each level with its line. */
+	const levelSidebar = () => {
+		if (sidebarScrolls && align === "line" && sidebarPane.current && bodyPane.current) sidebarPane.current.scrollTop = bodyPane.current.scrollTop;
+	};
+	useEffect(levelSidebar, [
+		focused,
+		align,
+		sidebarScrolls
+	]);
+	useEffect(() => {
+		const pane = sidebarPane.current;
+		if (!sidebarScrolls || align !== "stack" || !focused || !pane) return;
+		const card = [...pane.querySelectorAll("[data-card-anchor]")].find((el) => el.dataset.cardAnchor === focused);
+		if (!card) return;
+		const top = card.getBoundingClientRect().top - pane.getBoundingClientRect().top + pane.scrollTop;
+		if (!(top >= pane.scrollTop && top + card.offsetHeight <= pane.scrollTop + pane.clientHeight)) pane.scrollTop = top - REVEAL_OFFSET;
+	}, [
+		focused,
+		align,
+		sidebarScrolls
+	]);
+	/** Picking a card focuses its thread and brings the anchored text into view. */
+	function focusCard(anchor) {
+		setFocused(anchor);
+		setRevealing(anchor);
+		if (isFindingAnchor(anchor)) onLineChange?.(Number(anchor.slice(FINDING_ANCHOR_PREFIX.length)));
+	}
+	function openFinding(finding) {
+		const anchor = lineAnchor(finding.line);
+		onViewChange(prose ? "preview" : "source");
+		setFocused(anchor);
+		setRevealing(anchor);
+		if (!prose) setEditorLine(finding.line);
+		onLineChange?.(finding.line);
+	}
+	useEffect(() => {
+		if (line === void 0) return;
+		const anchor = lineAnchor(line);
+		setFocused(anchor);
+		setRevealing(anchor);
+		setEditorLine(line);
+	}, [line]);
+	const documentOrder = [...boxes.keys()];
+	const tops = layoutCards({
+		cards: threadAnchors.map((anchor) => ({
+			anchor,
+			desired: boxes.get(anchor)?.[0]?.top ?? height,
+			order: boxes.has(anchor) ? documentOrder.indexOf(anchor) : documentOrder.length,
+			height: heights[anchor] ?? ESTIMATED_CARD_HEIGHT
+		})),
+		focused
+	});
+	const railHeight = Math.max(height, ...threadAnchors.map((a) => (tops.get(a) ?? 0) + (heights[a] ?? ESTIMATED_CARD_HEIGHT)));
+	const ordered = [...threadAnchors].sort((a, b) => (tops.get(a) ?? 0) - (tops.get(b) ?? 0));
+	/**
+	* The anchor under the pointer, preferring an exact quote over the block holding it.
+	* A click takes the whole block; a hover only an exact quote or a block's severity
+	* bar, so reading a paragraph with a finding in it does not open anything.
+	*/
+	function anchorAt(event, intent) {
+		const base = event.currentTarget.getBoundingClientRect();
+		const x = event.clientX - base.left;
+		const y = event.clientY - base.top;
+		const hits = [...boxes].filter(([anchor, list]) => {
+			if (anchor === unposted) return false;
+			if (isFindingAnchor(anchor)) {
+				const last = list[list.length - 1];
+				return x <= BAR_HOVER_WIDTH && y >= list[0].top && y <= last.top + last.height || intent === "click" && list.some((b) => y >= b.top && y <= b.top + b.height && x >= b.left && x <= b.left + b.width);
+			}
+			return list.some((b) => {
+				if (y < b.top || y > b.top + b.height) return false;
+				const exact = mode === "text";
+				if (intent === "click" || exact) return x >= b.left - (exact ? 0 : 12) && x <= b.left + b.width;
+				return x >= b.left - BAR_HOVER_WIDTH && x <= b.left;
+			});
+		}).map(([anchor]) => anchor);
+		return hits.find((a) => a.startsWith("q:")) ?? hits[0] ?? null;
+	}
+	const fromInlineThread = (event) => event.target.closest("[data-inline-thread], [data-comment-draft], [data-source-thread]") !== null;
+	/**
+	* The anchor a selection makes. In markdown, a Source selection is mapped onto
+	* the rendered text so the thread shows in Preview too; in any other file it
+	* anchors on the source characters.
+	*/
+	function locate(surface, range) {
+		if (!prose) {
+			const covered = sourceRangeOf(range);
+			const locator = covered && locateSource(source, covered.start, covered.end);
+			return locator ? {
+				anchor: sourceAnchor(locator),
+				label: describeSource(locator)
+			} : null;
+		}
+		if (!markdown.current) return null;
+		if (surface === "preview") {
+			const locator = locateSelection(markdown.current, range);
+			return locator && quoteDraft(locator);
+		}
+		const span = sourceSpanOf(range);
+		const locator = span && locateSourceSelection(markdown.current, sourceLines, span);
+		return locator && quoteDraft(locator);
+	}
+	const surfaceOrigin = (surface) => (surface === "preview" ? origin : sourceOrigin).current;
+	function focusAt(event) {
+		if (!window.getSelection()?.isCollapsed || fromInlineThread(event) || event.target.closest("button, a")) return;
+		setFocused(anchorAt(event, "click"));
+	}
+	/**
+	* Hover intent: the pointer has to rest on a highlight before its box opens,
+	* and leaving starts a grace period so the pointer can still reach the box.
+	* Re-targeting only on a change keeps continuous movement from resetting the timer.
+	*/
+	function hoverTo(anchor) {
+		if (anchor === intended.current) return;
+		intended.current = anchor;
+		clearTimeout(hoverTimer.current ?? void 0);
+		hoverTimer.current = setTimeout(() => setHovered(anchor), anchor ? HOVER_OPEN_MS : HOVER_CLOSE_MS);
+	}
+	function keepHover(anchor) {
+		clearTimeout(hoverTimer.current ?? void 0);
+		intended.current = anchor;
+	}
+	function closeInlineThread() {
+		clearTimeout(hoverTimer.current ?? void 0);
+		intended.current = null;
+		setFocused(null);
+		setHovered(null);
+	}
+	/** Source previews a thread while the pointer rests on its highlighted words. */
+	function hoverSourceAt(event) {
+		if (fromInlineThread(event)) return;
+		const selecting = event.buttons !== 0 || !window.getSelection()?.isCollapsed;
+		const mark = event.target.closest("[data-source-comment]");
+		hoverTo(selecting || !mark ? null : markAnchors(mark)[0]);
+	}
+	/** Clicking away from a highlight and its box unpins it. */
+	function unpinSourceAt(event) {
+		if (fromInlineThread(event) || event.target.closest("[data-source-comment], button, a")) return;
+		if (focused && isTextAnchor(focused) && window.getSelection()?.isCollapsed) closeInlineThread();
+	}
+	function hoverAt(event) {
+		if (layout !== "inline" || fromInlineThread(event)) return;
+		hoverTo(event.buttons !== 0 || !window.getSelection()?.isCollapsed ? null : anchorAt(event, "hover"));
+	}
+	function offerComment(event, surface) {
+		if (!canComment || fromInlineThread(event) || event.target.closest("[data-comment-author]")) return;
+		const selection = window.getSelection();
+		const range = selection && !selection.isCollapsed && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+		const locator = range ? locate(surface, range) : null;
+		if (!range || !locator) {
+			setDraft((current) => current?.expanded ? current : null);
+			return;
+		}
+		const base = surfaceOrigin(surface).getBoundingClientRect();
+		const rect = range.getBoundingClientRect();
+		setDraft({
+			...locator,
+			position: {
+				top: rect.top - base.top,
+				bottom: rect.bottom - base.top,
+				left: rect.left - base.left + rect.width / 2
+			},
+			expanded: false,
+			surface
+		});
+	}
+	/**
+	* Right-click offers Comment at the pointer: on the selection when the pointer
+	* is inside it, else on the word under the pointer, which it selects.
+	*/
+	function commentMenu(event, surface) {
+		if (!canComment || fromInlineThread(event) || event.target.closest("[data-comment-author], button, a")) return;
+		const selection = window.getSelection();
+		const current = selection && !selection.isCollapsed && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+		const inside = current && [...current.getClientRects()].some((r) => event.clientX >= r.left && event.clientX <= r.right && event.clientY >= r.top && event.clientY <= r.bottom);
+		const range = inside ? current : wordAt(event.clientX, event.clientY);
+		const locator = range ? locate(surface, range) : null;
+		if (!range || !locator) return;
+		event.preventDefault();
+		if (!inside) {
+			selection?.removeAllRanges();
+			selection?.addRange(range);
+		}
+		const base = surfaceOrigin(surface).getBoundingClientRect();
+		const rect = range.getBoundingClientRect();
+		setDraft({
+			...locator,
+			position: {
+				top: rect.top - base.top,
+				bottom: rect.bottom - base.top,
+				left: event.clientX - base.left
+			},
+			expanded: false,
+			surface
+		});
+	}
+	/** The pill morphs into its composer card; the measured highlight replaces the browser selection. */
+	function expandDraft() {
+		setDraft((current) => current && {
+			...current,
+			expanded: true
+		});
+		window.getSelection()?.removeAllRanges();
+	}
+	const closeDraft = useCallback(() => setDraft(null), []);
+	/** An open card follows its measured highlight, so a reflow (width, layout) keeps it beside the text. */
+	function draftPosition(current) {
+		const list = current.expanded && current.surface === "preview" ? boxes.get(current.anchor) : void 0;
+		const first = list?.[0];
+		const last = list?.at(-1);
+		if (!first || !last) return current.position;
+		return {
+			top: first.top,
+			bottom: last.top + last.height,
+			left: first.left + first.width / 2
+		};
+	}
+	function renderDraft(current, containerWidth) {
+		const onCreate = callbacks.onCreate;
+		if (!onCreate) return null;
+		const { anchor, label } = current;
+		return /* @__PURE__ */ jsx(CommentDraft, {
+			anchor,
+			label,
+			position: draftPosition(current),
+			containerWidth,
+			expanded: current.expanded,
+			config,
+			onExpand: expandDraft,
+			onClose: closeDraft,
+			onCreate: async (input) => {
+				await onCreate(input);
+				setDraft(null);
+				setFocused(anchor);
+			}
+		}, anchor);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref: outer,
+		"data-file-review": path,
+		className: cn("flex min-h-0 flex-col gap-2", className ?? "h-[600px]"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 flex-wrap items-center gap-2 text-xs text-muted-foreground",
+				children: [
+					toolbar,
+					(comments || lint) && /* @__PURE__ */ jsxs("span", { children: [
+						getRoots(open).length,
+						" open · ",
+						resolvedCount,
+						" resolved (hidden)"
+					] }),
+					comments && layout === "inline" && /* @__PURE__ */ jsx("span", { children: "· hover a highlight to view or reply" }),
+					canComment && /* @__PURE__ */ jsx("span", { children: "· select or right-click text to comment" }),
+					authorFilter && /* @__PURE__ */ jsx("div", {
+						role: "radiogroup",
+						"aria-label": "Authors",
+						className: "ml-auto inline-flex rounded-md border border-border p-0.5",
+						children: [
+							"all",
+							"user",
+							"agent"
+						].map((value) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							role: "radio",
+							"aria-checked": filter === value,
+							onClick: () => setFilter(value),
+							className: cn("rounded px-2 py-0.5 font-medium", filter === value ? "bg-primary text-primary-foreground" : "hover:text-foreground"),
+							children: value === "all" ? "All" : value === "user" ? "People" : "Tools"
+						}, value))
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center border-b border-border",
+				children: [
+					/* @__PURE__ */ jsx(Tabs, {
+						className: "min-w-0 flex-1 border-b-0",
+						value: view,
+						onChange: (id) => {
+							onViewChange(id);
+							setDraft(null);
+						},
+						tabs: [
+							...prose ? [{
+								id: "preview",
+								label: "Preview",
+								icon: UiEye
+							}] : [],
+							{
+								id: "source",
+								label: "Source",
+								icon: UiFileCode
+							},
+							...lint ? [{
+								id: "problems",
+								label: "Problems",
+								icon: UiListChecks,
+								count: findings.length
+							}] : []
+						]
+					}),
+					lint && findings.length > 0 && view === "source" && !editing && /* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						variant: showFindings ? "secondary" : "ghost",
+						"aria-pressed": showFindings,
+						title: showFindings ? "Show only the gutter marks; pick one to read its findings" : "Show each line's findings underneath it",
+						onClick: () => setShowFindings((shown) => !shown),
+						className: "shrink-0 gap-1.5",
+						children: [/* @__PURE__ */ jsx(Icon, { icon: UiListChecks }), "Findings"]
+					}),
+					blame && view === "source" && /* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						variant: showBlame ? "secondary" : "ghost",
+						"aria-pressed": showBlame,
+						title: showBlame ? "Hide who last changed each line" : "Show who last changed each line",
+						onClick: () => setShowBlame((shown) => !shown),
+						className: "shrink-0 gap-1.5",
+						children: [/* @__PURE__ */ jsx(Icon, { icon: UiGitCommit }), "Blame"]
+					}),
+					comments && onLayoutChange && prose && view !== "problems" && /* @__PURE__ */ jsx(DropdownMenu, {
+						align: "right",
+						icon: UiDotsVertical,
+						hideChevron: true,
+						variant: "ghost",
+						size: "sm",
+						title: "View options",
+						menuLabel: "View options",
+						className: "shrink-0",
+						items: [...LAYOUTS.map((entry) => ({
+							label: entry.label,
+							group: "Comments",
+							icon: UiCheck,
+							iconClassName: entry.id === layout ? void 0 : "invisible",
+							onSelect: () => onLayoutChange(entry.id)
+						})), ...layout === "margin" ? SIDEBAR_ALIGNS.map((entry) => ({
+							label: entry.label,
+							group: "Sidebar cards",
+							icon: UiCheck,
+							iconClassName: entry.id === align ? void 0 : "invisible",
+							onSelect: () => setAlign(entry.id)
+						})) : []]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: scroller,
+				className: cn("relative min-h-0 flex-1 rounded-md border border-border bg-background", editing && view === "source" ? "overflow-hidden" : "overflow-y-auto"),
+				children: [
+					editing && view === "source" && /* @__PURE__ */ jsx(AnnotatedCode, {
+						path,
+						source: raw,
+						findings,
+						line: editorLine,
+						onLineChange: setEditorLine,
+						onChange: onSourceChange,
+						inlineChips: true
+					}),
+					!editing && view === "source" && /* @__PURE__ */ jsxs("div", {
+						ref: sourceOrigin,
+						className: "relative",
+						onMouseUp: (event) => event.button === 0 && offerComment(event, "source"),
+						onContextMenu: (event) => commentMenu(event, "source"),
+						onClick: unpinSourceAt,
+						onMouseMove: hoverSourceAt,
+						onMouseLeave: () => hoverTo(null),
+						children: [
+							/* @__PURE__ */ jsx(SourceView, {
+								source,
+								tokens: sourceTokens,
+								blame: blamed,
+								findings,
+								showFindings,
+								marks: sourceMarks,
+								comments: open,
+								selected: inlineAnchor ?? draftAnchor,
+								onSelect: (f) => {
+									setFocused(lineAnchor(f.line));
+									onLineChange?.(f.line);
+								},
+								getFindingActions,
+								onFocus: setFocused
+							}),
+							draft?.surface === "source" && renderDraft(draft, sourceWidth),
+							sourceThread && /* @__PURE__ */ jsx(InlineThread, {
+								seamless: true,
+								anchor: sourceThread.anchor,
+								label: anchorLabel(sourceThread.anchor, true),
+								boxes: sourceThread.boxes,
+								containerWidth: sourceWidth,
+								thread: selectAnchorThreads(open, sourceThread.anchor),
+								config,
+								callbacks,
+								pinned: focused === sourceThread.anchor,
+								onPin: () => setFocused(sourceThread.anchor),
+								onClose: closeInlineThread,
+								onPointerEnter: () => keepHover(sourceThread.anchor),
+								onPointerLeave: () => hoverTo(null)
+							}, sourceThread.anchor)
+						]
+					}),
+					view === "problems" && problemFilters && onProblemFiltersChange && /* @__PURE__ */ jsx(ProblemsList, {
+						source,
+						tokens: sourceTokens,
+						findings,
+						filters: problemFilters,
+						onFiltersChange: onProblemFiltersChange,
+						onOpen: openFinding,
+						openLabel: prose ? "Open in preview" : "Open in source",
+						getFindingActions
+					}),
+					prose && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex", narrow ? "flex-col gap-4 p-4" : "h-full", view !== "preview" && "hidden"),
+						children: [/* @__PURE__ */ jsx("div", {
+							ref: bodyPane,
+							onScroll: levelSidebar,
+							className: cn("min-w-0 flex-1", !narrow && "overflow-y-auto p-4"),
+							children: /* @__PURE__ */ jsxs("div", {
+								ref: origin,
+								className: "relative",
+								onMouseUp: (event) => event.button === 0 && offerComment(event, "preview"),
+								onContextMenu: (event) => commentMenu(event, "preview"),
+								onClick: focusAt,
+								onMouseMove: hoverAt,
+								onMouseLeave: () => layout === "inline" && hoverTo(null),
+								children: [
+									[...boxes].flatMap(([anchor, list]) => {
+										const active = anchor === focused || anchor === hovered || anchor === draftAnchor;
+										if (isFindingAnchor(anchor)) {
+											const level = severity.get(anchor);
+											if (!level) throw new Error(`lint anchor ${anchor} has no open finding`);
+											const mark = SEVERITY_MARK[level];
+											const first = list[0];
+											return [/* @__PURE__ */ jsx("span", {
+												"data-lint-rail": level,
+												"aria-hidden": true,
+												className: cn("pointer-events-none absolute z-20 flex size-4 items-center justify-center rounded-sm", mark.tone, active && mark.tint),
+												style: {
+													top: first.top + first.height / 2 - 8,
+													left: 0
+												},
+												children: /* @__PURE__ */ jsx(Icon, {
+													icon: mark.icon,
+													className: "text-[13px]"
+												})
+											}, `${anchor}:rail`), ...list.map((box, i) => /* @__PURE__ */ jsx("div", {
+												"data-anchor-box": anchor,
+												"data-lint-squiggle": level,
+												"aria-hidden": true,
+												className: cn("pointer-events-none absolute z-0 transition-colors", active && mark.tint),
+												style: {
+													top: box.top,
+													left: box.left,
+													width: box.width,
+													height: box.height + 3
+												},
+												children: /* @__PURE__ */ jsx("span", {
+													className: "absolute inset-x-0 bottom-0 h-[3px]",
+													style: {
+														backgroundImage: squiggle(mark.stroke),
+														backgroundRepeat: "repeat-x",
+														backgroundSize: "6px 3px"
+													}
+												})
+											}, `${anchor}:${i}`))];
+										}
+										return list.map((box, i) => /* @__PURE__ */ jsx("div", {
+											"data-anchor-box": anchor,
+											"aria-hidden": true,
+											className: cn("pointer-events-none absolute z-0 transition-colors", boxClass({
+												mode,
+												active
+											})),
+											style: mode === "text" ? {
+												top: box.top,
+												left: box.left,
+												width: box.width,
+												height: box.height
+											} : {
+												top: box.top - 2,
+												left: box.left - 10,
+												width: box.width + 10,
+												height: box.height + 4
+											}
+										}, `${anchor}:${i}`));
+									}),
+									/* @__PURE__ */ jsx("div", {
+										ref: markdown,
+										"data-annotated-markdown": "",
+										className: "relative z-10 pl-4",
+										children: /* @__PURE__ */ jsx(Markdown, {
+											sourceBlocks: true,
+											text: source
+										})
+									}),
+									comments && layout === "inline" && /* @__PURE__ */ jsx(InlineAuthors, {
+										markdown,
+										comments: open,
+										focused,
+										onFocus: setFocused
+									}),
+									draft?.surface === "preview" && renderDraft(draft, width),
+									layout === "inline" && inlineAnchor && /* @__PURE__ */ jsx(InlineThread, {
+										anchor: inlineAnchor,
+										label: anchorLabel(inlineAnchor, true),
+										boxes: boxes.get(inlineAnchor) ?? [],
+										containerWidth: width,
+										thread: selectAnchorThreads(open, inlineAnchor),
+										config,
+										callbacks: isFindingAnchor(inlineAnchor) ? NO_CALLBACKS : callbacks,
+										renderRootDetails,
+										pinned: focused === inlineAnchor,
+										onPin: () => setFocused(inlineAnchor),
+										onClose: closeInlineThread,
+										onPointerEnter: () => keepHover(inlineAnchor),
+										onPointerLeave: () => hoverTo(null)
+									}, inlineAnchor)
+								]
+							})
+						}), layout === "margin" && /* @__PURE__ */ jsx("div", {
+							ref: sidebarPane,
+							"data-comment-sidebar": narrow ? "below" : align,
+							className: cn(narrow ? "w-full" : "w-[316px] shrink-0 overflow-y-auto overscroll-contain border-l border-border py-4 pl-2 pr-4"),
+							children: /* @__PURE__ */ jsx("div", {
+								className: cn("relative", (narrow || align === "stack") && "space-y-2"),
+								style: sidebarScrolls && align === "line" ? { height: railHeight } : void 0,
+								children: ordered.map((anchor) => {
+									const thread = selectAnchorThreads(open, anchor);
+									const isFocused = anchor === focused;
+									return /* @__PURE__ */ jsxs("div", {
+										ref: refFor(anchor),
+										"data-card-anchor": anchor,
+										onMouseEnter: () => setHovered(anchor),
+										onMouseLeave: () => setHovered(null),
+										onClick: () => focusCard(anchor),
+										className: cn("rounded-lg border bg-card transition-[top,transform] duration-150", sidebarScrolls && align === "line" && "absolute inset-x-0", isFocused ? "z-10 -translate-x-2 border-primary/50 shadow-lg" : "border-border shadow-sm"),
+										style: sidebarScrolls && align === "line" ? { top: tops.get(anchor) ?? 0 } : void 0,
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "truncate px-2 pt-2 text-[11px] text-muted-foreground",
+											children: anchorLabel(anchor, boxes.has(anchor))
+										}), /* @__PURE__ */ jsx(CommentThread, {
+											comments: thread,
+											config,
+											anchor,
+											compact: true,
+											defaultExpanded: isFocused || isFindingAnchor(anchor),
+											hideComposer: thread.length > 0,
+											autoFocusComposer: thread.length === 0,
+											composerPlaceholder: "Add a comment…",
+											...isFindingAnchor(anchor) ? NO_CALLBACKS : callbacks,
+											...renderRootDetails ? { renderRootDetails } : {}
+										})]
+									}, `${anchor}:${isFocused}`);
+								})
+							})
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+export { FileReview };
+
+//# sourceMappingURL=FileReview.js.map