52: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"] 53: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"] 54:T3fcf,"use client"; import * as React from "react"; import { createContext, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from "react"; import { motion, AnimatePresence } from "motion/react"; import { ChevronRight } from "lucide-react"; import { cn } from "@/lib/utils"; const MotionChevron = motion.create(ChevronRight); const EFFECTS_KEY = "sidebar-001-effects"; const EffectsContext = createContext<{ enabled: boolean; toggle: () => void }>({ enabled: true, toggle: () => {}, }); function EffectsProvider({ children, defaultEnabled = true, }: { children: React.ReactNode; defaultEnabled?: boolean; }) { const [enabled, setEnabled] = useState(() => { if (typeof window === "undefined") return defaultEnabled; const stored = localStorage.getItem(EFFECTS_KEY); return stored !== null ? stored === "true" : defaultEnabled; }); const toggle = useCallback(() => { setEnabled((prev) => { const next = !prev; localStorage.setItem(EFFECTS_KEY, String(next)); return next; }); }, []); const value = useMemo(() => ({ enabled, toggle }), [enabled, toggle]); return ( {children} ); } export function useSidebar001Effects() { return useContext(EffectsContext); } // ─── Hover context ──────────────────────────────────────────────────────────── interface HoverRect { top: number; height: number; left: number; } const HoverContext = createContext<{ hovered: string | null; hoverRect: HoverRect | null; containerRef: React.RefObject; setHovered: (id: string | null, rect?: HoverRect | null) => void; }>({ hovered: null, hoverRect: null, containerRef: { current: null }, setHovered: () => {}, }); function HoverProvider({ children, containerRef, }: { children: React.ReactNode; containerRef: React.RefObject; }) { const [hovered, setHoveredId] = useState(null); const [hoverRect, setHoverRect] = useState(null); const setHovered = useCallback( (id: string | null, rect?: HoverRect | null) => { setHoveredId(id); setHoverRect(rect ?? null); }, [], ); const value = useMemo( () => ({ hovered, hoverRect, containerRef, setHovered }), [hovered, hoverRect, containerRef, setHovered], ); return ( {children} ); } // ─── Scroll to active ───────────────────────────────────────────────────────── function useScrollToActive(active: boolean) { const ref = useRef(null); const scrolled = useRef(false); useEffect(() => { if (!active || scrolled.current || !ref.current) return; scrolled.current = true; const el = ref.current; const schedule = typeof requestIdleCallback !== "undefined" ? (cb: () => void) => requestIdleCallback(cb) : (cb: () => void) => setTimeout(cb, 100); const cancel = typeof cancelIdleCallback !== "undefined" ? cancelIdleCallback : clearTimeout; const id = schedule(() => { const viewport = el.closest("[data-scroll-viewport]"); if (!(viewport instanceof HTMLElement)) return; const vpRect = viewport.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const offset = elRect.top - vpRect.top - vpRect.height / 2 + elRect.height / 2; if (Math.abs(offset) > 40) viewport.scrollBy({ top: offset, behavior: "smooth" }); }); return () => cancel(id as number); }, [active]); useEffect(() => { if (!active) scrolled.current = false; }, [active]); return ref; } // ─── HoverHighlight ─────────────────────────────────────────────────────────── function HoverHighlight() { const { hoverRect, hovered } = useContext(HoverContext); const { enabled } = useContext(EffectsContext); return ( {enabled && hovered && hoverRect && ( )} ); } // ─── Sidebar001Item ─────────────────────────────────────────────────────────── export interface Sidebar001ItemProps { href: string; label: React.ReactNode; isActive: boolean; isNew?: boolean; className?: string; onClick?: React.MouseEventHandler; } export const Sidebar001Item = memo(function Sidebar001Item({ href, label, isActive, isNew, className, onClick, }: Sidebar001ItemProps) { const { hovered, setHovered, containerRef } = useContext(HoverContext); const isHovered = hovered === href; const itemRef = useScrollToActive(isActive); const opacity = isActive ? 1 : hovered !== null ? isHovered ? 1 : 0.3 : 0.55; const x = isActive ? 8 : isHovered ? 6 : 0; return (

{isActive && ( )} { const el = itemRef.current; const container = containerRef.current; if (el && container) { const elRect = el.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); setHovered(href, { top: elRect.top - containerRect.top, height: elRect.height, left: 25, }); } else { setHovered(href); } }} onMouseLeave={() => setHovered(null)} className={cn( "relative flex items-center gap-2 ml-2 pl-4 py-1.5 text-sm select-none", className, )} > {label} {isNew && ( )}

); }); // ─── Sidebar001Separator ────────────────────────────────────────────────────── export function Sidebar001Separator({ children, className, }: { children?: React.ReactNode; className?: string; }) { return (

