4e: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T3695,"use client"; import { CheckCheckIcon, CheckIcon, SparklesIcon, Undo2Icon, XIcon } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { Fragment, type KeyboardEvent, useEffect, useLayoutEffect, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { Kbd } from "@/components/ui/kbd"; import { cn } from "@/lib/utils"; export interface DiffChange { del?: string; ins?: string; reason?: string; } export type DiffSegment = string | DiffChange; export interface RedlineProps { segments: DiffSegment[]; title?: string; onComplete?: (text: string) => void; className?: string; } type Decision = "accepted" | "rejected"; const spring = { type: "spring", stiffness: 440, damping: 32 } as const; function Count({ value }: { value: number }) { const reduce = useReducedMotion(); return ( {value} ); } export function Redline({ segments, title = "Suggested edits", onComplete, className }: RedlineProps) { const reduce = useReducedMotion(); const [decisions, setDecisions] = useState>({}); const [history, setHistory] = useState([]); const [hot, setHot] = useState(null); const refs = useRef>({}); const warm = useRef(false); const openTimer = useRef>(undefined); const coolTimer = useRef>(undefined); const instant = warm.current; useEffect(() => { if (hot !== null) { clearTimeout(coolTimer.current); warm.current = true; } else { coolTimer.current = setTimeout(() => { warm.current = false; }, 400); } }, [hot]); useEffect( () => () => { clearTimeout(openTimer.current); clearTimeout(coolTimer.current); }, [], ); const show = (i: number, now = false) => { clearTimeout(openTimer.current); if (now || warm.current) setHot(i); else openTimer.current = setTimeout(() => setHot(i), 120); }; const hide = (i: number) => { clearTimeout(openTimer.current); setHot((h) => (h === i ? null : h)); }; const wrapRef = useRef(null); const barRef = useRef(null); const [pos, setPos] = useState<{ i: number; x: number; y: number } | null>(null); useLayoutEffect(() => { if (hot === null) return; const el = refs.current[hot]; const wrap = wrapRef.current; const first = el?.getClientRects()[0]; if (!wrap || !first) return; const box = wrap.getBoundingClientRect(); const half = (barRef.current?.offsetWidth ?? 0) / 2; const center = first.left - box.left + first.width / 2; setPos({ i: hot, x: Math.min(Math.max(center, half + 8), box.width - half - 8), y: first.top - box.top }); }, [hot]); const changeIdx = segments.flatMap((s, i) => (typeof s === "string" ? [] : [i])); const pending = changeIdx.filter((i) => !decisions[i]); const accepted = changeIdx.filter((i) => decisions[i] === "accepted").length; const done = pending.length === 0; const finalText = segments .map((s, i) => (typeof s === "string" ? s : decisions[i] === "rejected" ? (s.del ?? "") : (s.ins ?? ""))) .join(""); const reported = useRef(false); useEffect(() => { if (done && !reported.current) { reported.current = true; onComplete?.(finalText); } if (!done) reported.current = false; }, [done, finalText, onComplete]); const focusNext = (from: number, dir: 1 | -1, list = pending) => { const ordered = dir === 1 ? list : [...list].reverse(); const next = ordered.find((i) => (dir === 1 ? i > from : i < from)) ?? ordered.find((i) => i !== from); if (next !== undefined) refs.current[next]?.focus(); }; const decide = (i: number, d: Decision) => { setDecisions((prev) => ({ ...prev, [i]: d })); setHistory((h) => [...h, [i]]); focusNext( i, 1, pending.filter((p) => p !== i), ); }; const acceptAll = () => { if (!pending.length) return; setDecisions((prev) => ({ ...prev, ...Object.fromEntries(pending.map((i) => [i, "accepted" as const])) })); setHistory((h) => [...h, pending]); }; const undo = () => { const last = history.at(-1); if (!last) return; setHistory((h) => h.slice(0, -1)); setDecisions((prev) => { const next = { ...prev }; for (const i of last) delete next[i]; return next; }); setTimeout(() => refs.current[last[0]]?.focus(), 0); }; const onChangeKey = (e: KeyboardEvent, i: number) => { const k = e.key.toLowerCase(); if (k === "enter" || k === "a" || k === "y") { e.preventDefault(); decide(i, "accepted"); } else if (k === "backspace" || k === "delete" || k === "r" || k === "n") { e.preventDefault(); decide(i, "rejected"); } else if (k === "arrowright" || k === "arrowdown") { e.preventDefault(); focusNext(i, 1); } else if (k === "arrowleft" || k === "arrowup") { e.preventDefault(); focusNext(i, -1); } }; const onRootKey = (e: KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") { e.preventDefault(); undo(); } }; return (

{title}

left

{segments.map((seg, i) => { if (typeof seg === "string") return {seg}; const d = decisions[i]; if (d) { const text = d === "accepted" ? seg.ins : seg.del; if (!text) return null; return ( {text} ); } const label = [ seg.del && seg.ins ? `Replace “${seg.del}” with “${seg.ins}”` : seg.ins ? `Insert “${seg.ins}”` : `Delete “${seg.del}”`, seg.reason, "Enter to accept, Backspace to reject", ] .filter(Boolean) .join(". "); return ( hide(i)} onFocus={() => show(i, true)} onMouseEnter={() => show(i)} onMouseLeave={() => hide(i)} onKeyDown={(e) => onChangeKey(e, i)} ref={(el) => { refs.current[i] = el; }} role="button" tabIndex={0} > {seg.del && ( ~~{seg.del}~~ )} {seg.del && seg.ins && " "} {seg.ins && ( {seg.ins} )} {hot === i && ( {seg.reason && ( {seg.reason} )} )} ); })}

); } 4d:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@devl","registryDependencies":["utils","https://coss.com/ui/r/button.json","https://coss.com/ui/r/kbd.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/devl/redline.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]