{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "panel",
  "type": "registry:ui",
  "title": "Panel",
  "description": "Titled card panel with header bar, action slot and status indicator.",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "card",
    "badge",
    "utils"
  ],
  "files": [
    {
      "path": "registry/blacksite/ui/panel.tsx",
      "type": "registry:ui",
      "target": "components/ui/panel.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { StatusBadge, type StatusBadgeProps } from \"@/registry/blacksite/ui/status-badge\";\n\ninterface PanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Panel title (rendered uppercase + monospace). */\n  title?: React.ReactNode;\n  /** Optional secondary title segment after a slash divider. */\n  subtitle?: React.ReactNode;\n  /** Status badge shown on the right of the header. */\n  status?: StatusBadgeProps[\"status\"];\n  /** Custom slot for header right-side controls. */\n  actions?: React.ReactNode;\n  /** Show a close (X) button. */\n  closable?: boolean;\n  onClose?: () => void;\n  /** Density: \"default\" 16px padding, \"compact\" 12px. */\n  density?: \"default\" | \"compact\";\n  /** Hide the inner padding (e.g. for full-bleed maps/charts). */\n  bleed?: boolean;\n}\n\nconst Panel = React.forwardRef<HTMLDivElement, PanelProps>(\n  (\n    {\n      className,\n      title,\n      subtitle,\n      status,\n      actions,\n      closable,\n      onClose,\n      density = \"default\",\n      bleed = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <section\n        ref={ref}\n        className={cn(\n          \"border-border bg-card text-card-foreground relative flex flex-col rounded-md border\",\n          \"overflow-hidden shadow-[var(--shadow-panel)]\",\n          className,\n        )}\n        {...props}\n      >\n        {(title || actions || status || closable) && (\n          <header\n            className={cn(\n              \"border-border flex items-center justify-between gap-3 border-b\",\n              density === \"compact\" ? \"h-8 px-2.5\" : \"h-9 px-3\",\n            )}\n          >\n            <div className=\"flex min-w-0 items-center gap-2\">\n              {title && (\n                <h3 className=\"text-mono text-foreground-muted truncate text-[11px] tracking-[0.1em] uppercase\">\n                  {title}\n                  {subtitle && <span className=\"text-foreground-subtle\"> / {subtitle}</span>}\n                </h3>\n              )}\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {actions}\n              {status && <StatusBadge status={status} />}\n              {closable && (\n                <button\n                  type=\"button\"\n                  aria-label=\"Close panel\"\n                  onClick={onClose}\n                  className=\"text-foreground-subtle hover:text-foreground transition-colors\"\n                >\n                  <X className=\"size-3.5\" />\n                </button>\n              )}\n            </div>\n          </header>\n        )}\n        <div className={cn(\"min-h-0 flex-1\", !bleed && (density === \"compact\" ? \"p-2.5\" : \"p-3\"))}>\n          {children}\n        </div>\n      </section>\n    );\n  },\n);\nPanel.displayName = \"Panel\";\n\nexport { Panel };\nexport type { PanelProps };\n"
    }
  ]
}