{
  "name": "frame",
  "type": "registry:ui",
  "title": "Frame",
  "description": "Frame structures app surfaces such as settings panels, statistics, lists, and empty states.",
  "registryDependencies": [
    "@siteplane/base"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "src/components/ui/frame.tsx",
      "type": "registry:ui",
      "content": "import type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function Frame({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative flex flex-col rounded-2xl bg-muted/72 p-1\",\n        \"*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1\",\n        className,\n      )}\n      data-slot=\"frame\"\n      {...props}\n    />\n  );\n}\n\nexport function FramePanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative rounded-xl border bg-background bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"frame-panel\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"header\">): React.ReactElement {\n  return (\n    <header\n      className={cn(\"flex flex-col px-5 py-4\", className)}\n      data-slot=\"frame-panel-header\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"font-semibold text-sm\", className)}\n      data-slot=\"frame-panel-title\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"frame-panel-description\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"footer\">): React.ReactElement {\n  return (\n    <footer\n      className={cn(\"px-5 py-4\", className)}\n      data-slot=\"frame-panel-footer\"\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "categories": [
    "layout"
  ],
  "docs": "# Frame\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nFrame structures app surfaces such as settings panels, statistics, lists, and\nempty states. It provides a muted outer shell and one or more surfaced panels.\n\n## Import\n\n```tsx\nimport {\n  Frame,\n  FrameDescription,\n  FrameFooter,\n  FrameHeader,\n  FramePanel,\n  FrameTitle,\n} from \"@/components/ui/frame\";\n```\n\n## Public API\n\n- `Frame` is the outer shell and `FramePanel` is the bordered surface.\n- Multiple direct FramePanel children stack with the native panel gap.\n- Use Header, Title, Description, and Footer as the intended content slots.\n- Compose semantic content inside the panel; Frame does not replace forms,\n  lists, headings, or landmarks.\n\n## Public Motion\n\n- Frame has no animation.\n- Child controls and overlays retain their native motion.\n- Preserve native radius, border, background, and inset-shadow treatment.\n\n## Public Accessibility\n\n- Use headings and landmarks appropriate to the content inside Frame.\n- Keep actions as real Button or link controls with visible focus.\n- Do not rely on the surface boundary alone to explain relationships.\n- Empty-state content inside Frame follows the Empty component contract.\n\n## Public Agent Guidance\n\n- Use FramePanel for the actual surfaced content.\n- Do not create parallel shell or panel primitives.\n- Keep native slots and surface styling intact.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/layout/frame)\n\n- [Registry source](https://ui.siteplane.io/r/frame.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/components/layout/frame",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}