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:T29af,'use client'; import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'; import { cva } from 'class-variance-authority'; import { ChevronDown } from 'lucide-react'; import { ComponentPropsWithoutRef, ElementRef, forwardRef, MutableRefObject, useCallback, useEffect, useLayoutEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import { menuItemFocusVisible } from '@/lib/recipes'; import { cn } from '@/lib/utils'; interface NavigationMenuProps extends ComponentPropsWithoutRef { // Minimum distance in px between the open panel and the viewport edges. The panel is shifted sideways to keep it inside. collisionPadding?: number; } const NavigationMenu = forwardRef, NavigationMenuProps>( ({ className, children, collisionPadding, ...props }, ref) => ( {children} ), ); NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName; const NavigationMenuList = forwardRef< ElementRef, ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName; const NavigationMenuItem = NavigationMenuPrimitive.Item; const navigationMenuTriggerStyle = cva( 'group inline-flex h-10 w-max items-center justify-center rounded-control bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus-visible:outline-none focus-visible:ring-focus focus-visible:ring-offset-focus focus-visible:ring-offset-background focus-visible:ring-ring-default disabled:pointer-events-none disabled:opacity-disabled data-[active]:bg-muted data-[state=open]:bg-muted', ); const NavigationMenuTrigger = forwardRef< ElementRef, ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children}{' '} )); NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName; const NavigationMenuContent = forwardRef< ElementRef, ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName; const NavigationMenuLink = NavigationMenuPrimitive.Link; interface NavigationMenuViewportProps extends ComponentPropsWithoutRef { collisionPadding?: number; } const DEFAULT_COLLISION_PADDING = 16; // Gap in px between the root and the panel (the mt-[6px] of the viewport). The indicator arrow fills it. const PANEL_OFFSET = 6; const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect; // The panel renders in a portal on the dropdown layer, so the page chrome stacking context (header, topbar) can no longer clip or under-cover it (a cookie banner, z-banner, stays below). The portal anchor is `fixed` and placed from the root rect: below the root, shifted sideways to stay inside the viewport, and capped to the height that is left below the root. Radix keeps the content in the viewport element, so its focus and keyboard handling is unchanged. const NavigationMenuViewport = forwardRef, NavigationMenuViewportProps>( ({ className, collisionPadding = DEFAULT_COLLISION_PADDING, ...props }, ref) => { // State instead of refs: the panel only exists while a menu is open, so the effects must re-run when it mounts. const [origin, setOrigin] = useState(null); const [anchor, setAnchor] = useState(null); const [viewport, setViewport] = useState(null); const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); const root = origin?.parentElement ?? null; // Stable callback ref: an inline function would detach and attach on every render and loop through the state setter. const setViewportRef = useCallback( (node: HTMLDivElement | null) => { setViewport(node); if (typeof ref === 'function') ref(node); else if (ref) (ref as MutableRefObject).current = node; }, [ref], ); const place = useCallback(() => { if (!anchor || !root) return; const rootRect = root.getBoundingClientRect(); const availableWidth = document.documentElement.clientWidth; const availableHeight = document.documentElement.clientHeight; const width = viewport?.offsetWidth ?? 0; let shift = 0; if (width > 0) { // Radix anchors the panel at the left edge of the root. Shift it left when it would run past the right viewport edge, and right when it would run past the left edge. const overflow = rootRect.left + width - (availableWidth - collisionPadding); if (overflow > 0) shift = -overflow; if (rootRect.left + shift < collisionPadding) shift = collisionPadding - rootRect.left; } anchor.style.left = `${rootRect.left + shift}px`; anchor.style.top = `${rootRect.bottom}px`; anchor.style.setProperty('--navigation-menu-available-height', `${Math.max(availableHeight - rootRect.bottom - PANEL_OFFSET - collisionPadding, 0)}px`); }, [anchor, root, viewport, collisionPadding]); // Runs on first open (the viewport element appears), on content size changes (observer), on window resize and on scroll of any ancestor. useIsomorphicLayoutEffect(() => { place(); if (!anchor || !root) return undefined; window.addEventListener('resize', place); window.addEventListener('scroll', place, true); const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(place); observer?.observe(root); if (viewport) observer?.observe(viewport); return () => { window.removeEventListener('resize', place); window.removeEventListener('scroll', place, true); observer?.disconnect(); }; }, [place, anchor, root, viewport]); const panel = (

); return ( <> {mounted && createPortal(panel, document.body)} ); }, ); NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName; const NavigationMenuIndicator = forwardRef< ElementRef, ComponentPropsWithoutRef >(({ className, ...props }, ref) => (

)); NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName; const MenuListItem = forwardRef, ComponentPropsWithoutRef<'a'>>( ({ className, title, children, ...props }, ref) => { return (

{children}

); }, ); MenuListItem.displayName = 'MenuListItem'; export { MenuListItem, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle, }; 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","@radix-ui/react-navigation-menu@^1.4.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-navigation-menu","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":"@radix-ui/react-navigation-menu@^1.4.1"}]]}]}],["$","li","class-variance-authority@^0.7.0",{"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@^0.7.0"}]]}]}],["$","li","lucide-react@^0.379.0",{"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@^0.379.0"}]]}]}]]}],["$","$L52",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/ui/navigation-menu.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]