4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T27f4,"use client" import * as React from "react" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { Badge } from "@/components/ui/ds-badge" import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" // ── Types ────────────────────────────────────────────────────────────────── export type DiffMode = "split" | "unified" export type DiffLineType = "added" | "removed" | "unchanged" export interface DiffLine { type: DiffLineType content: string oldLineNo: number | null newLineNo: number | null } export interface DiffViewerProps extends React.HTMLAttributes { oldValue: string newValue: string title?: string oldLabel?: string newLabel?: string mode?: DiffMode /** Max lines to display before truncating — 0 = unlimited */ maxLines?: number loading?: boolean /** Show line numbers */ showLineNumbers?: boolean } // ── Variants ─────────────────────────────────────────────────────────────── export const diffViewerContainerVariants = cva( "w-full overflow-hidden rounded-lg border border-border font-mono text-xs", { variants: {}, } ) export const diffLineVariants = cva("flex gap-2 px-3 py-0.5 leading-5", { variants: { type: { added: "bg-success/10 text-success", removed: "bg-destructive/10 text-destructive", unchanged: "text-foreground", }, }, defaultVariants: { type: "unchanged" }, }) // ── Diff algorithm (LCS-based) ──────────────────────────────────────────── function computeDiff(oldText: string, newText: string): DiffLine[] { const oldLines = oldText.split("\n") const newLines = newText.split("\n") const m = oldLines.length const n = newLines.length // Build LCS table const dp: number[][] = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0) ) for (let i = 1; i <= m; i++) { for (let j = 1; j <= n; j++) { if (oldLines[i - 1] === newLines[j - 1]) { dp[i]![j] = dp[i - 1]![j - 1]! + 1 } else { dp[i]![j] = Math.max(dp[i - 1]![j]!, dp[i]![j - 1]!) } } } // Backtrack const result: DiffLine[] = [] let i = m let j = n let oldNo = m let newNo = n while (i > 0 || j > 0) { if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) { result.push({ type: "unchanged", content: oldLines[i - 1]!, oldLineNo: oldNo--, newLineNo: newNo--, }) i-- j-- } else if (j > 0 && (i === 0 || dp[i]![j - 1]! >= dp[i - 1]![j]!)) { result.push({ type: "added", content: newLines[j - 1]!, oldLineNo: null, newLineNo: newNo--, }) j-- } else { result.push({ type: "removed", content: oldLines[i - 1]!, oldLineNo: oldNo--, newLineNo: null, }) i-- } } return result.reverse() } // ── Line Number ─────────────────────────────────────────────────────────── function LineNo({ n }: { n: number | null }) { return ( {n ?? " "} ) } // ── DiffViewer ──────────────────────────────────────────────────────────── export function DiffViewer({ oldValue, newValue, title, oldLabel = "Before", newLabel = "After", mode: modeProp = "unified", maxLines = 500, loading = false, showLineNumbers = true, className, ...props }: DiffViewerProps) { const [mode, setMode] = React.useState(modeProp) // ── Compute diff ───────────────────────────────────────────────────────── const diffLines = React.useMemo( () => computeDiff(oldValue, newValue), [oldValue, newValue] ) // ── Loading ───────────────────────────────────────────────────────────── if (loading) { return ( {title && ( )}

{Array.from({ length: 6 }).map((_, i) => (

))}

) } const addedCount = diffLines.filter((l) => l.type === "added").length const removedCount = diffLines.filter((l) => l.type === "removed").length const displayLines = maxLines > 0 ? diffLines.slice(0, maxLines) : diffLines const truncated = maxLines > 0 && diffLines.length > maxLines // ── Unified view ───────────────────────────────────────────────────────── const unifiedView = (

{displayLines.map((line, i) => (

{showLineNumbers && } {showLineNumbers && } {line.type === "added" ? "+" : line.type === "removed" ? "−" : " "} {line.content}

))} {truncated && (

… {diffLines.length - maxLines} more lines not shown

)}

) // ── Split view ──────────────────────────────────────────────────────────── const oldLines = displayLines .filter((l) => l.type !== "added") .map((l) => ({ ...l, type: l.type as "unchanged" | "removed" })) const newLines = displayLines .filter((l) => l.type !== "removed") .map((l) => ({ ...l, type: l.type as "unchanged" | "added" })) const splitView = (

{/* Old */}

{oldLabel}

{oldLines.map((line, i) => (

{showLineNumbers && } {line.content}

))}

{/* New */}

{newLabel}

{newLines.map((line, i) => (

{showLineNumbers && } {line.content}

))}

) return (

{title && {title}}

{addedCount > 0 && ( +{addedCount} )} {removedCount > 0 && ( −{removedCount} )}

v && setMode(v as DiffMode)} > Unified Split {mode === "unified" ? unifiedView : splitView} ) } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4c",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","badge","card","toggle-group"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ds/diff-viewer.tsx","content":"$4e","type":"registry:ui","target":"components/ui/ds-diff-viewer.tsx"}],"className":"h-[70svh] min-h-80"}]]}]