"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
/**
 * Generic unified diff renderer for a single file.
 *
 * Renders a unified diff with line numbers, `+`/`-` prefix indicators,
 * and hunk separator headers. Uses `--stgm-diff-*` design tokens for
 * all colors — respects light/dark mode and preset overrides.
 *
 * Accessibility: uses a `<table>` with proper column headers, `+`/`-`
 * text indicators alongside color (color is never the sole channel),
 * and ARIA labels on change lines for screen readers.
 *
 * Zero Console dependencies — safe for platform builder embedding.
 *
 * @example
 * ```tsx
 * const hunks = computeDiff(oldText, newText);
 * <DiffViewer hunks={hunks} filePath="SKILL.md" />
 * ```
 */
export function DiffViewer({ hunks, filePath, className }) {
    if (hunks.length === 0) {
        return (_jsx("div", { role: "status", className: cn("flex items-center justify-center py-8 text-sm text-muted-foreground", className), children: "No changes" }));
    }
    return (_jsxs("div", { className: cn("overflow-auto rounded-lg border border-border font-mono text-[13px] leading-[1.6]", className), children: [filePath && (_jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-muted px-3 py-1.5 text-xs font-medium text-muted-foreground", children: filePath })), _jsxs("table", { className: "w-full border-collapse", role: "table", children: [_jsx("thead", { className: "sr-only", children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Old line" }), _jsx("th", { scope: "col", children: "New line" }), _jsx("th", { scope: "col", children: "Change" }), _jsx("th", { scope: "col", children: "Content" })] }) }), _jsx("tbody", { children: hunks.map((hunk, hunkIdx) => (_jsx(HunkRows, { hunk: hunk, isFirst: hunkIdx === 0 }, hunkIdx))) })] })] }));
}
// ---------------------------------------------------------------------------
// Hunk rendering
// ---------------------------------------------------------------------------
function HunkRows({ hunk, isFirst, }) {
    const header = `@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@`;
    return (_jsxs(_Fragment, { children: [!isFirst && (_jsx("tr", { children: _jsx("td", { colSpan: 4, className: "select-none bg-diff-hunk-header-bg px-3 py-1 text-[11px] text-diff-hunk-header-fg", "aria-label": `Hunk: ${header}`, children: header }) })), hunk.lines.map((line, lineIdx) => (_jsx(DiffLineRow, { line: line }, lineIdx)))] }));
}
// ---------------------------------------------------------------------------
// Line rendering
// ---------------------------------------------------------------------------
const LINE_NUM_CLASSES = "w-[1px] min-w-10 select-none whitespace-nowrap px-2 text-right text-[11px] text-muted-foreground-faint";
const MARKER_CLASSES = "w-[1px] select-none px-1 text-center";
function DiffLineRow({ line }) {
    const marker = line.type === "added" ? "+" : line.type === "removed" ? "-" : " ";
    const rowClass = line.type === "added"
        ? "bg-diff-added-bg"
        : line.type === "removed"
            ? "bg-diff-removed-bg"
            : "";
    const markerColor = line.type === "added"
        ? "text-diff-added-fg"
        : line.type === "removed"
            ? "text-diff-removed-fg"
            : "text-muted-foreground-faint";
    const ariaLabel = line.type === "added"
        ? `Added line ${line.newLineNumber}: ${line.content}`
        : line.type === "removed"
            ? `Removed line ${line.oldLineNumber}: ${line.content}`
            : undefined;
    return (_jsxs("tr", { className: rowClass, "aria-label": ariaLabel, children: [_jsx("td", { className: LINE_NUM_CLASSES, children: line.oldLineNumber ?? "" }), _jsx("td", { className: LINE_NUM_CLASSES, children: line.newLineNumber ?? "" }), _jsx("td", { className: cn(MARKER_CLASSES, markerColor), "aria-hidden": "true", children: marker }), _jsx("td", { className: "whitespace-pre-wrap break-all px-2", children: line.content })] }));
}
//# sourceMappingURL=DiffViewer.js.map