{
  "name": "dashboard-shell",
  "type": "registry:block",
  "title": "Dashboard Shell",
  "description": "A dashboard layout with Sidebar, app header and dedicated content scroll region.",
  "registryDependencies": [
    "@siteplane/base",
    "@siteplane/sidebar"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "src/components/patterns/dashboard-shell.tsx",
      "type": "registry:block",
      "target": "components/patterns/dashboard-shell.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\";\nimport { cn } from \"@/lib/utils\";\n\ntype DashboardShellStyle = React.CSSProperties & {\n  \"--dashboard-shell-header-height\"?: string;\n};\n\nexport interface DashboardShellHeaderProps extends React.ComponentProps<\"header\"> {\n  divider?: boolean;\n}\n\nexport function DashboardShell({\n  className,\n  style,\n  ...props\n}: React.ComponentProps<typeof SidebarProvider>): React.ReactElement {\n  return (\n    <SidebarProvider\n      className={cn(\"min-h-svh\", className)}\n      data-dashboard-shell=\"root\"\n      style={\n        {\n          \"--dashboard-shell-header-height\": \"4rem\",\n          ...style,\n        } as DashboardShellStyle\n      }\n      {...props}\n    />\n  );\n}\n\nexport function DashboardShellSidebar({\n  className,\n  collapsible = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Sidebar>): React.ReactElement {\n  return (\n    <Sidebar\n      className={className}\n      collapsible={collapsible}\n      data-dashboard-shell=\"sidebar\"\n      {...props}\n    />\n  );\n}\n\nexport function DashboardShellSidebarHeader({\n  className,\n  ...props\n}: React.ComponentProps<typeof SidebarHeader>): React.ReactElement {\n  return (\n    <SidebarHeader\n      className={cn(\n        \"min-h-(--dashboard-shell-header-height) shrink-0 px-2 py-2\",\n        className,\n      )}\n      data-dashboard-shell=\"sidebar-header\"\n      data-slot=\"sidebar-header\"\n      {...props}\n    />\n  );\n}\n\nexport function DashboardShellInset({\n  className,\n  ...props\n}: React.ComponentProps<typeof SidebarInset>): React.ReactElement {\n  return (\n    <SidebarInset\n      className={cn(\"min-w-0 overflow-hidden\", className)}\n      data-dashboard-shell=\"inset\"\n      {...props}\n    />\n  );\n}\n\nexport function DashboardShellHeader({\n  className,\n  divider = true,\n  ...props\n}: DashboardShellHeaderProps): React.ReactElement {\n  return (\n    <header\n      className={cn(\n        \"flex min-h-(--dashboard-shell-header-height) shrink-0 items-center gap-2 bg-background px-4\",\n        divider ? \"border-b\" : \"border-b-0\",\n        className,\n      )}\n      data-dashboard-shell=\"header\"\n      {...props}\n    />\n  );\n}\n\nexport function DashboardShellMain({\n  className,\n  ...props\n}: React.ComponentProps<\"main\">): React.ReactElement {\n  return (\n    <main\n      className={cn(\"min-h-0 flex-1 overflow-auto p-4\", className)}\n      data-dashboard-shell=\"main\"\n      {...props}\n    />\n  );\n}\n\nexport { SidebarTrigger as DashboardShellSidebarTrigger };\n"
    }
  ],
  "categories": [
    "patterns"
  ],
  "docs": "# Dashboard Shell\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nDashboard Shell is a `registry:block` for product surfaces that combine the native Siteplane Sidebar with an app header and a dedicated content scroll region.\n\nUse it when sidebar and app-header geometry must stay aligned. The shell owns layout only; navigation, team switchers, account controls and footer content remain consumer compositions built from installed primitives.\n\n## Import\n\n```tsx\nimport {\n  DashboardShell,\n  DashboardShellHeader,\n  DashboardShellInset,\n  DashboardShellMain,\n  DashboardShellSidebar,\n  DashboardShellSidebarHeader,\n  DashboardShellSidebarTrigger,\n} from \"@/components/patterns/dashboard-shell\";\n```\n\n## Public API\n\n- `DashboardShell` renders the native `SidebarProvider` and defaults `--dashboard-shell-header-height` to `4rem`.\n- `DashboardShellSidebar` renders the native Sidebar and defaults to `collapsible=\"icon\"`.\n- `DashboardShellSidebarHeader` and `DashboardShellHeader` share the same minimum-height variable so their top edge and height remain aligned.\n- The visible header divider belongs to `DashboardShellHeader`. Do not add a second divider directly below the sidebar header.\n- `DashboardShellHeader` accepts `divider={false}` when the app header should not separate from the main region.\n- `DashboardShellInset` uses the native `SidebarInset` and contains horizontal overflow. `DashboardShellMain` owns content scrolling.\n- Render `SidebarMenuButton` labels in child elements such as `<span>` and provide a `tooltip` in icon-collapse mode.\n\n## Public Motion\n\n- Sidebar collapse, mobile behavior and nested navigation motion remain native to the Sidebar primitive.\n- The shell adds no route or content entrance animation. Reduced-motion behavior comes from the primitives it composes.\n\n## Public Accessibility\n\n- Use the native Sidebar trigger so its keyboard shortcut, focus behavior and screen-reader label remain intact.\n- Keep the header and main content as separate regions. The header stays fixed while the main region owns content scrolling.\n- Preserve a readable label and native tooltip contract for every icon-only item in collapsed navigation.\n\n## Public Agent Guidance\n\n- Start with Dashboard Shell for product layouts that require both Sidebar and an aligned app header.\n- Do not rebuild Sidebar internals or create separate hardcoded header heights in the consumer.\n- Reusable shell changes belong in this pattern source; product-specific navigation and account content stay outside the pattern.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/patterns/dashboard-shell)\n\n- [Registry source](https://ui.siteplane.io/r/dashboard-shell.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/patterns/dashboard-shell",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}