{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-layout",
  "title": "Dashboard Layout",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/dashboard-layout/DashboardLayout.tsx",
      "content": "'use client'\n\n// Full dashboard shell — collapsible sidebar + sticky topbar (sidebar\n// trigger, breadcrumb, theme switch, notifications) + main content\n// children. Drop it around a page: `<DashboardLayout>{page}</DashboardLayout>`.\n//\n// NOTE (React port): the Vue original composes the `sidebar-02`,\n// `command-palette`, and `notifications-popover` blocks, which don't yet\n// exist in the React registry. Until they're ported, the sidebar body is a\n// minimal inline nav and notifications is a plain Bell button. Swap them for\n// the dedicated blocks once available — the topbar/inset structure here is\n// the faithful 1:1 of the Vue shell.\nimport * as React from 'react'\nimport { Bell, LayoutDashboard, Users, Settings } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/components/ui/breadcrumb'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/components/ui/sidebar'\nimport { ThemeSwitch } from '@/components/ui/theme-switch'\n\ninterface Crumb {\n  label: string\n  href?: string\n}\n\nexport interface DashboardLayoutProps {\n  breadcrumbs?: Crumb[]\n  user?: { name: string; email: string; avatar?: string }\n  onProfileSelect?: (key: string) => void\n  onCommandSelect?: (item: { label: string; hint?: string }) => void\n  children?: React.ReactNode\n}\n\nconst NAV = [\n  { label: 'Dashboard', icon: LayoutDashboard },\n  { label: 'People', icon: Users },\n  { label: 'Settings', icon: Settings },\n]\n\nexport function DashboardLayout({\n  breadcrumbs = [{ label: 'Dashboard' }],\n  children,\n}: DashboardLayoutProps) {\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader />\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {NAV.map((item) => (\n                  <SidebarMenuItem key={item.label}>\n                    <SidebarMenuButton tooltip={item.label}>\n                      <item.icon />\n                      <span>{item.label}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between border-b px-4 backdrop-blur-xl transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                {breadcrumbs.map((crumb, i) => (\n                  <React.Fragment key={i}>\n                    <BreadcrumbItem className={i === 0 ? 'hidden md:block' : ''}>\n                      {crumb.href && i < breadcrumbs.length - 1 ? (\n                        <BreadcrumbLink\n                          href={crumb.href}\n                          className=\"text-muted-foreground/70 hover:text-foreground transition-colors\"\n                        >\n                          {crumb.label}\n                        </BreadcrumbLink>\n                      ) : (\n                        <BreadcrumbPage className=\"font-medium\">{crumb.label}</BreadcrumbPage>\n                      )}\n                    </BreadcrumbItem>\n                    {i < breadcrumbs.length - 1 && (\n                      <BreadcrumbSeparator className={i === 0 ? 'hidden md:block' : ''} />\n                    )}\n                  </React.Fragment>\n                ))}\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"flex items-center gap-1 px-2 sm:gap-3\">\n            <div className=\"flex items-center gap-0.5\">\n              <ThemeSwitch variant=\"icon-only\" />\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"text-muted-foreground hover:text-foreground relative size-8 rounded-lg\"\n                aria-label=\"Notifications\"\n              >\n                <Bell className=\"size-4\" />\n              </Button>\n              {/* ProfileMenu removed from header: the sidebar's NavUser\n                  footer already owns the profile/account affordance. The\n                  block still accepts a `user` prop + `onProfileSelect` so\n                  consumers can wire those into the sidebar or a custom slot. */}\n            </div>\n          </div>\n        </header>\n        <main className=\"flex flex-1 flex-col px-4 pt-4 pb-4 lg:px-6 lg:pt-6 lg:pb-6\">{children}</main>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/DashboardLayout.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/sidebar-02.json",
    "https://uipkge.dev/r/react/command-palette.json",
    "https://uipkge.dev/r/react/notifications-popover.json",
    "https://uipkge.dev/r/react/theme-switch.json",
    "https://uipkge.dev/r/react/use-theme.json",
    "https://uipkge.dev/r/react/sidebar.json",
    "https://uipkge.dev/r/react/breadcrumb.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Full dashboard shell — collapsible sidebar + sticky topbar (sidebar trigger, breadcrumb, theme switch, notifications) + main content children. Drop it around a page: `<DashboardLayout>{page}</DashboardLayout>`.",
  "categories": [
    "dashboard",
    "layout"
  ]
}