50: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"] 51: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"] 52:T2d69,/* eslint-disable react-refresh/only-export-components */ import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { PanelLeft } from 'lucide-react' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Sheet, SheetContent } from '@/components/ui/sheet' import { Tooltip, TooltipContent, TooltipTrigger, } from '@/components/ui/tooltip' const SIDEBAR_COOKIE_NAME = 'sidebar:state' const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 // 7 days const SIDEBAR_WIDTH = '16rem' const SIDEBAR_WIDTH_COLLAPSED = '4rem' const SIDEBAR_WIDTH_MOBILE = '18rem' const SIDEBAR_KEYBOARD_SHORTCUT = 'b' // Context interface SidebarContextValue { state: 'expanded' | 'collapsed' open: boolean setOpen: (open: boolean) => void openMobile: boolean setOpenMobile: (open: boolean) => void isMobile: boolean toggleSidebar: () => void } const SidebarContext = React.createContext(null) function useSidebar() { const context = React.useContext(SidebarContext) if (!context) { throw new Error('useSidebar must be used within a ') } return context } // Provider interface SidebarProviderProps extends React.HTMLAttributes { defaultOpen?: boolean open?: boolean onOpenChange?: (open: boolean) => void } const SidebarProvider = React.forwardRef( ( { defaultOpen = true, open: controlledOpen, onOpenChange, className, style, children, ...props }, ref ) => { const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen) const [openMobile, setOpenMobile] = React.useState(false) const [isMobile, setIsMobile] = React.useState(false) const isControlled = controlledOpen !== undefined const open = isControlled ? controlledOpen : uncontrolledOpen const setOpen = React.useCallback( (value: boolean) => { if (!isControlled) { setUncontrolledOpen(value) } onOpenChange?.(value) // Save to cookie try { document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` } catch { // Silent fail — cookie storage unavailable (private browsing, etc.) } }, [isControlled, onOpenChange] ) const toggleSidebar = React.useCallback(() => { if (isMobile) { setOpenMobile((prev) => !prev) } else { setOpen(!open) } }, [isMobile, open, setOpen]) // Check if mobile React.useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener('resize', checkMobile) return () => window.removeEventListener('resize', checkMobile) }, []) // Keyboard shortcut React.useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ( e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey ) { e.preventDefault() toggleSidebar() } } window.addEventListener('keydown', handleKeyDown) return () => window.removeEventListener('keydown', handleKeyDown) }, [toggleSidebar]) const state = open ? 'expanded' : 'collapsed' const contextValue = React.useMemo( () => ({ state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar, }), [state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar] ) return (

} className={cn( 'group/sidebar-wrapper flex min-h-screen w-full', className )} {...props} > {children}

) } ) SidebarProvider.displayName = 'SidebarProvider' // Main Sidebar const sidebarVariants = cva( 'relative flex h-full flex-col border-r-3 border-foreground bg-background transition duration-300 ease-out', { variants: { collapsible: { none: 'w-[var(--sidebar-width)]', icon: 'w-[var(--sidebar-width)] group-data-[state=collapsed]/sidebar:w-[var(--sidebar-width-collapsed)]', hidden: 'w-[var(--sidebar-width)] group-data-[state=collapsed]/sidebar:w-0 group-data-[state=collapsed]/sidebar:border-0 group-data-[state=collapsed]/sidebar:overflow-hidden', }, side: { left: '', right: 'border-r-0 border-l-3', }, }, defaultVariants: { collapsible: 'icon', side: 'left', }, } ) interface SidebarProps extends React.HTMLAttributes, VariantProps {} const Sidebar = React.forwardRef( ({ side = 'left', collapsible = 'icon', className, children, ...props }, ref) => { const { isMobile, state, openMobile, setOpenMobile } = useSidebar() if (isMobile) { return ( } > {/* Same prop contract as the desktop branch below. This branch used to drop ref, className AND ...props entirely, so the same component honoured different props depending on viewport width — and any ref silently became null on small screens. */}

{children}

) } return (

{children}

) } ) Sidebar.displayName = 'Sidebar' // Sidebar Toggle const SidebarToggle = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, ...props }, ref) => { const { toggleSidebar, state } = useSidebar() return ( ) }) SidebarToggle.displayName = 'SidebarToggle' // Sidebar Header const SidebarHeader = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) SidebarHeader.displayName = 'SidebarHeader' // Sidebar Content const SidebarContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) SidebarContent.displayName = 'SidebarContent' // Sidebar Footer const SidebarFooter = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) SidebarFooter.displayName = 'SidebarFooter' // Sidebar Group const SidebarGroup = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) SidebarGroup.displayName = 'SidebarGroup' // Sidebar Group Label const SidebarGroupLabel = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { state } = useSidebar() return (

) }) SidebarGroupLabel.displayName = 'SidebarGroupLabel' // Sidebar Item const sidebarItemVariants = cva( 'flex w-full items-center gap-3 px-3 py-2 text-sm transition duration-150', { variants: { variant: { default: 'hover:bg-muted', active: 'bg-accent shadow-[4px_4px_0px_hsl(var(--shadow-color))]', }, }, defaultVariants: { variant: 'default', }, } ) interface SidebarItemProps extends React.ButtonHTMLAttributes, VariantProps { icon?: React.ReactNode tooltip?: string } const SidebarItem = React.forwardRef( ({ variant, icon, tooltip, className, children, ...props }, ref) => { const { state } = useSidebar() const isCollapsed = state === 'collapsed' const button = ( ) if (isCollapsed && tooltip) { return ( {button} {tooltip} ) } return button } ) SidebarItem.displayName = 'SidebarItem' // Sidebar Separator const SidebarSeparator = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) SidebarSeparator.displayName = 'SidebarSeparator' // Sidebar Inset (main content wrapper) const SidebarInset = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) SidebarInset.displayName = 'SidebarInset' export { Sidebar, SidebarProvider, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarItem, SidebarSeparator, SidebarToggle, SidebarInset, useSidebar, sidebarVariants, sidebarItemVariants, } 4f:["$","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@boldkit","registryDependencies":["@boldkit/utils","@boldkit/button","@boldkit/sheet","@boldkit/tooltip"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/sidebar.tsx","content":"$52","type":"registry:ui","target":"components/ui/sidebar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]