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:T2f3a,"use client"; import { CheckIcon, LightbulbIcon, RotateCcwIcon, SparklesIcon, Undo2Icon } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useEffect, useLayoutEffect, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export interface NudgeOption { id: string; label: string; title: string; detail?: string; confidence: number; reasons?: string[]; result?: string; } export interface NudgeProps { options: NudgeOption[]; undoMs?: number; onAccept?: (option: NudgeOption) => void; onUndo?: (option: NudgeOption) => void; className?: string; } const spring = { type: "spring", stiffness: 400, damping: 32 } as const; const press = "transition-[scale,background-color,box-shadow] duration-150 ease-out active:scale-[0.97]"; function level(c: number) { if (c >= 0.8) return { label: "High confidence", bar: "bg-success", text: "text-success-foreground" }; if (c >= 0.55) return { label: "Fair confidence", bar: "bg-warning", text: "text-warning-foreground" }; return { label: "Low confidence", bar: "bg-muted-foreground", text: "text-muted-foreground" }; } function RollingPercent({ value }: { value: number }) { const reduce = useReducedMotion(); const [shown, setShown] = useState(value); const from = useRef(value); useEffect(() => { if (reduce) { setShown(value); return; } const start = from.current; const t0 = performance.now(); let raf = 0; const tick = (t: number) => { const p = Math.min(1, (t - t0) / 500); const e = 1 - (1 - p) ** 3; setShown(Math.round(start + (value - start) * e)); if (p < 1) raf = requestAnimationFrame(tick); else from.current = value; }; raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); from.current = value; }; }, [value, reduce]); return {shown}%; } function ConfidenceMeter({ value }: { value: number }) { const reduce = useReducedMotion(); const l = level(value); const bars = 5; const filled = Math.max(1, Math.round(value * bars)); return (

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

{l.label} ·

); } export function Nudge({ options, undoMs = 5000, onAccept, onUndo, className }: NudgeProps) { const reduce = useReducedMotion(); const [index, setIndex] = useState(0); const [dir, setDir] = useState(1); const [phase, setPhase] = useState<"open" | "accepted" | "settled" | "dismissed">("open"); const current = options[index]; const innerRef = useRef(null); const [height, setHeight] = useState("auto"); useLayoutEffect(() => { const el = innerRef.current; if (!el) return; const ro = new ResizeObserver(() => setHeight(el.offsetHeight)); ro.observe(el); return () => ro.disconnect(); }, []); useEffect(() => { if (phase !== "accepted") return; const t = setTimeout(() => setPhase("settled"), undoMs); return () => clearTimeout(t); }, [phase, undoMs]); const pick = (i: number) => { if (i === index) return; setDir(i > index ? 1 : -1); setIndex(i); }; return (

{phase === "open" ? (

{index === 0 ? "Suggested" : "Alternative"}

reduce ? { opacity: 0 } : { x: d * -40, opacity: 0, filter: "blur(4px)", transition: { duration: 0.18 } }, }} >

{current.title}

{current.detail &&

{current.detail}

} {current.reasons && current.reasons.length > 0 && (

{r}

)} {options.length > 1 && (

Options

{options.map((o, i) => { const active = i === index; return ( ); })}

)} ) : ( {phase === "dismissed" ? : }

{phase === "dismissed" ? "Suggestion dismissed" : current.result ?? "Done"}

{phase === "dismissed" ? "We'll suggest something else later." : current.title}

{phase === "accepted" ? ( ) : ( )} )}

); } 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"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/devl/nudge.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]