2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T471b,"use client"; import * as React from "react"; import { IconLayoutSidebarRight, IconX } from "@tabler/icons-react"; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"; import { Button } from "@/components/ui/button"; import { Kbd, KbdGroup } from "@/components/ui/kbd"; import { Separator } from "@/components/ui/separator"; import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { useIsMobile } from "@/hooks/use-mobile"; import { cn } from "@/lib/utils"; import { useIsMac, useModShortcut, usePersistedState } from "../_shared/use-nav"; import { AppSidebar, AppSidebarInset, AppSidebarProvider, AppSidebarTrigger, type AppSidebarBrand, type AppSidebarCollapsible, type AppSidebarGroup, type AppSidebarProps, type AppSidebarSide, type AppSidebarUser, type AppSidebarVariant, } from "../app-sidebar/app-sidebar"; import { ResizablePane, ResizablePanels, useResizablePane, type ResizablePaneProps } from "../resizable-panels/resizable-panels"; export type AppLayoutBreadcrumb = { label: string; href?: string }; export type AppLayoutScroll = "page" | "content"; export type AppLayoutProps = { /* Sidebar */ groups: AppSidebarGroup[]; brand: AppSidebarBrand; user?: AppSidebarUser; /** Anything else `AppSidebar` takes (footerItems, userMenu, rail, onUserMenuSelect). */ sidebarProps?: Partial>; sidebarVariant?: AppSidebarVariant; /** `offcanvas` slides away, `icon` leaves a rail, `none` is fixed. In `resizable` mode the pane collapses instead. */ sidebarCollapsible?: AppSidebarCollapsible; sidebarSide?: AppSidebarSide; /** Sidebar open state (controlled, or uncontrolled with `defaultSidebarOpen`). */ sidebarOpen?: boolean; defaultSidebarOpen?: boolean; onSidebarOpenChange?: (open: boolean) => void; /** Cmd/Ctrl plus this key toggles the sidebar. `false` turns it off. */ sidebarShortcut?: string | false; /** Current nav item id. */ value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Client-side navigation for sidebar and breadcrumb links. */ navigate?: (href: string) => void; /* Navbar and slots */ breadcrumbs?: AppLayoutBreadcrumb[]; /** Right side of the navbar. */ navbarActions?: React.ReactNode; /** A bar under the navbar, sticky with it. */ toolbar?: React.ReactNode; footer?: React.ReactNode; children?: React.ReactNode; /* Aside */ aside?: React.ReactNode; asideTitle?: string; asideOpen?: boolean; defaultAsideOpen?: boolean; onAsideOpenChange?: (open: boolean) => void; /** Cmd/Ctrl plus this key toggles the aside. `false` turns it off. */ asideShortcut?: string | false; /** Pixel width of the aside when it is not resizable. */ asideWidth?: number; /* Behavior */ /** Sidebar and aside become drag-resizable panes (desktop). Sidebar variant is `sidebar` in this mode. */ resizable?: boolean; /** `page`: the page scrolls and the navbar sticks. `content`: the frame is fixed and the main area scrolls. */ contentScroll?: AppLayoutScroll; /** Persist sidebar, aside and pane sizes under this key. */ persistKey?: string; /** Fill a positioned ancestor instead of the viewport. For framed demos. */ contained?: boolean; className?: string; }; type PaneApi = ReturnType; /** Reports a pane's collapsed state outward and exposes its controls, so provider state and pane stay one thing. */ function PaneBridge({ apiRef, onCollapsed, }: { apiRef: React.MutableRefObject; onCollapsed: (collapsed: boolean) => void; }) { const pane = useResizablePane(); React.useEffect(() => { apiRef.current = pane; }); React.useEffect(() => { onCollapsed(pane.collapsed); }, [pane.collapsed, onCollapsed]); return null; } function Mod() { const mac = useIsMac(); return <>{mac ? "⌘" : "Ctrl"}; } function Crumbs({ items, navigate, }: { items: AppLayoutBreadcrumb[]; navigate?: (href: string) => void; }) { return ( {items.map((item, i) => { const last = i === items.length - 1; return ( {last || !item.href ? ( {item.label} ) : ( { if (!navigate) return; event.preventDefault(); navigate(item.href as string); }} /> } > {item.label} )} {last ? null : } ); })} ); } function AsideToggle({ open, onToggle, shortcut, }: { open: boolean; onToggle: () => void; shortcut: string | false; }) { return ( } /> Details {shortcut ? ( {shortcut.toUpperCase()} ) : null} ); } function AsidePanel({ title, onClose, children }: { title: string; onClose?: () => void; children: React.ReactNode }) { return (

