@ctrl-ui/react 0.8.0

package/dist/ui/code-diff.js

@@ -0,0 +1,561 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ScrollArea } from "./scroll-area.js";
+import { highlightToTokens, mergeCodeTokenLineWithEmphasis } from "../lib/code-tokens.js";
+import { CodeCopy, CodeFloatingCopy, CodeTokenLine } from "./code.js";
+import { buildDiffFromFiles, buildDiffFromPatch, diffRunEnd } from "../lib/diff.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/ui/code-diff.tsx
+const ESTIMATED_ROW_HEIGHT = 20;
+const VIRTUALIZE_THRESHOLD = 150;
+function sideTexts(file) {
+	if (!file.isPartial) return {
+		old: file.oldLines.join("\n"),
+		new: file.newLines.join("\n")
+	};
+	const oldArr = [];
+	const newArr = [];
+	for (const hunk of file.hunks) for (const line of hunk.lines) {
+		if (line.oldNo !== void 0) oldArr[line.oldNo - 1] = line.text;
+		if (line.newNo !== void 0) newArr[line.newNo - 1] = line.text;
+	}
+	return {
+		old: oldArr.join("\n"),
+		new: newArr.join("\n")
+	};
+}
+function useSideTokens(oldText, newText, lang, enabled) {
+	const requestKey = `${lang ?? ""}\n${oldText.length}:${oldText}${newText}`;
+	const [state, setState] = useState(null);
+	useEffect(() => {
+		if (!enabled || !lang) return;
+		let cancelled = false;
+		Promise.all([highlightToTokens(oldText, lang), highlightToTokens(newText, lang)]).then(([oldTokens, newTokens]) => {
+			if (!cancelled) setState({
+				key: requestKey,
+				tokens: {
+					old: oldTokens,
+					new: newTokens
+				}
+			});
+		}).catch(() => {
+			if (!cancelled) setState({
+				key: requestKey,
+				tokens: {
+					old: null,
+					new: null
+				}
+			});
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		oldText,
+		newText,
+		lang,
+		enabled,
+		requestKey
+	]);
+	if (!enabled) return {
+		old: null,
+		new: null
+	};
+	return state?.key === requestKey ? state.tokens : {
+		old: null,
+		new: null
+	};
+}
+function lineTokens(line, tokens) {
+	if (line.type === "del") return tokens.old?.[(line.oldNo ?? 1) - 1] ?? null;
+	if (line.type === "add") return tokens.new?.[(line.newNo ?? 1) - 1] ?? null;
+	return tokens.new?.[(line.newNo ?? 1) - 1] ?? tokens.old?.[(line.oldNo ?? 1) - 1] ?? null;
+}
+function splitPairs(lines) {
+	const rows = [];
+	let index = 0;
+	while (index < lines.length) {
+		const line = lines[index];
+		if (!line) break;
+		if (line.type === "context") {
+			rows.push({
+				left: line,
+				right: line
+			});
+			index += 1;
+			continue;
+		}
+		const delEnd = diffRunEnd(lines, index, "del");
+		const addEnd = diffRunEnd(lines, delEnd, "add");
+		const dels = lines.slice(index, delEnd);
+		const adds = lines.slice(delEnd, addEnd);
+		const count = Math.max(dels.length, adds.length);
+		for (let pair = 0; pair < count; pair += 1) rows.push({
+			left: dels[pair] ?? null,
+			right: adds[pair] ?? null
+		});
+		index = addEnd;
+	}
+	return rows;
+}
+function expandedContext(file, gapIndex) {
+	const hunk = file.hunks[gapIndex];
+	if (!hunk) return [];
+	const offset = hunk.newStart - hunk.oldStart;
+	const lines = [];
+	for (let oldNo = hunk.oldStart - hunk.collapsedBefore; oldNo < hunk.oldStart; oldNo += 1) {
+		const text = file.oldLines[oldNo - 1] ?? "";
+		lines.push({
+			type: "context",
+			oldNo,
+			newNo: oldNo + offset,
+			text
+		});
+	}
+	return lines;
+}
+function gapRows(file, hunk, gapIndex, diffStyle, expanded) {
+	if (!(gapIndex > 0 || hunk.collapsedBefore > 0)) return [];
+	if (expanded.has(gapIndex) && !file.isPartial) return expandedContext(file, gapIndex).map((line) => rowForLine(diffStyle, line, `exp-${gapIndex}-${line.oldNo ?? line.newNo ?? 0}`));
+	const label = hunk.header ?? `@@ -${hunk.oldStart},${hunk.oldCount} +${hunk.newStart},${hunk.newCount} @@`;
+	return [{
+		kind: "separator",
+		id: `sep-${gapIndex}`,
+		gapIndex,
+		label,
+		canExpand: !file.isPartial && hunk.collapsedBefore > 0
+	}];
+}
+function changedRows(hunk, gapIndex, diffStyle) {
+	if (diffStyle === "unified") return hunk.lines.map((line, lineIndex) => rowForLine("unified", line, `u-${gapIndex}-${lineIndex}`));
+	return splitPairs(hunk.lines).map((pair, pairIndex) => ({
+		kind: "split",
+		id: `s-${gapIndex}-${pairIndex}`,
+		left: pair.left,
+		right: pair.right
+	}));
+}
+function buildRows(file, diffStyle, expanded) {
+	const rows = [];
+	for (const [gapIndex, hunk] of file.hunks.entries()) {
+		rows.push(...gapRows(file, hunk, gapIndex, diffStyle, expanded));
+		rows.push(...changedRows(hunk, gapIndex, diffStyle));
+	}
+	return rows;
+}
+function rowForLine(diffStyle, line, id) {
+	if (diffStyle === "unified") return {
+		kind: "unified",
+		id,
+		line
+	};
+	if (line.type === "context") return {
+		kind: "split",
+		id,
+		left: line,
+		right: line
+	};
+	if (line.type === "del") return {
+		kind: "split",
+		id,
+		left: line,
+		right: null
+	};
+	return {
+		kind: "split",
+		id,
+		left: null,
+		right: line
+	};
+}
+const markerFor = {
+	add: "+",
+	del: "-",
+	context: ""
+};
+function DiffCode({ line, tokens, overflow }) {
+	const wrapClass = overflow === "wrap" ? "whitespace-pre-wrap break-words" : "whitespace-pre";
+	if (line.segments && line.segments.length > 0) {
+		const runs = mergeCodeTokenLineWithEmphasis(line.text, tokens, line.segments);
+		return /* @__PURE__ */ jsx("code", {
+			className: cn("min-w-0 flex-1", wrapClass),
+			children: runs.map((run) => {
+				const style = run.style || void 0;
+				if (run.emphasis) return /* @__PURE__ */ jsx("span", {
+					"data-control-ui": "code-diff",
+					"data-control-family": "code-diff",
+					"data-slot": "emphasis",
+					"data-line-type": line.type,
+					style,
+					children: run.content
+				}, run.start);
+				return /* @__PURE__ */ jsx("span", {
+					style,
+					children: run.content
+				}, run.start);
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("code", {
+		className: cn("min-w-0 flex-1", wrapClass),
+		children: /* @__PURE__ */ jsx(CodeTokenLine, {
+			tokens,
+			plain: line.text
+		})
+	});
+}
+function Gutter({ children, type }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "code-diff",
+		"data-control-family": "code-diff",
+		"data-line-type": type,
+		"data-slot": "gutter",
+		"aria-hidden": "true",
+		className: "shrink-0 select-none",
+		children
+	});
+}
+function Marker({ type, indicators }) {
+	if (indicators !== "classic") return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "code-diff",
+		"data-control-family": "code-diff",
+		"data-slot": "marker",
+		"data-line-type": type,
+		"aria-hidden": "true",
+		className: "shrink-0 select-none",
+		children: markerFor[type] || " "
+	});
+}
+function UnifiedRow({ line, tokens, indicators, overflow }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "code-diff",
+		"data-control-family": "code-diff",
+		"data-slot": "line",
+		"data-line-type": line.type,
+		"data-indicators": indicators,
+		"aria-hidden": "true",
+		className: "flex w-full",
+		children: [
+			/* @__PURE__ */ jsx(Gutter, {
+				type: line.type,
+				children: line.oldNo ?? ""
+			}),
+			/* @__PURE__ */ jsx(Gutter, {
+				type: line.type,
+				children: line.newNo ?? ""
+			}),
+			/* @__PURE__ */ jsx(Marker, {
+				type: line.type,
+				indicators
+			}),
+			/* @__PURE__ */ jsx(DiffCode, {
+				line,
+				tokens,
+				overflow
+			})
+		]
+	});
+}
+function SplitHalf({ line, tokens, indicators, overflow, side }) {
+	if (!line) return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "code-diff",
+		"data-control-family": "code-diff",
+		"data-slot": "empty-half",
+		"data-side": side,
+		"aria-hidden": "true",
+		className: "flex min-w-0 flex-1"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "code-diff",
+		"data-control-family": "code-diff",
+		"data-slot": "line",
+		"data-line-type": line.type,
+		"data-indicators": indicators,
+		"data-side": side,
+		"aria-hidden": "true",
+		className: "flex min-w-0 flex-1",
+		children: [
+			/* @__PURE__ */ jsx(Gutter, {
+				type: line.type,
+				children: side === "left" ? line.oldNo ?? "" : line.newNo ?? ""
+			}),
+			/* @__PURE__ */ jsx(Marker, {
+				type: line.type,
+				indicators
+			}),
+			/* @__PURE__ */ jsx(DiffCode, {
+				line,
+				tokens,
+				overflow
+			})
+		]
+	});
+}
+function fileTitle(file) {
+	return file.oldName && file.type === "rename" ? `${file.oldName} → ${file.name}` : file.name;
+}
+function DiffStats({ additions, deletions }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-control-ui": "code-diff",
+		"data-control-family": "code-diff",
+		"data-slot": "stat",
+		className: "flex items-center",
+		children: [/* @__PURE__ */ jsxs("span", {
+			"data-control-ui": "code-diff",
+			"data-control-family": "code-diff",
+			"data-slot": "stat-additions",
+			children: ["+", additions]
+		}), /* @__PURE__ */ jsxs("span", {
+			"data-control-ui": "code-diff",
+			"data-control-family": "code-diff",
+			"data-slot": "stat-deletions",
+			children: ["−", deletions]
+		})]
+	});
+}
+function lineDescription(label, line, number) {
+	return `${label} line ${number ?? "?"}: ${line.text}`;
+}
+function unifiedLineDescription(line) {
+	if (line.type === "add") return lineDescription("Added", line, line.newNo);
+	if (line.type === "del") return lineDescription("Deleted", line, line.oldNo);
+	return lineDescription("Unchanged", line, line.newNo ?? line.oldNo);
+}
+function splitRowDescriptions(row) {
+	if (row.left?.type === "context") return [lineDescription("Unchanged", row.left, row.left.newNo ?? row.left.oldNo)];
+	const descriptions = [];
+	if (row.left) descriptions.push(lineDescription(row.right ? "Original" : "Deleted", row.left, row.left.oldNo));
+	if (row.right) descriptions.push(lineDescription(row.left ? "Modified" : "Added", row.right, row.right.newNo));
+	return descriptions;
+}
+function rowDescriptions(row) {
+	if (row.kind === "separator") return [];
+	if (row.kind === "unified") return [unifiedLineDescription(row.line)];
+	return splitRowDescriptions(row);
+}
+function accessibleDiffText(file, rows) {
+	return [fileTitle(file), ...rows.flatMap(rowDescriptions)].join("\n");
+}
+function fileIdentity(file) {
+	const hunks = file.hunks.map((hunk) => `${hunk.oldStart}:${hunk.newStart}:${hunk.lines.map((line) => `${line.type}:${line.text}`).join("\n")}`).join("\n");
+	return `${file.oldName ?? ""}->${file.name}:${file.type}:${hunks}`;
+}
+function CodeDiffFileSection({ file, lang, diffStyle, diffIndicators, overflow, maxHeight, showFileHeader }) {
+	const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
+	const texts = useMemo(() => sideTexts(file), [file]);
+	const tokens = useSideTokens(texts.old, texts.new, lang, Boolean(lang));
+	const rows = useMemo(() => buildRows(file, diffStyle, expanded), [
+		file,
+		diffStyle,
+		expanded
+	]);
+	const scrollRef = useRef(null);
+	const shouldVirtualize = rows.length > VIRTUALIZE_THRESHOLD;
+	const virtualizer = useVirtualizer({
+		count: rows.length,
+		getScrollElement: () => scrollRef.current,
+		estimateSize: () => ESTIMATED_ROW_HEIGHT,
+		overscan: 24,
+		enabled: shouldVirtualize
+	});
+	function expandGap(gapIndex) {
+		setExpanded((current) => new Set(current).add(gapIndex));
+	}
+	const gridClassName = overflow === "scroll" ? "w-max min-w-full" : "w-full";
+	function renderRow(row) {
+		if (row.kind === "separator") return /* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "code-diff",
+			"data-control-family": "code-diff",
+			"data-slot": "expander",
+			className: "flex items-center",
+			children: [row.canExpand ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-control-ui": "code-diff",
+				"data-control-family": "code-diff",
+				"data-slot": "expand-button",
+				"data-control": "true",
+				onClick: () => expandGap(row.gapIndex),
+				className: "cursor-pointer",
+				"aria-label": "Expand hidden lines",
+				children: "⋯"
+			}) : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "⋯"
+			}), /* @__PURE__ */ jsx("span", {
+				"data-control-ui": "code-diff",
+				"data-control-family": "code-diff",
+				"data-slot": "expander-label",
+				className: "truncate",
+				children: row.label
+			})]
+		});
+		if (row.kind === "unified") return /* @__PURE__ */ jsx(UnifiedRow, {
+			line: row.line,
+			tokens: lineTokens(row.line, tokens),
+			indicators: diffIndicators,
+			overflow
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "code-diff",
+			"data-control-family": "code-diff",
+			"data-slot": "row",
+			className: "flex w-full",
+			children: [/* @__PURE__ */ jsx(SplitHalf, {
+				line: row.left,
+				tokens: row.left ? lineTokens(row.left, tokens) : null,
+				indicators: diffIndicators,
+				overflow,
+				side: "left"
+			}), /* @__PURE__ */ jsx(SplitHalf, {
+				line: row.right,
+				tokens: row.right ? lineTokens(row.right, tokens) : null,
+				indicators: diffIndicators,
+				overflow,
+				side: "right"
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsxs("section", {
+		"data-control-ui": "code-diff",
+		"data-control-family": "code-diff",
+		"data-slot": "file",
+		"data-file-name": file.name,
+		children: [
+			showFileHeader ? /* @__PURE__ */ jsxs("div", {
+				"data-control-ui": "code-diff",
+				"data-control-family": "code-diff",
+				"data-slot": "file-header",
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-control-ui": "code-diff",
+					"data-control-family": "code-diff",
+					"data-slot": "file-title",
+					className: "min-w-0 truncate",
+					children: fileTitle(file)
+				}), /* @__PURE__ */ jsx(DiffStats, {
+					additions: file.additions,
+					deletions: file.deletions
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("pre", {
+				"data-control-ui": "code-diff",
+				"data-control-family": "code-diff",
+				"data-slot": "accessible-source",
+				className: "sr-only",
+				children: /* @__PURE__ */ jsx("code", { children: accessibleDiffText(file, rows) })
+			}),
+			/* @__PURE__ */ jsx(ScrollArea, {
+				maxHeight,
+				viewportClassName: void 0,
+				viewportProps: {
+					"data-control-ui": "code-diff",
+					"data-control-family": "code-diff",
+					"data-slot": "body"
+				},
+				viewportRef: scrollRef,
+				children: shouldVirtualize ? /* @__PURE__ */ jsx("div", {
+					className: gridClassName,
+					style: {
+						position: "relative",
+						height: `${virtualizer.getTotalSize()}px`
+					},
+					children: virtualizer.getVirtualItems().map((item) => {
+						const row = rows[item.index];
+						if (!row) return null;
+						return /* @__PURE__ */ jsx("div", {
+							ref: virtualizer.measureElement,
+							"data-index": item.index,
+							style: {
+								position: "absolute",
+								top: 0,
+								left: 0,
+								width: "100%",
+								transform: `translateY(${item.start}px)`
+							},
+							children: renderRow(row)
+						}, row.id);
+					})
+				}) : /* @__PURE__ */ jsx("div", {
+					className: gridClassName,
+					children: rows.map((row) => /* @__PURE__ */ jsx("div", { children: renderRow(row) }, row.id))
+				})
+			})
+		]
+	});
+}
+function CodeDiff({ patch, oldText, newText, lang, name, diffStyle = "unified", diffIndicators = "bars", lineDiffType = "word", overflow = "scroll", maxLineDiffLength, maxHeight = "32rem", header = true, className, style, ...props }) {
+	const options = {
+		name,
+		lang,
+		lineDiffType,
+		maxLineDiffLength
+	};
+	const parsedFiles = patch === void 0 ? [buildDiffFromFiles(oldText ?? "", newText ?? "", options)] : buildDiffFromPatch(patch, options);
+	const files = parsedFiles.length > 0 ? parsedFiles : [emptyFile(name)];
+	const additions = files.reduce((total, file) => total + file.additions, 0);
+	const deletions = files.reduce((total, file) => total + file.deletions, 0);
+	const copyValue = patch ?? newText ?? "";
+	const firstFile = files[0];
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-control-ui": "code-diff",
+		"data-control-family": "code-diff",
+		"data-slot": "root",
+		"data-surface": "panel",
+		"data-diff-style": diffStyle,
+		"data-file-count": files.length,
+		"data-header": header ? "true" : void 0,
+		className: cn("overflow-hidden", className),
+		style,
+		...props,
+		children: [header ? /* @__PURE__ */ jsxs("figcaption", {
+			"data-control-ui": "code-diff",
+			"data-control-family": "code-diff",
+			"data-slot": "header",
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-control-ui": "code-diff",
+				"data-control-family": "code-diff",
+				"data-slot": "title",
+				className: "min-w-0 truncate",
+				children: files.length === 1 && firstFile ? fileTitle(firstFile) : `${files.length} files`
+			}), /* @__PURE__ */ jsxs("div", {
+				"data-control-ui": "code-diff",
+				"data-control-family": "code-diff",
+				"data-slot": "actions",
+				className: "flex shrink-0 items-center",
+				children: [/* @__PURE__ */ jsx(DiffStats, {
+					additions,
+					deletions
+				}), /* @__PURE__ */ jsx(CodeDiffCopy, { value: copyValue })]
+			})]
+		}) : /* @__PURE__ */ jsx(CodeFloatingCopy, { value: copyValue }), files.map((file) => /* @__PURE__ */ jsx(CodeDiffFileSection, {
+			file,
+			lang,
+			diffStyle,
+			diffIndicators,
+			overflow,
+			maxHeight,
+			showFileHeader: files.length > 1
+		}, fileIdentity(file)))]
+	});
+}
+function CodeDiffCopy(props) {
+	return /* @__PURE__ */ jsx(CodeCopy, { ...props });
+}
+function emptyFile(name) {
+	return {
+		name: name ?? "file",
+		type: "change",
+		hunks: [],
+		oldLines: [],
+		newLines: [],
+		isPartial: true,
+		additions: 0,
+		deletions: 0
+	};
+}
+//#endregion
+export { CodeDiff, CodeDiffCopy };

package/dist/ui/code.d.ts

@@ -0,0 +1,62 @@
+import { Button } from "./button.js";
+import { CodeKnobStyle } from "../knob-contracts/code-knobs.js";
+import { CodeTokenLines } from "../lib/code-tokens.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/code.d.ts
+type CodeOverflow = "wrap" | "scroll";
+type CodeHighlight = "auto" | "none";
+type CodeDensity = "default" | "compact";
+type CodeChrome = "standalone" | "embedded";
+type CodeProps = Omit<ComponentProps<"figure">, "style"> & {
+  overflow?: CodeOverflow;
+  chrome?: CodeChrome;
+  density?: CodeDensity;
+  style?: CSSProperties & CodeKnobStyle;
+};
+declare function Code({ overflow, chrome, density, className, children, ...props }: CodeProps): import("react").JSX.Element;
+type CodeHeaderProps = Omit<ComponentProps<"figcaption">, "style"> & {
+  style?: CSSProperties & CodeKnobStyle;
+};
+declare function CodeHeader({ className, ...props }: CodeHeaderProps): import("react").JSX.Element;
+type CodeTitleProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & CodeKnobStyle;
+};
+declare function CodeTitle({ className, ...props }: CodeTitleProps): import("react").JSX.Element;
+type CodeActionsProps = ComponentProps<"div"> & {
+  style?: CSSProperties & CodeKnobStyle;
+};
+declare function CodeActions({ className, ...props }: CodeActionsProps): import("react").JSX.Element;
+type CodeCopyProps = Omit<ComponentProps<typeof Button>, "children" | "onClick"> & {
+  value: string;
+  children?: ReactNode;
+  copiedLabel?: ReactNode;
+  copiedAriaLabel?: string;
+};
+declare function CodeCopy({ value, copiedLabel, copiedAriaLabel, children, className, "aria-label": ariaLabel, ...props }: CodeCopyProps): import("react").JSX.Element;
+type CodeFloatingCopyProps = Omit<CodeCopyProps, "children" | "copiedLabel">;
+declare function CodeFloatingCopy({ className, ...props }: CodeFloatingCopyProps): import("react").JSX.Element;
+/** Null until resolved, and whenever highlighting is off or language is unknown — callers fall back to plain text. */
+declare function useCodeTokens({ code, lang, tokens, highlight }: {
+  code: string;
+  lang?: string;
+  tokens?: CodeTokenLines | null;
+  highlight: CodeHighlight;
+}): CodeTokenLines | null;
+declare function CodeTokenLine({ tokens, plain }: {
+  tokens: CodeTokenLines[number] | null;
+  plain: string;
+}): ReactNode;
+type CodeContentProps = Omit<ComponentProps<"div">, "children" | "style"> & {
+  code: string;
+  lang?: string;
+  tokens?: CodeTokenLines | null;
+  highlight?: CodeHighlight;
+  showLineNumbers?: boolean;
+  startLine?: number;
+  maxHeight?: string;
+  virtualize?: boolean;
+  style?: CSSProperties & CodeKnobStyle;
+};
+declare function CodeContent({ code, lang, tokens, highlight, showLineNumbers, startLine, maxHeight, virtualize, className, ref, style, ...props }: CodeContentProps): import("react").JSX.Element;
+//#endregion
+export { Code, CodeActions, CodeActionsProps, CodeChrome, CodeContent, CodeContentProps, CodeCopy, CodeCopyProps, CodeDensity, CodeFloatingCopy, CodeFloatingCopyProps, CodeHeader, CodeHeaderProps, CodeHighlight, CodeOverflow, CodeProps, CodeTitle, CodeTitleProps, CodeTokenLine, useCodeTokens };