Vite

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:T5b60,"use client" import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef, type ComponentPropsWithoutRef, type ForwardedRef, type ReactNode, } from "react" import NextImage from "next/image" import { Slot } from "@radix-ui/react-slot" import { useControllableState } from "@radix-ui/react-use-controllable-state" import { cn } from "@/lib/utils" /* ------------------------------------------------------------------------- * Context * ----------------------------------------------------------------------- */ interface StickySectionContextValue { activeIndex: number registerPanel: (index: number, el: HTMLElement | null) => void unregisterPanel: (index: number) => void scrollToPanel: (index: number) => void } const StickySectionContext = createContext( null ) function useStickySection() { const ctx = useContext(StickySectionContext) if (!ctx) { throw new Error( "StickySection components must be used within StickySection.Root" ) } return ctx } /* ------------------------------------------------------------------------- * Root * ----------------------------------------------------------------------- */ export interface StickySectionRootProps extends Omit, "defaultValue" | "onChange"> { /** Controlled active index */ value?: number /** Uncontrolled default active index */ defaultValue?: number /** Callback when active index changes */ onValueChange?: (value: number) => void /** Merge props onto child element instead of rendering a div */ asChild?: boolean } const Root = ({ value: valueProp, defaultValue = 0, onValueChange, asChild = false, children, ...props }: StickySectionRootProps) => { const [activeIndex, setActiveIndex] = useControllableState({ prop: valueProp, defaultProp: defaultValue, onChange: onValueChange, }) const panelRefs = useRef>(new Map()) const isClickScrolling = useRef(false) const ratioMap = useRef>(new Map()) const registerPanel = useCallback((index: number, el: HTMLElement | null) => { if (el) { panelRefs.current.set(index, el) } else { panelRefs.current.delete(index) } }, []) const unregisterPanel = useCallback((index: number) => { panelRefs.current.delete(index) }, []) const scrollToPanel = useCallback( (index: number) => { setActiveIndex(index) isClickScrolling.current = true const target = panelRefs.current.get(index) if (target) { target.scrollIntoView({ behavior: "smooth", block: "start" }) setTimeout(() => { isClickScrolling.current = false }, 800) } }, [setActiveIndex] ) useEffect(() => { const refs = Array.from(panelRefs.current.entries()) .sort(([a], [b]) => a - b) .map(([, el]) => el) .filter(Boolean) if (refs.length === 0) { return } const observer = new IntersectionObserver( (entries) => { if (isClickScrolling.current) { return } for (const entry of entries) { const index = Number((entry.target as HTMLElement).dataset.index) if (!Number.isNaN(index)) { ratioMap.current.set(index, entry.intersectionRatio) } } let bestIndex = 0 let bestRatio = -1 for (const [idx, ratio] of ratioMap.current) { if (ratio > bestRatio) { bestRatio = ratio bestIndex = idx } } if (bestRatio > 0) { setActiveIndex(bestIndex) } }, { threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], } ) for (const ref of refs) { observer.observe(ref) } return () => observer.disconnect() }, [setActiveIndex]) const contextValue: StickySectionContextValue = { activeIndex, registerPanel, unregisterPanel, scrollToPanel, } const Comp = asChild ? Slot : "div" return ( {children} ) } /* ------------------------------------------------------------------------- * List * ----------------------------------------------------------------------- */ export interface StickySectionListProps extends ComponentPropsWithoutRef<"ul"> { asChild?: boolean } const List = ({ asChild = false, children, ...props }: StickySectionListProps) => { const Comp = asChild ? Slot : "ul" return ( {children} ) } /* ------------------------------------------------------------------------- * Item * ----------------------------------------------------------------------- */ export interface StickySectionItemProps extends ComponentPropsWithoutRef<"li"> { /** Index of the panel this item corresponds to */ index: number asChild?: boolean } const Item = ({ index, asChild = false, children, ...props }: StickySectionItemProps) => { const { activeIndex } = useStickySection() const Comp = asChild ? Slot : "li" return ( {children} ) } /* ------------------------------------------------------------------------- * Trigger * ----------------------------------------------------------------------- */ export interface StickySectionTriggerProps extends ComponentPropsWithoutRef<"button"> { /** Index of the panel to scroll to when clicked */ index: number asChild?: boolean } const Trigger = ( { index, asChild = false, onClick, children, ...props }: StickySectionTriggerProps, ref: ForwardedRef ) => { const { activeIndex, scrollToPanel } = useStickySection() const handleClick = (e: React.MouseEvent) => { scrollToPanel(index) onClick?.(e) } const triggerProps = { "data-slot": "sticky-section-trigger", "data-state": activeIndex === index ? "active" : "inactive", "aria-current": activeIndex === index ? ("true" as const) : undefined, type: "button" as const, onClick: handleClick, } if (asChild) { return ( {children} ) } return ( ) } const TriggerWithRef = forwardRef(Trigger) /* ------------------------------------------------------------------------- * Content * ----------------------------------------------------------------------- */ export interface StickySectionContentProps extends ComponentPropsWithoutRef<"div"> { asChild?: boolean } const Content = ({ asChild = false, children, ...props }: StickySectionContentProps) => { const Comp = asChild ? Slot : "div" return ( {children} ) } /* ------------------------------------------------------------------------- * Panel * ----------------------------------------------------------------------- */ export interface StickySectionPanelProps extends ComponentPropsWithoutRef<"div"> { /** Index of this panel for intersection tracking */ index: number asChild?: boolean } const Panel = ( { index, asChild = false, children, ...props }: StickySectionPanelProps, forwardedRef: ForwardedRef ) => { const { registerPanel, unregisterPanel } = useStickySection() const setRef = useCallback( (el: HTMLDivElement | null) => { registerPanel(index, el) if (typeof forwardedRef === "function") { forwardedRef(el) } else if (forwardedRef) { forwardedRef.current = el } }, [index, registerPanel, forwardedRef] ) useEffect(() => { return () => unregisterPanel(index) }, [index, unregisterPanel]) const Comp = asChild ? Slot : "div" return ( {children} ) } const PanelWithRef = forwardRef(Panel) /* ------------------------------------------------------------------------- * Wrapper * ----------------------------------------------------------------------- */ export interface StickySectionWrapperProps extends ComponentPropsWithoutRef<"div"> {} const Wrapper = ({ className, children, ...props }: StickySectionWrapperProps) => (

{children}

) /* ------------------------------------------------------------------------- * Namespace export * ----------------------------------------------------------------------- */ export const StickySection = { Root, List, Item, Trigger: TriggerWithRef, Content, Panel: PanelWithRef, Wrapper, } /* ------------------------------------------------------------------------- * OSSSection - Styled composition example * ----------------------------------------------------------------------- */ export interface OSSProject { id: string name: string tagline: string description: string stars: string contributors: string exploreUrl: string image: string icon: ReactNode } export interface OSSSectionProps { /** Project items to display. Defaults to Vite, Vitest, Rolldown, Oxc. */ projects?: OSSProject[] } function ViteIcon({ className }: { className?: string }) { const baseId = useId().replaceAll(":", "") const gradientAId = `${baseId}-vite-a` const gradientBId = `${baseId}-vite-b` return ( ) } function VitestIcon({ className }: { className?: string }) { const baseId = useId().replaceAll(":", "") const gradientAId = `${baseId}-vitest-a` return ( ) } function RolldownIcon({ className }: { className?: string }) { return ( ) } function OxcIcon({ className }: { className?: string }) { return ( ) } export const defaultOSSSectionProjects: OSSProject[] = [ { id: "vite", name: "Vite", tagline: "The build tool for the web", description: "Vite is the default choice for single-page web applications and the foundation for fullstack frameworks like TanStack Start, Nuxt, SvelteKit and more.", stars: "78.3k", contributors: "1,235", exploreUrl: "https://vite.dev", image: "/images/vite-terminal.jpg", icon: , }, { id: "vitest", name: "Vitest", tagline: "The next-generation test runner", description: "Vitest is a feature-rich test runner that understands your Vite config, is Jest-compatible, and works out-of-the-box with TypeScript & ESM.", stars: "16.0k", contributors: "713", exploreUrl: "https://vitest.dev", image: "/images/vitest-terminal.jpg", icon: , }, { id: "rolldown", name: "Rolldown", tagline: "The blazing fast JavaScript bundler", description: "Rolldown is a Rust-based bundler with Rollup-compatible API, and esbuild-equivalent performance & feature set. It also powers Vite version 8 and above.", stars: "12.9k", contributors: "152", exploreUrl: "https://rolldown.rs", image: "/images/rolldown-terminal.jpg", icon: , }, { id: "oxc", name: "Oxc", tagline: "The fastest JavaScript language toolchain", description: "Oxc is the foundation of our unified toolchain. It includes linter (oxlint), formatter (oxfmt), parser, resolver, transformer, and minifier, all with state-of-the-art performance.", stars: "19.1k", contributors: "314", exploreUrl: "https://oxc.rs", image: "/images/oxc-terminal.jpg", icon: , }, ] function GithubIcon({ className }: { className?: string }) { return ( ) } export interface OSSSectionContainerProps extends ComponentPropsWithoutRef<"section"> {} function OSSSectionContainer({ className, children, ...props }: OSSSectionContainerProps) { return (

{children}

) } export interface OSSSectionSidebarProps extends ComponentPropsWithoutRef<"div"> {} function OSSSectionSidebar({ className, children, ...props }: OSSSectionSidebarProps) { return ( ) } export interface OSSSectionSidebarListProps extends ComponentPropsWithoutRef<"ul"> {} function OSSSectionSidebarList({ className, children, ...props }: OSSSectionSidebarListProps) { return (

{children} ) } export interface OSSSectionSidebarItemProps extends ComponentPropsWithoutRef<"li"> {} function OSSSectionSidebarItem({ className, children, ...props }: OSSSectionSidebarItemProps) { return (

{children}

) } export interface OSSSectionPanelsProps extends ComponentPropsWithoutRef<"div"> {} function OSSSectionPanels({ className, children, ...props }: OSSSectionPanelsProps) { return (

{children}

) } export interface OSSSectionPanelGridProps extends ComponentPropsWithoutRef<"div"> { withBottomBorder?: boolean } function OSSSectionPanelGrid({ className, withBottomBorder = false, children, ...props }: OSSSectionPanelGridProps) { return (

{children}

) } export interface OSSSectionPanelContentProps extends ComponentPropsWithoutRef<"div"> {} function OSSSectionPanelContent({ className, children, ...props }: OSSSectionPanelContentProps) { return (

{children}

) } export interface OSSSectionPanelImageProps extends Omit, "alt" | "src"> { src: string alt: string } function OSSSectionPanelImage({ className, src, alt, ...props }: OSSSectionPanelImageProps) { return (

) } export function OSSSection({ projects = defaultOSSSectionProjects, }: OSSSectionProps) { return ( {projects.map((project, i) => ( {project.icon} {project.name} ))} {projects.map((project, i) => (

{project.name}

{project.tagline}

{project.description}

Explore {project.name}

{project.stars} stars

{project.contributors} contributors

))} ) } export const OSSSectionComponents = { Container: OSSSectionContainer, Sidebar: OSSSectionSidebar, SidebarList: OSSSectionSidebarList, SidebarItem: OSSSectionSidebarItem, Panels: OSSSectionPanels, PanelGrid: OSSSectionPanelGrid, PanelContent: OSSSectionPanelContent, PanelImage: OSSSectionPanelImage, } 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-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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-slot"}]]}]}],["$","li","@radix-ui/react-use-controllable-state",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-use-controllable-state","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-use-controllable-state"}]]}]}]]}],["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/feature-sticky-section.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]