{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "panel",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://usva.build/r/card.json",
    "https://usva.build/r/spinner.json"
  ],
  "files": [
    {
      "path": "panel.tsx",
      "target": "components/ui/panel.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  type CardSurface,\n  SURFACE_ELEVATED,\n  SURFACE_SKIN,\n} from \"./card\";\nimport { Spinner } from \"./spinner\";\n\nexport interface PanelProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  title: React.ReactNode;\n  badge?: React.ReactNode;\n  actions?: React.ReactNode;\n  loading?: boolean;\n  /** Replaces the default centered spinner while `loading`. */\n  loadingSlot?: React.ReactNode;\n  /** How the panel sits on the page. Defaults to elevated. */\n  surface?: CardSurface;\n}\n\n/**\n * The dashboard panel. A full-height card with a mono eyebrow header, an icon\n * tile, badge/actions slots, and a loading state. Built to live in a grid cell:\n * it fills its box and scrolls its body. usva's \"usability pole\" workhorse.\n */\nexport const Panel = React.forwardRef<HTMLDivElement, PanelProps>(\n  (\n    {\n      className,\n      icon,\n      eyebrow,\n      title,\n      badge,\n      actions,\n      loading = false,\n      loadingSlot,\n      surface = \"elevated\",\n      children,\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      data-surface={surface}\n      className={cn(\n        \"relative flex h-full min-h-0 w-full flex-col overflow-hidden rounded-2xl border border-border text-ink\",\n        SURFACE_SKIN[surface],\n        SURFACE_ELEVATED[surface] && \"shadow-floating\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3\">\n        <div className=\"flex min-w-0 flex-1 items-center gap-2.5\">\n          {icon != null && (\n            <span className=\"grid size-8 shrink-0 place-items-center rounded-lg border border-border bg-surface-2 text-muted [&_svg]:h-4 [&_svg]:w-4\">\n              {icon}\n            </span>\n          )}\n          <div className=\"min-w-0\">\n            {eyebrow != null && (\n              <p className=\"font-mono text-[0.625rem] font-semibold uppercase leading-none tracking-[0.12em] text-muted\">\n                {eyebrow}\n              </p>\n            )}\n            <div className=\"mt-1 truncate text-sm font-semibold tracking-[-0.01em] text-ink\">\n              {title}\n            </div>\n          </div>\n        </div>\n        {(badge != null || actions != null) && (\n          <div className=\"flex shrink-0 items-center gap-2\">\n            {badge}\n            {actions}\n          </div>\n        )}\n      </div>\n\n      <div className=\"min-h-0 flex-1 overflow-y-auto p-4\">\n        {loading\n          ? (loadingSlot ?? (\n              <div className=\"grid h-full min-h-24 place-items-center\">\n                <Spinner />\n              </div>\n            ))\n          : children}\n      </div>\n    </div>\n  ),\n);\nPanel.displayName = \"Panel\";\n"
    }
  ]
}