{title}

{onClose ? ( ) : null}

{children}

); } /** * App scaffold on the Kobra sidebar: sidebar, sticky navbar with breadcrumbs, optional toolbar, main, footer * and an aside. Sidebar and aside can be resized by dragging (Kobra resizable), the aside is a sheet on small * screens, and open state can be controlled or persisted. */ export function AppLayout({ groups, brand, user, sidebarProps, sidebarVariant = "sidebar", sidebarCollapsible = "offcanvas", sidebarSide = "start", sidebarOpen, defaultSidebarOpen = true, onSidebarOpenChange, sidebarShortcut = "b", value, defaultValue, onValueChange, navigate, breadcrumbs, navbarActions, toolbar, footer, children, aside, asideTitle = "Details", asideOpen, defaultAsideOpen = true, onAsideOpenChange, asideShortcut = "i", asideWidth = 320, resizable = false, contentScroll = "page", persistKey, contained = false, className, }: AppLayoutProps) { const isMobile = useIsMobile(); const root = React.useRef(null); const hasAside = aside !== undefined && aside !== null; const panes = resizable && !isMobile; /* Aside state: controlled, persisted, or plain. Mobile has its own sheet state. */ const [storedAside, setStoredAside, asideReady] = usePersistedState( persistKey && asideOpen === undefined ? `${persistKey}:aside` : undefined, defaultAsideOpen, ); const asideControlled = asideOpen !== undefined; const asideIsOpen = asideControlled ? asideOpen : storedAside; const setAside = React.useCallback( (next: boolean) => { if (!asideControlled) setStoredAside(next); onAsideOpenChange?.(next); }, [asideControlled, setStoredAside, onAsideOpenChange], ); const [sheetOpen, setSheetOpen] = React.useState(false); const toggleAside = React.useCallback(() => { if (isMobile) setSheetOpen((o) => !o); else setAside(!asideIsOpen); }, [isMobile, asideIsOpen, setAside]); useModShortcut(hasAside ? asideShortcut : false, toggleAside, { scope: contained ? "within" : "window", scopeRef: root, }); /* Pane mode: provider state follows the sidebar pane, aside state follows the aside pane. */ const sidebarPane = React.useRef(null); const asidePane = React.useRef(null); const [sidebarCollapsed, setSidebarCollapsed] = React.useState(!defaultSidebarOpen); const sidebarOpenState = panes ? !sidebarCollapsed : sidebarOpen; const onAsidePaneCollapsed = React.useCallback( (collapsed: boolean) => { if (asideIsOpen === collapsed) setAside(!collapsed); }, [asideIsOpen, setAside], ); React.useEffect(() => { if (!panes) return; const pane = asidePane.current; if (!pane) return; if (asideIsOpen && pane.collapsed) pane.expand(); if (!asideIsOpen && !pane.collapsed) pane.collapse(); }, [panes, asideIsOpen]); const scrollFrame = contentScroll === "content" || panes; const pageInRoot = contentScroll === "page" && contained && !panes; const header = (

{breadcrumbs?.length ? : null}

{navbarActions} {hasAside ? : null}

{toolbar ? (

{toolbar}

) : null}

); const main = ( <>

{children}

{footer ? ( ) : null} ); const column = (

{header} {pageInRoot ? ( <>

{children}

{footer ? ( ) : null} ) : ( main )}

); const sheet = hasAside && isMobile ? ( {asideTitle} Details panel setSheetOpen(false)}> {aside} ) : null; const sidebarEl = (extra?: string) => ( navigate(href) : undefined} side={sidebarSide} variant={panes ? "sidebar" : sidebarVariant} collapsible={panes ? "none" : sidebarCollapsible} className={extra} {...sidebarProps} /> ); /* ---- Resizable mode ---- */ if (panes) { return (

(open ? sidebarPane.current?.expand() : sidebarPane.current?.collapse())} shortcut={sidebarShortcut} shortcutScope={contained ? "within" : "window"} > {(() => { const items: React.ReactElement[] = []; const sidebarPaneEl = ( ); const mainPane = ( {column} ); const asidePaneEl = hasAside ? (

setAside(false)}> {aside}

) : null; if (sidebarSide === "end") { items.push(mainPane, sidebarPaneEl); if (asidePaneEl) items.unshift(asidePaneEl); } else { items.push(sidebarPaneEl, mainPane); if (asidePaneEl) items.push(asidePaneEl); } return items; })()}

); } /* ---- Standard mode ---- */ return (

{sidebarEl()}

{column} {hasAside && !isMobile ? ( ) : null}

{sheet}

); } 31:T4d7c,"use client"; import * as React from "react"; import { IconBell, IconChevronRight, IconSelector, IconCreditCard, IconLogout, IconUser, } from "@tabler/icons-react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Kbd, KbdGroup } from "@/components/ui/kbd"; import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar, } from "@/components/ui/sidebar"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useControllable, useIsMac, useModShortcut, usePersistedState } from "../_shared/use-nav"; type SidebarIcon = React.ComponentType<{ className?: string; stroke?: number }>; export type AppSidebarItem = { id: string; label: string; href: string; icon?: SidebarIcon; /** Trailing label: a count, or a word like "New". */ badge?: string; /** Nested pages. */ children?: AppSidebarItem[]; disabled?: boolean; }; export type AppSidebarGroup = { id: string; label?: string; items: AppSidebarItem[]; /** The group label becomes a disclosure. */ collapsible?: boolean; defaultOpen?: boolean; }; export type AppSidebarBrand = { name: string; subtitle?: string; mark: React.ReactNode; href?: string }; export type AppSidebarUser = { name: string; email: string; image?: string }; export type AppSidebarUserMenuItem = { id: string; label: string; icon?: SidebarIcon; href?: string; destructive?: boolean; /** Draw a divider above this entry. */ separatorBefore?: boolean; }; export type AppSidebarVariant = "sidebar" | "floating" | "inset"; export type AppSidebarCollapsible = "offcanvas" | "icon" | "none"; export type AppSidebarSide = "start" | "end"; type ProviderCtx = { contained: boolean; shortcut: string | false }; const ProviderContext = React.createContext({ contained: false, shortcut: "b" }); /** Holds the one thing the Kobra provider cannot: reads the shortcut from inside it. */ function ShortcutBinder({ shortcut, scope, scopeRef, }: { shortcut: string | false; scope: "window" | "within"; scopeRef: React.RefObject; }) { const { toggleSidebar } = useSidebar(); // Kobra binds Cmd/Ctrl+B globally. Claim it here so the shortcut key, scope and on/off state are ours. useModShortcut(shortcut, toggleSidebar, { scope, scopeRef, swallow: ["b"] }); return null; } export type AppSidebarProviderProps = { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** Persist the open state to localStorage under this key (uncontrolled use). */ persistKey?: string; /** Cmd/Ctrl plus this key toggles the sidebar. `false` turns it off. */ shortcut?: string | false; /** `window`: works anywhere on the page. `within`: only while focus or the pointer is inside. */ shortcutScope?: "window" | "within"; /** Fill a positioned ancestor instead of the viewport. For framed demos. */ contained?: boolean; /** Force transitions off, on top of prefers-reduced-motion. */ reducedMotion?: boolean; className?: string; children: React.ReactNode; }; /** * The Kobra sidebar provider plus persisted state, a configurable shortcut and a contained mode. State is * held back from animating until a persisted value has been restored. */ export function AppSidebarProvider({ open, defaultOpen = true, onOpenChange, persistKey, shortcut = "b", shortcutScope = "window", contained = false, reducedMotion = false, className, children, }: AppSidebarProviderProps) { const [stored, setStored, ready] = usePersistedState(persistKey, defaultOpen); const controlled = open !== undefined; const current = controlled ? open : stored; const set = React.useCallback( (next: boolean) => { if (!controlled) setStored(next); onOpenChange?.(next); }, [controlled, setStored, onOpenChange], ); const wrapper = React.useRef(null); const [mounted, setMounted] = React.useState(false); React.useEffect(() => { // Restoring a saved state must not play as an animation: hold transitions one more frame. const id = requestAnimationFrame(() => setMounted(true)); return () => cancelAnimationFrame(id); }, []); return ( {children} ); } const press = "transition-[width,height,padding,box-shadow,scale] duration-150 ease-out active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100"; function linkProps( item: AppSidebarItem, onSelect: (item: AppSidebarItem, event: React.MouseEvent) => void, ) { return { href: item.disabled ? undefined : item.href, "aria-disabled": item.disabled || undefined, onClick: (event: React.MouseEvent) => onSelect(item, event), }; } function Badge({ children }: { children: string }) { const numeric = /^\d+$/.test(children); return ( {children} ); } type NavCtx = { value: string; select: (item: AppSidebarItem, event: React.MouseEvent) => void; }; function ItemView({ item, nav }: { item: AppSidebarItem; nav: NavCtx }) { const { state, isMobile } = useSidebar(); const Icon = item.icon; const children = item.children; const childActive = children?.some((c) => c.id === nav.value) ?? false; const [open, setOpen] = React.useState(childActive); if (!children) { return ( } > {Icon ? : null} {item.label} {item.badge ? {item.badge} : null} ); } // Icon rail: children cannot unfold in place, so the parent opens them as a menu beside it. if (state === "collapsed" && !isMobile) { return ( }> {Icon ? : null} {item.label} {item.label} {children.map((child) => ( } > {child.label} ))} ); } return ( }> } > {Icon ? : null} {item.label} {children.map((child) => ( } > {child.label} ))} ); } function GroupView({ group, nav }: { group: AppSidebarGroup; nav: NavCtx }) { const { state, isMobile } = useSidebar(); const railed = state === "collapsed" && !isMobile; const [open, setOpen] = React.useState(group.defaultOpen ?? true); const items = ( {group.items.map((item) => ( ))} ); if (!group.collapsible) { return ( {group.label ? {group.label} : null} {items} ); } // On the icon rail the label is hidden, so a closed group would hide its icons too: keep it open there. return ( } className="group/label w-full cursor-pointer justify-between pe-1.5 group-data-[collapsible=icon]:invisible transition-colors duration-150 ease-out hover:text-sidebar-foreground motion-reduce:transition-none" > {group.label} {items} ); } const DEFAULT_USER_MENU: AppSidebarUserMenuItem[] = [ { id: "account", label: "Account", icon: IconUser }, { id: "billing", label: "Billing", icon: IconCreditCard }, { id: "notifications", label: "Notifications", icon: IconBell }, { id: "sign-out", label: "Sign out", icon: IconLogout, destructive: true, separatorBefore: true }, ]; function initials(name: string) { return name .split(/\s+/) .filter(Boolean) .slice(0, 2) .map((w) => w[0]?.toUpperCase()) .join(""); } function UserAvatar({ user }: { user: AppSidebarUser }) { return ( {user.image ? : null} {initials(user.name)} ); } function UserMenu({ user, items, side, onSelect, }: { user: AppSidebarUser; items: AppSidebarUserMenuItem[]; side: AppSidebarSide; onSelect?: (id: string) => void; }) { const { isMobile } = useSidebar(); return ( } >

