{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "connector-edge",
  "type": "registry:component",
  "title": "Connector Edge",
  "description": "Curved edge between canvas objects with optional inline label state.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/connector-edge/connector-edge.tsx",
      "content": "import { forwardRef } from \"react\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { EdgeLabel } from \"@vllnt/ui\";\n\nexport type ConnectorEdgePoint = {\n  x: number;\n  y: number;\n};\n\nexport type ConnectorEdgeProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  end: ConnectorEdgePoint;\n  label?: string;\n  start: ConnectorEdgePoint;\n  state?: \"active\" | \"blocked\" | \"idle\";\n};\n\nconst strokeClasses: Record<\n  NonNullable<ConnectorEdgeProps[\"state\"]>,\n  string\n> = {\n  active: \"stroke-sky-500\",\n  blocked: \"stroke-amber-500\",\n  idle: \"stroke-muted-foreground/60\",\n};\n\nconst ConnectorEdge = forwardRef<HTMLDivElement, ConnectorEdgeProps>(\n  ({ className, end, label, start, state = \"idle\", ...props }, ref) => {\n    const width = Math.max(Math.abs(end.x - start.x), 32);\n    const height = Math.max(Math.abs(end.y - start.y), 32);\n    const midX = width / 2;\n    const startX = start.x <= end.x ? 4 : width - 4;\n    const endX = start.x <= end.x ? width - 4 : 4;\n    const startY = start.y <= end.y ? 4 : height - 4;\n    const endY = start.y <= end.y ? height - 4 : 4;\n    const path = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;\n\n    const style = {\n      height,\n      width,\n    } satisfies CSSProperties;\n\n    return (\n      <div\n        className={cn(\"relative inline-flex\", className)}\n        ref={ref}\n        style={style}\n        {...props}\n      >\n        <svg\n          className=\"overflow-visible\"\n          height={height}\n          viewBox={`0 0 ${width} ${height}`}\n          width={width}\n        >\n          <path\n            className={cn(\"fill-none stroke-[2.5]\", strokeClasses[state])}\n            d={path}\n            strokeDasharray={state === \"blocked\" ? \"4 4\" : undefined}\n            strokeLinecap=\"round\"\n          />\n        </svg>\n        {label ? (\n          <EdgeLabel\n            className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\"\n            emphasis={state === \"active\" ? \"active\" : \"subtle\"}\n          >\n            {label}\n          </EdgeLabel>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nConnectorEdge.displayName = \"ConnectorEdge\";\n\nexport { ConnectorEdge };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}