{children}

); } // ─── Sidebar001Group ────────────────────────────────────────────────────────── export interface Sidebar001GroupProps { label: React.ReactNode; children: React.ReactNode; defaultOpen?: boolean; icon?: React.ReactNode; className?: string; } export function Sidebar001Group({ label, children, defaultOpen = false, icon, className, }: Sidebar001GroupProps) { const [isOpen, setIsOpen] = useState(false); const id = useId(); const { setHovered, containerRef } = useContext(HoverContext); const buttonRef = useRef(null); useEffect(() => { setIsOpen(defaultOpen); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const handleMouseEnter = useCallback(() => { const el = buttonRef.current; const container = containerRef.current; if (el && container) { const elRect = el.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); setHovered(id, { top: elRect.top - containerRect.top, height: elRect.height, left: 0, }); } else { setHovered(id); } }, [id, setHovered, containerRef]); const handleMouseLeave = useCallback(() => { setHovered(null); }, [setHovered]); return (

{isOpen && (

{children}

)}

); } // ─── Sidebar001Section ──────────────────────────────────────────────────────── export function Sidebar001Section({ label, children, className, }: { label?: React.ReactNode; children: React.ReactNode; className?: string; }) { return (

{label && {label}} {children}

); } // ─── Sidebar001Content ──────────────────────────────────────────────────────── export function Sidebar001Content({ children, className, }: { children: React.ReactNode; className?: string; }) { const containerRef = useContext(HoverContext).containerRef; return (

{children}

); } // ─── Sidebar001 (with resize) ───────────────────────────────────────────────── export interface Sidebar001Props { children: React.ReactNode; className?: string; defaultEffectsEnabled?: boolean; /** Initial width in px. Default: 240 */ defaultWidth?: number; /** Min resize width in px. Default: 160 */ minWidth?: number; /** Max resize width in px. Default: 400 */ maxWidth?: number; } export function Sidebar001({ children, className, defaultEffectsEnabled = true, defaultWidth = 240, minWidth = 160, maxWidth = 400, }: Sidebar001Props) { const containerRef = useRef(null); const [width, setWidth] = useState(defaultWidth); const dragging = useRef(false); const startX = useRef(0); const startW = useRef(0); const onPointerDown = useCallback( (e: React.PointerEvent) => { e.preventDefault(); dragging.current = true; startX.current = e.clientX; startW.current = width; (e.target as HTMLElement).setPointerCapture(e.pointerId); }, [width], ); const onPointerMove = useCallback( (e: React.PointerEvent) => { if (!dragging.current) return; const next = Math.min( maxWidth, Math.max(minWidth, startW.current + e.clientX - startX.current), ); setWidth(next); }, [minWidth, maxWidth], ); const onPointerUp = useCallback(() => { dragging.current = false; }, []); return ( ); } // ─── Sidebar001Header ───────────────────────────────────────────────────────── export function Sidebar001Header({ children, className, }: { children?: React.ReactNode; className?: string; }) { return (

{children}

); } // ─── Sidebar001Footer ───────────────────────────────────────────────────────── export function Sidebar001Footer({ children, className, }: { children?: React.ReactNode; className?: string; }) { return (

{children}

); } 51:["$","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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@unlumen-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/components/unlumen/sidebar-001/index.tsx","content":"$54","type":"registry:ui","target":"components/unlumen-ui/sidebar-001.tsx"}],"className":"h-[70svh] min-h-80"}]]}]