{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "nav-site-condense", "title": "Nav Site Condense", "description": "A full-width site nav with the furniture a real site needs: a scroll-condensed bar, a menu trigger present at every width, and a mobile sheet built on native for a free focus trap and Escape-to-close.", "dependencies": [], "files": [ { "path": "registry/core/nav-site-condense/component.tsx", "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\n\n// ---------------------------------------------------------------------------\n// NavSiteCondense — a full-width top nav with the mechanics an actual site\n// needs and this registry didn't have yet: real scroll state (a plain\n// threshold class-swap, deliberately subordinate — nav-condense-rail already\n// owns the continuous, measured density transition and header-scroll-pill\n// already owns the silhouette morph into a pill; this component's job is\n// everything neither of those ships), a menu trigger that is present at\n// every width (not hidden behind a responsive breakpoint that would make it\n// unreachable at some viewport sizes), and a mobile sheet built on the\n// native element for a free focus trap, Escape-to-close and\n// top-layer stacking.\n// ---------------------------------------------------------------------------\n\nexport interface NavLinkItem {\n label: string;\n href: string;\n}\n\nexport interface NavSiteCondenseProps {\n /** wordmark / brand text */\n brand?: string;\n /** nav links, in order */\n links: NavLinkItem[];\n /** px of scrollY past which the bar condenses. default 24 */\n condenseAt?: number;\n /** extra classes merged onto the rendered root element */\n className?: string;\n}\n\nexport function NavSiteCondense({\n brand = \"ns-ui\",\n links,\n condenseAt = 24,\n className = \"\",\n}: NavSiteCondenseProps) {\n const [condensed, setCondensed] = useState(false);\n const [sheetOpen, setSheetOpen] = useState(false);\n\n const dialogRef = useRef(null);\n const triggerRef = useRef(null);\n const dialogId = useId();\n const sheetTitleId = useId();\n\n // -- scroll condense: a plain threshold, not a continuous interpolation --\n useEffect(() => {\n let ticking = false;\n const evaluate = () => {\n ticking = false;\n setCondensed(window.scrollY > condenseAt);\n };\n const onScroll = () => {\n if (ticking) return;\n ticking = true;\n requestAnimationFrame(evaluate);\n };\n evaluate(); // honest initial read: the page may load already scrolled\n window.addEventListener(\"scroll\", onScroll, { passive: true });\n return () => window.removeEventListener(\"scroll\", onScroll);\n }, [condenseAt]);\n\n // -- sheet: native drives the trap, Escape and top layer --------\n useEffect(() => {\n const dlg = dialogRef.current;\n if (!dlg) return;\n\n if (sheetOpen && !dlg.open) dlg.showModal();\n if (!sheetOpen && dlg.open) dlg.close();\n\n const onCancel = (e: Event) => {\n // native Escape handling; just keep our state in sync\n e.preventDefault();\n setSheetOpen(false);\n };\n const onClose = () => setSheetOpen(false);\n const onBackdrop = (e: MouseEvent) => {\n if (e.target === dlg) setSheetOpen(false);\n };\n dlg.addEventListener(\"cancel\", onCancel);\n dlg.addEventListener(\"close\", onClose);\n dlg.addEventListener(\"click\", onBackdrop);\n return () => {\n dlg.removeEventListener(\"cancel\", onCancel);\n dlg.removeEventListener(\"close\", onClose);\n dlg.removeEventListener(\"click\", onBackdrop);\n };\n }, [sheetOpen]);\n\n const closeSheet = () => setSheetOpen(false);\n\n return (\n <>\n \n
\n \n {brand}\n \n\n \n\n {/* Present at every width on purpose: a trigger hidden behind a\n responsive breakpoint is unreachable at whatever viewport a\n test (or a user on an in-between width) actually has. Doubles\n as the full-sitemap entry point even on wide screens. */}\n setSheetOpen(true)}\n className=\"inline-flex shrink-0 items-center justify-center gap-1.5 rounded-sm border border-border px-2 py-1.5 font-mono text-xs text-foreground transition-colors hover:border-foreground/25 hover:text-ns-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ns-accent\"\n >\n \n [≡]\n \n \n
\n \n\n \n
\n
\n

\n {brand}\n

\n \n \n \n \n \n
\n \n
\n\n \n \n \n );\n}\n", "type": "registry:ui", "target": "components/ui/nav-site-condense.tsx" } ], "cssVars": { "theme": { "color-ns-muted": "var(--ns-muted)", "color-ns-accent": "var(--ns-accent)", "color-surface": "var(--surface)" }, "light": { "ns-muted": "#4d4d4d", "ns-accent": "#006bff", "surface": "#fafafa" }, "dark": { "ns-muted": "#8f8f8f", "surface": "#171717" } }, "meta": { "collection": "core", "tags": [ "nav", "header", "navigation", "sheet", "dialog", "scroll", "mobile", "focus-trap" ], "instruction": "Build where links is NavLinkItem[] ({label, href}). STRUCTURE: a sticky (position:sticky, top:0, z-40)
containing a max-width row with a wordmark , a hidden-below-sm inline link row (role via a real