{user.name} {user.email}

{items.map((entry) => ( {entry.separatorBefore ? : null} onSelect?.(entry.id)} {...(entry.href ? { render: } : {})} > {entry.icon ? : null} {entry.label} ))} ); } export type AppSidebarProps = { groups: AppSidebarGroup[]; brand: AppSidebarBrand; /** Current item id. */ value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Client-side navigation. When given, link clicks call it instead of following the href. */ navigate?: (href: string, item: AppSidebarItem) => void; user?: AppSidebarUser; /** Replaces the default account menu (Account, Billing, Notifications, Sign out). */ userMenu?: AppSidebarUserMenuItem[]; onUserMenuSelect?: (id: string) => void; /** Items pinned above the user, such as Help. */ footerItems?: AppSidebarItem[]; side?: AppSidebarSide; variant?: AppSidebarVariant; collapsible?: AppSidebarCollapsible; /** The thin drag-to-toggle strip on the sidebar edge. */ rail?: boolean; className?: string; }; /** * A ready Kobra sidebar: brand, groups (optionally collapsible), items with nested pages and badges, footer * items and an avatar menu. Use inside `AppSidebarProvider`, next to `AppSidebarInset`. */ export function AppSidebar({ groups, brand, value, defaultValue, onValueChange, navigate, user, userMenu = DEFAULT_USER_MENU, onUserMenuSelect, footerItems, side = "start", variant = "sidebar", collapsible = "offcanvas", rail = true, className, }: AppSidebarProps) { const { contained } = React.useContext(ProviderContext); const first = groups[0]?.items[0]?.id ?? ""; const [current, setCurrent] = useControllable(value, defaultValue ?? first, onValueChange); const select = (item: AppSidebarItem, event: React.MouseEvent) => { if (item.disabled) { event.preventDefault(); return; } setCurrent(item.id); if (navigate) { event.preventDefault(); navigate(item.href, item); } }; const nav: NavCtx = { value: current, select }; return ( { if (navigate) event.preventDefault(); }} /> } > {brand.mark}

