4b: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"] 4c: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"] 4d:T574f,"use client"; import { mergeProps } from "@ark-ui/react"; import { ark } from "@ark-ui/react/factory"; import { cva, type VariantProps } from "class-variance-authority"; import { PanelLeftIcon } from "lucide-react"; import { type ComponentProps, type CSSProperties, createContext, type ReactNode, use, useCallback, useEffect, useMemo, useState, } from "react"; import { Button } from "@/components/ui/button"; import { Input, type InputProps } from "@/components/ui/input"; import { Separator } from "@/components/ui/separator"; import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "@/components/ui/sheet"; import { Tooltip, TooltipContext, TooltipPopup, type TooltipPopupProps, } from "@/components/ui/tooltip"; import { useIsMobile } from "@/hooks/use-mobile"; import { cn } from "@/lib/utils"; const SIDEBAR_COOKIE_NAME = "sidebar_state"; const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; const SIDEBAR_WIDTH = "14rem"; const SIDEBAR_WIDTH_MOBILE = "16rem"; const SIDEBAR_WIDTH_ICON = "3rem"; const SIDEBAR_KEYBOARD_SHORTCUT = "b"; type SidebarContextValue = { state: "expanded" | "collapsed"; open: boolean; setOpen: (open: boolean | ((value: boolean) => boolean)) => void; openMobile: boolean; setOpenMobile: (open: boolean) => void; isMobile: boolean; toggleSidebar: () => void; }; const SidebarContext = createContext(null); export const useSidebar = () => { const context = use(SidebarContext); if (!context) { throw new Error("useSidebar must be used within a SidebarProvider."); } return context; }; export type SidebarProviderProps = ComponentProps & { defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; }; export const SidebarProvider = ({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: SidebarProviderProps) => { const isMobile = useIsMobile(); const [openMobile, setOpenMobile] = useState(false); const [_open, _setOpen] = useState(defaultOpen); const open = openProp ?? _open; const setOpen = useCallback( (value: boolean | ((value: boolean) => boolean)) => { const openState = typeof value === "function" ? value(open) : value; if (setOpenProp) { setOpenProp(openState); } else { _setOpen(openState); } // biome-ignore lint/suspicious/noDocumentCookie: persist sidebar state for layout document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`; }, [setOpenProp, open], ); const toggleSidebar = useCallback(() => { return isMobile ? setOpenMobile((v) => !v) : setOpen((v) => !v); }, [isMobile, setOpen]); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if ( event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey) ) { event.preventDefault(); toggleSidebar(); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [toggleSidebar]); const state = open ? "expanded" : "collapsed"; const contextValue = useMemo( () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, }), [state, open, setOpen, isMobile, openMobile, toggleSidebar], ); return ( {children} ); }; export type SidebarProps = ComponentProps & { side?: "left" | "right"; variant?: "sidebar" | "floating" | "inset"; collapsible?: "offcanvas" | "icon" | "none"; }; export const Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }: SidebarProps) => { const { isMobile, state, openMobile, setOpenMobile } = useSidebar(); if (collapsible === "none") { return ( {children} ); } if (isMobile) { return ( setOpenMobile(details.open)} > Sidebar Displays the mobile sidebar. {children} ); } return ( ); }; export type SidebarTriggerProps = ComponentProps; export const SidebarTrigger = ({ className, onClick, ...props }: SidebarTriggerProps) => { const { toggleSidebar } = useSidebar(); return ( ); }; export type SidebarRailProps = ComponentProps; export const SidebarRail = ({ className, ...props }: SidebarRailProps) => { const { toggleSidebar } = useSidebar(); return ( ); }; export type SidebarInsetProps = ComponentProps; export const SidebarInset = ({ className, ...props }: SidebarInsetProps) => ( ); export type SidebarInputProps = InputProps; export const SidebarInput = ({ className, ...props }: SidebarInputProps) => ( ); export type SidebarHeaderProps = ComponentProps; export const SidebarHeader = ({ className, ...props }: SidebarHeaderProps) => ( ); export type SidebarFooterProps = ComponentProps; export const SidebarFooter = ({ className, ...props }: SidebarFooterProps) => ( ); export type SidebarSeparatorProps = ComponentProps; export const SidebarSeparator = ({ className, ...props }: SidebarSeparatorProps) => ( ); export type SidebarContentProps = ComponentProps; export const SidebarContent = ({ className, ...props }: SidebarContentProps) => ( ); export type SidebarGroupProps = ComponentProps; export const SidebarGroup = ({ className, ...props }: SidebarGroupProps) => ( ); export type SidebarGroupLabelProps = ComponentProps; export const SidebarGroupLabel = ({ className, ...props }: SidebarGroupLabelProps) => ( svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className, )} {...props} /> ); export type SidebarGroupActionProps = ComponentProps; export const SidebarGroupAction = ({ className, ...props }: SidebarGroupActionProps) => ( svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", className, )} {...props} /> ); export type SidebarGroupContentProps = ComponentProps; export const SidebarGroupContent = ({ className, ...props }: SidebarGroupContentProps) => ( ); export type SidebarMenuProps = ComponentProps; export const SidebarMenu = ({ className, ...props }: SidebarMenuProps) => ( ); export type SidebarMenuItemProps = ComponentProps; export const SidebarMenuItem = ({ className, ...props }: SidebarMenuItemProps) => ( ); const sidebarMenuButtonVariants = cva( "peer/menu-button flex w-full cursor-pointer items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", { variants: { variant: { default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]", }, size: { default: "h-8 text-sm", sm: "h-7 text-xs", lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!", }, }, defaultVariants: { variant: "default", size: "default", }, }, ); export type SidebarMenuButtonProps = ComponentProps & { isActive?: boolean; tooltip?: string | TooltipPopupProps; } & VariantProps; export const SidebarMenuButton = ({ isActive = false, variant = "default", size = "default", tooltip, className, ...props }: SidebarMenuButtonProps) => { const { isMobile, state } = useSidebar(); const buttonClass = cn( sidebarMenuButtonVariants({ variant, size }), className, ); const plainButton = ( ); if (!tooltip) { return plainButton; } let popupProps: TooltipPopupProps = {}; let label: ReactNode = null; if (typeof tooltip === "string") { label = tooltip; } else { const { children: tipChildren, ...rest } = tooltip; label = tipChildren; popupProps = rest; } return ( {(tt) => ( <> {label} )} ); }; export type SidebarMenuActionProps = ComponentProps & { showOnHover?: boolean; }; export const SidebarMenuAction = ({ className, showOnHover = false, ...props }: SidebarMenuActionProps) => ( svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0", className, )} {...props} /> ); export type SidebarMenuBadgeProps = ComponentProps; export const SidebarMenuBadge = ({ className, ...props }: SidebarMenuBadgeProps) => ( ); export type SidebarMenuSkeletonProps = ComponentProps & { showIcon?: boolean; }; export const SidebarMenuSkeleton = ({ className, showIcon = false, ...props }: SidebarMenuSkeletonProps) => { const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []); return ( {showIcon ? ( ) : null} ); }; export type SidebarMenuSubProps = ComponentProps; export const SidebarMenuSub = ({ className, ...props }: SidebarMenuSubProps) => ( ); export type SidebarMenuSubItemProps = ComponentProps; export const SidebarMenuSubItem = ({ className, ...props }: SidebarMenuSubItemProps) => ( ); export type SidebarMenuSubButtonProps = ComponentProps & { size?: "sm" | "md"; isActive?: boolean; }; export const SidebarMenuSubButton = ({ size = "md", isActive = false, className, ...props }: SidebarMenuSubButtonProps) => ( span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className, )} {...props} /> ); 4a:["$","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","@ark-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40ark-ui%2Freact","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":"@ark-ui/react"}]]}]}],["$","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L4b",null,{"namespace":"@ark-cn","registryDependencies":["button","input","separator","sheet","tooltip"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"src/components/ui/sidebar.tsx","content":"$4d","type":"registry:ui","target":"src/components/ui/sidebar.tsx"},{"path":"src/hooks/use-mobile.ts","content":"import { useEffect, useState } from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport const useIsMobile = () => {\n const [isMobile, setIsMobile] = useState(undefined);\n\n useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => {\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n };\n mql.addEventListener(\"change\", onChange);\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return Boolean(isMobile);\n};\n","type":"registry:hook","target":"src/hooks/use-mobile.ts"}],"className":"h-[70svh] min-h-80"}]]}]