{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "detail-sheet",
  "title": "Detail Sheet",
  "description": "Read-only or quick-action detail beside a list, with a fixed header and footer.",
  "registryDependencies": [
    "@waimakers/id-token",
    "@waimakers/sheet",
    "@waimakers/status-badge",
    "@waimakers/technical-details"
  ],
  "files": [
    {
      "path": "src/components/ui/detail-sheet.tsx",
      "content": "import { useRef, type ReactNode, type RefObject } from \"react\";\nimport { TechnicalDetails } from \"./technical-details\";\nimport { IdToken } from \"./id-token\";\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n} from \"./sheet\";\nimport { StatusBadge, type Tone } from \"./status-badge\";\n\nfunction DetailSheet({\n  open,\n  onOpenChange,\n  title,\n  identifier,\n  identifierLabel = \"Identifier\",\n  identifierPlacement = \"header\",\n  status,\n  description,\n  children,\n  primaryAction,\n  fullPageLink,\n  returnFocus,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: ReactNode;\n  identifier: string;\n  identifierLabel?: string;\n  identifierPlacement?: \"header\" | \"technical-details\";\n  status?: { label: string; tone: Tone; className?: string };\n  description?: ReactNode;\n  children: ReactNode;\n  primaryAction?: ReactNode;\n  fullPageLink?: ReactNode;\n  returnFocus?: RefObject<HTMLElement | null>;\n}) {\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent\n        side=\"right\"\n        size=\"lg\"\n        showCloseButton\n        finalFocus={returnFocus}\n        initialFocus={titleRef}\n        className=\"gap-0 overflow-hidden p-0\"\n      >\n        <SheetHeader className=\"shrink-0 border-b border-border p-6 pr-12\">\n          <SheetTitle ref={titleRef} tabIndex={-1} className=\"break-words text-2xl outline-none\">\n            {title}\n          </SheetTitle>\n          {description && <SheetDescription>{description}</SheetDescription>}\n          {(status || identifierPlacement === \"header\") && (\n            <div className=\"flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 pt-2\">\n              {status && <StatusBadge {...status} />}\n              {identifierPlacement === \"header\" && (\n                <IdToken value={identifier} label={identifierLabel} />\n              )}\n            </div>\n          )}\n        </SheetHeader>\n        <div data-slot=\"detail-sheet-body\" className=\"min-h-0 flex-1 space-y-6 overflow-y-auto p-6\">\n          {children}\n          {identifierPlacement === \"technical-details\" && (\n            <TechnicalDetails storageKey={`sheet-${identifier}`}>\n              <IdToken value={identifier} label={identifierLabel} />\n            </TechnicalDetails>\n          )}\n        </div>\n        {(primaryAction || fullPageLink) && (\n          <SheetFooter className=\"shrink-0 border-t border-border px-6 py-4\">\n            {fullPageLink}\n            {primaryAction}\n          </SheetFooter>\n        )}\n      </SheetContent>\n    </Sheet>\n  );\n}\nexport { DetailSheet };\n",
      "type": "registry:ui",
      "target": "components/ui/detail-sheet.tsx"
    }
  ],
  "type": "registry:block"
}