4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T24f8,"use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { UI_I18N, type UILocale } from "@/lib/ui-i18n" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" // ── Types ────────────────────────────────────────────────────────────────── export type NavDotsContainerVariantProps = VariantProps< typeof navDotsContainerVariants > export type NavDotsDotVariantProps = VariantProps export type NavDotsPosition = "left" | "right" export type NavDotsOrientation = "vertical" | "horizontal" /** A section entry for dot navigation. */ export interface NavDotsSection { /** Element ID used for scroll targeting */ id: string /** Label shown in the tooltip */ label: string } /** * NavDots — dot-based section navigation with scroll tracking and tooltips. * * Automatically detects which section is in view via `IntersectionObserver` * and highlights the corresponding dot. Clicking a dot smooth-scrolls to * that section. Supports vertical (side rail) and horizontal (bottom bar) * orientations. * * Uses the shadcn `Tooltip` primitive for accessible, animated labels. */ export interface NavDotsProps extends NavDotsContainerVariantProps, React.HTMLAttributes { /** Array of sections to navigate between */ sections: NavDotsSection[] /** Initially active section index */ active?: number /** Enable smooth scroll when clicking a dot */ scrollOnClick?: boolean /** * Scroll container to observe. Defaults to `null` which means the * component will walk up the DOM to find the nearest scrollable ancestor. * Pass a ref or `"window"` to override. */ scrollContainer?: React.RefObject | "window" | null /** IntersectionObserver rootMargin (default: "0px") */ scrollMargin?: string /** Callback when the active section changes */ onActiveChange?: (index: number) => void locale?: UILocale } // ── Variants ─────────────────────────────────────────────────────────────── export const navDotsContainerVariants = cva( ["fixed z-50 flex gap-2 transition-opacity duration-200 ease-in-out"], { variants: { position: { left: [], right: [], }, orientation: { vertical: ["flex-col"], horizontal: ["flex-row"], }, visible: { true: ["opacity-100"], false: ["pointer-events-none opacity-0"], }, }, compoundVariants: [ // Vertical: pin to left/right edge, centered vertically { orientation: "vertical", position: "left", className: "top-1/2 left-4 -translate-y-1/2", }, { orientation: "vertical", position: "right", className: "top-1/2 right-4 -translate-y-1/2", }, // Horizontal: pin to top, centered horizontally { orientation: "horizontal", position: "left", className: "top-4 left-1/2 -translate-x-1/2", }, { orientation: "horizontal", position: "right", className: "top-4 left-1/2 -translate-x-1/2", }, ], defaultVariants: { position: "right", orientation: "vertical", visible: true, }, } ) export const navDotsDotVariants = cva( [ "relative size-2 rounded-full", "transition-all duration-200 ease-in-out", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none", ], { variants: { active: { true: ["bg-foreground", "scale-125"], false: ["bg-border", "hover:bg-foreground", "hover:scale-125"], }, interactive: { true: ["cursor-pointer"], false: ["cursor-default"], }, }, defaultVariants: { active: false, interactive: true, }, } ) // ── Helpers ──────────────────────────────────────────────────────────────── /** Walk up the DOM tree to find the nearest scrollable ancestor. */ function findScrollParent(el: HTMLElement | null): HTMLElement | null { if (!el) return null let current = el.parentElement while (current) { const { overflow, overflowY } = getComputedStyle(current) if (/(auto|scroll)/.test(overflow + overflowY)) return current current = current.parentElement } return null } // ── Component ────────────────────────────────────────────────────────────── export const NavDots = React.forwardRef( ( { sections, active = 0, scrollOnClick = true, scrollContainer = null, scrollMargin = "0px", onActiveChange, orientation, position, locale = "en-US", className, ...props }, ref ) => { const [currentActive, setCurrentActive] = React.useState(active) const internalRef = React.useRef(null) // Resolve combined ref React.useImperativeHandle(ref, () => internalRef.current!) // Tooltip placement depends on orientation/position const tooltipSide = React.useMemo(() => { if (orientation === "horizontal") return "bottom" as const return position === "left" ? ("right" as const) : ("left" as const) }, [orientation, position]) // ── Scroll-to on click ────────────────────────────────────────────── const scrollTo = React.useCallback( (id: string) => { if (!scrollOnClick) return const el = document.getElementById(id) if (el) el.scrollIntoView({ behavior: "smooth" }) }, [scrollOnClick] ) // ── IntersectionObserver for scroll tracking ──────────────────────── React.useEffect(() => { const elements = sections .map((s) => document.getElementById(s.id)) .filter(Boolean) as HTMLElement[] if (elements.length === 0) return // Determine the observation root let root: HTMLElement | null = null if (scrollContainer === "window") { root = null // null = viewport } else if (scrollContainer && "current" in scrollContainer) { root = scrollContainer.current } else { root = findScrollParent(internalRef.current) } const ratios = new Map() const observer = new IntersectionObserver( (entries) => { for (const entry of entries) { ratios.set(entry.target.id, entry.intersectionRatio) } // Pick the section with the highest intersection ratio let bestIndex = 0 let bestRatio = -1 for (let i = 0; i < sections.length; i++) { const ratio = ratios.get(sections[i].id) ?? 0 if (ratio > bestRatio) { bestRatio = ratio bestIndex = i } } setCurrentActive((prev) => { if (prev !== bestIndex) { onActiveChange?.(bestIndex) return bestIndex } return prev }) }, { root, rootMargin: scrollMargin, threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], } ) for (const el of elements) observer.observe(el) return () => observer.disconnect() }, [sections, scrollContainer, scrollMargin, onActiveChange]) return ( ) } ) NavDots.displayName = "NavDots" export default NavDots 4b:["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@lema-ds","registryDependencies":["tooltip","ui-i18n"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ds/nav-dots.tsx","content":"$4e","type":"registry:ui","target":"components/ui/ds-nav-dots.tsx"}],"className":"h-[70svh] min-h-80"}]]}]