60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62:T1dd0,import { cva } from "class-variance-authority"; import * as React from "react"; import { cn } from "@/lib/utils"; const highlightVariants = cva("relative inline-block", { variants: { variant: { underline: "", box: "", circle: "", marker: "", }, color: { primary: "[--highlight-color:hsl(var(--highlight-primary))] [&_path]:[stroke:var(--highlight-color)]", secondary: "[--highlight-color:hsl(var(--highlight-secondary))] [&_path]:[stroke:var(--highlight-color)]", accent: "[--highlight-color:hsl(var(--highlight-accent))] [&_path]:[stroke:var(--highlight-color)]", destructive: "[--highlight-color:hsl(var(--highlight-destructive))] [&_path]:[stroke:var(--highlight-color)]", }, }, defaultVariants: { variant: "underline", color: "primary", }, }); type HighlightColor = "primary" | "secondary" | "accent" | "destructive"; type HighlightVariant = "underline" | "box" | "circle" | "marker"; export interface HighlightTextProps extends Omit, "color"> { children: React.ReactNode; variant?: HighlightVariant; color?: HighlightColor; animationDuration?: number; animationDelay?: number; strokeWidth?: number; animate?: boolean; } const HighlightText = React.forwardRef( ( { className, variant = "underline", color = "primary", children, animationDuration = 0.8, animationDelay = 0, strokeWidth = 2, animate = true, ...props }, ref, ) => { const [isVisible, setIsVisible] = React.useState(!animate); const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 }); const containerRef = React.useRef(null); React.useEffect(() => { const element = containerRef.current; if (!element) return; const updateDimensions = () => { setDimensions({ width: element.offsetWidth, height: element.offsetHeight, }); }; updateDimensions(); const resizeObserver = new ResizeObserver(updateDimensions); resizeObserver.observe(element); return () => resizeObserver.disconnect(); }, []); React.useEffect(() => { if (!animate) { setIsVisible(true); return; } const element = containerRef.current; if (!element) return; const observer = new IntersectionObserver( ([entry]) => { if (entry?.isIntersecting) { setIsVisible(true); observer.disconnect(); } }, { threshold: 0.5, rootMargin: "0px 0px -50px 0px" }, ); observer.observe(element); return () => observer.disconnect(); }, [animate]); const renderHighlight = () => { const { width, height } = dimensions; if (width === 0 || height === 0) return null; const padding = 8; const svgWidth = width + padding * 2; const svgHeight = height + padding * 2; const baseStyles: React.CSSProperties = { position: "absolute", top: -padding, left: -padding, width: svgWidth, height: svgHeight, pointerEvents: "none", overflow: "visible", }; const pathStyles: React.CSSProperties = { fill: "none", stroke: "var(--highlight-color)", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", transition: `stroke-dashoffset ${animationDuration}s cubic-bezier(0.65, 0, 0.35, 1) ${animationDelay}s`, }; switch (variant) { case "underline": { const y = svgHeight - padding + 2; const pathLength = width + 10; const d = `M ${padding - 2} ${y} Q ${padding + width * 0.25} ${y - 3} ${padding + width * 0.5} ${y} T ${padding + width + 2} ${y}`; return ( ); } case "box": { const boxPadding = 4; const pathLength = (width + height + boxPadding * 2) * 2 + 20; const d = ` M ${padding - boxPadding} ${padding - boxPadding + 2} L ${padding + width + boxPadding} ${padding - boxPadding} L ${padding + width + boxPadding + 2} ${padding + height + boxPadding} L ${padding - boxPadding + 1} ${padding + height + boxPadding + 2} Z `; return ( ); } case "circle": { const cx = padding + width / 2; const cy = padding + height / 2; const rx = width / 2 + 6; const ry = height / 2 + 6; const pathLength = Math.PI * 2 * Math.max(rx, ry); // Hand-drawn ellipse using bezier curves const d = ` M ${cx - rx} ${cy} C ${cx - rx} ${cy - ry * 0.55} ${cx - rx * 0.55} ${cy - ry - 2} ${cx} ${cy - ry} C ${cx + rx * 0.55} ${cy - ry + 2} ${cx + rx + 1} ${cy - ry * 0.55} ${cx + rx} ${cy + 2} C ${cx + rx - 1} ${cy + ry * 0.55} ${cx + rx * 0.55} ${cy + ry + 1} ${cx - 2} ${cy + ry} C ${cx - rx * 0.55} ${cy + ry - 1} ${cx - rx + 2} ${cy + ry * 0.55} ${cx - rx} ${cy} `; return ( ); } case "marker": { const markerHeight = height + 4; const y1 = padding - 2; const _y2 = padding + markerHeight; return ( ); } default: return null; } }; return ( { ( containerRef as React.MutableRefObject ).current = node; if (typeof ref === "function") { ref(node); } else if (ref) { ref.current = node; } }} className={cn(highlightVariants({ variant, color, className }))} {...props} > {renderHighlight()} {children} ); }, ); HighlightText.displayName = "HighlightText"; export { HighlightText, highlightVariants }; 5f:["$","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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L60",null,{"namespace":"@jolyui","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"ui/highlight-text.tsx","content":"$62","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]