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:T3c75,"use client"; import { type Dialog, mergeProps, useRender } from "@base-ui/react"; import { cva, type VariantProps } from "class-variance-authority"; import { PanelLeftIcon } from "lucide-react"; import React, { createContext, type ReactNode, useMemo, useState } from "react"; import { type Layout, type PanelImperativeHandle, type PanelProps, usePanelRef, } from "react-resizable-panels"; import { useIsMobile } from "@/hooks/use-mobile"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/ui/button"; import { ResizableGroup, ResizablePanel, ResizableSeparator, } from "@/registry/ui/resizable"; import { Separator } from "@/registry/ui/separator"; import { createSheetHandle, Sheet, SheetContent, SheetTrigger, } from "@/registry/ui/sheet"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/ui/tooltip"; const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; const DEFAULT_WIDTH = "25%"; const MAX_WIDTH = "25%"; const MIN_WIDTH = "15%"; const SIDEBAR_KEYBOARD_SHORTCUT = "b"; const ICON_MODE_WIDTH_PX = 48; // If the percentage in the cookie is below this, we assume it's collapsed const COLLAPSED_PERCENTAGE_THRESHOLD = 10; const SIDEBAR_ID = "sidebar"; const MAIN_CONTENT_ID = "main-content"; type Collapsible = "icon" | "sidebar"; interface SidebarContextType { collapsibleType?: Collapsible; toggleSidebar: () => void; sidebarRef: React.RefObject; isMobile: boolean; collapsedSize: number | undefined; mobileHandle: Dialog.Handle; isCollapsed: boolean; setIsCollapsed: (open: boolean) => void; } const SidebarContext = createContext(undefined); function useSidebar() { const context = React.useContext(SidebarContext); if (!context) { throw new Error("useSidebar must be used within a SidebarProvider."); } return context; } const SidebarProvider = ({ collapsibleType = "icon", children, defaultLayout, groupId, }: { children: ReactNode; collapsibleType?: Collapsible; defaultLayout: Layout | undefined; groupId: string; }) => { const isMobile = useIsMobile(); const sidebarRef = usePanelRef(); const mobileHandle = useMemo(() => createSheetHandle(), []); const collapsedSize = collapsibleType === "icon" ? ICON_MODE_WIDTH_PX : 0; // For icon const [isCollapsed, setIsCollapsed] = useState(() => { // If no cookie, default to expanded if (!defaultLayout || !defaultLayout.sidebar) return false; // The cookie value is a percentage (0-100) const savedPercentage = defaultLayout.sidebar; // Compare against our safety threshold return savedPercentage < COLLAPSED_PERCENTAGE_THRESHOLD; }); const toggleSidebar = React.useCallback(() => { const panel = sidebarRef.current; if (!panel) return; if (panel.isCollapsed()) { panel.expand(); } else { panel.collapse(); } }, [sidebarRef]); React.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]); return (