{brand.name} {brand.subtitle ? ( {brand.subtitle} ) : null}

{groups.map((group) => ( ))} {footerItems?.length ? ( {footerItems.map((item) => ( ))} ) : null} {user ? : null} {rail && collapsible !== "none" ? : null} ); } /** The page next to the sidebar. Takes the inset variant's rounded surface automatically. */ export function AppSidebarInset({ className, ...props }: React.ComponentProps) { return ; } function ModGlyph() { const mac = useIsMac(); return <>{mac ? "⌘" : "Ctrl"}; } /** A sidebar toggle with a tooltip that names the shortcut. */ export function AppSidebarTrigger({ shortcut = "b", className, }: { /** Show this key in the tooltip. Pass the same value as the provider; `false` hides the hint. */ shortcut?: string | false; className?: string; }) { return ( } /> Toggle sidebar {shortcut ? ( {shortcut.toUpperCase()} ) : null} ); } 32:T3eb4,"use client"; import * as React from "react"; import { IconChevronLeft, IconChevronRight, IconChevronUp, IconChevronDown } from "@tabler/icons-react"; import { useDefaultLayout, usePanelRef, type Layout, type PanelImperativeHandle, type PanelSize } from "react-resizable-panels"; import { Button } from "@/components/ui/button"; import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"; import { cn } from "@/lib/utils"; import { useMounted } from "../_shared/use-nav"; export type ResizableOrientation = "horizontal" | "vertical"; /** `default`: panes share hairlines inside one frame. `cards`: each pane is its own card. `filled`: raised panes on a tinted tray. `plain`: no frame, for nesting inside a pane. */ export type ResizableVariant = "default" | "cards" | "filled" | "plain"; /** `line`: hairline that thickens on hover. `bar`: a visible track. `grip`: hairline with a grab pill. */ export type ResizableHandleType = "line" | "bar" | "grip"; type PaneApi = { collapsed: boolean; collapse: () => void; expand: () => void; toggle: () => void; /** Current size as a percentage of the group. */ size: number; }; type RootApi = { orientation: ResizableOrientation; ready: boolean; register: (id: string, handle: PanelImperativeHandle | null) => void; report: (id: string, size: PanelSize, collapsedSize: number, collapsible: boolean) => void; }; const RootContext = React.createContext(null); const PaneContext = React.createContext(null); /** Read and drive the pane that contains the caller (collapse, expand, current size). */ export function useResizablePane(): PaneApi { const ctx = React.useContext(PaneContext); if (!ctx) throw new Error("useResizablePane must be used inside ."); return ctx; } export type ResizablePaneProps = { /** Stable id. Required to persist sizes; defaults to the pane's position. */ id?: string; /** A number is a percentage of the group (0 to 100). A string takes its unit: "260px", "16rem", "30%". */ defaultSize?: number | string; minSize?: number | string; maxSize?: number | string; /** Keep this pane's pixel width when the group resizes, instead of its share. At least one pane must not. */ preservePixels?: boolean; /** Dragging below `minSize` collapses the pane to `collapsedSize`. */ collapsible?: boolean; collapsedSize?: number; /** Names the pane for assistive technology and the reopen button. */ label?: string; className?: string; children?: React.ReactNode; }; const unit = (n: number | string | undefined) => (n === undefined ? undefined : typeof n === "number" ? `${String(n)}%` : n); /** A pane. Direct children of `ResizablePanels`; handles are inserted between them. */ export function ResizablePane({ id, defaultSize, minSize, maxSize, collapsible = false, collapsedSize = 0, preservePixels = false, label, className, children, }: ResizablePaneProps) { const root = React.useContext(RootContext); const fallbackId = React.useId(); const paneId = id ?? fallbackId; const ref = usePanelRef(); const [collapsed, setCollapsed] = React.useState(false); const [size, setSize] = React.useState(typeof defaultSize === "number" ? defaultSize : 0); React.useEffect(() => { root?.register(paneId, ref.current); return () => root?.register(paneId, null); }, [root, paneId, ref]); const api = React.useMemo( () => ({ collapsed, size, collapse: () => ref.current?.collapse(), expand: () => ref.current?.expand(), toggle: () => (ref.current?.isCollapsed() ? ref.current.expand() : ref.current?.collapse()), }), [collapsed, size, ref], ); return ( { setSize(next.asPercentage); setCollapsed(collapsible && next.asPercentage <= collapsedSize + 0.01); root?.report(paneId, next, collapsedSize, collapsible); }} className={cn("min-h-0 min-w-0", className)} aria-label={label} data-slot="resizable-pane" > {/* A collapsed pane keeps its state but takes no focus and is hidden from assistive technology. */}

