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: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} ); } 31: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("|")]); } 32:T240e,"use client"; import { useMemo, useState } from "react"; import { Button } from "@/components/ui/button"; import { agentBrand, agentNav, dashboardBrand, dashboardFooterNav, dashboardNav, demoUser, docsBrand, docsNav, type NavBrand, type NavGroup, type NavItem, } from "../_fixtures"; import { DemoPage, DemoSection, Stage } from "../_shared/demo-kit"; import { Segment } from "../segment/segment"; import { AppSidebar, AppSidebarInset, AppSidebarProvider, AppSidebarTrigger, type AppSidebarCollapsible, type AppSidebarProps, type AppSidebarProviderProps, type AppSidebarSide, type AppSidebarVariant, } from "./app-sidebar"; function labelOf(groups: NavGroup[], id: string): string { const walk = (items: NavItem[]): string | undefined => { for (const item of items) { if (item.id === id) return item.label; const inner = item.children ? walk(item.children) : undefined; if (inner) return inner; } }; for (const g of groups) { const hit = walk(g.items); if (hit) return hit; } return "Page"; } function PageBody({ title, shortcut, trigger = true }: { title: string; shortcut: string | false; trigger?: boolean }) { return ( <>

{trigger ? : null}

{title}

{["Revenue", "Orders", "Returns"].map((label, i) => (

{label}

{["$48,210", "1,204", "2.1%"][i]}

))}

{shortcut ? ( <>Press Cmd or Ctrl and {shortcut.toUpperCase()} while the pointer is over this frame to toggle the sidebar. ) : null} Below 768px the sidebar becomes a sheet.

); } type ShellProps = { label: string; note?: string; height?: number; groups: NavGroup[]; brand: NavBrand; initial?: string; provider?: Omit; sidebar?: Partial>; footerItems?: NavItem[]; extra?: React.ReactNode; user?: boolean; }; function Shell({ label, note, height = 460, groups, brand, initial, provider, sidebar, footerItems, extra, user = true }: ShellProps) { const [active, setActive] = useState(initial ?? groups[0].items[0].id); const shortcut = provider?.shortcut === undefined ? "b" : provider.shortcut; const side = sidebar?.side ?? "start"; const content = useMemo(() => labelOf(groups, active), [groups, active]); return ( {extra} {side === "end" ? ( ) : null} undefined} user={user ? demoUser : undefined} footerItems={footerItems} {...sidebar} /> {side === "end" ? null : ( )} ); } function Playground() { const [variant, setVariant] = useState("sidebar"); const [collapsible, setCollapsible] = useState("icon"); const [side, setSide] = useState("start"); return (

setVariant(v as AppSidebarVariant)} options={[{ value: "sidebar", label: "Sidebar" }, { value: "floating", label: "Floating" }, { value: "inset", label: "Inset" }]} /> setCollapsible(v as AppSidebarCollapsible)} options={[{ value: "offcanvas", label: "Offcanvas" }, { value: "icon", label: "Icon" }, { value: "none", label: "None" }]} /> setSide(v as AppSidebarSide)} options={[{ value: "start", label: "Start" }, { value: "end", label: "End" }]} />

); } function Persisted() { const KEY = "kc:app-sidebar:demo"; const [epoch, setEpoch] = useState(0); const reset = () => { try { window.localStorage.removeItem(KEY); } catch { /* storage unavailable */ } setEpoch((n) => n + 1); }; return (

Collapse the sidebar, then reload the page. It stays collapsed.

); } function ReducedMotion() { const [reduced, setReduced] = useState(true); return (

setReduced(v === "on")} options={[{ value: "on", label: "Reduced" }, { value: "off", label: "Full motion" }]} /> The prop adds to prefers-reduced-motion, which is always honored.