{ document.cookie = `${groupId}=${encodeURIComponent(JSON.stringify(layout))}; Path=/; Max-Age=${SIDEBAR_COOKIE_MAX_AGE}; SameSite=Lax`; }} orientation="horizontal" resizeTargetMinimumSize={{ coarse: 37, fine: 27 }} > {children}

); }; const Sidebar = ({ className, children }: React.ComponentProps<"div">) => { const { collapsedSize, sidebarRef, mobileHandle, isMobile, isCollapsed, setIsCollapsed, collapsibleType, } = useSidebar(); if (isMobile) return (

{children}

); return ( <> { // Only sync if Panel confirms collapse state changed const panelCollapsed = sidebarRef.current?.isCollapsed() ?? false; if (panelCollapsed !== isCollapsed) { setIsCollapsed(panelCollapsed); } }} panelRef={sidebarRef} >

{children}

); }; function MainContent({ className, ...props }: PanelProps) { return ( ); } const sidebarMenuButtonVariants = cva( [ "relative peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md px-4 py-3 text-left transition-[width,height,padding,colors]", "[&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0", "focus-visible:outline focus-visible:outline-ring focus-visible:ring-4 focus-visible:ring-ring/10", "data-[popup-open]:bg-accent", "data-[active]:bg-sidebar-accent data-[active]:text-sidebar-accent-foreground", "group-data-[state=collapsed]:size-8 group-data-[state=collapsed]:p-2", ], { defaultVariants: { size: "default", variant: "default", }, variants: { size: { default: "h-8 text-sm", lg: "h-12 text-sm group-data-[state=collapsed]:p-0!", sm: "h-7 text-xs", }, variant: { default: "hover:text-sidebar-accent-foreground hover:bg-sidebar-accent", outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", }, }, }, ); interface SidebarMenuButtonProps extends Omit, "ref">, VariantProps { isActive?: boolean; tooltip?: string | React.ComponentProps; ref?: React.Ref; } function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, ref, ...props }: SidebarMenuButtonProps) { const { isMobile, isCollapsed } = useSidebar(); const element = useRender({ defaultTagName: "button", props: mergeProps<"button">( { className: cn(sidebarMenuButtonVariants({ size, variant }), className), }, props, ), ref, render, state: { active: isActive, sidebar: "menu-button", size: size, }, }); const shouldShowTooltip = tooltip && isCollapsed && !isMobile; if (!shouldShowTooltip) { return element; } const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip; return ( ); } function SidebarTrigger({ className, ...props }: React.ComponentProps) { const { toggleSidebar, mobileHandle } = useSidebar(); return ( Toggle Sidebar } /> ); } function SidebarContent({ className, ...props }: React.ComponentProps<"div">) { return (

); } function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) { return (

); } function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) { return (
); } function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) { return (
); } function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) { return (
); } function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) { return (
); } export function SidebarGroupLabel({ render, className, ...props }: useRender.ComponentProps<"div">) { return useRender({ defaultTagName: "div", props: mergeProps<"div">( { className: cn( "text-sidebar-foreground/70 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear", "focus-visible:outline focus-visible:outline-ring focus-visible:ring-4 focus-visible:ring-ring/10", "[&>svg]:size-4 [&>svg]:shrink-0", "group-data-[state=collapsed]:-mt-8 group-data-[state=collapsed]:opacity-0", className, ), }, props, ), render, state: { slot: "sidebar-group-label", }, }); } function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) { return (
); } function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) { return (
); } interface SidebarMenuSubButtonProps extends useRender.ComponentProps<"a"> { size?: "sm" | "md"; isActive?: boolean; } function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }: SidebarMenuSubButtonProps) { return useRender({ defaultTagName: "a", props: mergeProps<"a">( { className: cn( "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2", "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", "focus-visible:outline focus-visible:outline-ring focus-visible:ring-4 focus-visible:ring-ring/10", "active:bg-sidebar-accent active:text-sidebar-accent-foreground", "[&>svg]:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0 [&>span:last-child]:truncate", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "data-[active]:bg-sidebar-accent data-[active]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[state=collapsed]:hidden", className, ), }, props, ), render, state: { active: isActive, size: size, slot: "sidebar-menu-sub-button", }, }); } function SidebarSeparator({ className, ...props }: React.ComponentProps) { return ( ); } interface SidebarMenuActionProps extends useRender.ComponentProps<"button"> { showOnHover?: boolean; } function SidebarMenuAction({ render, className, showOnHover = false, ...props }: SidebarMenuActionProps) { return useRender({ defaultTagName: "button", props: mergeProps<"button">( { className: cn( "peer flex items-center justify-center absolute top-1.5 right-1 aspect-square w-5 rounded-md transition-transform text-sidebar-foreground hover:bg-accent", "[&>svg]:size-4 [&>svg]:shrink-0", "peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 md:after:hidden ", "focus-visible:outline focus-visible:outline-ring focus-visible:ring-4 focus-visible:ring-ring/10", "data-[popup-open]:bg-accent", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[popup-open]:opacity-100 md:opacity-0", className, ), }, props, ), render, state: { sidebar: "menu-action", slot: "sidebar-menu-action", }, }); } export { MainContent, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarSeparator, SidebarTrigger, useSidebar, }; 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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-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":"@base-ui/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"}]]}]}],["$","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","react-resizable-panels",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-resizable-panels","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":"react-resizable-panels"}]]}]}]]}],["$","$L50",null,{"namespace":"@lumiui","registryDependencies":["@lumi-ui/button","@lumi-ui/resizable","@lumi-ui/separator","@lumi-ui/sheet","@lumi-ui/tooltip","@lumi-ui/input","@lumi-ui/use-mobile"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/sidebar.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]