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:Tbc5f,"use client"; import { Button } from "@/components/ui/button"; import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { blur, duration, ease, spring } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { cva, type VariantProps } from "class-variance-authority"; import { ChevronRightIcon } from "lucide-react"; import { type AnimationPlaybackControls, animate, motion, motionValue, useReducedMotion } from "motion/react"; import { Collapsible as CollapsiblePrimitive, Slot } from "radix-ui"; import { type ComponentProps, type CSSProperties, createContext, type MouseEvent, type Ref, type RefObject, type SyntheticEvent, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, } from "react"; /* * Sidebar: a collapsible app sidebar (roadmap, 2026-10-16: "A collapsible app sidebar with a gliding active * indicator"), with shadcn's parts and `useSidebar`. * - SidebarProvider keeps the open state (controlled or not). SidebarTrigger, SidebarRail and ⌘B / Ctrl+B * toggle it; the shortcut leaves typing alone. Below Tailwind's md (768px) the sidebar opens as a Sheet. * - The panel sits in the page's flow, sticky to the top, rather than fixed, so the content beside it makes * room and the whole shell also works inside a frame. Widths are variables on the provider, as in shadcn. * - `collapsible`: "icon" narrows it to its icons (labels become tooltips), "offcanvas" slides it away, "none" * keeps it. * - Motion (.agents/rules/motion.md): * - One highlight glides to the current page's row (spring.snappy), and one more follows the mouse and * fades out where it leaves. Both are placed from layout offsets, on transform only, so they stay right * while the list scrolls. When the layout moves under them (a section opening, the width gliding) they * keep to their row at once; they glide only when their row changes. A change of size glides as a scale. * - A current page inside a folded section (closed, or the sidebar down to its icons) shows on the * section's own row: the highlight climbs to it as the section folds, and drops back as it opens. * - Narrowing to icons glides the width on duration.slow + ease.out (the height pattern's tween, never a * spring), while the labels leave through the blur and later come back through it. * - Sections open and close with the shipped collapsible keyframes, and their chevron turns. * - Nothing animates on first paint, and with reduced motion it's all instant. */ /** Widths, set as variables on SidebarProvider (change them through its `style`) */ const SIDEBAR_WIDTH = "16rem"; const SIDEBAR_WIDTH_ICON = "3rem"; /** The phone sheet is a little wider, for thumbs */ const SIDEBAR_WIDTH_MOBILE = "18rem"; /** Below Tailwind's md the sidebar is a sheet; the desktop panel is `md:block` to match before hydration */ const MOBILE_QUERY = "(max-width: 767.98px)"; function subscribeToWidth(onChange: () => void) { const query = window.matchMedia(MOBILE_QUERY); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); } /** Phone-sized, from the media query. The server and hydration assume a wider screen. */ function useIsMobile() { return useSyncExternalStore( subscribeToWidth, () => window.matchMedia(MOBILE_QUERY).matches, () => false, ); } type SidebarContextValue = { /** "collapsed" while the desktop sidebar is narrowed to its icons or slid away */ state: "expanded" | "collapsed"; open: boolean; setOpen: (open: boolean) => void; /** The phone sheet's own open state */ openMobile: boolean; setOpenMobile: (open: boolean) => void; isMobile: boolean; /** Opens or closes the sheet on phones, the sidebar elsewhere */ toggleSidebar: () => void; /** The sidebar's id, for the trigger's aria-controls */ id: string; shortcut: string | false; }; const SidebarContext = createContext(null); /** The sidebar's state and controls, for your own trigger or anything that reacts to it */ function useSidebar() { const context = useContext(SidebarContext); if (!context) throw new Error("useSidebar and the Sidebar parts must be used inside SidebarProvider"); return context; } type Collapsible = "offcanvas" | "icon" | "none"; /** What the parts inside one Sidebar know about it */ const PanelContext = createContext<{ side: "left" | "right"; collapsible: Collapsible; /** Down to its icons: labels have left, sub-menus have folded, tooltips name the rows */ iconMode: boolean; } | null>(null); /** SidebarContent's highlights: rows report hover, and changes to which one is current */ const GlideContext = createContext<{ /** Placed: the highlights now draw what each row drew itself before (server HTML, first paint) */ ready: boolean; /** A row became or stopped being current, or came or went: find the current one again */ invalidate: () => void; enter: (row: HTMLElement) => void; leave: (row: HTMLElement) => void; } | null>(null); /** One SidebarMenuCollapsible: whether it's open, and whether it's showing (it folds while down to icons) */ const SectionContext = createContext<{ open: boolean; shown: boolean; setOpen: (open: boolean) => void; } | null>(null); function useSection(part: string) { const section = useContext(SectionContext); if (!section) throw new Error(`${part} must be used inside SidebarMenuCollapsible`); return section; } /** Hands a node to our ref and to the caller's */ function useMergedRef(own: RefObject, theirs?: Ref) { return useCallback( (node: T | null) => { own.current = node; if (typeof theirs === "function") theirs(node); else if (theirs) theirs.current = node; }, [own, theirs], ); } /** The shortcut leaves typing alone: ⌘B means bold in most editors */ function isTyping(target: EventTarget | null) { return ( target instanceof HTMLElement && (target.isContentEditable || target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])') !== null) ); } export type SidebarProviderProps = ComponentProps<"div"> & { /** Whether the sidebar is open, when you control it */ open?: boolean; /** Whether it starts open */ defaultOpen?: boolean; /** Called when it opens or closes (the phone sheet keeps its own state) */ onOpenChange?: (open: boolean) => void; /** The letter that toggles it with ⌘ or Ctrl; false turns the shortcut off */ shortcut?: string | false; }; function SidebarProvider({ open: openProp, defaultOpen = true, onOpenChange, shortcut = "b", className, style, children, ...props }: SidebarProviderProps) { const isMobile = useIsMobile(); const id = useId(); const [own, setOwn] = useState(defaultOpen); const open = openProp ?? own; const [openMobile, setOpenMobile] = useState(false); // Growing past phone size closes the sheet, so it doesn't spring open again on the way back if (!isMobile && openMobile) setOpenMobile(false); const setOpen = useCallback( (next: boolean) => { setOwn(next); onOpenChange?.(next); }, [onOpenChange], ); const toggleSidebar = useCallback(() => { if (isMobile) setOpenMobile((current) => !current); else setOpen(!open); }, [isMobile, open, setOpen]); useEffect(() => { if (!shortcut) return; const key = shortcut.toLowerCase(); const onKeyDown = (event: globalThis.KeyboardEvent) => { if (event.key?.toLowerCase() !== key || !(event.metaKey || event.ctrlKey)) return; if (event.altKey || event.shiftKey || event.repeat || event.defaultPrevented || isTyping(event.target)) return; event.preventDefault(); toggleSidebar(); }; window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [shortcut, toggleSidebar]); const value = useMemo( () => ({ state: open ? "expanded" : "collapsed", open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar, id, shortcut, }), [open, setOpen, openMobile, isMobile, toggleSidebar, id, shortcut], ); return ( {/* The rows' tooltips hand over to each other down the icon column */}

{children}

); } /** Everything that leaves when the sidebar narrows to its icons: each row's label (all but its icon), group labels and badges */ const LABELS = "[data-slot=sidebar-menu-button] > :not(:first-child), [data-slot=sidebar-group-label], [data-slot=sidebar-menu-badge]"; function clearStyles(labels: HTMLElement[]) { for (const label of labels) { label.style.removeProperty("opacity"); label.style.removeProperty("filter"); } } /** * Narrowing to icons, the labels leave through the blur; widening, they come back through it. The classes * hold each end state, so this only plays the change and then clears what it wrote (ADR 0011). */ function useLabelsBlur(nav: RefObject, iconMode: boolean, reduce: boolean) { const last = useRef(iconMode); const run = useRef<{ controls: AnimationPlaybackControls; labels: HTMLElement[] } | null>(null); useLayoutEffect(() => { // Nothing on first paint, nor when nothing changed if (last.current === iconMode) return; last.current = iconMode; // Turned back mid-way, the labels carry on from where they are let from: { opacity: number; filter: string } = iconMode ? { opacity: 1, filter: blur.shown } : { opacity: 0, filter: blur.hidden }; const previous = run.current; if (previous?.labels[0]) { const style = getComputedStyle(previous.labels[0]); from = { opacity: style.opacity === "" ? from.opacity : Number(style.opacity), filter: style.filter && style.filter !== "none" ? style.filter : blur.shown, }; } previous?.controls.stop(); if (previous) clearStyles(previous.labels); run.current = null; const labels = Array.from(nav.current?.querySelectorAll(LABELS) ?? []); if (reduce || labels.length === 0) return; const controls = animate( labels, { opacity: [from.opacity, iconMode ? 0 : 1], filter: [from.filter, iconMode ? blur.hidden : blur.shown], }, // Leaving is quick, so the text has gone before the width closes on it; coming back keeps pace iconMode ? { duration: duration.fast, ease: ease.in } : { duration: duration.slow, ease: ease.out }, ); const current = { controls, labels }; run.current = current; controls.then(() => { if (run.current !== current) return; run.current = null; clearStyles(labels); }); }, [iconMode, reduce, nav]); useEffect(() => () => run.current?.controls.stop(), []); } export type SidebarProps = ComponentProps<"nav"> & { /** The edge it's on. Put a right sidebar after SidebarInset. */ side?: "left" | "right"; /** What collapsing does: narrow it to its icons, slide it away, or nothing */ collapsible?: Collapsible; }; /** The sidebar: a navigation landmark (named "Sidebar" unless you give it an aria-label) */ function Sidebar({ side = "left", collapsible = "offcanvas", className, children, ref, "aria-label": label = "Sidebar", ...props }: SidebarProps) { const sidebar = useSidebar(); const reduce = useReducedMotion() ?? false; const node = useRef(null); const setRef = useMergedRef(node, ref); const collapsed = sidebar.state === "collapsed"; const iconMode = !sidebar.isMobile && collapsible === "icon" && collapsed; const panel = useMemo(() => ({ side, collapsible, iconMode }), [side, collapsible, iconMode]); useLabelsBlur(node, iconMode, reduce); if (collapsible === "none") { return ( ); } if (sidebar.isMobile) { return ( {label} ); } return ( ); } /** Opens and closes the sidebar (the sheet, on phones). Also accepts every Button prop. */ function SidebarTrigger({ className, onClick, children, ...props }: ComponentProps) { const sidebar = useSidebar(); const expanded = sidebar.isMobile ? sidebar.openMobile : sidebar.open; const key = sidebar.shortcut ? sidebar.shortcut.toUpperCase() : null; return ( ); } /** * The trigger's panel icon, which shows the sidebar's state: its divider slides in as the sidebar narrows and * back out as it opens (an icon that represents a state, on spring.snappy). Nothing moves on first paint. */ function PanelIcon({ open }: { open: boolean }) { const reduce = useReducedMotion() ?? false; return ( ); } /** * A strip along the sidebar's edge that toggles it on click, for the mouse. The trigger is the way for the * keyboard and screen readers, so the rail is hidden from both. */ function SidebarRail({ className, onClick, ...props }: ComponentProps<"button">) { const sidebar = useSidebar(); const panel = useContext(PanelContext); if (sidebar.isMobile || !panel || panel.collapsible === "none") return null; return (