{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "workspace-shell", "type": "registry:block", "title": "Workspace Shell", "description": "An inset workspace on beUI: shared chrome, a collapsible sidebar and browser-like tabs joined to the content surface.", "author": "asharca", "dependencies": [ "clsx", "lucide-react", "motion", "tailwind-merge" ], "registryDependencies": [], "files": [ { "path": "components/workspace/workspace-shell.tsx", "type": "registry:component", "target": "@components/workspace/workspace-shell.tsx", "content": "\"use client\";\n// asharca.github.io/ui/components/blocks/workspace-shell\n\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport {\n AnimatedSidebarProvider,\n type AnimatedSidebarProviderProps,\n} from \"@/components/motion/animated-sidebar\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface WorkspaceShellProps extends AnimatedSidebarProviderProps {\n sidebar?: ReactNode;\n tabBar?: ReactNode;\n mobileHeader?: ReactNode;\n header?: ReactNode;\n footer?: ReactNode;\n /** content: this pane scrolls; none: the editor/chat child owns scrolling. */\n scroll?: \"content\" | \"none\";\n contentProps?: Omit, \"children\">;\n}\n\nconst hasSlot = (node: ReactNode) => node != null && typeof node !== \"boolean\";\n\n/** The beUI sidebar provider owns navigation state; the host owns tabs and data.\n * Set a height on the shell. Tabs and content share one alignment line, and the\n * first active tab removes only the adjoining top-left corner of the surface.\n * data-workspace-shell identifies this composition without replacing beUI's\n * own data-slot=\"sidebar-wrapper\" or introducing a second layout wrapper.\n */\nexport function WorkspaceShell({\n sidebar, tabBar, mobileHeader, header, footer, children, className, style,\n scroll = \"content\", contentProps, ...props\n}: WorkspaceShellProps) {\n const sidebarInset = hasSlot(sidebar) && \"md:ml-[var(--workspace-gap,0px)]\";\n return (\n \n {sidebar}\n
\n {hasSlot(mobileHeader) &&
{mobileHeader}
}\n {hasSlot(tabBar) &&
{tabBar}
}\n
\n {hasSlot(header) &&
{header}
}\n
{children}
\n {hasSlot(footer) &&
{footer}
}\n
\n
\n \n );\n}\n\n/** Invoke synchronously from a user action. null means the browser blocked it.\n * Only the host decides whether to remove a tab and what state may be copied.\n */\nexport function openWorkspaceWindow(href: string | URL, prepare?: (popup: Window) => void): Window | null {\n const url = new URL(href, window.location.href);\n if (![\"http:\", \"https:\"].includes(url.protocol) || url.origin !== window.location.origin || url.username || url.password) {\n throw new Error(\"工作区窗口必须使用不含凭据的同源 HTTP(S) 地址。\");\n }\n const popup = window.open(\"about:blank\", \"_blank\", \"popup,width=1100,height=760\");\n if (!popup) return null;\n try {\n popup.opener = null;\n prepare?.(popup);\n popup.location.replace(url.href);\n return popup;\n } catch (error) {\n popup.close();\n throw error;\n }\n}\n" }, { "path": "components/workspace/workspace-tab-bar.tsx", "type": "registry:component", "target": "@components/workspace/workspace-tab-bar.tsx", "content": "\"use client\";\n// asharca.github.io/ui/components/blocks/workspace-shell\n\nimport { ArrowLeft, ArrowRight, ExternalLink, MoreHorizontal, Pin, PinOff, Plus, X } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from \"react\";\nimport { Button } from \"@/components/motion/button/base\";\nimport { MorphPopover, MorphPopoverTrigger, MorphPopoverContent } from \"@/components/motion/popover-morph\";\nimport { SPRING_LAYOUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\ntype MenuPoint = { x: number; y: number };\nconst LONG_PRESS_DELAY = 520;\nconst LONG_PRESS_TOLERANCE = 10;\n\nexport interface WorkspaceTab {\n id: string;\n title: string;\n icon?: ReactNode;\n pinned?: boolean;\n dirty?: boolean;\n closable?: boolean;\n detachable?: boolean;\n tabId?: string;\n panelId?: string;\n}\nexport interface WorkspaceTabBarProps {\n tabs: WorkspaceTab[];\n activeTabId: string;\n onSelect: (id: string) => void;\n onClose?: (id: string) => void;\n onReorder?: (sourceId: string, targetId: string) => void;\n onPinnedChange?: (id: string, pinned: boolean) => void;\n onOpenInNewWindow?: (id: string) => void;\n onNewTab?: () => void;\n actions?: ReactNode;\n closeOnMiddleClick?: boolean;\n closeOnDoubleClick?: boolean;\n className?: string;\n}\ninterface TabAction { key: string; label: string; icon: ReactNode; disabled?: boolean; run: () => void }\n\n/** Per-tab action menu. One beUI MorphPopover serves every invocation: the ⋯\n * button, right-click, long-press and Shift+F10 all open this same panel.\n * `openAt` positions without moving focus; a real trigger click just toggles. */\nfunction TabActions({ title, items, restore, openRequest, onOpenHandled, anchorTabId }: {\n title: string;\n items: TabAction[];\n restore: () => void;\n openRequest: { point: MenuPoint; invocation: number } | null;\n onOpenHandled: () => void;\n anchorTabId: string;\n}) {\n const [open, setOpen] = useState(false);\n const panel = useRef(null);\n const popover = useRef(null);\n const anchor = useRef(null);\n useLayoutEffect(() => {\n if (!open) return;\n // beUI portals mount in an effect. Wait one frame for the actual actions.\n const frame = requestAnimationFrame(() => panel.current?.querySelector(\"button:not(:disabled)\")?.focus());\n return () => cancelAnimationFrame(frame);\n }, [open]);\n useLayoutEffect(() => {\n if (!openRequest) return;\n anchor.current = popover.current?.querySelector(`[data-tab-menu-anchor=\"${anchorTabId}\"]`) ?? null;\n setOpen(false);\n setOpen(true);\n onOpenHandled();\n }, [openRequest, anchorTabId, onOpenHandled]);\n return \n { setOpen(next); if (!next) restore(); }}>\n {!openRequest && }\n \n
\n {items.map((item) => )}\n
\n \n \n ;\n}\n\n/** Browser-like tabs joined to the content surface. Only the selected surface\n * moves; controls stay in place. Selection/order/dirty confirmation are host-owned.\n */\ninterface TabMenuHostProps {\n tab: WorkspaceTab;\n index: number;\n selected: boolean;\n items: TabAction[];\n instance: string;\n tabs: WorkspaceTab[];\n refs: React.MutableRefObject>;\n onSelect: (id: string) => void;\n close: (tab: WorkspaceTab) => void;\n closeOnMiddleClick: boolean;\n closeOnDoubleClick: boolean;\n onReorder: boolean;\n move: (tab: WorkspaceTab, target?: WorkspaceTab) => void;\n selectAt: (index: number) => void;\n restore: (id: string) => void;\n canClose: (tab: WorkspaceTab) => boolean;\n onClose: boolean;\n}\n\n/** One tab plus its sibling controls. Right-click, touch long-press and\n * Shift+F10/CopyAll open the same MorphPopover as the ⋯ button — the\n * ContextMenu copy is gone, so there is a single menu to maintain. */\nfunction TabMenuHost({ tab, index, selected, items, instance, tabs, refs, onSelect, close, closeOnMiddleClick, closeOnDoubleClick, onReorder, move, selectAt, restore, canClose, onClose }: TabMenuHostProps) {\n const reduce = useReducedMotion();\n const longPressTimer = useRef | null>(null);\n const touchOrigin = useRef(null);\n const [openRequest, setOpenRequest] = useState<{ point: MenuPoint; invocation: number } | null>(null);\n\n const cancelLongPress = useCallback(() => {\n if (longPressTimer.current) {\n clearTimeout(longPressTimer.current);\n longPressTimer.current = null;\n }\n touchOrigin.current = null;\n }, []);\n useEffect(() => cancelLongPress, [cancelLongPress]);\n\n const openMenuAt = useCallback((point: MenuPoint) => {\n setOpenRequest((current) => ({ point, invocation: (current?.invocation ?? 0) + 1 }));\n }, []);\n\n const onContextMenu = (event: ReactMouseEvent) => {\n if (!items.length) return;\n event.preventDefault();\n cancelLongPress();\n openMenuAt({ x: event.clientX, y: event.clientY });\n };\n // Touch/pen: hold to open, like the platform context menu. A drag cancels.\n const onPointerDown = (event: ReactPointerEvent) => {\n if (!items.length) return;\n const pressToOpen = event.pointerType === \"touch\" || event.pointerType === \"pen\";\n if (pressToOpen) {\n const origin = { x: event.clientX, y: event.clientY };\n touchOrigin.current = origin;\n longPressTimer.current = setTimeout(() => {\n longPressTimer.current = null;\n touchOrigin.current = null;\n openMenuAt(origin);\n }, LONG_PRESS_DELAY);\n }\n };\n const onPointerMove = (event: ReactPointerEvent) => {\n const origin = touchOrigin.current;\n if (origin && Math.hypot(event.clientX - origin.x, event.clientY - origin.y) > LONG_PRESS_TOLERANCE) cancelLongPress();\n };\n // Keyboard: Menu key or Shift+F10 opens at the tab, matching ContextMenu's contract.\n const onKeyDown = (event: ReactKeyboardEvent) => {\n if (event.key === \"Delete\") { event.preventDefault(); close(tab); }\n if (event.key === \"ContextMenu\" || (event.shiftKey && event.key === \"F10\")) {\n if (!items.length) return;\n event.preventDefault();\n const rect = event.currentTarget.getBoundingClientRect();\n openMenuAt({ x: rect.left + Math.min(24, rect.width / 2), y: rect.top + rect.height / 2 });\n }\n if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n event.preventDefault();\n const step = (event.key === \"ArrowLeft\" ? -1 : 1) * (getComputedStyle(event.currentTarget).direction === \"rtl\" ? -1 : 1);\n if (event.altKey) move(tab, tabs[index + step]); else selectAt(index + step);\n }\n if (event.key === \"Home\" || event.key === \"End\") { event.preventDefault(); selectAt(event.key === \"Home\" ? 0 : tabs.length - 1); }\n };\n\n return (\n /* biome-ignore lint/a11y/useSemanticElements: This groups a tab and sibling actions, not form fields. */\n
{ event.dataTransfer.setData(\"text/plain\", `${instance}:${tab.id}`); event.dataTransfer.effectAllowed = \"move\"; }}\n onDragOver={(event) => { if (onReorder) event.preventDefault(); }}\n onDrop={(event) => { event.preventDefault(); const key = event.dataTransfer.getData(\"text/plain\"); const source = tabs.find((item) => `${instance}:${item.id}` === key); if (source) move(source, tab); }}\n className=\"group relative isolate flex h-10 shrink-0 items-center rounded-t-[var(--workspace-radius,0.75rem)] px-1 pb-0.5 outline-none\">\n {selected && 0 && \"before:absolute before:-left-2 before:bottom-0 before:size-2 before:bg-[radial-gradient(circle_at_top_left,transparent_70%,var(--workspace-surface,var(--background))_72%)]\")} />}\n \n {items.length > 0 && restore(tab.id)} openRequest={openRequest} onOpenHandled={() => setOpenRequest(null)} anchorTabId={tab.id} />}\n {onClose && !tab.pinned && }\n
\n );\n}\n\nexport function WorkspaceTabBar({ tabs, activeTabId, onSelect, onClose, onReorder, onPinnedChange, onOpenInNewWindow, onNewTab, actions, closeOnMiddleClick = true, closeOnDoubleClick = false, className }: WorkspaceTabBarProps) {\n const instance = useId();\n const refs = useRef(new Map());\n const scroller = useRef(null);\n const closing = useRef(null);\n const currentId = tabs.some((tab) => tab.id === activeTabId) ? activeTabId : tabs[0]?.id;\n const canClose = (tab: WorkspaceTab) => Boolean(onClose && !tab.pinned && tab.closable !== false && tabs.length > 1);\n const restore = (id: string) => (refs.current.get(id) ?? refs.current.get(currentId) ?? refs.current.get(tabs[0]?.id))?.focus({ preventScroll: true });\n useLayoutEffect(() => {\n if (closing.current && !tabs.some((tab) => tab.id === closing.current)) {\n closing.current = null;\n (refs.current.get(currentId) ?? refs.current.get(tabs[0]?.id))?.focus({ preventScroll: true });\n }\n const node = scroller.current;\n const active = refs.current.get(currentId)?.closest(\"[data-slot='workspace-tab']\");\n if (!node || !active) return;\n const bounds = node.getBoundingClientRect();\n const rect = active.getBoundingClientRect();\n if (rect.left < bounds.left) node.scrollLeft += rect.left - bounds.left;\n else if (rect.right > bounds.right) node.scrollLeft += rect.right - bounds.right;\n }, [currentId, tabs]);\n const close = (tab: WorkspaceTab) => { if (canClose(tab)) { closing.current = tab.id; onClose?.(tab.id); } };\n const move = (tab: WorkspaceTab, target?: WorkspaceTab) => {\n if (!target || tab.id === target.id || Boolean(tab.pinned) !== Boolean(target.pinned)) return;\n onReorder?.(tab.id, target.id);\n restore(tab.id);\n };\n const selectAt = (index: number) => {\n const target = tabs[(index + tabs.length) % tabs.length];\n if (target) { onSelect(target.id); restore(target.id); }\n };\n const menuItems = (tab: WorkspaceTab, index: number) => {\n const items: TabAction[] = [];\n if (onOpenInNewWindow) items.push({ key: \"detach\", label: \"在独立窗口打开\", icon: , disabled: tab.detachable === false, run: () => onOpenInNewWindow(tab.id) });\n if (onPinnedChange) items.push({ key: \"pin\", label: tab.pinned ? \"取消固定\" : \"固定标签\", icon: tab.pinned ? : , run: () => onPinnedChange(tab.id, !tab.pinned) });\n if (onReorder) {\n items.push({ key: \"left\", label: \"向左移动\", icon: , disabled: !tabs[index - 1] || Boolean(tabs[index - 1].pinned) !== Boolean(tab.pinned), run: () => move(tab, tabs[index - 1]) });\n items.push({ key: \"right\", label: \"向右移动\", icon: , disabled: !tabs[index + 1] || Boolean(tabs[index + 1].pinned) !== Boolean(tab.pinned), run: () => move(tab, tabs[index + 1]) });\n }\n if (onClose) items.push({ key: \"close\", label: \"关闭标签\", icon: , disabled: !canClose(tab), run: () => close(tab) });\n return items;\n };\n return
\n \n {/* Each tab owns sibling action buttons; never put controls inside a tab button. */}\n
\n {tabs.map((tab, index) => {\n const selected = tab.id === currentId;\n const items = menuItems(tab, index);\n return ;\n })}\n
\n \n {(onNewTab || actions) &&
\n {onNewTab && }{actions}\n
}\n
;\n}\n" }, { "path": "components/workspace/workspace-sidebar.tsx", "type": "registry:component", "target": "@components/workspace/workspace-sidebar.tsx", "content": "\"use client\";\n// asharca.github.io/ui/components/blocks/workspace-shell\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { PanelLeft, X } from \"lucide-react\";\nimport { useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n AnimatedSidebar, AnimatedSidebarClose, AnimatedSidebarContent,\n AnimatedSidebarFooter, AnimatedSidebarGroup,\n AnimatedSidebarHeader, AnimatedSidebarMenu, AnimatedSidebarMenuButton,\n AnimatedSidebarMenuItem, AnimatedSidebarMenuSub, AnimatedSidebarMenuSubButton,\n AnimatedSidebarMenuSubItem, AnimatedSidebarTrigger, useAnimatedSidebar,\n} from \"@/components/motion/animated-sidebar\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"@/lib/ease\";\nimport { useHoverCapable } from \"@/lib/hooks/use-hover-capable\";\nimport { useOnOpen } from \"@/lib/hooks/use-on-open\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface WorkspaceSidebarItem {\n id: string;\n label: string;\n icon?: ReactNode;\n badge?: ReactNode;\n href?: string;\n disabled?: boolean;\n /** Exactly one nested level. Parents toggle their children instead of navigating. */\n children?: Omit[];\n}\nexport interface WorkspaceSidebarGroup { id: string; title?: string; items: WorkspaceSidebarItem[] }\nexport interface WorkspaceSidebarProps {\n groups: WorkspaceSidebarGroup[];\n activeId?: string;\n onSelect?: (id: string) => void;\n title?: string;\n /** Brand mark rendered in the header instead of the plain title text. */\n logo?: ReactNode;\n footer?: ReactNode;\n className?: string;\n}\n\nfunction WorkspaceNavigationItem({ item, activeId, onSelect, compact }: {\n item: WorkspaceSidebarItem;\n activeId?: string;\n onSelect?: (id: string) => void;\n compact: boolean;\n}) {\n const children = item.children?.length ? item.children : undefined;\n const activeChild = children?.some((child) => child.id === activeId) ?? false;\n const [expanded, setExpanded] = useState(activeChild);\n const [previousActive, setPreviousActive] = useState(activeId);\n if (previousActive !== activeId) {\n setPreviousActive(activeId);\n if (activeChild) setExpanded(true);\n }\n return \n children ? setExpanded((current) => compact || !current) : onSelect?.(item.id)}\n href={children ? undefined : item.href} icon={item.icon} badge={item.badge} disabled={item.disabled}\n className={cn(\"min-h-9 gap-2 overflow-visible rounded-lg px-2 text-xs [&>span:first-child:not([aria-hidden])]:rounded-lg [&>span[aria-hidden=true]]:size-5 [&_svg]:size-[18px] [&>span.absolute]:bg-[var(--workspace-surface,var(--background))]\", activeChild && !compact && \"bg-foreground/5 text-foreground\")}\n >\n {item.label}\n \n {children &&
\n \n {children.map((child) => \n onSelect?.(child.id)}\n className={cn(\"min-h-9 [&_svg]:size-3.5\", activeId === child.id && \"bg-[var(--workspace-surface,var(--background))] font-medium hover:bg-[var(--workspace-surface,var(--background))]\")}\n >\n {child.label}{child.badge != null && {child.badge}}\n \n )}\n \n
}\n ;\n}\n\n/** Composition of beUI primitives, not a second copy of the sidebar engine.\n * The footer stays mounted and interactive while collapsed: hosts put their\n * icon-sized workspace/avatar popovers there and manage their own visibility. */\nexport function WorkspaceSidebar({ groups, activeId, onSelect, title = \"工作区\", logo, footer, className }: WorkspaceSidebarProps) {\n const { open, isMobile } = useAnimatedSidebar();\n const reduced = useReducedMotion() ?? false;\n const compact = !open && !isMobile;\n const canHover = useHoverCapable();\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n useOnOpen(compact, () => setHovered(false));\n const showToggle = !compact || !logo || (canHover && hovered) || focused;\n const toggleRef = useRef(null);\n useLayoutEffect(() => {\n if (compact && document.activeElement instanceof HTMLElement) {\n const panel = toggleRef.current?.closest('[data-slot=\"sidebar\"]');\n if (panel?.getAttribute(\"data-state\") === \"collapsed\" && panel.contains(document.activeElement)) {\n const footer = panel.querySelector('[data-slot=\"sidebar-footer\"]');\n if (!(footer instanceof HTMLElement && footer.contains(document.activeElement))) toggleRef.current?.focus();\n }\n }\n }, [compact]);\n // Opacity must not inherit spring velocity when hover reverses mid-flight.\n const transition = reduced ? { duration: 0 } : {\n ...SPRING_LAYOUT,\n opacity: { type: \"tween\" as const, duration: 0.14, ease: EASE_OUT },\n };\n return \n \n setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n onFocusCapture={(event) => setFocused(event.target.matches(\":focus-visible\"))}\n onBlurCapture={() => setFocused(false)}\n className=\"relative flex w-full flex-row items-center\"\n >\n {isMobile ? (\n <>\n \n {logo && {logo}}\n {title}\n \n \n \n ) : (\n <>\n {logo && \n {logo}\n }\n {/* The reveal edge and trigger share the sidebar's actual width.\n No measured-width spring chasing the sidebar's own spring. */}\n
\n \n {title}\n \n
\n \n \n \n \n \n \n )}\n \n \n \n {groups.map((group) => \n \n {group.items.map((item) => )}\n \n )}\n \n {footer && {footer}}\n ;\n}\n" }, { "path": "components/motion/animated-sidebar.tsx", "type": "registry:component", "target": "@components/motion/animated-sidebar.tsx", "content": "\"use client\";\n\nimport { ChevronRight } from \"lucide-react\";\nimport {\n AnimatePresence,\n type HTMLMotionProps,\n motion,\n useReducedMotion,\n type Variants,\n} from \"motion/react\";\nimport {\n type ButtonHTMLAttributes,\n type CSSProperties,\n createContext,\n forwardRef,\n type HTMLAttributes,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n useSyncExternalStore,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { SharedLayoutBg } from \"@/components/motion/shared-layout-bg\";\nimport {\n EASE_DRAWER,\n EASE_OUT,\n SPRING_LAYOUT,\n SPRING_PRESS,\n} from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\ntype SidebarState = \"expanded\" | \"collapsed\";\ntype SidebarSide = \"left\" | \"right\";\ntype SidebarVariant = \"sidebar\" | \"floating\" | \"inset\";\ntype SidebarCollapsible = \"offcanvas\" | \"icon\" | \"none\";\n\nconst MOBILE_QUERY = \"(max-width: 767px)\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\nconst PANEL_TRANSITION = {\n duration: 0.36,\n ease: EASE_DRAWER,\n} as const;\n\n// The desktop rail settles at a hard zero-width boundary. Keep the spring\n// critically damped so it cannot overshoot, pause against that boundary, and\n// then snap back during the final frame.\nconst SIDEBAR_MORPH_TRANSITION = {\n type: \"spring\",\n stiffness: 380,\n damping: 35,\n mass: 0.75,\n} as const;\n\nconst LABEL_ENTER_TRANSITION = {\n duration: 0.2,\n delay: 0.08,\n ease: EASE_OUT,\n} as const;\n\nconst LABEL_EXIT_TRANSITION = {\n duration: 0.12,\n ease: EASE_OUT,\n} as const;\n\nconst SUBMENU_TRANSITION = {\n duration: 0.18,\n ease: EASE_OUT,\n} as const;\n\nconst SUBMENU_VARIANTS: Variants = {\n closed: {\n opacity: 0,\n clipPath: \"inset(0 0 100% 0 round 8px)\",\n transition: {\n duration: 0.14,\n ease: EASE_OUT,\n staggerChildren: 0.025,\n staggerDirection: -1,\n },\n },\n open: {\n opacity: 1,\n clipPath: \"inset(0 0 0% 0 round 8px)\",\n transition: {\n duration: 0.2,\n delayChildren: 0.035,\n ease: EASE_OUT,\n staggerChildren: 0.045,\n },\n },\n};\n\nconst SUBMENU_ITEM_VARIANTS: Variants = {\n closed: {\n opacity: 0,\n y: -6,\n filter: \"blur(3px)\",\n },\n open: {\n opacity: 1,\n y: 0,\n filter: \"blur(0px)\",\n transition: SUBMENU_TRANSITION,\n },\n};\n\nconst REDUCED_TRANSITION = {\n duration: 0.16,\n ease: EASE_OUT,\n} as const;\n\nconst FOCUSABLE_SELECTOR = [\n \"a[href]\",\n \"button:not([disabled])\",\n \"input:not([disabled])\",\n \"select:not([disabled])\",\n \"textarea:not([disabled])\",\n \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n\nfunction subscribeToMobileQuery(callback: () => void) {\n const query = window.matchMedia(MOBILE_QUERY);\n query.addEventListener(\"change\", callback);\n return () => query.removeEventListener(\"change\", callback);\n}\n\nfunction getMobileSnapshot() {\n return window.matchMedia(MOBILE_QUERY).matches;\n}\n\nfunction getServerMobileSnapshot() {\n return false;\n}\n\nfunction useIsMobile() {\n return useSyncExternalStore(\n subscribeToMobileQuery,\n getMobileSnapshot,\n getServerMobileSnapshot,\n );\n}\n\ninterface AnimatedSidebarContextValue {\n isMobile: boolean;\n layoutId: string;\n open: boolean;\n openMobile: boolean;\n reduce: boolean;\n setOpen: (open: boolean) => void;\n setOpenMobile: (open: boolean) => void;\n state: SidebarState;\n toggleSidebar: () => void;\n triggerRef: React.RefObject;\n}\n\nconst AnimatedSidebarContext =\n createContext(null);\n\ninterface AnimatedSidebarPanelContextValue {\n collapsed: boolean;\n collapsible: SidebarCollapsible;\n side: SidebarSide;\n}\n\nconst AnimatedSidebarPanelContext =\n createContext(null);\n\nexport function useAnimatedSidebar() {\n const context = useContext(AnimatedSidebarContext);\n if (!context) {\n throw new Error(\n \"useAnimatedSidebar must be used inside AnimatedSidebarProvider.\",\n );\n }\n return context;\n}\n\nfunction useAnimatedSidebarPanel() {\n const context = useContext(AnimatedSidebarPanelContext);\n if (!context) {\n throw new Error(\n \"Animated Sidebar parts must be used inside AnimatedSidebar.\",\n );\n }\n return context;\n}\n\ntype SidebarProviderStyle = CSSProperties & {\n \"--sidebar-width\"?: string;\n \"--sidebar-width-icon\"?: string;\n \"--sidebar-width-mobile\"?: string;\n};\n\nexport interface AnimatedSidebarProviderProps\n extends HTMLAttributes {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n openMobile?: boolean;\n defaultOpenMobile?: boolean;\n onOpenMobileChange?: (open: boolean) => void;\n style?: SidebarProviderStyle;\n}\n\nexport function AnimatedSidebarProvider({\n children,\n open,\n defaultOpen = true,\n onOpenChange,\n openMobile,\n defaultOpenMobile = false,\n onOpenMobileChange,\n className,\n style,\n ...props\n}: AnimatedSidebarProviderProps) {\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const [internalOpenMobile, setInternalOpenMobile] =\n useState(defaultOpenMobile);\n const isMobile = useIsMobile();\n const reduce = useReducedMotion() ?? false;\n const generatedId = useId();\n const triggerRef = useRef(null);\n const desktopOpen = open ?? internalOpen;\n const mobileOpen = openMobile ?? internalOpenMobile;\n\n const setOpen = useCallback(\n (nextOpen: boolean) => {\n if (open === undefined) setInternalOpen(nextOpen);\n onOpenChange?.(nextOpen);\n },\n [onOpenChange, open],\n );\n\n const setOpenMobile = useCallback(\n (nextOpen: boolean) => {\n if (openMobile === undefined) setInternalOpenMobile(nextOpen);\n onOpenMobileChange?.(nextOpen);\n },\n [onOpenMobileChange, openMobile],\n );\n\n const toggleSidebar = useCallback(() => {\n if (isMobile) setOpenMobile(!mobileOpen);\n else setOpen(!desktopOpen);\n }, [desktopOpen, isMobile, mobileOpen, setOpen, setOpenMobile]);\n\n useEffect(() => {\n const handleShortcut = (event: KeyboardEvent) => {\n if (\n event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener(\"keydown\", handleShortcut);\n return () => window.removeEventListener(\"keydown\", handleShortcut);\n }, [toggleSidebar]);\n\n return (\n \n \n {children}\n \n \n );\n}\n\nfunction MobileSidebar({\n ariaLabel,\n children,\n className,\n side,\n}: {\n ariaLabel: string;\n children: ReactNode;\n className?: string;\n side: SidebarSide;\n}) {\n const context = useAnimatedSidebar();\n const panelRef = useRef(null);\n const [mounted, setMounted] = useState(false);\n // The sheet is mounted for as long as the viewport is mobile, so it hides\n // itself while closed rather than sitting there transparent and interactive.\n // Opening shows it in the same commit that starts the slide — a delayed show\n // would run the focus effect below against a still-hidden panel, and focus()\n // on a hidden element is ignored. Closing waits for the slide to finish, and\n // the panel's own exit tells us when that is: no duration to keep in sync.\n const [hidden, setHidden] = useState(!context.openMobile);\n // The completion callback fires for the open slide too, and it reads state\n // from whenever motion settles: a ref keeps it on the current one.\n const openMobileRef = useRef(context.openMobile);\n\n useEffect(() => setMounted(true), []);\n\n useEffect(() => {\n openMobileRef.current = context.openMobile;\n if (context.openMobile) setHidden(false);\n }, [context.openMobile]);\n\n useEffect(() => {\n if (!context.openMobile) return;\n\n const body = document.body;\n const scrollY = window.scrollY;\n const previousBodyStyles = {\n left: body.style.left,\n overflow: body.style.overflow,\n position: body.style.position,\n right: body.style.right,\n top: body.style.top,\n };\n\n body.style.position = \"fixed\";\n body.style.top = `-${scrollY}px`;\n body.style.left = \"0\";\n body.style.right = \"0\";\n body.style.overflow = \"hidden\";\n\n const focusFrame = requestAnimationFrame(() => {\n const firstFocusable =\n panelRef.current?.querySelector(FOCUSABLE_SELECTOR);\n (firstFocusable ?? panelRef.current)?.focus({ preventScroll: true });\n });\n\n return () => {\n cancelAnimationFrame(focusFrame);\n body.style.position = previousBodyStyles.position;\n body.style.top = previousBodyStyles.top;\n body.style.left = previousBodyStyles.left;\n body.style.right = previousBodyStyles.right;\n body.style.overflow = previousBodyStyles.overflow;\n window.scrollTo(0, scrollY);\n context.triggerRef.current?.focus({ preventScroll: true });\n };\n }, [context.openMobile, context.triggerRef]);\n\n if (!mounted) return null;\n\n // This container groups the sheet for hiding and the z-index and carries no\n // box: both children are `fixed` and resolve against the viewport themselves.\n // The scrim spans the viewport edges but paints a colour, and the panel is\n // inset off one side and paints its own surface, so no layer here is a\n // transparent edge-spanning one. See tests/fixed-overlay-edge-sampling.test.tsx.\n return createPortal(\n