{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "app-shell", "type": "registry:component", "title": "App shell", "description": "Sidebar column, content frame with a slim banner slot, mobile bar and navigation sheet; no top bar.", "registryDependencies": [ "@wibo/utils", "@wibo/sheet", "@wibo/tooltip" ], "files": [ { "path": "src/shell/app-shell.tsx", "type": "registry:component", "content": "import {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type AnchorHTMLAttributes,\n type ComponentProps,\n type ComponentType,\n type ReactNode,\n} from \"react\";\nimport { Menu } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Sheet, SheetContent, SheetDescription, SheetTitle } from \"@/components/ui/sheet\";\nimport { TooltipProvider } from \"@/components/ui/tooltip\";\n\n/**\n * A router link component (for example Next's `Link`). Packages never import\n * a router: the app passes its link component to `AppShell` once.\n */\ntype LinkComponent = ComponentType & { href: string }>;\n\n/**\n * The router's pending state of the link it is called under (Next's\n * `useLinkStatus` from `next/link`). Called inside the rendered link only.\n */\ntype LinkStatusHook = () => { pending: boolean };\n\ninterface AppShellContextValue {\n /** Desktop sidebar reduced to an icon rail. */\n collapsed: boolean;\n setCollapsed: (collapsed: boolean) => void;\n toggleCollapsed: () => void;\n /** Mobile navigation sheet. */\n mobileOpen: boolean;\n setMobileOpen: (open: boolean) => void;\n linkComponent: LinkComponent | \"a\";\n useLinkStatus: LinkStatusHook;\n}\n\nconst AppShellContext = createContext(null);\n\n/** Where a sidebar is rendered: the desktop column or the mobile sheet. */\nconst SidebarPlacementContext = createContext<\"desktop\" | \"sheet\">(\"desktop\");\n\nconst noLinkStatus: LinkStatusHook = () => ({ pending: false });\n\nconst fallbackContext: AppShellContextValue = {\n collapsed: false,\n setCollapsed: () => {},\n toggleCollapsed: () => {},\n mobileOpen: false,\n setMobileOpen: () => {},\n linkComponent: \"a\",\n useLinkStatus: noLinkStatus,\n};\n\n/** Shell state for sidebar, topbar and nav items. Works outside `AppShell` with inert defaults. */\nfunction useAppShell(): AppShellContextValue {\n return useContext(AppShellContext) ?? fallbackContext;\n}\n\nfunction useSidebarPlacement(): \"desktop\" | \"sheet\" {\n return useContext(SidebarPlacementContext);\n}\n\ninterface AppShellProps extends Omit, \"children\"> {\n /** A `Sidebar` element. Rendered in the left column on desktop and in a sheet on mobile. */\n sidebar: ReactNode;\n /**\n * Optional bar across the top of the content frame (`Topbar`). The\n * dashboards pass none: the page header carries the breadcrumb, and below\n * `md` the shell draws its own mobile bar with the menu button.\n */\n topbar?: ReactNode;\n /** Slim banner at the top of the content frame, above the page: `StaffBanner`. */\n banner?: ReactNode;\n /** Name shown next to the menu button in the mobile bar (the product or workspace). */\n mobileTitle?: ReactNode;\n children: ReactNode;\n collapsed?: boolean;\n defaultCollapsed?: boolean;\n onCollapsedChange?: (collapsed: boolean) => void;\n linkComponent?: LinkComponent;\n /** The router's link status hook (Next: `useLinkStatus`), for instant feedback on clicked nav rows. */\n useLinkStatus?: LinkStatusHook;\n /** Accessible name of the mobile navigation sheet. */\n navigationLabel?: string;\n /** Accessible name of the mobile menu button. */\n openNavigationLabel?: string;\n /** Accessible name of the close button of the phone navigation sheet. */\n closeNavigationLabel?: string;\n skipLinkLabel?: string;\n}\n\n/**\n * Product layout in the Mastra Studio arrangement: the sidebar sits on the\n * darkest surface, the page lives in a raised frame inset by 8 px on the\n * other three sides. No top bar: the signed-in user sits at the foot of the\n * sidebar and each page carries its own breadcrumb (`PageHeader`). Below\n * `md` a slim bar holds the menu button that opens the sidebar in a sheet.\n * Sidebar 240 px wide, 64 px as an icon rail.\n */\nfunction AppShell({\n sidebar,\n topbar,\n banner,\n mobileTitle,\n children,\n collapsed: collapsedProp,\n defaultCollapsed = false,\n onCollapsedChange,\n linkComponent,\n useLinkStatus,\n navigationLabel = \"Navigation\",\n openNavigationLabel = \"Open navigation\",\n closeNavigationLabel = \"Close\",\n skipLinkLabel = \"Skip to content\",\n className,\n ...props\n}: AppShellProps) {\n const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);\n const [mobileOpen, setMobileOpen] = useState(false);\n const collapsed = collapsedProp ?? internalCollapsed;\n\n const setCollapsed = useCallback(\n (next: boolean) => {\n if (collapsedProp === undefined) setInternalCollapsed(next);\n onCollapsedChange?.(next);\n },\n [collapsedProp, onCollapsedChange],\n );\n\n const value = useMemo(\n () => ({\n collapsed,\n setCollapsed,\n toggleCollapsed: () => setCollapsed(!collapsed),\n mobileOpen,\n setMobileOpen,\n linkComponent: linkComponent ?? \"a\",\n useLinkStatus: useLinkStatus ?? noLinkStatus,\n }),\n [collapsed, setCollapsed, mobileOpen, linkComponent, useLinkStatus],\n );\n\n return (\n \n \n \n \n {skipLinkLabel}\n \n
\n \n {sidebar}\n
\n \n \n {navigationLabel}\n {navigationLabel}\n {sidebar}\n \n \n
\n \n {banner}\n {topbar ?? (\n \n setMobileOpen(true)}\n aria-label={openNavigationLabel}\n className=\"press-icon inline-flex size-8.5 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-foreground/4 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 [&_svg]:size-4\"\n >\n \n \n {mobileTitle ? (\n {mobileTitle}\n ) : null}\n
\n )}\n \n {children}\n \n \n \n \n \n \n \n );\n}\n\nexport { AppShell, useAppShell, useSidebarPlacement };\nexport type { AppShellContextValue, AppShellProps, LinkComponent, LinkStatusHook };\n" } ], "dependencies": [ "lucide-react" ] }