{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "terminal-node",
  "title": "Terminal node",
  "description": "Approved and rejected outcome pills for React Flow.",
  "dependencies": [
    "@xyflow/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://approvals-ui.vercel.app/r/approval-node.json",
    "https://approvals-ui.vercel.app/r/approvals-core.json"
  ],
  "files": [
    {
      "path": "components/approvals-ui/terminal-node.tsx",
      "content": "\"use client\";\n\nimport { Handle, type Node, type NodeProps, Position } from \"@xyflow/react\";\nimport { CircleCheck, CircleX } from \"lucide-react\";\n\nimport type { StepChange } from \"@/lib/approvals-ui/diff\";\nimport type { TerminalStep } from \"@/lib/approvals-ui/policy\";\nimport type { IssueSeverity } from \"@/lib/approvals-ui/validate\";\n\nimport { stateRing, type StepStatus } from \"@/components/approvals-ui/approval-node\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TerminalNodeData = {\n  step: TerminalStep;\n  change?: StepChange[\"kind\"];\n  issue?: IssueSeverity;\n  status?: StepStatus;\n  selected?: boolean;\n  vertical?: boolean;\n  [key: string]: unknown;\n};\n\nexport type TerminalFlowNode = Node<TerminalNodeData, \"terminal\">;\n\nexport const TerminalNode = ({ data }: NodeProps<TerminalFlowNode>) => {\n  const { step } = data;\n  const isVertical = data.vertical !== false;\n  const isApproved = step.outcome === \"approved\";\n\n  return (\n    <div\n      className={cn(\n        \"bg-card text-card-foreground flex items-center gap-2 rounded-full border px-4 py-2 shadow-sm\",\n        data.status === \"skipped\" && \"opacity-45\",\n        stateRing(data)\n      )}\n    >\n      <Handle\n        type=\"target\"\n        position={isVertical ? Position.Top : Position.Left}\n        className=\"!bg-border !size-2 !border-none\"\n      />\n      {isApproved ? (\n        <CircleCheck className=\"size-4 shrink-0 text-emerald-600 dark:text-emerald-400\" />\n      ) : (\n        <CircleX className=\"size-4 shrink-0 text-red-600 dark:text-red-400\" />\n      )}\n      <span className=\"text-sm leading-none font-medium\">{step.label}</span>\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/approvals-ui/terminal-node.tsx"
    }
  ],
  "type": "registry:component"
}