{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-permission-grant",
  "type": "registry:component",
  "title": "Permission grant",
  "description": "Granting a capability rather than approving one action, with the reach spelled out.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/permission-grant.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { KeyRoundIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { field, inkButton, mono, paper } from \"./surfaces\";\n\nexport type GrantScope = \"session\" | \"always\" | \"denied\";\n\nexport function PermissionGrant({\n  capability,\n  requester,\n  reach,\n  scope,\n  onGrant,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"capability\" | \"requester\" | \"reach\" | \"scope\" | \"onGrant\"\n> & {\n  capability: string;\n  requester: string;\n  reach: readonly string[];\n  scope: GrantScope | \"pending\";\n  onGrant?: (scope: GrantScope) => void;\n}) {\n  return (\n    <div\n      data-slot=\"permission-grant\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-sm flex-col gap-3.5 rounded-[20px] p-4\",\n        className,\n      )}\n\n      {...props}\n    >\n      <div className=\"flex items-center gap-2.5\">\n        <span className=\"bg-foreground/[0.05] text-foreground/45 flex size-7 shrink-0 items-center justify-center rounded-lg\">\n          <KeyRoundIcon className=\"size-3.5\" />\n        </span>\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <span className=\"truncate text-[13.5px] font-medium\">\n            {capability}\n          </span>\n          <span className=\"text-foreground/45 truncate text-xs\">\n            requested by {requester}\n          </span>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-1\">\n        <span className={cn(mono, \"text-foreground/30\")}>this grants</span>\n        {reach.map((item) => (\n          <span\n            key={item}\n            className=\"text-foreground/60 flex items-baseline gap-2 text-xs\"\n          >\n            <span\n              aria-hidden\n              className=\"bg-foreground/20 size-1 rounded-full\"\n            />\n            {item}\n          </span>\n        ))}\n      </div>\n\n      <div className=\"flex h-8 items-center justify-end gap-2\">\n        {scope === \"pending\" ? (\n          <>\n            <button\n              type=\"button\"\n              onClick={() => onGrant?.(\"denied\")}\n              className=\"text-foreground/55 hover:bg-foreground/[0.06] hover:text-foreground/90 h-8 rounded-full px-3 text-xs font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]\"\n            >\n              Deny\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onGrant?.(\"session\")}\n              className=\"text-foreground/55 hover:bg-foreground/[0.06] hover:text-foreground/90 h-8 rounded-full px-3 text-xs font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]\"\n            >\n              This session\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onGrant?.(\"always\")}\n              className={cn(\n                inkButton,\n                \"flex h-8 items-center rounded-full px-3 text-xs font-medium\",\n              )}\n            >\n              Always\n            </button>\n          </>\n        ) : (\n          <span\n            key={scope}\n            className={cn(\n              field,\n              mono,\n              \"fade-in animate-in text-foreground/55 rounded-full px-2.5 py-1.5 duration-300\",\n            )}\n          >\n            {scope === \"denied\" ? \"denied\" : `granted · ${scope}`}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}