{children}

); } const handleBase = "z-10 transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:ring-2 focus-visible:ring-ring/60"; function handleClasses(variant: ResizableVariant, type: ResizableHandleType) { if (variant === "cards" || variant === "filled") { // Gap handles between cards: invisible until hover, then a short pill. return cn( handleBase, "bg-transparent w-3 aria-[orientation=horizontal]:h-3 aria-[orientation=horizontal]:w-full", "after:inset-y-0 after:w-3 aria-[orientation=horizontal]:after:h-3", "before:absolute before:rounded-full before:bg-border before:opacity-0 before:transition-opacity before:duration-150 before:content-[''] motion-reduce:before:transition-none", "before:inset-y-[calc(50%-1rem)] before:start-1/2 before:w-1 before:-translate-x-1/2 rtl:before:translate-x-1/2", "aria-[orientation=horizontal]:before:inset-y-auto aria-[orientation=horizontal]:before:top-1/2 aria-[orientation=horizontal]:before:start-[calc(50%-1rem)] aria-[orientation=horizontal]:before:h-1 aria-[orientation=horizontal]:before:w-8 aria-[orientation=horizontal]:before:translate-x-0 aria-[orientation=horizontal]:before:-translate-y-1/2", type === "grip" ? "before:opacity-100 before:bg-border" : "hover:before:opacity-100", "data-[separator=active]:before:bg-ring/70 data-[separator=active]:before:opacity-100", ); } const hit = "after:w-2 aria-[orientation=horizontal]:after:h-2 aria-[orientation=horizontal]:after:w-full"; if (type === "bar") { return cn( handleBase, hit, "w-1.5 bg-muted hover:bg-border data-[separator=active]:bg-ring/50 aria-[orientation=horizontal]:h-1.5 aria-[orientation=horizontal]:w-full", ); } if (type === "grip") { return cn( handleBase, hit, "hover:bg-ring/50 data-[separator=active]:bg-ring/70 [&>div]:h-8 [&>div]:w-1.5 [&>div]:bg-border [&>div]:transition-colors [&>div]:duration-150 hover:[&>div]:bg-ring/70 data-[separator=active]:[&>div]:bg-ring", ); } return cn(handleBase, hit, "hover:bg-ring/50 data-[separator=active]:bg-ring/70"); } const variantRoot: Record = { default: "rounded-xl border border-border bg-background overflow-hidden", cards: "", filled: "rounded-xl bg-muted p-1.5 ring-1 ring-foreground/5", plain: "", }; const variantPane: Record = { default: "", cards: "rounded-xl border border-border bg-card overflow-hidden", filled: "rounded-lg bg-background shadow-xs ring-1 ring-foreground/6 overflow-hidden", plain: "", }; type Meta = { id: string; collapsible: boolean; collapsedSize: number }; export type ResizablePanelsProps = { /** `ResizablePane` elements. */ children: React.ReactNode; orientation?: ResizableOrientation; variant?: ResizableVariant; handle?: ResizableHandleType; /** Show a size badge on the handle while it is dragged. */ indicator?: boolean; /** Persist pane sizes to localStorage under this key. Panes need stable `id`s. */ persistKey?: string; onLayoutChange?: (layout: Layout) => void; disabled?: boolean; className?: string; }; /** * Resizable panes on the Kobra resizable (react-resizable-panels). Handles go between panes, the group fills * its parent, collapsible panes get a reopen button on their edge, and sizes can persist. */ export function ResizablePanels({ children, orientation = "horizontal", variant = "default", handle = "line", indicator = false, persistKey, onLayoutChange, disabled, className, }: ResizablePanelsProps) { const mounted = useMounted(); const panes = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[]; const ids = panes.map((p, i) => p.props.id ?? `pane-${String(i)}`); const vertical = orientation === "vertical"; const root = React.useRef(null); const handles = React.useRef(new Map()); const [layout, setLayout] = React.useState({}); const [dragging, setDragging] = React.useState(null); const [collapsedIds, setCollapsedIds] = React.useState>({}); const [ready, setReady] = React.useState(false); React.useEffect(() => { let second = 0; const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => setReady(true)); }); return () => { cancelAnimationFrame(first); cancelAnimationFrame(second); }; }, []); const storage = React.useMemo( () => typeof window === "undefined" ? { getItem: () => null, setItem: () => undefined } : window.localStorage, [], ); const persisted = useDefaultLayout({ id: persistKey ?? "resizable-panels-unsaved", panelIds: ids, storage: persistKey ? storage : { getItem: () => null, setItem: () => undefined }, }); const api = React.useMemo( () => ({ orientation, ready, register: (id, h) => { if (h) handles.current.set(id, h); else handles.current.delete(id); }, report: (id, size, collapsedSize, collapsible) => { const collapsed = collapsible && size.asPercentage <= collapsedSize + 0.01; setCollapsedIds((prev) => (prev[id] === collapsed ? prev : { ...prev, [id]: collapsed })); }, }), [orientation, ready], ); // Which handle is being dragged: its position among the separators of this group. React.useEffect(() => { const node = root.current; if (!node || !indicator) return; let timer = 0; const find = (target: EventTarget | null) => { const sep = target instanceof Element ? target.closest("[data-separator]") : null; if (!sep || sep.closest("[data-slot=resizable-panels]") !== node) return null; return Array.from(sep.parentElement?.children ?? []) .filter((c) => c.hasAttribute("data-separator")) .indexOf(sep); }; const down = (e: PointerEvent) => { const i = find(e.target); if (i !== null && i >= 0) setDragging(i); }; const up = () => setDragging(null); const key = (e: KeyboardEvent) => { if (!e.key.startsWith("Arrow") && e.key !== "Home" && e.key !== "End") return; const i = find(e.target); if (i === null || i < 0) return; setDragging(i); window.clearTimeout(timer); timer = window.setTimeout(() => setDragging(null), 700); }; node.addEventListener("pointerdown", down); window.addEventListener("pointerup", up); window.addEventListener("pointercancel", up); node.addEventListener("keydown", key); return () => { node.removeEventListener("pointerdown", down); window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", up); node.removeEventListener("keydown", key); window.clearTimeout(timer); }; }, [indicator]); const metas: Meta[] = panes.map((p, i) => ({ id: ids[i], collapsible: Boolean(p.props.collapsible), collapsedSize: p.props.collapsedSize ?? 0, })); const interleaved: React.ReactNode[] = []; panes.forEach((pane, i) => { interleaved.push( React.cloneElement(pane, { key: ids[i], id: ids[i], className: cn(variantPane[variant], pane.props.className), }), ); if (i < panes.length - 1) { interleaved.push( , ); } }); // Indicator geometry: where the dragged handle sits, and the sizes either side of it. // `left-(--at)` is intentionally physical: --at is a percentage measured from the group's visual left edge. let badge: React.ReactNode = null; if (indicator && dragging !== null && dragging < panes.length - 1) { const before = ids.slice(0, dragging + 1).reduce((sum, id) => sum + (layout[id] ?? 0), 0); const a = layout[ids[dragging]] ?? 0; const b = layout[ids[dragging + 1]] ?? 0; badge = ( {Math.round(a)}% {Math.round(b)}% ); } const reopen = (i: number) => { const meta = metas[i]; if (!meta.collapsible || !collapsedIds[meta.id]) return null; const first = i === 0; const last = i === metas.length - 1; if (!first && !last) return null; const label = panes[i].props.label ?? "pane"; const Icon = vertical ? first ? IconChevronDown : IconChevronUp : first ? IconChevronRight : IconChevronLeft; return ( ); }; const group = ( { setLayout(next); onLayoutChange?.(next); }} onLayoutChanged={persistKey ? persisted.onLayoutChanged : undefined} disabled={disabled} > {interleaved} ); return (

{persistKey && !mounted ? null : group} {badge} {metas.map((_, i) => reopen(i))}

); } 33:T137e,"use client"; import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react"; const noop = () => () => {}; /** False on the server and during hydration, true afterwards. */ export function useMounted(): boolean { return useSyncExternalStore(noop, () => true, () => false); } /** True on Apple platforms, where the modifier key is Cmd. Server and first client render say Mac. */ export function useIsMac(): boolean { return useSyncExternalStore( noop, () => /Mac|iPhone|iPad/.test(navigator.platform), () => true, ); } const listeners = new Set<() => void>(); function subscribeStorage(notify: () => void) { listeners.add(notify); window.addEventListener("storage", notify); return () => { listeners.delete(notify); window.removeEventListener("storage", notify); }; } function readRaw(key: string | undefined): string | null { if (!key) return null; try { return window.localStorage.getItem(key); } catch { return null; } } function writeStorage(key: string, value: unknown) { try { window.localStorage.setItem(key, JSON.stringify(value)); } catch { /* private mode or quota: the state still works in memory */ } listeners.forEach((notify) => notify()); } /** * State that survives reloads when `key` is given. The server and the hydrating render see `initial`; the stored * value arrives right after, and `ready` turns true two frames later so callers can keep transitions off until * the restored value has painted. Without a key it is plain state. */ export function usePersistedState( key: string | undefined, initial: T, ): [value: T, setValue: (next: T) => void, ready: boolean] { const [local, setLocal] = useState(initial); const [ready, setReady] = useState(!key); const raw = useSyncExternalStore( subscribeStorage, () => readRaw(key), () => null, ); const stored = useMemo(() => { if (raw === null) return undefined; try { return JSON.parse(raw) as T; } catch { return undefined; } }, [raw]); useEffect(() => { if (!key) return; let second = 0; const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => setReady(true)); }); return () => { cancelAnimationFrame(first); cancelAnimationFrame(second); }; }, [key]); const set = useCallback( (next: T) => { setLocal(next); if (key) writeStorage(key, next); }, [key], ); return [key && stored !== undefined ? stored : local, set, ready]; } /** Controlled or uncontrolled value, Base UI naming. */ export function useControllable( value: T | undefined, defaultValue: T, onChange?: (next: T) => void, ): [T, (next: T) => void] { const [inner, setInner] = useState(defaultValue); const controlled = value !== undefined; const current = controlled ? value : inner; const onChangeRef = useRef(onChange); useEffect(() => { onChangeRef.current = onChange; }); const set = useCallback( (next: T) => { if (!controlled) setInner(next); onChangeRef.current?.(next); }, [controlled], ); return [current, set]; } type ShortcutOptions = { /** `window`: any time. `within`: only while the element holds focus or the pointer. */ scope?: "window" | "within"; /** Element used by `within`. */ scopeRef?: React.RefObject; /** Also swallow these Cmd/Ctrl+key combos before other listeners see them. */ swallow?: string[]; }; /** * Cmd/Ctrl + key. Runs in the capture phase so it can claim a combo (for example, to replace the Kobra * sidebar's built-in Cmd/Ctrl+B with another key). A key of `false` disables the shortcut. */ export function useModShortcut( key: string | false | undefined, handler: () => void, { scope = "window", scopeRef, swallow = [] }: ShortcutOptions = {}, ) { const handlerRef = useRef(handler); useEffect(() => { handlerRef.current = handler; }); useEffect(() => { const wanted = key ? key.toLowerCase() : undefined; const onKeyDown = (event: KeyboardEvent) => { if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return; const pressed = event.key.toLowerCase(); if (swallow.includes(pressed) && pressed !== wanted) { event.stopPropagation(); return; } if (!wanted || pressed !== wanted) return; if (scope === "within") { const node = scopeRef?.current; if (!node || !(node.contains(document.activeElement) || node.matches(":hover"))) return; } event.preventDefault(); event.stopPropagation(); handlerRef.current(); }; window.addEventListener("keydown", onKeyDown, true); return () => window.removeEventListener("keydown", onKeyDown, true); // swallow is compared by content // eslint-disable-next-line react-hooks/exhaustive-deps }, [key, scope, scopeRef, swallow.join("|")]); } 34:T3358,