{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "app-shell",
  "title": "App Shell",
  "description": "Composable application frame for sidebar, header, and main content.",
  "registryDependencies": [
    "https://zeron-ui.vercel.app/r/surfaces.json",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/ui/app-shell.tsx",
      "content": "\"use client\";\n\nimport { forwardRef, type ComponentPropsWithoutRef, type CSSProperties, type Ref } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AppShellLayout = \"sidebar\" | \"stacked\";\nexport type AppShellSidebarSide = \"left\" | \"right\";\n\nexport interface AppShellProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** `sidebar` lays out a persistent side region beside the main column.\n   * `stacked` places the header above the main region. */\n  layout?: AppShellLayout;\n}\n\nexport interface AppShellSidebarProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** The sidebar edge in the `sidebar` layout. */\n  side?: AppShellSidebarSide;\n  /** The persistent sidebar track width. */\n  width?: CSSProperties[\"width\"];\n}\nexport type AppShellHeaderProps = ComponentPropsWithoutRef<\"header\">;\nexport interface AppShellMainProps extends ComponentPropsWithoutRef<\"main\"> {\n  /**\n   * Set false only when an AppShell is embedded in another document landmark,\n   * such as a component preview. Application shells should keep the default.\n   */\n  landmark?: boolean;\n}\n\nconst AppShell = forwardRef<HTMLDivElement, AppShellProps>(\n  ({ layout = \"sidebar\", className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"app-shell\"\n      data-layout={layout}\n      className={cn(\n        \"min-h-svh min-w-0 bg-surface-base\",\n        layout === \"sidebar\"\n          ? [\n              \"grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)]\",\n              \"[&:not(:has(>_[data-slot=app-shell-header]))>_[data-slot=app-shell-main]]:row-span-2\",\n              \"[&:has(>_[data-slot=app-shell-sidebar][data-side=right])]:grid-cols-[minmax(0,1fr)_auto]\",\n              \"[&:has(>_[data-slot=app-shell-sidebar][data-side=right])>_[data-slot=app-shell-header]]:col-start-1\",\n              \"[&:has(>_[data-slot=app-shell-sidebar][data-side=right])>_[data-slot=app-shell-main]]:col-start-1\",\n            ]\n          : \"flex flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n);\n\nAppShell.displayName = \"AppShell\";\n\nconst AppShellSidebar = forwardRef<HTMLDivElement, AppShellSidebarProps>(\n  ({ side = \"left\", width = \"260px\", className, style, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"app-shell-sidebar\"\n      data-side={side}\n      className={cn(\n        \"col-start-1 row-span-2 min-h-0 w-[var(--app-shell-sidebar-width)] data-[side=right]:col-start-2\",\n        \"max-xl:w-0 [&:has(>_[data-slot=sidebar][data-collapsible=offcanvas][data-state=collapsed])]:w-0\",\n        className\n      )}\n      style={{ \"--app-shell-sidebar-width\": width, ...style } as CSSProperties}\n      {...props}\n    />\n  )\n);\n\nAppShellSidebar.displayName = \"AppShellSidebar\";\n\nconst AppShellHeader = forwardRef<HTMLElement, AppShellHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <header\n      ref={ref}\n      data-slot=\"app-shell-header\"\n      className={cn(\"col-start-2 sticky top-0 z-raised min-w-0\", className)}\n      {...props}\n    />\n  )\n);\n\nAppShellHeader.displayName = \"AppShellHeader\";\n\nconst AppShellMain = forwardRef<HTMLElement, AppShellMainProps>(\n  ({ landmark = true, className, ...props }, ref) => {\n    const Main = landmark ? \"main\" : \"div\";\n    return <Main ref={ref as Ref<HTMLDivElement>} data-slot=\"app-shell-main\" className={cn(\"col-start-2 min-h-0 min-w-0 flex-1\", className)} {...props} />;\n  }\n);\n\nAppShellMain.displayName = \"AppShellMain\";\n\nexport { AppShell, AppShellSidebar, AppShellHeader, AppShellMain };\n",
      "type": "registry:ui",
      "target": "components/ui/app-shell.tsx"
    }
  ],
  "type": "registry:ui"
}